/* ================================================================ BRIGHTME — dashboard-premium.css Scope: dashboard.html ONLY (linked here, nowhere else) — this file never touches admin.html or teacher.html, which keep the original gamified dark theme from style.css untouched. Redesign brief: premium, spacious, professional student dashboard in the spirit of Google Classroom / Canvas / Notion / MS365 Edu. Primary #2563EB · Background #F5F7FB · White cards · 18–20px radius · very soft shadows · generous whitespace · subtle motion. This file works BY REDEFINING THE SAME CSS VARIABLES style.css already uses everywhere (--bg, --card, --accent, --radius, ...), so every existing component (.card, .stat-card, .btn-sm, badges, the library, quizzes, chat, etc.) automatically inherits the new look with zero markup changes and zero risk of broken JS bindings. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ────────────────────────────────────────────────────────────── 1. DESIGN TOKENS — premium light palette Applied to [data-theme="light"], which dashboard.html now loads by default (see the + savedTheme change in dashboard.html). Dark mode keeps the original palette from style.css untouched, so the toggle still works for anyone who prefers it. ────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #F5F7FB; --bg-alt: #EEF2FA; --card: #FFFFFF; --card-2: #F8FAFD; --card-3: #F0F4FC; --accent: #2563EB; --accent-hover: #1D4ED8; --accent-glow: rgba(37,99,235,0.16); --accent-dim: rgba(37,99,235,0.08); --accent-2: #3B82F6; --green: #16A34A; --green-bg: rgba(22,163,74,0.10); --green-border: rgba(22,163,74,0.22); --orange: #EA580C; --orange-bg: rgba(234,88,12,0.10); --gold: #D97706; --gold-bg: rgba(217,119,6,0.10); --purple: #7C3AED; --purple-bg: rgba(124,58,237,0.10); --success: #16A34A; --success-bg: rgba(22,163,74,0.10); --danger: #DC2626; --danger-bg: rgba(220,38,38,0.10); --warning: #D97706; --warning-bg: rgba(217,119,6,0.10); --info: #2563EB; --info-bg: rgba(37,99,235,0.10); --text: #0F172A; --text-2: #1E293B; --muted: #64748B; --dim: #94A3B8; --glass: rgba(15,23,42,0.025); --glass-2: rgba(37,99,235,0.05); --glass-3: rgba(37,99,235,0.08); --border: rgba(15,23,42,0.08); --border-2: rgba(15,23,42,0.12); --border-accent: rgba(37,99,235,0.30); --sidebar-bg: #FFFFFF; --input-bg: #F8FAFD; --shadow: 0 20px 45px rgba(15,23,42,0.08); --shadow-sm: 0 2px 12px rgba(15,23,42,0.05); --shadow-accent: 0 10px 30px rgba(37,99,235,0.20); --shadow-green: 0 10px 25px rgba(22,163,74,0.18); --sk1: #EEF2FA; --sk2: #F8FAFD; --radius: 20px; --radius-sm: 14px; --radius-lg: 24px; --radius-xl: 28px; } /* Typography — Inter everywhere on the dashboard for a cleaner, more "product" feel than the marketing Sora/Outfit pairing. */ body, input, textarea, select, button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } .logo { font-family: 'Inter', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em; } [data-theme="light"] body { background: var(--bg); } /* ────────────────────────────────────────────────────────────── 2. GLOBAL COMPONENT REFINEMENT (cards, buttons, badges) Softer, flatter, no gradients — spacious padding. ────────────────────────────────────────────────────────────── */ [data-theme="light"] .card, [data-theme="light"] .stat-card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } [data-theme="light"] .card:hover, [data-theme="light"] .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow) !important; border-color: var(--border-2) !important; } @media (prefers-reduced-motion: reduce) { [data-theme="light"] .card, [data-theme="light"] .stat-card { transition: none; } [data-theme="light"] .card:hover, [data-theme="light"] .stat-card:hover { transform: none; } } [data-theme="light"] .btn-auth, [data-theme="light"] .btn-sm { background: var(--accent) !important; background-image: none !important; border-radius: 12px !important; font-weight: 600 !important; box-shadow: none !important; transition: background 0.15s ease, transform 0.1s ease; } [data-theme="light"] .btn-auth:hover, [data-theme="light"] .btn-sm:hover { background: var(--accent-hover) !important; transform: translateY(-1px); } [data-theme="light"] .btn-ghost { background: var(--card-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } [data-theme="light"] .notification-badge, [data-theme="light"] .type-badge { border-radius: 999px !important; font-weight: 700 !important; } /* Focus states for accessibility — visible on white cards */ [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible, [data-theme="light"] input:focus-visible, [data-theme="light"] textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────── 3. SIDEBAR — clean white, generous spacing, subtle active state ────────────────────────────────────────────────────────────── */ [data-theme="light"] .sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--border) !important; box-shadow: none !important; padding: 22px 16px !important; } [data-theme="light"] .sidebar .logo { color: var(--text) !important; margin-bottom: 22px; } [data-theme="light"] .sidebar .logo span { color: var(--accent) !important; } [data-theme="light"] #sidebar-profile-btn { background: var(--card-2) !important; } [data-theme="light"] .side-nav { display: flex; flex-direction: column; gap: 2px; } [data-theme="light"] .side-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px !important; border-radius: 12px !important; color: var(--muted) !important; font-weight: 500 !important; font-size: 0.9rem !important; transition: background 0.15s ease, color 0.15s ease; /* mute the emoji icons so they read as simple marks, not toys */ filter: grayscale(45%); opacity: 0.88; } [data-theme="light"] .side-nav a:hover { background: var(--glass-2) !important; color: var(--text) !important; filter: none; opacity: 1; } [data-theme="light"] .side-nav a.active { background: var(--accent) !important; color: #fff !important; font-weight: 700 !important; filter: none; opacity: 1; box-shadow: var(--shadow-accent); } [data-theme="light"] .side-nav a.active .notification-badge { background: #fff !important; color: var(--accent) !important; } /* ────────────────────────────────────────────────────────────── 4. DESKTOP TOPBAR (new) — logo / search / notifications / avatar Hidden on mobile; the existing .mobile-topbar keeps handling phones exactly as before, unchanged. ────────────────────────────────────────────────────────────── */ .desktop-topbar { display: none; } @media (min-width: 901px) { .desktop-topbar { display: flex; align-items: center; gap: 20px; padding: 16px 32px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .dt-search-wrap { flex: 1; max-width: 480px; position: relative; margin: 0 auto; } .dt-search-wrap input { width: 100%; padding: 11px 16px 11px 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 0.88rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dt-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .dt-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 0.95rem; pointer-events: none; } .dt-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .dt-icon-btn { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 1.1rem; position: relative; transition: background 0.15s ease, color 0.15s ease; } .dt-icon-btn:hover { background: var(--glass-2); color: var(--accent); } .dt-avatar-wrap { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card-2); cursor: pointer; border: 1px solid var(--border); } .dt-avatar-wrap img, .dt-avatar-wrap .dt-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .dt-avatar-name { font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1.2; } .dt-avatar-role { font-size: 0.68rem; color: var(--muted); } } /* ────────────────────────────────────────────────────────────── 5. HOME HERO — "Good morning" banner with illustration ────────────────────────────────────────────────────────────── */ [data-theme="light"] .home-profile-card { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm) !important; padding: 28px 30px !important; display: flex; align-items: center; gap: 24px; position: relative; overflow: hidden; } [data-theme="light"] .home-profile-avatar { box-shadow: none !important; border: 3px solid var(--card-2) !important; } [data-theme="light"] .home-greeting-illustration { display: none; } @media (min-width: 901px) { [data-theme="light"] .home-greeting-illustration { display: block; margin-left: auto; flex-shrink: 0; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--accent-dim), transparent 70%); display: flex; align-items: center; justify-content: center; font-size: 4.2rem; } } [data-theme="light"] .home-badge { border-radius: 999px !important; font-weight: 600 !important; background: var(--glass-2) !important; color: var(--accent) !important; border: 1px solid var(--border-accent) !important; } [data-theme="light"] .home-streak-pill { background: var(--gold-bg) !important; color: var(--gold) !important; border-radius: 999px !important; font-weight: 700 !important; } [data-theme="light"] .quote-card { background: var(--card-2) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius) !important; box-shadow: none !important; } [data-theme="light"] .continue-card { background: var(--accent) !important; border-radius: var(--radius) !important; color: #fff !important; box-shadow: var(--shadow-accent) !important; } [data-theme="light"] .continue-card #continue-btn { background: #fff !important; color: var(--accent) !important; } /* ────────────────────────────────────────────────────────────── 6. STAT CARDS — icon chip + big number, minimal ────────────────────────────────────────────────────────────── */ [data-theme="light"] .home-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { [data-theme="light"] .home-stats-grid { grid-template-columns: repeat(4, 1fr); } } [data-theme="light"] .home-stats-grid .stat-card { padding: 18px !important; text-align: left !important; } [data-theme="light"] .stat-icon-chip { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 10px; } /* ────────────────────────────────────────────────────────────── 7. CONTINUE LEARNING — restyle the existing material cards (rendered by makeMaterialCard() in JS — markup unchanged, only the .card / .type-badge visuals shift via the tokens above, plus this layout wrapper for a horizontal, evenly spaced grid instead of a loose masonry feel). ────────────────────────────────────────────────────────────── */ [data-theme="light"] #recent-materials.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } /* ────────────────────────────────────────────────────────────── 8. QUICK ACCESS GRID (new) ────────────────────────────────────────────────────────────── */ .home-quick-access { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; } @media (min-width: 640px) { .home-quick-access { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .home-quick-access { grid-template-columns: repeat(6, 1fr); } } [data-theme="light"] .qa-tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } [data-theme="light"] .qa-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-accent); } [data-theme="light"] .qa-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--accent-dim); color: var(--accent); } [data-theme="light"] .qa-label { font-size: 0.82rem; font-weight: 700; color: var(--text); } [data-theme="light"] .qa-sub { font-size: 0.68rem; color: var(--muted); } /* ────────────────────────────────────────────────────────────── 9. SECTION TITLES — quieter, consistent rhythm ────────────────────────────────────────────────────────────── */ [data-theme="light"] .section-title { font-size: 1rem !important; font-weight: 700 !important; color: var(--text) !important; margin: 28px 0 14px !important; letter-spacing: -0.01em; } /* ────────────────────────────────────────────────────────────── 10. MAIN CONTENT SPACING — more whitespace overall ────────────────────────────────────────────────────────────── */ @media (min-width: 901px) { [data-theme="light"] .main-content { padding: 28px 36px 60px !important; } }