/* ============================================================ UniCBT Theme System - Dark/Light Mode ============================================================ Semantic CSS variables that child templates redirect to. Dark theme is the default (:root). Light activates via [data-theme="light"] on . ============================================================ */ /* ----- Dark theme (default) ----- */ :root { --futuristic-bg-primary: #0a0f1a; --futuristic-bg-secondary: #0d1117; --futuristic-neon-green: #00ff88; --futuristic-text-primary: #f0f6fc; --futuristic-text-secondary: #8b949e; --futuristic-text-muted: #484f58; --futuristic-glass-bg: rgba(13, 17, 23, 0.6); --futuristic-glass-border: rgba(0, 255, 136, 0.08); } /* ----- Light theme overrides ----- */ [data-theme="light"] { --futuristic-bg-primary: #F8FAFC; --futuristic-bg-secondary: #F1F5F9; --futuristic-neon-green: #059669; --futuristic-text-primary: #1E293B; --futuristic-text-secondary: #64748B; --futuristic-text-muted: #94A3B8; --futuristic-glass-bg: rgba(255, 255, 255, 0.7); --futuristic-glass-border: rgba(6, 78, 59, 0.12); } /* ============================================================ Smooth Transition Class (applied temporarily during toggle) ============================================================ */ .theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease !important; } /* ============================================================ Toggle Button Styling ============================================================ */ .theme-toggle { position: relative; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.1); } .theme-toggle:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* Icon visibility */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: opacity 0.3s ease, transform 0.3s ease; font-size: 16px; } /* Dark mode: show sun icon (to switch to light) */ [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg); } /* Light mode: show moon icon (to switch to dark) */ [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); } /* Mobile theme toggle styling */ .theme-toggle-mobile { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; border-radius: 0.375rem; background: transparent; color: white; cursor: pointer; font-size: 1rem; font-weight: 500; transition: background 0.2s ease, color 0.2s ease; } .theme-toggle-mobile:hover { background: rgba(255, 255, 255, 0.1); } /* Mobile icon visibility */ [data-theme="dark"] .theme-toggle-mobile .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle-mobile .icon-moon { display: none; } [data-theme="dark"] .theme-toggle-mobile .theme-label-light { display: inline; } [data-theme="dark"] .theme-toggle-mobile .theme-label-dark { display: none; } [data-theme="light"] .theme-toggle-mobile .icon-sun { display: none; } [data-theme="light"] .theme-toggle-mobile .icon-moon { display: inline; } [data-theme="light"] .theme-toggle-mobile .theme-label-light { display: none; } [data-theme="light"] .theme-toggle-mobile .theme-label-dark { display: inline; } /* ============================================================ LIGHT MODE: Landing Page Overrides (index.html via base.html) ============================================================ */ /* Hero section: soften the gradient */ [data-theme="light"] .gradient-hero { background: linear-gradient(135deg, #064E3B 0%, #065F46 50%, #047857 100%); background-size: 100% 100%; animation: none; } /* Suppress floating particles in light mode */ [data-theme="light"] .particles { display: none; } /* Glass card on hero (dark glass -> light glass) */ [data-theme="light"] .gradient-hero .glass-card { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); } /* Wave SVG fills: dark (#0F172A) -> light gray */ [data-theme="light"] .wave-divider path[fill="#0F172A"] { fill: #F1F5F9; } /* Wave divider backgrounds that are inline dark */ [data-theme="light"] .wave-divider[style*="#0F172A"] { background: #F1F5F9 !important; } /* Exams section: dark bg -> light */ [data-theme="light"] .bg-dark, [data-theme="light"] section.bg-dark { background-color: #F1F5F9; } /* Dark section text colors */ [data-theme="light"] .bg-dark .text-white, [data-theme="light"] section.bg-dark .text-white { color: #1E293B; } [data-theme="light"] .bg-dark .text-gray-400, [data-theme="light"] section.bg-dark .text-gray-400 { color: #64748B; } /* Glass cards in dark sections */ [data-theme="light"] .bg-dark .glass-card, [data-theme="light"] section.bg-dark .glass-card { background: rgba(255, 255, 255, 0.7); border-color: rgba(6, 78, 59, 0.12); } [data-theme="light"] .bg-dark .glass-card .text-white { color: #1E293B; } [data-theme="light"] .bg-dark .glass-card .text-gray-400 { color: #64748B; } /* Footer in light mode */ [data-theme="light"] footer.bg-dark, [data-theme="light"] footer#contact.bg-dark { background-color: #1E293B; } /* Nav scrolled glassmorphism in light */ [data-theme="light"] .nav-scrolled { background: rgba(6, 78, 59, 0.95) !important; } /* Stat value glow reduction */ [data-theme="light"] .stat-value { text-shadow: none; } /* ============================================================ LIGHT MODE: Form Pages (login, signup, forgot_password, etc.) ============================================================ */ /* Green gradient backgrounds -> soft mint */ [data-theme="light"] .bg-gradient-to-br.from-forest-green { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important; } /* Keep form card white but adjust shadow */ [data-theme="light"] .bg-gradient-to-br.from-forest-green .bg-white { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } /* Form page heading text */ [data-theme="light"] .bg-gradient-to-br.from-forest-green .text-black { color: #064E3B; } /* ============================================================ LIGHT MODE: Glass Cards (global) ============================================================ */ [data-theme="light"] .glass-card-light { background: rgba(255, 255, 255, 0.85); border-color: rgba(6, 78, 59, 0.08); } /* ============================================================ LIGHT MODE: Futuristic Dashboard/Portal Page Overrides ============================================================ These apply globally to common patterns used by the dark futuristic child templates. ============================================================ */ /* Aurora/glow backgrounds */ [data-theme="light"] .aurora-bg, [data-theme="light"] [class*="aurora"] { display: none; } /* Glow effects */ [data-theme="light"] [class*="neon-glow"], [data-theme="light"] [class*="shadow-neon"] { text-shadow: none; box-shadow: none; } /* CTA buttons that use color: var(--*-bg-primary) (inverts badly in light) */ [data-theme="light"] .btn-primary-futuristic, [data-theme="light"] a[style*="color: var(--dash-bg-primary)"], [data-theme="light"] a[style*="color: var(--eo-bg-primary)"], [data-theme="light"] a[style*="color: var(--ep-bg-primary)"] { color: white !important; } /* ============================================================ LIGHT MODE: base_exams.html & base_guardian.html body/footer ============================================================ */ /* The body has bg-off-white which is fine for light mode. Footer uses bg-forest-green which stays dark in both modes. */ /* Breadcrumb area */ [data-theme="light"] .bg-white.border-b { background-color: #FFFFFF; border-color: #E2E8F0; } /* ============================================================ DARK MODE: base_exams.html & base_guardian.html body overrides ============================================================ The body uses utility classes like bg-off-white and text-gray-custom which are static and don't adapt to dark mode. Override them here. ============================================================ */ [data-theme="dark"] .bg-off-white { background-color: #0F172A; } [data-theme="dark"] .text-gray-custom { color: #E2E8F0; } [data-theme="dark"] .text-forest-green { color: #34D399; } [data-theme="dark"] .text-gray-500 { color: #94A3B8; } /* Breadcrumb bar dark mode */ [data-theme="dark"] .bg-white.border-b { background-color: #1E293B; border-color: #334155; }