/* Shared design system for the "studio" pages (creator-landing.html, about.html) — tokens, base reset, nav, button system, and section rhythm. Both pages are meant to be value-for-value identical here so they read as one site; centralizing this removes the drift risk of maintaining two copies by hand. The /soon beta page (index.html) intentionally keeps its own separate stylesheet — it's a deliberately distinct visual system (fixed nav, different section modifiers, its own effects). */ :root{ --ink: #0a0f0d; --ink-raised: #121a17; --ink-raised-2: #17211d; --line: rgba(63,169,255,.22); --line-soft: rgba(244,246,245,.10); --blue: #3fa9ff; --blue-dim: #7fc7ff; --window: #ffd966; --siren: #ff4136; --paper: #f4f6f5; --paper-dim: rgba(244,246,245,.66); /* .38 measured ~3.4:1 against --ink, below WCAG AA's 4.5:1 for normal text — this tier is used for real content (dev-log dates, section labels, footer meta), not pure decoration, so it needs to actually be readable. .48 computes to ~4.7:1, clearing AA with a small margin, while staying clearly the dimmest tier below --paper-dim (.66) and --paper (full). */ --paper-faint: rgba(244,246,245,.48); --display: "Geist", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Roboto Mono", monospace; --edge: 2px; /* matches /soon's own value exactly — see that file's ROOT VARS comment */ } *,*::before,*::after{ box-sizing:border-box; } html{ color-scheme:dark; background:var(--ink); scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::as{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:inherit; } ::selection{ background:var(--blue); color:#04110a; } :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } /* Two container widths on purpose, not one reused everywhere: most content is prose (paragraphs already cap at 62ch), so the default wrap is sized for reading, not for a dashboard grid. Only the sections that actually lay out multiple columns opt into the wider one via .wrap-wide, same element otherwise. */ .wrap{ max-width:760px; margin:0 auto; padding:0 24px; } .wrap-wide{ max-width:1000px; } /* ---------------------------------------------------------------- */ /* ambient background — a slow, faint drifting glow, nothing loud */ .glow{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .glow::before, .glow::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.16; } .glow::before{ width:560px; height:560px; top:-180px; left:-160px; background:var(--blue); animation:drift1 26s ease-in-out infinite; } .glow::after{ width:460px; height:460px; bottom:-140px; right:-120px; background:var(--siren); opacity:.10; animation:drift2 32s ease-in-out infinite; } @keyframes drift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } } @keyframes drift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,-30px); } } /* ---------------------------------------------------------------- */ /* nav — same component as /soon's own .nav, value-for-value (Colton's ask, 2026-08-03: "one cohesive design choice... stick with them on both"). position:sticky here instead of /soon's position:fixed is the one deliberate difference: these pages' sections weren't built with the top-padding compensation a fixed header needs, and sticky gets the identical stays-pinned-while-scrolling result without that risk. Everything else — the solid-on-scroll backdrop blur, the logo/wordmark sizing, the link treatment, the button system below — matches exactly, not approximately. */ header.nav{ position:sticky; top:0; z-index:40; padding:18px 0; background:linear-gradient(to bottom, rgba(10,15,13,.9), rgba(10,15,13,0)); transition:background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease; border-bottom:1px solid transparent; } header.nav.solid{ background:rgba(10,15,13,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--line); } header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } /* Overrides .wrap-wide's 1000px specifically in the header, matching /soon's own .wrap (1180px max-width, 28px side padding) exactly — Colton's ask, 2026-08-03: the logo should sit at the identical screen position on both pages, not just look like the same logo. */ header.nav .wrap.wrap-wide{ max-width:1180px; padding:0 28px; } .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; } .logo-mark{ width:34px; height:34px; flex-shrink:0; display:block; border-radius:7px; } .brand-word{ font-family:var(--display); font-weight:900; letter-spacing:.02em; font-size:1.05rem; color:var(--paper); transition:color .15s ease; } .brand:hover .brand-word{ color:var(--blue-dim); } .nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; flex-wrap:wrap; row-gap:8px; } .nav-links a{ text-decoration:none; font-size:.86rem; font-weight:600; color:var(--paper-dim); letter-spacing:.02em; padding:6px 0; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; } .nav-links a:hover{ color:var(--paper); border-color:var(--line); } .nav-links a[aria-current="page"]{ color:var(--paper); border-color:var(--blue); } .nav-cta{ display:flex; align-items:center; gap:12px; } /* Scroll progress bar — sits on the sticky nav's own bottom edge (header.nav is already position:sticky, which is enough of a positioned ancestor for this to pin correctly) and fills 0%→100% in --blue as the page scrolls. Width is set by a plain scroll listener (creator-landing.html), same passive-listener pattern as the nav solid-on-scroll handler right next to it — this is a shared/reusable piece of the nav component, not page content, hence living here rather than in that page's own