/* ═══════════════════════════════════════════════════════════════════════════ StudyBuddy — Age-Based Theme Overrides ═══════════════════════════════════════════════════════════════════════════ Each theme class is applied to by theme-manager.js and toggled via the theme picker in MainLayout.razor. Themes: • theme-early-learner (5–8) — Bright, playful, large & colourful • theme-middle-learner (9–13) — Balanced, modern, friendly (default) • theme-older-student (14–18) — Minimal, academic, professional ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 🎨 EARLY LEARNER (ages 5–8) Colorful palette with purple primary, rounded shapes, playful feel. ───────────────────────────────────────────────────────────────────────── */ /* * Dual selectors: `html.theme-X` covers the JS path (theme-manager.js adds * the class to ); `.page.theme-X` covers the Blazor C# path (the .page * div always carries @ThemeService.CurrentTheme). Either one is enough for * CSS custom properties to cascade down to all child components. */ html.theme-early-learner, .page.theme-early-learner { /* Primary */ --primary-color: #8b5cf6; --primary-color-rgb: 139, 92, 246; --primary-gradient: linear-gradient(135deg, #a78bfa, #7c3aed); /* Text */ --text-primary: #1e1b4b; --text-secondary: #4c1d95; --text-muted: #7c6fae; --text-muted-rgb: 124, 111, 174; /* Backgrounds */ --card-bg: #ffffff; --bg-secondary: #f5f3ff; --bg-secondary-rgb: 245, 243, 255; --input-bg: #faf8ff; /* Borders */ --border-color: #ddd6fe; --border-radius: 1rem; --border-radius-sm: 0.5rem; --border-radius-lg: 1.25rem; --border-radius-pill: 50rem; /* Shadows */ --card-shadow: 0 2px 8px rgba(139, 92, 246, 0.12), 0 1px 3px rgba(139, 92, 246, 0.08); --card-shadow-hover: 0 8px 24px rgba(139, 92, 246, 0.18); /* Semantic */ --success-color: #22c55e; --success-color-rgb: 34, 197, 94; --warning-color: #f59e0b; --warning-color-rgb: 245, 158, 11; --danger-color: #f43f5e; --danger-color-rgb: 244, 63, 94; /* Layout */ --sidebar-gradient: linear-gradient(180deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); --top-row-bg: #f5f3ff; --top-row-border: #ddd6fe; } /* Early Learner — global overrides */ html.theme-early-learner body { background-color: #f5f3ff; font-family: "Nunito", "Comic Neue", system-ui, -apple-system, sans-serif; font-size: 1.05rem; line-height: 1.7; } html.theme-early-learner .btn-primary, html.theme-early-learner .btn-outline-primary { border-radius: 1rem; } html.theme-early-learner .card, html.theme-early-learner [class*="card"] { border-radius: 1rem; } /* ───────────────────────────────────────────────────────────────────────── 🚀 MIDDLE LEARNER (ages 9–13) — DEFAULT Modern blue palette, balanced spacing, clean and inviting. ───────────────────────────────────────────────────────────────────────── */ html.theme-middle-learner, .page.theme-middle-learner { /* Primary */ --primary-color: #3b82f6; --primary-color-rgb: 59, 130, 246; --primary-gradient: linear-gradient(135deg, #3b82f6, #2563eb); /* Text */ --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #6b7280; --text-muted-rgb: 107, 114, 128; /* Backgrounds */ --card-bg: #ffffff; --bg-secondary: #f3f4f6; --bg-secondary-rgb: 243, 244, 246; --input-bg: #ffffff; /* Borders */ --border-color: #e5e7eb; --border-radius: 0.5rem; --border-radius-sm: 0.25rem; --border-radius-lg: 0.75rem; --border-radius-pill: 50rem; /* Shadows */ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); /* Semantic */ --success-color: #10b981; --success-color-rgb: 16, 185, 129; --warning-color: #f59e0b; --warning-color-rgb: 245, 158, 11; --danger-color: #ef4444; --danger-color-rgb: 239, 68, 68; /* Layout */ --sidebar-gradient: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); --top-row-bg: #f7f7f7; --top-row-border: #d6d5d5; } html.theme-middle-learner body { background-color: #f3f4f6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } html.theme-middle-learner .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } html.theme-middle-learner .top-row { background-color: #f7f7f7; border-bottom-color: #d6d5d5; } /* ───────────────────────────────────────────────────────────────────────── 💼 OLDER STUDENT (ages 14–18) Minimal, professional slate palette with tight spacing. ───────────────────────────────────────────────────────────────────────── */ html.theme-older-student, .page.theme-older-student { /* Primary */ --primary-color: #0f766e; --primary-color-rgb: 15, 118, 110; --primary-gradient: linear-gradient(135deg, #0f766e, #115e59); /* Text */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-muted-rgb: 100, 116, 139; /* Backgrounds */ --card-bg: #ffffff; --bg-secondary: #f8fafc; --bg-secondary-rgb: 248, 250, 252; --input-bg: #ffffff; /* Borders */ --border-color: #cbd5e1; --border-radius: 0.375rem; --border-radius-sm: 0.25rem; --border-radius-lg: 0.5rem; --border-radius-pill: 50rem; /* Shadows */ --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.1); /* Semantic */ --success-color: #059669; --success-color-rgb: 5, 150, 105; --warning-color: #d97706; --warning-color-rgb: 217, 119, 6; --danger-color: #dc2626; --danger-color-rgb: 220, 38, 38; /* Layout */ --sidebar-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); --top-row-bg: #f8fafc; --top-row-border: #cbd5e1; } html.theme-older-student body { background-color: #f8fafc; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 0.9375rem; line-height: 1.6; } html.theme-older-student .sidebar { background-image: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } html.theme-older-student .top-row { background-color: #f8fafc; border-bottom-color: #cbd5e1; } html.theme-older-student .card, html.theme-older-student [class*="card"] { border-radius: 0.375rem; } html.theme-older-student .btn-primary, html.theme-older-student .btn-outline-primary { border-radius: 0.375rem; } /* ───────────────────────────────────────────────────────────────────────── Responsive adjustments ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.theme-early-learner, html.theme-middle-learner, html.theme-older-student { transition: none; } }