/* ============================================================ BrightPath Dark Mode Applied when is set. All selectors use html.dark prefix for specificity over Tailwind. ============================================================ */ /* ── Base ─────────────────────────────────────────────────── */ html.dark body { background-color: #0f172a; color: #e2e8f0; } /* ── Backgrounds ──────────────────────────────────────────── */ html.dark .bg-white { background-color: #1e293b; } html.dark .bg-slate-50 { background-color: #0f172a; } html.dark .bg-slate-100 { background-color: #1e293b; } html.dark .bg-slate-200 { background-color: #334155; } /* Coloured light tints → dark equivalents */ html.dark .bg-emerald-50 { background-color: rgba(6,78,59,0.4); } html.dark .bg-emerald-100 { background-color: rgba(6,78,59,0.6); } html.dark .bg-blue-50 { background-color: rgba(30,58,138,0.3); } html.dark .bg-blue-100 { background-color: rgba(30,58,138,0.5); } html.dark .bg-blue-200 { background-color: rgba(30,64,175,0.45); color: #93c5fd; } html.dark .bg-amber-50 { background-color: rgba(120,53,15,0.3); } html.dark .bg-amber-100 { background-color: rgba(120,53,15,0.5); } html.dark .bg-orange-50 { background-color: rgba(124,45,18,0.3); } html.dark .bg-purple-50 { background-color: rgba(88,28,135,0.3); } html.dark .bg-red-50 { background-color: rgba(127,29,29,0.3); } html.dark .bg-pink-50 { background-color: rgba(131,24,67,0.3); } html.dark .bg-pink-200 { background-color: rgba(157,23,77,0.4); color: #f9a8d4; } html.dark .bg-green-50 { background-color: rgba(20,83,45,0.3); } html.dark .bg-yellow-50 { background-color: rgba(113,63,18,0.3); } html.dark .bg-indigo-50 { background-color: rgba(49,46,129,0.3); } html.dark .bg-teal-50 { background-color: rgba(19,78,74,0.3); } /* Already-dark sections — keep or deepen slightly */ html.dark .bg-slate-800 { background-color: #0f172a; } html.dark .bg-slate-900 { background-color: #020617; } /* ── Text ─────────────────────────────────────────────────── */ html.dark .text-slate-900 { color: #f1f5f9; } html.dark .text-slate-800 { color: #e2e8f0; } html.dark .text-slate-700 { color: #cbd5e1; } html.dark .text-slate-600 { color: #94a3b8; } html.dark .text-slate-500 { color: #64748b; } /* Coloured text — stays, but lighten if on dark bg */ html.dark .text-emerald-700 { color: #34d399; } html.dark .text-emerald-800 { color: #6ee7b7; } html.dark .text-blue-700 { color: #60a5fa; } html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-amber-700 { color: #fbbf24; } html.dark .text-amber-800 { color: #fcd34d; } html.dark .text-purple-600 { color: #c084fc; } html.dark .text-purple-700 { color: #d8b4fe; } html.dark .text-red-600 { color: #f87171; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-pink-600 { color: #f472b6; } /* ── Borders ──────────────────────────────────────────────── */ html.dark .border-slate-100 { border-color: #1e293b; } html.dark .border-slate-200 { border-color: #334155; } html.dark .border-slate-300 { border-color: #475569; } html.dark .border-emerald-200 { border-color: #065f46; } html.dark .border-blue-200 { border-color: #1e40af; } html.dark .border-amber-200 { border-color: #92400e; } html.dark .border-purple-200 { border-color: #6b21a8; } html.dark .border-red-200 { border-color: #991b1b; } html.dark .border-green-200 { border-color: #166534; } /* ── Nav ──────────────────────────────────────────────────── */ html.dark nav, html.dark header { background-color: rgba(15, 23, 42, 0.97) !important; border-color: #334155; } html.dark #mobile-menu { background-color: #1e293b; border-color: #334155; } /* ── Cards / Shadows ──────────────────────────────────────── */ html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4); } html.dark .shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.5); } html.dark .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.6); } html.dark .shadow-xl { box-shadow: 0 12px 32px rgba(0,0,0,0.7); } /* ── Inputs & Forms ───────────────────────────────────────── */ html.dark input, html.dark textarea, html.dark select { background-color: #1e293b; border-color: #475569; color: #e2e8f0; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } html.dark input:focus, html.dark textarea:focus { border-color: #059669; } /* ── Tables ───────────────────────────────────────────────── */ html.dark table { color: #e2e8f0; } html.dark thead tr { border-color: #334155; } html.dark tbody tr { border-color: #1e293b; } html.dark tr.bg-emerald-50 { background-color: rgba(6,78,59,0.3); } /* ── FAQ accordion ────────────────────────────────────────── */ html.dark .faq-item { border-color: #334155; } html.dark .faq-toggle:hover { background-color: #1e293b; } /* ── Dividers ─────────────────────────────────────────────── */ html.dark hr { border-color: #334155; } /* ── Specific bg-white patterns inside already-dark sections ─ */ html.dark .bg-slate-800 .bg-white, html.dark .bg-slate-900 .bg-white { background-color: #1e293b; } /* ── Lesson-specific feedback panels ─────────────────────── */ html.dark .bg-emerald-50.border-emerald-200 { background-color: rgba(6,78,59,0.35); border-color: #065f46; } html.dark .bg-red-50.border-red-200 { background-color: rgba(127,29,29,0.35); border-color: #991b1b; } html.dark .bg-amber-50.border-amber-200 { background-color: rgba(120,53,15,0.35); border-color: #92400e; } html.dark .bg-blue-50.border-blue-200 { background-color: rgba(30,58,138,0.35); border-color: #1e40af; } /* ── Dark Mode Toggle Button ──────────────────────────────── */ #bp-dark-toggle { position: fixed; bottom: 1.5rem; right: 6.5rem; z-index: 9000; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; background-color: #ffffff; color: #475569; } html.dark #bp-dark-toggle { background-color: #1e293b; color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,0.5); border: 1px solid #334155; } #bp-dark-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.2); color: #059669; } html.dark #bp-dark-toggle:hover { color: #34d399; box-shadow: 0 4px 12px rgba(0,0,0,0.6); } #bp-dark-toggle svg { width: 1.1rem; height: 1.1rem; }