/* ECHO.11 — Quiet Mode (dark theme) data-theme on is the single source of truth, resolved before first paint by the inline bootstrap script in each page's : stored choice → night hours (20:00–07:00) → system preference. The palette mirrors the frequency page's "2am palette" so the whole site rests on the same night surface. */ html[data-theme="dark"] { --bg: #0e1013; --text: #e9e9e7; --text-secondary: #b3b3b0; --text-light: #8f8f8c; --white: #16181c; --border: #2a2d31; --accent-dim: rgba(45,212,240,0.18); color-scheme: dark; } /* photography dims slightly so the b&w imagery stays elegant at night */ html[data-theme="dark"] img, html[data-theme="dark"] video { filter: brightness(0.82) contrast(1.05); } /* preserve the pages' existing grayscale treatments (the generic img rule above outranks them in specificity), just dimmed for night */ html[data-theme="dark"] .vision-image img, html[data-theme="dark"] .astro-banner img, html[data-theme="dark"] .footer-banner img { filter: grayscale(100%) brightness(0.72); } html[data-theme="dark"] .hero-bg img { filter: grayscale(20%) brightness(0.75) contrast(1.05); } html[data-theme="dark"] .info-block-img img { filter: grayscale(15%) brightness(0.8) contrast(1.05); } /* surfaces that hardcode the light palette */ html[data-theme="dark"] .hero-overlay { background: linear-gradient(to top, rgba(14,16,19,1) 0%, rgba(14,16,19,0.95) 30%, rgba(14,16,19,0.7) 60%, rgba(14,16,19,0) 100%); } html[data-theme="dark"] .hero-door { background: rgba(22,24,28,0.92); } html[data-theme="dark"] .hero-door:hover, html[data-theme="dark"] .hero-door:focus-visible { background: var(--white); box-shadow: 0 12px 32px rgba(0,0,0,0.5); } html[data-theme="dark"] .cursor-dot { background: rgba(200,200,200,0.5); } html[data-theme="dark"] .soft-cta { background: rgba(22,24,28,0.65); } /* 1s crossfade — applied by quiet-mode.js only while toggling, so page loads never animate their colors */ html.theme-fade, html.theme-fade body, html.theme-fade * { transition: background-color 1s ease, color 1s ease, border-color 1s ease, filter 1s ease !important; } /* the sun/moon toggle, injected next to the clock by quiet-mode.js */ .quiet-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: 50%; color: var(--text); opacity: 0.65; transition: opacity 0.3s ease, transform 0.3s ease; } .quiet-toggle:hover, .quiet-toggle:focus-visible { opacity: 1; transform: rotate(12deg); } .quiet-toggle svg { width: 18px; height: 18px; } .quiet-toggle .icon-sun { display: none; } html[data-theme="dark"] .quiet-toggle .icon-sun { display: block; } html[data-theme="dark"] .quiet-toggle .icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { html.theme-fade, html.theme-fade body, html.theme-fade * { transition: none !important; } .quiet-toggle { transition: none; } .quiet-toggle:hover { transform: none; } }