/* ─────────────────────────────────────────────────────────────────────────── theme.css — shared theme tokens + accessibility, driven by prefs.js Light/dark colours are semantic CSS variables. Dark mode + accessibility are applied centrally here (keyed off the data-attributes prefs.js sets on ) so individual pages don't each need bespoke dark styles for their shared chrome (nav, cards, panels, chips…). ─────────────────────────────────────────────────────────────────────────── */ /* OpenDyslexic for the dyslexia-friendly option (system fonts as resilient fallback if the CDN is unavailable — these are also easier to read). */ @import url('https://fonts.cdnfonts.com/css/opendyslexic'); :root { --bg: #F4F6FB; --surface: #FFFFFF; --surface-2: #F1F3F8; --text: #111827; --text-2: #4B5563; --text-3: #5B6472; /* was #9CA3AF — failed WCAG AA (~2.5:1) on white/cards */ --border: #EAECF4; --p: #B31B1B; --p-dk: #991414; --p-soft: #FFF0F0; --shadow: rgba(16,24,40,.08); } html[data-theme="dark"] { --bg: #0F1217; --surface: #181C23; --surface-2: #232A33; --text: #E7EAF0; --text-2: #B6BECB; --text-3: #99A2B0; --border: #2A313B; --p: #E45E5B; /* lifted red so it stays legible on dark */ --p-dk: #C8423F; --p-soft: #2C1B1C; --shadow: rgba(0,0,0,.55); --shadow-md: 0 6px 20px rgba(0,0,0,.45); } /* ── Design-system scale (UI consistency sweep, 10.7.26) ────────────────── Radius/shadow/typography/button/segmented-control tokens shared by every page. Same red palette as above — this section is about applying it consistently, not changing it. */ :root { --r-sm: 10px; /* buttons, inputs, small chips */ --r-md: 14px; /* the one canonical "primary card" radius */ --r-pill: 999px; /* segmented controls, tags, pill buttons */ --shadow-sm: 0 1px 4px var(--shadow); /* card at rest */ --shadow-md: 0 6px 20px rgba(16,24,40,.10); /* canonical card hover-lift */ } /* Typography scale — one size/weight per semantic role, replacing the dozen near-duplicate variants found across pages (page-title/.hero h1/ .page-header h1 etc all converge here). Pages keep their existing class names for layout reasons; these rules just standardise the values. */ .h-page, .page-title, .page-header h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 750; letter-spacing: -.3px; line-height: 1.15; } .h-section, .section-title, .panel-title, .highlight-title, .group-title, .stats-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.1px; } .h-card, .card-title, .paper-title, .material-title { font-size: 14.5px; font-weight: 650; } .t-body { font-size: 13.5px; font-weight: 500; } .t-sub, .card-desc, .section-sub, .page-sub, .panel-sub, .group-sub { font-size: 13px; color: var(--text-3); } /* Canonical card treatment — the one border/radius/shadow combo for a "primary card" (paper-card/material-card were already the best-adopted version of this; promoted here so every page can share it). */ .card, .panel, .paper-card, .material-card, .highlight, .stats-card, .board-card, .chat-card { border-radius: var(--r-md); box-shadow: var(--shadow-sm); } /* Canonical button system — one .btn base (incl. the press micro- interaction already on revision-timetable's .cta / settings' .btn, but missing from the flat var(--p) buttons on past-papers/course-materials) plus primary/ghost/secondary modifiers. */ /* Base properties apply whether a button uses just ".btn-primary" alone (past-papers.html/course-materials.html's convention) or the combined ".btn .btn-primary" form (onboarding.html/settings.html's convention) — both exist in the codebase, so the shared rule has to work either way rather than requiring every page's markup to change. */ .btn, .btn-primary, .btn-ghost, .btn-secondary, .cta, .submit { font-family: inherit; font-size: 13.5px; font-weight: 650; border: none; border-radius: var(--r-sm); padding: 11px 20px; cursor: pointer; transition: filter .14s, box-shadow .16s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn:active, .btn-primary:active, .btn-ghost:active, .btn-secondary:active, .cta:active, .submit:active { transform: translateY(1px); } .btn-primary, .cta, .submit { color: #fff; background: linear-gradient(180deg, var(--p), var(--p-dk)); box-shadow: 0 2px 8px rgba(179,27,27,.28); } .btn-primary:hover, .cta:hover, .submit:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(179,27,27,.34); } .btn-ghost { color: var(--text-2); background: var(--surface-2); } .btn-ghost:hover { background: var(--border); } .btn-secondary { color: var(--text-2); background: var(--surface-2); border: 1.5px solid var(--border); } .btn-secondary:hover { border-color: var(--p); color: var(--p); } /* Canonical segmented control — unifies settings' text-size toggle, subjects.css's tier toggle, and revision-timetable's stats toggle into one shared visual language (all three already looked almost identical). */ .seg, .tier-seg, .stats-seg { display: flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; } .seg-opt, .tier-opt, .stats-seg-btn { border: none; background: none; font-family: inherit; font-weight: 600; border-radius: var(--r-pill); cursor: pointer; transition: all .12s; color: var(--text-3); padding: 7px 16px; font-size: 12.5px; white-space: nowrap; } /* A visible, colour-filled "on" pill (not just a subtle elevation shadow — that reads as a near-invisible shade difference in dark mode, where the active pill's background and the track behind it are both dark, leaving nothing but a colour change in the text to show which option is picked). */ .seg-opt.on, .tier-opt.on, .stats-seg-btn.active { background: var(--p-soft); color: var(--p); box-shadow: 0 1px 3px rgba(16,24,40,.12); } /* Below 680px every use of this control (Settings' text-size toggle, the subject Tier picker, Revision Timetable's stats view) was squeezed into whatever leftover width its row's other content left behind — three buttons crammed into ~120px, cramped and hard to read/tap. Force it full width with evenly-sized buttons instead. */ @media (max-width: 680px) { .seg, .tier-seg, .stats-seg { width: 100%; } .seg-opt, .tier-opt, .stats-seg-btn { flex: 1; padding: 10px 0 !important; font-size: 13px !important; text-align: center; } } /* Entrance animation — the one genuinely new visual moment (the sweep found zero entrance animation anywhere on the site). Respects the existing [data-motion="reduced"] rule below, which already zeroes out all animation durations globally. */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .fade-in-up { animation: fadeInUp .32s ease-out both; } /* ── Dark mode: shared chrome across pages ── */ .paper-ref { color: #6B7280; } /* light base; dark override lifts it below */ html[data-theme="dark"] body { background: var(--bg) !important; color: var(--text); } /* The logo PNG has a white background — against the dark nav it reads as a harsh square. Round it into a tidy white badge so it looks intentional. */ html[data-theme="dark"] .nav-logo-img { background: #fff; border-radius: 50%; padding: 5px; object-fit: contain; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } html[data-theme="dark"] nav, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .cal, html[data-theme="dark"] .side, html[data-theme="dark"] .highlight, html[data-theme="dark"] .stats, html[data-theme="dark"] footer, html[data-theme="dark"] .user-chip, html[data-theme="dark"] .save-bar { background: var(--surface) !important; border-color: var(--border) !important; } html[data-theme="dark"] .cell, html[data-theme="dark"] .tier-row, html[data-theme="dark"] .field input, html[data-theme="dark"] .pw-field input, html[data-theme="dark"] .cal-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); } html[data-theme="dark"] .pw-field label { color: var(--text-2) !important; } html[data-theme="dark"] .cell.empty { background: transparent !important; border: none !important; } /* Primary headings / body text → brightest foreground */ html[data-theme="dark"] .nav-name, html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-text, html[data-theme="dark"] .page-title, html[data-theme="dark"] .panel-title, html[data-theme="dark"] .section-title, html[data-theme="dark"] .cal-month, html[data-theme="dark"] .cal-num, html[data-theme="dark"] .cell-num, html[data-theme="dark"] .prog-name, html[data-theme="dark"] .tier-name, html[data-theme="dark"] .side-head, html[data-theme="dark"] .setting-name, html[data-theme="dark"] .brand h1, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--text) !important; } /* Secondary text → mid foreground */ html[data-theme="dark"] .nav-sub, html[data-theme="dark"] .card-desc, html[data-theme="dark"] .page-sub, html[data-theme="dark"] .panel-sub, html[data-theme="dark"] .section-sub, html[data-theme="dark"] .user-email, html[data-theme="dark"] .prog-pct, html[data-theme="dark"] .ev-meta, html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .paper-ref, html[data-theme="dark"] .brand p, html[data-theme="dark"] .ev-title, html[data-theme="dark"] .tier-opt, html[data-theme="dark"] .seg-opt { color: var(--text-2) !important; } /* Muted text (#9CA3AF / #6B7280) → lifted so it's still readable on dark */ html[data-theme="dark"] .stat-l, html[data-theme="dark"] .hint, html[data-theme="dark"] .demo-note, html[data-theme="dark"] .step-label, html[data-theme="dark"] .count-note, html[data-theme="dark"] .setting-desc, html[data-theme="dark"] .side-sub, html[data-theme="dark"] .ev-date, html[data-theme="dark"] .ev-empty, html[data-theme="dark"] .dow span, html[data-theme="dark"] .subj-group-note, html[data-theme="dark"] .page-label, html[data-theme="dark"] .section-label, html[data-theme="dark"] .req, html[data-theme="dark"] .prog-pct { color: var(--text-3) !important; } /* Soft red surfaces (chips, active states, announcement) */ html[data-theme="dark"] .nav-links a.active, html[data-theme="dark"] .logout-btn, html[data-theme="dark"] .announcement, html[data-theme="dark"] .highlight-tag { background: var(--p-soft) !important; } /* Segmented controls (text size + tiers): dark track, lighter active pill */ html[data-theme="dark"] .tier-seg, html[data-theme="dark"] .seg { background: var(--surface-2) !important; } html[data-theme="dark"] .tier-opt.on, html[data-theme="dark"] .seg-opt.on { color: var(--p) !important; } html[data-theme="dark"] .save-bar { background: rgba(24,28,35,.92) !important; } /* Brand-red text that's hardcoded #B31B1B → use the lifted red so it stays legible on dark surfaces (stat numbers, announcement, tags, etc.). */ html[data-theme="dark"] .stat-n, html[data-theme="dark"] .highlight-tag, html[data-theme="dark"] .logout-btn, html[data-theme="dark"] .ann-text, html[data-theme="dark"] .ann-text strong, html[data-theme="dark"] .subj-group-label, html[data-theme="dark"] .highlight-tag span { color: var(--p) !important; } html[data-theme="dark"] .ann-dot, html[data-theme="dark"] .highlight-tag span { background: var(--p) !important; } /* ── Accessibility: text size (whole-page zoom) ── */ html[data-text-size="small"] body { zoom: 0.92; } html[data-text-size="large"] body { zoom: 1.12; } /* ── Accessibility: dyslexia-friendly font ── */ html[data-font="dyslexic"], html[data-font="dyslexic"] * { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; letter-spacing: .2px; } /* ── Accessibility: reduce motion ── */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }