/* ──────────────────────────────────────────────────────────────── Dark Mode — AIEcon Paper Activated by class="dark" on element. Notion-inspired dark palette. ──────────────────────────────────────────────────────────────── */ html.dark body { background: #191919; color: #E5E5E5; } html.dark ::selection { background-color: #3F3F4F; color: #FFEB99; } /* ─── Sidebar ──────────────────────────────────────────────────── */ html.dark aside { background: #202020 !important; border-color: #2F2F2F !important; } /* Sidebar hover state */ html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-200:hover { background-color: #2A2A2A !important; } html.dark .nav-active { background-color: #2A2A2A !important; color: #FFFFFF !important; } /* ─── Tailwind utility overrides ───────────────────────────────── */ /* Backgrounds */ html.dark .bg-white { background-color: #232323 !important; } html.dark .bg-gray-50 { background-color: #1F1F1F !important; } html.dark .bg-gray-50\/50 { background-color: rgba(31, 31, 31, 0.5) !important; } html.dark .bg-gray-50\/60 { background-color: rgba(31, 31, 31, 0.6) !important; } html.dark .bg-gray-100 { background-color: #2A2A2A !important; } html.dark .bg-\[\#FAFAF9\] { background-color: #202020 !important; } html.dark .bg-\[\#FAFAFA\] { background-color: #191919 !important; } html.dark .bg-gradient-to-br.from-gray-50 { background: linear-gradient(135deg, #1F1F1F 0%, #191919 100%) !important; } /* Borders */ html.dark .border-gray-100 { border-color: #2A2A2A !important; } html.dark .border-gray-200 { border-color: #2F2F2F !important; } html.dark .border-gray-300 { border-color: #404040 !important; } html.dark .border-yellow-200\/60 { border-color: rgba(150, 110, 0, 0.4) !important; } /* Text colors */ html.dark .text-gray-900 { color: #F0F0F0 !important; } html.dark .text-gray-800 { color: #DCDCDC !important; } html.dark .text-gray-700 { color: #C8C8C8 !important; } html.dark .text-gray-600 { color: #A8A8A8 !important; } html.dark .text-gray-500 { color: #888888 !important; } html.dark .text-gray-400 { color: #6B6B6B !important; } html.dark .text-gray-300 { color: #404040 !important; } /* Accent links (blue, etc.) */ html.dark .text-blue-700 { color: #60A5FA !important; } html.dark .text-purple-700 { color: #C4B5FD !important; } html.dark .text-emerald-700 { color: #6EE7B7 !important; } html.dark .text-amber-700 { color: #FCD34D !important; } html.dark .text-rose-700 { color: #FCA5A5 !important; } html.dark .text-indigo-700 { color: #A5B4FC !important; } html.dark .text-red-600 { color: #FCA5A5 !important; } html.dark .text-yellow-800 { color: #FCD34D !important; } /* Semantic background tints */ html.dark .bg-blue-50 { background-color: #1E3A5F !important; } html.dark .bg-purple-50 { background-color: #3B0764 !important; } html.dark .bg-emerald-50 { background-color: #14532D !important; } html.dark .bg-amber-50 { background-color: #4F3304 !important; } html.dark .bg-rose-50 { background-color: #4C0519 !important; } html.dark .bg-indigo-50 { background-color: #1E1B4B !important; } html.dark .bg-yellow-50 { background-color: #3E2C00 !important; } html.dark .bg-yellow-50\/40 { background-color: rgba(62, 44, 0, 0.4) !important; } html.dark .bg-red-50 { background-color: #3A0509 !important; } html.dark .text-yellow-700 { color: #FCD34D !important; } html.dark .text-yellow-800 { color: #FCD34D !important; } html.dark .text-red-700 { color: #FCA5A5 !important; } html.dark .text-red-900 { color: #FECACA !important; } /* Slate/rose for Part badges */ html.dark .bg-slate-100 { background-color: #1E293B !important; } html.dark .bg-slate-200 { background-color: #334155 !important; } html.dark .bg-rose-100 { background-color: #4C0519 !important; } html.dark .bg-rose-200 { background-color: #881337 !important; } html.dark .bg-emerald-100 { background-color: #14532D !important; } html.dark .bg-emerald-200 { background-color: #166534 !important; } html.dark .bg-amber-100 { background-color: #4F3304 !important; } html.dark .bg-amber-200 { background-color: #92400E !important; } html.dark .bg-indigo-100 { background-color: #1E1B4B !important; } html.dark .bg-indigo-200 { background-color: #3730A3 !important; } html.dark .text-slate-700, html.dark .text-slate-800 { color: #CBD5E1 !important; } html.dark .text-rose-700, html.dark .text-rose-800 { color: #FCA5A5 !important; } html.dark .text-emerald-800 { color: #6EE7B7 !important; } html.dark .text-amber-800 { color: #FCD34D !important; } html.dark .text-indigo-800 { color: #A5B4FC !important; } /* Tier badge backgrounds */ html.dark .bg-gray-900 { background-color: #FFFFFF !important; color: #191919 !important; } html.dark .bg-gray-900:hover, html.dark .hover\:bg-gray-700:hover, html.dark .hover\:bg-gray-800:hover { background-color: #E5E5E5 !important; } /* ─── Input fields ─────────────────────────────────────────────── */ html.dark input[type="text"], html.dark input[type="password"], html.dark input[type="search"] { background-color: #1F1F1F !important; color: #E5E5E5 !important; border-color: #404040 !important; } html.dark input::placeholder { color: #6B6B6B !important; } html.dark input:focus { border-color: #60A5FA !important; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important; } /* ─── Filter chips ─────────────────────────────────────────────── */ html.dark .filter-chip { background-color: #232323 !important; color: #C8C8C8 !important; border-color: #404040 !important; } html.dark .filter-chip:hover { border-color: #888888 !important; } html.dark .filter-chip.active { background-color: #FFFFFF !important; color: #191919 !important; border-color: #FFFFFF !important; } /* ─── Custom site components ───────────────────────────────────── */ /* Frontmatter card */ html.dark .frontmatter-card { background: linear-gradient(135deg, #262626 0%, #1F1F1F 100%) !important; border-color: #2F2F2F !important; } /* Cluster cards */ html.dark .cluster-A { background: linear-gradient(135deg, #1E3A5F 0%, #1E3A8A 100%) !important; border-color: #3B82F6 !important; } html.dark .cluster-B { background: linear-gradient(135deg, #14532D 0%, #166534 100%) !important; border-color: #10B981 !important; } html.dark .cluster-C { background: linear-gradient(135deg, #4F3304 0%, #78350F 100%) !important; border-color: #F59E0B !important; } html.dark .cluster-D { background: linear-gradient(135deg, #3B0764 0%, #4C1D95 100%) !important; border-color: #8B5CF6 !important; } html.dark .cluster-E { background: linear-gradient(135deg, #4C0519 0%, #881337 100%) !important; border-color: #F43F5E !important; } html.dark .cluster-A, html.dark .cluster-B, html.dark .cluster-C, html.dark .cluster-D, html.dark .cluster-E { color: #F0F0F0; } html.dark .cluster-A *, html.dark .cluster-B *, html.dark .cluster-C *, html.dark .cluster-D *, html.dark .cluster-E * { color: inherit; } html.dark .cluster-A h3, html.dark .cluster-B h3, html.dark .cluster-C h3, html.dark .cluster-D h3, html.dark .cluster-E h3, html.dark .cluster-A h1, html.dark .cluster-B h1, html.dark .cluster-C h1, html.dark .cluster-D h1, html.dark .cluster-E h1 { color: #FFFFFF !important; } /* CIS gradient colors (rankings.html) — already work in dark; just ensure text contrast */ html.dark .cis-5, html.dark .cis-6, html.dark .cis-7, html.dark .cis-8, html.dark .cis-9 { color: #FFFFFF !important; } /* Hover states for cards/rows */ html.dark .paper-row:hover, html.dark .rank-row:hover { background-color: #2A2A2A !important; } /* Tab bar */ html.dark .tab-bar { border-color: #2F2F2F !important; } html.dark .tab-btn { color: #A0A0A0 !important; } html.dark .tab-btn:hover { color: #F0F0F0 !important; } html.dark .tab-btn.tab-active { color: #F0F0F0 !important; border-bottom-color: #F0F0F0 !important; } /* PDF frame */ html.dark .pdf-frame { background-color: #1F1F1F !important; border-color: #2F2F2F !important; } /* Mark / highlights */ html.dark mark { background-color: #5C4400 !important; color: #FFEB99 !important; } /* ─── Prose styles (paper detail) ──────────────────────────────── */ html.dark .prose-paper { color: #C8C8C8 !important; } html.dark .prose-paper h1, html.dark .prose-paper h2, html.dark .prose-paper h3 { color: #F0F0F0 !important; } html.dark .prose-paper h2 { border-color: #2F2F2F !important; } html.dark .prose-paper p, html.dark .prose-paper li { color: #B8B8B8 !important; } html.dark .prose-paper strong { color: #F0F0F0 !important; } html.dark .prose-paper em { color: #888888 !important; } html.dark .prose-paper code { background-color: #2A2A2A !important; color: #F472B6 !important; } html.dark .prose-paper pre { background-color: #1A1A1A !important; border-color: #2F2F2F !important; } html.dark .prose-paper blockquote { border-color: #404040 !important; color: #888888 !important; } html.dark .prose-paper a { color: #60A5FA !important; } html.dark .prose-paper hr { border-color: #2F2F2F !important; } html.dark .prose-paper table th { border-color: #2F2F2F !important; } html.dark .prose-paper table td { border-color: #2A2A2A !important; } html.dark .prose-paper li > strong:first-child { color: #F0F0F0 !important; } html.dark .prose-notion h1, html.dark .prose-notion h2, html.dark .prose-notion h3 { color: #F0F0F0 !important; } html.dark .prose-notion p, html.dark .prose-notion li { color: #C8C8C8 !important; } html.dark .prose-notion strong { color: #F0F0F0 !important; } html.dark .prose-notion a { color: #60A5FA !important; } html.dark .prose-notion em { color: #888888 !important; } /* Loading spinner */ html.dark .border-gray-300 { border-color: #404040 !important; } html.dark .border-t-gray-900 { border-top-color: #FFFFFF !important; } /* ─── Ring / focus utilities ───────────────────────────────────── */ html.dark .focus\:ring-gray-100:focus { box-shadow: 0 0 0 2px rgba(64, 64, 64, 0.4) !important; } html.dark .focus\:ring-blue-100:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important; } html.dark .focus\:border-gray-900:focus { border-color: #FFFFFF !important; } html.dark .focus\:border-blue-500:focus { border-color: #60A5FA !important; } /* Sort active icon visibility */ html.dark .sort-icon { color: #A0A0A0; } /* ─── Decorations / dividers ───────────────────────────────────── */ html.dark .underline.decoration-dotted { text-decoration-color: #6B6B6B; } html.dark .border-l-2.border-gray-300 { border-left-color: #404040 !important; } /* Smooth color transition when toggling */ body, aside, .frontmatter-card, .cluster-A, .cluster-B, .cluster-C, .cluster-D, .cluster-E, .paper-row, .rank-row, .filter-chip, input, .bg-white, .bg-gray-50, .bg-gray-100, .tab-bar, .tab-btn, .pdf-frame, .prose-paper, .prose-notion { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* ─── Theme toggle button ──────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; color: #6B7280; background: transparent; border: 0; cursor: pointer; transition: background-color 0.15s, color 0.15s; } .theme-toggle:hover { color: #1F2937; background-color: #F3F4F6; } html.dark .theme-toggle { color: #888888; } html.dark .theme-toggle:hover { color: #F0F0F0; background-color: #2A2A2A; } .theme-toggle .sun-icon { display: none; } .theme-toggle .moon-icon { display: inline-block; } html.dark .theme-toggle .sun-icon { display: inline-block; } html.dark .theme-toggle .moon-icon { display: none; }