/* ============================================================ TOKENS ------------------------------------------------------------ Two themes, one set of names. Everything theme-dependent lives in the two blocks below — including the background gradients themselves, which are held whole in custom properties so the animation rules in base.css never have to know which mode is on. The theme is written to by a tiny inline script in , before first paint, so the page never flashes the wrong mode. ============================================================ */ :root { /* ---- constants across both themes ---------------------------- */ --red: #e5261c; --red-bright: #ff3b2f; --display: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif; --body: 'General Sans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --step--2: clamp(0.66rem, 0.62rem + 0.18vw, 0.76rem); --step--1: clamp(0.79rem, 0.74rem + 0.24vw, 0.92rem); --step-0: clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem); --step-1: clamp(1.25rem, 1.13rem + 0.60vw, 1.60rem); --step-3: clamp(2.10rem, 1.55rem + 2.70vw, 3.80rem); --step-5: clamp(3.60rem, 1.10rem + 11.4vw, 11.5rem); --tracking-wide: 0.34em; --tracking-mid: 0.16em; --gutter: clamp(1.25rem, 0.7rem + 2.6vw, 3.5rem); /* The section rail lives in the right gutter. --rail-space keeps the content column out from under it at every width it is shown. */ --rail-space: 0px; --shell: min(1240px, 100vw - (var(--gutter) * 2) - var(--rail-space)); --bay: clamp(6rem, 4rem + 9vw, 12rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 240ms; --t-mid: 520ms; --t-slow: 900ms; } /* ============================================================ DARK — the default. A near-black room with concentrated pools of light in it rather than an even grey wash: the blooms are small and low-alpha and the vignette bites early, so there is real black between them. A wide value range is what stops a moving gradient reading as haze. ============================================================ */ :root[data-theme="dark"] { --pitch: #050507; --ink: #f1f1f4; --ink-soft: rgba(241, 241, 244, 0.58); --ink-faint: rgba(241, 241, 244, 0.30); --hot: #ff3b2f; --hot-soft: rgba(255, 59, 47, 0.72); --line: rgba(255, 255, 255, 0.15); --line-soft: rgba(255, 255, 255, 0.08); --glass: rgba(255, 255, 255, 0.045); --glass-lit: rgba(255, 255, 255, 0.09); --glow-ink: rgba(255, 255, 255, 0.20); --glow-hot: rgba(255, 59, 47, 0.5); --haze-rgb: 10, 10, 14; /* what far picture frames fade into */ --grain-blend: screen; --grain-alpha: 0.13; /* also dithers banding in the dark */ --sheen-a: linear-gradient(115deg, #050507 0%, #15161d 26%, #060608 48%, #111219 70%, #050507 100%); --sheen-b: linear-gradient(202deg, rgba(5,5,7,0) 0%, rgba(36,38,52,0.5) 30%, rgba(5,5,7,0) 58%, rgba(24,26,36,0.4) 82%, rgba(5,5,7,0) 100%); --bloom-a: radial-gradient(closest-side, rgba(78, 84, 110, 0.26) 0%, rgba(78, 84, 110, 0.09) 40%, rgba(78, 84, 110, 0) 100%); --bloom-b: radial-gradient(closest-side, rgba(44, 48, 68, 0.44) 0%, rgba(44, 48, 68, 0.16) 40%, rgba(44, 48, 68, 0) 100%); --bloom-c: radial-gradient(closest-side, rgba(150, 38, 26, 0.20) 0%, rgba(150, 38, 26, 0.07) 40%, rgba(150, 38, 26, 0) 100%); --bloom-d: radial-gradient(closest-side, rgba(56, 60, 80, 0.34) 0%, rgba(56, 60, 80, 0.12) 42%, rgba(56, 60, 80, 0) 100%); --vignette: radial-gradient(112% 88% at 50% 44%, rgba(5,5,7,0) 24%, rgba(5,5,7,0.55) 68%, rgba(5,5,7,0.9) 100%); } /* ============================================================ LIGHT — the same room with the lights up. Same structure, inverted values: paper base, white blooms, one warm one. ============================================================ */ :root[data-theme="light"] { --pitch: #e9e9ec; --ink: #131316; --ink-soft: rgba(19, 19, 22, 0.62); --ink-faint: rgba(19, 19, 22, 0.38); --hot: #d81f14; --hot-soft: rgba(216, 31, 20, 0.72); --line: rgba(19, 19, 22, 0.18); --line-soft: rgba(19, 19, 22, 0.10); --glass: rgba(255, 255, 255, 0.5); --glass-lit: rgba(255, 255, 255, 0.78); /* A light halo on light paper is invisible and a dark one just looks like smudged ink, so display type simply goes clean here. The red keeps a whisper of its glow. */ --glow-ink: transparent; --glow-hot: rgba(216, 31, 20, 0.26); --haze-rgb: 233, 233, 236; --grain-blend: multiply; --grain-alpha: 0.10; --sheen-a: linear-gradient(115deg, #f7f7f9 0%, #e3e3e8 26%, #f5f5f7 48%, #e7e7ec 70%, #f7f7f9 100%); --sheen-b: linear-gradient(202deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 30%, rgba(255,255,255,0) 58%, rgba(206,207,216,0.45) 82%, rgba(255,255,255,0) 100%); --bloom-a: radial-gradient(closest-side, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 42%, rgba(255, 255, 255, 0) 100%); --bloom-b: radial-gradient(closest-side, rgba(190, 193, 208, 0.5) 0%, rgba(190, 193, 208, 0.18) 42%, rgba(190, 193, 208, 0) 100%); --bloom-c: radial-gradient(closest-side, rgba(226, 122, 108, 0.24) 0%, rgba(226, 122, 108, 0.08) 42%, rgba(226, 122, 108, 0) 100%); --bloom-d: radial-gradient(closest-side, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.26) 44%, rgba(255, 255, 255, 0) 100%); --vignette: radial-gradient(112% 88% at 50% 44%, rgba(196,197,206,0) 30%, rgba(196,197,206,0.35) 72%, rgba(190,191,201,0.6) 100%); } /* Nothing has claimed a theme yet (inline script blocked): behave like the dark default rather than rendering unstyled. */ :root:not([data-theme]) { --pitch: #050507; --ink: #f1f1f4; --ink-soft: rgba(241,241,244,0.58); --ink-faint: rgba(241,241,244,0.30); --hot: #ff3b2f; --hot-soft: rgba(255,59,47,0.72); --line: rgba(255,255,255,0.15); --line-soft: rgba(255,255,255,0.08); --glass: rgba(255,255,255,0.045); --glass-lit: rgba(255,255,255,0.09); --glow-ink: rgba(255,255,255,0.20); --glow-hot: rgba(255,59,47,0.5); --haze-rgb: 10,10,14; --grain-blend: screen; --grain-alpha: 0.13; } /* The rail now carries full section names, not just ticks — it needs real room. Panel width is content-driven (max-content), this is just the clearance the shell gives up so nothing runs under it. */ @media (min-width: 1040px) and (min-height: 621px) { :root { --rail-space: 11.5rem; } } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-mid: 1ms; --t-slow: 1ms; } }