/* ========================================================= TYPEFLOW — DESIGN SYSTEM One source of truth. Components below only ever read these tokens, so a theme (the body[data-theme="…"] blocks near the end of this file) reskins the whole UI by overriding tokens once — and, new in this redesign, by flipping a small set of "character kit" knobs (surface finish, corner language, the signature accent detail) so themes read as distinct moods, not just palettes. Token groups: palette · type · shape · depth · character · motion ========================================================= */ :root { /* PALETTE — "precision" dark. A near-black cooled a touch blue and an INK accent: the accent is the text colour itself (near-white here, near-black in the light default), so active states, the caret and the primary action read as solid ink with no hue competing. Colour is left to semantic states (success / danger / live) and to the purchasable themes below, so every unlock is a real change. */ --bg: #0a0c10; --surface: #14171f; --surface-2: #1c2029; --text: #edeff3; --muted: #9ba3b4; /* Derived from the tokens above so a theme block that only sets bg / surface / surface-2 / text / accent still gets all of them. OPAQUE mixes toward --surface (not a transparent tint — that barely registered on a dark surface), landing near the hand-picked light default's border weight. The light default overrides --border / --border-strong below with exact greys. */ --surface-3: color-mix(in srgb, var(--surface-2) 82%, var(--text)); /* hover / pressed */ --border: color-mix(in srgb, var(--surface) 87%, var(--text)); --border-strong: color-mix(in srgb, var(--surface) 70%, var(--text)); /* Untyped test characters, disabled text, faint labels. */ --faint: color-mix(in srgb, var(--muted) 55%, var(--bg)); --accent: #f2f4f7; /* Hover brightens toward the text colour (lighter on dark themes, darker on light — right either way); press deepens. Both derive so a theme only has to set --accent. */ --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text)); --accent-press: color-mix(in srgb, var(--accent) 84%, #000); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); /* Text/icons ON a solid --accent fill — dark here (a near-white pill with an ink label); white on the light default below, where the accent is near-black. */ --on-accent: #0a0c10; /* Kept (≈40 rules reference it) but the redesign retires the violet→coral gradient: it's now just a lighter tint of the one accent, for the few places a second stop still earns its keep (charts, one hero sweep). */ --accent-2: #b4bbc8; --success: #35c98b; --danger: #ff5c5c; --warning: #f5a623; /* TYPE */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font); /* headings + big numerals — a theme may swap */ --test-font: var(--font); /* the typing passage — code mode forces mono */ /* SHAPE — tighter than before (was 10/16/24). A theme can go sharper (cyber, terminal, obsidian) or softer (sakura, linen, lilac). */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; /* DEPTH — elevation reads from a crisp hairline plus a short, tight shadow, not a big soft blur. A dark drop-shadow is doing nothing here — the page behind a card is already near-black, so a black shadow has no ground to show against (verified: computed box-shadow renders, but is genuinely invisible). Light mode's identical shadow formula works because it sits on white. The fix dark UIs actually use: a card "catches light" via a faint inset highlight along its top edge instead of relying on a shadow that can't read against a dark ground — every --shadow-* below pairs one with the drop-shadow (harmless if the drop-shadow doesn't show; it's what now gives cards their visible lift). */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.045); --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-lg: 0 28px 64px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); /* CARET — one set of knobs, read by the per-character ::before caret, the floating smooth caret (.live-caret), and the customize-modal preview bar alike. A cursor skin reskins the caret purely by overriding these, so a skin now shows in every caret mode (previously each skin hard-styled ::before and nothing else). The caret-shape display pref layers geometry on top. */ --caret-bg: var(--accent); --caret-bg-size: auto; --caret-glow: none; /* the ink default needs no halo; themes set their own */ --caret-anim: blink 1.1s var(--ease) infinite; --caret-width: 2px; --caret-clip: none; /* CHARACTER KIT — neutral defaults so component rules can read them unconditionally; theme blocks near the end of the file flip them. Deliberately NOT here: radius/shadow/font. Every theme shares those, so the shell/layout never reshapes when you switch themes — only colour, the signature accent below, and a theme's own background layer do. */ --card-border: 1px solid var(--border); /* premium themes → a gradient frame */ --pill-active-bg: var(--accent); /* the signature detail: a solid ink pill */ --pill-active-fg: var(--on-accent); --pill-active-ring: none; /* MOTION */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; /* LAYOUT — every full-width page region (header, home sections, the word box, results, community, dashboard, shop, profile, race, achievements, footer) is exactly `min(--container, 100% - 2*--gutter)` and centred, so their left/right edges line up down the whole page. --container-narrow is for single-column reading pages (legal, contact, account settings). Nothing sets its own width outside this system. */ --container: 1080px; --container-narrow: 680px; --gutter: 24px; color-scheme: dark; } /* The one width utility. Every page shell resolves to this. */ .shell, .page-container, .site-header-inner, .results-shell, .home-today, .home-community, .dashboard-shell, .profile-container, .race-track-shell, .race-lobby-shell, .settings-shell, .legal-page, .footer-inner, .footer-bottom, .daily-challenge-bar, #word-container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; } .legal-page, .settings-shell { width: min(var(--container-narrow), 100% - 2 * var(--gutter)); } @media (max-width: 600px) { :root { --gutter: 16px; } } /* The default LIGHT look — shown to logged-out / no-theme-equipped visitors whose OS asks for light. Not an inverted afterthought: the ink accent becomes near-black (the light --text), and --on-accent flips to white (the filled button becomes a solid black pill). Theme blocks set these same properties on , which always beats what :root gives here regardless of source order. */ @media (prefers-color-scheme: light) { :root { --bg: #fafbff; --surface: #ffffff; --surface-2: #f2f4f9; --surface-3: #e8ebf2; --border: #e5e8f0; --border-strong: #cfd5e2; --text: #10131a; --muted: #5c6475; --accent: #10131a; --accent-hover: #2a2f3a; --accent-press: #000000; --accent-soft: rgba(16, 19, 26, 0.07); --on-accent: #ffffff; --accent-2: #5c6475; --success: #12905c; --danger: #d92d2d; --warning: #b26a00; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12); --shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, 0.16); color-scheme: light; } } /* Honour a reduced-motion request — this site has ~40 decorative animations (theme shimmer sweeps, particle drifts, ambient pulses, the caret blink) and had zero handling for it before. Near-instant rather than a hard 0 so state changes still register. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================= THEMES — token blocks + character kits Slugs match the real ShopItem catalog (item_type "theme" / "limited"). Each block sets its palette and flips whichever "kit" knobs (radii, surface finish, the --pill-active-* signature, fonts) give it a personality beyond colour. Tokens NOT set here derive from the ones that are (see the color-mix defaults in :root) — so --accent-soft / --border / --accent-hover / --surface-3 / --border-strong usually don't need restating. `[data-theme-scope="x"]` is an alias on every block so the customize-modal swatch can render a real mini-preview by scoping the theme's tokens locally. Decorative ::before / background layers stay body-only and live further down. Reusable font stacks: mono → ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Source Code Pro', Menlo, Consolas, monospace serif → 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, Cambria, 'Times New Roman', serif ========================================================= */ /* Borders + elevation + the hover surface, one rule for all 28 equippable themes. A NEUTRAL translucent edge — light-dark() reads each theme's own color-scheme and picks the right one, so no hue pickup on either side. (The old `color-mix(--surface 87%, --text 13%)` mixed 13% near-white into a saturated dark surface and rendered as a bright coloured outline.) The free default (:root + the light @media block) keeps its own hand-picked greys and is untouched by this. */ body[data-theme], [data-theme-scope] { --border: light-dark(rgba(17, 24, 39, 0.11), rgba(255, 255, 255, 0.12)); --border-strong: light-dark(rgba(17, 24, 39, 0.22), rgba(255, 255, 255, 0.22)); --surface-3: color-mix(in srgb, var(--surface-2), light-dark(#0b1120, #ffffff) 7%); /* Re-declared here (not just inherited from :root) so its var(--border) substitutes THIS theme's border. Premium themes override it below with a gradient frame. */ --card-border: 1px solid var(--border); /* Resting-card elevation for the DARK themes — a black drop shadow is invisible on a near-black page, so the card reads from a bright hairline along its top edge plus a tight ambient shadow. Set here (not left to inherit from the @media (prefers-color-scheme) :root block) so a dark theme looks right even when the viewer's OS is in light mode. All ten light theme blocks set their own soft drop shadow and win over this; --shadow-md / --shadow-lg (hover, modals) are left alone. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07); /* Everything that derives from --accent, re-declared on this element so var(--accent) re-substitutes per theme. On :root these read the light default's --accent (#10131a) and then inherit down as that frozen string — which is why the signature "active pill" was blue on every theme regardless of its accent. A theme block may still set any of these explicitly and win (it's later in the cascade). */ --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-hover: color-mix(in srgb, var(--accent) 86%, var(--text)); --accent-press: color-mix(in srgb, var(--accent) 84%, #000); --pill-active-bg: var(--accent-soft); --pill-active-fg: var(--accent); --pill-active-ring: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); --faint: color-mix(in srgb, var(--muted) 55%, var(--bg)); --caret-bg: var(--accent); --caret-glow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } /* ---- NIGHT / DARK family --------------------------------------------- Solid surfaces, soft elevation, the slim bar caret. */ /* The quiet one — even darker and more neutral than the default, zero texture, zero motion, a muted steel-indigo accent. "Lights off." */ body[data-theme="focus-dark"], [data-theme-scope="focus-dark"] { --bg: #0a0e17; --surface: #131826; --surface-2: #1b2233; --text: #eef2f8; --muted: #93a0b6; --accent: #8896ff; --accent-2: #55d6d0; --on-accent: #0a0e1c; color-scheme: dark; } /* Moonlight on water — a saturated deep navy (where focus-dark is neutral), a clean moonlit-blue accent, pale silver secondary. A low shimmer band + sparse far stars (see ::before). */ /* Midnight — moonlight on water. A calm, slightly desaturated navy with a muted moonlit-steel accent; the one decorative touch is a soft moon glow in a corner (static). */ /* Midnight — the moonlit one, not the starry one (that's Galaxy). Accent shifted from a fairly generic sky-blue to a paler, cooler moonlight tone so it doesn't just read as "another dark blue theme" — see the ::before moon disc below for the other half of this fix. */ body[data-theme="midnight"], [data-theme-scope="midnight"] { --bg: #080d1a; --surface: #121a30; --surface-2: #1c2540; --text: #e8ecf6; --muted: #8891ab; --accent: #9fb3dc; --accent-2: #5f7bb0; --accent-soft: rgba(159, 179, 220, 0.13); --on-accent: #080d1a; color-scheme: dark; } /* Deep Ocean — restored to the exact original (2026-09-15, commit fc35d28~1) after four straight rejected attempts to "improve" this slot (Fathom x2, Cadence, Marble — "the look of marble is horrible and doesn't suit the website aesthetic"). This was never actually the thing that got complained about — it was next in line for the same treatment that worked well on Aurora/Deep Ocean's neighbours, and none of the four replacement attempts landed. Reverting to known ground instead of guessing a fifth time. Do not touch again without much more specific direction than "feel free to be creative." */ body[data-theme="deep-ocean"], [data-theme-scope="deep-ocean"] { --bg: #021316; --surface: #08262b; --surface-2: #0e3a41; --text: #dbf9ff; --muted: #78b0b7; --accent: #1fcfc0; --accent-2: #4aa8ea; --accent-soft: rgba(31, 207, 192, 0.14); --on-accent: #021e19; color-scheme: dark; } body[data-theme="deep-ocean"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 20% 90%, rgba(31, 207, 192, 0.45), transparent), radial-gradient(2px 2px at 50% 80%, rgba(74, 168, 234, 0.4), transparent), radial-gradient(2.5px 2.5px at 75% 95%, rgba(31, 207, 192, 0.45), transparent), radial-gradient(2px 2px at 90% 70%, rgba(74, 168, 234, 0.4), transparent); background-size: 300px 300px; animation: oceanBubbles 10s linear infinite; } @keyframes oceanBubbles { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 20px -300px, -15px -300px, 10px -300px, -20px -300px; } } /* Deep space — the flagship "cosmos" look. Solid tinted surfaces (same shape/depth system as every other theme) with a dense drifting starfield + nebula glow behind them. */ /* Galaxy — deep cosmos. Pulled right back from the saturated purple-on- purple it was: a near-black void, a muted cosmic violet accent, and one sparse slow starfield (the thing that actually makes it "Galaxy"). */ body[data-theme="galaxy"], [data-theme-scope="galaxy"] { --bg: #0a0912; --surface: #151420; --surface-2: #1f1d2e; --text: #ebe9f2; --muted: #948fa6; --accent: #a08ad0; --accent-2: #c6bbe2; --accent-soft: rgba(160, 138, 208, 0.12); --on-accent: #100e1a; color-scheme: dark; } /* ---- CYBER / SYNTH family ------------------------------------------ Same shape/type system as every other theme — the signature here is a hard 1px accent ring on the active segment plus glow, not a reshaped UI. */ /* Tokyo at night — a moody near-black with one dusty rose-pink accent and a muted amber second. The neon is turned right down: it reads as a quiet late-night street, not a sign explosion. */ body[data-theme="neon-tokyo"], [data-theme-scope="neon-tokyo"] { --bg: #0b0910; --surface: #16131b; --surface-2: #201c27; --text: #f0e9ef; --muted: #9a909e; --accent: #d16590; --accent-2: #d0a15f; --accent-soft: rgba(209, 101, 144, 0.13); --on-accent: #1e0812; color-scheme: dark; } /* ---- DAYLIGHT / LIGHT family -------------------------------------- Bright surfaces, crisp hairlines, a soft short shadow. */ /* Sky — clear sky blue with a sunshine-yellow second colour. The yellow is decorative only (charts, effects, highlights), deepened to sunflower so a dashed chart line still shows on white. Replaced Copper's slot (epic, 350 coins). */ body[data-theme="sky"], [data-theme-scope="sky"] { --bg: #e9f4ff; --surface: #ffffff; --surface-2: #dcebfa; --text: #0e2440; --muted: #5b7593; --accent: #1f6fd1; --accent-2: #f0b400; --accent-soft: rgba(31, 111, 209, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(14, 36, 64, 0.08); color-scheme: light; } /* Cherry — warm cream and a glossy cherry red, retro-modern. Near-black warm ink for text so the red is the only colour on the page. Replaced Graphite's slot (legendary, 600 coins). */ body[data-theme="cherry"], [data-theme-scope="cherry"] { --bg: #fbf7f0; --surface: #fffdf9; --surface-2: #f2eadd; --text: #1e1414; --muted: #7a6a64; --accent: #d1203a; --accent-2: #e88a96; --accent-soft: rgba(209, 32, 58, 0.09); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(30, 20, 20, 0.08); color-scheme: light; } /* Frost — icy blue-white, everything crisp, snow swaying past. */ body[data-theme="frost"], [data-theme-scope="frost"] { --bg: #eef5fb; --surface: #ffffff; --surface-2: #e3eef8; --text: #0e2a44; --muted: #5a7891; --accent: #0a6a9c; --accent-2: #0f8279; --accent-soft: rgba(14, 122, 176, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(14, 42, 68, 0.08); --shadow-md: 0 10px 30px -10px rgba(14, 42, 68, 0.16); color-scheme: light; } /* Circuit — the light-tech slot Matrix's removal left open, done as clean blueprint/schematic precision instead of a dark-terminal code rain. Crisp cool white with typeflow's own precision-blue as the accent (a deliberate echo of the site's own brand colour — "this is what pure digital precision looks like") and a teal-cyan secondary. Distinct from Frost: that's icy cyan-blue and wintry, this is a brighter, more indigo "electric" blue with no icy/seasonal framing. */ body[data-theme="circuit"], [data-theme-scope="circuit"] { --bg: #f1f5fb; --surface: #ffffff; --surface-2: #e4eaf5; --text: #101a33; --muted: #64708c; --accent: #3461e0; --accent-2: #14b8a6; --accent-soft: rgba(52, 97, 224, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(16, 26, 51, 0.08); color-scheme: light; } /* Signature: a tiled circuit-trace pattern — the wires themselves stay static/faint (crisp schematic lines, not a glow), but a short bright dash travels along each one on a loop (SMIL on stroke-dashoffset, embedded in the SVG itself — CSS on ::before can't reach inside a background-image, but the SVG can animate its own paths regardless of how it's referenced). Reads as live signal traversal rather than the whole layer just breathing. */ body[data-theme="circuit"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='%233461e0' stroke-width='1' fill='none' opacity='0.4'%3E%3Cpath d='M10,50 L70,50 L70,110 L140,110'/%3E%3Cpath d='M210,30 L210,90 L160,90 L160,160'/%3E%3Cpath d='M30,180 L90,180 L90,220'/%3E%3C/g%3E%3Cg fill='%233461e0' opacity='0.55'%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='140' cy='110' r='2'/%3E%3Ccircle cx='210' cy='30' r='2'/%3E%3Ccircle cx='160' cy='160' r='2'/%3E%3Ccircle cx='90' cy='180' r='2'/%3E%3C/g%3E%3Cg stroke='%233461e0' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M10,50 L70,50 L70,110 L140,110' stroke-dasharray='6 184'%3E%3Canimate attributeName='stroke-dashoffset' values='0;-190' dur='3.6s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M210,30 L210,90 L160,90 L160,160' stroke-dasharray='6 174'%3E%3Canimate attributeName='stroke-dashoffset' values='0;-180' dur='3.2s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M30,180 L90,180 L90,220' stroke-dasharray='6 94'%3E%3Canimate attributeName='stroke-dashoffset' values='0;-100' dur='2.1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 240px; opacity: 0.42; } /* Sakura — a quiet blush. One dusty-rose accent on a warm paper white; the old vivid magenta + bamboo-green pair fought each other. */ /* Sakura — a warm blush. The surface itself is tinted rose (not near- white), so the whole UI reads pink; one warm cherry-rose accent. */ body[data-theme="sakura"], [data-theme-scope="sakura"] { --bg: #fbe9ee; --surface: #fff4f7; --surface-2: #f7dde5; --text: #40272f; --muted: #8d6771; --accent: #bb3e69; --accent-2: #e698b0; --accent-soft: rgba(195, 68, 112, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(120, 60, 80, 0.09); --shadow-md: 0 12px 34px -12px rgba(120, 60, 80, 0.16); color-scheme: light; } /* Mocha (slug "solar-flare") — a coffee house. Espresso brown on warm latte cream, a caramel secondary, faint rising steam. Cosy warm-neutral light theme — the counterpart to Linen's cool oatmeal. */ body[data-theme="solar-flare"], [data-theme-scope="solar-flare"] { --bg: #f3ebdd; --surface: #fdf8f0; --surface-2: #ece0cd; --text: #32261a; --muted: #877360; --accent: #7b4a2d; --accent-2: #b5895f; --accent-soft: rgba(123, 74, 45, 0.1); --on-accent: #fdf8f0; /* A muted matcha "success" — a teal Equipped tag would fight the browns. */ --success: #5f7738; --shadow-sm: 0 1px 3px rgba(70, 48, 28, 0.1); color-scheme: light; } /* Autumn harvest — parchment + rust + olive, a fibre-grain paper, leaves drifting down. */ body[data-theme="autumn-harvest"], [data-theme-scope="autumn-harvest"] { --bg: #fbf3e6; --surface: #fffdf8; --surface-2: #f6e6cf; --text: #43280f; --muted: #94704e; --accent: #a63d1f; --accent-2: #5c6b2f; --accent-soft: rgba(166, 61, 31, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(80, 50, 20, 0.09); color-scheme: light; } /* Linen — oatmeal, understated, a woven crosshatch, no motion. The quiet-light mirror of focus-dark. */ body[data-theme="linen"], [data-theme-scope="linen"] { --bg: #f8f4ee; --surface: #fffdf9; --surface-2: #efe8db; --text: #2c261e; --muted: #776a56; --accent: #9a5a1e; --accent-2: #a2402a; --accent-soft: rgba(154, 90, 30, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 2px rgba(60, 48, 30, 0.08); color-scheme: light; } /* Meadow — a calm sage. One muted botanical green on a soft green-white; the old grass-green + wildflower-gold pair was two competing hues. */ body[data-theme="meadow"], [data-theme-scope="meadow"] { --bg: #eaf4e2; --surface: #f6fcf1; --surface-2: #dcecd0; --text: #223618; --muted: #5b7150; --accent: #3c7a3f; --accent-2: #7fb173; --accent-soft: rgba(60, 122, 63, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(35, 58, 25, 0.09); color-scheme: light; } /* Rose quartz — a cool grey-lilac. Deliberately cooler and more violet than Sakura's warm pink: a grey-mauve surface, a muted orchid accent. */ body[data-theme="rose-quartz"], [data-theme-scope="rose-quartz"] { --bg: #f1edf2; --surface: #faf7fb; --surface-2: #e6dfe9; --text: #322c37; --muted: #7d7486; --accent: #8a5c92; --accent-2: #b79bc2; --accent-soft: rgba(138, 92, 146, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(70, 60, 78, 0.08); color-scheme: light; } /* Citrus grove — reframed as warm honey. A single amber on soft cream; the old lemon-yellow surfaces + lime-green accent read as a soda label, and its filter-based "zing" animation (removed below) was shifting the layout. */ /* Citrus grove — sun-warmed gold. A distinctly yellow cream surface (not the neutral oatmeal of linen) and a rich amber-gold accent. */ body[data-theme="citrus-grove"], [data-theme-scope="citrus-grove"] { --bg: #fdf5d6; --surface: #fffdec; --surface-2: #f6ebbf; --text: #3a3009; --muted: #7e6d2c; --accent: #916a04; --accent-2: #cba333; --accent-soft: rgba(145, 106, 4, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(90, 75, 20, 0.09); color-scheme: light; } /* Lilac bloom — a soft lavender. One muted violet on a cool grey-white; the old electric violet + royal blue pair was loud, and its filter-based "breathe" animation is dropped below. */ body[data-theme="lilac-bloom"], [data-theme-scope="lilac-bloom"] { --bg: #efeafb; --surface: #f9f6ff; --surface-2: #e2d9f4; --text: #2c2444; --muted: #746a92; --accent: #6a4fc0; --accent-2: #a48ee0; --accent-soft: rgba(106, 79, 192, 0.1); --on-accent: #ffffff; --shadow-sm: 0 1px 3px rgba(55, 45, 90, 0.09); color-scheme: light; } /* ---- PREMIUM (gems) — subtle luxury ----------------------------- A deeper, rarer palette carried with the same restraint as Frost / Linen / Meadow, plus at most one refined material touch AND (as of 2026-09-13, revisiting the earlier "nothing moves" rule below — user feedback: the fully flat version read as incomplete, not restrained) one quiet signature ::before per theme: static or very slow, low opacity, nothing that reads as a shimmer sweep or a glow/flicker — the same bar as Midnight's moon or Autumn Harvest's leaves. */ /* Prism Storm — a deep amethyst done quietly. One muted orchid accent on a rich aubergine near-black. */ body[data-theme="prism-storm"], [data-theme-scope="prism-storm"] { --bg: #130c19; --surface: #1e1626; --surface-2: #2a2033; --text: #efe8f4; --muted: #9c8fa8; --accent: #a878c8; --accent-2: #c8a8db; --accent-soft: rgba(168, 120, 200, 0.12); --on-accent: #17101d; color-scheme: dark; } /* Signature: a soft glow that drifts very slowly through adjacent hues — "prism" as a colour-temperature shift, not a rainbow cycle. 32s/30deg keeps it in violet-to-blue territory the whole time. */ body[data-theme="prism-storm"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 45% at 50% 0%, rgba(168, 120, 200, 0.12), transparent 70%); animation: prismDrift 32s ease-in-out infinite; } @keyframes prismDrift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(30deg); } } /* Celestial Eclipse — deep space at rest. A soft champagne accent and a cool silver-blue secondary on charcoal-navy. */ body[data-theme="celestial-eclipse"], [data-theme-scope="celestial-eclipse"] { --bg: #0b0d13; --surface: #16181f; --surface-2: #20232c; --text: #e8eaef; --muted: #8f93a0; --accent: #c7ba98; --accent-2: #a9b4c4; --accent-soft: rgba(199, 186, 152, 0.12); --on-accent: #1a160c; color-scheme: dark; } /* No ::before here on purpose — a corona-ring signature was tried (2026-09-13) and rejected ("don't like the ring in the background"). Left flat rather than guess at a replacement shape blind a second time this session; see theme-system.md memory before trying again. */ /* ---- LIMITED — a deeper cut of the same restraint ---------------- */ /* Halloween v2 — a carved-pumpkin ember glowing in a warm near-black (not the aubergine-purple pairing from before). Body is neutral warm dark, not tinted purple, so the ember accent is the one thing with colour; a muted plum stays only as a quiet secondary. */ body[data-theme="halloween"], [data-theme-scope="halloween"] { --bg: #0d0907; --surface: #181310; --surface-2: #221b16; --text: #f2e9df; --muted: #a89686; --accent: #dd7f3a; --accent-2: #8868a0; --accent-soft: rgba(221, 127, 58, 0.13); --on-accent: #1f0d02; color-scheme: dark; } /* Signature: a carved-pumpkin ember that breathes slowly (6s) rather than flickers — a candle guttering, not a strobe. */ body[data-theme="halloween"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 35% at 18% 88%, rgba(221, 127, 58, 0.16), transparent 70%); animation: emberBreathe 6s ease-in-out infinite; } @keyframes emberBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Winter Lights v2 (slug "christmas") — a cold, quiet Christmas Eve: deep pine-black with a frosted icy-blue accent (ice/snow, not another warm-gold theme — Gold Prestige already owns gold), and a single warm berry red kept as a rare secondary, like one ornament in the dark. */ body[data-theme="christmas"], [data-theme-scope="christmas"] { --bg: #08120d; --surface: #101d16; --surface-2: #182920; --text: #e8f2ec; --muted: #89a696; --accent: #8fc4d9; --accent-2: #c85a52; --accent-soft: rgba(143, 196, 217, 0.14); --on-accent: #0a1811; color-scheme: dark; } /* Signature: a still row of soft icy-white lights along the top edge — a string of lights, deliberately not blinking. */ body[data-theme="christmas"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 7%, rgba(217, 238, 247, 0.85), transparent), radial-gradient(2px 2px at 30% 4%, rgba(217, 238, 247, 0.85), transparent), radial-gradient(2px 2px at 48% 8%, rgba(217, 238, 247, 0.85), transparent), radial-gradient(2px 2px at 66% 3%, rgba(217, 238, 247, 0.85), transparent), radial-gradient(2px 2px at 84% 7%, rgba(217, 238, 247, 0.85), transparent); opacity: 0.5; } /* Gold Prestige v2 (slug "prestige-gold") — money, unmistakably. The antique/muted gold read as dull brass rather than treasure, so this is a true near-black and a vivid classic gold (the real "metallic gold" hue) with a pale gold shine second. Still just one accent colour and the one material touch: a thin brushed-gold hairline on every card. */ body[data-theme="prestige-gold"], [data-theme-scope="prestige-gold"] { --bg: #0b0904; --surface: #161206; --surface-2: #211a09; --text: #f5eed9; --muted: #b7a172; --accent: #d4af37; --accent-2: #e8cf8a; --accent-soft: rgba(212, 175, 55, 0.14); --on-accent: #241a02; --card-border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 175, 55, 0.09); color-scheme: dark; } /* Signature: a still warm-gold glow rising from one corner — light pooling on brushed metal, not a moving shimmer sweep (tried a background-position sweep first; the bright band spent most of its cycle scrolled out of the visible window and rarely actually showed — a static glow is both simpler and reliably visible). */ body[data-theme="prestige-gold"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 45% at 85% 100%, rgba(212, 175, 55, 0.16), transparent 70%); } /* Founder's Theme v2 (slug "founder") — indigo was crowded (Galaxy, Prism Storm both already live there). Pivoted to something that actually says "founder": a deep wine-black, like a founding charter bound in leather, sealed with a warm bronze accent. Muted mauve stays only as a quiet secondary. */ body[data-theme="founder"], [data-theme-scope="founder"] { --bg: #120a0d; --surface: #1d1216; --surface-2: #291a20; --text: #f0e6e8; --muted: #a8919b; --accent: #b3894f; --accent-2: #8a6270; --accent-soft: rgba(179, 137, 79, 0.13); --on-accent: #1f1006; color-scheme: dark; } /* Signature: a slow bronze glow rising up the page — a launch trail, echoing the rocket icon, without literally animating a rocket. */ body[data-theme="founder"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(0deg, transparent, rgba(179, 137, 79, 0.11) 45%, transparent 90%); background-size: 100% 260px; background-repeat: repeat-y; animation: founderRise 18s linear infinite; } @keyframes founderRise { from { background-position: 0 0; } to { background-position: 0 -260px; } } /* Obsidian — true black, cool platinum. The one material touch: a faintly brighter machined steel edge. Nothing else — deliberately the ONE theme in this section that stays effect-free even after 2026-09-13's pass added a signature touch to its six siblings: its whole identity is "the anti-prestige-gold," understated luxury with no colour at all. A background effect here would undercut that on purpose. */ body[data-theme="obsidian"], [data-theme-scope="obsidian"] { --bg: #060709; --surface: #101216; --surface-2: #191c22; --text: #eceef2; --muted: #8b909c; --accent: #b9c2d0; --accent-2: #929aa8; --accent-soft: rgba(185, 194, 208, 0.1); --on-accent: #0b0d10; --card-border: 1px solid rgba(255, 255, 255, 0.14); color-scheme: dark; } /* ========================================================= CHARACTER-KIT SUPPORT The bits a theme's token block can't express on its own: the animated gradient frame for premium/limited, per-theme caret shape, grain/scanline textures. Everything below is opt-in per theme — the default look never sees any of it. Every theme shares one radius / shadow / font scale (no per-theme overrides) so the shell/layout never shifts shape when you switch themes — only colour and these opt-in accents do. ========================================================= */ /* The premium/limited tier used to get an animated gradient card frame + accent glow here. Removed — the user's taste runs to restraint (Frost / Linen / Meadow), and "premium" now means a deeper palette + at most one material touch, set in each token block above (prestige-gold's gold hairline, obsidian's steel edge). Everything else uses the standard --card-border. */ /* (matrix / cyber-pulse (both retired) used to force a block caret here; the caret shape is a user preference now — Customize → Display → Caret shape — so a theme no longer overrides it. Anyone who wants a terminal block on those themes just picks "Block".) */ /* (Grain / weave textures for autumn-harvest and linen are folded into each of those themes' own body::before layers further down — body::before is a child of body so it paints over the opaque body background, which a fixed html-level layer cannot.) */ /* Reusable inline-SVG grain (greyscale, low alpha), referenced by the themes that want a paper/ash texture. */ /* v2 — 0.4 alpha read as visible static/noise rather than a paper texture, especially on dark surfaces (high-contrast flecks against a dark ground read as a broken image, not grain). Alpha cut to a barely-there 0.05 so it still breaks up flat colour on close inspection without registering as texture on its own. */ :root { --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); } /* Midnight — an actual moon (small bright disc + soft rim), not just a vague lighter patch in the corner — plus a wide, very faint ambient moonlight wash so the glow reads as filling the sky, not a blur. Completely static; no stars (that's Galaxy's job). */ body[data-theme="midnight"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 14% 10%, rgba(234, 240, 250, 0.85) 0%, rgba(210, 222, 245, 0.4) 2.2%, rgba(180, 200, 235, 0.12) 5%, transparent 9%), radial-gradient(circle at 14% 10%, rgba(159, 179, 220, 0.08), transparent 46%); } /* Galaxy — a barely-there violet lift at the top of the page, and one sparse starfield drifting very slowly. That's the whole theme now. */ body[data-theme="galaxy"] { background: radial-gradient(150% 110% at 50% 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg) 62%); overflow-x: hidden; } body[data-theme="galaxy"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.6), transparent), radial-gradient(1.3px 1.3px at 40% 80%, rgba(255,255,255,0.65), transparent), radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,0.6), transparent); background-size: 700px 700px; opacity: 0.35; animation: driftStars 90s linear infinite; } @keyframes driftStars { from { background-position: 0 0; } to { background-position: -700px 700px; } } /* Petals fall and sway from side to side, not an in-place diagonal twinkle-drift — driftStars (also used by Galaxy's actual starfield) made cherry blossoms move exactly like distant stars. v2 — the dots were a pale pink disconnected from the theme's actual accent (#d81b60) and its "bamboo-green foliage" half (#128a4d), so the effect read as generic pink confetti rather than this specific theme's palette. Deepened toward the real accent pink, mixed in a couple of small green leaf specks for that green half, and varied the dot aspect ratio (elliptical, not perfect circles) for a less uniform polka-dot look. */ /* Petals drifting down. v3 — dropped the bamboo-green specks (the green half of the palette is gone) and softened the pink toward the new dusty accent so it reads as blossom, not confetti. */ /* Denser tile (500px -> 340px) and two more petals so more are visible on screen at once, plus a faster fall (24s -> 16s) — same colours and sway pattern, "good, just needs more animation" per user feedback. */ body[data-theme="sakura"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(4px 3px at 15% 20%, #dda6b8, transparent), radial-gradient(3px 2.5px at 70% 10%, #e8c3ce, transparent), radial-gradient(3.5px 3px at 40% 60%, #dda6b8, transparent), radial-gradient(2.5px 2px at 85% 70%, #e8c3ce, transparent), radial-gradient(3px 2.5px at 55% 85%, #dda6b8, transparent), radial-gradient(3px 2.5px at 25% 45%, #e8c3ce, transparent), radial-gradient(2.5px 2px at 92% 40%, #dda6b8, transparent); background-size: 340px 340px; opacity: 0.45; animation: sakuraPetalFall 16s linear infinite; } @keyframes sakuraPetalFall { 0% { background-position: 0px 0px; } 25% { background-position: 10px 85px; } 50% { background-position: -7px 170px; } 75% { background-position: 7px 255px; } 100% { background-position: 0px 340px; } } /* var(--text) instead of hardcoded white — same fix the equippable Snowfall background effect already uses (see BACKGROUND EFFECTS below): white dots would nearly disappear against Frost's own pale icy-blue background. Sway-and-fall like Sakura's petals rather than a straight vertical drift, so it reads as snow tumbling in the wind. */ body[data-theme="frost"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 15% 15%, var(--text), transparent), radial-gradient(2.5px 2.5px at 65% 10%, var(--text), transparent), radial-gradient(3px 3px at 40% 55%, var(--text), transparent), radial-gradient(2px 2px at 85% 65%, var(--text), transparent), radial-gradient(2.5px 2.5px at 55% 80%, var(--text), transparent), radial-gradient(2px 2px at 10% 85%, var(--text), transparent); background-size: 460px 460px; opacity: 0.4; animation: frostSnowfall 16s linear infinite; } @keyframes frostSnowfall { 0% { background-position: 0px 0px; } 25% { background-position: 12px 115px; } 50% { background-position: -8px 230px; } 75% { background-position: 10px 345px; } 100% { background-position: 0px 460px; } } /* Mocha — a faint warm wash from the top, plus wisps of steam rising and fading the way they curl off a fresh cup. Slow, translucent, cosy. */ body[data-theme="solar-flare"] { background: radial-gradient(circle at 50% -10%, rgba(123, 74, 45, 0.07), transparent 55%), var(--bg); } body[data-theme="solar-flare"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(22px 90px at 28% 10%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(18px 68px at 53% 5%, rgba(255, 255, 255, 0.45), transparent 70%), radial-gradient(24px 100px at 76% 14%, rgba(255, 255, 255, 0.5), transparent 70%); opacity: 0.5; animation: mochaSteam 15s ease-in-out infinite; } @keyframes mochaSteam { 0%, 100% { background-position: 0 0, 0 0, 0 0; opacity: 0.28; } 50% { background-position: 5px -20px, -4px -15px, 6px -24px; opacity: 0.55; } } /* Halloween / Winter Lights / Gold Prestige / Founder / Obsidian had decorative background layers here — an unstable pulse + flickering embers, string lights, a gold shimmer sweep, launch streaks, a platinum sweep. All removed: the premium/limited tier is restraint now, carried by palette alone (prestige-gold's gold hairline and obsidian's steel edge are the only flourishes, set in their token blocks). */ /* Paper-fibre grain on the body itself + leaves drifting down on ::before. */ body[data-theme="autumn-harvest"] { background-image: var(--grain-svg); background-size: 160px 160px; background-attachment: fixed; } /* Vivid pumpkin-orange/amber (not the theme's own muted --accent/ --accent-2) on purpose — restored from before an Aug 2026 palette- de-collision pass quietly dulled these to a rust+olive pair that read as flat/generic instead of like actual fall leaves. Decorative layers using their own hardcoded colour independent of the theme's functional accent is the established pattern site-wide (see Aurora/ Halloween) — this doesn't need to match the buttons. */ body[data-theme="autumn-harvest"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 15% 10%, #ea580c, transparent), radial-gradient(2.5px 2.5px at 45% 25%, #b45309, transparent), radial-gradient(3px 3px at 70% 5%, #ea580c, transparent), radial-gradient(2.5px 2.5px at 90% 30%, #b45309, transparent); background-size: 280px 280px; opacity: 0.5; animation: leavesFall 9s linear infinite; } @keyframes leavesFall { from { background-position: 0 0; } to { background-position: 20px 280px; } } /* Meadow — a strip of long grass rooted along the bottom edge: every blade sways gently on its own rhythm, and a gust rolls left to right every 6s, bending each blade as it passes. Replaced the drifting pollen dots: grass is Meadow's alone, where falling things belong to Sakura / Autumn Harvest / Frost. Faded toward the top and behind all content, so it only shows in the gaps around the cards. The blades and their wind are one generated SVG (static/images/meadow-grass.svg); the animation lives inside it (SMIL), which the global reduced-motion rule can't reach, hence the still copy swapped in below. */ body[data-theme="meadow"]::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 180px; z-index: 0; pointer-events: none; background: url("../images/meadow-grass.c500e7990509.svg") left bottom / 1200px 180px repeat-x; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); opacity: 0.6; transition: background-image 0.6s ease; } /* The meadow goes still while a test or race is running (body.test-active, set by home.html / race_room.html) — no motion at the edge of vision while typing, and no per-frame redraw competing with the caret — then comes back to life on the results screen. Chrome cross-fades the swap; other browsers switch instantly. */ body[data-theme="meadow"].test-active::before { background-image: url("../images/meadow-grass-still.4b99d88f9be1.svg"); } /* Phones: the fixed bottom tab bar would hide the strip, so the grass grows from the bar's top edge instead (~54px rendered, see .bottom-tab-bar). */ @media (max-width: 768px) { body[data-theme="meadow"]::before { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); height: 120px; background-size: 800px 120px; } } @media (prefers-reduced-motion: reduce) { body[data-theme="meadow"]::before { background-image: url("../images/meadow-grass-still.4b99d88f9be1.svg"); } } /* Neon Tokyo — a faint static sign-grid, no flicker. */ body[data-theme="neon-tokyo"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient(90deg, rgba(209, 101, 144, 0.05) 0px, transparent 2px, transparent 64px), repeating-linear-gradient(0deg, rgba(208, 161, 95, 0.04) 0px, transparent 1px, transparent 44px); } /* Linen had zero decorative layer at all, which made it read as flat and bland next to every other theme's motion — a woven crosshatch texture (not particles/motion, this is a "common"-tier fabric theme) gives it some life while staying restrained. Two low-opacity diagonal line sets at ±45° in var(--border) so it always matches the theme's own palette. */ body[data-theme="linen"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(45deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(-45deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 9px); opacity: 0.35; animation: linenWeaveShift 24s ease-in-out infinite; } @keyframes linenWeaveShift { 0%, 100% { background-position: 0 0, 0 0; opacity: 0.28; } 50% { background-position: 6px 6px, -6px 6px; opacity: 0.4; } } /* A gentle vertical bob, like petals floating on water, rather than the one-directional diagonal drift driftStars gives every other user of it (Galaxy's stars, now Sakura's falling petals). v3 — dropped the warm-gold glint dots (the gold half of the palette is gone) and the brightness flicker; just soft mauve motes drifting now. */ body[data-theme="rose-quartz"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 3px at 20% 15%, #ddd4e4, transparent), radial-gradient(2.5px 2.5px at 65% 25%, #e7e1ed, transparent), radial-gradient(3px 3px at 35% 65%, #ddd4e4, transparent), radial-gradient(2px 2px at 80% 75%, #e7e1ed, transparent), radial-gradient(2.5px 2.5px at 50% 90%, #ddd4e4, transparent); background-size: 480px 480px; animation: roseQuartzFloat 8s ease-in-out infinite; } @keyframes roseQuartzFloat { 0%, 100% { background-position: 0px 0px; opacity: 0.35; } 50% { background-position: 0px -16px; opacity: 0.5; } } /* A quick, punchy "zing" — brightness, saturation, and a slight yellow-to-lime hue shift — instead of Solar Flare's slow pure- brightness breathing. Citrus should feel zesty, not molten. */ /* A soft honey wash — no animation. The old `citrusZing` was a brightness/saturate/hue-rotate `filter` on : it made the containing block for position:fixed, which is what was shifting the theme picker / modal around while this theme was equipped. */ body[data-theme="citrus-grove"] { background: radial-gradient(circle at 50% -15%, rgba(145, 106, 4, 0.12), transparent 55%), var(--bg); } /* A gentle radial "breathing bloom" (the clouds expand/soften in place) instead of Aurora's directional drift — suits a soft pastel theme better than a cosmic sweep. */ /* A single soft lavender wash — static. (Old version breathed via a `filter` on , which broke position:fixed.) */ body[data-theme="lilac-bloom"] { background: radial-gradient(circle at 18% 12%, rgba(106, 79, 192, 0.1), transparent 46%), radial-gradient(circle at 82% 100%, rgba(106, 79, 192, 0.08), transparent 48%), var(--bg); } /* Slow-drifting lavender petals — the only motion this theme has now. */ body[data-theme="lilac-bloom"]::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(3px 2.5px at 18% 18%, #cbbdea, transparent), radial-gradient(2.5px 2px at 62% 12%, #bfb0e2, transparent), radial-gradient(3px 2.5px at 38% 58%, #cbbdea, transparent), radial-gradient(2px 2px at 82% 68%, #bfb0e2, transparent), radial-gradient(2.5px 2px at 55% 88%, #cbbdea, transparent); background-size: 520px 520px; opacity: 0.4; animation: lilacPetalDrift 26s linear infinite; } @keyframes lilacPetalDrift { 0% { background-position: 0px 0px; } 25% { background-position: -14px 130px; } 50% { background-position: 10px 260px; } 75% { background-position: -10px 390px; } 100% { background-position: 0px 520px; } } /* Prism Storm and Celestial Eclipse had decorative glow / corona / star layers here. Removed — both are palette-only now (see the restraint note in the PREMIUM token blocks above). */ /* ========================================================= BACKGROUND EFFECTS Matches ShopItem slugs (item_type="background"). Layered via body::after (themes already use ::before) so any background can be combined with any theme. No data-background = plain. ========================================================= */ body[data-background]::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Small live preview inside the customize modal's swatch box — same background-image/animation as the real effect, just contained to a 52px box instead of the full viewport, so equipping (or just browsing the picker) shows an unmistakable demo even on pages with no visible full-screen effect to compare against. */ .customize-swatch[data-background-demo] { position: relative; overflow: hidden; } .customize-swatch[data-background-demo]::after { content: ""; position: absolute; inset: 0; } /* Individual falling streaks on a repeating tile — matches the technique every other background effect uses (particles/snowfall/starfield are all sparse discrete shapes on a large tile with a slow loop). The old version was a dense, screen-covering diagonal hatch with no tile at all, looping every 0.4s — that read as flickering noise, not rain. */ /* Two streak layers at different speeds/scales for real depth — a fast near layer and a slower, fainter far one. */ body[data-background="rain"]::after, .customize-swatch[data-background-demo="rain"]::after { background-image: repeating-linear-gradient(94deg, transparent 0 34px, color-mix(in srgb, var(--accent) 55%, transparent) 34px 35.5px), repeating-linear-gradient(96deg, transparent 0 58px, color-mix(in srgb, var(--accent) 30%, transparent) 58px 59px); background-size: 90px 220px, 150px 340px; opacity: 0.5; animation: rainFall 1.1s linear infinite; } @keyframes rainFall { from { background-position: 0 0, 0 0; } to { background-position: -18px 220px, -10px 340px; } } /* var(--text) instead of a hardcoded white — snow/stars need to flip to dark dots on light themes (frost, sakura, solar-flare) or they'd be nearly invisible against a light background. */ body[data-background="snowfall"]::after, .customize-swatch[data-background-demo="snowfall"]::after { background-image: radial-gradient(4px 4px at 20% 10%, var(--text), transparent), radial-gradient(3px 3px at 60% 30%, var(--text), transparent), radial-gradient(4px 4px at 80% 5%, var(--text), transparent), radial-gradient(3px 3px at 40% 50%, var(--text), transparent), radial-gradient(3.5px 3.5px at 10% 60%, var(--text), transparent), radial-gradient(3px 3px at 90% 45%, var(--text), transparent), radial-gradient(2.5px 2.5px at 30% 75%, var(--text), transparent); background-size: 320px 320px; opacity: 0.5; animation: snowDrift 8s linear infinite; } @keyframes snowDrift { from { background-position: 0 0; } to { background-position: 32px 320px; } } body[data-background="starfield"]::after, .customize-swatch[data-background-demo="starfield"]::after { background-image: radial-gradient(1.5px 1.5px at 15% 25%, var(--text), transparent), radial-gradient(1.5px 1.5px at 65% 55%, var(--text), transparent), radial-gradient(2px 2px at 35% 80%, var(--text), transparent), radial-gradient(1.5px 1.5px at 85% 15%, var(--text), transparent), radial-gradient(1.5px 1.5px at 50% 5%, var(--text), transparent), radial-gradient(2px 2px at 95% 75%, var(--text), transparent), radial-gradient(1.5px 1.5px at 25% 45%, var(--text), transparent), radial-gradient(1.5px 1.5px at 70% 90%, var(--text), transparent); background-size: 400px 400px; opacity: 0.55; animation: starTwinkle 3s ease-in-out infinite; } @keyframes starTwinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } } /* A soft accent-2 spotlight now sweeps diagonally across the grid and the whole thing pulses brighter at the sweep's midpoint — the plain two-layer grid at a flat 0.28 opacity read as less elaborate than Confetti Burst, a legendary (one tier below mythical) background, so this needed real motion depth, not just a recolor. */ /* v3 — a brighter grid with a diagonal light-sweep passing over it, so it reads as an active surface, not a faint static mesh. */ body[data-background="animated-grid"]::after, .customize-swatch[data-background-demo="animated-grid"]::after { background-image: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent-2) 60%, transparent) 50%, transparent 60%), repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 1.5px, transparent 1.5px 40px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 1.5px, transparent 1.5px 40px); background-size: 300% 100%, 40px 40px, 40px 40px; opacity: 0.5; animation: gridScroll 6s linear infinite; } @keyframes gridScroll { 0% { background-position: 120% 0, 0 0, 0 0; } 100% { background-position: -120% 0, 40px 40px, 40px 40px; } } /* Darker amber + a drop-shadow safety net — same fix as The Vault below, the original pale #fde047/#fbbf24 had poor contrast against the default light theme's near-white background. */ body[data-background="fireflies"]::after, .customize-swatch[data-background-demo="fireflies"]::after { background-image: radial-gradient(2.5px 2.5px at 15% 70%, #d97706, transparent), radial-gradient(2px 2px at 35% 30%, #92400e, transparent), radial-gradient(3px 3px at 55% 80%, #d97706, transparent), radial-gradient(2px 2px at 75% 20%, #92400e, transparent), radial-gradient(2.5px 2.5px at 90% 60%, #d97706, transparent), radial-gradient(2px 2px at 25% 45%, #92400e, transparent); background-size: 280px 280px; opacity: 0.75; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.45)); animation: firefliesDrift 6s ease-in-out infinite; } @keyframes firefliesDrift { 0%, 100% { opacity: 0.5; background-position: 0 0; } 50% { opacity: 0.85; background-position: 14px -18px; } } /* Legendary tier gets real color instead of the accent-only palette every other background uses — a burst of festive confetti dots rather than a monochrome ambient effect, since this is meant to feel like the flashiest background in the shop. */ body[data-background="confetti-burst"]::after, .customize-swatch[data-background-demo="confetti-burst"]::after { background-image: radial-gradient(3px 3px at 10% 10%, #ec4899, transparent), radial-gradient(3px 3px at 30% 40%, #22d3ee, transparent), radial-gradient(3px 3px at 50% 15%, #fde047, transparent), radial-gradient(3px 3px at 70% 50%, #a855f7, transparent), radial-gradient(3px 3px at 90% 25%, #4ade80, transparent), radial-gradient(3px 3px at 20% 65%, #fb923c, transparent), radial-gradient(3px 3px at 45% 85%, #ec4899, transparent), radial-gradient(3px 3px at 65% 70%, #22d3ee, transparent), radial-gradient(3px 3px at 85% 90%, #fde047, transparent); background-size: 260px 260px; opacity: 0.7; /* Several of these (cyan, green, yellow) have poor contrast against the default light theme's near-white background — a drop-shadow darkens every dot's silhouette regardless of its own color, fixing all of them at once instead of needing per-color contrast tuning. */ filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)); animation: confettiFall 3s linear infinite; } @keyframes confettiFall { from { background-position: 0 0; } to { background-position: 12px 260px; } } /* Limited to 30 units ever — the rarest background in the shop. v2 — the original used pale gold (#fde047) at low opacity, which has almost no contrast against the default light theme's near-white background (#f5f7fb) — pale-on-pale is invisible regardless of dot count or opacity. Switched to a darker, richer gold plus a drop-shadow filter, which (unlike background-image alone) reads against ANY background color since it darkens the whole layer's silhouette. */ body[data-background="the-vault"]::after, .customize-swatch[data-background-demo="the-vault"]::after { background-image: radial-gradient(3px 3px at 15% 15%, #b45309, transparent), radial-gradient(2.5px 2.5px at 45% 55%, #d4af37, transparent), radial-gradient(3px 3px at 75% 25%, #b45309, transparent), radial-gradient(2.5px 2.5px at 30% 75%, #d4af37, transparent), radial-gradient(3px 3px at 60% 85%, #b45309, transparent), radial-gradient(2.5px 2.5px at 85% 60%, #d4af37, transparent), radial-gradient(3px 3px at 10% 45%, #b45309, transparent), radial-gradient(2.5px 2.5px at 90% 90%, #d4af37, transparent), radial-gradient(circle at 50% 50%, rgba(180, 83, 9, 0.35), transparent 70%); background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 100% 100%; opacity: 0.85; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.5)); animation: vaultDrift 8s ease-in-out infinite; } @keyframes vaultDrift { 0%, 100% { opacity: 0.65; } 50% { opacity: 0.95; } } /* Actual leaf shapes (a rounded-diamond clip on each dot) tumbling down two layers at different rates, rather than round dots. */ body[data-background="autumn-leaves"]::after, .customize-swatch[data-background-demo="autumn-leaves"]::after { background-image: radial-gradient(5px 8px at 15% 10%, #c2410c, transparent), radial-gradient(6px 4px at 62% 30%, #b45309, transparent), radial-gradient(4px 7px at 88% 12%, #92400e, transparent), radial-gradient(7px 5px at 34% 66%, #d97706, transparent), radial-gradient(5px 8px at 78% 82%, #c2410c, transparent); background-size: 320px 320px; opacity: 0.68; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); animation: leavesDrift 9s linear infinite; } @keyframes leavesDrift { from { background-position: 0 0; } to { background-position: 40px 320px; } } /* Hollow bubbles (a bright ring, transparent centre) of varied size rising on two layers — reads as bubbles, not filled dots. */ body[data-background="bubbles"]::after, .customize-swatch[data-background-demo="bubbles"]::after { background-image: radial-gradient(circle 7px at 12% 90%, transparent 55%, color-mix(in srgb, var(--accent) 70%, transparent) 58% 72%, transparent 74%), radial-gradient(circle 4px at 34% 70%, transparent 50%, color-mix(in srgb, var(--accent-2) 70%, transparent) 55% 74%, transparent 76%), radial-gradient(circle 9px at 58% 96%, transparent 58%, color-mix(in srgb, var(--accent) 60%, transparent) 61% 72%, transparent 74%), radial-gradient(circle 5px at 80% 66%, transparent 52%, color-mix(in srgb, var(--accent-2) 65%, transparent) 56% 74%, transparent 76%), radial-gradient(circle 6px at 92% 88%, transparent 55%, color-mix(in srgb, var(--accent) 65%, transparent) 58% 73%, transparent 75%); background-size: 260px 260px, 180px 180px, 260px 260px, 180px 180px, 260px 260px; opacity: 0.6; animation: bubblesRise 9s linear infinite; } @keyframes bubblesRise { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 8px -260px, -12px -180px, 8px -260px, -12px -180px, 8px -260px; } } /* A soft ambient wash (like the Aurora theme's background), not sharp dots — diffuse gradients read fine at low opacity since there's no hard edge needing contrast against the page behind it. */ /* v2 — a CRT/VHS look: fine scanlines + a shifting speckle grain + a slow rolling bright band. Was opacity 0.06 (invisible); now it's a deliberate, readable texture. */ body[data-background="static-noise"]::after, .customize-swatch[data-background-demo="static-noise"]::after { background-image: linear-gradient(color-mix(in srgb, var(--text) 8%, transparent), transparent 8%, transparent 92%, color-mix(in srgb, var(--text) 8%, transparent)), repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 55%, transparent) 0 1px, transparent 1px 3px), radial-gradient(circle 0.6px at 20% 30%, var(--text), transparent), radial-gradient(circle 0.6px at 65% 55%, var(--text), transparent), radial-gradient(circle 0.6px at 40% 80%, var(--text), transparent), radial-gradient(circle 0.6px at 85% 20%, var(--text), transparent); background-size: 100% 240px, 100% 3px, 7px 7px, 7px 7px, 7px 7px, 7px 7px; opacity: 0.13; animation: staticNoise 2.4s steps(3) infinite; /* F4: was 0.5s — a whole-screen flicker that fast is a photosensitivity risk */ } @keyframes staticNoise { 0% { background-position: 0 0, 0 0, 0 0, 2px 1px, 1px 3px, 3px 2px; } 50% { background-position: 0 40%, 0 0, 3px 2px, 0 3px, 2px 1px, 1px 0; } 100% { background-position: 0 90%, 0 0, 1px 3px, 3px 0, 0 2px, 2px 1px; } } /* Premium (Gems). Real parallax within a single ::after (themes already claim ::before, so backgrounds only ever get one pseudo-element) — two slow ambient ribbons and a layer of sparkle dots move at different rates in the same keyframe, the same multi-layer-differential-position technique the Founder theme already uses for its two streak layers. mix-blend-mode:screen is new here — no existing background uses it. */ body[data-background="aurora-storm"]::after, .customize-swatch[data-background-demo="aurora-storm"]::after { background-image: radial-gradient(ellipse 60% 40% at 30% 0%, var(--accent), transparent 60%), radial-gradient(ellipse 50% 35% at 70% 10%, var(--accent-2), transparent 60%), radial-gradient(1.5px 1.5px at 20% 70%, var(--text), transparent), radial-gradient(1.5px 1.5px at 60% 85%, var(--text), transparent), radial-gradient(1.5px 1.5px at 85% 60%, var(--text), transparent); background-size: 100% 100%, 100% 100%, 300px 300px, 300px 300px, 300px 300px; mix-blend-mode: screen; opacity: 0.4; animation: auroraStormDrift 10s ease-in-out infinite; } @keyframes auroraStormDrift { 0%, 100% { background-position: 0% 0%, 0% 0%, 0 0, 0 0, 0 0; } 50% { background-position: -15% 8%, 15% -6%, 40px -30px, -30px 20px, 20px -25px; } } /* Premium (Gems). Diagonal streaks (Founder's technique) fading in/out on a loop, trailing a drifting star layer behind them — every existing streak/sparkle background moves in one direction at a constant opacity; this one cycles like an actual meteor passing overhead. */ body[data-background="meteor-shower"]::after, .customize-swatch[data-background-demo="meteor-shower"]::after { background-image: linear-gradient(115deg, transparent 46%, var(--accent) 49.5%, transparent 53%), linear-gradient(115deg, transparent 66%, var(--accent-2) 69%, transparent 72%), radial-gradient(2.5px 2.5px at 30% 10%, var(--text), transparent), radial-gradient(2px 2px at 70% 40%, var(--text), transparent), radial-gradient(2.5px 2.5px at 15% 60%, var(--text), transparent); background-size: 100% 100%, 100% 100%, 260px 260px, 260px 260px, 260px 260px; animation: meteorStreak 3s linear infinite; } @keyframes meteorStreak { 0% { background-position: -40% 60%, -60% 80%, 0 0, 0 0, 0 0; opacity: 0; } 10% { opacity: 0.6; } 60% { opacity: 0.6; } 100% { background-position: 140% -60%, 120% -40%, 30px -260px, 30px -260px, 30px -260px; opacity: 0; } } /* --- New backgrounds: real depth + shape variety, not just dot fields. Every layer is theme-adaptive (color-mix off --accent / --text) so it reads on light and dark without per-theme patching. --- */ /* Drifting Fog — three soft cloud banks at different depths, each crawling at its own rate. */ body[data-background="drifting-fog"]::after, .customize-swatch[data-background-demo="drifting-fog"]::after { background-image: radial-gradient(ellipse 55% 40% at 25% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(ellipse 60% 45% at 75% 55%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 72%), radial-gradient(ellipse 70% 50% at 50% 85%, color-mix(in srgb, var(--text) 8%, transparent), transparent 75%); background-size: 180% 180%, 200% 200%, 220% 220%; opacity: 0.55; animation: fogDrift 26s ease-in-out infinite; } @keyframes fogDrift { 0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; } 50% { background-position: 30% 12%, -25% -10%, 12% -18%; } } /* Contours — a slow-drifting topographic line map. */ body[data-background="contours"]::after, .customize-swatch[data-background-demo="contours"]::after { background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0 26px, color-mix(in srgb, var(--accent) 32%, transparent) 26px 28px, transparent 28px 54px), repeating-radial-gradient(circle at 78% 72%, transparent 0 30px, color-mix(in srgb, var(--accent-2) 26%, transparent) 30px 32px, transparent 32px 62px); background-size: 520px 520px, 640px 640px; opacity: 0.4; animation: contourDrift 30s linear infinite; } @keyframes contourDrift { from { background-position: 0 0, 0 0; } to { background-position: 120px 90px, -100px 70px; } } /* Floating Shapes — translucent triangles + hexagons, rotating as they drift. Two clip-path'd gradient tiles. */ body[data-background="floating-shapes"]::after, .customize-swatch[data-background-demo="floating-shapes"]::after { background-image: conic-gradient(from 0deg at 20% 30%, color-mix(in srgb, var(--accent) 30%, transparent) 0 25%, transparent 25% 100%), conic-gradient(from 90deg at 72% 66%, color-mix(in srgb, var(--accent-2) 26%, transparent) 0 16%, transparent 16% 100%), conic-gradient(from 45deg at 50% 88%, color-mix(in srgb, var(--accent) 22%, transparent) 0 12%, transparent 12% 100%); background-size: 300px 300px, 240px 240px, 360px 360px; background-repeat: repeat; opacity: 0.4; animation: shapesDrift 22s linear infinite; } @keyframes shapesDrift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -300px 180px, 240px -160px, 120px 360px; } } /* Dust Motes — a fine warm-gold particle field with gentle parallax swirl. Best on warm / light themes but token-safe anywhere. */ body[data-background="dust-motes"]::after, .customize-swatch[data-background-demo="dust-motes"]::after { background-image: radial-gradient(1px 1px at 12% 20%, color-mix(in srgb, var(--text) 60%, #f5c451), transparent), radial-gradient(1.5px 1.5px at 42% 55%, color-mix(in srgb, var(--text) 40%, #f5c451), transparent), radial-gradient(1px 1px at 68% 30%, color-mix(in srgb, var(--text) 55%, #f5c451), transparent), radial-gradient(1.5px 1.5px at 85% 70%, color-mix(in srgb, var(--text) 45%, #f5c451), transparent), radial-gradient(1px 1px at 30% 85%, color-mix(in srgb, var(--text) 60%, #f5c451), transparent); background-size: 160px 160px, 260px 260px, 200px 200px, 320px 320px, 220px 220px; opacity: 0.5; animation: dustSwirl 24s ease-in-out infinite; } @keyframes dustSwirl { 0%, 100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } 50% { background-position: 20px -14px, -24px 18px, 16px 10px, -18px -12px, 10px 20px; } } /* Data Stream — sparse thin vertical code-rain streaks in the theme accent (not matrix green), dim enough to sit under text. */ body[data-background="data-stream"]::after, .customize-swatch[data-background-demo="data-stream"]::after { background-image: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%), linear-gradient(color-mix(in srgb, var(--accent) 40%, transparent), transparent 40%), linear-gradient(color-mix(in srgb, var(--accent-2) 45%, transparent), transparent 50%); background-size: 2px 120px, 2px 90px, 2px 150px; background-position: 14% 0, 47% 0, 79% 0; background-repeat: repeat-y; opacity: 0.35; animation: dataStream 2.4s linear infinite; } @keyframes dataStream { from { background-position-y: -120px, -60px, -150px; } to { background-position-y: 120px, 90px, 150px; } } /* Ripple Pond — concentric rings expanding from two points on a loop. */ body[data-background="ripple-pond"]::after, .customize-swatch[data-background-demo="ripple-pond"]::after { background-image: repeating-radial-gradient(circle at 32% 38%, transparent 0 18px, color-mix(in srgb, var(--accent) 30%, transparent) 18px 20px, transparent 20px 40px), repeating-radial-gradient(circle at 74% 68%, transparent 0 22px, color-mix(in srgb, var(--accent-2) 26%, transparent) 22px 24px, transparent 24px 48px); background-size: 100% 100%, 100% 100%; opacity: 0.4; /* F4: scale + opacity only (compositor), not background-size — the old version repainted the whole viewport every frame and measured ~25fps idle on a throttled phone. */ transform-origin: 50% 50%; animation: ripplePond 5s ease-out infinite; } @keyframes ripplePond { 0% { transform: scale(0.45); opacity: 0; } 15% { opacity: 0.45; } 100% { transform: scale(1.8); opacity: 0; } } /* ========================================================= RESET / BASE ========================================================= */ * { box-sizing: border-box; } html { /* Stops the browser's pull-to-refresh/rubber-band gesture from swallowing vertical drags meant for the page — the single biggest thing that makes scrolling feel like "a website" instead of "an app" on mobile. */ overscroll-behavior-y: contain; -webkit-text-size-adjust: 100%; } a, button, .icon-btn, .bottom-tab, .duration-btn, .mode-btn, .pill { /* Kills the ~300ms delay + double-tap-to-zoom browsers apply to taps near clickable elements, and the gray flash Android/iOS show on tap by default — both read as "web page", not "app". */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease); position: relative; display: flex; flex-direction: column; } .site-main { flex: 1 1 auto; /* The header is sticky/full-bleed now, so page content needs its own top breathing room (was the header's old bottom margin). */ padding-top: 28px; } body > * { position: relative; z-index: 1; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; } ::selection { background: var(--accent-soft); color: var(--text); } /* One consistent keyboard-focus ring everywhere. Mouse clicks stay clean (:focus-visible, not :focus); individual components can still opt into a tighter ring where the default would clip. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.014em; line-height: 1.2; } /* Every stat / counter / timer reads with fixed-width figures so it never jitters as digits change mid-test. */ .tabular, #timer, #live-wpm, #live-accuracy, #live-wpm-big, .hero-score, .mini-value, .stat-num, .live-wpm-hero-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* .page-container width + centring come from the shell rule near the top. */ .page-container { margin-top: 4px; } .legal-page { /* width from the narrow-shell rule near the top */ margin-top: 36px; margin-bottom: 40px; } .legal-card { padding: 40px 44px; line-height: 1.65; color: var(--text); } .legal-card h1 { margin: 0 0 4px; font-size: 30px; font-weight: 700; } .legal-card h2 { margin: 32px 0 10px; font-size: 19px; font-weight: 700; } .legal-card p, .legal-card ul { margin: 0 0 14px; color: var(--muted); } .legal-card ul { padding-left: 20px; } .legal-card li { margin-bottom: 6px; } .legal-card a { color: var(--accent); font-weight: 600; } .legal-updated { font-size: 13px; color: var(--muted); margin-bottom: 24px !important; } /* Off-screen, not display:none/visibility:hidden — some spam bots specifically skip fields hidden that way, defeating the point of a honeypot. Positioning it out of the viewport instead fools that check while staying invisible (and untabbable, see tabindex="-1" in the template) to a real visitor. */ .contact-honeypot { position: absolute; left: -9999px; top: -9999px; } .section-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } /* ========================================================= SHARED PRIMITIVES Every page is built from these. A theme reskins the whole site by moving tokens (above); nothing below hard-codes a colour, radius, or shadow. ========================================================= */ .card { background: var(--surface); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); } /* Only cards that are themselves a link/button lift on hover — a plain informational card (leaderboard, stats) just warms its border. Opt in with .card-interactive or by being an /