/* ==================================================================== AI Accelerator Learning Platform — Style Sheet learn.aiaccelerator.uk ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* ==================================================================== 1. CSS Custom Properties — Brand Variables ==================================================================== */ :root { /* Colours — Primary & Secondary */ --color-primary: #1B2F3C; --color-accent-1: #00FFBC; --color-accent-2: #00B1FF; --color-white: #FFFFFF; --color-off-white: #F8F9FA; /* Extended Palette */ --color-deep-cerulean: #0084B2; --color-malibu: #5CD5FF; --color-cornflower: #6161FF; --color-meadow: #17CE95; --color-moonraker: #C5B6F1; --color-sea-pink: #EFACA8; --color-surface-dark: #152532; /* Accessible Alternatives (light backgrounds) */ --color-accent-1-accessible: #007A5E; --color-accent-2-accessible: #0071A1; /* Text & UI */ --color-text-primary: #1B2F3C; --color-text-secondary: #575756; --color-text-muted: #6B7A88; --color-border: #E2E8F0; --color-border-dark: #1E3A4C; /* ─── V2 Functional Tokens (PRD §19.2, DESIGN.md §3.3) ─── Functional, role-based names that the dark-theme block (added in the follow-up commit) will override. Light values match the platform's current rendering exactly — pure refactor, zero visual change. The prescriptive --color-* tokens above remain valid and are kept as aliases for any existing consumer. */ --bg: #F8F9FA; --bg-deep: #F0F3F5; --surface: #FFFFFF; --surface-hover: #F8F9FA; --ink: #1B2F3C; --ink-soft: #5A6B7A; --ink-muted: #8A98A4; --line: #E2E8F0; --line-strong: rgba(27, 47, 60, 0.18); --accent: #007A5E; --accent-secondary: #00B1FF; --accent-cta: #0084B2; --ink-on-accent: #FFFFFF; --warn: #FF5F5F; --warn-bg: rgba(255, 95, 95, 0.08); --focus: #0084B2; --shadow: 0 4px 18px rgba(27, 47, 60, 0.08); --shadow-strong: 0 12px 32px rgba(27, 47, 60, 0.16); /* Gradients (light) */ --gradient-hero: linear-gradient(135deg, #111F28 0%, #1B2F3C 60%, #0A4A6B 100%); --gradient-accent: linear-gradient(135deg, #00FFBC 0%, #00B1FF 100%); --gradient-stat: linear-gradient(135deg, #1B2F3C 0%, #0A4A6B 100%); --gradient-card-hover: linear-gradient(135deg, rgba(0, 255, 188, 0.1) 0%, rgba(0, 177, 255, 0.1) 100%); /* Shadows */ --shadow-sm: 0 1px 3px rgba(27, 47, 60, 0.08); --shadow-md: 0 4px 12px rgba(27, 47, 60, 0.12); --shadow-lg: 0 12px 40px rgba(27, 47, 60, 0.16); --shadow-glow: 0 0 40px rgba(0, 255, 188, 0.2); --shadow-glow-subtle: 0 0 20px rgba(0, 255, 188, 0.1); /* Typography */ --font: 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', monospace; /* Layout */ --max-width: 1280px; --sidebar-width: 280px; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Animation */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; /* Borders & Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; } /* ─── V2 Dark Theme (PRD §19.2, DESIGN.md §3) ─── Activated by setting `data-theme="dark"` on . Default (no attribute) and `data-theme="light"` both render via the :root block above — byte-identical to the deployed platform. The override pairs the 18 functional tokens (per DESIGN.md §3.3, reconciled with design-system/02-colour.md contrast tiers) with selective flips of the prescriptive --color-* aliases that have a pure single role (text colours, borders, the off-white recessed surface). --color-primary stays at #1B2F3C in both themes because it serves as a dark fill (footer, video player chrome, completion gradient base) — when the canvas itself becomes Gable Green in dark mode, those dark fills sit flush, which is the desired effect. --color-white flips to #1B2F3C so it works as a background token; the small set of "white text on always-dark surface" uses (hero text, footer copy, stat-card numbers, completion banner, video- player chrome) are overridden explicitly below. Full WCAG-AA surface coverage across every section type / state combination is the Phase 2a "Theme QA sweep" task. This block is the foundation it builds on. */ :root[data-theme="dark"] { --bg: #1B2F3C; --bg-deep: #152532; --surface: rgba(255, 255, 255, 0.04); --surface-hover: rgba(255, 255, 255, 0.08); --ink: #FFFFFF; --ink-soft: #CFDBE4; --ink-muted: #8AA0AE; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.22); --accent: #00FFBC; --accent-secondary: #00B1FF; --accent-cta: #0084B2; --ink-on-accent: #1B2F3C; --warn: #FF9D6B; --warn-bg: rgba(255, 157, 107, 0.12); --focus: #00FFBC; --shadow: 0 4px 18px rgba(0, 0, 0, 0.30); --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.45); /* Prescriptive aliases that flip cleanly (single role). */ --color-white: #1B2F3C; /* used as page/card bg — flips dark; white-text uses overridden below */ --color-off-white: #152532; /* recessed surface → dark deep */ --color-text-primary: #FFFFFF; --color-text-secondary: #CFDBE4; --color-text-muted: #8AA0AE; --color-border: rgba(255, 255, 255, 0.10); /* The "accessible" accent variants were the light-bg-only forms (#007A5E / #0071A1). On a Gable canvas they fall under WCAG AA, so in dark mode they flip back to their bright forms — which are the Tier-3-on-dark colours the accessible variants existed to replace on light. This auto-fixes ~19 selector usages (link hovers, section labels, lesson- nav highlights, key-tips icons, in-development locked icon, catalogue card hover border) without per-selector overrides. */ --color-accent-1-accessible: #00FFBC; --color-accent-2-accessible: #00B1FF; } /* White text preserved on always-dark surfaces (--color-white now resolves to #1B2F3C in dark, so these explicit overrides keep the text legible on the hero gradient, footer, completion banner, stat cards, video-player chrome, and the prompt copy-button hover). */ :root[data-theme="dark"] .hero, :root[data-theme="dark"] .hero__title, :root[data-theme="dark"] footer, :root[data-theme="dark"] footer a, :root[data-theme="dark"] .video-player__minimize, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .completion-celebration, :root[data-theme="dark"] .prompt-copy-btn:hover { color: #FFFFFF; } /* Dark-mode surface overrides for selectors that use raw light hex literals (deliberately left as raw in the original refactor for zero-visual-change). These flip them to dark equivalents now that we have a full dark-mode contract. */ :root[data-theme="dark"] .lesson-locked-panel { background: var(--bg-deep); border-color: var(--line); } :root[data-theme="dark"] .lesson-locked-icon { /* Was rgba(27, 47, 60, 0.06) — a dark tint on light. On a dark canvas that's invisible. Flip to a faint white tint. */ background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .lesson-locked-panel--in_development .lesson-locked-icon { background: rgba(0, 177, 255, 0.16); /* slightly stronger blue tint on dark */ } :root[data-theme="dark"] .section-text tr:nth-child(even) td { /* Was #fafbfc (near-white stripe) — invisible on dark. Faint white tint. */ background: rgba(255, 255, 255, 0.03); } :root[data-theme="dark"] .section-label--prompt { /* Cream/gold pair (#F0E4D0 bg, #7A5E1A text) → cream tint on dark with cream text. Preserves the deliberate warm signal of the prompt label. */ background: rgba(240, 228, 208, 0.12); color: #F0E4D0; } /* Account-menu border + divider use a literal #E4E8EC (slightly cooler than --line). Bring them in line with --line on dark so the popover has a coherent border colour. */ :root[data-theme="dark"] .account-menu { /* --surface is translucent in dark (rgba white .04), which let the page show through and made the menu hard to read. Use the opaque recessed surface so the dropdown is fully solid. */ background: var(--bg-deep); border-color: var(--line); } :root[data-theme="dark"] .account-menu__divider { border-top-color: var(--line); } /* Reserved: .account-menu__name-save (dark Gable button, white text) is dead code as of 2026-06-08 — the name-edit UI was removed. No dark override needed; if the button is reintroduced, give it var(--accent-cta) as fill. */ /* ==================================================================== 2. Reset & Base Styles ==================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--color-text-primary); background-color: var(--color-white); overflow-x: hidden; } /* ==================================================================== 3. Typography ==================================================================== */ h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--spacing-lg); } h2 { font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: var(--spacing-lg); } h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; margin-bottom: var(--spacing-md); } h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; margin-bottom: var(--spacing-md); } p { margin-bottom: var(--spacing-md); } small { font-size: 0.875rem; } a { color: var(--color-accent-2); text-decoration: none; transition: color var(--duration-normal) var(--ease-out); } a:hover { color: var(--color-accent-1-accessible); } /* ==================================================================== 4. Container & Layout Utilities ==================================================================== */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } .content-width { max-width: 680px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } /* ==================================================================== 5. Progress Bar ==================================================================== */ .progress-bar { width: 100%; height: 4px; background-color: var(--color-border); border-radius: 2px; overflow: hidden; margin-bottom: var(--spacing-lg); } .progress-bar__fill { height: 100%; background: var(--gradient-accent); border-radius: 2px; width: 0%; transition: width var(--duration-slow) var(--ease-out); position: relative; } .progress-bar__fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3)); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .progress-bar__label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); margin-top: var(--spacing-sm); } /* ==================================================================== 6. Badge ==================================================================== */ .badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background-color: var(--color-off-white); color: var(--color-text-secondary); } .badge--accent { background: var(--gradient-accent); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-accent-1); } .badge--success { background-color: rgba(23, 206, 149, 0.1); color: var(--color-meadow); } .badge--info { background-color: rgba(0, 177, 255, 0.1); color: var(--color-accent-2); } /* ==================================================================== 7. LANDING PAGE ==================================================================== */ /* ---- Hero Section ---- */ .hero { background: var(--gradient-hero); color: var(--color-white); padding: var(--spacing-2xl) var(--spacing-lg); text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(0, 255, 188, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 177, 255, 0.05) 0%, transparent 50%); pointer-events: none; } .hero__content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .hero__title { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-lg); color: var(--color-white); } .hero__subtitle { font-size: 1.125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin-bottom: var(--spacing-2xl); } .hero__progress { margin-bottom: var(--spacing-2xl); } .hero__stat { display: inline-block; margin: 0 var(--spacing-lg); color: var(--color-accent-1); } .hero__stat-number { display: block; font-size: 2rem; font-weight: 700; } .hero__stat-label { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); margin-top: var(--spacing-xs); } /* ---- Module Cards ---- */ .modules-section { padding: var(--spacing-2xl) var(--spacing-lg); } .modules-title { text-align: center; margin-bottom: var(--spacing-2xl); } .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-2xl); } /* "Everyone should know" divider (PLA-91). Full-width row inside .modules-grid separating the selected function's own module cards from the universal ones. grid-column spans every track so it breaks the flow rather than sitting in a column as a stray card. */ .xp-universal-divider { grid-column: 1 / -1; margin: var(--spacing-sm) 0 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted, var(--color-text-secondary)); } .module-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); transition: all var(--duration-normal) var(--ease-out); cursor: pointer; position: relative; overflow: hidden; } .module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-card-hover); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .module-card:hover { border-color: var(--color-accent-1-accessible); box-shadow: var(--shadow-md), var(--shadow-glow-subtle); transform: translateY(-4px); } .module-card:hover::before { opacity: 1; } .module-card__content { position: relative; z-index: 1; flex: 1; } .module-card__number { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-2); margin-bottom: var(--spacing-sm); } .module-card__title { font-size: 1.375rem; font-weight: 700; margin-bottom: var(--spacing-sm); color: var(--color-text-primary); line-height: 1.3; } .module-card__subtitle { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); line-height: 1.6; } .module-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .module-card__duration { display: flex; align-items: center; gap: var(--spacing-sm); } .module-card__lessons { display: flex; align-items: center; gap: var(--spacing-sm); } .module-card__progress { margin-bottom: var(--spacing-md); } .module-card__cta { align-self: flex-start; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-off-white); color: var(--color-accent-2); border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all var(--duration-normal) var(--ease-out); } .module-card__cta:hover { color: var(--color-accent-1-accessible); } /* ---- Footer ---- */ footer { background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-xl) var(--spacing-lg); text-align: center; border-top: 1px solid var(--color-border-dark); } footer p { font-size: 0.875rem; opacity: 0.85; margin-bottom: var(--spacing-sm); } footer a { color: var(--color-accent-1); } footer a:hover { color: var(--color-white); } /* ==================================================================== 8. MODULE PAGE — Layout ==================================================================== */ .module-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; background-color: var(--color-off-white); } .module-sidebar { background: var(--color-white); border-right: 1px solid var(--color-border); overflow-y: auto; position: sticky; top: 0; max-height: 100vh; padding: var(--spacing-lg); } .module-sidebar__header { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .module-sidebar__title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--spacing-md); } .module-sidebar__progress { margin-bottom: var(--spacing-lg); } .module-content { overflow-y: auto; background-color: var(--color-off-white); } /* ---- Lesson Navigation ---- */ .lesson-nav { list-style: none; } .lesson-nav-item { padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-normal) var(--ease-out); border-left: 3px solid transparent; background-color: transparent; color: var(--color-text-secondary); } .lesson-nav-item:hover { background-color: var(--color-off-white); border-left-color: var(--color-accent-2); } .lesson-nav-item--in-progress { background-color: rgba(0, 122, 94, 0.05); border-left-color: var(--color-accent-1-accessible); color: var(--color-accent-1-accessible); font-weight: 600; } .lesson-nav-item--completed { background-color: rgba(23, 206, 149, 0.05); border-left-color: var(--color-meadow); color: var(--color-meadow); } .lesson-nav-item--completed::before { content: '✓ '; font-weight: 700; } .lesson-nav-item__badge { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-border); margin-right: var(--spacing-sm); vertical-align: middle; flex-shrink: 0; } /* ==================================================================== 9. MODULE PAGE — Video Player ==================================================================== */ .video-player { position: sticky; top: 0; z-index: 10; width: 100%; background-color: var(--color-primary); padding: var(--spacing-lg); transition: all var(--duration-normal) var(--ease-out); } .video-player__container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 48px; background-color: var(--color-surface-dark); } .video-player__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Floating state (shrunk to corner on scroll) */ .video-player.floating { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); width: 150px; padding: 0; background: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .video-player.floating .video-player__container { padding-bottom: 56.25%; margin: 0; } .video-player.floating .video-player__minimize { display: block; } .video-player__minimize { display: none; position: absolute; top: var(--spacing-md); right: var(--spacing-md); z-index: 20; width: 32px; height: 32px; background: var(--color-primary); border: none; border-radius: var(--radius-md); color: var(--color-white); cursor: pointer; font-size: 1rem; transition: all var(--duration-normal) var(--ease-out); } .video-player__minimize:hover { background: var(--color-accent-1); } /* ==================================================================== 10. MODULE PAGE — Content Sections ==================================================================== */ .module-header { background: var(--color-white); padding: var(--spacing-2xl) var(--spacing-lg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 9; } .module-header__breadcrumb { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--spacing-md); } .module-header__title { margin-bottom: var(--spacing-md); } .module-header__meta { display: flex; gap: var(--spacing-md); align-items: center; font-size: 0.875rem; color: var(--color-text-muted); } .content-main { padding: var(--spacing-2xl) var(--spacing-lg); background: var(--color-off-white); max-width: 900px; margin: 0 auto; } .content-main > * + * { margin-top: var(--spacing-xl); } /* ---- Unavailable Lesson / Course Panel ---- */ .lesson-locked-panel { margin: var(--spacing-2xl) auto; padding: var(--spacing-2xl) var(--spacing-xl); background: #F4F6F8; border: 1px solid #E0E5EA; border-radius: var(--radius-lg); box-shadow: none; text-align: center; max-width: 520px; } .lesson-locked-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--spacing-md); border-radius: 50%; background: rgba(27, 47, 60, 0.06); color: var(--ink-soft); } .lesson-locked-icon svg { width: 26px; height: 26px; } .lesson-locked-panel--in_development .lesson-locked-icon { background: rgba(0, 113, 161, 0.08); color: var(--color-accent-2-accessible); } .lesson-locked-heading { font-size: 1.35rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.01em; margin-bottom: var(--spacing-sm); } .lesson-locked-body { color: var(--color-text-secondary); line-height: 1.6; margin: 0 auto; max-width: 380px; } /* Admin view marker above normally-locked content (superadmin only) */ .lesson-admin-banner { display: flex; align-items: center; gap: var(--spacing-sm); margin: 0 0 var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-md); background: rgba(0, 113, 161, 0.08); border: 1px solid rgba(0, 113, 161, 0.25); border-radius: var(--radius-md); color: var(--color-accent-2-accessible); font-size: 0.85rem; font-weight: 600; } .lesson-admin-banner-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .lesson-admin-banner-icon svg { width: 16px; height: 16px; } /* Lock badge in the lesson sidebar nav */ .nav-lesson-lock { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: var(--ink-muted); opacity: 0.8; } .nav-lesson-lock svg { width: 14px; height: 14px; } /* ---- Text Section ---- */ .section-text { max-width: 680px; line-height: 1.8; } .section-text p { margin-bottom: var(--spacing-lg); } .section-text ul, .section-text ol { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .section-text li { margin-bottom: var(--spacing-md); } .section-text table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-xl); font-size: 0.95rem; } .section-text th, .section-text td { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); text-align: left; vertical-align: top; } .section-text th { background: var(--color-off-white); font-weight: 600; color: var(--color-text-primary); } .section-text tr:nth-child(even) td { background: #fafbfc; } /* ---- Stat Cards ---- */ .section-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-xl) 0; } .stat-card { padding: var(--spacing-lg); background: var(--gradient-stat); border-radius: var(--radius-lg); color: var(--color-white); text-align: center; box-shadow: var(--shadow-md); transition: all var(--duration-normal) var(--ease-out); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .stat-card__number { font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: var(--spacing-sm); background: var(--gradient-accent); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-accent-1); } .stat-card__label { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); } /* ---- Interactive Section ---- */ .section-interactive { margin: var(--spacing-xl) 0; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .section-interactive__label { padding: var(--spacing-lg); background: var(--color-off-white); border-bottom: 1px solid var(--color-border); font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .section-interactive__container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: var(--color-primary); } .section-interactive__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ---- Prompt Block ---- */ /* Note: .section-prompt and inner classes defined in Section 13 below */ /* ---- Tip Section ---- */ .section-tip { padding: var(--spacing-lg); background: var(--color-off-white); border-left: 4px solid var(--color-accent-1-accessible); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: var(--spacing-xl) 0; } .section-tip__label { font-size: 0.875rem; font-weight: 700; color: var(--color-accent-1-accessible); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-sm); } .section-tip__content { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); } /* ---- Callout Section ---- */ .section-callout { padding: var(--spacing-lg); background: linear-gradient(135deg, rgba(0, 177, 255, 0.08) 0%, rgba(0, 255, 188, 0.08) 100%); border: 1px solid rgba(0, 177, 255, 0.2); border-radius: var(--radius-lg); margin: var(--spacing-xl) 0; display: flex; gap: var(--spacing-lg); } .section-callout__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-weight: 700; font-size: 1.25rem; } .section-callout__content { flex: 1; } .section-callout__title { font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--spacing-sm); } .section-callout__text { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); } /* "Watch first" prerequisites block — internal-tier only for now. Sits at the top of the lesson body, above the first section. Quiet card so it frames the lesson without competing with the title. */ .lesson-prerequisites { margin: 0 0 var(--spacing-xl); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-off-white); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent-2); border-radius: var(--radius-md); } .lesson-prerequisites__heading { margin: 0 0 var(--spacing-sm); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .lesson-prerequisites__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .lesson-prerequisites__link { display: inline-flex; align-items: baseline; gap: var(--spacing-sm); color: var(--color-text-primary); text-decoration: none; font-weight: 500; } .lesson-prerequisites__link:hover .lesson-prerequisites__title { text-decoration: underline; } /* Transient placeholder while an entitled viewer's gated lesson body is fetched from /api/lesson-content. */ .lesson-loading-body { padding: var(--spacing-xl) 0; color: var(--color-text-muted); font-size: 0.95rem; } .lesson-prerequisites__kind { flex-shrink: 0; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-2-accessible); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.1rem 0.4rem; } /* ==================================================================== 11. QUIZ SECTION ==================================================================== */ .section-quiz { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; box-shadow: var(--shadow-sm); } .section-quiz__question { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--spacing-lg); color: var(--color-text-primary); } .quiz-options { display: flex; flex-direction: column; gap: var(--spacing-md); } .quiz-option { padding: var(--spacing-md) var(--spacing-lg); background: var(--color-off-white); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-normal) var(--ease-out); font-weight: 500; position: relative; overflow: hidden; /*