/* ========================================================================== NewsNow Vegas — Theme Controls Dark / Light mode + Accessible Font Size scaling (A- / A++) ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT SIZE CONTROLS - Body/paragraph text is user-adjustable between 14px (min) and 20px (max). - Headings (h2–h6 only, never h1) are user-adjustable between 16px (min) and 26px (max). - Values are set on as CSS custom properties by theme-controls.js and clamped there before being written, so these are safe fallbacks. -------------------------------------------------------------------------- */ /* Body copy, paragraphs, and generic inline/body-level text. Deliberately excludes h1 (and its children) per spec. */ /* -------------------------------------------------------------------------- 2. DARK MODE OVERRIDES - Applied when the element has the `.dark` class (see the `@custom-variant dark` registration in header.php and assets/js/theme-controls.js which toggles the class + persists choice). - These rules target the theme's actual Tailwind utility classes directly so every template (front page, single, archive, search, 404, footer, widgets) gets dark styling without needing per-template edits. -------------------------------------------------------------------------- */ .dark { color-scheme: dark; } /* Page background / base text */ .dark body, .dark .bg-slate-50 { background-color: #0b1220 !important; } .dark body { color: #cbd5e1 !important; } /* Surfaces (cards, header, toolbar, article panels) */ .dark .bg-white, .dark .bg-amber-50 { background-color: #111a2e !important; } .dark .bg-slate-100 { background-color: #1a2540 !important; } /* Borders */ .dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-250, .dark .border-slate-350, .dark .border-amber-200 { border-color: #26324a !important; } /* Headings and dark-emphasis text */ .dark .text-slate-950, .dark .text-slate-900, .dark .text-slate-850, .dark .text-slate-800 { color: #e2e8f0 !important; } .dark .text-slate-700, .dark .text-slate-600 { color: #94a3b8 !important; } .dark .text-slate-500, .dark .text-slate-400, .dark .text-slate-300 { color: #64748b !important; } /* Inverted elements (bg-slate-900 / bg-slate-950 chips, footer, buttons) already read fine on dark backgrounds — left as-is intentionally, since they're already dark surfaces with white text. */ /* Amber accent stays consistent for brand recognition across themes */ .dark .text-amber-500, .dark .text-amber-600 { color: #fbbf24 !important; } /* Inputs / search bar */ .dark input, .dark select, .dark textarea { background-color: #111a2e !important; color: #e2e8f0 !important; border-color: #26324a !important; } .dark input::placeholder { color: #64748b !important; } /* Hover surfaces used for buttons like bookmark/speech toggles */ .dark .hover\:bg-slate-200:hover { background-color: #1a2540 !important; } /* Prose (article body) */ .dark .prose { color: #cbd5e1 !important; } /* -------------------------------------------------------------------------- 3. HEADER CONTROLS UI (dark/light + font size buttons) -------------------------------------------------------------------------- */ .nv-controls { display: flex; align-items: center; gap: 0.375rem; } .nv-controls button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; } .nv-font-controls { border: 1px solid #e2e8f0; } .dark .nv-font-controls { border-color: #26324a; } .nv-font-controls button { padding: 0.5rem 0.65rem !important; font-size: 12px !important; font-weight: 700; color: #475569; background: transparent; transition: background-color 0.15s ease; } .dark .nv-font-controls button { color: #94a3b8; } .nv-font-controls button:hover { background-color: #f1f5f9; } .dark .nv-font-controls button:hover { background-color: #1a2540; } .nv-font-controls button:disabled { opacity: 0.4; cursor: not-allowed; } .nv-font-controls button + button { border-left: 1px solid #e2e8f0; } .dark .nv-font-controls button + button { border-left-color: #26324a; } .nv-theme-toggle { padding: 0.5rem !important; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: transparent; color: #475569; transition: background-color 0.15s ease; } .dark .nv-theme-toggle { border-color: #26324a; color: #94a3b8; } .nv-theme-toggle:hover { background-color: #f1f5f9; } .dark .nv-theme-toggle:hover { background-color: #1a2540; } .nv-theme-toggle svg, .nv-theme-toggle [data-lucide] { width: 16px; height: 16px; }