/* ========================================================================== Design tokens — color system, type, spacing, motion Phosphor color lives here only. Swap the whole palette by editing :root. ========================================================================== */ :root { /* Per-section phosphor hues. Lime/amber/purple are permutations of the same three channel magnitudes (255, 157, 74) — each just puts the peak in a different channel (G/R/B) — so contrast + bloom stay identical across hues. White is a genuine neutral, not a permutation. Raw values stay here per the "colors live in :root" rule; the semantic --bg / --phosphor / etc. tokens below are what components actually use, and get remapped per view by the .theme-* classes toggled on . */ /* The -dim / -mut alphas below are contrast-tuned, not eyeballed — don't round them off. Both tiers were raised once (2026-09-12) after measuring every hue composited over its own --bg-panel: -mut is body/secondary TEXT. At 0.929rem regular weight WCAG 1.4.3 wants 4.5:1 (the 18.66px large-text exemption needs BOLD text; regular needs 24px, which this isn't). amber .67 and purple .76 measured ~4.77:1 / ~4.73:1 — passing, with under 0.3 units of headroom — so they went to .72 / .80 (~5.3:1 / ~5.15:1). lime and white were already ≥5.2:1 and were left alone. The ceiling is the point: much past ~.85 and -mut starts closing on -hi, and the dim/mut/hi/full hierarchy that carries the whole HUD read flattens out. -dim is never text — only --bracket-color, border-color, scrollbar-color, and two backgrounds — so 1.4.11's 3:1 non-text floor applies and it already passed (~3.16–3.34:1). +0.05 flat buys margin (~3.55–3.96:1) for future border/UI uses. +0.08 was rejected: it puts lime and white at 4.2–4.3 against -mut floors of 4.73+, compressing the gap to under half a contrast unit, and a hairline that no longer reads as dimmer than the text it frames stops doing its job. Both tiers are alpha-only. The @font-palette-values blocks below restate the FULL-STRENGTH hexes, so they are unaffected by these two lines — that hand-sync only fires if a --phosphor-* base hex changes. */ --bg-lime: #040903; --bg-panel-lime: #080f06; --phosphor-lime: #9dff4a; --phosphor-lime-hi: #c4ff5e; --phosphor-lime-dim: rgba(157, 255, 74, 0.45); --phosphor-lime-mut: rgba(157, 255, 74, 0.55); --scanline-lime: rgba(157, 255, 74, 0.04); --bg-amber: #090403; --bg-panel-amber: #0f0806; --phosphor-amber: #ff9d4a; --phosphor-amber-hi: #ffc45e; --phosphor-amber-dim: rgba(255, 157, 74, 0.57); --phosphor-amber-mut: rgba(255, 157, 74, 0.72); --scanline-amber: rgba(255, 157, 74, 0.04); --bg-purple: #040309; --bg-panel-purple: #08060f; --phosphor-purple: #c084fc; --phosphor-purple-hi: #dd95ff; --phosphor-purple-dim: rgba(192, 132, 252, 0.63); --phosphor-purple-mut: rgba(192, 132, 252, 0.80); --scanline-purple: rgba(192, 132, 252, 0.04); --bg-white: #060606; --bg-panel-white: #0d0d0d; --phosphor-white: #f5f5f0; --phosphor-white-hi: #ffffff; --phosphor-white-dim: rgba(245, 245, 240, 0.43); --phosphor-white-mut: rgba(245, 245, 240, 0.55); --scanline-white: rgba(245, 245, 240, 0.04); /* color — defaults to white (landing + About use this with no theme class needed; Graphic Design / Presentations / Motion & 3D override via .theme-* below) */ --bg: var(--bg-white); --bg-panel: var(--bg-panel-white); --phosphor: var(--phosphor-white); --phosphor-hi: var(--phosphor-white-hi); --phosphor-dim: var(--phosphor-white-dim); --phosphor-mut: var(--phosphor-white-mut); --alert: #ff3b3b; --scanline: var(--scanline-white); /* Which flat COLRv1 palette --font-display renders with. Remapped by the .theme-* blocks in step with --phosphor. */ --display-palette: --display-white; /* BLED axis on --font-display (0-100): how far each pixel blooms into its neighbours. One value for the wordmark and every heading so the display face reads as one voice. Past ~40 the counters in small headings start closing up. */ --display-bleed: 26; /* type — every font-size in the site is a rem multiple of this one root value (see layout.css `html`), so the whole type scale resizes from here. 19.6px = 14px original base × 1.4. */ --font-mono: "Geist Pixel", "Share Tech Mono", "IBM Plex Mono", monospace; /* Display face — currently only the landing wordmark. Variable pixel/CRT font with BLED (bleed) and SCAN (scanline) axes; see .title-row__wordmark for the instance we run it at. */ --font-display: "Sixtyfour Convergence", var(--font-mono); --tracking-label: 0.12em; --type-scale-base: 19.6px; /* spacing — tight, fixed values only, no percentage margins */ --frame-inset: 20px; --gap-xs: 6px; --gap-sm: 10px; --gap-md: 16px; /* Height of the mobile drawer tabs (project list pulls down from the top, case-study copy pulls up from the bottom). One value so the two always reserve the same band at their respective edges. 44px = touch target. */ --mdrawer-tab-h: 44px; /* motifs — CRT-style bloom. --glow-text uses em units and currentColor, so ONE token auto-scales: soft on small labels, dramatic on big headings/numbers, and always matches whatever color the text already is (brightens for free on hover states that swap in --phosphor-hi). Blur ratio 1:3:6 matches the reference glow this was matched to. */ --border-hair: 2px solid var(--phosphor-dim); /* GLOW DISABLED — both bloom tokens neutralized to `none` while we look at the site flat. Every glow in the build routes through these two, so restoring is a matter of swapping the live lines back for the originals kept below. */ --glow-text: none; --glow-panel: none; /* --glow-text: 0 0 0.05em currentColor, 0 0 0.15em currentColor, 0 0 0.3em currentColor; --glow-panel: 0 0 16px -2px var(--bracket-color, var(--phosphor-dim)), inset 0 0 16px -4px var(--bracket-color, var(--phosphor-dim)); */ } /* Sixtyfour Convergence is a COLRv1 COLOR font — it paints its own red/green/ blue convergence palette and ignores `color`, which would drop hardcoded red text on top of a site whose every hue is a phosphor token. One flat palette per section hue puts the display face back under the theme system: .theme-* below remaps --display-palette alongside --phosphor, and every element on --font-display reads `font-palette: var(--display-palette)`. override-colors takes absolute colors only — no var(), no currentColor — so these four hexes restate --phosphor-white/lime/amber/purple above and have to be kept in sync with them by hand. Eight entries covers the font's palette. To see the font's native RGB convergence instead, drop the font-palette declarations in views.css. */ @font-palette-values --display-white { font-family: "Sixtyfour Convergence"; override-colors: 0 #f5f5f0, 1 #f5f5f0, 2 #f5f5f0, 3 #f5f5f0, 4 #f5f5f0, 5 #f5f5f0, 6 #f5f5f0, 7 #f5f5f0; } @font-palette-values --display-lime { font-family: "Sixtyfour Convergence"; override-colors: 0 #9dff4a, 1 #9dff4a, 2 #9dff4a, 3 #9dff4a, 4 #9dff4a, 5 #9dff4a, 6 #9dff4a, 7 #9dff4a; } @font-palette-values --display-amber { font-family: "Sixtyfour Convergence"; override-colors: 0 #ff9d4a, 1 #ff9d4a, 2 #ff9d4a, 3 #ff9d4a, 4 #ff9d4a, 5 #ff9d4a, 6 #ff9d4a, 7 #ff9d4a; } @font-palette-values --display-purple { font-family: "Sixtyfour Convergence"; override-colors: 0 #c084fc, 1 #c084fc, 2 #c084fc, 3 #c084fc, 4 #c084fc, 5 #c084fc, 6 #c084fc, 7 #c084fc; } /* Remaps the semantic tokens per section — toggled on by main.js as the active view/section changes. */ .theme-graphic-design { --bg: var(--bg-lime); --bg-panel: var(--bg-panel-lime); --phosphor: var(--phosphor-lime); --phosphor-hi: var(--phosphor-lime-hi); --phosphor-dim: var(--phosphor-lime-dim); --phosphor-mut: var(--phosphor-lime-mut); --scanline: var(--scanline-lime); --display-palette: --display-lime; /* --border-hair is defined once at :root using --phosphor-dim — since custom-property inheritance carries a computed value down, not a live reference, it never picks up this block's own --phosphor-dim unless redeclared here too. Without this, every themed border silently inherits :root's default white-ish hairline instead of the theme color. */ --border-hair: 2px solid var(--phosphor-dim); } .theme-presentations { --bg: var(--bg-amber); --bg-panel: var(--bg-panel-amber); --phosphor: var(--phosphor-amber); --phosphor-hi: var(--phosphor-amber-hi); --phosphor-dim: var(--phosphor-amber-dim); --phosphor-mut: var(--phosphor-amber-mut); --scanline: var(--scanline-amber); --display-palette: --display-amber; --border-hair: 2px solid var(--phosphor-dim); } .theme-motion-3d { --bg: var(--bg-purple); --bg-panel: var(--bg-panel-purple); --phosphor: var(--phosphor-purple); --phosphor-hi: var(--phosphor-purple-hi); --phosphor-dim: var(--phosphor-purple-dim); --phosphor-mut: var(--phosphor-purple-mut); --scanline: var(--scanline-purple); --display-palette: --display-purple; --border-hair: 2px solid var(--phosphor-dim); } /* Mobile token steps — fixed px per breakpoint, never percentage-based, to keep the tight/fixed-inset density philosophy at small sizes. */ @media (max-width: 900px) { :root { --frame-inset: 14px; --type-scale-base: 17px; } } @media (max-width: 600px) { :root { --frame-inset: 8px; --gap-md: 12px; --type-scale-base: 15px; } }