/* Dark Mode Overrides — Session 70 Comprehensive color adjustments for readability on dark backgrounds Applied when is set */ /* ========== BASE COLORS & TEXT ========== */ .dark { --dark-bg: #1a1a1a; --dark-surface: #2a2a2a; --dark-text: #e8e8e8; --dark-text-secondary: #a8a8a8; --dark-text-muted: #707070; --dark-border: #404040; color-scheme: dark; } /* Override inline styles with hardcoded light colors */ .dark [style*="color:#0B0B0B"] { color: #e8e8e8 !important; } .dark [style*="color:#575757"] { color: #b8b8b8 !important; } .dark [style*="color:#8e7164"] { color: #a0a0a0 !important; } .dark [style*="background:#fcf9f3"], .dark [style*="background:#fff"] { background-color: #242424 !important; } .dark [style*="border-color:#c4c7c7"], .dark [style*="border:#c4c7c7"] { border-color: #404040 !important; } .dark { background-color: #1a1a1a; color: #e8e8e8; } /* Text color overrides */ .dark body, .dark body * { color: inherit; } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #f0f0f0 !important; } /* Start Here page main heading */ .dark h1[style*="Playfair"] { color: #f5f5f5 !important; } /* Subtitle and emphasis text */ .dark p[style*="italic"], .dark p[style*="color:#575757"], .dark em, .dark i { color: #d0d0d0 !important; } .dark p, .dark li, .dark td, .dark th { color: #e8e8e8; } /* Archive gray text → lighter in dark mode */ .dark .text-archive-gray, .dark .archive-gray, .dark [class*="archive-gray"], .dark .text-secondary, .dark .secondary { color: #b8b8b8 !important; } /* Deep ink text → light in dark mode */ .dark .text-deep-ink, .dark .deep-ink { color: #e8e8e8 !important; } /* ========== NAV & HEADER ========== */ .dark header { background-color: rgba(26, 26, 26, 0.92) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dark header::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 100%); } .dark nav a, .dark header a { color: #e8e8e8 !important; } .dark nav a:hover, .dark header a:hover { color: #FF6600 !important; } /* Mobile menu drawer */ .dark #mobile-menu-drawer { background: #1a1a1a !important; border-left-color: #404040 !important; } .dark #mobile-menu-drawer a { color: #e8e8e8 !important; border-bottom-color: #404040 !important; } .dark #mobile-menu-drawer a:hover { color: #FF6600 !important; } .dark #mobile-menu-drawer span { color: #e8e8e8 !important; } .dark #mobile-menu-drawer button { color: #e8e8e8 !important; border-color: #404040 !important; } .dark #mobile-menu-drawer button:hover { color: #FF6600 !important; } /* JFSN wordmark tooltip */ .dark .jfsn-wordmark::before { background: #2a2a2a !important; border-color: #404040 !important; color: #b8b8b8 !important; } /* ========== BUTTONS & INTERACTIVE ========== */ .dark button { color: #e8e8e8; } .dark button:hover { color: #FF6600; } .dark [aria-label*="Toggle dark"], .dark [aria-label*="Search"], .dark [aria-label*="menu"] { color: #b8b8b8; } /* ========== FORMS & INPUTS ========== */ .dark input, .dark textarea, .dark select { background-color: #2a2a2a !important; border-color: #404040 !important; color: #e8e8e8 !important; } .dark input::placeholder { color: #808080 !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { border-color: #FF6600 !important; outline: none; } /* ========== CARDS & CONTAINERS ========== */ .dark .card, .dark [class*="card"], .dark .container { background-color: #2a2a2a; border-color: #404040; } .dark .card p, .dark [class*="card"] p { color: #d0d0d0; } /* ========== LINKS & NAVIGATION ========== */ .dark a { color: #b8d4ff; } .dark a:hover { color: #FF6600; } .dark .bracket-link { color: #FF6600 !important; } .dark .bracket-link:hover { color: #ffaa00 !important; } /* ========== LABELS & SMALL TEXT ========== */ .dark label, .dark .label, .dark .label-caps, .dark .label-md { color: #a8a8a8; } .dark .label-caps, .dark .text-label-caps { color: #a0a0a0 !important; } .dark small, .dark .text-sm, .dark .text-xs { color: #949494; } /* ========== SECTION LABELS ========== */ .dark .section-label { color: #a8a8a8; } .dark .section-title { color: #e8e8e8; } /* ========== BACKGROUNDS ========== */ .dark .bg-background { background-color: #1a1a1a !important; } .dark .bg-bone-white { background-color: #242424 !important; } .dark .bg-surface-container-high { background-color: #2a2a2a !important; } .dark [class*="bg-surface"] { background-color: #2a2a2a !important; } /* ========== BORDERS & DIVIDERS ========== */ .dark .border, .dark [class*="border"] { border-color: #404040 !important; } .dark hr { border-color: #404040 !important; } .dark .outline-variant { border-color: #404040 !important; } /* ========== CODE & PRE ========== */ .dark code, .dark pre { background-color: #242424 !important; border-color: #404040 !important; color: #e0e0e0 !important; } .dark pre { border: 1px solid #404040 !important; } /* ========== TABLES ========== */ .dark table { background-color: #2a2a2a; border-color: #404040; } .dark th, .dark td { border-color: #404040; color: #e8e8e8; } .dark th { background-color: #242424; color: #f0f0f0; } .dark tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); } /* ========== SIDEBAR & NAVIGATION ========== */ .dark .sidebar, .dark nav { background-color: #242424; border-color: #404040; } .dark .nav-link, .dark .nav-item { color: #b8b8b8; } .dark .nav-link:hover, .dark .nav-item:hover, .dark .nav-link.active, .dark .nav-item.active { color: #FF6600; } /* ========== SEARCH & FILTER ========== */ .dark .search-input, .dark .filter-input { background-color: #2a2a2a !important; border-color: #404040 !important; color: #e8e8e8 !important; } .dark .filter-chip { background-color: #242424 !important; border-color: #404040 !important; color: #b8b8b8 !important; } /* ========== MODALS & OVERLAYS ========== */ .dark .modal, .dark [class*="modal"] { background-color: #1a1a1a; border-color: #404040; } .dark .modal-header { background-color: #242424; border-color: #404040; } .dark .overlay, .dark [class*="overlay"] { background-color: rgba(0, 0, 0, 0.8); } /* ========== FOOTER ========== */ .dark footer { background-color: #242424; border-top: 1px solid #404040; color: #b8b8b8; } .dark footer a { color: #b8d4ff; } .dark footer a:hover { color: #FF6600; } /* ========== DESIGN SYSTEM MODAL ========== */ .dark #design-system-modal { background-color: #1a1a1a; } .dark .ds-nav { background-color: #242424; border-color: #404040; } .dark .ds-nav-link { color: #b8b8b8; } .dark .ds-nav-link:hover, .dark .ds-nav-link.active { color: #FF6600; } .dark .ds-section { color: #d0d0d0; } .dark .ds-section h3 { color: #e8e8e8; } .dark .ds-color-chip { border-color: #404040; } /* ========== START-HERE PAGE SPECIFIC ========== */ .dark .prose p { color: #d0d0d0 !important; } .dark .section-label { color: #a8a8a8 !important; } /* Character illustration — invert for dark mode */ .dark .sidebar-portrait img, .dark img[src*="portrait"], .dark img[src*="character"], .dark img[src*="figure"], .dark img[src*="me black"], .dark img[alt*="Jeffrey F. S. Neumann"] { filter: invert(1) hue-rotate(180deg) brightness(0.9) !important; } /* Quote cards in dark mode */ .dark .quote-card { background-color: #242424 !important; border-color: #505050 !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } .dark .quote-card:hover { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6); } /* ========== MISC ELEMENTS ========== */ .dark .breadcrumb { color: #b8b8b8; } .dark .breadcrumb a { color: #b8d4ff; } .dark .breadcrumb a:hover { color: #FF6600; } .dark [class*="meta"], .dark .metadata { color: #949494; } .dark .stats, .dark .stat-label { color: #b8b8b8; } .dark .stats strong, .dark .stat-value { color: #e8e8e8; } /* ========== ORANGE TEXT (on dark backgrounds) ========== */ .dark .text-orange-ink { color: #FF6600 !important; } .dark .text-international-orange { color: #FF6600 !important; } /* ========== SCROLLBAR ========== */ .dark ::-webkit-scrollbar { width: 10px; height: 10px; } .dark ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-thumb { background: #404040; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: #505050; }