/* ================================================================ * lesson-app-shell.css — shared styling for /Lop*_Bai*_*.html apps. * * Design goals * - Visual parity with Lop2_Bai13_HoaSiAI.html (already approved UX). * - Every utility prefixed `.shell-*` so app-local classes never * collide with shell classes. Font-size + grade-band hooks use * unprefixed names because they're class-selectors applied at the * body level — worth the rare collision risk for readable HTML. * - Grade-band typography + touch targets pulled from * `shared/hcai-engine/grade-profiles.json` (single source of truth). * Values baked into CSS: changing the profile requires a CSS update. * Keep this file and the JSON in sync when adjusting grade rules. * - No framework, no preprocessor. Three themes (ocean/forest/sunset) * layered via `.theme-*` class on the app root. * * Consumer contract (for Phase 1 builders) * *

* ... LessonShell.header.mount(el, opts) injects

here *

your app body

* * ================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #7c3aed; --primary-light: #a78bfa; --secondary: #f472b6; --accent: #fbbf24; --success: #34d399; --danger: #ef4444; --bg-1: #fdf4ff; --bg-2: #fae8ff; --bg-3: #e9d5ff; --card-bg: rgba(255,255,255,0.95); --text: #1e1b4b; --text-light: #9794b0; } .theme-ocean { --primary: #0891b2; --primary-light: #22d3ee; --secondary: #06b6d4; --bg-1: #ecfeff; --bg-2: #cffafe; --bg-3: #a5f3fc; --text: #164e63; } .theme-forest { --primary: #059669; --primary-light: #34d399; --secondary: #10b981; --bg-1: #ecfdf5; --bg-2: #d1fae5; --bg-3: #a7f3d0; --text: #064e3b; } .theme-sunset { --primary: #ea580c; --primary-light: #fb923c; --secondary: #f472b6; --bg-1: #fff7ed; --bg-2: #ffedd5; --bg-3: #fed7aa; --text: #7c2d12; } html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Be Vietnam Pro', 'Quicksand', sans-serif; font-size: 18px; } /* Font scale — matches HoaSiAI exactly. `.font-size-md` is the default, set on the app root at mount time. */ .font-size-sm { font-size: 15px; } .font-size-md { font-size: 18px; } .font-size-lg { font-size: 22px; } .font-size-xl { font-size: 26px; } /* App root — fills viewport, theme-swappable gradient background. */ .shell-app { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3)); } /* ── Header ─────────────────────────────────────────────────────── Mounted by `LessonShell.header.mount()` — builders don't write the markup, they pass options. Layout matches HoaSiAI exactly so retrofit is a zero-diff visual change. */ .shell-header { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--card-bg); flex-shrink: 0; } .shell-logo { font-size: 1.2em; font-weight: 800; color: var(--primary); } .shell-header-controls { display: flex; align-items: center; gap: 5px; } .shell-ctrl-group { display: flex; background: rgba(124,58,237,0.1); border-radius: 6px; padding: 2px; } .shell-ctrl-btn { padding: 4px 8px; border: none; border-radius: 4px; font-family: inherit; font-weight: 700; font-size: 0.75em; cursor: pointer; background: transparent; color: var(--text-light); } .shell-ctrl-btn.active { background: var(--primary); color: white; } .shell-theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid white; cursor: pointer; } .shell-theme-dot.active { border-color: var(--text); transform: scale(1.1); } .shell-icon-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: rgba(124,58,237,0.1); color: var(--primary); cursor: pointer; } .shell-icon-btn:hover { background: rgba(124,58,237,0.2); } .shell-credit-pill { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: linear-gradient(135deg, #fef3c7, #fde68a); border-radius: 12px; font-size: 0.8em; font-weight: 700; color: #92400e; } /* ── Grade-band sizing ──────────────────────────────────────────── Sourced from shared/hcai-engine/grade-profiles.json: G1-2 → baseFontSize 22, minTouchTarget 50 G3-5 → baseFontSize 18, minTouchTarget 48 G6-7 → baseFontSize 17, minTouchTarget 44 G8-9 → baseFontSize 16, minTouchTarget 44 The shell only encodes two bands (G1-2, G3-5) as primary-school apps and one combined band (G6-9, min 44) for THCS apps, matching the grade-toggle UX defined in the plan §2.3. */ .grade-1-2 { font-size: 22px; } .grade-1-2 .shell-ctrl-btn { min-height: 50px; min-width: 50px; padding: 10px 14px; font-size: 0.9em; } .grade-1-2 .shell-icon-btn { width: 50px; height: 50px; font-size: 1.2em; } .grade-1-2 .shell-theme-dot { width: 32px; height: 32px; } .grade-1-2 .shell-credit-pill { padding: 8px 14px; font-size: 0.95em; } .grade-3-5 { font-size: 18px; } .grade-3-5 .shell-ctrl-btn { min-height: 40px; padding: 6px 10px; } /* G6-9 (THCS combined band) — values sourced from grade-profiles.json: G6-7 → baseFontSize 17, minTouchTarget 44 G8-9 → baseFontSize 16, minTouchTarget 44 We pick 17 px as the combined default (slightly larger of the two, safer for projector readability) and 44 px touch target (both profiles agree). Denser layout vs G3-5: smaller pill padding, tighter icon-btn. */ .grade-6-9 { font-size: 17px; } .grade-6-9 .shell-ctrl-btn { min-height: 44px; padding: 6px 10px; } .grade-6-9 .shell-icon-btn { width: 36px; height: 36px; } .grade-6-9 .shell-theme-dot { width: 22px; height: 22px; } .grade-6-9 .shell-credit-pill { padding: 5px 11px; font-size: 0.8em; } /* ── Embed mode ───────────────────────────────────────────────── Scoped to `body.shell-embed`, auto-added by the shell JS when the URL has `?embed=1` (see lesson-app-shell.js `_applyEmbedBodyClass`). Purpose: - Iframe already provides margins + chrome (slide canvas), so we strip the app's own outer padding / transparent bg bleed. - The shell header is skipped by `header.mount()` in embed mode; we also belt-and-braces hide any stale `.shell-header` DOM. - Embedded real estate (~1100×520 px inside the slide canvas) is tighter than a full-screen app — reduce font + padding one step. Standalone apps (no `?embed=1`) are unaffected: all rules below are scoped under `.shell-embed`. */ body.shell-embed { margin: 0; padding: 0; background: transparent; overflow: hidden; } body.shell-embed .shell-header { display: none !important; } body.shell-embed .shell-app { height: 100vh; } /* One-step smaller type for embedded instances — ~15 px base body. */ body.shell-embed.grade-1-2, body.shell-embed .grade-1-2 { font-size: 19px; } body.shell-embed.grade-3-5, body.shell-embed .grade-3-5 { font-size: 16px; } body.shell-embed.grade-6-9, body.shell-embed .grade-6-9 { font-size: 15px; } /* ── Modal ──────────────────────────────────────────────────────── Overlay + card pattern. Apps put their own content inside .shell-modal — shell only handles the backdrop + close affordance. */ .shell-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 20px; animation: shell-fadeIn 0.2s ease; } .shell-modal-overlay.visible { display: flex; } @keyframes shell-fadeIn { from { opacity: 0; } to { opacity: 1; } } .shell-modal { background: white; border-radius: 20px; max-width: 90vw; max-height: 85vh; overflow: auto; animation: shell-slideUp 0.3s ease; } @keyframes shell-slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .shell-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 2px solid #f3f4f6; position: sticky; top: 0; background: white; z-index: 10; } .shell-modal-title { font-size: 1.3em; font-weight: 700; color: var(--text); } .shell-modal-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: #f3f4f6; font-size: 1.2em; cursor: pointer; transition: all 0.2s; } .shell-modal-close:hover { background: #e5e7eb; } /* ── Loading overlay ────────────────────────────────────────────── Single instance mounted once by `LessonShell.loading` — show/hide toggles `.visible`. Use for slow AI calls; never leave it visible after an error (the failure case is where .hide() matters most). */ .shell-loading-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 2000; } .shell-loading-bg.visible { display: flex; } .shell-loading-box { background: white; padding: 28px 36px; border-radius: 16px; text-align: center; min-width: 180px; } .shell-loading-emoji { font-size: 2.5em; animation: shell-bounce 1s ease-in-out infinite; } @keyframes shell-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .shell-loading-text { margin-top: 10px; font-size: 1em; font-weight: 700; color: var(--primary); } /* ── Confetti celebration ───────────────────────────────────────── `celebrate(container)` injects confetti divs into the passed container (must be `position: relative`). Self-cleans after ~2.5s. */ .shell-celebration { position: absolute; inset: 0; pointer-events: none; z-index: 100; display: none; } .shell-celebration.visible { display: block; } .shell-confetti { position: absolute; animation: shell-fall 3s ease-out forwards; } @keyframes shell-fall { 0% { opacity: 1; transform: translateY(-20px) rotate(0deg); } 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); } } /* ── Toast / friendly error banner ─────────────────────────────── Used by `/api/ai-proxy` failure path — never raw JSON to students. */ .shell-toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 14px 22px; border-radius: 14px; background: white; box-shadow: 0 8px 30px rgba(0,0,0,0.2); font-weight: 700; color: var(--text); z-index: 1500; animation: shell-fadeIn 0.3s ease; } .shell-toast.error { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; } /* ── Mobile collapse ───────────────────────────────────────────── Narrow classrooms (iPad portrait, smaller projectors): drop the secondary control groups, keep the credit pill + fullscreen. Matches HoaSiAI's @media rules. */ @media (max-width: 800px) { .shell-header { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; } .shell-ctrl-group:not(.shell-ctrl-group-lang):not(.shell-ctrl-group-grade) { display: none; } .shell-theme-dot { display: none; } } @media (max-width: 500px) { .shell-logo { font-size: 1em; } }