/* Pundown — light/dark theme layer (v4) Loaded AFTER app.css. The `.t-light` (Kingfisher) / `.t-dark` (Quest) class on overrides app.css's :root color tokens. The class is set before first paint by the inline bootstrap in App.razor (no flash), then owned by the top-bar theme toggle + pundown.theme (see pundown.js): the OS/browser preference (prefers-color-scheme) wins until the user clicks the toggle, after which the explicit choice persists in localStorage['pundown_theme'] indefinitely. */ /* ===== Shared fonts for both modes ===== */ .t-light, .t-dark { --display-font: 'Baloo 2', system-ui, sans-serif; --ui-font: 'Nunito', system-ui, sans-serif; --mono-font: 'Space Mono', monospace; /* Sticky-header height, kept live by pundown.topbar.fit (measured off the real
). Page content freezes right below the header via `top: var(--topbar-h)`. This is just a pre-JS fallback. */ --topbar-h: 96px; } /* ===== LIGHT = Kingfisher ===== */ .t-light { /* --bg pulled down to a real off-white canvas (#F4FAFB → #DFEAEF) so the #FFFFFF cards clearly pop off the page — the value-contrast that, with the shadow, makes the UI read as layered. Hue unchanged (same Kingfisher cyan); --bg-sunk tracks it down to stay recessed. */ --bg:#DFEAEF; --bg-elev:#FFFFFF; --bg-sunk:#CFE2E9; --ink:#0F2236; --ink-2:#33485E; --ink-3:#647889; --ink-4:#9CB0BD; --line:#DEEBEF; --line-strong:#CADEE3; --peach:#1A4FCF; --peach-deep:#1340B0; --clay:#FFC42E; --blush:#FF7A6B; --tea:#D6F2EA; --sky:#06B6C4; --sky-deep:#0599A6; --good:#0E9F8E; --danger:#FF4D5E; --live:#FF4D5E; --radius:14px; --radius-sm:10px; --radius-md:16px; --radius-lg:18px; /* Cool, ink-tinted elevation for Kingfisher (tinted to --ink #0F2236 = rgb(15,34,54)). Three layers — a tight contact shadow + a mid lift + a soft ambient — so cards read as clearly raised off the deeper canvas, not faintly outlined. */ --shadow-card: 0 1px 2px rgba(15,34,54,0.10), 0 6px 14px -4px rgba(15,34,54,0.18), 0 18px 36px -12px rgba(15,34,54,0.20); --shadow-lift: 0 2px 6px -1px rgba(15,34,54,0.16), 0 12px 26px -6px rgba(15,34,54,0.26), 0 30px 54px -14px rgba(15,34,54,0.28); --shadow-pop: 0 12px 28px -6px rgba(15,34,54,0.24), 0 32px 60px -16px rgba(15,34,54,0.34); --warn:#C2772B; --bad:var(--danger); /* Readable danger TEXT on the light surface (was a hardcoded #8a2b2b at the call sites). */ --danger-ink:#8A2B2B; --accent:var(--peach); --accent-soft:color-mix(in oklab, var(--peach) 14%, transparent); --accent-line:color-mix(in oklab, var(--peach) 74%, var(--ink) 6%); /* Per-contest Vote colour (TODAY default; YESTERDAY + the contest classes are below). Drives the prompt box, the cards' left accent stripe, and the picked-card fill — all the same colour — plus the contrasting text laid over it. */ --vote-accent:#3D63C1; --vote-on-accent:#FFFFFF; /* Unstarred star-dogear fold — muted, barely distinct from the card. */ --dogear-bg:#E7ECE7; } /* ===== DARK = Quest ===== */ .t-dark { /* Dark keeps its bg: the lighter #20243F cards already lift clearly off #14172B (the bg-contrast lever is a light-mode fix where white-on-near-white cards needed the pop). */ --bg:#14172B; --bg-elev:#20243F; --bg-sunk:#0E1122; --ink:#F3ECD9; --ink-2:#CFC6AC; --ink-3:#9A9276; --ink-4:#6B6552; --line:#2C3052; --line-strong:#3E4470; --peach:#F4B740; --peach-deep:#E0A21F; --clay:#E08D3C; --blush:#E97A8A; --tea:#1C3A30; --sky:#3FC0AE; --sky-deep:#2AA797; --good:#7BD88F; --danger:#FF6B6B; --live:#FF6B6B; --radius:15px; --radius-sm:11px; --radius-md:17px; --radius-lg:19px; --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 6px 16px -4px rgba(0,0,0,.55), 0 18px 38px -12px rgba(0,0,0,.6); --shadow-lift:0 2px 8px -1px rgba(0,0,0,.5), 0 14px 30px -6px rgba(0,0,0,.68), 0 30px 56px -14px rgba(0,0,0,.72); --shadow-pop:0 12px 28px -6px rgba(0,0,0,.65), 0 32px 60px -16px rgba(0,0,0,.85); --warn:#E0A23C; --bad:var(--danger); /* Danger TEXT must be LIGHT on the dark surface — the old hardcoded #8a2b2b was dark-on-dark. */ --danger-ink:#FF8A8A; --accent:var(--peach); --accent-soft:color-mix(in oklab, var(--peach) 20%, transparent); --accent-line:color-mix(in oklab, var(--peach) 80%, #ffffff 6%); /* Per-contest Vote colour (TODAY default = gold; YESTERDAY + the contest classes are below). */ --vote-accent:var(--peach); --vote-on-accent:#14172B; /* Unstarred star-dogear fold — a muted slate that reads as a subtle fold on the dark card. */ --dogear-bg:#343B54; } /* ===== Per-contest theme ===== Two contests are votable at once (TODAY + YESTERDAY); Results can also open older days. Vote.razor and Results.razor tag the screen with .contest-today / .contest-yesterday / .contest-prior off the contest's date vs the viewer's local today, so the prompt box, the cards' accent stripe and the picked-card fill all share one colour — and the SAME contest's prompt box looks identical on Vote and on its Results page. TODAY keeps the established accent (light = blue, dark = gold); YESTERDAY a warm red/coral; a PRIOR day a cool teal/cyan — each distinct but on-palette. --vote-on-accent = the text. TODAY is blue in BOTH modes (dark uses a lighter periwinkle): dark mode's brand gold would clash with the gold star bank in the prompt box, so TODAY's highlight is blue there too. */ .t-light .contest-today { --vote-accent:#3D63C1; --vote-on-accent:#FFFFFF; } .t-light .contest-yesterday { --vote-accent:#C24A3C; --vote-on-accent:#FFFFFF; } .t-light .contest-prior { --vote-accent:#0E7C8A; --vote-on-accent:#FFFFFF; } .t-dark .contest-today { --vote-accent:#7E93F2; --vote-on-accent:#FFFFFF; } .t-dark .contest-yesterday { --vote-accent:#E8766A; --vote-on-accent:#14172B; } .t-dark .contest-prior { --vote-accent:#54C7D2; --vote-on-accent:#14172B; } /* Submit's prompt box keeps the single brand accent (gold needs dark text on its filled surface). The Vote prompt's colour now comes from --vote-accent / --vote-on-accent above, per contest. */ .t-dark .page-submit .contest-prompt { color:#14172B; } .t-dark .btn-primary { color:#14172B; } .t-light .page-submit .contest-prompt { background:#3D63C1; } /* ===== Topbar theme toggle ===== */ .theme-toggle-btn { color:var(--ink-2); background:var(--bg-sunk); } .theme-toggle-btn:hover { color:var(--ink); background:color-mix(in oklab, var(--bg-sunk) 70%, var(--ink) 8%); }