/* * Cinematic Scholar – Global Theme Variables * Defined on :root so every element in the document inherits them, * including elements inside Vue component slots and scoped components. * * Dark mode: add class="dark" to (default admin palette) * Light mode: no dark class on */ /* ── Light Mode (default when no .dark class on ) ─────────────────── */ :root { --cs-bg: #f4f7ff; --cs-surface: #ffffff; --cs-surface-low: #eef1fb; --cs-surface-base: #e4e9f5; --cs-surface-high: #d8dff0; --cs-surface-highest: #ccd4eb; --cs-surface-lowest: #f9faff; --cs-text-primary: #1a2036; --cs-text-muted: #4a5068; --cs-accent: #005ac2; --cs-accent-vivid: #004395; --cs-tertiary: #8c4500; --cs-secondary: #304671; --cs-error: #ba1a1a; --cs-nav-bg: rgba(255, 255, 255, 0.95); --cs-overlay: rgba(0, 0, 0, 0.07); --cs-border: rgba(0, 0, 0, 0.08); --cs-shadow: 0 4px 24px -6px rgba(26, 32, 54, 0.12); } /* ── Dark Mode (html.dark) ───────────────────────────────────────────────── */ html.dark { --cs-bg: #0c1322; --cs-surface: #0c1322; --cs-surface-low: #141b2b; --cs-surface-base: #191f2f; --cs-surface-high: #232a3a; --cs-surface-highest: #2e3545; --cs-surface-lowest: #070e1d; --cs-text-primary: #dce2f7; --cs-text-muted: #c2c6d6; --cs-accent: #adc6ff; --cs-accent-vivid: #4d8eff; --cs-tertiary: #ffb786; --cs-secondary: #b1c6f9; --cs-error: #ffb4ab; --cs-nav-bg: rgba(12, 19, 34, 0.88); --cs-overlay: rgba(255, 255, 255, 0.05); --cs-border: rgba(255, 255, 255, 0.06); --cs-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6); } /* ── Base resets that respond to theme ───────────────────────────────────── */ body { background-color: var(--cs-bg); color: var(--cs-text-primary); transition: background-color 0.2s, color 0.2s; } /* ── Semantic utility classes ────────────────────────────────────────────── */ /* Backgrounds */ .cs-card { background: var(--cs-surface-low); } .cs-card-high { background: var(--cs-surface-high); } .cs-card-lowest { background: var(--cs-surface-lowest); } .cs-surface-base { background: var(--cs-surface-base); } .cs-surface-highest { background: var(--cs-surface-highest); } .cs-footer { background: var(--cs-surface-low); } .cs-mobile-menu { background: var(--cs-surface-high); } /* Navigation */ .cs-nav { background: var(--cs-nav-bg); } .cs-nav-link { color: var(--cs-text-muted); } .cs-nav-active { color: var(--cs-accent) !important; border-color: var(--cs-accent) !important; } /* Icons & buttons */ .cs-icon-btn { color: var(--cs-text-muted); } .cs-icon-btn:hover { color: var(--cs-text-primary); background: var(--cs-overlay); } /* Live date/time pill in the navbar */ .cs-datetime { background: var(--cs-overlay); border: 1px solid color-mix(in srgb, var(--cs-accent) 18%, transparent); transition: background 0.2s ease, border-color 0.2s ease; } .cs-datetime:hover { background: color-mix(in srgb, var(--cs-accent) 8%, var(--cs-overlay)); } .cs-btn-gradient { background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-vivid)); color: #fff; } html.dark .cs-btn-gradient { color: #002e6a; } .cs-btn-gradient:hover { box-shadow: 0 0 20px rgba(77, 142, 255, 0.4); } .cs-btn-secondary { background: var(--cs-surface-high); color: var(--cs-text-primary); } .cs-btn-secondary:hover { background: var(--cs-surface-highest); } /* Text */ .cs-text-primary { color: var(--cs-text-primary); } .cs-text-muted { color: var(--cs-text-muted); } .cs-text-accent { color: var(--cs-accent); } .cs-text-tertiary { color: var(--cs-tertiary); } .cs-text-secondary { color: var(--cs-secondary); } /* Borders */ .cs-border-accent { border-color: var(--cs-accent); } .cs-border-secondary { border-color: var(--cs-secondary); } .cs-border-tertiary { border-color: var(--cs-tertiary); } /* Dropdowns */ .cs-dropdown { background: var(--cs-surface-high); border: 1px solid var(--cs-border); } .cs-dropdown-item { color: var(--cs-text-primary); } .cs-dropdown-item:hover { background: var(--cs-overlay); color: var(--cs-accent); } /* Progress bar track */ .cs-track { background: var(--cs-surface-highest); } /* Fonts */ .font-headline { font-family: 'Plus Jakarta Sans', 'Cairo', sans-serif; } .font-body { font-family: 'Inter', 'Cairo', sans-serif; } html[dir='rtl'] .font-headline { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; } html[dir='rtl'] .font-body { font-family: 'Cairo', 'Inter', sans-serif; } /* ── Stat card (primary KPI) ─────────────────────────────────────────────── */ .cs-stat-card { background: var(--cs-surface-low); border: 1px solid var(--cs-border); } .cs-stat-card:hover { background: var(--cs-surface-high); } /* ── KPI icon circle ────────────────────────────────────────────────────── */ .cs-kpi-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cs-kpi-icon--accent { background: color-mix(in srgb, var(--cs-accent) 15%, transparent); } .cs-kpi-icon--tertiary { background: color-mix(in srgb, var(--cs-tertiary) 15%, transparent); } .cs-kpi-icon--secondary { background: color-mix(in srgb, var(--cs-secondary) 15%, transparent); } /* ── Course list rows ────────────────────────────────────────────────────── */ .cs-course-row { background: var(--cs-surface-base); } .cs-course-row:hover { background: var(--cs-surface-highest); } /* ── Avatar border ───────────────────────────────────────────────────────── */ .cs-avatar { border: 1px solid var(--cs-border); } /* ── Badge ───────────────────────────────────────────────────────────────── */ .cs-badge-accent { background: color-mix(in srgb, var(--cs-accent) 12%, transparent); color: var(--cs-accent); }