/* ========================================================================== Divide and Conquer Math — Phase 1 design system -------------------------------------------------------------------------- Brand: bright cyan accent on near-black ground (dark default), with a light theme that flips background and text color but keeps the same cyan accent. Theme is controlled via a `data-theme` attribute on . -------------------------------------------------------------------------- File map: styles.css ← this file (shared design system) index.html ← homepage (class picker) class.html ← class landing (chapter grid) section.html ← section page (chapter rail + video list) app.js ← theme toggle, chapter rail expand/collapse, batch mode ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root, [data-theme="dark"] { --bg: #000000; --bg-surface: #131313; /* cards, video rows */ --bg-elevated: #0C0C0C; /* chapter rail panel */ --border: #1F1F1F; --border-strong: #2A2A2A; --text-primary: #FFFFFF; --text-secondary: #BBBBBB; --text-muted: #888888; --text-faint: #7A7A7A; /* a11y: was #555 (2.8:1 on black) */ --accent: #2BB5E8; /* brand cyan */ --accent-text: #2BB5E8; /* same on dark; differs on light */ --accent-on-bg: #000000; /* text color when sitting on accent fill */ --accent-tint: rgba(43, 181, 232, 0.14); --accent-tint-soft: rgba(43, 181, 232, 0.06); } [data-theme="light"] { --bg: #FAFAF6; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --border: #E2E0D8; --border-strong: #C9C7BE; --text-primary: #1A1A1A; --text-secondary: #555555; --text-muted: #6E6E6E; /* a11y: was #888 (3.4:1 on light bg) */ --text-faint: #707070; /* a11y: was #AAA (2.2:1) */ --accent: #2BB5E8; /* same vibrant cyan for buttons/borders */ --accent-text: #185FA5; /* darker for body-text contrast on white */ --accent-on-bg: #08222E; /* a11y: was #FFF — white on cyan was 2.4:1; this dark ink hits 6.9:1 on the accent */ --accent-tint: rgba(43, 181, 232, 0.14); --accent-tint-soft: rgba(43, 181, 232, 0.06); } /* ------------------------------------------------------------------ reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } /* ------------------------------------------------------------------ chrome */ .brand-row { display: flex; align-items: center; gap: 16px; padding: 18px 24px 8px; } .brand { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 700; letter-spacing: 0.005em; color: var(--text-primary); flex: 1; } /* Larger displays: let the wordmark carry more presence than the compact mobile bar (.mobile-bar .brand pins its own size below, unaffected). */ @media (min-width: 900px) { .brand-row .brand { font-size: 34px; } } .brand a:hover { color: var(--accent-text); } .nav-row { padding: 8px 24px 16px; display: flex; flex-wrap: wrap; gap: 14px 22px; font-family: Georgia, "Times New Roman", serif; font-size: 13px; border-bottom: 0.5px solid var(--border); } .nav-row a { white-space: nowrap; color: var(--text-primary); } .nav-row a:hover { color: var(--accent-text); } /* --------------------------------------------------------------------------- Hover dropdowns on class nav items Each class link is wrapped in a .nav-item. Hovering the wrapper reveals a .nav-dropdown listing the chapters for that class. Click a chapter to land on its first section page. --------------------------------------------------------------------------- */ .nav-item { position: relative; } .nav-item > a::after { content: ''; display: inline-block; margin-left: 4px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; vertical-align: middle; transform: translateY(-1px); } .nav-dropdown { position: absolute; top: 100%; left: -6px; margin-top: 4px; display: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; min-width: 260px; max-width: 360px; padding: 6px 0; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.45); font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Source Sans Pro', 'Segoe UI', sans-serif; font-size: 13px; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: block; } .nav-dropdown a { display: block; padding: 7px 14px; color: var(--text-primary); text-decoration: none; white-space: normal; /* allow long chapter names to wrap inside the dropdown */ line-height: 1.35; } .nav-dropdown a:hover { background: var(--bg-card); color: var(--accent-text); } .nav-dropdown .dd-eyebrow { display: block; padding: 8px 14px 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-family: Georgia, "Times New Roman", serif; } .nav-dropdown .dd-divider { height: 1px; margin: 4px 0; background: var(--border); } .nav-dropdown .dd-open-all { display: block; padding: 7px 14px; font-size: 12px; color: var(--accent-text); } .crumb { padding: 18px 24px 0; font-size: 12px; color: var(--text-muted); } .crumb a { color: var(--accent-text); } .crumb a:hover { text-decoration: underline; } /* ----------------- mobile chrome ------------------ */ .mobile-bar { display: none; } .burger { width: 24px; height: 24px; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; background: transparent; border: 0; padding: 0; } .burger span { display: block; height: 2px; background: var(--text-primary); border-radius: 1px; } /* ------------------------------------------------------------------ hero */ .hero { padding: 36px 24px 40px; display: flex; align-items: center; gap: 28px; } .hero-photo { flex: 1; background: var(--bg-surface); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: 24px; } .hero-photo-cap { font-size: 11px; color: var(--text-muted); margin-top: 10px; letter-spacing: 0.04em; } .hero-text { flex: 1; } .eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; margin-bottom: 14px; } .hero-title { font-family: Georgia, "Times New Roman", serif; font-size: 46px; line-height: 1.05; color: var(--text-primary); letter-spacing: -0.005em; margin: 0; } .hero-sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 16px 0 0; max-width: 340px; } /* ------------------------------------------------------------------ class hero (class.html) */ .class-hero { padding: 22px 24px 30px; text-align: center; border-bottom: 0.5px solid var(--border); } .class-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; margin-bottom: 8px; } .class-title { font-family: Georgia, serif; font-size: 38px; line-height: 1.1; color: var(--text-primary); letter-spacing: -0.005em; margin: 0; } .class-desc { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 14px auto 18px; max-width: 460px; } .class-stats { display: inline-flex; align-items: center; gap: 18px; padding: 8px 18px; border: 0.5px solid var(--accent); border-radius: 30px; font-size: 12px; color: var(--accent-text); } .class-stats .dot { width: 3px; height: 3px; background: var(--accent); border-radius: 50%; } /* ------------------------------------------------------------------ section heads */ .section-head { padding: 32px 24px 14px; } .section-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; margin-bottom: 6px; } .section-title { font-family: Georgia, serif; font-size: 22px; color: var(--text-primary); line-height: 1.2; margin: 0; } /* ------------------------------------------------------------------ wavy underline */ .wavy { display: block; margin-top: 8px; } /* ------------------------------------------------------------------ class / chapter cards */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 8px 24px 32px; } .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-primary); transition: border-color 0.15s ease, background 0.15s ease; } .card:hover { border-color: var(--accent); background: var(--accent-tint-soft); } .card-text { flex: 1; min-width: 0; } .card-title { font-family: Georgia, serif; font-size: 16px; line-height: 1.2; margin-bottom: 4px; } .card-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; } .card-arrow svg { width: 14px; height: 14px; color: var(--accent-text); } /* ----------- chapter card variant (class.html) ---------- */ .ch-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px; align-items: stretch; } .ch-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; display: flex; align-items: center; justify-content: space-between; } .ch-pill { background: var(--accent-tint); color: var(--accent-text); padding: 3px 8px; border-radius: 4px; font-size: 9.5px; letter-spacing: 0.08em; } .ch-title { font-family: Georgia, serif; font-size: 17px; line-height: 1.25; color: var(--text-primary); margin: 0; } .ch-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; flex: 1; } .ch-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 0.5px solid var(--border); font-size: 11.5px; color: var(--text-muted); } .ch-card.is-resume { background: var(--accent-tint-soft); border-color: var(--accent); } /* ------------------------------------------------------------------ buttons */ .btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 6px; background: var(--accent); color: var(--accent-on-bg); font-size: 13px; font-weight: 500; border: 0; cursor: pointer; } .btn-primary svg { width: 14px; height: 14px; } .btn-primary:hover { filter: brightness(1.1); } .btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 6px; background: transparent; color: var(--accent-text); border: 1px solid var(--accent); font-size: 13px; cursor: pointer; } .btn-ghost { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 6px; background: transparent; color: var(--text-muted); border: 0; font-size: 12.5px; cursor: pointer; } .btn-ghost:hover { color: var(--text-primary); } /* ------------------------------------------------------------------ section page layout */ .layout { display: flex; padding: 18px 24px; gap: 18px; } .rail { width: 240px; flex-shrink: 0; background: var(--bg-elevated); border-radius: 8px; padding: 12px 0 8px; } .rail-title { font-family: Georgia, serif; font-size: 15px; padding: 0 14px 8px; font-weight: 500; color: var(--text-primary); } .rail-chapter { display: flex; align-items: center; padding: 8px 14px; font-size: 12px; line-height: 1.4; color: var(--text-muted); cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; } .rail-chapter:hover { color: var(--text-primary); } .rail-chapter .chev { margin-left: auto; opacity: 0.5; flex-shrink: 0; display: flex; align-items: center; } .rail-chapter .chev svg { width: 10px; height: 10px; } .rail-chapter.is-active { color: var(--text-primary); background: var(--accent-tint); border-left: 3px solid var(--accent); padding-left: 11px; font-weight: 500; } .rail-chapter.is-active .chev { opacity: 1; } .rail-section { display: block; padding: 6px 14px 6px 28px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); background: var(--accent-tint-soft); } .rail-section:hover { color: var(--text-primary); } .rail-section.is-active { color: var(--text-primary); background: var(--accent-tint); font-weight: 500; } .rail-section.is-study { font-style: italic; } .rail-sections { display: none; } .rail-chapter.is-active + .rail-sections { display: block; } .content { flex: 1; min-width: 0; padding: 0; } /* ----------- section content header ---------- */ .s-eyebrow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; } .s-title { font-family: Georgia, serif; font-size: 22px; line-height: 1.2; margin: 6px 0 4px; color: var(--text-primary); } .s-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px; } /* ----------- batch bar (select-mode) ---------- */ .batch-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; flex-wrap: wrap; font-size: 12.5px; background: var(--accent-tint-soft); border: 1px solid var(--accent); color: var(--text-primary); } .batch-bar.is-hidden { display: none; } .batch-count { color: var(--accent-text); font-weight: 500; } .batch-bar .spacer { flex: 1; } .batch-bar .btn-primary { padding: 6px 12px; font-size: 12.5px; } .select-all { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--text-primary); cursor: pointer; } .select-all .checkbox { display: inline-flex; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--text-muted); align-items: center; justify-content: center; } .select-all.is-checked .checkbox { background: var(--text-primary); border-color: var(--text-primary); } .select-all.is-checked .checkbox svg { width: 10px; height: 10px; stroke: var(--bg); } /* ----------- video rows ---------- */ .vrow { display: flex; gap: 14px; padding: 12px; border-radius: 8px; margin-bottom: 8px; align-items: flex-start; background: var(--bg-surface); cursor: pointer; border: 1px solid transparent; } .vrow:hover { border-color: var(--accent); } .vrow-cb { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; margin-top: 24px; display: none; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--text-muted); } .vrow-cb svg { width: 11px; height: 11px; display: none; } .is-batch-mode .vrow-cb { display: flex; } .is-batch-mode .vrow-cb.is-checked { background: var(--accent); border-color: var(--accent); } .is-batch-mode .vrow-cb.is-checked svg { display: block; stroke: var(--accent-on-bg); } .thumb { width: 124px; height: 70px; border-radius: 4px; flex-shrink: 0; background: var(--border-strong); display: flex; align-items: center; justify-content: center; position: relative; } .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .play { width: 30px; height: 30px; border-radius: 50%; background: var(--text-primary); display: flex; align-items: center; justify-content: center; position: absolute; } .play svg { width: 12px; height: 12px; margin-left: 2px; fill: var(--bg); } .vinfo { flex: 1; min-width: 0; padding-top: 2px; } .vtype { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--accent-text); margin-bottom: 4px; } .vh { font-size: 14px; line-height: 1.35; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); } .vnotes { font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; color: var(--text-primary); } .vnotes:hover { color: var(--accent-text); } .vnotes svg { width: 11px; height: 13px; } /* ------------------------------------------------------------------ footer */ .footer { padding: 18px 24px 22px; border-top: 0.5px solid var(--border); margin-top: 16px; display: flex; align-items: center; justify-content: space-between; font-family: Georgia, serif; font-size: 13px; color: var(--text-muted); } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 0.5px solid var(--accent); border-radius: 20px; background: transparent; color: var(--accent-text); font-family: -apple-system, system-ui, sans-serif; font-size: 11.5px; } .theme-toggle svg { width: 13px; height: 13px; } .theme-toggle:hover { background: var(--accent-tint-soft); } /* ----------------- mobile section selector (replaces rail) ------------------ */ .mobile-section-selector { display: none; } /* ============================================================================ Mobile (≤ 720px) ============================================================================ */ @media (max-width: 720px) { /* hide desktop chrome */ .nav-row { display: none; } .brand-row { display: none; } /* show mobile chrome */ .mobile-bar { display: flex; align-items: center; padding: 14px 16px; border-bottom: 0.5px solid var(--border); } .mobile-bar .brand { font-size: 16px; flex: 1; margin: 0; } .crumb { padding: 10px 16px 0; font-size: 11px; } /* hero: stack */ .hero { padding: 18px 16px 10px; flex-direction: column; gap: 18px; text-align: center; } .hero-photo { min-height: 200px; padding: 18px; } .hero-text { text-align: center; } .hero-title { font-size: 30px; } .hero-sub { max-width: none; margin-left: auto; margin-right: auto; } /* class hero */ .class-hero { padding: 18px 16px 22px; } .class-title { font-size: 28px; } .class-stats { gap: 12px; padding: 6px 14px; flex-wrap: wrap; } /* card grid → single column */ .card-grid { grid-template-columns: 1fr; padding: 8px 16px 18px; gap: 8px; } /* section page: hide rail, show selector */ .layout { flex-direction: column; padding: 0; gap: 0; } .rail { display: none; } .mobile-section-selector { display: flex; align-items: center; margin: 12px 16px; padding: 12px 14px; background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 8px; width: calc(100% - 32px); text-align: left; color: var(--text-primary); } .mobile-section-selector .text { flex: 1; } .mobile-section-selector .ms-class { font-size: 10px; letter-spacing: 0.1em; color: var(--accent-text); text-transform: uppercase; font-weight: 500; } .mobile-section-selector .ms-section { font-family: Georgia, serif; font-size: 15px; margin-top: 2px; } .mobile-section-selector .chev svg { width: 14px; height: 14px; color: var(--accent-text); } .content { padding: 6px 16px 18px; } /* batch button: full width */ .content > .btn-primary { width: 100%; justify-content: center; } /* video rows: smaller thumbnail */ .thumb { width: 88px; height: 50px; } .play { width: 24px; height: 24px; } .vh { font-size: 12.5px; } /* footer: keep it simple */ .footer { padding: 14px 16px 16px; font-size: 11px; } } /* ========================================================================== ADDITIONS 2026-05-19 — section-level resources, inline video player, vrow restructure, mobile drawers, external-link tags ========================================================================== */ /* Section-level resources panel (1635 stats — Guided Notes + Excel labs on tbl_sections) */ .section-resources { margin: 12px 0 14px; padding: 12px 14px; background: var(--accent-tint-soft); border: 0.5px solid var(--border); border-left: 2px solid var(--accent); border-radius: 8px; } .sr-eyebrow { font-size: 10px; letter-spacing: 0.14em; color: var(--accent-text); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; } .sr-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .sr-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 12.5px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 6px; transition: border-color 0.12s ease, color 0.12s ease; } .sr-button:hover { border-color: var(--accent); color: var(--accent-text); } .sr-button svg { width: 12px; height: 14px; flex-shrink: 0; } .sr-ext-tag, .ext-tag { display: inline-block; margin-left: 4px; padding: 1px 5px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 0.5px solid var(--border-strong); border-radius: 3px; vertical-align: middle; } /* Section description (optional, between title and "N lessons. Pick what you need.") */ .s-desc { font-size: 13px; color: var(--text-secondary); margin: 4px 0 10px; max-width: 760px; } /* Video row restructure — vrow-main wraps the original row content; vrow-player is the inline-player slot that lives below it when expanded. */ .vrow { display: block; } .vrow-main { display: grid; grid-template-columns: 0 124px 1fr; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid var(--border); transition: grid-template-columns 0.16s ease; } .is-batch-mode .vrow-main { grid-template-columns: 24px 124px 1fr; cursor: pointer; } .vrow-main .vrow-cb { width: 0; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: transparent; background: transparent; overflow: hidden; transition: width 0.16s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .is-batch-mode .vrow-main .vrow-cb { width: 18px; } .vrow-main .vrow-cb svg { width: 12px; height: 12px; } .vrow-main .vrow-cb.is-checked { background: var(--accent); border-color: var(--accent); color: var(--accent-on-bg); } .thumb { width: 124px; height: 70px; background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface)); border: 0.5px solid var(--border-strong); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--accent-text); padding: 0; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .thumb:hover { border-color: var(--accent); transform: translateY(-1px); } .thumb .play { width: 30px; height: 30px; background: var(--accent); color: var(--accent-on-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .thumb .play svg { width: 12px; height: 12px; } .vlinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .vnotes-extra { opacity: 0.86; } .vnotes-extra:hover { opacity: 1; } /* Inline video player */ .vrow-player { max-height: 0; overflow: hidden; transition: max-height 0.22s ease; margin: 0; } .vrow.is-playing .vrow-player { max-height: 600px; margin: 8px 0 14px; border-bottom: 0.5px solid var(--border); padding-bottom: 14px; } .player-aspect { position: relative; width: 100%; max-width: 780px; margin: 0 auto; /* aspect-ratio (not %-padding): percentage padding resolves against the PARENT width, which made the player taller than 16:9 on wide screens and YouTube cropped the video to fill it. */ aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; border: 0.5px solid var(--border-strong); } .player-aspect iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .player-empty { padding: 14px 16px; text-align: center; color: var(--text-secondary); background: var(--bg-elevated); border: 0.5px dashed var(--border-strong); border-radius: 8px; font-size: 12.5px; } .vrow.is-playing .thumb { border-color: var(--accent); } .vrow.is-playing .thumb .play { background: var(--text-muted); } /* ------------------------------------------------------- mobile hamburger drawer */ .nav-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } .nav-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 0.18s ease, visibility 0s linear 0s; } .nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .nav-drawer-panel { position: absolute; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--bg-elevated); border-left: 0.5px solid var(--border-strong); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35); } .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 0.5px solid var(--border); } .nav-drawer-brand { font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--accent-text); } .nav-drawer-close { width: 32px; height: 32px; background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .nav-drawer-close svg { width: 14px; height: 14px; } .nav-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; } .nav-drawer-item { display: block; padding: 12px 18px; font-size: 14px; color: var(--text-primary); border-bottom: 0.5px solid var(--border); } .nav-drawer-item:hover { background: var(--accent-tint-soft); color: var(--accent-text); } .nav-drawer-sub { font-size: 12.5px; color: var(--text-secondary); } body.drawer-open { overflow: hidden; } /* ------------------------------------------------------- mobile section-selector drawer */ .mss-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } .mss-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 0.18s ease, visibility 0s linear 0s; } .mss-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .mss-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; background: var(--bg-elevated); border-top: 0.5px solid var(--border-strong); border-top-left-radius: 14px; border-top-right-radius: 14px; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.22s ease; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); } .mss-drawer.is-open .mss-sheet { transform: translateY(0); } .mss-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--border); } .mss-title { font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--accent-text); } .mss-close { width: 30px; height: 30px; background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .mss-close svg { width: 13px; height: 13px; } .mss-body { flex: 1; overflow-y: auto; padding: 6px 0 12px; } .mss-chapter { border-bottom: 0.5px solid var(--border); } .mss-chapter-head { padding: 11px 18px; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; } .mss-chapter:hover .mss-chapter-head { background: var(--accent-tint-soft); } .mss-sections { max-height: 0; overflow: hidden; transition: max-height 0.18s ease; } .mss-chapter.is-open .mss-sections { max-height: 800px; padding-bottom: 6px; } .mss-section { display: block; padding: 9px 28px; font-size: 12.5px; color: var(--text-secondary); } .mss-section:hover { color: var(--accent-text); background: var(--accent-tint-soft); } .mss-section.is-active { color: var(--accent-text); border-left: 2px solid var(--accent); padding-left: 26px; font-weight: 500; } /* Hide drawer triggers above mobile breakpoint */ @media (min-width: 721px) { .nav-drawer, .mss-drawer { display: none !important; } } /* When in a small viewport, video row gets a slightly tighter thumb to leave room for the inline player below it. */ @media (max-width: 720px) { .vrow-main { grid-template-columns: 0 88px 1fr; gap: 10px; } .is-batch-mode .vrow-main { grid-template-columns: 22px 88px 1fr; } .thumb { width: 88px; height: 50px; } .thumb .play { width: 24px; height: 24px; } .vlinks { gap: 8px; } } /* ========================================================================== ADDITIONS 2026-05-19 — section-level resources, inline video player, vrow restructure, mobile drawers, external-link tags ========================================================================== */ .section-resources { margin: 12px 0 14px; padding: 12px 14px; background: var(--accent-tint-soft); border: 0.5px solid var(--border); border-left: 2px solid var(--accent); border-radius: 8px; } .sr-eyebrow { font-size: 10px; letter-spacing: 0.14em; color: var(--accent-text); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; } .sr-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .sr-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 12.5px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 6px; transition: border-color 0.12s ease, color 0.12s ease; } .sr-button:hover { border-color: var(--accent); color: var(--accent-text); } .sr-button svg { width: 12px; height: 14px; flex-shrink: 0; } .sr-ext-tag, .ext-tag { display: inline-block; margin-left: 4px; padding: 1px 5px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 0.5px solid var(--border-strong); border-radius: 3px; vertical-align: middle; } .s-desc { font-size: 13px; color: var(--text-secondary); margin: 4px 0 10px; max-width: 760px; } .vrow { display: block; } .vrow-main { display: grid; grid-template-columns: 0 124px 1fr; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 0.5px solid var(--border); transition: grid-template-columns 0.16s ease; } .is-batch-mode .vrow-main { grid-template-columns: 24px 124px 1fr; cursor: pointer; } .vrow-main .vrow-cb { width: 0; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: transparent; background: transparent; overflow: hidden; transition: width 0.16s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .is-batch-mode .vrow-main .vrow-cb { width: 18px; } .vrow-main .vrow-cb svg { width: 12px; height: 12px; } .vrow-main .vrow-cb.is-checked { background: var(--accent); border-color: var(--accent); color: var(--accent-on-bg); } .thumb { width: 124px; height: 70px; background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface)); border: 0.5px solid var(--border-strong); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--accent-text); padding: 0; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .thumb:hover { border-color: var(--accent); transform: translateY(-1px); } .thumb .play { width: 30px; height: 30px; background: var(--accent); color: var(--accent-on-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .thumb .play svg { width: 12px; height: 12px; } .vlinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .vnotes-extra { opacity: 0.86; } .vnotes-extra:hover { opacity: 1; } .vrow-player { max-height: 0; overflow: hidden; transition: max-height 0.22s ease; margin: 0; } .vrow.is-playing .vrow-player { max-height: 600px; margin: 8px 0 14px; border-bottom: 0.5px solid var(--border); padding-bottom: 14px; } .player-aspect { position: relative; width: 100%; max-width: 780px; margin: 0 auto; /* aspect-ratio (not %-padding): percentage padding resolves against the PARENT width, which made the player taller than 16:9 on wide screens and YouTube cropped the video to fill it. */ aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; border: 0.5px solid var(--border-strong); } .player-aspect iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .player-empty { padding: 14px 16px; text-align: center; color: var(--text-secondary); background: var(--bg-elevated); border: 0.5px dashed var(--border-strong); border-radius: 8px; font-size: 12.5px; } .vrow.is-playing .thumb { border-color: var(--accent); } .vrow.is-playing .thumb .play { background: var(--text-muted); } .nav-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } .nav-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 0.18s ease, visibility 0s linear 0s; } .nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .nav-drawer-panel { position: absolute; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--bg-elevated); border-left: 0.5px solid var(--border-strong); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35); } .nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 0.5px solid var(--border); } .nav-drawer-brand { font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--accent-text); } .nav-drawer-close { width: 32px; height: 32px; background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .nav-drawer-close svg { width: 14px; height: 14px; } .nav-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; } .nav-drawer-item { display: block; padding: 12px 18px; font-size: 14px; color: var(--text-primary); border-bottom: 0.5px solid var(--border); } .nav-drawer-item:hover { background: var(--accent-tint-soft); color: var(--accent-text); } .nav-drawer-sub { font-size: 12.5px; color: var(--text-secondary); } body.drawer-open { overflow: hidden; } .mss-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } .mss-drawer.is-open { visibility: visible; opacity: 1; transition: opacity 0.18s ease, visibility 0s linear 0s; } .mss-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .mss-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; background: var(--bg-elevated); border-top: 0.5px solid var(--border-strong); border-top-left-radius: 14px; border-top-right-radius: 14px; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.22s ease; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4); } .mss-drawer.is-open .mss-sheet { transform: translateY(0); } .mss-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--border); } .mss-title { font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--accent-text); } .mss-close { width: 30px; height: 30px; background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .mss-close svg { width: 13px; height: 13px; } .mss-body { flex: 1; overflow-y: auto; padding: 6px 0 12px; } .mss-chapter { border-bottom: 0.5px solid var(--border); } .mss-chapter-head { padding: 11px 18px; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; } .mss-chapter:hover .mss-chapter-head { background: var(--accent-tint-soft); } .mss-sections { max-height: 0; overflow: hidden; transition: max-height 0.18s ease; } .mss-chapter.is-open .mss-sections { max-height: 800px; padding-bottom: 6px; } .mss-section { display: block; padding: 9px 28px; font-size: 12.5px; color: var(--text-secondary); } .mss-section:hover { color: var(--accent-text); background: var(--accent-tint-soft); } .mss-section.is-active { color: var(--accent-text); border-left: 2px solid var(--accent); padding-left: 26px; font-weight: 500; } @media (min-width: 721px) { .nav-drawer, .mss-drawer { display: none !important; } } @media (max-width: 720px) { .vrow-main { grid-template-columns: 0 88px 1fr; gap: 10px; } .is-batch-mode .vrow-main { grid-template-columns: 22px 88px 1fr; } .thumb { width: 88px; height: 50px; } .thumb .play { width: 24px; height: 24px; } .vlinks { gap: 8px; } } /* ========================================================================== ADDITIONS 2026-07-08 — thumbnail-first video rows + play-mode toggle -------------------------------------------------------------------------- Every video row now shows its real YouTube thumbnail (img.youtube.com) instead of a bare play button. Clicking still expands the inline player below the row (the thumbnail hides while playing), unless the user flips the per-page "Play videos" toggle to open videos in a new tab instead. Overrides the 124x70 .thumb sizing from the earlier sections. ========================================================================== */ .vrow-main { grid-template-columns: 0 232px 1fr; } .is-batch-mode .vrow-main { grid-template-columns: 24px 232px 1fr; } .thumb { position: relative; width: 232px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; } .thumb .yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; /* hqdefault.jpg is 4:3 with letterbox bars — cover on a 16:9 box crops the bars away. */ object-fit: cover; display: block; } .thumb .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); opacity: 0.92; transition: opacity 0.12s ease, transform 0.12s ease; } .thumb:hover .play { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } /* Rows with no YouTube id keep the old gradient tile + centered button. */ .thumb.no-thumb .play { position: static; transform: none; box-shadow: none; } .thumb.no-thumb { display: flex; align-items: center; justify-content: center; } /* While the inline player is open the big thumbnail is redundant — collapse its grid column so the row tightens up. visibility (not display:none) keeps the thumb occupying its grid slot; removing it would shift the text into the zero-width column and scrunch it. */ .vrow.is-playing .vrow-main { grid-template-columns: 0 0 1fr; gap: 0; } .vrow.is-playing .thumb { visibility: hidden; width: 0; min-width: 0; border: 0; } /* ------------------------------------------------ play-mode toggle pill */ .play-mode { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 12px; color: var(--text-secondary); } .pm-opt { padding: 5px 12px; font-size: 12px; color: var(--text-secondary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 999px; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .pm-opt:hover { border-color: var(--accent); color: var(--accent-text); } .pm-opt.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-on-bg); font-weight: 600; } @media (max-width: 720px) { .vrow-main { grid-template-columns: 0 128px 1fr; } .is-batch-mode .vrow-main { grid-template-columns: 22px 128px 1fr; } .thumb { width: 128px; height: auto; } .thumb .play { width: 30px; height: 30px; } .vrow.is-playing .vrow-main { grid-template-columns: 0 0 1fr; gap: 0; } } /* ========================================================================== ADDITIONS 2026-07-08b — class-stats breathing room + static pages (About / Stickers / Contact) + contact form ========================================================================== */ /* More air between the items in the class hero stats pill. */ .class-stats { gap: 26px; padding: 9px 24px; } /* Two-column static content page: text left, media right; stacks on mobile. */ .static-page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; max-width: 1160px; margin: 34px auto 40px; padding: 0 22px; } .static-title { font-family: Georgia, 'Times New Roman', serif; font-size: 40px; font-weight: 700; margin: 0 0 18px; color: var(--text-primary); } .static-text p { font-size: 15px; line-height: 1.85; color: var(--text-secondary); margin: 0 0 16px; } .static-media { text-align: center; } .static-media img { max-width: 100%; height: auto; border-radius: 10px; } .sticker-strip { display: flex; flex-wrap: wrap; gap: 34px; align-items: center; justify-content: center; padding-top: 20px; } .sticker-strip img { width: min(300px, 42%); height: auto; border-radius: 0; } .sticker-strip img:first-child { transform: rotate(-5deg); } .sticker-strip img:last-child { transform: rotate(4deg); } /* ---------------------------------------------------------- contact form */ .contact-form { display: grid; gap: 16px; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cf-field { display: grid; gap: 6px; } .cf-field label { font-size: 12.5px; color: var(--text-secondary); } .cf-field label .req { color: var(--text-muted); font-size: 11px; } .cf-field input, .cf-field textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 6px; } .cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--accent); } .cf-field textarea { min-height: 130px; resize: vertical; } .cf-honeypot { position: absolute; left: -9999px; opacity: 0; } .cf-status { padding: 12px 14px; border-radius: 8px; font-size: 13.5px; border: 0.5px solid var(--border-strong); } .cf-status.ok { border-left: 3px solid var(--accent); color: var(--text-primary); } .cf-status.err { border-left: 3px solid #c0564f; color: var(--text-primary); } @media (max-width: 800px) { .static-page { grid-template-columns: 1fr; gap: 28px; } .cf-row { grid-template-columns: 1fr; } .static-title { font-size: 32px; } } /* ========================================================================== ADDITIONS 2026-07-08c — bigger play-mode toggle, batch-button spacing, whole-class batch panel, data-driven chapter labels ========================================================================== */ /* "Play videos:" toggle — larger and more obvious. */ .play-mode { font-size: 15px; gap: 10px; margin: 8px 0 18px; color: var(--text-primary); } .play-mode .pm-label { font-weight: 600; } .pm-opt { font-size: 14px; padding: 8px 16px; } /* Air between the batch-entry button and the first video row. */ #batch-enter { margin-bottom: 22px; } /* Whole-class print/download panel on the class page. */ .class-batch { max-width: 860px; margin: 26px auto 4px; padding: 14px 18px 8px; background: var(--accent-tint-soft); border: 0.5px solid var(--border); border-left: 2px solid var(--accent); border-radius: 8px; } .class-batch .cb-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: 6px; } .cb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--border); } .cb-row:first-of-type { border-top: 0; } .cb-label { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--text-primary); } .cb-label .cb-count { margin-left: 8px; font-size: 11.5px; color: var(--text-muted); } .cb-actions { display: flex; gap: 8px; } .cb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 12.5px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 6px; transition: border-color 0.12s ease, color 0.12s ease; } .cb-btn:hover { border-color: var(--accent); color: var(--accent-text); } /* Chapter-card eyebrow may be empty now (unnumbered entries like exam reviews) — keep its height so the RESUME pill still has a home. */ .ch-eyebrow { min-height: 15px; } /* ========================================================================== ADDITIONS 2026-07-08d — global type-size bump (~15%) for readability. Jen: base sizes were hard to read. Raises body text roughly +1.5-2px and small labels +1-1.5px across every component; big serif headings were already large and stay put. The @media block at the bottom re-tempers a few sizes on phones. ========================================================================== */ html, body { font-size: 15.5px; } /* chrome */ .nav-row { font-size: 15px; } .nav-dropdown { font-size: 14.5px; } .nav-dropdown .dd-eyebrow { font-size: 12px; } .nav-dropdown .dd-open-all { font-size: 13px; } .crumb { font-size: 13.5px; } .footer { font-size: 14px; } /* homepage */ .eyebrow { font-size: 12px; } .hero-sub { font-size: 16px; max-width: 400px; } .card-title { font-size: 18px; } .card-sub { font-size: 13.5px; } .section-eyebrow { font-size: 12.5px; } .section-title { font-size: 24px; } /* class page */ .class-eyebrow { font-size: 12.5px; } .class-desc { font-size: 16px; } .class-stats { font-size: 14px; } .ch-eyebrow { font-size: 12px; min-height: 17px; } .ch-title { font-size: 19px; } .ch-desc { font-size: 14px; } .ch-meta { font-size: 13px; } .ch-pill { font-size: 10.5px; } .class-batch .cb-eyebrow { font-size: 11px; } .cb-label { font-size: 15px; } .cb-label .cb-count { font-size: 12.5px; } .cb-btn { font-size: 14px; } /* section page */ .rail-title { font-size: 16.5px; } .rail-chapter { font-size: 14px; } .rail-section { font-size: 13.5px; } .s-eyebrow { font-size: 12px; } .s-title { font-size: 26px; } .s-desc { font-size: 15px; } .s-sub { font-size: 14px; } .sr-eyebrow { font-size: 11px; } .sr-button { font-size: 14px; } .play-mode { font-size: 16px; } .pm-opt { font-size: 15px; } .btn-primary { font-size: 14.5px; } .btn-ghost { font-size: 14px; } .batch-bar { font-size: 14px; } .batch-bar .btn-primary { font-size: 13.5px; } .vtype { font-size: 12px; } .vh { font-size: 16.5px; } .vnotes { font-size: 14px; } .player-empty { font-size: 14px; } .sr-ext-tag, .ext-tag { font-size: 10px; } /* drawers */ .nav-drawer-brand { font-size: 15px; } .nav-drawer-item { font-size: 15.5px; } .nav-drawer-sub { font-size: 14px; } .mss-title { font-size: 15px; } .mss-chapter-head { font-size: 14.5px; } .mss-section { font-size: 14px; } /* static pages + contact form */ .static-text p { font-size: 16.5px; } .cf-field label { font-size: 14px; } .cf-field input, .cf-field textarea { font-size: 15.5px; } .cf-status { font-size: 15px; } /* phones: temper the biggest jumps so lines still fit */ @media (max-width: 720px) { .nav-row { font-size: 14px; } .vh { font-size: 14.5px; } .s-title { font-size: 22px; } .card-title { font-size: 16.5px; } .ch-title { font-size: 17px; } } /* ========================================================================== ADDITIONS 2026-07-08e — stats pill clearance + bigger grey card text ========================================================================== */ /* The rounded stats pill was crowding the class title / wavy underline — give it real clearance. */ .class-stats { margin-top: 20px; } /* Grey chapter-card copy up a notch. */ .ch-desc { font-size: 15.5px; } .ch-meta { font-size: 14px; } /* ========================================================================== ADDITIONS 2026-07-08f — collapsible whole-class batch panel ========================================================================== */ .class-batch-cta { text-align: center; margin: 26px auto 4px; } .class-batch.is-collapsed { display: none; } .cb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .cb-close { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text-secondary); background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; transition: border-color 0.12s ease, color 0.12s ease; } .cb-close:hover { border-color: var(--accent); color: var(--accent-text); } .cb-close svg { width: 11px; height: 11px; } /* ========================================================================== ADDITIONS 2026-07-08g — feedback form select field ========================================================================== */ .cf-field select { width: 100%; padding: 10px 12px; font: inherit; font-size: 15.5px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 6px; } .cf-field select:focus { outline: none; border-color: var(--accent); } /* ============================================================ ADDITIONS 2026-07-08g — Phase 2 prototype: textbook picker (books.php) — search box + subject group headings ============================================================ */ .book-search-wrap { max-width: 620px; margin: 26px auto 8px; padding: 0 20px; } .book-search { width: 100%; padding: 13px 18px; font-size: 16px; font-family: inherit; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 10px; outline: none; } .book-search:focus { border-color: var(--accent); } .book-search-none { margin-top: 14px; text-align: center; color: var(--text-muted); font-size: 15px; } .book-search-none a { color: var(--accent-text); } .book-group-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 34px; } .book-group-count { color: var(--text-muted); font-size: 14px; white-space: nowrap; } /* ============================================================ ADDITIONS 2026-07-08h — Phase 2 prototype: accounts (utility bar, account.php screens) ============================================================ */ .utility-bar { display: flex; justify-content: flex-end; padding: 8px 28px 0; font-size: 13.5px; } .utility-bar a { color: var(--text-muted); text-decoration: none; } .utility-bar a:hover { color: var(--accent-text); } @media (max-width: 720px) { .utility-bar { display: none; } /* the drawer carries the sign-in link */ } .account-shell { max-width: 640px; margin: 34px auto; padding: 0 20px; } .acct-eyebrow { color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .acct-h1 { font-size: 30px; margin: 8px 0 10px; } .acct-accent { color: var(--accent-text); } .acct-sub { color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; margin: 0 0 14px; } .acct-sub a { color: var(--accent-text); } .acct-hint { color: var(--text-muted); font-size: 13px; margin-top: 6px; } .acct-form { margin-top: 18px; } .acct-alt { margin-top: 18px; color: var(--text-secondary); font-size: 14.5px; } .acct-alt a { color: var(--accent-text); } .acct-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12.5px; margin: 24px 0; } .acct-divider::before, .acct-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); } .acct-pass-details summary { cursor: pointer; color: var(--text-secondary); font-size: 14.5px; } .acct-pass-details[open] summary { color: var(--text-primary); } .acct-devlink { margin-top: 20px; padding: 14px 16px; border: 1.5px dashed var(--accent); border-radius: 10px; font-size: 13.5px; line-height: 1.6; word-break: break-all; background: var(--accent-tint-soft); } .acct-devlink a { color: var(--accent-text); } .acct-welcome { margin-bottom: 0; } .acct-section { margin-top: 28px; padding: 18px 20px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; } .acct-section h3 { margin: 0 0 4px; font-size: 17px; } .acct-section-sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 10px; } .acct-row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14.5px; } .acct-row:first-of-type { border-top: none; } .acct-label { flex: 0 0 200px; color: var(--text-muted); } .acct-value { flex: 1; color: var(--text-primary); } .acct-edit { color: var(--accent-text); text-decoration: none; white-space: nowrap; } .acct-danger { display: flex; gap: 14px; align-items: center; justify-content: space-between; } /* Signed-out page: sign UP (left) / sign IN (right) as two cards. */ .acct-shell-wide { max-width: 900px; } .acct-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; /* both cards the same height */ margin-top: 20px; } .acct-split-card { margin-top: 0; } @media (max-width: 720px) { .acct-split { grid-template-columns: 1fr; } } .acct-inline-form { margin: 0; } .acct-inline-form select { font-family: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); max-width: 150px; } .acct-star-class { font-weight: 700; font-size: 13.5px; color: var(--text-primary); margin-top: 14px; } .acct-coll { margin-bottom: 8px; } .acct-coll-item { padding-left: 22px; } .acct-join-form { margin-top: 14px; } .acct-purpose-form { display: grid; gap: 8px; } .acct-purpose-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; } .acct-purpose-opt input { accent-color: var(--accent); } .acct-delete { background: none; border: none; color: var(--text-muted); font-size: 13.5px; cursor: pointer; text-decoration: underline; font-family: inherit; } .acct-delete:hover { color: #d96c6c; } /* Settings page: fixed three-across layout (Dan 2026-07-19). Boxes in a row stretch to equal height (align-items:stretch) so their bottoms line up — tidier than the ragged masonry it replaced. row 1 Profile | What brings you here | My classes row 2 Saved for review (spans 2) | Your collections row 3 Teaching (full width) Danger row (sign out / delete) sits full-width below the grid. */ .acct-settings { max-width: 1060px; } .acct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; align-items: stretch; } .acct-grid .acct-section { margin-top: 0; } #saved { grid-column: span 2; } @media (max-width: 900px) { .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #saved { grid-column: 1 / -1; } } @media (max-width: 620px) { .acct-grid { grid-template-columns: 1fr; } #saved { grid-column: auto; } } /* Top row above the main grid. Students: one full-width box (Recently watched). Teachers: two side-by-side (Teaching | Recently watched), equal height. */ .acct-toprow { display: grid; gap: 16px; margin-top: 20px; align-items: stretch; } .acct-toprow-solo { grid-template-columns: 1fr; } .acct-toprow-split { grid-template-columns: 1fr 1fr; } .acct-toprow .acct-section { margin-top: 0; } @media (max-width: 620px) { .acct-toprow-split { grid-template-columns: 1fr; } } /* Recently-watched cards: 3 across when the box is full-width (student solo view); stacked when it's the narrow right half (teacher split). */ .acct-recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .acct-toprow-split .acct-recent-grid { grid-template-columns: 1fr; } .acct-recent-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); text-decoration: none; color: inherit; } .acct-recent-card:hover { border-color: var(--accent); } .acct-recent-play { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-tint-soft); color: var(--accent-text); font-size: 12px; } .acct-recent-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .acct-recent-meta b { font-size: 14px; line-height: 1.25; } .acct-recent-meta small { color: var(--text-muted); font-size: 12px; } .acct-recent-cta { flex: 0 0 auto; color: var(--accent-text); font-size: 13px; white-space: nowrap; } @media (max-width: 700px) { .acct-recent-grid { grid-template-columns: 1fr; } } /* Rows inside the narrower columns: the 200px fixed label won't fit beside its value + actions in a ~290px column, so stack the label on its own line and let the value/actions wrap instead of overflowing. */ .acct-grid .acct-row { flex-wrap: wrap; row-gap: 4px; } .acct-grid .acct-label { flex: 1 1 100%; } .acct-grid .acct-value { flex: 1 1 auto; min-width: 0; } @media (max-width: 720px) { .acct-label { flex-basis: 120px; } .acct-danger { flex-direction: column; align-items: flex-start; } } /* ============================================================ ADDITIONS 2026-07-08i — Phase 2 prototype: general homepage (carousel, resume hero, 3-card fork, featured strip) ============================================================ */ .home-hero { padding: 28px 24px 8px; max-width: 980px; margin: 0 auto; } .is-hidden { display: none !important; } /* ---- carousel ---- */ .carousel { position: relative; } .car-slide { display: none; align-items: center; gap: 34px; min-height: 280px; padding: 10px 6px; } .car-slide.is-active { display: flex; } .car-text { flex: 1.2; } .car-title { font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1.08; margin: 10px 0 0; } .car-sub { color: var(--text-secondary); font-size: 15.5px; line-height: 1.55; margin: 14px 0 0; max-width: 430px; } .car-cta { display: inline-block; margin-top: 16px; color: var(--accent-text); font-weight: 600; font-size: 15px; } .cred-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); font-size: 13.5px; color: var(--text-secondary); } .cred-chip b { color: var(--text-primary); } .cred-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .car-visual { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg-surface); border-radius: 10px; min-height: 250px; padding: 20px; } .car-visual-pair { flex-direction: row; gap: 16px; } .car-frame { flex: 1; height: 150px; border: 1.5px solid var(--border-strong); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); } .car-frame span { font-size: 30px; color: var(--accent-text); } .car-frame small { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } .car-visual-book { flex-direction: row; gap: 20px; } .car-book { width: 96px; height: 128px; border: 1.5px solid var(--accent); border-radius: 4px 10px 10px 4px; background: var(--accent-tint-soft); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--accent-text); font-size: 11px; letter-spacing: 0.08em; line-height: 1.5; } .car-arrow-glyph { font-size: 26px; color: var(--text-muted); } .car-toc { display: flex; flex-direction: column; gap: 10px; width: 130px; } .car-toc i { display: block; height: 12px; border-radius: 6px; background: var(--border-strong); } .car-toc i:nth-child(1) { width: 100%; background: var(--accent); opacity: 0.75; } .car-toc i:nth-child(2) { width: 78%; } .car-toc i:nth-child(3) { width: 90%; } .car-toc i:nth-child(4) { width: 64%; } .car-visual-devices { flex-direction: row; gap: 22px; align-items: flex-end; } .car-laptop { width: 190px; height: 118px; border: 1.5px solid var(--border-strong); border-bottom-width: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .car-phone { width: 64px; height: 118px; border: 1.5px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .car-phone .ch-pill { transform: scale(0.8); } .car-controls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0 4px; } .car-nav { background: none; border: 1px solid var(--border); border-radius: 50%; width: 30px; height: 30px; color: var(--text-secondary); font-size: 16px; line-height: 1; } .car-nav:hover { border-color: var(--accent); color: var(--accent-text); } .car-dots { display: flex; gap: 8px; } .car-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: var(--border-strong); } .car-dot.is-active { background: var(--accent); } /* ---- resume hero ---- */ .resume-hero { padding: 10px 6px 16px; } .resume-card { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 20px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--accent-tint-soft); } .resume-card:hover { background: var(--accent-tint); } .resume-play { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--accent); color: var(--accent-on-bg); display: flex; align-items: center; justify-content: center; font-size: 17px; } .resume-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; } .resume-meta b { font-size: 16.5px; } .resume-meta span { color: var(--text-secondary); font-size: 14.5px; } .resume-meta small { color: var(--text-muted); font-size: 12.5px; } .resume-cta { color: var(--accent-text); font-weight: 700; white-space: nowrap; } .resume-others { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .resume-other { flex: 1 1 180px; max-width: 260px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .resume-other:hover { border-color: var(--accent); } .resume-other b { font-size: 13.5px; } .resume-other span { color: var(--text-muted); } .resume-identity { margin-top: 16px; font-size: 13px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; } .resume-identity a { color: var(--accent-text); } .resume-clear { background: none; border: none; padding: 0; color: var(--text-muted); font-size: 13px; text-decoration: underline; font-family: inherit; } .resume-clear:hover { color: var(--text-primary); } /* ---- fork ---- */ .fork-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 18px auto 8px; padding: 0 24px; } .fork-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); } .fork-card:hover { border-color: var(--accent); } .fork-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .fork-title { font-family: Georgia, "Times New Roman", serif; font-size: 19px; } .fork-sub { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; flex: 1; } .fork-go { color: var(--accent-text); font-weight: 600; font-size: 14px; } /* Homepage fork with the two review tracks broken out: 4 across. */ .fork-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1180px; } @media (max-width: 980px) { .fork-grid-4 { grid-template-columns: repeat(2, 1fr); } } /* setup.php chooser: six equal cards, 3×2; the situation line ("I have a textbook") is the thing you notice first, so it gets the size. */ .setup-grid { grid-template-columns: repeat(3, 1fr); max-width: 1060px; } .setup-grid .fork-card { padding: 22px; gap: 10px; } .setup-grid .fork-title { font-size: 20px; } .setup-grid .fork-sub { font-size: 13.5px; } @media (max-width: 900px) { .setup-grid { grid-template-columns: repeat(2, 1fr); } } .fork-code-form { display: flex; gap: 8px; align-items: stretch; } .fork-code-input { flex: 1; min-width: 0; font-family: inherit; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); } .fork-code-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .fork-code-form .btn-primary { padding: 9px 18px; font-size: 14px; white-space: nowrap; } .fork-code-error { color: #d96c6c; font-size: 13px; line-height: 1.4; } /* Soft account nudge below the adventure cards: visible (bordered card, readable size, one button) but not a takeover — the free/no-signup promise stays the headline of the sentence. */ .setup-note-card { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 720px; margin: 26px auto 44px; padding: 16px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); } .setup-note-card p { margin: 0; flex: 1 1 340px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; } .setup-note-card .btn-primary { white-space: nowrap; } /* ---- search.php ---- */ .search-bar { display: flex; gap: 10px; max-width: 620px; margin: 18px auto 8px; padding: 0 24px; } .search-input { flex: 1; min-width: 0; font-family: inherit; font-size: 16px; padding: 11px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); } .search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .search-status { text-align: center; color: var(--text-secondary); font-size: 14.5px; max-width: 560px; margin: 18px auto; padding: 0 24px; } .search-status a { color: var(--accent-text); } .search-results { max-width: 760px; margin: 22px auto 8px; padding: 0 24px; } .search-group-head { font-size: 16px; margin: 0 0 6px; } .search-hit { padding: 10px 0; border-top: 1px solid var(--border); } .search-hit:last-child { border-bottom: 1px solid var(--border); margin-bottom: 24px; } .search-hit-name { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; } .search-hit-links { display: flex; flex-direction: column; gap: 3px; } .search-hit-link { color: var(--accent-text); text-decoration: none; font-size: 13.5px; } .search-hit-link:hover { text-decoration: underline; } /* ---- featured strip ---- */ .featured-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 980px; margin: 14px auto 40px; padding: 0 24px; } .featured-card { padding: 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); text-align: center; } .featured-card:hover { border-color: var(--accent); } .featured-title { font-size: 14px; font-weight: 600; } .featured-meta { color: var(--text-muted); font-size: 12px; margin-top: 3px; } .hero-switch { color: var(--accent-text); font-weight: 600; } @media (max-width: 860px) { .car-slide { flex-direction: column; gap: 18px; min-height: 0; } .car-visual { width: 100%; min-height: 180px; } .fork-grid { grid-template-columns: 1fr; } .featured-grid { grid-template-columns: repeat(2, 1fr); } .car-title { font-size: 30px; } } /* ============================================================ ADDITIONS 2026-07-08j — center homepage/picker section heads (scoped: cod.php and class pages keep the Phase 1 left align) ============================================================ */ .section-head-center { text-align: center; max-width: 980px; margin: 0 auto; } /* ========================================================================== ADDITIONS 2026-07-08h — real Jen-with-tablet photo in the splash carousel ========================================================================== */ /* The photo has its own black studio background, so the slot drops its surface color/padding and lets the image be the visual. */ .car-visual-photo { background: #000; padding: 0; overflow: hidden; } .car-photo { width: 100%; height: 100%; max-height: 340px; object-fit: contain; display: block; } /* ============================================================ ADDITIONS 2026-07-09a — textbook barcode scan (books.php) ============================================================ */ .book-scan-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .book-scan-btn { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; background: var(--accent-tint-soft); } .book-scan-btn:hover { background: var(--accent-tint); } .book-scan-hint { color: var(--text-muted); font-size: 12.5px; } .book-scan-status { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); font-size: 14px; line-height: 1.55; color: var(--text-secondary); } .book-scan-status a { color: var(--accent-text); } .book-scan-status b { color: var(--text-primary); } .book-scan-result { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 14px 18px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--accent-tint-soft); } .book-scan-result:hover { background: var(--accent-tint); } .book-scan-result-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .book-scan-result b { font-size: 16px; } .book-scan-result > span:not(.book-scan-result-eyebrow):not(.fork-go) { color: var(--text-secondary); font-size: 13.5px; } .book-scan-result .fork-go { margin-top: 4px; } /* ============================================================ ADDITIONS 2026-07-09b — section-materials batch buttons + welcome-back resume prompt (COD hub homepages) ============================================================ */ .sr-batch { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .sr-batch .btn-primary svg { width: 12px; height: 12px; } .resume-prompt { position: fixed; right: 22px; bottom: 22px; z-index: 300; display: none; align-items: center; gap: 14px; max-width: 440px; padding: 14px 16px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--bg-elevated); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } .resume-prompt.is-open { display: flex; } .rp-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-secondary); min-width: 0; } .rp-text > b { color: var(--text-primary); font-size: 14px; } .rp-text [data-rp-class] { color: var(--text-primary); } .resume-prompt .btn-primary { white-space: nowrap; } .rp-dismiss { background: none; border: none; color: var(--text-muted); font-size: 14px; padding: 2px 4px; align-self: flex-start; } .rp-dismiss:hover { color: var(--text-primary); } @media (max-width: 720px) { .resume-prompt { left: 14px; right: 14px; bottom: 14px; max-width: none; } } /* ============================================================ ADDITIONS 2026-07-09c — teacher classes (dashboard, curate, student-view banner) ============================================================ */ .utility-bar { gap: 18px; } .tclass-banner { display: flex; align-items: baseline; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 14px 24px 0; padding: 10px 18px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--accent-tint-soft); font-size: 14px; color: var(--text-secondary); } .tclass-banner b { color: var(--text-primary); } .tclass-banner-code { color: var(--text-muted); font-size: 13px; white-space: nowrap; } .tclass-banner-join { margin: 0; } .tclass-banner-join .btn-primary { padding: 6px 14px; font-size: 13px; } .tclass-banner-joined { color: var(--accent-text); font-size: 13.5px; white-space: nowrap; } .tclass-banner-joined a { color: inherit; } .tclass-banner-signin { font-size: 13.5px; color: var(--accent-text); } .tclass-row-members { color: var(--text-muted); font-size: 12.5px; display: block; } .tclass-row-members small { font-size: 11.5px; } .tclass-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); } .tclass-row:first-of-type { border-top: none; } .tclass-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; } /* ========================================================================== ADDITIONS 2026-07-09d — "Save for exam review" pins Pin button on video rows; pinned list panel on the class page; highlight flash when a pinned link jumps to its row. ========================================================================== */ .vpin { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 14px; color: var(--text-muted); background: transparent; border: 0; transition: color 0.12s ease; } .vpin:hover { color: var(--accent-text); } .vpin svg { width: 14px; height: 14px; flex-shrink: 0; } .vpin.is-pinned { color: var(--accent-text); } .vpin.is-pinned .vpin-star { fill: var(--accent); stroke: var(--accent); } /* class-page pinned list */ .pinned-panel { max-width: 860px; margin: 24px auto 0; padding: 14px 18px; background: var(--accent-tint-soft); border: 0.5px solid var(--border); border-left: 2px solid var(--accent); border-radius: 8px; } .pinned-panel.is-hidden { display: none; } .pp-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; } .pp-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; } .pp-hint { font-size: 12.5px; color: var(--text-muted); } .pp-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--border); } .pp-item:first-child { border-top: 0; } .pp-link { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14.5px; } .tclass-row-base { color: var(--text-secondary); font-size: 13.5px; } .tclass-row-code { color: var(--text-muted); font-size: 12.5px; word-break: break-all; } .tclass-row-code a { color: var(--accent-text); } .tclass-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tclass-row-actions .btn-primary { padding: 7px 14px; font-size: 13px; } .curate-shell { max-width: 760px; } .curate-savebar { display: flex; align-items: center; gap: 16px; margin: 18px 0; } .curate-count { color: var(--text-muted); font-size: 13.5px; } .curate-chapter { border: 1px solid var(--border); border-radius: 12px; margin: 14px 0; padding: 10px 16px 14px; background: var(--bg-surface); } .curate-chapter legend { padding: 0 8px; } .curate-toggle { font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; } .curate-section { margin: 10px 0 4px 6px; } .curate-sec-toggle { font-size: 13.5px; color: var(--text-secondary); } .curate-video { display: flex; gap: 10px; align-items: baseline; padding: 4px 0 4px 26px; font-size: 13.5px; cursor: pointer; color: var(--text-secondary); } .curate-video:hover { color: var(--text-primary); } .curate-type { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); min-width: 72px; } @media (max-width: 720px) { .tclass-row { flex-direction: column; align-items: flex-start; } } .pp-link b { font-size: 15px; font-weight: 600; color: var(--text-primary); } .pp-link:hover b { color: var(--accent-text); } .pp-link small { font-size: 12.5px; color: var(--text-muted); } .pp-remove { flex-shrink: 0; width: 26px; height: 26px; padding: 0; color: var(--text-muted); background: transparent; border: 0.5px solid var(--border-strong); border-radius: 6px; font-size: 12px; line-height: 1; } .pp-remove:hover { border-color: var(--accent); color: var(--accent-text); } /* jump-target flash when arriving from the pinned list (?v=...) */ .vrow.is-review-target { animation: dcm-review-flash 2.4s ease 0.3s; border-radius: 8px; } @keyframes dcm-review-flash { 0% { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-tint); } 70% { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-tint-soft); } 100% { box-shadow: none; background: transparent; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-09a) — mobile pass (Jen's phone review) 1) hero wavy underline centered; 2) class stats pill stacks cleanly; 3) video rows go thumbnail-on-top with real breathing room; 4) play-mode toggle wraps gracefully. ========================================================================== */ @media (max-width: 720px) { /* 1 — the wavy underline is a block element, so text-align:center never moved it; center it explicitly under the centered title. */ .hero-text .wavy, .class-hero .wavy, .content > .wavy { margin-left: auto !important; margin-right: auto !important; } /* 2 — the stats pill was wrap-jumbling at 375px (orphaned dot separators, uneven lines). Stack it as a tidy centered list and drop the dots. */ .class-stats { flex-direction: column; gap: 6px; padding: 12px 26px; } .class-stats .dot { display: none; } /* 4 — section page: video rows become thumbnail-on-top cards. Explicit grid placement (not column-collapsing) so hiding the thumb while playing can't shift the text into a zero-width track. */ .vrow-main { grid-template-columns: 0 1fr; gap: 10px 10px; padding: 16px 0 18px; } .is-batch-mode .vrow-main { grid-template-columns: 26px 1fr; } .vrow-main .thumb { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 420px; height: auto; } .is-batch-mode .vrow-main .thumb { grid-column: 2; } .vrow-main .vrow-cb { grid-column: 1; grid-row: 2; align-self: start; margin-top: 3px; } .vrow-main .vinfo { grid-column: 2; grid-row: 2; } .vrow.is-playing .vrow-main { grid-template-columns: 0 1fr; gap: 0 10px; } .vrow.is-playing .thumb { display: none; } /* text spacing inside the row */ .vtype { margin-bottom: 5px; } .vh { font-size: 15.5px; line-height: 1.4; margin: 0 0 9px; } .vlinks { gap: 10px 14px; } /* section header + page padding get more air */ .content { padding: 12px 18px 26px; } .s-title { margin: 8px 0 6px; } .s-desc { margin: 8px 0 12px; } .s-sub { margin: 0 0 16px; } .section-resources { margin: 14px 0 18px; } /* 3/4 — the play-mode toggle was wrap-jamming; let it wrap with row gap */ .play-mode { flex-wrap: wrap; row-gap: 8px; margin: 8px 0 20px; } } /* Play-mode second option: phones open youtube.com links in the YouTube app, so label it that way there; desktop keeps "in a new tab". */ .pm-lbl-mobile { display: none; } @media (max-width: 720px) { .pm-lbl-desktop { display: none; } .pm-lbl-mobile { display: inline; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-09b) — center section header on mobile ========================================================================== */ @media (max-width: 720px) { .s-eyebrow, .s-title, .s-desc, .s-sub { text-align: center; } .s-desc { margin-left: auto; margin-right: auto; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10a) — mobile section navigator Chips for every section in the current chapter + an explicit "Switch chapter" button (replaces the easy-to-miss selector pill). Mobile only; desktop keeps the chapter rail. ========================================================================== */ .msec-nav { display: none; } @media (max-width: 720px) { .msec-nav { display: block; margin: 12px 16px 2px; } .msec-chapter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .msec-ch-label { min-width: 0; font-size: 13.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msec-switch { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--accent-text); background: var(--bg-surface); border: 1px solid var(--accent); border-radius: 999px; } .msec-switch svg { width: 12px; height: 12px; } .msec-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .msec-chips::-webkit-scrollbar { display: none; } .msec-chip { flex: 0 0 auto; padding: 8px 15px; font-size: 14px; color: var(--text-primary); background: var(--bg-surface); border: 0.5px solid var(--border-strong); border-radius: 999px; white-space: nowrap; } .msec-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-on-bg); font-weight: 600; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10b) — "Navigate the Course" panel chrome ========================================================================== */ @media (max-width: 720px) { .msec-nav { margin: 2px 0 18px; padding: 12px 14px; background: var(--accent-tint-soft); border: 1px solid var(--accent); border-radius: 10px; } .msec-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: 9px; } .msec-chips { padding-bottom: 2px; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10c) — mobile: play-mode toggle as a centered blue box; both panels center-capped. ========================================================================== */ @media (max-width: 720px) { .play-mode { flex-direction: column; align-items: center; gap: 10px; max-width: 480px; margin: 2px auto 14px; padding: 14px 16px; background: var(--accent-tint-soft); border: 1px solid var(--accent); border-radius: 10px; } .play-mode .pm-label { text-align: center; } .pm-opt { width: min(280px, 100%); text-align: center; } /* keep the two blue boxes visually aligned */ .msec-nav { max-width: 480px; margin-left: auto; margin-right: auto; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10d) — matched panel titles + centered boxes at every phone width. ========================================================================== */ @media (max-width: 720px) { .msec-eyebrow { font-size: 16px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text-primary); text-align: center; margin-bottom: 11px; } .play-mode, .msec-nav { max-width: 420px; margin-left: auto; margin-right: auto; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10e) — Navigate panel: chapter label and switch button stack on their own centered lines. ========================================================================== */ @media (max-width: 720px) { .msec-chapter { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 12px; } .msec-ch-label { max-width: 100%; text-align: center; } } /* ========================================================================== PORTED FROM PHASE 1 (P1 2026-07-10f) — welcome-back banner sits IN the page, above the hero (was a fixed floating card in the corner). ========================================================================== */ .resume-prompt { position: static; right: auto; bottom: auto; z-index: auto; max-width: 900px; margin: 18px 24px 0; box-shadow: none; justify-content: center; } @media (min-width: 949px) { .resume-prompt { margin-left: auto; margin-right: auto; } } @media (max-width: 720px) { .resume-prompt { left: auto; right: auto; bottom: auto; margin: 14px 16px 0; } } /* ========================================================================== PORTED FROM PHASE 1 — .hero-photo-real (real tablet photo in the hero; missed in the 2026-07-17 parity port, which is why the photo rendered full-size). The photo brings its own black studio background — drop the slot's surface color/padding and cap the height. ========================================================================== */ .hero-photo-real { background: #000; padding: 0; overflow: hidden; min-height: 0; } .hero-photo-real img { width: 100%; max-height: 380px; object-fit: contain; display: block; border-radius: 6px; } /* ============================================================ ADDITIONS 2026-07-18 — "Tell us which book you use" reads as a link (was inheriting body text color, looked like plain text) ============================================================ */ .book-request-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .book-request-link:hover { color: var(--accent); text-decoration-thickness: 2px; } /* ========================================================================== PORTED FROM PHASE 1 (2026-07-18) — play-mode panel collapses behind a button "Change How the Video Opens". Defaults closed; ✕ re-collapses. ========================================================================== */ .play-mode.is-collapsed { display: none; } .pm-open { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; margin: 6px 0 16px; font-size: 13.5px; font-weight: 600; color: var(--accent-text); background: var(--bg-surface); border: 1px solid var(--accent); border-radius: 999px; } .pm-open svg { width: 13px; height: 13px; flex-shrink: 0; } .pm-open:hover { background: var(--accent-tint-soft); } .play-mode { position: relative; } .pm-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text-muted); background: transparent; border: 0; } .pm-close svg { width: 11px; height: 11px; } .pm-close:hover { color: var(--text-primary); } @media (min-width: 721px) { .play-mode { padding: 10px 36px 10px 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-tint-soft); display: inline-flex; margin: 2px 0 16px; } } @media (max-width: 720px) { .pm-open { display: flex; width: fit-content; margin: 4px auto 16px; } } /* ========================================================================== ADDITIONS 2026-07-24a — editable display name in account settings (Dan). The Profile card now holds a small form above the read-only email row. ========================================================================== */ .acct-name-form { margin: 0 0 14px; } .acct-name-form .cf-field { margin-bottom: 10px; } .acct-name-form input[type="text"] { max-width: 320px; } /* ========================================================================== ADDITIONS 2026-07-24b — the resume hero's identity line ("Not you? …") moved from the foot of the hero to directly under the welcome-back greeting (Dan), so the escape hatch sits beside the name it disputes. Old rule's margin-top:16px was spacing for the bottom position. ========================================================================== */ .resume-hero .resume-identity { margin: 2px 0 14px; } /* ========================================================================== ADDITIONS 2026-07-24c — "Sign out" in the utility bar (Dan). It has to be a POST (CSRF), so it's a form + button dressed to match the bar's links; .utility-bar's flex gap handles the spacing. ========================================================================== */ .util-signout { margin: 0; } .util-signout button { background: none; border: none; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; } .util-signout button:hover { color: var(--accent-text); } /* ========================================================================== ADDITIONS 2026-07-24d — "Recently watched" now lives in the homepage resume hero (moved from account settings, Dan). It REUSES the .acct-recent-* card styles above so the two surfaces can't drift — those rules are now shared, not account-only. Only the wrapper and heading are new. No `display` here on purpose: the [hidden] attribute must still be able to hide the block when there's nothing to list. ========================================================================== */ .resume-recent { margin-top: 22px; } .resume-recent-title { font-size: 15px; margin: 0 0 10px; color: var(--text-secondary, var(--text-muted)); } /* ========================================================================== ADDITIONS 2026-07-24e — account-area tabs (Dan). "Account Settings" / "For Teachers" sit under the blue "Your account" eyebrow on both account.php and teachers.php. Signed-in only; the utility bar's "For teachers" link is hidden for those users, since this replaces it. ========================================================================== */ .acct-tabs { display: flex; gap: 22px; margin: 6px 0 14px; border-bottom: 1px solid var(--border); } .acct-tab { padding: 6px 0 9px; margin-bottom: -1px; /* sit on the container's border */ border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: 14.5px; } .acct-tab:hover { color: var(--accent-text); } .acct-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; } /* ========================================================================== ADDITIONS 2026-07-24f — "Your account" is the account area's page heading now (Dan): large, bold, white, and no longer a small blue eyebrow. Applied as a MODIFIER so every other .acct-eyebrow on the site ("Save your spot", "Your free account", "For teachers" for guests) keeps its original treatment. Colour is --text-primary rather than a literal white so the light theme stays readable. ========================================================================== */ .acct-page-title { font-size: 30px; font-weight: 800; color: var(--text-primary); letter-spacing: 0; text-transform: none; line-height: 1.15; margin-bottom: 4px; } @media (max-width: 620px) { .acct-page-title { font-size: 25px; } } /* ========================================================================== ADDITIONS 2026-07-24g — "Your class, your way" is a subheading when the For Teachers tab is inside the account area (Dan), so it sits under the 30px "Your account" title rather than matching it. Guests still get .acct-h1 there, where it IS the page's heading. ========================================================================== */ .acct-subhead { font-size: 20px; font-weight: 700; margin: 10px 0 8px; line-height: 1.2; } /* ========================================================================== ADDITIONS 2026-07-24h — [data-copy] buttons (Dan). First use: the teacher share links in "Your classes". Small and quiet next to the link; turns accent while it confirms the copy. ========================================================================== */ .copy-btn { margin-left: 8px; padding: 2px 9px; border: 1px solid var(--border-strong, var(--border)); border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 12px; line-height: 1.6; cursor: pointer; white-space: nowrap; } .copy-btn:hover { color: var(--accent-text); border-color: var(--accent); } .copy-btn.is-copied { color: var(--accent-text); border-color: var(--accent); cursor: default; } /* ========================================================================== ADDITIONS 2026-07-24i — curate page (Dan): the video count moved out of the save bar to its own line directly above the lesson list, so it reads as a heading for what follows. Pulled up slightly since the bar above already carries an 18px bottom margin. ========================================================================== */ .curate-count { display: block; margin: -8px 0 0; } /* .acct-alt carries an 18px top margin for standalone use; inside the centred save bar that pushes the link below the button's baseline. (Applies to the bottom bar too, which had the same wobble.) */ .curate-savebar .acct-alt { margin-top: 0; } /* ========================================================================== ADDITIONS 2026-07-24j — teachers.php intro (Dan): three numbered steps and two "how students get in" cards, so a teacher who has never seen the site can take it in at a glance. ========================================================================== */ .tch-steps { margin: 8px 0 20px; padding-left: 22px; color: var(--text-secondary); font-size: 15px; line-height: 1.7; } .tch-steps li { margin: 1px 0; padding-left: 2px; } .tch-steps li::marker { color: var(--accent-text); font-weight: 700; } .tch-ways-lead { margin-bottom: 6px; } .tch-ways { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; } .tch-ways li { padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--bg-card); color: var(--text-secondary); font-size: 14px; line-height: 1.6; } .tch-ways li b { color: var(--text-primary); } /* ========================================================================== ADDITIONS 2026-07-24k — the "Teaching" tile now lives on the homepage (Dan). .account-shell is 640px, too narrow beside the homepage's wider sections, so it gets a wrapper matching .fork-grid's metrics instead. The tile itself reuses .acct-section, unchanged. ========================================================================== */ .home-teaching { max-width: 980px; margin: 18px auto 0; padding: 0 24px; } .home-teaching .acct-section { margin-top: 0; } /* ========================================================================== ADDITIONS 2026-07-24l — curate.php header: class code and class link on their own lines with a copy button (Dan), matching teachers.php. Tight spacing so the two read as a pair rather than loose paragraphs. ========================================================================== */ .curate-share { margin: 2px 0; word-break: break-all; } .curate-share + .curate-share { margin-bottom: 10px; } /* ========================================================================== ADDITIONS 2026-07-24m — index.php top-of-page cleanup (Dan). The top now uses the same rhythm as the bottom: a centred title over a grid of equal cards. Both new grids reuse .featured-card, so they can't drift from "Popular subjects". Nothing in the fork or featured sections changed. ========================================================================== */ .home-greeting { max-width: 980px; margin: 22px auto 0; padding: 0 24px; } .home-greeting .eyebrow { margin-bottom: 0; } .section-sub { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 0; } /* Teaching + resume grids: same metrics as .featured-grid */ .teach-grid, .resume-grid { display: grid; gap: 12px; max-width: 980px; margin: 14px auto 8px; padding: 0 24px; } .teach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .resume-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .teach-card, .resume-tile { display: block; color: inherit; text-decoration: none; } .teach-name { font-size: 14px; font-weight: 600; line-height: 1.3; } .teach-meta { color: var(--text-muted); font-size: 12px; margin-top: 4px; } .teach-go { color: var(--accent-text); font-size: 12.5px; margin-top: 7px; } .teach-card-manage { border-style: dashed; } .teach-card-manage .teach-name { color: var(--accent-text); } .resume-tile.is-current { border-color: var(--accent); } .resume-flag { display: block; color: var(--accent-text); font-size: 11px; margin-bottom: 4px; } .resume-sec { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; } .resume-cls { display: block; color: var(--text-muted); font-size: 12px; margin-top: 3px; } .resume-when { display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 3px; } .resume-hero .resume-identity { justify-content: center; margin: 0 0 4px; } @media (max-width: 760px) { .teach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== ADDITIONS 2026-08-03a — account page: benefits column beside the sign-in form (Jen). The signed-out page asked students to sign up without ever listing what an account gets them. Two columns on desktop (benefits left, form right), one column on phones with the benefits first. The wider shell is scoped to .account-shell-signedout so the signed-in account area keeps its 640px reading measure. ========================================================================== */ .account-shell.account-shell-signedout { max-width: 940px; } .acct-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 22px; } .acct-split .acct-section { margin-top: 0; } .acct-benefits { padding: 18px 20px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; } .acct-benefits-head { margin: 0 0 12px; font-size: 17px; } .acct-benefit-list { margin: 0; padding: 0; list-style: none; } .acct-benefit-list li { position: relative; padding: 0 0 0 24px; margin-bottom: 13px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; } .acct-benefit-list li:last-child { margin-bottom: 0; } .acct-benefit-list li b { color: var(--text-primary); font-weight: 600; } .acct-benefit-list li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .acct-benefits-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13.5px; line-height: 1.5; } @media (max-width: 720px) { .acct-split { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* ========================================================================== ADDITIONS 2026-08-03b — account page: the benefits card and the sign-in card are the same height (Jen). The grid was align-items:start, so the shorter benefits box stopped early and left a ragged edge next to the form. Stretching both to the row height squares the pair off. ========================================================================== */ .account-shell .acct-split { align-items: stretch; } .account-shell .acct-split > .acct-benefits, .account-shell .acct-split > .acct-section { display: flex; flex-direction: column; } /* The early-member note sits on the bottom edge of whichever card is shorter, so the two cards end level instead of the text floating. */ .account-shell .acct-split > .acct-benefits .acct-benefits-note { margin-top: auto; } /* ========================================================================== ADDITIONS 2026-08-03c — "Popular subjects" strip centers itself (Jen). The grid was a hardcoded repeat(6, 1fr) from when the strip had six COD cards; with the five topic classes the sixth column stayed empty and the row sat 86px left of the page centre. Flex instead, so the strip fills and balances at ANY card count and the last wrapped row centres on phones. The old grid-template-columns rules are inert under flex and are left in place per the append-only rule. ========================================================================== */ .featured-grid { display: flex; flex-wrap: wrap; justify-content: center; } .featured-grid > .featured-card { flex: 1 1 140px; min-width: 0; } /* ========================================================================== ADDITIONS 2026-08-03d — general.php: topic classes in titled subject sections (Jen). Eleven cards in one flat grid read as a wall of text. Section headings reuse .book-group-head; the cards inside centre themselves so a section with one or two classes doesn't sit stranded in the left third of a fixed 3-column grid. Scoped to .gen-group so the shared .card-grid (chapter grids, the book picker) is untouched. ========================================================================== */ .gen-group .card-grid { display: flex; flex-wrap: wrap; justify-content: center; } .gen-group .card-grid > .card { /* 260 not 300: a four-class subject has to fit on ONE row at desktop width, otherwise the fourth card sits alone underneath the other three. They grow from there to fill the row evenly. */ flex: 1 1 260px; max-width: 420px; min-width: 0; } /* ========================================================================== ADDITIONS 2026-08-03e — books.php: one collapsed bucket per subject (Jen). 97 book cards on screen at once was a wall, and Algebra alone is 47. Each subject is now a

the student opens. The heading row keeps its centred .book-group-head look and becomes the click target; the chevron rotates when open. Buckets themselves stay data-driven (fld_class_group), so a new group appears here with no code change. ========================================================================== */ .book-group-toggle { cursor: pointer; list-style: none; padding: 10px 24px; border-radius: 10px; } .book-group-toggle::-webkit-details-marker { display: none; } .book-group-toggle:hover .section-title { color: var(--accent-text); } .book-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .book-group-chev { display: inline-flex; width: 16px; height: 16px; color: var(--text-muted); transition: transform 0.15s ease; } details[open] > .book-group-toggle .book-group-chev { transform: rotate(180deg); } /* ========================================================================== ADDITIONS 2026-08-03f — "Pick up where you left off" and "Teaching: your classes" centre themselves (Jen). Both were fixed-column grids — resume 4 across, teaching 3 — so a student with ONE saved spot got a single card clamped to the far left of an otherwise empty row. Flex instead: the cards fill the row when there are enough, and centre when there aren't. flex-basis 150px keeps the counts identical to the old grid (4 across on desktop, 2 on phones); max-width stops a lone card stretching the full 980px. The old grid-template-columns rules are inert under flex and are left in place per the append-only rule. ========================================================================== */ .teach-grid, .resume-grid { display: flex; flex-wrap: wrap; justify-content: center; } .teach-grid > *, .resume-grid > * { flex: 1 1 150px; max-width: 320px; min-width: 0; } /* ========================================================================== ADDITIONS 2026-08-03g — carousel visuals: real graphics replace the CSS-only placeholders (Jen). Assets and markup approved 2026-08-03; see D:\DCMDatabase\Website Graphics\carousel\IMPLEMENTATION.md for the source spec. Slide 0 (Jen + tablet photo) is unchanged. The old .car-frame / .car-book / .car-toc / .car-arrow-glyph / .car-laptop / .car-phone rules are dead now that index.php no longer emits those classes; left in place per the append-only / never-delete rule rather than removed as the spec suggested. ========================================================================== */ /* ---- shared ---- */ .car-visual-cascade, .car-visual-book, .car-visual-devices { position: relative; } /* ---- "The format": one lesson cascading over its notes page ---- */ .car-cas { position: relative; width: 100%; padding-bottom: 60.255%; } .car-cas-card { position: absolute; border: 1.5px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: #000; box-shadow: 0 8px 26px rgba(0, 0, 0, .6); } .car-cas-card img { width: 100%; display: block; } .car-cas-vid { width: 54%; } /* the notes page: right edge lands on the centre of the back video card, bottom edge midway between the 2nd and 3rd cards' bottoms. Both are load-bearing -- changing width or the image's aspect breaks the alignment. */ .car-cas-paper { background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } .car-cas-1 { left: 2.5%; top: 0; width: 46%; } .car-cas-2 { left: 21.5%; top: 20.25%; } .car-cas-3 { left: 32.5%; top: 34.92%; } .car-cas-4 { left: 43.5%; top: 49.59%; } /* depth: the further back, the darker */ .car-cas-dim1::after, .car-cas-dim2::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .car-cas-dim1::after { background: rgba(0, 0, 0, .40); } .car-cas-dim2::after { background: rgba(0, 0, 0, .22); } .car-cas-stamp { position: absolute; left: 7px; top: 6px; z-index: 2; background: rgba(0, 0, 0, .72); color: #fff; font-size: 8.5px; border-radius: 3px; padding: 1px 5px; } .car-cas-tag { position: absolute; right: 7px; top: 6px; z-index: 2; background: var(--accent); color: #08222E; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; border-radius: 3px; padding: 1.5px 6px; } /* caption sits BELOW the panel so it can't push the artwork off centre or collide with the front card */ .car-cas-note { position: absolute; left: 0; right: 0; top: 100%; margin-top: 11px; text-align: center; color: var(--text-faint); font-size: 11.5px; } /* ---- "Your book, your order" ---- */ .car-bk { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; } .car-bk-cover { width: 104px; height: 144px; } .car-bk-arrow { color: var(--text-muted); font-size: 20px; } .car-bk-toc { width: 150px; border: 1.5px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: var(--bg); position: relative; } .car-bk-toc img { width: 100%; display: block; } .car-bk-toc::after { /* fade the cut-off bottom row */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, transparent, var(--bg-surface)); } .car-bk-cap { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-top: 8px; } /* ---- "Pick up anywhere" ---- */ /* proportional stage, so the arc's endpoint stays glued to the phone at every width */ .car-dev { position: relative; width: 100%; max-width: 340px; aspect-ratio: 340 / 230; margin: 0 auto; } .car-dev-lap { position: absolute; left: 5.9%; bottom: 0; width: 73.5%; } .car-dev-screen { border: 1.5px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--bg); } .car-dev-screen img { width: 100%; display: block; } .car-dev-base { height: 8px; border-radius: 0 0 5px 5px; background: var(--border-strong); width: 112%; margin: 3px 0 0 -6%; } .car-dev-phone { position: absolute; left: 71.2%; top: 6.1%; width: 22.9%; z-index: 3; border: 1.5px solid var(--border-strong); border-radius: 11px; background: var(--bg); padding: 5px 4px 6px; box-shadow: -10px 8px 24px rgba(0, 0, 0, .6); } .car-dev-notch { width: 60%; height: 3px; border-radius: 2px; background: var(--border-strong); margin: 1px auto 4px; } .car-dev-phone img { width: 100%; display: block; border-radius: 4px; } .car-dev-arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; } /* ========================================================================== ADDITIONS 2026-08-03h — carousel: all four visuals render at the same size (Jen). .car-slide uses align-items:center, not stretch, so each .car-visual's height came from its own content -- the untouched photo slide (a portrait image, capped at max-height:340) sat at 340px while the three new graphic slides settled around 270-276px, so the panel visibly grew and shrank as the carousel cycled. Explicit height on .car-visual makes it a fixed box regardless of what's inside; the photo slide's existing object-fit:contain then letterboxes the portrait photo inside it instead of stretching the box to match the photo. ========================================================================== */ .carousel .car-visual { height: 280px; } @media (max-width: 860px) { .carousel .car-visual { height: 220px; } } /* ========================================================================== ADDITIONS 2026-08-03i — homepage fork grid: 5th card ("I'm a teacher"), in the row, not stranded on one of its own (Jen). .fork-grid-4 was a fixed repeat(4, 1fr)/repeat(2, 1fr) grid sized for exactly 4 cards; a 5th would sit alone underneath. Unlike the featured strip / resume / teach grids fixed earlier today, this card count is fixed content (hardcoded in index.php), not data-driven, so it doesn't need to handle an arbitrary count -- it needs to fit exactly 5 across at desktop widths. flex-basis 190px is sized so 5 cards' hypothetical widths (what the wrap decision uses, before flex-grow/shrink) fit within the grid's own 980-1180px width; below that they wrap in twos, still centred. ========================================================================== */ .fork-grid-4 { display: flex; flex-wrap: wrap; justify-content: center; } .fork-grid-4 > .fork-card { flex: 1 1 190px; max-width: 260px; min-width: 0; } /* Mid widths: let it break 3+2 rather than 4+1, and pin the wrapped cards to the same width as the full row (flex-grow was stretching the lone trailing card to its 260px max while its row-mates sat at 197). */ @media (max-width: 1080px) { .fork-grid-4 > .fork-card { flex: 0 1 calc((100% - 32px) / 3); max-width: none; } } @media (max-width: 700px) { .fork-grid-4 > .fork-card { flex: 0 1 calc((100% - 16px) / 2); } } @media (max-width: 460px) { .fork-grid-4 > .fork-card { flex: 0 1 100%; } } /* ========================================================================== ADDITIONS 2026-08-03j — homepage fork cards as squares, one row (Jen). The 5 cards were 214x286 because .fork-grid-4 caps at 1180px; a square needs the card as tall as it is wide, so the grid widens to 1560 and the cards take a fixed fifth of it (~290px) with aspect-ratio 1/1. align-items:flex-start is required — the default stretch would force every card to the row's height and aspect-ratio would never apply. Gated to wide viewports: below 1360px the card would be narrower than its own text needs to be tall, so it keeps the auto-height behaviour from block (i) and wraps 3+2 as before. ========================================================================== */ @media (min-width: 1360px) { .fork-grid-4 { max-width: 1560px; align-items: flex-start; } .fork-grid-4 > .fork-card { flex: 0 0 calc((100% - 64px) / 5); max-width: none; aspect-ratio: 1 / 1; } /* pin the call-to-action to the bottom edge so the squares share a baseline no matter how long each card's copy runs */ .fork-grid-4 > .fork-card .fork-go { margin-top: auto; } } /* ========================================================================== ADDITIONS 2026-08-03k — carousel a little bigger (Jen). Block (h) sized the visual panel at 280px to make all four slides match; this lifts that to 340 (260 on phones) and gives the slide a matching min-height so the hero reads as the page's main event rather than a strip above the fork cards. Everything inside is proportional, so the artwork just scales. ========================================================================== */ .carousel .car-visual { height: 340px; } .carousel .car-slide { min-height: 340px; } @media (max-width: 860px) { .carousel .car-visual { height: 260px; } .carousel .car-slide { min-height: 0; } } /* ========================================================================== ADDITIONS 2026-08-03l — setup.php chooser centres its cards (Jen). The statistics card makes seven, and .setup-grid is repeat(3, 1fr), so the seventh sat alone at the left of an empty row — the same fixed-column bug fixed today on the featured strip, the resume/teach grids and the homepage fork. Flex + wrap + centre; equal widths on every row so a short last row doesn't stretch its cards wider than the rest. ========================================================================== */ .setup-grid { display: flex; flex-wrap: wrap; justify-content: center; } .setup-grid > .fork-card { flex: 0 1 calc((100% - 32px) / 3); min-width: 0; } @media (max-width: 860px) { .setup-grid > .fork-card { flex: 0 1 calc((100% - 16px) / 2); } } @media (max-width: 560px) { .setup-grid > .fork-card { flex: 0 1 100%; } } /* ========================================================================== ADDITIONS 2026-08-04a — teacher-defined groups inside a class -------------------------------------------------------------------------- "Exam 1", "Week 1", "Unit 3 review": named buckets a teacher fills with videos they already picked (Jen 2026-08-04). Two surfaces: curate.php the group manager (.curate-groups) plus ASSIGN mode (.curate-assignbar + .curate-assign-row), which reuses the existing .curate-* tree styling and only adds a name column and membership chips. class.php the student side: .tgroup-grid of cards above the chapter grid, and .tgroup-open when one is opened. Everything here is additive. A class with no groups matches no selector in this block, which is what keeps existing classes byte-identical. ========================================================================== */ /* ---------------------------------------------------- curate: the manager */ .curate-groups { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 10px; padding: 16px 18px; margin: 22px 0; } .curate-groups h3 { margin: 0 0 2px; font-size: 16px; } .cgroup-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; } .cgroup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 8px; padding: 9px 12px; } .cgroup-name { font-weight: 600; color: var(--text-primary); } .cgroup-count { font-size: 12px; color: var(--text-muted); } .cgroup-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .cgroup-actions .btn-primary { padding: 5px 12px; font-size: 12.5px; } .cgroup-rename input[type="text"] { background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: 7px; padding: 5px 9px; font-size: 12.5px; max-width: 170px; } .cgroup-actions button[disabled] { opacity: 0.35; cursor: default; } .cgroup-new { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; } .cgroup-new-label { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .cgroup-new input[type="text"] { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: 7px; padding: 8px 11px; font-size: 13px; min-width: 220px; } /* ------------------------------------------------------ curate: assign mode */ .curate-assignbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 9px; padding: 10px 14px; margin: 18px 0 10px; } .curate-assignbar .ca-lbl { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; } .curate-assignbar .ca-name { font-weight: 700; font-size: 15px; color: var(--text-primary); } .curate-assignbar .ca-count { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); } /* The assign row carries a name column and membership chips; the include tree's own rows are untouched by these selectors. */ .curate-video.curate-assign-row { gap: 10px; } .curate-video.curate-assign-row .curate-vname { flex: 1 1 auto; min-width: 0; } .curate-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 0 1 auto; justify-content: flex-end; } .curate-chip { display: inline-block; font-size: 10.5px; line-height: 1.7; padding: 0 7px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent-text); font-weight: 600; white-space: nowrap; } /* ------------------------------------------------------- student: the cards */ .tgroup-grid { margin-bottom: 6px; } .card.tgroup-card { border-color: var(--border-strong); background: linear-gradient(180deg, var(--accent-tint-soft), transparent); } .card.tgroup-card:hover { border-color: var(--accent); } .tgroup-note { text-align: center; color: var(--text-muted); font-size: 12.5px; margin: 8px 0 0; } /* --------------------------------------------------- student: opened group */ .tgroup-open { display: flex; flex-direction: column; gap: 8px; } .tgroup-video { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--bg-surface); border-radius: 9px; padding: 10px 14px; } .tgroup-video:hover { border-color: var(--accent); } .tgroup-video .tgv-type { flex: 0 0 74px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .tgroup-video .tgv-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-primary); } .tgroup-video .tgv-go { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; } .tgroup-back { margin: 16px 0 0; font-size: 13px; } .tgroup-back a { color: var(--accent-text); font-weight: 600; } @media (max-width: 620px) { .cgroup-actions { margin-left: 0; width: 100%; } .cgroup-rename input[type="text"] { max-width: 120px; } .curate-chips { justify-content: flex-start; } .tgroup-video { flex-wrap: wrap; gap: 4px 12px; } .tgroup-video .tgv-type { flex: 0 0 100%; } .tgroup-video .tgv-name { flex: 1 1 100%; } } /* ========================================================================== ADDITIONS 2026-08-04a — book buckets centre their cards (Jen). The picker used the shared .card-grid, a fixed repeat(3, 1fr), so a bucket holding one or two books left the empty columns on the right and the row sat off to the left — Statistics, the first bucket with fewer than three books, measured 264px off centre. Same fixed-column bug fixed on the featured strip, the resume/teach grids, the homepage fork and general.php. flex-basis 300px keeps three across at full width, exactly as before. Scoped to .book-group so the shared .card-grid is untouched elsewhere. ========================================================================== */ .book-group .card-grid { display: flex; flex-wrap: wrap; justify-content: center; } /* A fixed third of the row, NOT flex-basis with grow. Grow would let a remainder row stretch its cards to double width (13 books came out 5+5+3 with the last three twice the size of the rest), and a plain basis would change the density the grid had. This keeps exactly three across and simply centres whatever the last row holds. Gap is 12px, so two gaps. */ .book-group .card-grid > .book-card { flex: 0 1 calc((100% - 24px) / 3); min-width: 0; } @media (max-width: 860px) { .book-group .card-grid > .book-card { flex: 0 1 calc((100% - 12px) / 2); } } @media (max-width: 560px) { .book-group .card-grid > .book-card { flex: 0 1 100%; } } /* ========================================================================== ADDITIONS 2026-08-04b — "Add Groups" reframed as an optional add-on (Jen) -------------------------------------------------------------------------- Same feature as block (a); this is the wrapper it now lives in. The panel is a plain

so it works with no JS: the pitch sits INSIDE the

(the only part that shows while closed) and these rules hide the pitch again once it's open, leaving just the title row above the manager. PHP adds `open` when the class already has groups. Overrides here are all more-specific selectors layered on block (a)'s .curate-groups; nothing above is edited. ========================================================================== */ details.addon-groups > summary.addon-summary { cursor: pointer; list-style: none; display: block; } details.addon-groups > summary.addon-summary::-webkit-details-marker { display: none; } /* Closed: an invitation, not a section of the form. */ details.addon-groups:not([open]) { border-style: dashed; background: var(--accent-tint-soft); } .addon-groups .addon-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .addon-groups .addon-head::after { content: "▸"; margin-left: auto; color: var(--text-faint); font-size: 12px; } .addon-groups[open] .addon-head::after { content: "▾"; } .addon-groups .addon-title { margin: 0; font-size: 16px; } .addon-badge { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent-text); } .addon-groups .addon-pitch, .addon-groups .addon-eg, .addon-groups .addon-skip, .addon-groups .addon-cta { display: block; margin-top: 9px; } .addon-groups .addon-pitch { color: var(--text-secondary); max-width: 64ch; } .addon-groups .addon-pitch b { color: var(--text-primary); } .addon-groups .addon-eg { display: flex; gap: 6px; flex-wrap: wrap; } .addon-chip { font-size: 11px; line-height: 1.8; padding: 0 9px; border-radius: 999px; border: 1px dashed var(--border-strong); color: var(--text-muted); white-space: nowrap; } .addon-groups .addon-skip { font-size: 12.5px; color: var(--text-muted); } .addon-groups .addon-cta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 13px; } /* Looks like the button it stands in for; the

is the real control, so this must NOT be a nested