/* ============================================================================ theme.css — global light/dark theme. Loaded on every page. The theme is driven by , set early by the inline theme-boot snippet in each (see tools/inject-Theme). The toggle button + device detection live in assets/theme.js. The site's own stylesheets define the color tokens in `:root`. We override them with the HIGHER-specificity selector `:root[data-theme="dark"]`, so this file wins without `!important` for the tokens, then we re-style the components that use hard-coded light colors with `[data-theme="dark"] .class`. ============================================================================ */ /* ---- Dark tokens (overrides the site's `:root`) ---- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1322; --card-bg: #111b30; --text: #e6ebf4; --text-secondary: #97a4bd; --border: #26334f; --primary: #3b82f6; --primary-light: #60a5fa; --primary-dark: #93c5fd; --success: #22c06c; --warning: #fbbf24; --danger: #f87171; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5); } /* ---- Base ---- */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } [data-theme="dark"] a { color: var(--primary-light); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--text); } [data-theme="dark"] .page-eyebrow #headerTitle { color: var(--primary-light); } [data-theme="dark"] .page-eyebrow #headerSubtitle, [data-theme="dark"] .page-intro p { color: var(--text-secondary); } /* ---- Nav ---- */ [data-theme="dark"] .apple-nav { background: #0f1a2f; border-bottom-color: var(--border); } [data-theme="dark"] .an-link, [data-theme="dark"] .an-details summary { color: var(--text); } [data-theme="dark"] .an-item:hover>.an-link, [data-theme="dark"] .an-item.open>.an-link { background: #1a2947; color: var(--primary-light); } [data-theme="dark"] .an-menu, [data-theme="dark"] .mega-menu { background: #101b31; border-color: var(--border); box-shadow: var(--shadow-lg); } [data-theme="dark"] .an-menu a, [data-theme="dark"] .an-menu button.dropdown-tab-btn { color: var(--text); } [data-theme="dark"] .an-menu a:hover, [data-theme="dark"] .an-menu button.dropdown-tab-btn:hover { background: #1a2947; color: var(--primary-light); } [data-theme="dark"] .an-menu a[aria-current="page"] { color: var(--primary-light); } [data-theme="dark"] .an-wordmark, [data-theme="dark"] .an-lang-current { color: var(--text); } [data-theme="dark"] .an-lang { background: #1a2742; } [data-theme="dark"] .an-lang-current { background: #233457; color: #fff; box-shadow: none; } [data-theme="dark"] .an-lang-link:hover { background: #233457; color: var(--primary-light); } [data-theme="dark"] .an-mobile-toggle { color: var(--text); } [data-theme="dark"] .an-items { background: #0f1a2f; border-top-color: var(--border); } [data-theme="dark"] .an-item::after { background: transparent; } [data-theme="dark"] .site-nav { background: #16233f; } [data-theme="dark"] .sn-link { color: var(--text-secondary); } [data-theme="dark"] .sn-link:hover { color: var(--primary-light); } /* ---- Tabs / mode toggle ---- */ [data-theme="dark"] .tab-btn { color: var(--text-secondary); } [data-theme="dark"] .tab-btn:hover { color: var(--primary-light); } [data-theme="dark"] .tab-btn.active { background: #16233f; color: var(--text); box-shadow: none; } [data-theme="dark"] .mode-toggle button { color: var(--text-secondary); background: transparent; } [data-theme="dark"] .mode-toggle button.active { background: #1a2947; color: var(--primary-light); } /* ---- Cards / sections / guides ---- */ [data-theme="dark"] .card, [data-theme="dark"] .guide-content, [data-theme="dark"] .sp-form, [data-theme="dark"] .result-card, [data-theme="dark"] .more-box, [data-theme="dark"] .social-popup, [data-theme="dark"] .modal, [data-theme="dark"] .tip-box, [data-theme="dark"] .take-home-box, [data-theme="dark"] .data-source-note, [data-theme="dark"] .quick-hint, [data-theme="dark"] .empty { background: var(--card-bg); border-color: var(--border); } [data-theme="dark"] .card:hover { border-color: var(--primary-light); box-shadow: var(--shadow); } [data-theme="dark"] .card img { background: #16233f; } [data-theme="dark"] .card-title, [data-theme="dark"] .card h3, [data-theme="dark"] .guide-header h4, [data-theme="dark"] .sp-form h3 { color: var(--text); } [data-theme="dark"] .card p, [data-theme="dark"] .article-body p, [data-theme="dark"] .badge { color: var(--text-secondary); } [data-theme="dark"] .badge { background: rgba(96,165,250,.12); color: var(--primary-light); } [data-theme="dark"] .meta { color: #7a87a0; } /* ---- Chips / back link ---- */ [data-theme="dark"] .chip { background: var(--card-bg); border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .chip:hover { border-color: var(--primary-light); color: var(--primary-light); } [data-theme="dark"] .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .back-link { color: var(--primary-light); } /* ---- Buttons ---- */ [data-theme="dark"] .btn-outline { background: transparent; border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .btn-outline:hover { border-color: var(--primary-light); color: var(--primary-light); } /* ---- Bracket tables / result tables ---- */ [data-theme="dark"] .bracket-table th, [data-theme="dark"] .bracket-table td { border-color: var(--border); } [data-theme="dark"] .bracket-table th { background: #16233f; color: var(--text); } [data-theme="dark"] .bracket-table td { color: var(--text); } [data-theme="dark"] .bracket-table tr.active { background: #1a2947; } [data-theme="dark"] .result-card { background: #111b30; border-color: var(--border); } [data-theme="dark"] .result-label { color: var(--text-secondary); } [data-theme="dark"] .result-value { color: var(--text); } [data-theme="dark"] .result-card.highlight { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; } /* ---- Forms ---- */ [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .sp-form input, [data-theme="dark"] .sp-form select, [data-theme="dark"] .sp-form .form-input, [data-theme="dark"] .sp-form .form-select { background: #0d1728; color: var(--text); border-color: var(--border); } [data-theme="dark"] .input-prefix .prefix { color: var(--text-secondary); } [data-theme="dark"] label.form-label, [data-theme="dark"] .form-label { color: var(--text); } [data-theme="dark"] .sp-note, [data-theme="dark"] .sp-form .sp-note { color: var(--text-secondary); } /* ---- Info boxes ---- */ [data-theme="dark"] .tip-box { background: #10233c; border-color: #1f3a5f; } [data-theme="dark"] .tip-box p { color: #bcd7f7; } [data-theme="dark"] .take-home-box { background: #10233c; border-color: #1f3a5f; } [data-theme="dark"] .take-home-box .th-label { color: var(--text-secondary); } [data-theme="dark"] .take-home-box strong { color: var(--text); } [data-theme="dark"] .warning-box { background: #2a2010; border-color: #5f4a1f; } [data-theme="dark"] .warning-box p { color: #f5d9a0; } [data-theme="dark"] .danger-box { background: #2a1010; border-color: #5f1f1f; } [data-theme="dark"] .danger-box p { color: #f5b0b0; } [data-theme="dark"] .success-box { background: #0f2a1a; border-left-color: var(--success); } [data-theme="dark"] .success-box h4, [data-theme="dark"] .success-box p { color: #9fe0bd; } [data-theme="dark"] .data-source-note, [data-theme="dark"] .quick-hint { color: var(--text-secondary); } [data-theme="dark"] .year-warning-box, [data-theme="dark"] .stale-warning-box { color: #f5d9a0; } /* ---- State map / legend (already dark navy; keep readable) ---- */ [data-theme="dark"] .state-legend { color: #cbd5e1; } [data-theme="dark"] .state-jump-row { color: #cbd5e1; } [data-theme="dark"] .state-jump-row select { background: #0d1728; color: #e2e8f0; border-color: var(--border); } [data-theme="dark"] .map-credit { color: #7c8db0; } [data-theme="dark"] .state-badge { color: #fff; } /* ---- Mega menu / search ---- */ [data-theme="dark"] .mega-section-label, [data-theme="dark"] .mega-quicklink { color: var(--text-secondary); } [data-theme="dark"] .mega-tile { color: var(--text); } [data-theme="dark"] .mega-tile:hover { background: #1a2947; } [data-theme="dark"] .mega-tile .mt-label { color: var(--text); } [data-theme="dark"] .mega-tile .mt-desc { color: var(--text-secondary); } [data-theme="dark"] .mega-search-box input { color: var(--text); border-bottom-color: var(--border); } [data-theme="dark"] .mega-search-result:hover, [data-theme="dark"] .mega-search-result.msr-active { background: #1a2947; } [data-theme="dark"] .mega-search-result .msr-title { color: var(--text); } [data-theme="dark"] .mega-search-empty { color: var(--text-secondary); } [data-theme="dark"] .mega-more-row a, [data-theme="dark"] .mega-more-row a:hover { color: var(--primary-light); } [data-theme="dark"] .mega-more-row { border-top-color: var(--border); } /* ---- Social / share / tour ---- */ [data-theme="dark"] .social-circle-btn { background: var(--card-bg); border-color: var(--border); color: var(--text); } [data-theme="dark"] .social-circle-btn:hover { border-color: var(--primary); color: var(--primary-light); } [data-theme="dark"] .share-toast { background: var(--primary-dark); color: #0b1322; } [data-theme="dark"] .tour-float { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-lg); } [data-theme="dark"] .tour-float .tf-head, [data-theme="dark"] .tour-float .tf-text { color: var(--text); } [data-theme="dark"] .tour-float .tf-close { color: var(--text-secondary); } [data-theme="dark"] .tour-float .tf-progress { color: var(--text-secondary); } /* ---- Articles / content ---- */ [data-theme="dark"] .article-head h1 { color: var(--text); } [data-theme="dark"] .article-body h5, [data-theme="dark"] .article-body h3 { color: var(--text); } [data-theme="dark"] .article-body li { color: var(--text); } [data-theme="dark"] .article-body table th, [data-theme="dark"] .article-body table td { border-color: var(--border); } [data-theme="dark"] .article-body table th { background: #16233f; } [data-theme="dark"] .more-box h4 { color: var(--text-secondary); } [data-theme="dark"] .more-box a { color: var(--primary-light); border-bottom-color: var(--border); } [data-theme="dark"] .empty { color: var(--text-secondary); } /* ---- Modal ---- */ [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.6); } [data-theme="dark"] .modal h3 { color: var(--text); } /* ---- Footer ---- */ [data-theme="dark"] .site-footer { border-top-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .site-footer a { color: var(--text-secondary); } [data-theme="dark"] .site-footer a:hover { color: var(--primary-light); } [data-theme="dark"] .site-footer .flinks a { color: var(--primary-light); } /* ---- Theme toggle button (injected into the nav social row by theme.js) ---- */ .social-row .theme-toggle-btn { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; cursor:pointer; padding:0; flex:none; transition:background .15s, border-color .15s, transform .15s; } .social-row .theme-toggle-btn:hover { background:#f5f7fb; border-color:var(--primary); transform:translateY(-1px); } [data-theme="dark"] .social-row .theme-toggle-btn { background:#16213a; border-color:var(--border); } [data-theme="dark"] .social-row .theme-toggle-btn:hover { background:#1e2c4d; border-color:var(--primary-light); } .theme-toggle-fixed { position:fixed; top:64px; right:16px; z-index:850; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background:#fff; font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:var(--shadow-lg); transition:background .15s, border-color .15s, transform .15s; } .theme-toggle-fixed:hover { transform:translateY(-2px); border-color:var(--primary); background:#f5f7fb; } [data-theme="dark"] .theme-toggle-fixed { background:#16213a; border-color:#2a3a5f; } [data-theme="dark"] .theme-toggle-fixed:hover { background:#1e2c4d; border-color:var(--primary-light); } /* ============================================================================ Robust dark-mode legibility — these use !important because several elements carry an inline style="background:#..." (e.g. the readonly standard-deduction input) which would otherwise override the class rules and leave white-on-white. ============================================================================ */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #0d1728 !important; color: #e6ebf4 !important; -webkit-text-fill-color: #e6ebf4 !important; border-color: var(--border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6b7891 !important; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select { background-color: #0d1728 !important; color: #e6ebf4 !important; -webkit-text-fill-color: #e6ebf4 !important; } [data-theme="dark"] .input-prefix { background: #0d1728 !important; border-color: var(--border) !important; } [data-theme="dark"] .input-prefix .prefix { color: var(--text-secondary) !important; } [data-theme="dark"] .input-prefix input { background-color: #0d1728 !important; } /* Direct, bulletproof dark for the readonly standard-deduction field (it carries an inline style="background:#f0f0f0;" that must lose to these) plus any readonly/disabled. */ [data-theme="dark"] #standardDeduction, [data-theme="dark"] input[readonly], [data-theme="dark"] input:disabled, [data-theme="dark"] input:-moz-read-only, [data-theme="dark"] .deduction-display, [data-theme="dark"] .prefix-field { background-color: #0d1728 !important; color: #e6ebf4 !important; -webkit-text-fill-color: #e6ebf4 !important; border-color: var(--border) !important; } /* Amber/flat state badges: dark text on the bright amber fill; subtle shadow for the blue "flat" badges that stay white. Improves the amber badge in both modes. */ .state-badge { text-shadow: 0 1px 2px rgba(0,0,0,.28); } [data-theme="dark"] .state-badge { color: #0b1322 !important; text-shadow: none; } /* checkbox / self-employment rows */ [data-theme="dark"] .checkbox-group, [data-theme="dark"] .sp-checkbox-row, [data-theme="dark"] .checkbox-row { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-theme="dark"] .checkbox-group label, [data-theme="dark"] .sp-checkbox-row label, [data-theme="dark"] .checkbox-row label { color: var(--text) !important; } [data-theme="dark"] input[type="checkbox"] { accent-color: var(--primary-light); } /* collapsible guide sections / compare-all-states */ [data-theme="dark"] .guide-section { background: var(--card-bg) !important; border-color: var(--border) !important; } [data-theme="dark"] .guide-header, [data-theme="dark"] .guide-header:hover { background: #16233f !important; } [data-theme="dark"] .guide-header h4, [data-theme="dark"] .guide-header .arrow { color: var(--text) !important; } [data-theme="dark"] .guide-content { background: transparent !important; } /* info boxes: force readable text */ [data-theme="dark"] .warning-box { background: #2a2010 !important; color: #f5d9a0 !important; border-color: #5f4a1f !important; } [data-theme="dark"] .warning-box p { color: #f5d9a0 !important; } [data-theme="dark"] .tip-box { background: #10233c !important; color: #bcd7f7 !important; border-color: #1f3a5f !important; } [data-theme="dark"] .tip-box p { color: #bcd7f7 !important; } [data-theme="dark"] .danger-box { background: #2a1010 !important; color: #f5b0b0 !important; } [data-theme="dark"] .danger-box p { color: #f5b0b0 !important; } [data-theme="dark"] .success-box { background: #0f2a1a !important; } [data-theme="dark"] .success-box h4, [data-theme="dark"] .success-box p { color: #9fe0bd !important; } /* generic light containers */ [data-theme="dark"] .card, [data-theme="dark"] .sp-form, [data-theme="dark"] .more-box, [data-theme="dark"] .result-card, [data-theme="dark"] .social-popup, [data-theme="dark"] .modal, [data-theme="dark"] .take-home-box, [data-theme="dark"] .data-source-note, [data-theme="dark"] .quick-hint, [data-theme="dark"] .empty { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }