/* ========================================================================== GLOBAL — Interactive Activities 2026 ONE shared file: TOKENS (edit here for a rebrand) + shared component styles. Each activity links this and adds only its ACTIVITY-SPECIFIC css (cards etc.). Values verified against Figma (colors + buttons) and the token files (typography.js, spacing.md, lines-borders.md). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); /* Font Awesome Free */ :root { /* ======================= TOKENS (rebrand here) ======================== */ /* Color primitives */ --color-blue-100: #E2EEFF; --color-blue-200: #9DC6FF; --color-blue-300: #4592FF; --color-blue-400: #00409B; --color-blue-500: #00204D; --color-yellow-100: #FFF5D9; --color-yellow-200: #FFECB9; --color-yellow-300: #FFD768; --color-yellow-400: #B08200; --color-yellow-500: #4C3800; --color-green-100: #D8F0E0; --color-green-200: #8FD5A6; --color-green-300: #41AA64; --color-green-400: #22723C; --color-green-500: #044F1D; --color-neutral-000: #FFFFFF; --color-neutral-50: #E5E7EB; --color-neutral-100: #A3ACB7; --color-neutral-200: #6C747F; --color-neutral-300: #485260; --color-neutral-400: #283445; --color-neutral-500: #011633; --color-red-100: #FEC4C1; --color-red-200: #E8706A; --color-red-300: #B3261E; /* Grade palettes (Main used now; accents reserved) */ --grade-lower-main: #F2EDB1; --grade-lower-accent-1: #A4C5FF; --grade-lower-accent-2: #F96B94; --grade-lower-accent-3: #A0BA5D; --grade-upper-main: #BDDBFF; --grade-upper-accent-1: #4592FF; --grade-upper-accent-2: #8D8AFF; --grade-upper-accent-3: #FFB889; --grade-mh-main: #F5F2ED; --grade-mh-accent-1: #00409B; --grade-mh-accent-2: #A675CB; --grade-mh-accent-3: #E1EEFF; /* Semantic status */ --color-correct: var(--color-green-300); --color-incorrect: var(--color-red-300); --color-selected: var(--color-yellow-300); /* Typography (Lexend) */ --font-family: "Lexend", system-ui, -apple-system, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-xs: 0.75rem; --text-s: 0.875rem; --text-m: 1rem; --text-l: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.25rem; /* Spacing (px; DS scale) */ --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 72px; --spacing-24: 80px; --spacing-28: 112px; --spacing-32: 128px; --spacing-36: 144px; --spacing-40: 160px; --spacing-44: 176px; --spacing-48: 192px; --spacing-52: 208px; --spacing-56: 224px; --spacing-60: 240px; --spacing-64: 256px; --spacing-72: 288px; --spacing-80: 320px; --spacing-96: 384px; /* Radius */ --radius-sm: 2px; --radius-default: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px; /* Borders */ --border-width: 1px; --border-color-default: var(--color-neutral-100); --border-color-hover: var(--color-neutral-200); /* Shadows (Figma) */ --shadow-500: 0 10px 32px -4px #18274B1A, 0 6px 14px -6px #18274B1F; --shadow-chip: 0 12px 42px -4px #18274B1F, 0 8px 18px -6px #18274B1F; /* Icons */ --icon-color: var(--color-neutral-500); --icon-color-inverse: #FFFFFF; --icon-size: 1.25rem; /* =================== SEMANTIC ALIASES (design refs these) ============= */ --bg: var(--color-blue-100); /* page background (was #E8F1FB) */ --bg-hover: #CFE1F7; /* literal — no token between Blue 100/200 */ --surface: var(--color-neutral-000);/* white */ --navy: var(--color-blue-500); /* was #1A3561 → closest Blue 500 */ --navy-mid: var(--color-blue-300); /* was #2F5FCC → closest Blue 300 */ --text: var(--color-neutral-500);/* was #1A3561 → Neutral 500 */ --muted: var(--color-neutral-200);/* was #6B7A99 → Neutral 200 */ --card-border: rgba(26,53,97,0.09); /* literal — navy tint */ --slot-bg: rgba(26,53,97,0.04); /* literal — navy tint */ --slot-border: rgba(26,53,97,0.22); /* literal — navy tint */ --correct: var(--color-correct); --incorrect: var(--color-incorrect); --selected: var(--color-selected); /* --topbar-bg / --topbar-title are set by the grade classes (lower/upper/mh), which every activity carries on . There is no ungraded "base" state. */ --btn-yellow: var(--color-yellow-200); --btn-yellow-hover: var(--color-yellow-300); --btn-blue: var(--color-blue-400); --btn-blue-hover: var(--color-blue-500); --radius: var(--radius-2xl); /* was 14px → 16px (closest) */ --gap: var(--spacing-3); /* 12px */ --font: var(--font-family); /* sizing (mobile-first; desktop bumps below) */ --nub-size: 26px; --nub-center: 50%; --content-max-width: 860px; --content-pad: var(--spacing-5); /* 20px */ --fs-title: var(--text-xl); /* 1.5rem */ --fs-instructions: var(--text-s); --fs-card: var(--text-s); --fs-section-label: var(--text-xs); --fs-btn: var(--text-s); --card-min-h: 60px; --card-pad-y: 14px; --card-pad-x: var(--spacing-4); --rack-width: 300px; --btn-pad-y: 10px; --btn-pad-x: 22px; } /* Responsive type — mirrors typography.js (Tailwind sm=640px, lg=1024px) */ @media (max-width: 1023.98px) { :root { --text-l: 1rem; --text-2xl: 1.75rem; --text-3xl: 2rem; } } @media (max-width: 639.98px) { :root { --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; } } /* Desktop size-up (all bumps in one place) */ @media (min-width: 721px) { :root { --content-max-width: 1120px; --fs-title: 1.785rem; /* 2.1rem * 0.85 — trimmed from Figma's original 2.1rem, header ran too tall */ --fs-instructions: 1.1rem; --fs-card: 1.1rem; --fs-section-label: 0.82rem; --fs-btn: 1rem; --card-min-h: 82px; --card-pad-y: 18px; --card-pad-x: 24px; --rack-width: 380px; --btn-pad-y: 13px; --btn-pad-x: 28px; --gap: 16px; } } /* ========================================================================== BASE ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text); background-color: var(--bg); background-image: radial-gradient(circle, rgba(26,53,97,0.09) 1.5px, transparent 1.5px); background-size: 28px 28px; min-height: 100vh; } /* Middle & High swaps the shared dotted pattern for its own tiled pattern. Fixed pixel background-size (not `cover`/a percentage) so each tile stays the same physical size at every viewport width instead of stretching — same size-consistent-tiling approach as the shared dotted body background above. */ body.grade-mh { background-image: url("assets/shared/pattern tile_blue line.png"); background-size: 80px 80px; background-repeat: repeat; } /* On mobile, Middle & High drops the tiled pattern for a flat page-color background (#E2EEFF). Applies to every interactive activity. */ @media (max-width: 720px) { body.grade-mh { background-image: none; background-color: var(--bg); } } main { padding: 0; } /* Grade-level top bar (grade switch changes ONLY this) — background color, title color, and left illustration per grade, from the Figma "Header Components" specs. The illustration is decorative and is hidden < 480px. */ body.grade-lower { --topbar-bg: var(--color-yellow-100); --topbar-title: var(--text); } /* #FFF5D9 / #011633 */ body.grade-upper { --topbar-bg: var(--color-blue-200); --topbar-title: var(--text); } /* #9DC6FF / #011633 */ body.grade-mh { --topbar-bg: var(--color-blue-400); --topbar-title: var(--color-neutral-000); } /* #00409B / white */ /* Left illustration per grade. NOTE: the url() lives in a rule (not a custom property) so it resolves relative to global.css (repo root) — the same for every activity regardless of its folder depth. Hidden < 480px (see below). */ body.grade-lower .top-bar { background-image: url("assets/shared/topbar-LE.svg"); } body.grade-upper .top-bar { background-image: url("assets/shared/topbar-UE.svg"); } body.grade-mh .top-bar { background-image: url("assets/shared/topbar-MH.svg"); } /* ========================================================================== PROTOTYPE TOOLBAR — DELETE before engineering handoff ========================================================================== */ .proto-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; background: var(--navy); color: white; font-size: 12px; font-family: monospace; } .proto-bar input { flex: 1; min-width: 200px; padding: 5px 10px; border: none; border-radius: 6px; font-family: monospace; font-size: 12px; } .proto-bar button { padding: 5px 12px; border: none; border-radius: 6px; cursor: pointer; background: var(--selected); color: #3a2f00; font-weight: 700; font-family: inherit; } .proto-bar label { display: flex; align-items: center; gap: 5px; opacity: .8; } .proto-bar select { padding: 5px 8px; border: none; border-radius: 6px; font-family: inherit; font-size: 12px; cursor: pointer; } .proto-bar .hint { width: 100%; font-size: 11px; opacity: .5; } /* ========================================================================== STATE / LOADER ========================================================================== */ .state { text-align: center; padding: 100px 20px; color: var(--muted); font-size: 0.95rem; } .state.error { color: var(--incorrect); } .loader { width: 44px; height: 44px; border: 3px solid rgba(26,53,97,0.15); border-top-color: var(--navy-mid); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== TOP BAR ========================================================================== */ .top-bar { background-color: var(--topbar-bg); background-repeat: no-repeat; /* grade illustration set per grade below */ background-position: left top; background-size: auto 100%; /* fills bar height, bleeds to edges */ padding: 14px var(--content-pad); /* was 18px — header ran too tall at every width */ border-radius: 0 0 30px 30px; /* rounded bottom corners (Figma) */ overflow: hidden; /* clip illustration at corners */ } .top-bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 46px; } /* was 56px */ .top-bar-text { grid-column: 2; text-align: center; } .top-bar-action { grid-column: 3; justify-self: end; } .activity-title { font-size: var(--fs-title); font-weight: 700; color: var(--topbar-title); margin-bottom: 6px; line-height: 1.2; } /* Instructions — a white pill at the top of the activity body (Figma "IA Instructions"). Shrinks to its text on wide screens, wraps within the content width on narrow ones. */ .activity-instructions { width: fit-content; max-width: 100%; margin: 0 auto var(--spacing-6); padding: var(--spacing-5); background: var(--surface); color: var(--color-neutral-300); font-size: var(--text-l); font-weight: var(--weight-semibold); text-align: center; line-height: 1.3; border-radius: 20px; } /* Read-aloud button at the end of the instruction sentence */ .instr-tts { border: none; background: transparent; cursor: pointer; color: inherit; font-size: 0.9em; line-height: 1; padding: 4px; margin-left: 8px; border-radius: 6px; opacity: 1; vertical-align: middle; transition: opacity 0.15s, background 0.15s; } .instr-tts:hover { opacity: 1; background: rgba(26,53,97,0.08); } .instr-tts:focus-visible { opacity: 1; outline: 2px solid var(--navy-mid); outline-offset: 2px; } /* Read-aloud (TTS) icon button — shared look for per-item speaker buttons across activities (separate from .instr-tts above, which is the instructions pill's own button and keeps its own spacing/margin). Each activity layers its own positioning on top of this (absolute placement inside a card, flex order, a tighter padding next to inline text, etc). */ .tts { border: none; background: transparent; cursor: pointer; color: var(--color-neutral-300); opacity: 1; line-height: 1; padding: 5px; border-radius: 6px; transition: opacity 0.15s, background 0.15s; } .tts:hover { background: rgba(26,53,97,0.06); } .tts:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 2px; } /* Filled circle number badge — shared across activities with numbered items (Q&A, Fill in the Blanks): Blue/200 circle, medium-weight number. */ .num-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-blue-200); color: var(--text); font-weight: var(--weight-medium); font-size: 0.9em; } /* Grade button treatments (Figma): LE/UE dark-blue button, MH light-blue button */ body.grade-lower .top-bar-action, body.grade-upper .top-bar-action { background: var(--btn-blue); color: var(--color-neutral-000); border: none; box-shadow: 0 2px 12px rgba(0,64,155,0.28); } body.grade-lower .top-bar-action:hover, body.grade-upper .top-bar-action:hover { background: var(--btn-blue-hover); } body.grade-mh .top-bar-action { background: var(--color-blue-200); color: var(--navy); border: none; } body.grade-mh .top-bar-action:hover { background: var(--color-blue-100); } /* Toolbar row (Submit / Restart) */ .toolbar-row { display: flex; justify-content: center; gap: 10px; margin: 24px 0 28px; flex-wrap: wrap; } /* Content shell + section labels */ .app-shell { max-width: var(--content-max-width); margin: 0 auto; padding: 24px var(--content-pad) 80px; } .section-label { font-size: var(--fs-section-label); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 10px; } /* ========================================================================== BUTTONS ========================================================================== */ .btn { border: none; border-radius: 999px; padding: var(--btn-pad-y) var(--btn-pad-x); font-weight: 600; font-size: var(--fs-btn); cursor: pointer; font-family: inherit; transition: transform 0.1s, opacity 0.15s, background-color 0.15s; white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--btn-blue); color: white; box-shadow: 0 2px 12px rgba(0,64,155,0.28); } .btn-primary:hover { background: var(--btn-blue-hover); } .btn-primary:active { background: var(--btn-blue-hover); } .btn-ghost { background: var(--btn-yellow); color: var(--navy); border: 1.5px solid var(--color-yellow-400); } .btn-ghost:hover { background: var(--btn-yellow-hover); border-color: var(--color-yellow-400); } .btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* ========================================================================== MODAL / OVERLAY ========================================================================== */ .overlay { position: fixed; inset: 0; background: rgba(26,53,97,0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; } .overlay[hidden] { display: none; } .modal { position: relative; background: white; color: var(--navy); border-radius: 28px; max-width: 520px; width: 100%; padding: 40px 36px; text-align: center; box-shadow: 0 28px 72px rgba(26,53,97,0.22); animation: modal-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg); color: var(--navy); cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .modal-close:hover { background: var(--bg-hover); } @keyframes modal-in { from { transform: scale(0.88) translateY(16px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .modal h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; line-height: 1.2; } .modal p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin-bottom: 28px; font-weight: 400; } .modal .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .cta-row--single-line { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .cta-row--single-line .btn { padding: 10px 16px; font-size: 0.8rem; flex-shrink: 0; } /* Hero media at the top of content modals (Figma "Activity modal"): the opening/ review image (.modal-media), the pending dashed placeholder (.modal-image-placeholder), or the completed illustration (.completed-art). Full-width, 16:9 (4096/2304), 30px radius. */ .modal-media { display: block; width: 100%; aspect-ratio: 4096 / 2304; object-fit: cover; border-radius: 30px; } .modal-image-placeholder { width: 100%; aspect-ratio: 4096 / 2304; background: var(--bg); border: 2px dashed var(--slot-border); border-radius: 30px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 34px; } .completed-art { width: 360px; max-width: 100%; height: 200px; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; } body.grade-lower .completed-art { background-image: url("assets/shared/completed-LE.png"); } body.grade-upper .completed-art { background-image: url("assets/shared/completed-UE.png"); } body.grade-mh .completed-art { background-image: url("assets/shared/completed-MH.png"); } /* Big modal layout (Figma) — opening / review / completed. Scoped via :has() so small text-only modals (e.g. the review-prompt modal) keep the base .modal style. */ .modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder)) { max-width: 560px; border-radius: 60px; padding: 40px; box-shadow: 0 28px 36px rgba(26,53,97,0.22); } .modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder)) h1 { font-size: 1.875rem; margin: 32px 0 0; } /* 30px, navy (inherited) */ .modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder)) p { color: var(--color-neutral-400); font-size: var(--text-m); line-height: 1.7; margin: 14px 0 0; } .modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder)) .cta-row { gap: 8px; margin-top: 24px; } .modal:has(:is(.completed-art, .modal-media, .modal-image-placeholder)) .cta-row .btn { padding: 14px 20px; font-size: var(--text-m); } /* Opening / review show a single fixed-width primary CTA (180px, Figma) */ .modal:has(:is(.modal-media, .modal-image-placeholder)) .cta-row .btn { min-width: 180px; } /* Shared error-state icon — same treatment as .completed-art above (a plain grade-swapped illustration, no badge/circle wrapper). Any activity's error/fallback card can drop in
. */ .warning-art { width: 200px; height: 200px; max-width: 100%; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; } body.grade-lower .warning-art { background-image: url("assets/shared/warning_LE.png"); } /* The UE illustration's own composition sits off-center within its square canvas, so a mathematically-centered background-position reads as shifted left to the eye — nudge it right to compensate. */ body.grade-upper .warning-art { background-image: url("assets/shared/warning_UE.png"); background-position: 60% center; } body.grade-mh .warning-art { background-image: url("assets/shared/warning_MH.png"); } /* Shared error/fallback card — an activity's boot() drops this in for a bad activity ID (wrong content shape) or a failed fetch alike (see each activity's own renderErrorCard() JS helper, which stays per-activity per the no-shared-JS rule — only the styling is shared here). */ .error-card { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; margin: 0 auto; background: var(--surface); border-radius: 60px; box-shadow: var(--shadow-500); padding: 28px 32px 48px; color: var(--color-neutral-400); text-align: center; } .error-card p { margin: 0; font-size: var(--fs-card); line-height: 1.5; } .error-card-code { font-size: 0.85em; opacity: 0.8; } /* Error state: the grade illustration competes with the (grade-neutral) warning-art, so swap in a plain tiled pattern instead — same regardless of grade or viewport width. Several activities (Matching, Sorting, Q&A, Spinner) set their own per-grade `body.grade-X { background: ... }` in their OWN