/* ============================================================ BUniverse Unified Theme System — Phase 24H Loaded on every page (homepage + LMS). Sets canonical --bv-* variables and bridges old names. Theme applied via data-theme="light"|"dark" on . ============================================================ */ /* ── Light (default) ──────────────────────────────────────── */ :root, [data-theme="light"] { --bv-bg: #f9fafb; --bv-surface: #ffffff; --bv-surface-2: #f3f4f6; --bv-text: #111827; --bv-muted: #6b7280; --bv-border: #e5e7eb; --bv-primary: #2563eb; --bv-primary-2: #1d4ed8; --bv-accent: #d4af37; --bv-success: #10b981; --bv-warning: #f59e0b; --bv-danger: #ef4444; --bv-shadow: 0 2px 4px rgba(0,0,0,.08); /* Bridge → styles.css names */ --background: var(--bv-bg); --surface: var(--bv-surface); --surface-hover: var(--bv-surface-2); --border: var(--bv-border); --text: var(--bv-text); --text-secondary: var(--bv-muted); --text-muted: #9ca3af; /* Bridge → homepage-platform.css names */ --bg-primary: var(--bv-bg); --bg-secondary: var(--bv-surface-2); --bg-tertiary: #e9ecef; --text-primary: var(--bv-text); --primary: var(--bv-primary); --shadow-xl: 0 20px 40px rgba(0,0,0,.16); /* Student cosmic: daytime overrides */ --space-bg: #d6e8f5; --space-surface: #c5d9ea; --space-card: #ffffff; --space-card-hover: #eef5fb; --space-side: #0d2444; --space-border: rgba(42, 100, 150, 0.25); --space-border-glow: rgba(42, 100, 150, 0.45); --text-on-dark: #0d2137; --text-primary: #1a3a5c; --text-secondary: #4a6a82; --text-muted: #6b8ba4; --planet-cyan: #1e6fa8; --star-gold: #c8900f; } /* ── Dark ─────────────────────────────────────────────────── */ [data-theme="dark"] { --bv-bg: #0f1117; --bv-surface: #1a1f2e; --bv-surface-2: #232937; --bv-text: #e2e8f0; --bv-muted: #94a3b8; --bv-border: #2d3748; --bv-primary: #3b82f6; --bv-primary-2: #2563eb; --bv-accent: #f7d36a; --bv-success: #34d399; --bv-warning: #fbbf24; --bv-danger: #f87171; --bv-shadow: 0 2px 8px rgba(0,0,0,.4); /* Bridge → styles.css names */ --background: var(--bv-bg); --surface: var(--bv-surface); --surface-hover: var(--bv-surface-2); --border: var(--bv-border); --text: var(--bv-text); --text-secondary: var(--bv-muted); --text-muted: #64748b; /* Bridge → homepage-platform.css names */ --bg-primary: var(--bv-bg); --bg-secondary: var(--bv-surface-2); --bg-tertiary: #1e2433; --text-primary: var(--bv-text); --primary: var(--bv-primary); --shadow-xl: 0 20px 40px rgba(0,0,0,.5); /* Student cosmic: stays dark (native — just ensure variables consistent) */ --space-bg: #0b0f1e; --space-surface: #0d1525; --space-card: #243b55; --space-card-hover: #2c4968; --space-side: #080d1a; --space-border: rgba(0, 198, 255, 0.14); --space-border-glow: rgba(0, 198, 255, 0.38); --text-on-dark: #e6f7ff; --text-primary: #d1eaf8; --text-secondary: #8bafc8; --text-muted: #5a7a96; --planet-cyan: #00c6ff; --star-gold: #f7d36a; } /* ── Global body base ──────────────────────────────────────── Only activates when buniverse-theme.css is the primary reset. Layouts that define their own body style take precedence. ────────────────────────────────────────────────────────── */ body { background-color: var(--bv-bg); color: var(--bv-text); transition: background-color .2s ease, color .2s ease; } /* ── Admin layout dark overrides ─────────────────────────── */ [data-theme="dark"] .admin-shell { background: var(--bv-bg); } [data-theme="dark"] .admin-side { background: #141b2d !important; color: #e2e8f0 !important; } [data-theme="dark"] .admin-side a { color: #cbd5e1 !important; } [data-theme="dark"] .admin-side a:hover { background: #1e2840 !important; } [data-theme="dark"] .admin-side a.active { background: #2563eb !important; color: #fff !important; } [data-theme="dark"] .admin-main { background: var(--bv-bg) !important; color: var(--bv-text) !important; } [data-theme="dark"] .admin-topbar h1 { color: var(--bv-text) !important; } [data-theme="dark"] .admin-topbar .meta { color: var(--bv-muted) !important; } [data-theme="dark"] .admin-card { background: var(--bv-surface) !important; border-color: var(--bv-border) !important; color: var(--bv-text) !important; } [data-theme="dark"] .admin-card h2 { color: var(--bv-text) !important; } [data-theme="dark"] table.admin-table th { background: var(--bv-surface-2) !important; color: var(--bv-muted) !important; } [data-theme="dark"] table.admin-table td { border-color: var(--bv-border) !important; color: var(--bv-text) !important; } [data-theme="dark"] table.admin-table tr:hover td { background: var(--bv-surface) !important; } [data-theme="dark"] .admin-flash.ok { background: #064e3b !important; color: #a7f3d0 !important; border-color: #065f46 !important; } [data-theme="dark"] .admin-flash.err { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; } [data-theme="dark"] .btn-secondary { background: var(--bv-surface) !important; color: var(--bv-text) !important; border-color: var(--bv-border) !important; } [data-theme="dark"] .btn-secondary:hover { background: var(--bv-surface-2) !important; } [data-theme="dark"] .form-row label { color: var(--bv-muted) !important; } [data-theme="dark"] .form-row input, [data-theme="dark"] .form-row select, [data-theme="dark"] .form-row textarea { background: var(--bv-surface) !important; border-color: var(--bv-border) !important; color: var(--bv-text) !important; } [data-theme="dark"] .empty-hint { color: var(--bv-muted) !important; } /* ── Parent layout dark overrides ────────────────────────── */ [data-theme="dark"] body.par-body, [data-theme="dark"] .par-shell { background: var(--bv-bg) !important; color: var(--bv-text) !important; } [data-theme="dark"] .par-side { background: #1e1240 !important; color: #ede9fe !important; } [data-theme="dark"] .par-side a { color: #c4b5fd !important; } [data-theme="dark"] .par-side a:hover { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .par-side a.active { background: #6d28d9 !important; color: #fff !important; } [data-theme="dark"] .par-main { background: var(--bv-bg) !important; color: var(--bv-text) !important; } [data-theme="dark"] .par-topbar h1 { color: var(--bv-text) !important; } [data-theme="dark"] .par-topbar .meta { color: #a78bfa !important; } [data-theme="dark"] .par-card { background: var(--bv-surface) !important; border-color: #3b1f70 !important; color: var(--bv-text) !important; } [data-theme="dark"] .par-card h2 { color: var(--bv-text) !important; } [data-theme="dark"] table.par-table th { background: #1e1240 !important; color: #c4b5fd !important; } [data-theme="dark"] table.par-table td { border-color: var(--bv-border) !important; color: var(--bv-text) !important; } [data-theme="dark"] table.par-table tr:hover td { background: var(--bv-surface) !important; } [data-theme="dark"] .par-flash.ok { background: #064e3b !important; color: #a7f3d0 !important; border-color: #065f46 !important; } [data-theme="dark"] .par-flash.err { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; } [data-theme="dark"] .stat-pill { background: var(--bv-surface) !important; border-color: var(--bv-border) !important; color: var(--bv-text) !important; } [data-theme="dark"] .child-card { background: var(--bv-surface) !important; border-color: #3b1f70 !important; color: var(--bv-text) !important; } [data-theme="dark"] .child-card .child-name { color: #c4b5fd !important; } [data-theme="dark"] .child-card .child-meta { color: var(--bv-muted) !important; } /* ── Instructor layout dark overrides ────────────────────── */ [data-theme="dark"] .ins-shell { background: var(--bv-bg) !important; color: var(--bv-text) !important; } [data-theme="dark"] .ins-side { background: #062718 !important; color: #ecfdf5 !important; } [data-theme="dark"] .ins-side a { color: #a7f3d0 !important; } [data-theme="dark"] .ins-side a:hover { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .ins-side a.active { background: #059669 !important; color: #fff !important; } [data-theme="dark"] .ins-main { background: var(--bv-bg) !important; color: var(--bv-text) !important; } [data-theme="dark"] .ins-topbar h1 { color: var(--bv-text) !important; } [data-theme="dark"] .ins-topbar .meta { color: var(--bv-muted) !important; } [data-theme="dark"] .ins-flash.ok { background: #064e3b !important; color: #a7f3d0 !important; border-color: #065f46 !important; } [data-theme="dark"] .ins-flash.err { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; } /* ── Theme toggle button ─────────────────────────────────── */ .bv-theme-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--bv-border, #e5e7eb); background: var(--bv-surface, #fff); color: var(--bv-text, #111827); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; line-height: 1; white-space: nowrap; } .bv-theme-toggle:hover { background: var(--bv-surface-2, #f3f4f6); border-color: var(--bv-primary, #2563eb); } .bv-theme-toggle:focus-visible { outline: 2px solid var(--bv-primary, #2563eb); outline-offset: 2px; }