/* ============================================================================ themes.css — the three A/B/C arms. The test is over: arm C ("paper") is the site's design and arm A ("noir") is served every third day (see `abBootstrap` in shared/templates.mjs). Arm A remains the CSS *base* and lives in site.css; this file only carries the token overrides for B and C, so the test costs ~2 KB rather than 3×. Everything downstream (games, canvases, sheets) reads the same token names, so a theme swap re-skins the entire site including the playfields. ========================================================================== */ /* --------------------------------------------------------------------------- ARM B — "NEON": arcade cabinet. Deeper black, higher chroma, hard glow, tighter radii, mono-forward typography. Aimed at the teen/arcade audience. --------------------------------------------------------------------------- */ :root[data-theme="b"] body{ --bg:oklch(0.09 0.022 var(--hue)); --bg-deep:oklch(0.055 0.018 var(--hue)); --surface:oklch(0.145 0.032 var(--hue)); --surface-2:oklch(0.195 0.040 var(--hue)); --line:oklch(0.34 0.060 var(--hue)); --text:oklch(0.98 0.010 var(--hue)); --muted:oklch(0.68 0.035 var(--hue)); --accent:oklch(0.80 0.235 var(--hue)); --good:oklch(0.82 0.20 92); --info:oklch(0.72 0.21 235); --danger:oklch(0.66 0.24 20); --r-s:3px; --r-m:5px; --r-l:7px; --r-xl:10px; --edge:inset 0 1px 0 rgb(255 255 255 / .12); --sh-2:0 0 0 1px color-mix(in oklch,var(--accent),transparent 78%), 0 6px 20px rgb(0 0 0 / .6); --sh-3:0 0 0 1px color-mix(in oklch,var(--accent),transparent 66%), 0 18px 50px rgb(0 0 0 / .7); --glow:0 0 34px color-mix(in oklch, var(--accent), transparent 58%); --ease-out:cubic-bezier(.2,.9,.25,1); --t-fast:90ms; --t-base:160ms; } :root[data-theme="b"] h1, :root[data-theme="b"] h2, :root[data-theme="b"] h3{letter-spacing:-.01em;font-weight:700} :root[data-theme="b"] .kicker, :root[data-theme="b"] .tile-tag{letter-spacing:.28em} :root[data-theme="b"] .badge, :root[data-theme="b"] .btn{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem} :root[data-theme="b"] .btn-primary{box-shadow:var(--edge),var(--glow),0 0 0 1px var(--accent)} :root[data-theme="b"] .tile h3{text-transform:uppercase;letter-spacing:.02em} :root[data-theme="b"] .nav{border-bottom:1px solid color-mix(in oklch,var(--accent),transparent 70%)} :root[data-theme="b"] body::after{opacity:.075} /* heavier grain */ :root[data-theme="b"] .stage{box-shadow:var(--edge),var(--sh-3),inset 0 0 60px color-mix(in oklch,var(--accent),transparent 88%)} :root[data-theme="b"] .scoreline{text-shadow:0 0 30px color-mix(in oklch,var(--accent),transparent 40%)} /* --------------------------------------------------------------------------- ARM C — "PAPER": editorial light mode. Warm off-white, ink type, soft shadows, almost no glow. Aimed at the 35+ / word-and-card audience, and at readers arriving on the strategy and how-to-play pages from search. --------------------------------------------------------------------------- */ :root[data-theme="c"] body{ color-scheme:light; --bg:oklch(0.972 0.006 85); --bg-deep:oklch(0.945 0.010 85); --surface:oklch(1 0 0); --surface-2:oklch(0.968 0.008 85); --line:oklch(0.885 0.010 85); --text:oklch(0.235 0.018 var(--hue)); --muted:oklch(0.505 0.020 var(--hue)); --accent:oklch(0.50 0.165 var(--hue)); --accent-hi:color-mix(in oklch, var(--accent), black 12%); --good:oklch(0.52 0.145 55); --info:oklch(0.48 0.155 250); --danger:oklch(0.50 0.185 25); --edge:inset 0 1px 0 rgb(255 255 255 / .9); --sh-1:0 1px 2px rgb(40 30 15 / .07); --sh-2:0 2px 6px rgb(40 30 15 / .07), 0 8px 24px rgb(40 30 15 / .06); --sh-3:0 4px 14px rgb(40 30 15 / .09), 0 20px 48px rgb(40 30 15 / .08); --glow:0 4px 18px color-mix(in oklch, var(--accent), transparent 84%); --r-l:18px; --r-xl:24px; } :root[data-theme="c"] body::before{ background: radial-gradient(900px 520px at 50% -14%, color-mix(in oklch,var(--accent),transparent 92%), transparent 70%), linear-gradient(var(--bg-deep), var(--bg) 46%); } :root[data-theme="c"] body::after{opacity:.022;mix-blend-mode:multiply} :root[data-theme="c"] .nav{background:color-mix(in oklch,var(--bg),transparent 12%)} :root[data-theme="c"] .btn-primary{color:oklch(0.99 0 0)} :root[data-theme="c"] .tile::before{opacity:.28} :root[data-theme="c"] .prose p, :root[data-theme="c"] .prose ul, :root[data-theme="c"] .prose ol{color:oklch(0.30 0.014 var(--hue))} :root[data-theme="c"] .lede{color:oklch(0.42 0.018 var(--hue))} /* an editorial serif accent is the whole point of this arm */ :root[data-theme="c"] h1, :root[data-theme="c"] .sheet h2{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:600;letter-spacing:-.02em} :root[data-theme="c"] .artifact{background:oklch(0.965 0.008 85);box-shadow:inset 0 1px 3px rgb(40 30 15/.10)} :root[data-theme="c"] .sheet-back{background:color-mix(in oklch,oklch(0.40 0.02 85),transparent 45%)} /* the canvas games stay dark — a light playfield would wreck their contrast — so give the arcade stage its own frame instead of inverting it */ :root[data-theme="c"] .stage.arcade-stage{background:#05060a;box-shadow:var(--sh-3)} :root[data-theme="c"] #board.grid{box-shadow:0 0 0 2px var(--line),var(--sh-2)} :root[data-theme="c"] .card{color:oklch(0.22 0.02 260)} :root[data-theme="c"] :root{--wall:oklch(0.20 0.01 260)} :root[data-theme="c"] .stage{--wall:oklch(0.18 0.01 260)} /* the theme switcher in the footer (also the manual override for the test) */ .theme-pick{display:flex;gap:.4rem;align-items:center;margin-top:.9rem} .theme-pick button{ width:26px;height:26px;border-radius:var(--r-s);cursor:pointer;border:1px solid var(--line); background:var(--surface-2);color:var(--muted);font:600 .68rem/1 var(--mono); display:grid;place-items:center;padding:0; } .theme-pick button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:var(--edge),var(--glow)} .theme-pick span{font-size:.72rem;color:var(--muted);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}