/* AtlasNex UI v1: the house design system. One file, no build step, no JavaScript. Every AtlasNex surface (atlasnex.com, S1, Nova, Splashdown, Kessler) links this file and sets ONE thing of its own: its beacon, via . Everything else is shared. Served at https://atlasnex.com/ui/v1/atlasnex-ui.css (the path is versioned: never change v1 in a breaking way; ship v2 beside it). Rules this file enforces: - Content is visible without JavaScript and without animation. Motion only decorates. - Colour pairs used for text pass WCAG AA (see ui/README.md for the ratio table). - No em dashes in shipped copy. Not a CSS rule, a house rule. */ @font-face{font-family:Sora;font-weight:600;font-display:swap;src:url(fonts/sora-latin-600-normal.woff2) format('woff2')} @font-face{font-family:Sora;font-weight:700;font-display:swap;src:url(fonts/sora-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')} @font-face{font-family:Kalam;font-weight:700;font-display:swap;src:url(fonts/kalam-latin-700-normal.woff2) format('woff2')} /* ------------------------------------------------------------------ tokens */ :root{ /* house */ --ax-space:#0A1631; --ax-midnight:#060E22; --ax-deep:#050B1C; --ax-panel:#10214A; --ax-star:#F6F4EF; --ax-paper:#FFFFFF; --ax-coral:#F4655B; --ax-coral-ink:#C7372E; --ax-coral-deep:#A92C24; --ax-lunar:#A9B1C4; --ax-mist:#C9D0E0; --ax-ink:#0A1631; --ax-muted:#545D6B; --ax-line:#DDD9CF; --ax-line-dark:rgba(246,244,239,.14); --ax-note:#FFD85A; --ax-pen:#1E3A8A; /* product beacons (decoration and dark-surface text only) */ --ax-nova:#F2B544; --ax-s1:#2FBF8F; --ax-splash:#22A6B3; --ax-kessler:#8B7CF6; /* beacon inks: the same hues darkened to pass AA as text on light surfaces */ --ax-nova-ink:#8A5A00; --ax-s1-ink:#0B7A55; --ax-splash-ink:#0D6E78; --ax-kessler-ink:#5B45D6; /* status */ --ax-ok:#0B7A55; --ax-warn:#8A5A00; --ax-bad:#B42318; /* type */ --ax-display:Sora,system-ui,sans-serif; --ax-body:'Hanken Grotesk',system-ui,sans-serif; --ax-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --ax-hand:Kalam,cursive; --ax-r:14px; --ax-r-lg:22px; --ax-gutter:20px; --ax-max:1160px; --ax-shadow:0 1px 2px rgba(10,22,49,.06),0 8px 24px rgba(10,22,49,.08); /* the active beacon; a product sets data-product on */ --ax-beacon:var(--ax-coral); --ax-beacon-ink:var(--ax-coral-ink); } [data-product=nova]{--ax-beacon:var(--ax-nova);--ax-beacon-ink:var(--ax-nova-ink)} [data-product=s1]{--ax-beacon:var(--ax-s1);--ax-beacon-ink:var(--ax-s1-ink)} [data-product=splash]{--ax-beacon:var(--ax-splash);--ax-beacon-ink:var(--ax-splash-ink)} [data-product=kessler]{--ax-beacon:var(--ax-kessler);--ax-beacon-ink:var(--ax-kessler-ink)} /* ------------------------------------------------------------------ base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font:400 17px/1.6 var(--ax-body);color:var(--ax-ink);background:var(--ax-star)} img,svg{max-width:100%} a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px} :focus-visible{outline:3px solid var(--ax-coral);outline-offset:3px;border-radius:4px} h1,h2,h3,h4{font-family:var(--ax-display);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:0 0 .5em} h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:700} h2{font-size:clamp(1.6rem,3.6vw,2.5rem)} h3{font-size:1.22rem} p{margin:0 0 1em} .ax-wrap{max-width:var(--ax-max);margin:0 auto;padding:0 var(--ax-gutter)} .ax-skip{position:absolute;left:-999px}.ax-skip:focus{left:12px;top:12px;background:#fff;color:var(--ax-ink);padding:8px 12px;z-index:9;border-radius:6px} .ax-mono{font-family:var(--ax-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem} .ax-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--ax-beacon-ink)} .ax-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ax-beacon)} .ax-lead{font-size:clamp(1.08rem,1.6vw,1.24rem);max-width:44ch} .ax-sub{color:var(--ax-muted)} .ax-small{font-size:.86rem} /* ------------------------------------------------------------------ surfaces */ .ax-section{padding:clamp(56px,8vw,96px) 0} .ax-light{background:var(--ax-star);color:var(--ax-ink)} .ax-white{background:var(--ax-paper);color:var(--ax-ink)} .ax-dark{position:relative;overflow:hidden;color:var(--ax-star); background: radial-gradient(1.5px 1.5px at 12% 22%,rgba(246,244,239,.55) 50%,transparent 51%), radial-gradient(1px 1px at 32% 68%,rgba(246,244,239,.45) 50%,transparent 51%), radial-gradient(1.5px 1.5px at 58% 14%,rgba(246,244,239,.4) 50%,transparent 51%), radial-gradient(1px 1px at 78% 48%,rgba(246,244,239,.5) 50%,transparent 51%), radial-gradient(1px 1px at 90% 82%,rgba(246,244,239,.35) 50%,transparent 51%), radial-gradient(1px 1px at 46% 90%,rgba(246,244,239,.3) 50%,transparent 51%), radial-gradient(ellipse at 75% 18%,#1A2F68 0,var(--ax-space) 52%,var(--ax-midnight) 100%)} .ax-dark .ax-kicker{color:var(--ax-beacon)} .ax-dark .ax-lead,.ax-dark .ax-sub{color:var(--ax-lunar)} .ax-dark a{color:var(--ax-star)} /* the orbit: a decorative ellipse behind dark heroes */ .ax-orbit::after{content:"";position:absolute;inset:auto -20% -38% 18%;height:120%;border:2px solid rgba(80,110,190,.28);border-radius:50%;transform:rotate(-14deg);pointer-events:none} /* ------------------------------------------------------------------ header / footer */ .ax-header{background:var(--ax-midnight);color:var(--ax-star);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--ax-line-dark)} .ax-header .ax-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap} .ax-header img.ax-logo{height:28px;width:auto;display:block} .ax-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .ax-nav a{text-decoration:none;color:var(--ax-lunar);font-size:.95rem;padding:8px 10px;border-radius:8px} .ax-nav a:hover,.ax-nav a[aria-current]{color:var(--ax-star);background:rgba(246,244,239,.06)} .ax-nav a.ax-btn{color:#fff;margin-left:8px;padding:9px 16px} .ax-footer{background:var(--ax-midnight);color:var(--ax-lunar);padding:56px 0 36px;font-size:.93rem} .ax-footer .ax-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px} .ax-footer h4{font-family:var(--ax-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--ax-star);margin:0 0 10px} .ax-footer a{color:var(--ax-lunar);text-decoration:none;display:block;margin:6px 0}.ax-footer a:hover{color:var(--ax-star)} .ax-footer .ax-fine{border-top:1px solid var(--ax-line-dark);margin-top:36px;padding-top:18px;font-size:.84rem} .ax-footer .ax-fine a{display:inline} /* ------------------------------------------------------------------ buttons */ .ax-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .ax-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;line-height:1.2;transition:background .15s,border-color .15s} .ax-btn.primary{background:var(--ax-coral-ink);color:#fff}.ax-btn.primary:hover{background:var(--ax-coral-deep)} .ax-btn.ghost{border-color:currentColor;color:inherit} .ax-dark .ax-btn.ghost{border-color:rgba(246,244,239,.45);color:var(--ax-star)}.ax-dark .ax-btn.ghost:hover{border-color:var(--ax-star)} .ax-btn .ax-arrow{transition:transform .15s}.ax-btn:hover .ax-arrow{transform:translateX(3px)} /* ------------------------------------------------------------------ status label: the only five words a product may use */ .ax-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--ax-mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:4px 11px;white-space:nowrap} .ax-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .ax-status.live{color:var(--ax-ok)}.ax-status.beta{color:var(--ax-s1-ink)}.ax-status.preview{color:var(--ax-pen)}.ax-status.oss{color:var(--ax-muted)}.ax-status.waitlist{color:var(--ax-warn)} .ax-dark .ax-status{color:var(--ax-star)} /* ------------------------------------------------------------------ grid + cards */ .ax-grid{display:grid;gap:18px}.ax-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.ax-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.ax-g4{grid-template-columns:repeat(4,minmax(0,1fr))} .ax-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center} .ax-card{background:var(--ax-paper);border:1px solid var(--ax-line);border-radius:var(--ax-r);padding:24px;display:flex;flex-direction:column;box-shadow:var(--ax-shadow)} .ax-dark .ax-card{background:rgba(16,33,74,.72);border-color:var(--ax-line-dark);box-shadow:none} .ax-product{position:relative;text-decoration:none;color:inherit;border-top:4px solid var(--ax-beacon);transition:transform .15s,box-shadow .15s} .ax-product:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,22,49,.14)} .ax-product h3{margin:14px 0 2px;font-size:1.4rem} .ax-product .ax-q{font-family:var(--ax-display);font-weight:600;font-size:1.02rem;margin-bottom:10px;color:var(--ax-beacon-ink)} .ax-product .ax-real{font-size:.9rem;color:var(--ax-muted);border-top:1px dashed var(--ax-line);margin-top:auto;padding-top:12px} .ax-product .ax-more{font-weight:600;margin-top:12px} /* ------------------------------------------------------------------ the Check Receipt: identical on every product */ .ax-receipt{background:var(--ax-midnight);color:var(--ax-star);border-radius:var(--ax-r);font-family:var(--ax-mono);font-size:.88rem;line-height:1.55;border:1px solid var(--ax-line-dark);box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden} .ax-receipt header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px dashed rgba(246,244,239,.2);background:rgba(246,244,239,.04);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ax-lunar)} .ax-receipt header b{color:var(--ax-beacon);font-weight:500} .ax-receipt dl{margin:0;padding:14px 18px 16px;display:grid;grid-template-columns:8.6em 1fr;gap:8px 14px} .ax-receipt dt{color:var(--ax-lunar);font-size:.76rem;letter-spacing:.06em;padding-top:.15em} .ax-receipt dd{margin:0} .ax-receipt dd b{color:#fff;font-weight:500} .ax-receipt .ax-no dt,.ax-receipt .ax-no dd{color:#FFB4AE} .ax-receipt footer{padding:10px 18px;border-top:1px dashed rgba(246,244,239,.2);font-size:.72rem;color:var(--ax-lunar)} .ax-receipt footer a{color:var(--ax-lunar)} /* ------------------------------------------------------------------ facts: a number always travels with its source */ .ax-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .ax-fact{background:var(--ax-paper);border:1px solid var(--ax-line);border-radius:var(--ax-r);padding:20px 20px 16px;display:flex;flex-direction:column} .ax-fact b{font-family:var(--ax-display);font-weight:700;font-size:clamp(2rem,4vw,2.6rem);line-height:1;letter-spacing:-.03em;display:block;margin-bottom:8px} .ax-fact span{font-weight:600} .ax-fact small{display:block;margin-top:auto;padding-top:12px;font-family:var(--ax-mono);font-size:.68rem;letter-spacing:.04em;color:var(--ax-muted);text-transform:none} .ax-dark .ax-fact{background:rgba(16,33,74,.6);border-color:var(--ax-line-dark)}.ax-dark .ax-fact small{color:var(--ax-lunar)} /* ------------------------------------------------------------------ Nex's note: at most one per screen, only for a tip */ .ax-note{font-family:var(--ax-hand);font-weight:700;color:var(--ax-pen);background:var(--ax-note);padding:14px 18px;border-radius:6px;transform:rotate(-2deg);display:inline-block;box-shadow:0 8px 24px rgba(0,0,0,.22);font-size:1.12rem;line-height:1.3} .ax-nex{width:100%;height:auto;display:block} /* ------------------------------------------------------------------ lists, tables, prose */ .ax-list{padding:0;margin:0;list-style:none} .ax-list li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--ax-line)} .ax-list li::before{content:"";position:absolute;left:4px;top:18px;width:12px;height:12px;border-radius:50%;border:2px solid var(--ax-beacon)} .ax-dark .ax-list li{border-color:var(--ax-line-dark)} .ax-list.ax-no li::before{border-color:var(--ax-bad);background:linear-gradient(45deg,transparent 45%,var(--ax-bad) 45% 55%,transparent 55%)} .ax-steps{counter-reset:s;display:grid;gap:18px} .ax-steps>li{list-style:none;counter-increment:s;position:relative;padding-left:58px} .ax-steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--ax-mono);font-weight:500;font-size:.8rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ax-ink);color:var(--ax-star)} .ax-dark .ax-steps>li::before{background:var(--ax-beacon);color:var(--ax-ink)} .ax-steps h3{margin-bottom:4px} table.ax-table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--ax-paper);border-radius:var(--ax-r);overflow:hidden;border:1px solid var(--ax-line)} .ax-table th,.ax-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--ax-line);vertical-align:top} .ax-table th{font-family:var(--ax-mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ax-muted);background:#FBFAF7} .ax-table tr:last-child td{border-bottom:0} .ax-table code,.ax-prose code{font-family:var(--ax-mono);font-size:.86em;background:#EDEAE2;padding:.1em .35em;border-radius:4px;word-break:break-word} .ax-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .ax-prose{max-width:760px}.ax-prose h2{margin-top:1.5em} .ax-chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--ax-line);background:var(--ax-paper);border-radius:10px;padding:6px 10px;font-size:.88rem} .ax-chip b{font-family:var(--ax-mono);font-weight:500} .ax-chips{display:flex;flex-wrap:wrap;gap:8px} .ax-install{font-family:var(--ax-mono);background:var(--ax-midnight);color:var(--ax-star);border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:center;overflow-x:auto} .ax-install::before{content:"$";color:var(--ax-beacon)} /* ------------------------------------------------------------------ responsive + motion */ @media (max-width:900px){ .ax-split{grid-template-columns:1fr}.ax-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.ax-g3{grid-template-columns:1fr} .ax-footer .ax-cols{grid-template-columns:1fr 1fr} } @media (max-width:560px){ body{font-size:16px}.ax-g4,.ax-g2{grid-template-columns:1fr} .ax-nav a{padding:6px 7px;font-size:.9rem}.ax-nav a.ax-btn{display:none} .ax-receipt dl{grid-template-columns:1fr;gap:2px}.ax-receipt dd{margin-bottom:8px} .ax-footer .ax-cols{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} @media print{.ax-header,.ax-footer,.ax-btns{display:none}.ax-dark{background:#fff;color:#000}}