/* Shared site header — used by all static, blog, and daily pages. index.html has a bespoke header (theme/sound toggles + Surprise Me) that defines its own .header-content styles inline and intentionally does NOT load this file. */ header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; position: sticky; top: 0; z-index: 100; } .header-content { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .header-content .logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; font-weight: 700; } .header-content .logo-icon { width: 36px; height: 36px; background: var(--accent, #7C5CFF); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .header-content .back-link { color: var(--accent, #7C5CFF); text-decoration: none; font-weight: 600; } /* ───────────────────────────────────────────────────────────────────────── Theme toggle — injected by consent.js into .header-content on every page that loads this file. Same localStorage key as the homepage's bespoke toggle (`bl_theme`), so the two stay in sync. ───────────────────────────────────────────────────────────────────────── */ .header-content .bl-theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; color: var(--text); transition: background 0.15s, transform 0.15s; } .header-content .bl-theme-toggle:hover { background: var(--bg-secondary, rgba(0, 0, 0, 0.04)); transform: scale(1.05); } .header-content .header-actions { display: inline-flex; align-items: center; gap: 0.5rem; } /* ───────────────────────────────────────────────────────────────────────── Dark theme — palette matches the existing dark games (dont-touch-red / water-sort / etc.) and the Daily share card / OG image, so the whole site reads as one brand when in dark. Activated by: html[data-theme="dark"] (explicit user choice, persisted) html:not([data-theme]) @prefers-dark (default: follow system) The toggle in consent.js sets data-theme="dark" or "light" on . ───────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #0B0F1A; --bg-secondary: #1B1330; --text: #E9E5FF; --text-secondary: #9B95C2; --border: #6B5494; /* C3.2 2026-05-18: was #2A2148 (1.28:1, invisible). Now 3.03:1, hits UI threshold. */ --accent: #8B6BFF; /* C3.2 2026-05-18: was #7C5CFF (4.40:1, failed AA by 0.1). Now 5.14:1. Same purple, fractionally lighter. */ --accent-hover: #9479FF; } } html[data-theme="dark"] { --bg: #0B0F1A; --bg-secondary: #1B1330; --text: #E9E5FF; --text-secondary: #9B95C2; --border: #6B5494; /* C3.2 2026-05-18: was #2A2148 (1.28:1, invisible). Now 3.03:1, hits UI threshold. */ --accent: #8B6BFF; /* C3.2 2026-05-18: was #7C5CFF (4.40:1, failed AA by 0.1). Now 5.14:1. Same purple, fractionally lighter. */ --accent-hover: #9479FF; } /* Make body bg follow the var so dark/light flip end-to-end without page-specific overrides. Most static + blog pages already do this; a few inline-style their body background, those keep their own behavior. */ html[data-theme="dark"] body { background: var(--bg); color: var(--text); } @media (prefers-color-scheme: dark) { html:not([data-theme]) body { background: var(--bg); color: var(--text); } } /* Avoid the OS flash on first paint by deferring transitions to after the theme is set. consent.js removes .bl-theme-loading from ASAP. */ html.bl-theme-loading, html.bl-theme-loading * { transition: none !important; }