/* ============================================================ layoffhedge dark mode Activates when is set. Strategy: 1. Override CSS variables that pages already consume. 2. Add targeted overrides for hardcoded colors that bypass vars. 3. Provide .theme-toggle button styling. Color palette is intentionally warm-dark, not slate-black, to preserve the newspaper feel of the brand. ============================================================ */ /* ---------- variable overrides ---------- */ html[data-theme="dark"] { --bg: #181614; --card: #23201b; --surface: #23201b; --surface-2: #2a2620; --surface2: #2a2620; --border: #2e2a24; --text: #f0ede6; --text2: #9a948a; --text-dim: #9a948a; --muted: #9a948a; --accent: #ef5050; --accent-bg: #3a2222; --accent-hover: #ff6060; --pink: #ef5050; --pink-glow: rgba(239, 80, 80, 0.32); --pink-dim: rgba(239, 80, 80, 0.14); --red: #ef5050; --green: #4a9d6b; --green-bg: #1f3525; --blue: #5a8fc7; --blue-bg: #1d2935; --purple: #9d7ce6; --purple-bg: #2a2138; --amber: #daa520; --amber-bg: #3a2f15; --gold: #daa520; --gold-bg: #3a2f15; --yellow: #daa520; --orange: #e89456; --olive: #7a8c5c; --olive-bg: #252b1f; } html[data-theme="dark"] body { background: #181614; color: #f0ede6; } html[data-theme="dark"] a { color: inherit; } /* ---------- nav background overrides (rgba was hardcoded) ---------- */ html[data-theme="dark"] nav, html[data-theme="dark"] nav.nav, html[data-theme="dark"] header nav { background: rgba(24,22,20,.97) !important; } /* ---------- avatar / pill / chip backgrounds (hardcoded #edeae4) ---------- */ html[data-theme="dark"] .lr-av { background: #2a2620; color: #9a948a; } html[data-theme="dark"] .nav-aminext { background: #2a2620 !important; color: #9a948a !important; border-color: #2e2a24 !important; } html[data-theme="dark"] .nav-aminext:hover { background: #353029 !important; color: #f0ede6 !important; } html[data-theme="dark"] .token-ca { background: #2a2620; } html[data-theme="dark"] .token-ca:hover { background: #353029; } html[data-theme="dark"] .pct-lo { background: #2a2620; } /* ---------- row hover (hardcoded rgba(255,255,255,.6)) ---------- */ html[data-theme="dark"] .lr:hover { background: rgba(255,255,255,.03); } html[data-theme="dark"] .nr:hover { background: #1f1d19; } html[data-theme="dark"] .co-table tr:hover { background: rgba(255,255,255,.03); } html[data-theme="dark"] .lr { border-bottom-color: #2a2620; } html[data-theme="dark"] .nr { border-bottom-color: #2a2620; } /* ---------- scrollbar thumbs ---------- */ html[data-theme="dark"] .feed-scroll::-webkit-scrollbar-thumb, html[data-theme="dark"] .news-scroll::-webkit-scrollbar-thumb { background: #3a3630; } /* ---------- footer + small text ---------- */ html[data-theme="dark"] .foot { color: #5a564e; } html[data-theme="dark"] .news-ft { color: #5a564e; } /* ---------- nav-x hover (hardcoded fff for icon color) ---------- */ html[data-theme="dark"] .nav-x:hover { background: #f0ede6; color: #181614 !important; } /* ---------- editorial body text (hardcoded #3a3733 on company/trends) ---------- */ html[data-theme="dark"] .editorial { color: #d5d1c8; } html[data-theme="dark"] .editorial blockquote { color: #d5d1c8; } html[data-theme="dark"] .editorial h2 { color: var(--text); } html[data-theme="dark"] .cite-section { background: #1f1d19; } /* ---------- thesis quote ---------- */ html[data-theme="dark"] .thesis-q { background: var(--accent-bg); } html[data-theme="dark"] .thesis-q p { color: var(--text); } /* ---------- inputs (range slider thumb white border) ---------- */ html[data-theme="dark"] .filter-range::-webkit-slider-thumb { border-color: var(--card); } html[data-theme="dark"] .filter-search { background: var(--bg); color: var(--text); border-color: var(--border); } /* ---------- sort buttons ---------- */ html[data-theme="dark"] .sort-btn { background: var(--card); color: var(--muted); } /* ---------- h1b page specific (hardcoded #f5f3ef surface2, #f0ece6, etc.) ---------- */ html[data-theme="dark"] .nav-h1b { background: var(--accent); } html[data-theme="dark"] .nav-h1b:hover { background: #ff6060; } /* ---------- 404 page button ---------- */ html[data-theme="dark"] .btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); } html[data-theme="dark"] .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* ---------- buy.html token section background ---------- */ html[data-theme="dark"] .nav-back { color: var(--accent); } /* ---------- aminext.html (inline color:#5a5750 SEO text) ---------- */ html[data-theme="dark"] .seo-text { color: #b8b3a7 !important; } html[data-theme="dark"] .seo-text strong { color: var(--text); } html[data-theme="dark"] .seo-faq { color: #b8b3a7 !important; } /* ============================================================ .theme-toggle button (always present, light + dark) 30x30, matches .nav-x pattern. ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; font-family: inherit; } .theme-toggle:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .theme-toggle svg { width: 15px; height: 15px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-theme="dark"] .theme-toggle:hover { background: #ff6060; border-color: #ff6060; color: #fff; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* mobile: keep the toggle visible even when other links hide */ @media (max-width: 768px) { .nav-right .theme-toggle { display: inline-flex !important; } }