/* Light-mode overrides. The body keeps class="dark text-light" so dark stays the default; we win via higher specificity when . The accent palette is deliberately darker than the dark-mode gold so that text-bearing colors (links, code, heading prefixes) clear WCAG AA (4.5:1) against the cream background instead of washing out. */ html[data-theme="light"] body.dark { --bg-color: #f4f0e6; --bg-variant: #e7dfca; --primary: #5c4310; /* link hover, ◆ accents, tag hover bg (~6.6:1) */ --primary-variant: #6e5113; /* default link color (~5.7:1) */ --secondary: #6b4e18; /* code, heading prefixes, underline (~6.4:1) */ color: #1a1a1a !important; } html[data-theme="light"] body.dark.text-light { --bs-text-opacity: 1; color: #1a1a1a !important; } html[data-theme="light"] .text-muted { color: #5a5a5a !important; } html[data-theme="light"] .breadcrumb-item + .breadcrumb-item::before { color: #5a5a5a !important; } html[data-theme="light"] .video-overlay { background: rgba(244, 240, 230, 0.55); } html[data-theme="light"] #bg-video { opacity: 0.18; } /* Fixed background video, shared across content pages. Mirrors the home page's inline copy so development / research / posts get the same backdrop. (Home keeps its own inline copy plus a mobile banner video.) */ #bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.38; } .video-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.52); z-index: -1; } @media (max-width: 768px) { #bg-video, .video-overlay { display: none; } } /* Accents used as backgrounds need light text once the palette darkens. */ html[data-theme="light"] ::selection { background: #6b4e18; color: #f4f0e6; } html[data-theme="light"] mark { color: #f4f0e6 !important; } /* The gaming button on the home page uses pale gold text + a dark text-shadow tuned for the dark background; both vanish on cream. */ html[data-theme="light"] .gaming-btn { color: #5c4310 !important; border-color: #6e5113 !important; text-shadow: none !important; } /* The display-heading gradient (e.g. "SOMNOLENT LABS") runs light-gold to gold, which washes out on cream. Use a darker gold->brown gradient in light mode so it keeps its metallic sheen but stays legible (>=4.4:1). */ html[data-theme="light"] .display-1, html[data-theme="light"] .display-2, html[data-theme="light"] .display-3, html[data-theme="light"] .display-4 { background: linear-gradient(180deg, #8a6a22 0%, #6e5113 45%, #5c4310 75%, #4a350c 100%); -webkit-background-clip: text; background-clip: text; } /* Decorative dividers are gold-on-cream and become invisible in light mode. */ html[data-theme="light"] hr, html[data-theme="light"] .deco-rule { background: linear-gradient(90deg, transparent, #8a6a22 18%, #6b4e18 50%, #8a6a22 82%, transparent); } html[data-theme="light"] hr::after, html[data-theme="light"] .deco-rule::after { color: #6b4e18; text-shadow: none; } /* Theme switcher UI */ .sl-theme-switcher { position: fixed; top: 12px; right: 12px; z-index: 1050; display: inline-flex; font-family: 'Poiret One', sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; background: rgba(10, 10, 10, 0.55); border: 1px solid var(--primary, #c8a45c); border-radius: 2px; overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html[data-theme="light"] .sl-theme-switcher { background: rgba(244, 240, 230, 0.7); } .sl-theme-switcher button { background: transparent; border: 0; padding: 6px 10px; color: var(--primary, #c8a45c); cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background-color 0.18s ease, color 0.18s ease; } .sl-theme-switcher button:hover { background: rgba(200, 164, 92, 0.18); } .sl-theme-switcher button.is-active { background: var(--primary, #c8a45c); color: #0a0a0a; } html[data-theme="light"] .sl-theme-switcher button.is-active { color: #f4f0e6; } .sl-theme-switcher button + button { border-left: 1px solid rgba(200, 164, 92, 0.4); } @media (max-width: 480px) { .sl-theme-switcher { font-size: 10px; } .sl-theme-switcher button { padding: 5px 8px; } }