/** * ============================================================ * GRADEWISE CORE STYLESHEET | gradewise-core.css | v1.0 * ============================================================ * Full guide: ~/gradewise/NEW_PAGE_GUIDE.md * Design System Bible: ~/gradewise/DESIGN_SYSTEM.md * ============================================================ * * QUICK START — every new page needs these three things: * * 1. FONTS in : * * * * * 2. THIS FILE first in : * * * 3. ZONE CLASS on : * ← warm editorial (default) * ← dashboards, teacher tools * ← dark UI, Vocab Royale, etc. * ← projector / lesson mode * * ── PER-GUIDE ACCENT OVERRIDES ───────────────────────────── * Add a second class to : * * * guide-romeo / guide-handmaids → Crimson #8B1A1A * guide-twelfth-night → Royal #4A1A6B * guide-hamlet → Slate #2C3E50 * guide-olive → Olive #3A5A2A * * ── PER-PAGE / PER-SCHOOL OVERRIDE ──────────────────────── * Drop a * * ── KEY VARIABLES TO USE IN PAGE CSS ────────────────────── * --page-bg page background * --surface card / panel background * --surface-secondary subtle contrast areas * --text-primary headings, labels * --text-secondary body text * --text-tertiary meta / captions * --zone-accent primary action color * --zone-accent-faint light tint of accent * --zone-divider-color gold line color (Library) or border (Platform) * --font-display Cormorant Garamond * --font-body DM Sans * * ── READY-MADE COMPONENTS ───────────────────────────────── * .card .card-body .card-header .card-footer .card-accent-bar * .btn .btn-primary .btn-ghost .btn-gold .btn-danger .btn-sm .btn-lg * .badge .badge-accent .badge-gold .badge-success .badge-error * .tag * .form-group .form-label .form-control * .alert .alert-info .alert-success .alert-warning .alert-error * .topbar .topbar-logo .topbar-actions * .sidebar .sidebar-nav-item .sidebar-section-label * .spinner .spinner-lg .fade-in-up .stagger-1…6 * .eyebrow .lead .meta .caption * .section-divider (gold ruled line with centered text) * .container .container-sm/md/lg/2xl * .page-wrapper (min-height:100vh, pads for topbar) * * ── NEVER DO ────────────────────────────────────────────── * ✗ Hardcode hex colors in page CSS — use variables * ✗ Load this file after page-specific CSS * ✗ Override :root zone variables inside a component rule * * ============================================================ */ /* ============================================================ GOOGLE FONTS — Include in HTML on every page ============================================================ ============================================================ */ /* ============================================================ 1. GLOBAL RESET & BOX MODEL ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); background-color: var(--page-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: var(--zone-accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--zone-accent-light); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ 2. DESIGN TOKENS — FOUNDATION (Never changes across zones) ============================================================ */ :root { /* ── Fonts ─────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* ── Type Scale ────────────────────────────────────── */ --text-xs: 0.70rem; /* 11.2px — captions, copyright */ --text-sm: 0.75rem; /* 12px — meta, tags */ --text-base: 0.875rem; /* 14px — body (platform-density) */ --text-md: 1rem; /* 16px — standard body */ --text-lg: 1.125rem; /* 18px — lead text */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 2rem; /* 32px — page titles */ --text-4xl: 2.5rem; /* 40px — hero headings */ --text-5xl: 3.5rem; /* 56px — display */ /* ── Foundation Surfaces ───────────────────────────── */ --cream: #FAF7F2; --cream-dark: #F0EBE3; --parchment: #F5F0E8; --white: #FFFFFF; /* ── Ink Scale ─────────────────────────────────────── */ --ink: #1A1A1A; --ink-light: #4A4A4A; --ink-lighter: #7A7A7A; --ink-faint: #B0A899; /* ── Border & Divider ──────────────────────────────── */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --border-color: #E5DED4; /* solid equivalent for border-color use */ /* ── Shadows ───────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 2px 6px rgba(0,0,0,0.07); --shadow-md: 0 4px 16px rgba(0,0,0,0.09); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.16); /* ── Radius ────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* ── Spacing ───────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Transitions ───────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* ── Z-Index Scale ─────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-above: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; /* ── Layout ────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; /* ── Topbar ────────────────────────────────────────── */ --topbar-height: 56px; /* ── Static Accent Colors (non-zone-specific use) ──── */ --accent: #1A3A5C; --accent-light: #2A5A8C; --accent-faint: rgba(26, 58, 92, 0.06); --gold: #B8860B; --gold-light: #D4A843; --gold-faint: rgba(184, 134, 11, 0.08); --gold-border: rgba(184, 134, 11, 0.25); --crimson: #8B1A1A; --crimson-light: #C0392B; --crimson-faint: rgba(139, 26, 26, 0.06); --emerald: #1A5C3A; --emerald-light: #27AE60; --emerald-faint: rgba(26, 92, 58, 0.06); --royal: #4A1A6B; --royal-light: #7B3FC4; --royal-faint: rgba(74, 26, 107, 0.06); --olive: #3A5A2A; --olive-light: #5A8A42; --olive-faint: rgba(58, 90, 42, 0.06); --slate: #2C3E50; --slate-light: #34495E; --slate-faint: rgba(44, 62, 80, 0.06); /* ── Semantic Feedback Colors ───────────────────────── */ --color-success: #1A5C3A; --color-success-bg: #EBF7F1; --color-success-border: rgba(26,92,58,0.2); --color-warning: #92610A; --color-warning-bg: #FEF9EC; --color-warning-border: rgba(184,134,11,0.25); --color-error: #8B1A1A; --color-error-bg: #FDEAEA; --color-error-border: rgba(139,26,26,0.2); --color-info: #1A3A5C; --color-info-bg: #EAF0F7; --color-info-border: rgba(26,58,92,0.2); /* ── Games Zone Colors (used within .zone-games) ────── */ --game-dark: #0F172A; --game-darker: #080E1A; --game-blue: #667EEA; --game-purple: #7C3AED; --game-pink: #EC4899; --game-surface: rgba(255,255,255,0.05); --game-surface-md: rgba(255,255,255,0.08); --game-text: #F1F5F9; --game-text-muted: rgba(241,245,249,0.65); --game-border: rgba(255,255,255,0.1); } /* ============================================================ 3. ZONE SYSTEM — CSS Variable Overrides ============================================================ Each zone resets the "active" variables that components use. Components reference --page-bg, --zone-accent, etc. Never hard-code zone colors in component rules. ============================================================ */ /* ── Library Zone (Default) ──────────────────────────────── Warm, editorial, scholarly. Cormorant headings, cream bg. ─────────────────────────────────────────────────────────── */ :root, .zone-library { --page-bg: var(--cream); --surface: var(--white); --surface-secondary: var(--cream-dark); --surface-hover: var(--parchment); --text-primary: var(--ink); --text-secondary: var(--ink-light); --text-tertiary: var(--ink-lighter); --text-disabled: var(--ink-faint); --zone-accent: var(--accent); /* #1A3A5C navy */ --zone-accent-light: var(--accent-light); /* #2A5A8C */ --zone-accent-faint: var(--accent-faint); /* rgba(26,58,92,0.06) */ --zone-accent-border: rgba(26, 58, 92, 0.2); --zone-heading-font: var(--font-display); --zone-body-font: var(--font-body); --zone-topbar-bg: var(--white); --zone-topbar-border: var(--border); --zone-topbar-text: var(--ink); --zone-topbar-logo: var(--accent); --zone-sidebar-bg: var(--white); --zone-sidebar-hover: var(--parchment); --zone-sidebar-active: var(--accent-faint); --zone-sidebar-text: var(--ink-light); --zone-sidebar-active-text: var(--accent); --zone-card-bg: var(--white); --zone-card-border: var(--border); --zone-card-shadow: var(--shadow-sm); --zone-btn-primary-bg: var(--accent); --zone-btn-primary-text: var(--white); --zone-btn-primary-hover: var(--accent-light); --zone-btn-ghost-text: var(--accent); --zone-input-bg: var(--white); --zone-input-border: var(--border-strong); --zone-input-focus: var(--accent); --zone-divider-color: var(--gold); /* gold eyebrow lines */ } /* ── Platform Zone ───────────────────────────────────────── Same warm base as Library but more utilitarian. Dashboards, grading, admin, teacher tools. ─────────────────────────────────────────────────────────── */ .zone-platform { --page-bg: var(--cream); --surface: var(--white); --surface-secondary: var(--cream-dark); --surface-hover: var(--parchment); --text-primary: var(--ink); --text-secondary: var(--ink-light); --text-tertiary: var(--ink-lighter); --text-disabled: var(--ink-faint); --zone-accent: var(--accent); --zone-accent-light: var(--accent-light); --zone-accent-faint: var(--accent-faint); --zone-accent-border: rgba(26, 58, 92, 0.2); --zone-heading-font: var(--font-body); /* Platform uses DM Sans for headings */ --zone-body-font: var(--font-body); --zone-topbar-bg: var(--white); --zone-topbar-border: var(--border); --zone-topbar-text: var(--ink); --zone-topbar-logo: var(--accent); --zone-sidebar-bg: var(--white); --zone-sidebar-hover: var(--parchment); --zone-sidebar-active: var(--accent-faint); --zone-sidebar-text: var(--ink-light); --zone-sidebar-active-text: var(--accent); --zone-card-bg: var(--white); --zone-card-border: var(--border); --zone-card-shadow: var(--shadow-sm); --zone-btn-primary-bg: var(--accent); --zone-btn-primary-text: var(--white); --zone-btn-primary-hover: var(--accent-light); --zone-btn-ghost-text: var(--accent); --zone-input-bg: var(--white); --zone-input-border: var(--border-strong); --zone-input-focus: var(--accent); --zone-divider-color: var(--border-color); /* Neutral divider, not gold */ } /* ── Games Zone ──────────────────────────────────────────── Dark atmospheric UI. Vocab Royale, Knowledge Quest, etc. ─────────────────────────────────────────────────────────── */ .zone-games { --page-bg: var(--game-dark); --surface: var(--game-surface); --surface-secondary: var(--game-surface-md); --surface-hover: rgba(255,255,255,0.12); --text-primary: var(--game-text); --text-secondary: var(--game-text-muted); --text-tertiary: rgba(241,245,249,0.45); --text-disabled: rgba(241,245,249,0.25); --zone-accent: var(--game-blue); --zone-accent-light: #8B9FFF; --zone-accent-faint: rgba(102, 126, 234, 0.15); --zone-accent-border: rgba(102, 126, 234, 0.3); --zone-heading-font: var(--font-body); --zone-body-font: var(--font-body); --zone-topbar-bg: var(--game-darker); --zone-topbar-border: var(--game-border); --zone-topbar-text: var(--game-text); --zone-topbar-logo: var(--game-blue); --zone-sidebar-bg: rgba(255,255,255,0.04); --zone-sidebar-hover: var(--game-surface-md); --zone-sidebar-active: rgba(102, 126, 234, 0.15); --zone-sidebar-text: var(--game-text-muted); --zone-sidebar-active-text: var(--game-blue); --zone-card-bg: var(--game-surface); --zone-card-border: var(--game-border); --zone-card-shadow: 0 4px 20px rgba(0,0,0,0.4); --zone-btn-primary-bg: var(--game-blue); --zone-btn-primary-text: var(--white); --zone-btn-primary-hover: #7B8EFF; --zone-btn-ghost-text: var(--game-blue); --zone-input-bg: rgba(255,255,255,0.07); --zone-input-border: var(--game-border); --zone-input-focus: var(--game-blue); --zone-divider-color: var(--game-border); color-scheme: dark; } /* ── Slideshow Zone ──────────────────────────────────────── Projection-ready. Large type. Neutral bg. Accent is inherited from Library by default but can be overridden per deck with a page-level :root {} block. ─────────────────────────────────────────────────────────── */ .zone-slideshow { --page-bg: #F9FAFB; --surface: var(--white); --surface-secondary: #F1F5F9; --surface-hover: #E8EDF2; --text-primary: var(--ink); --text-secondary: var(--ink-light); --text-tertiary: var(--ink-lighter); --text-disabled: var(--ink-faint); --zone-accent: var(--accent); --zone-accent-light: var(--accent-light); --zone-accent-faint: var(--accent-faint); --zone-accent-border: rgba(26, 58, 92, 0.2); --zone-heading-font: var(--font-display); --zone-body-font: var(--font-body); --zone-card-bg: var(--white); --zone-card-border: var(--border); --zone-card-shadow: var(--shadow-md); --zone-btn-primary-bg: var(--accent); --zone-btn-primary-text: var(--white); --zone-btn-primary-hover: var(--accent-light); --zone-btn-ghost-text: var(--accent); --zone-input-bg: var(--white); --zone-input-border: var(--border-strong); --zone-input-focus: var(--accent); --zone-divider-color: var(--gold); /* Slideshow-specific: projector font sizes */ --slide-h1: 3rem; --slide-h2: 2.2rem; --slide-h3: 1.1rem; --slide-body: 1.25rem; --slide-def: 1.3rem; --slide-q: 1.8rem; } /* Projector Mode — triggered by .projector-mode on or slide container */ .projector-mode { --slide-h1: 4.2rem; --slide-h2: 3rem; --slide-h3: 1.4rem; --slide-body: 1.7rem; --slide-def: 1.75rem; --slide-q: 2.4rem; } /* ============================================================ 4. PER-GUIDE ACCENT OVERRIDES ============================================================ Apply these classes to or a wrapper element alongside a zone class to swap the accent color for specific guides. Example: Or override inline in a