/* ════════════════════════════════════════════════════════════════════ * ZeroSpread School — Shared Theme Tokens * ──────────────────────────────────────────────────────────────────── * One CSS file, loaded once from `app/school/layout.tsx`, defines every * token that any chapter / lesson surface needs in BOTH themes. * * - Dark mode → :root (default). * - Light mode → .light (toggled on `` by SchoolThemeProvider). * * Why CSS variables (and not React state)? * • Theme switches are instant — no re-renders, no closure invalidation * of helper components defined at module scope (which is how * chapters 2–11 are structured). * • Module-level palette objects (`const C = { ... }`) keep working * unchanged — they just hold `var(--zs-...)` strings. * • Chapter-specific accents (e.g. green for chapter 5) stay simple: * each chapter overrides only the few keys it needs. * * Naming convention: `--zs-{category}-{token}` to avoid collisions with * any global theme tokens elsewhere in the app. * ════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces ───────────────────────────────────────────── */ --zs-page-bg: #070B14; --zs-card-bg: rgba(148, 163, 184, 0.04); --zs-card-bg-strong: rgba(148, 163, 184, 0.06); /* Card border: lifted from 0.10 → 0.13 so cards never feel like ghosts * against the deep navy page background. Still soft, never harsh. */ --zs-card-border: rgba(148, 163, 184, 0.13); --zs-card-border-strong: rgba(148, 163, 184, 0.22); --zs-section-bg: rgba(148, 163, 184, 0.02); /* Divider: lifted 0.08 → 0.11 — section dividers were nearly invisible * and made the rhythm hard to scan. */ --zs-divider: rgba(148, 163, 184, 0.11); /* Typography ─────────────────────────────────────────── */ --zs-text-1: #E2E8F0; --zs-text-2: #94A3B8; --zs-text-3: #64748B; /* Depth tokens — shared shadow recipes used by hero / cards * (chapter components opt-in via the .zs-chapter-typography * scoped helpers; they never override existing inline shadows). */ --zs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20); --zs-shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.30); --zs-shadow-lg: 0 24px 60px -22px rgba(0, 0, 0, 0.55), 0 8px 22px -10px rgba(0, 0, 0, 0.35); --zs-shadow-hero: 0 40px 100px -40px rgba(0, 0, 0, 0.70), 0 12px 32px -12px rgba(0, 0, 0, 0.40); /* Focus ring — used by the global :focus-visible polish in * ChapterTypography. Gold to match the lesson top bar's accent. */ --zs-focus-ring: 0 0 0 2px rgba(7, 11, 20, 0.95), 0 0 0 4px rgba(224, 181, 71, 0.65); --zs-focus-ring-color: rgba(224, 181, 71, 0.65); /* Selection — warm gold tint that reads on every brand surface. */ --zs-selection-bg: rgba(224, 181, 71, 0.28); --zs-selection-fg: #FFF8E1; /* Brand — accent (default = blue) ────────────────────── */ --zs-accent: #3B82F6; --zs-accent-dim: rgba(59, 130, 246, 0.10); --zs-accent-border: rgba(59, 130, 246, 0.28); /* Semantic colors — green ────────────────────────────── */ --zs-green: #10B981; --zs-green-dim: rgba(16, 185, 129, 0.10); --zs-green-border: rgba(16, 185, 129, 0.28); /* Semantic colors — amber ────────────────────────────── */ --zs-amber: #F59E0B; --zs-amber-dim: rgba(245, 158, 11, 0.10); --zs-amber-border: rgba(245, 158, 11, 0.28); /* Semantic colors — red ──────────────────────────────── */ --zs-red: #EF4444; --zs-red-dim: rgba(239, 68, 68, 0.10); --zs-red-border: rgba(239, 68, 68, 0.28); /* Semantic colors — purple ───────────────────────────── */ --zs-purple: #A855F7; --zs-purple-dim: rgba(168, 85, 247, 0.10); --zs-purple-border: rgba(168, 85, 247, 0.28); /* Semantic colors — teal ─────────────────────────────── */ --zs-teal: #14B8A6; --zs-teal-dim: rgba(20, 184, 166, 0.10); --zs-teal-border: rgba(20, 184, 166, 0.28); /* Semantic colors — blue (kept distinct when accent has * * been overridden to a non-blue value — e.g. ch.5/6/9). */ --zs-blue: #3B82F6; --zs-blue-dim: rgba(59, 130, 246, 0.10); --zs-blue-border: rgba(59, 130, 246, 0.28); /* Brand — gold (theme-shifted per spec) ──────────────── * * dark: #E0B547 light: #B8860B */ --zs-gold: #E0B547; --zs-gold-dim: rgba(224, 181, 71, 0.10); --zs-gold-border: rgba(224, 181, 71, 0.28); } /* ────────────────────────────────────────────────────────────── * Light mode overrides * ────────────────────────────────────────────────────────────── * Surfaces become true white / soft slate; brand colors deepen * one notch (Tailwind 600 → 700-ish) so they keep WCAG-friendly * contrast on white. Borders go from translucent → solid slate * so cards never "disappear" into the background. * ────────────────────────────────────────────────────────────── */ .light, html[data-zs-school-lesson="1"][data-school-theme="light"] { /* Surfaces — pearl / white / graphite (School wide presentation) */ --zs-page-bg: #f6f6f2; --zs-card-bg: #FFFFFF; --zs-card-bg-strong: #fafaf7; /* Hairline borders — not heavy slate cards */ --zs-card-border: rgba(11, 13, 12, 0.08); --zs-card-border-strong: rgba(11, 13, 12, 0.14); --zs-section-bg: #f6f6f2; --zs-divider: rgba(11, 13, 12, 0.08); /* Typography */ --zs-text-1: #0B0D0C; --zs-text-2: rgba(11, 13, 12, 0.70); --zs-text-3: rgba(11, 13, 12, 0.50); /* Depth — flat / architectural, not floating card soup */ --zs-shadow-sm: none; --zs-shadow-md: none; --zs-shadow-lg: none; --zs-shadow-hero: 0 1px 2px rgba(11, 13, 12, 0.04), 0 12px 40px -24px rgba(11, 13, 12, 0.18); /* Focus ring — uses brand gold, but the inner halo flips to white so it * reads against the bright surface. */ --zs-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(184, 134, 11, 0.55); --zs-focus-ring-color: rgba(184, 134, 11, 0.55); --zs-selection-bg: rgba(184, 134, 11, 0.18); --zs-selection-fg: #2A1A00; /* Accent */ --zs-accent: #2563EB; --zs-accent-dim: rgba(37, 99, 235, 0.08); --zs-accent-border: rgba(37, 99, 235, 0.30); /* Green */ --zs-green: #059669; --zs-green-dim: rgba(5, 150, 105, 0.08); --zs-green-border: rgba(5, 150, 105, 0.30); /* Amber */ --zs-amber: #D97706; --zs-amber-dim: rgba(217, 119, 6, 0.08); --zs-amber-border: rgba(217, 119, 6, 0.30); /* Red */ --zs-red: #DC2626; --zs-red-dim: rgba(220, 38, 38, 0.08); --zs-red-border: rgba(220, 38, 38, 0.30); /* Purple */ --zs-purple: #7C3AED; --zs-purple-dim: rgba(124, 58, 237, 0.08); --zs-purple-border: rgba(124, 58, 237, 0.30); /* Teal */ --zs-teal: #0D9488; --zs-teal-dim: rgba(13, 148, 136, 0.08); --zs-teal-border: rgba(13, 148, 136, 0.30); /* Blue */ --zs-blue: #2563EB; --zs-blue-dim: rgba(37, 99, 235, 0.08); --zs-blue-border: rgba(37, 99, 235, 0.30); /* Gold (light spec) */ --zs-gold: #B8860B; --zs-gold-dim: rgba(184, 134, 11, 0.08); --zs-gold-border: rgba(184, 134, 11, 0.30); } .HeroChapterBadgeSwitcher_wrap__esm_o { position: relative; display: inline-flex; margin-bottom: 22px; } .HeroChapterBadgeSwitcher_badge__iskSZ { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; margin: 0; cursor: pointer; font: inherit; text-align: inherit; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .HeroChapterBadgeSwitcher_badge__iskSZ:hover { transform: translateY(-1px); } .HeroChapterBadgeSwitcher_badge__iskSZ:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(224, 181, 71, 0.45); } .HeroChapterBadgeSwitcher_badgeDefault__FV1Pc { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .HeroChapterBadgeSwitcher_badgeDefault__FV1Pc:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); } .HeroChapterBadgeSwitcher_badgePageLight__VDr9i { background: rgba(255, 255, 255, 0.94); border: 1px solid #d6dce5; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } .HeroChapterBadgeSwitcher_badgePageLight__VDr9i:hover { background: #ffffff; border-color: #c8d0da; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1); } .HeroChapterBadgeSwitcher_badgePageLight__VDr9i:focus-visible { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(15, 23, 42, 0.12); } .HeroChapterBadgeSwitcher_badgeGold__vmxwv { background-image: linear-gradient( 135deg, rgba(224, 181, 71, 0.14) 0%, rgba(224, 181, 71, 0.04) 100% ); border: 1px solid rgba(224, 181, 71, 0.32); box-shadow: 0 0 24px rgba(224, 181, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .HeroChapterBadgeSwitcher_badgeGold__vmxwv:hover { border-color: rgba(224, 181, 71, 0.48); } .HeroChapterBadgeSwitcher_label__vrE7_ { font-family: var(--font-heading, "Tajawal", sans-serif); font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); font-weight: 500; letter-spacing: 0.3px; } .HeroChapterBadgeSwitcher_badgePageLight__VDr9i .HeroChapterBadgeSwitcher_label__vrE7_ { color: #0f172a; opacity: 1; mix-blend-mode: normal; filter: none; text-shadow: none; } .HeroChapterBadgeSwitcher_chevron__ozyS2 { flex-shrink: 0; opacity: 0.72; } .HeroChapterBadgeSwitcher_badgePageLight__VDr9i .HeroChapterBadgeSwitcher_chevron__ozyS2 { color: #475569; opacity: 1; mix-blend-mode: normal; filter: none; } .HeroChapterBadgeSwitcher_popover__gDqhM { position: absolute; top: calc(100% + 12px); inset-inline-start: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); max-height: min(72vh, 560px); overflow-y: auto; z-index: 35; border-radius: 16px; padding: 8px; animation: HeroChapterBadgeSwitcher_zs-hero-picker-in__oNj_v 180ms cubic-bezier(0.16, 1, 0.3, 1); transform-origin: top center; } .HeroChapterBadgeSwitcher_popover__gDqhM[dir="rtl"] { transform: translateX(50%); } @keyframes HeroChapterBadgeSwitcher_zs-hero-picker-in__oNj_v { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .HeroChapterBadgeSwitcher_popover__gDqhM[dir="rtl"] { animation-name: HeroChapterBadgeSwitcher_zs-hero-picker-in-rtl__H_EAi; } .HeroChapterBadgeSwitcher_popoverPortal__418AL { position: fixed; inset-inline-start: auto; transform: none; z-index: var(--zs-z-d-page-popover, 1000); /* Desktop V2: popover layer (was 1200) */ max-width: calc(100vw - 32px); max-height: min(70vh, 520px); animation: HeroChapterBadgeSwitcher_zs-hero-picker-portal-in__FrVQh 180ms cubic-bezier(0.16, 1, 0.3, 1); scrollbar-width: none; -ms-overflow-style: none; } .HeroChapterBadgeSwitcher_popoverPortal__418AL::-webkit-scrollbar { width: 0; height: 0; display: none; } .HeroChapterBadgeSwitcher_foundationChapterDropdown__WPneM .HeroChapterBadgeSwitcher_list__nnI5D { scrollbar-width: none; -ms-overflow-style: none; } .HeroChapterBadgeSwitcher_foundationChapterDropdown__WPneM .HeroChapterBadgeSwitcher_list__nnI5D::-webkit-scrollbar { width: 0; height: 0; display: none; } .HeroChapterBadgeSwitcher_popoverPortal__418AL[dir="rtl"] { transform: none; animation-name: HeroChapterBadgeSwitcher_zs-hero-picker-portal-in__FrVQh; } @keyframes HeroChapterBadgeSwitcher_zs-hero-picker-portal-in__FrVQh { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes HeroChapterBadgeSwitcher_zs-hero-picker-in-rtl__H_EAi { from { opacity: 0; transform: translateX(50%) translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateX(50%) translateY(0) scale(1); } } .HeroChapterBadgeSwitcher_themeDark__KeEeG.HeroChapterBadgeSwitcher_popover__gDqhM { background: rgba(11, 16, 28, 0.94); border: 1px solid rgba(224, 181, 71, 0.16); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 24px -12px rgba(0, 0, 0, 0.55); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } .HeroChapterBadgeSwitcher_themeLight__f_51x.HeroChapterBadgeSwitcher_popover__gDqhM { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(184, 134, 11, 0.18); box-shadow: 0 28px 60px -22px rgba(15, 23, 42, 0.28), 0 10px 24px -14px rgba(15, 23, 42, 0.18); } .HeroChapterBadgeSwitcher_backdrop__sFZU4 { position: fixed; inset: 0; z-index: 34; border: none; padding: 0; margin: 0; cursor: pointer; background: rgba(0, 0, 0, 0.35); } .HeroChapterBadgeSwitcher_sheet__gvac5 { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; max-height: min(78vh, 640px); border-start-start-radius: 20px; border-start-end-radius: 20px; padding: 12px 16px max(20px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; animation: HeroChapterBadgeSwitcher_zs-hero-sheet-in__5r8ek 240ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes HeroChapterBadgeSwitcher_zs-hero-sheet-in__5r8ek { from { transform: translateY(100%); } to { transform: translateY(0); } } .HeroChapterBadgeSwitcher_themeDark__KeEeG.HeroChapterBadgeSwitcher_sheet__gvac5 { background: rgba(11, 16, 28, 0.98); border-top: 1px solid rgba(224, 181, 71, 0.16); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55); } .HeroChapterBadgeSwitcher_themeLight__f_51x.HeroChapterBadgeSwitcher_sheet__gvac5 { background: rgba(255, 255, 255, 0.99); border-top: 1px solid rgba(184, 134, 11, 0.16); box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.14); } .HeroChapterBadgeSwitcher_sheetHandle__U_FZs { width: 40px; height: 4px; border-radius: 999px; margin: 0 auto 12px; background: rgba(148, 163, 184, 0.35); } .HeroChapterBadgeSwitcher_sheetHeader__JLrVV { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 10px; } .HeroChapterBadgeSwitcher_sheetTitle__3nz4J { margin: 0; font-family: var(--font-heading, "Tajawal", sans-serif); font-size: 1rem; font-weight: 700; } .HeroChapterBadgeSwitcher_sheetClose__ik2dz { border: none; background: transparent; cursor: pointer; font-family: var(--font-body, "Tajawal", sans-serif); font-size: 0.82rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; } .HeroChapterBadgeSwitcher_themeDark__KeEeG .HeroChapterBadgeSwitcher_sheetTitle__3nz4J { color: #e2e8f0; } .HeroChapterBadgeSwitcher_themeLight__f_51x .HeroChapterBadgeSwitcher_sheetTitle__3nz4J { color: #0f172a; } .HeroChapterBadgeSwitcher_themeDark__KeEeG .HeroChapterBadgeSwitcher_sheetClose__ik2dz { color: #94a3b8; } .HeroChapterBadgeSwitcher_themeLight__f_51x .HeroChapterBadgeSwitcher_sheetClose__ik2dz { color: #64748b; } .HeroChapterBadgeSwitcher_list__nnI5D { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 8px; } .HeroChapterBadgeSwitcher_listHeader__h3jIm { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 8px; } .HeroChapterBadgeSwitcher_listCaption__9Bxkt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; opacity: 0.65; } .HeroChapterBadgeSwitcher_listTrack__SZsOc { font-size: 0.98rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .HeroChapterBadgeSwitcher_listCount__z5U7R { margin-inline-start: auto; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 600; opacity: 0.65; } .HeroChapterBadgeSwitcher_divider__ptgjq { height: 1px; margin: 4px 6px 8px; opacity: 0.12; background: currentColor; } .HeroChapterBadgeSwitcher_item__f4Lw7 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12; border: 1px solid transparent; text-decoration: none; color: inherit; cursor: pointer; width: 100%; text-align: inherit; font: inherit; background: transparent; transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease; } .HeroChapterBadgeSwitcher_item__f4Lw7:disabled { cursor: not-allowed; opacity: 0.45; } .HeroChapterBadgeSwitcher_itemCurrent___mcP8 { border-color: rgba(224, 181, 71, 0.28); background: rgba(224, 181, 71, 0.1); } .HeroChapterBadgeSwitcher_num__HNgOe { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.86rem; } .HeroChapterBadgeSwitcher_meta__pKLxP { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .HeroChapterBadgeSwitcher_itemTitle__p5oZM { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .HeroChapterBadgeSwitcher_itemDesc__b4cXL { font-size: 0.74rem; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .HeroChapterBadgeSwitcher_status__7ujHi { flex-shrink: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 640px) { .HeroChapterBadgeSwitcher_wrap__esm_o { max-width: calc(100vw - 40px); } .HeroChapterBadgeSwitcher_badge__iskSZ { max-width: 100%; } .HeroChapterBadgeSwitcher_label__vrE7_ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .HeroChapterBadgeSwitcher_popover__gDqhM { display: none; } } @media (min-width: 641px) { .HeroChapterBadgeSwitcher_sheet__gvac5, .HeroChapterBadgeSwitcher_backdrop__sFZU4 { display: none; } } .LessonSectionNavigator_fab__r8jlH { position: fixed; inset-inline-end: max(16px, env(safe-area-inset-inline-end, 0px)); bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px)); z-index: 40; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding-inline: 16px; border-radius: 999px; font-family: var(--font-body, "Tajawal", sans-serif); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } @media (max-width: 767px) { .LessonSectionNavigator_fab__r8jlH { bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 24px)); } } .LessonSectionNavigator_fab__r8jlH:hover { transform: translateY(-1px); } .LessonSectionNavigator_fab__r8jlH:active { transform: translateY(0); } .LessonSectionNavigator_fab__r8jlH:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(224, 181, 71, 0.45); } .LessonSectionNavigator_themeDark__jEe1q.LessonSectionNavigator_fab__r8jlH { border: 1px solid rgba(224, 181, 71, 0.28); background: rgba(7, 11, 20, 0.88); color: #e2e8f0; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .LessonSectionNavigator_themeDark__jEe1q.LessonSectionNavigator_fab__r8jlH:hover { background: rgba(11, 16, 28, 0.94); border-color: rgba(224, 181, 71, 0.42); } .LessonSectionNavigator_themeLight__JW0k5.LessonSectionNavigator_fab__r8jlH { border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.92); color: #0f172a; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); } .LessonSectionNavigator_themeLight__JW0k5.LessonSectionNavigator_fab__r8jlH:hover { background: rgba(255, 255, 255, 0.98); border-color: rgba(180, 137, 36, 0.28); } .LessonSectionNavigator_backdrop__moxi1 { position: fixed; inset: 0; z-index: 39; border: none; padding: 0; margin: 0; cursor: pointer; opacity: 0; background: transparent; transition: opacity 220ms ease, background 220ms ease; } .LessonSectionNavigator_backdropVisible__ngaxM { opacity: 1; } .LessonSectionNavigator_themeDark__jEe1q.LessonSectionNavigator_backdropVisible__ngaxM { background: rgba(2, 6, 14, 0.46); backdrop-filter: blur(2px); } .LessonSectionNavigator_themeLight__JW0k5.LessonSectionNavigator_backdropVisible__ngaxM { background: rgba(15, 23, 42, 0.24); backdrop-filter: blur(2px); } .LessonSectionNavigator_sheet__vqaaV { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; max-height: min(68vh, 520px); display: flex; flex-direction: column; border-radius: 18px 18px 0 0; transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); } .LessonSectionNavigator_sheetVisible__3QeAI { transform: translateY(0); opacity: 1; pointer-events: auto; } .LessonSectionNavigator_themeDark__jEe1q.LessonSectionNavigator_sheet__vqaaV { border: 1px solid rgba(224, 181, 71, 0.16); border-bottom: none; background: rgba(11, 16, 28, 0.97); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.32); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .LessonSectionNavigator_themeLight__JW0k5.LessonSectionNavigator_sheet__vqaaV { border: 1px solid rgba(15, 23, 42, 0.08); border-bottom: none; background: rgba(255, 255, 255, 0.98); box-shadow: 0 -14px 36px rgba(15, 23, 42, 0.12); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } @media (min-width: 768px) { .LessonSectionNavigator_sheet__vqaaV { inset-inline: auto; inset-inline-end: max(18px, env(safe-area-inset-inline-end, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 36px)); border-radius: 16px; max-height: min(58vh, 460px); transform: translateY(8px) scale(0.985); } .LessonSectionNavigator_sheetVisible__3QeAI { transform: translateY(0) scale(1); } .LessonSectionNavigator_themeDark__jEe1q.LessonSectionNavigator_sheet__vqaaV { border-bottom: 1px solid rgba(224, 181, 71, 0.16); } .LessonSectionNavigator_themeLight__JW0k5.LessonSectionNavigator_sheet__vqaaV { border-bottom: 1px solid rgba(15, 23, 42, 0.08); } } .LessonSectionNavigator_sheetHandle__p5o_v { flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 2px; border-radius: 999px; background: rgba(148, 163, 184, 0.35); } @media (min-width: 768px) { .LessonSectionNavigator_sheetHandle__p5o_v { display: none; } } .LessonSectionNavigator_sheetHeader__CaA9f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); } .LessonSectionNavigator_sheetTitle__ZsVeg { margin: 0; font-family: var(--font-body, "Tajawal", sans-serif); font-size: 0.92rem; font-weight: 700; } .LessonSectionNavigator_themeDark__jEe1q .LessonSectionNavigator_sheetTitle__ZsVeg { color: #e2e8f0; } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_sheetTitle__ZsVeg { color: #0f172a; } .LessonSectionNavigator_closeBtn__zl7uB { appearance: none; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(148, 163, 184, 0.08); color: #94a3b8; width: 32px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_closeBtn__zl7uB { color: #64748b; background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } .LessonSectionNavigator_closeBtn__zl7uB:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(224, 181, 71, 0.35); } .LessonSectionNavigator_list__sJzem { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px; display: flex; flex-direction: column; gap: 4px; scroll-padding-block: 8px; } .LessonSectionNavigator_item__2QlJ2 { appearance: none; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 12px; padding: 12px 12px 12px 10px; text-align: start; cursor: pointer; display: flex; align-items: stretch; gap: 10px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .LessonSectionNavigator_themeDark__jEe1q .LessonSectionNavigator_item__2QlJ2 { color: #cbd5e1; } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_item__2QlJ2 { color: #334155; } .LessonSectionNavigator_item__2QlJ2:hover { background: rgba(148, 163, 184, 0.08); } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_item__2QlJ2:hover { background: rgba(15, 23, 42, 0.04); } .LessonSectionNavigator_item__2QlJ2:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(224, 181, 71, 0.35); } .LessonSectionNavigator_itemActive__IcDjA { background: rgba(224, 181, 71, 0.1); border-color: rgba(224, 181, 71, 0.22); } .LessonSectionNavigator_themeDark__jEe1q .LessonSectionNavigator_itemActive__IcDjA { color: #f8fafc; } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_itemActive__IcDjA { color: #0f172a; background: rgba(180, 137, 36, 0.08); border-color: rgba(180, 137, 36, 0.18); } .LessonSectionNavigator_itemIndicator__iDiKw { flex-shrink: 0; width: 3px; border-radius: 999px; margin-block: 2px; background: transparent; transition: background 160ms ease; } .LessonSectionNavigator_itemActive__IcDjA .LessonSectionNavigator_itemIndicator__iDiKw { background: rgba(224, 181, 71, 0.85); } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_itemActive__IcDjA .LessonSectionNavigator_itemIndicator__iDiKw { background: rgba(180, 137, 36, 0.75); } .LessonSectionNavigator_itemBody__dW6wU { min-width: 0; flex: 1; } .LessonSectionNavigator_itemTitle__iMzhI { display: block; font-family: var(--font-body, "Tajawal", sans-serif); font-size: 0.88rem; font-weight: 600; line-height: 1.45; } .LessonSectionNavigator_itemSubtitle__HxruZ { display: block; margin-top: 2px; font-family: var(--font-body, "Tajawal", sans-serif); font-size: 0.74rem; line-height: 1.4; } .LessonSectionNavigator_themeDark__jEe1q .LessonSectionNavigator_itemSubtitle__HxruZ { color: #94a3b8; } .LessonSectionNavigator_themeLight__JW0k5 .LessonSectionNavigator_itemSubtitle__HxruZ { color: #64748b; } @media (prefers-reduced-motion: reduce) { .LessonSectionNavigator_fab__r8jlH, .LessonSectionNavigator_item__2QlJ2, .LessonSectionNavigator_sheet__vqaaV, .LessonSectionNavigator_backdrop__moxi1 { transition: none; } .LessonSectionNavigator_sheet__vqaaV, .LessonSectionNavigator_sheetVisible__3QeAI { transform: none; } }