/* ═══════════════════════════════════════════════════════════════════════════ Clean Arcade — DAY mode. Not a bleached copy of the night arcade: the same arcade at noon. The neon tubes stop glowing and become painted signage — the identical six hues held at full chroma but dropped in lightness until each one clears 4.5:1 on a white card, so every colour a visitor learned at night is still the same colour by day. Glows become crisp coloured shadows; the violet ground becomes a sky-to-cream wash. Everything below is a token override plus the handful of places the night build hard-codes a dark value (the JS-injected chrome in widgets.js / footer.js, and the two #000 shadows in arcade.css). No structural CSS is duplicated, so the two themes can never drift apart in layout. Applied by assets/js/ca-theme.js writing data-theme="day" on before first paint. "System" resolves to day or night and writes the same attribute, so there is exactly one code path. ═════════════════════════════════════════════════════════════════════════ */ :root[data-theme="day"] { color-scheme: light; /* ── the signage, repainted for sunlight ────────────────────────────── Same hue family, chroma kept high, lightness taken down to where the colour reads as ink rather than light. These are the values the whole day theme is derived from. */ --n-cyan: #0086a8; --n-lime: #4f8a00; --n-magenta: #c4008f; --n-violet: #6935cf; --n-yellow: #9a6c00; --n-green: #00875a; --n-pink: #cf0f8c; --neon: var(--n-cyan); --brand-clean: #4f8a00; --brand-safe: #0086a8; /* ── ground: a warm, glossy off-white — cream rather than paper ─────── */ --ground-1: #fdf9f1; --ground-2: #fbf6ec; --ground-3: #f7f1e6; /* ── nocturne roles ──────────────────────────────────────────────────── */ --color-bg: #fbf6ec; --color-surface: #fffdf8; --color-text: #1a1726; --color-accent: #5a4bc4; --color-accent-2: #5a4bc4; --color-divider: color-mix(in srgb, #1a1726 14%, transparent); --card-face: #fffdf8; /* the lit tube edge survives, at painted chroma */ --edge: linear-gradient(135deg, color-mix(in srgb, var(--n-magenta) 38%, transparent), color-mix(in srgb, var(--neon) 46%, transparent) 34%, color-mix(in srgb, var(--n-yellow) 34%, transparent) 62%, color-mix(in srgb, var(--n-green) 38%, transparent) 82%, color-mix(in srgb, var(--n-magenta) 32%, transparent)); --edge-lit: linear-gradient(135deg, var(--n-magenta), var(--neon) 34%, var(--n-yellow) 62%, var(--n-green) 82%, var(--n-magenta)); } /* ── page ground ───────────────────────────────────────────────────────── Warm off-white, not paper white: a cream base with two soft coloured pools and one broad sheen down the top of the page, so the ground reads as a glossy surface catching light rather than as a blank sheet. The neon borders still have something to sit on. */ :root[data-theme="day"] body { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.35) 26%, rgba(255,255,255,0) 52%), radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--n-cyan) 12%, transparent), transparent 62%), radial-gradient(900px 560px at 92% 4%, color-mix(in srgb, var(--n-magenta) 9%, transparent), transparent 60%), radial-gradient(1200px 700px at 50% 110%, color-mix(in srgb, var(--n-yellow) 12%, transparent), transparent 66%), linear-gradient(175deg, var(--ground-1) 0%, var(--ground-2) 48%, var(--ground-3) 100%); background-attachment: fixed; color: var(--color-text); } /* the aurora blobs are pure light — at noon they read as coloured haze */ :root[data-theme="day"] .aurora { opacity: 0.42; filter: saturate(1.3); } /* ── cards and surfaces ────────────────────────────────────────────────── On a dark ground a card is lifted by glow. On a light ground glow does nothing, so the lift comes from a real shadow plus the coloured edge. */ :root[data-theme="day"] .gcard { background: linear-gradient(180deg, #ffffff 0%, var(--card-face) 46%, color-mix(in srgb, var(--card-face) 90%, var(--neon)) 100%) padding-box, var(--edge) border-box; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58,46,30,.07), 0 12px 28px -18px rgba(58,46,30,.42); } :root[data-theme="day"] .gcard:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--neon) 30%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--neon) 55%, transparent), 0 18px 40px -26px rgba(58,46,30,.5); } :root[data-theme="day"] .info-card, :root[data-theme="day"] .feat-item, :root[data-theme="day"] .faq details { box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58,46,30,.05), 0 8px 22px -20px rgba(58,46,30,.4); } /* ── the thumb well: a bright playfield tile, not a dark cut-out ───────── */ :root[data-theme="day"] .thumb { background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--neon) 22%, #fff), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--neon) 12%, #fffdf8), #fffdf8); } /* ── header ──────────────────────────────────────────────────────────── */ /* Transparent in both themes: the daylight ground flows through the bar the same way the night ground does. Only the hairline changes weight. */ :root[data-theme="day"] .site-head { background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--n-cyan) 20%, transparent); box-shadow: none; } /* ── the primary button keeps its ink-on-bright contract ─────────────── */ :root[data-theme="day"] .btn-neon { color: #fff; } :root[data-theme="day"] .btn-neon:hover { color: #fff; } /* Play Now: by day it takes the same ink magenta as the About heading (#c4008f), white label, a real shadow instead of a glow */ :root[data-theme="day"] .btn-play { color: #fff; background: linear-gradient(100deg, #d61aa3, var(--n-magenta) 55%, #a8007a); border-color: color-mix(in srgb, var(--n-magenta) 70%, #fff); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(58,46,30,.12), 0 10px 22px -12px color-mix(in srgb, var(--n-magenta) 70%, transparent); } :root[data-theme="day"] .btn-play::after { box-shadow: 0 0 22px 0 color-mix(in srgb, var(--n-magenta) 45%, transparent); opacity: .35; } :root[data-theme="day"] .btn-play:hover { color: #fff; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 28px -12px color-mix(in srgb, var(--n-magenta) 80%, transparent); } :root[data-theme="day"] .btn-play:focus-visible { outline-color: var(--n-magenta); } /* ── the ticker ──────────────────────────────────────────────────────── */ /* The marquee used to be a band of pure white across a cream page — the one stark rectangle in the day theme. It now carries the theme's own off-white, so the band reads as the same surface, a shade lifted. */ :root[data-theme="day"] .ticker { background: linear-gradient(180deg, color-mix(in srgb, var(--ground-1) 94%, #fff), color-mix(in srgb, var(--ground-2) 97%, #fff)); box-shadow: 0 0 22px -18px var(--n-cyan); } /* ── the JS-injected chrome ────────────────────────────────────────────── widgets.js and footer.js append a