/* ============================================================ LevelAI Design System Neurodivergent-first learning platform ============================================================ */ /* --- Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); /* OpenDyslexic loaded dynamically via JS toggle */ /* --- Design Tokens (aligned with assets/design.md — Modern Academic palette) --- */ :root { /* Colors */ --color-bg: #F2F0EA; /* Tan Background — shared across all roles */ --color-surface: #FFFFFF; --color-border: #E5E2DA; --color-border-md: #D6D3CA; --color-text-primary: #1B1C18; --color-text-secondary: #434842; --color-text-muted: #737971; /* Primary chrome (student / default): brand Dark Green */ --color-green: #566F58; --color-green-light: #E6ECE5; --color-green-mid: #6B8470; --color-green-btn: #566F58; --color-green-hover: #3E5741; --color-orange: #CE6C29; --color-orange-light:#FCF0E9; --color-orange-hover:#B05A20; --color-blue: #2355C7; --color-blue-light: #E6ECF9; --color-blue-hover: #1A44A8; --color-purple: #7B5EA7; --color-purple-light:#F0EBF8; --color-red: #D94F4F; --color-red-light: #FDEAEA; --color-yellow: #C9A227; --color-yellow-light:#FBF5E0; /* Portal / dashboard semantics (from demo/main.css) */ --color-portal-warning: #E85D4A; --color-portal-warning-light: #FEF2F0; --color-portal-success: #2ECC87; --color-portal-success-light: #EAFAF2; --color-portal-streak: #F59E0B; --color-portal-streak-light: #FEF9EC; /* Typography */ --font-base: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', cursive; /* Sizing */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06); --transition: 180ms ease; /* Phase 2: Break chrome (UI-SPEC §Color) */ --color-amber-break: #E89B4E; --color-amber-break-hover: #D4883A; --color-amber-break-bg: #FCEDE4; --color-coral-break-active:#D96A4E; /* Phase 2: Schedule break row bg (UI-SPEC deviation #3) */ --color-break-bg: #FCEDE4; /* Phase 2: Assist / AI-help semantic (UI-SPEC deviation #2) */ --color-blue-help: #4A6B8A; --color-blue-help-hover: #385A78; /* Phase 2 Plan 09 — a11y scaling tokens (STUD-12/13/14; UI-SPEC §Phase 2 CSS Extension Checklist) */ --font-size-scale: 1; --line-height-scale: 1; --letter-spacing: 0em; } /* --- Dark mode --- */ body.dark { --color-bg: #1A1A18; --color-surface: #252520; --color-border: #333330; --color-border-md: #444440; --color-text-primary: #F0EFE9; --color-text-secondary: #A8A79F; --color-text-muted: #6B6A65; --color-green: #5A9AE8; --color-green-light: #1a2838; --color-green-hover: #7EB4F0; --color-orange-light:#2E1E12; --color-blue-light: #151E2E; --color-purple-light:#1E1828; } /* --- Role Accent Colors (D-13) --- Every screen shares the same cream/dark-gray base. A single accent token shifts per role so nav underlines, primary buttons, and focus rings reflect who is signed in. Applied via [data-role="..."] on . */ :root { --color-accent: var(--color-green); --color-accent-light: var(--color-green-light); --color-accent-hover: var(--color-green-hover); } [data-role="student"] { --color-accent: #566F58; --color-accent-light: #E6ECE5; --color-accent-hover: #3E5741; --color-green: #566F58; --color-green-light: #E6ECE5; --color-green-mid: #6B8470; --color-green-btn: #566F58; --color-green-hover: #3E5741; } [data-role="parent"] { --color-accent: #2355C7; --color-accent-light: #E6ECF9; --color-accent-hover: #1A44A8; --color-green: #2355C7; --color-green-light: #E6ECF9; --color-green-mid: #3A6BD9; --color-green-btn: #2355C7; --color-green-hover: #1A44A8; } [data-role="teacher"] { --color-accent: #CE6C29; --color-accent-light: #FCF0E9; --color-accent-hover: #B05A20; --color-green: #CE6C29; --color-green-light: #FCF0E9; --color-green-mid: #DC8348; --color-green-btn: #CE6C29; --color-green-hover: #B05A20; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: calc(16px * var(--font-size-scale)); scroll-behavior: smooth; } body { font-family: var(--font-base); background: var(--color-bg); color: var(--color-text-primary); line-height: calc(1.6 * var(--line-height-scale)); letter-spacing: var(--letter-spacing); min-height: 100vh; display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); } body.dyslexic { font-family: var(--font-dyslexic); } /* Phase 2 Plan 09 — color presets (STUD-14) */ body[data-color-preset="yellow"] { --color-bg: #FFFDE7; --color-text-primary: #2C2C2C; } body[data-color-preset="blue"] { --color-bg: #E8F4FD; --color-text-primary: #1A3A5C; } /* body.dark preset already established in Phase 1 */ img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } input, textarea, select { font: inherit; } /* ============================================================ Top Navigation ============================================================ */ .topnav { position: sticky; top: 0; z-index: 100; background: rgba(245, 245, 240, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); height: 56px; display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 48px); gap: 32px; transition: background var(--transition); } body.dark .topnav { background: rgba(26, 26, 24, 0.88); } .topnav__logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--color-text-primary); text-decoration: none; flex-shrink: 0; } .topnav__logo-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; } .topnav__nav { display: flex; align-items: center; gap: 6px; } .topnav__nav a { padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); transition: color var(--transition), background var(--transition); } .topnav__nav a:hover { color: var(--color-text-primary); background: var(--color-border); } .topnav__nav a.active { color: var(--color-accent); font-weight: 600; border-bottom: 2px solid var(--color-accent); border-radius: 0; } .topnav__controls { margin-left: auto; display: flex; align-items: center; gap: 12px; } .topnav__font-btn { padding: 6px 14px; border: 1px solid var(--color-border-md); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500; color: var(--color-text-secondary); background: var(--color-surface); transition: all var(--transition); white-space: nowrap; } .topnav__font-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .topnav__font-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Light/Dark Toggle */ .theme-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-secondary); } .theme-toggle__track { width: 40px; height: 22px; border-radius: var(--radius-full); background: var(--color-border-md); position: relative; cursor: pointer; transition: background var(--transition); } .theme-toggle__track.active { background: var(--color-accent); } .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--transition); box-shadow: var(--shadow-sm); } .theme-toggle__track.active .theme-toggle__thumb { transform: translateX(18px); } .topnav__datetime { font-size: 0.8125rem; color: var(--color-text-secondary); white-space: nowrap; } /* UI-SPEC §Component Inventory — Break pill (Phase 2) */ .btn-break { display: inline-flex; align-items: center; gap: var(--space-xs, 4px); min-height: 44px; /* WCAG 2.5.5 touch target */ padding: 8px 16px; border: 1.5px solid var(--color-amber-break); color: var(--color-amber-break); background: transparent; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); } .btn-break:hover { background: var(--color-amber-break); color: #fff; } .btn-break:focus-visible { outline: 2px solid var(--color-amber-break); outline-offset: 2px; } .btn-break--cooldown { border-color: var(--color-border-md); color: var(--color-text-muted); cursor: not-allowed; pointer-events: none; } .btn-break--in-break { border-color: var(--color-coral-break-active); color: var(--color-coral-break-active); } /* Phase 10 Wave 3 — Sprint ring (UI-SPEC Surface 7) */ /* Ring wraps the break pill via absolute positioning from JS. Z-index: ring sits BEHIND break pill. Sacred break contract preserved. */ .sprint-ring { position: fixed; pointer-events: none; /* Never intercept break pill clicks */ z-index: 0; /* Behind topnav controls (z-index-based topnav sits above) */ display: flex; align-items: center; justify-content: center; } .sprint-ring--inactive { display: none; } .sprint-ring--active { display: flex; } .sprint-ring__svg { /* SVG ring overlaid around break pill by JS setposition */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; /* Behind break pill button (z-index: 1 in topnav) */ pointer-events: none; } .sprint-ring__track { opacity: 0.3; } .sprint-ring__progress { transition: stroke-dashoffset 1s linear; } .sprint-ring__complete-notice { position: fixed; bottom: calc(var(--topnav-height, 64px) + 12px); right: 16px; font-size: 0.8125rem; color: var(--color-text-secondary); background: var(--color-bg-surface); border: 1px solid var(--color-border-md); border-radius: var(--radius-md); padding: 6px 12px; z-index: 50; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .sprint-ring__complete-notice--visible { opacity: 1; } /* prefers-reduced-motion: discrete state updates only (no smooth animation) */ @media (prefers-reduced-motion: reduce) { .sprint-ring__progress { transition: none; } } /* User avatar pill */ .topnav__user { display: flex; align-items: center; gap: 8px; } .topnav__user-info { text-align: right; line-height: 1.2; } .topnav__user-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); } .topnav__user-role { font-size: 0.75rem; color: var(--color-text-muted); } .topnav__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); } .topnav__avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: var(--color-border); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--color-text-secondary); border: 2px solid var(--color-border-md); overflow: hidden; flex-shrink: 0; } /* The JS-injected inner avatar (app.js injectAvatar) needs the same centering so emojis don't drift to the corner of the circle. */ .topnav__avatar-placeholder .avatar-circle { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem; line-height: 1; } /* ============================================================ User dropdown menu (avatar trigger + Settings / Log out) ============================================================ */ .user-menu { position: relative; } .user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: transparent; border-radius: var(--radius-md); cursor: pointer; font: inherit; color: inherit; } .user-menu__trigger:hover, .user-menu.is-open .user-menu__trigger { background: var(--color-bg); } .user-menu__trigger:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .user-menu__caret { font-size: 10px; color: var(--color-text-muted); transition: transform 0.15s ease; } .user-menu.is-open .user-menu__caret { transform: rotate(180deg); } .user-menu__dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 6px; z-index: 100; display: flex; flex-direction: column; gap: 2px; } /* The `hidden` attribute defaults to display:none, but display:flex above wins on specificity. Re-assert hidden so JS toggling actually closes the menu. */ .user-menu__dropdown[hidden] { display: none; } .user-menu__item { display: block; padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); text-decoration: none; } .user-menu__item:hover, .user-menu__item:focus-visible { background: var(--color-bg); outline: none; } .user-menu__item--danger { color: var(--color-orange, #c0392b); } /* ============================================================ Footer ============================================================ */ .footer { margin-top: auto; border-top: 1px solid var(--color-border); padding: 20px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--color-text-muted); background: var(--color-bg); } .footer__logo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-text-secondary); } .footer__logo-mark { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--color-accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 11px; } .footer__links { display: flex; gap: 20px; } .footer__links a { color: var(--color-text-muted); transition: color var(--transition); } .footer__links a:hover { color: var(--color-text-primary); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 600; transition: all var(--transition); cursor: pointer; border: none; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: var(--shadow-md); } .btn-primary:disabled { background: var(--color-border-md); color: var(--color-text-muted); cursor: not-allowed; } .btn-outline { background: transparent; color: var(--color-text-secondary); border: 1.5px solid var(--color-border-md); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn-ghost { background: transparent; color: var(--color-text-secondary); padding: 8px 12px; } .btn-ghost:hover { color: var(--color-text-primary); background: var(--color-border); } .btn-sm { padding: 8px 16px; font-size: 0.875rem; } .btn-lg { padding: 14px 32px; font-size: 1rem; } /* ============================================================ Form Elements ============================================================ */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); } .form-label .required { color: var(--color-orange); margin-left: 2px; } .form-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-size: 0.9375rem; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input::placeholder { color: var(--color-text-muted); } .form-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); } .form-hint { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; } /* ============================================================ Cards ============================================================ */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } /* ============================================================ Page Wrapper ============================================================ */ .page-wrapper { flex: 1; width: 100%; max-width: none; margin: 0; padding: 32px clamp(16px, 4vw, 48px); } .page-wrapper--narrow { max-width: 800px; margin-left: auto; margin-right: auto; } .page-wrapper--full { max-width: none; width: 100%; } /* ============================================================ Phase 02 Plan 03 — Student home ============================================================ */ .home-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; } @media (max-width: 900px) { .home-layout { grid-template-columns: 1fr; } } .page-greeting { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0 0 24px 0; } /* Student home — dashboard header + current task (matches student home spec) */ .home-dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .home-dashboard-header__intro { flex: 1; min-width: 220px; } .home-dashboard-header__greeting { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.15; margin: 0 0 8px 0; color: var(--color-text-primary); } .home-dashboard-header__subtitle { font-size: 1rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .home-primary-column { min-width: 0; } .home-schedule-panel[hidden] { display: none !important; } .current-task-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); padding: 28px 32px 32px; } .current-task-card--empty .current-task-card__title { color: var(--color-text-primary); } .current-task-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .current-task-card__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-green-light); color: var(--color-green); padding: 6px 12px; border-radius: var(--radius-full); } .current-task-card__estimate { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .current-task-card__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.2; margin: 0 0 12px 0; color: var(--color-green); } .current-task-card__description { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 28px 0; max-width: 52ch; } .current-task-card__description strong { color: var(--color-text-primary); font-weight: 600; } .current-task-card__cta { display: inline-flex; align-items: center; justify-content: center; } .current-task-card--empty .current-task-card__description a { color: var(--color-green); text-decoration: underline; text-underline-offset: 2px; } .current-task-card--empty .current-task-card__description a:hover { color: var(--color-green-hover); } .schedule-timeline--embedded { margin-top: 0; } .subject-tile--muted { background: var(--color-bg); border-style: dashed; opacity: 0.85; } .subject-tile--muted .subject-tile__title { color: var(--color-text-muted); } .daily-goal-card__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .daily-goal-card__icon { font-size: 1.25rem; color: var(--color-green); line-height: 1; margin-top: 2px; } .daily-goal-card__copy { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.45; margin: 4px 0 0 0; } .daily-goal-card__scale { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; } [data-role="student"] .subject-tile:not(.subject-tile--muted) { background: #e8e6e0; border-color: #d9d6ce; } body.dark[data-role="student"] .subject-tile:not(.subject-tile--muted) { background: var(--color-surface); border-color: var(--color-border); } .recommended-task-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; } .recommended-task-card__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); text-transform: none; margin-bottom: 8px; } .recommended-task-card__title { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0 0 8px 0; color: var(--color-text-primary); } .recommended-task-card__subject { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0 0 24px 0; text-transform: capitalize; } .recommended-task-card__meta { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0 0 16px 0; } .recommended-task-card__empty { font-size: 1rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } .home-sidebar { display: flex; flex-direction: column; gap: 24px; } .subjects-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; } .subjects-card__title { font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 14px 0; } .subject-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* 5-subject day: the odd tile spans both columns. */ .subject-tile-grid > .subject-tile:nth-child(5):last-child { grid-column: 1 / -1; } .subject-tile { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; min-height: 124px; display: flex; flex-direction: column; gap: 4px; } .subject-tile__icon { font-size: 1.25rem; line-height: 1; margin-bottom: 4px; } .subject-tile__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.25; } .subject-tile__lesson { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.3; } .subject-tile__source { font-size: 0.6875rem; color: var(--color-text-muted); font-style: italic; line-height: 1.3; } .subject-tile__meta { margin-top: auto; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; } .daily-goal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; } .daily-goal-card__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 12px; } .daily-goal-card__progress { height: 8px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 8px; } .daily-goal-card__bar { height: 100%; background: var(--color-green); border-radius: var(--radius-full); transition: width var(--transition); } .daily-goal-card__meta { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; } /* ============================================================ Phase 02 Plan 04 — Schedule timeline ============================================================ */ .schedule-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .schedule-toggle { display: inline-flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px; } .schedule-toggle__btn { border: none; background: transparent; padding: 8px 20px; min-height: 36px; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition), color var(--transition); } .schedule-toggle__btn.is-active { background: var(--color-green); color: #fff; } .schedule-toggle__btn:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } .schedule-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } /* Each row is rail (time + duration + dot) + card. The rail is fixed-width so cards align vertically regardless of label length. */ .schedule-row { display: grid; grid-template-columns: 96px 1fr; align-items: stretch; gap: 24px; padding: 0; border: 0; background: transparent; min-height: 0; position: relative; } .schedule-row[hidden] { display: none; } .schedule-row__rail { display: grid; grid-template-columns: 1fr 16px; grid-template-rows: auto auto; align-items: start; column-gap: 12px; padding-top: 18px; } .schedule-row__time { grid-column: 1; grid-row: 1; font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; text-align: right; } .schedule-row__duration { grid-column: 1; grid-row: 2; font-size: 0.75rem; color: var(--color-text-muted); text-align: right; margin-top: 2px; } .schedule-row__dot { grid-column: 2; grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--color-green); align-self: center; justify-self: center; margin-top: 4px; } /* Vertical track connecting the dots across rows. Drawn on the row itself so the rail's column 2 stays clean. */ .schedule-row::before { content: ""; position: absolute; left: calc(96px + 24px + 7px); top: 0; bottom: -12px; width: 2px; background: var(--color-border); z-index: 0; } .schedule-row:last-child::before { bottom: 50%; } .schedule-row__dot { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--color-bg); } /* The card itself. */ .schedule-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .schedule-card__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--color-green-light); color: var(--color-green); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .schedule-card__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); } .schedule-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; } .schedule-card__icon { font-size: 1.125rem; line-height: 1; } .schedule-card__summary { margin: 0; font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.45; } .schedule-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; flex-wrap: wrap; } .schedule-card__meta { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--color-text-muted); flex-wrap: wrap; } .schedule-card__pill { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-secondary); } .schedule-card__source { font-style: italic; } .schedule-card__cta { font-size: 0.875rem; font-weight: 600; color: var(--color-green); text-decoration: none; white-space: nowrap; } .schedule-card__cta:hover { text-decoration: underline; } /* Current-task lift */ .schedule-row.is-current .schedule-card { border-color: var(--color-green); box-shadow: 0 0 0 2px var(--color-green-light); } .schedule-row.is-current .schedule-row__dot { background: var(--color-green); } /* Break + lunch share a warm amber treatment; lunch is slightly deeper. */ .schedule-row--break .schedule-card, .schedule-row--lunch .schedule-card { background: var(--color-break-bg); border-color: var(--color-amber-break); } .schedule-row--break .schedule-row__dot, .schedule-row--lunch .schedule-row__dot { background: var(--color-amber-break); } /* PE: standard card, muted dot (no link/CTA). */ .schedule-row--pe .schedule-row__dot { background: var(--color-text-muted); } /* Subject accent dots (legacy class names preserved). */ .schedule-row--subject-reading .schedule-row__dot { background: var(--color-green); } .schedule-row--subject-math .schedule-row__dot { background: var(--color-blue, var(--color-green)); } /* Per-row title kept for backward compat with any external callers. */ .schedule-row__title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); } .schedule-row__action { font-size: 0.8125rem; font-weight: 600; color: var(--color-green); text-decoration: none; } .schedule-row__action:hover { text-decoration: underline; } .schedule-row__meta { font-size: 0.8125rem; color: var(--color-text-secondary); } /* Phase 6 — subject row accents (catalog-driven codes) */ .schedule-row--subject-science .schedule-row__dot { background: var(--color-green); box-shadow: 0 0 0 2px var(--color-green-light); } .schedule-row--subject-social_studies .schedule-row__dot { background: var(--color-orange); box-shadow: 0 0 0 2px var(--color-orange-light); } .schedule-row--subject-spanish .schedule-row__dot { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-light); } /* Phase 6 — learner mode density (moderate global differences) */ html[data-learner-mode="dyslexia"] .page-wrapper { --home-card-gap: 20px; } html[data-learner-mode="dyslexia"] .home-layout, html[data-learner-mode="dyslexia"] .settings-layout { gap: 24px; } html[data-learner-mode="dyslexia"] .current-task-card, html[data-learner-mode="dyslexia"] .settings-section { max-width: 38rem; } html[data-learner-mode="adhd"] .current-task-card { outline: 2px solid var(--color-blue); outline-offset: 3px; } html[data-learner-mode="adhd"] .schedule-row__action, html[data-learner-mode="adhd"] .current-task-card__cta { min-height: 48px; display: inline-flex; align-items: center; } .token-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--radius-full, 999px); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); background: var(--color-bg); border: 1px solid var(--color-border); margin-right: 8px; } .schedule-empty { padding: 32px; text-align: center; color: var(--color-text-secondary); } /* ============================================================ Phase 02 Plan 05 — Lesson player ============================================================ */ .lesson-player { max-width: 640px; margin: 0 auto; padding: 24px 16px 48px; } .lesson-player__header { margin-bottom: 20px; } .lesson-player__subject { font-size: 0.8125rem; font-weight: 600; text-transform: capitalize; color: var(--color-text-secondary); margin: 0 0 4px 0; } .lesson-player__title { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0; color: var(--color-text-primary); } .lesson-player__error { background: var(--color-orange-light); border: 1px solid var(--color-orange); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875rem; color: var(--color-text-primary); } .lesson-player__footer-link { text-align: center; margin-top: 8px; } .lesson-player__footer-link a { font-weight: 600; color: var(--color-green); } .resume-banner { background: var(--color-blue-light); border: 1px solid var(--color-blue); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875rem; color: var(--color-text-primary); transition: opacity 300ms ease; } .resume-banner[hidden] { display: none; } .resume-banner.is-dismissing { opacity: 0; } .step-progress { text-align: center; margin-bottom: 24px; } .step-progress__label { font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 8px; } .step-progress__bar { display: inline-flex; gap: 6px; align-items: center; } .step-progress__dot { display: inline-block; width: 24px; height: 6px; border-radius: var(--radius-full); background: var(--color-border-md); transition: background var(--transition); } .step-progress__dot.is-filled { background: var(--color-green); } .reader-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; } .reader-toolbar__pill { padding: 6px 14px; min-height: 32px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .reader-toolbar__pill:hover { border-color: var(--color-green); color: var(--color-green); } .reader-toolbar__pill.is-active { background: var(--color-green); color: #fff; border-color: var(--color-green); } .reader-toolbar__pill--assist { color: var(--color-blue-help); border-color: var(--color-blue-help); } .reader-toolbar__pill--assist:hover { background: var(--color-blue-help); color: #fff; } .lesson-step { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 24px; margin: 0; } .lesson-step__heading { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 16px 0; color: var(--color-text-primary); } .lesson-step__body { position: relative; } .lesson-step__text { font-size: 1rem; line-height: 1.6; color: var(--color-text-primary); margin: 0; } .lesson-step__tts { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: none; background: transparent; color: var(--color-text-muted); font-size: 18px; cursor: pointer; border-radius: var(--radius-full); transition: color var(--transition); } .lesson-step__tts:hover { color: var(--color-green); } .lesson-step__tts.is-playing { color: var(--color-green); } .mc-option-group { border: 0; padding: 0; margin: 0; } .mc-option { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); padding: 12px 16px; min-height: 48px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--transition), background var(--transition); } .mc-option:hover { border-color: var(--color-green); background: var(--color-green-light); } .mc-option input[type="radio"] { accent-color: var(--color-green); } .mc-option:has(input:checked) { border-color: var(--color-green); background: var(--color-green-light); } .lesson-step__textarea { width: 100%; padding: 12px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; line-height: 1.6; resize: vertical; min-height: 96px; } .lesson-step__textarea:focus { border-color: var(--color-green); outline: none; box-shadow: 0 0 0 3px rgba(79, 112, 85, 0.12); } .lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; } .lesson-nav .btn-lg { min-height: 48px; min-width: 160px; } .lesson-complete { text-align: center; font-size: 1rem; color: var(--color-green); margin-top: 16px; } .lesson-complete__actions { display: flex; justify-content: center; margin-top: 16px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ Phase 02 Plan 06 — TTS tokens per UI-SPEC §Phase 2 CSS Extension Checklist ============================================================ */ :root { --color-tts-highlight: rgba(79, 112, 85, 0.15); } body.dark { --color-tts-highlight: rgba(107, 143, 114, 0.2); } .tts-word { background-color: transparent; border-radius: 3px; transition: background-color 80ms ease; } .tts-word--active { background-color: var(--color-tts-highlight); box-shadow: 0 0 0 2px var(--color-tts-highlight); border-radius: 3px; } [data-tts-block] { position: relative; } /* ============================================================ Onboarding Layout ============================================================ */ .onboard-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .onboard-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 540px; box-shadow: var(--shadow-lg); position: relative; } .onboard-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .onboard-step-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--color-orange); color: #fff; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .onboard-step-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-orange); text-transform: uppercase; border-left: 2px solid var(--color-border-md); padding-left: 12px; } .onboard-close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-border-md); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--transition); line-height: 1; } .onboard-close:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); } .onboard-title { font-size: 1.625rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 8px; line-height: 1.25; } .onboard-subtitle { font-size: 0.9375rem; color: var(--color-text-secondary); margin-bottom: 28px; line-height: 1.5; } .onboard-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border); } .onboard-back { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 500; transition: color var(--transition); } .onboard-back:hover { color: var(--color-text-primary); } .onboard-scroll-hint { text-align: center; margin-top: 20px; color: var(--color-text-muted); font-size: 0.8125rem; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* SSO Buttons */ .sso-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .sso-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 20px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-size: 0.9375rem; font-weight: 500; transition: all var(--transition); cursor: pointer; } .sso-btn:hover { border-color: var(--color-green); box-shadow: var(--shadow-sm); } .sso-btn svg { flex-shrink: 0; } .sso-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--color-text-muted); font-size: 0.8125rem; } .sso-divider::before, .sso-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } /* ============================================================ Avatar Grid (Step 3) ============================================================ */ .avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 8px; } .avatar-option { aspect-ratio: 1; border-radius: 50%; cursor: pointer; position: relative; transition: transform var(--transition); border: 3px solid transparent; } .avatar-option:hover { border-color: var(--color-border-md); } .avatar-option.selected { border-color: var(--color-green); box-shadow: 0 0 0 2px rgba(79, 112, 85, 0.25); } .avatar-option.selected::after { content: '✓'; position: absolute; bottom: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; } .avatar-circle { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .avatar-upload { border: 2px dashed var(--color-border-md); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--color-text-muted); font-size: 0.7rem; font-weight: 500; } .avatar-upload:hover { border-color: var(--color-green); color: var(--color-green); } /* ============================================================ Learning Style Cards (Step 4) ============================================================ */ .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; } .style-card { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 16px; cursor: pointer; transition: all var(--transition); text-align: center; background: var(--color-surface); } .style-card:hover { border-color: var(--color-green-mid); box-shadow: var(--shadow-sm); } .style-card.selected { border-color: var(--color-green); background: var(--color-green-light); box-shadow: 0 0 0 2px rgba(79, 112, 85, 0.15); } .style-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-green-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.375rem; } .style-card.selected .style-card__icon { background: rgba(79, 112, 85, 0.2); } .style-card__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; } .style-card__desc { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.4; } /* ============================================================ Home Dashboard ============================================================ */ .dashboard-grid { display: grid; grid-template-columns: 1fr 310px; gap: 24px; align-items: start; } /* Up Next Card */ .up-next-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; box-shadow: var(--shadow-sm); } .up-next-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-orange-light); color: var(--color-orange); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 10px; } .up-next-card__meta { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 8px; } .up-next-card__title { font-size: 1.375rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 8px; } .up-next-card__desc { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 18px; line-height: 1.5; } /* Progress Circle */ .progress-circle { position: relative; flex-shrink: 0; width: 90px; height: 90px; } .progress-circle svg { transform: rotate(-90deg); } .progress-circle__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: var(--color-text-primary); line-height: 1; } .progress-circle__label span { font-size: 0.65rem; font-weight: 500; color: var(--color-text-muted); } /* Schedule Timeline */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: grid; grid-template-columns: 100px 24px 1fr; gap: 0 16px; align-items: stretch; min-height: 80px; } .timeline-item:last-child .timeline-line { display: none; } .timeline-time { text-align: right; padding-top: 4px; } .timeline-time__hour { font-size: 0.9rem; font-weight: 700; color: var(--color-text-primary); line-height: 1; } .timeline-time__hour.active { color: var(--color-green); } .timeline-time__duration { font-size: 0.75rem; color: var(--color-text-muted); } .timeline-track { display: flex; flex-direction: column; align-items: center; } .timeline-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-md); background: var(--color-surface); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .timeline-dot.done { background: var(--color-border); border-color: var(--color-border-md); } .timeline-dot.done::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); } .timeline-dot.active { background: var(--color-green); border-color: var(--color-green); width: 24px; height: 24px; } .timeline-dot.active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .timeline-dot.break { background: var(--color-orange-light); border-color: var(--color-orange); } .timeline-dot.lunch { background: var(--color-orange-light); border-color: var(--color-orange); } .timeline-line { flex: 1; width: 2px; background: var(--color-border); margin-top: 2px; } .timeline-content { padding: 0 0 20px 0; } .timeline-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; transition: all var(--transition); } .timeline-block:hover { border-color: var(--color-border-md); box-shadow: var(--shadow-sm); } .timeline-block.done { opacity: 0.6; } .timeline-block.done .timeline-block__title { text-decoration: line-through; color: var(--color-text-muted); } .timeline-block.active { border-color: var(--color-green); box-shadow: 0 0 0 2px rgba(79, 112, 85, 0.12), var(--shadow-sm); } .timeline-block.break-block { background: var(--color-orange-light); border-color: rgba(224, 114, 56, 0.3); } .timeline-block.lunch-block { background: var(--color-orange-light); border-color: rgba(224, 114, 56, 0.3); } .timeline-block__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-full); margin-bottom: 6px; } .badge-priority { background: var(--color-blue-light); color: var(--color-blue); } .timeline-block__title { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; } .timeline-block__desc { font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 10px; } .timeline-block__footer { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--color-text-muted); } .timeline-block__footer a { color: var(--color-green); font-weight: 600; display: flex; align-items: center; gap: 4px; } /* Right sidebar widgets */ .widget-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .widget-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 14px; } .subjects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .subject-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; cursor: pointer; transition: all var(--transition); } .subject-card:hover { border-color: var(--color-border-md); box-shadow: var(--shadow-sm); } .subject-card__icon { font-size: 1.5rem; margin-bottom: 6px; } .subject-card__name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); } .subject-card__time { font-size: 0.75rem; color: var(--color-text-muted); } /* Daily goal */ .goal-icon { font-size: 1.75rem; text-align: center; margin-bottom: 8px; } .goal-text { text-align: center; font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; } .goal-subtext { text-align: center; font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 14px; } .progress-bar-wrap { background: var(--color-border); border-radius: var(--radius-full); height: 6px; margin-bottom: 6px; overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--color-green); transition: width 0.6s ease; } .progress-bar-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); } /* ============================================================ Schedule Page ============================================================ */ .schedule-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } .schedule-header h1 { font-size: 2rem; font-weight: 800; color: var(--color-text-primary); } .schedule-header p { font-size: 0.9375rem; color: var(--color-text-secondary); margin-top: 4px; } .view-toggle { display: flex; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); overflow: hidden; } .view-toggle button { padding: 8px 18px; font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); background: transparent; border: none; transition: all var(--transition); } .view-toggle button.active { background: var(--color-green-btn); color: #fff; } .currently-running { background: var(--color-green-light); border: 1px solid rgba(79, 112, 85, 0.3); border-radius: var(--radius-lg); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .currently-running__left { display: flex; align-items: center; gap: 14px; } .currently-running__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .currently-running__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); } .currently-running__sub { font-size: 0.8125rem; color: var(--color-text-secondary); } /* ============================================================ Task / Mission Page ============================================================ */ .task-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .task-back { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); transition: color var(--transition); } .task-back:hover { color: var(--color-text-primary); } .task-subject-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); } .task-focus-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-md); margin-bottom: 24px; } .task-focus-card__title { font-size: 1.75rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 10px; } .task-focus-card__desc { font-size: 0.9375rem; color: var(--color-text-secondary); margin-bottom: 32px; max-width: 480px; margin-left: auto; margin-right: auto; } /* Timer Ring */ .timer-ring { position: relative; width: 160px; height: 160px; margin: 0 auto 28px; } .timer-ring svg { transform: rotate(-90deg); } .timer-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .timer-ring__time { font-size: 2rem; font-weight: 800; color: var(--color-text-primary); line-height: 1; } .timer-ring__sub { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } .task-actions { display: flex; align-items: center; justify-content: center; gap: 14px; } /* Checklist */ .checklist-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 28px 32px; box-shadow: var(--shadow-sm); } .checklist-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1rem; font-weight: 700; color: var(--color-text-primary); } .checklist-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; transition: all var(--transition); cursor: pointer; } .checklist-item:hover { border-color: var(--color-border-md); } .checklist-item.checked { border-color: var(--color-border); opacity: 0.65; } .checklist-item.active { border-color: var(--color-green); background: var(--color-green-light); } .checklist-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--color-border-md); background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition); } .checklist-item.checked .checklist-checkbox { background: var(--color-green); border-color: var(--color-green); color: #fff; } .checklist-label { font-size: 0.9375rem; color: var(--color-text-primary); font-weight: 500; } .checklist-item.checked .checklist-label { text-decoration: line-through; color: var(--color-text-muted); } /* ============================================================ Phase 02 Plan 07 — Break system ============================================================ */ .break-page { flex: 1; width: 100%; max-width: none; margin: 0; padding: 48px clamp(16px, 4vw, 48px); display: flex; flex-direction: column; } .break-page__hero { text-align: center; margin-bottom: 48px; } .break-page__title { font-size: 1.5rem; font-weight: 600; margin: 0 0 8px 0; } .break-page__subhead { font-size: 1rem; color: var(--color-text-secondary); margin: 0; } .break-cooldown-msg { background: var(--color-break-bg); border: 1px solid var(--color-amber-break); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 24px; color: var(--color-text-primary); } .break-options { list-style: none; padding: 0; margin: 0 0 32px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .break-options { grid-template-columns: 1fr; } } .break-option { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; text-align: center; transition: border-color var(--transition); } .break-option:hover { border-color: var(--color-green); } .break-option.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; border-color: var(--color-border); } .break-option form { margin: 0; } .break-option__icon { font-size: 32px; color: var(--color-green); margin-bottom: 12px; } .break-option__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px 0; } .break-option__tagline { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0 0 16px 0; min-height: 40px; } /* UI-SPEC — featured 4-7-8 (first activity) */ .break-option--featured { grid-column: 1 / -1; border-color: var(--color-green); background: var(--color-green-light); } @media (min-width: 721px) { .break-option--featured { grid-column: 1 / -1; } } .break-page__back { display: inline-block; color: var(--color-text-secondary); text-decoration: none; font-size: 0.8125rem; } .break-page__back:hover { color: var(--color-green); } /* --- Activity screens --- */ .break-activity { position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; padding: 48px 24px; text-align: center; } .break-exit { position: absolute; top: 72px; right: 24px; font-size: 0.8125rem; color: var(--color-text-secondary); text-decoration: none; } .break-exit:hover { color: var(--color-green); text-decoration: underline; } .break-return { min-width: 200px; } .breathing-animation__circle, .breathing-animation__square { width: 240px; height: 240px; background: var(--color-green-light); border: 2px solid var(--color-green); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: var(--color-green); } .breathing-animation__circle { border-radius: 50%; } .breathing-animation__square { border-radius: var(--radius-lg); } .breathing-animation__meta { font-size: 0.8125rem; color: var(--color-text-muted); margin: 16px 0 0 0; } .breathing-animation__fallback { display: none; } @media (prefers-reduced-motion: no-preference) { .breathing-478 .breathing-animation__circle.phase-0 { transition: transform 4s ease-in-out; transform: scale(1.35); } .breathing-478 .breathing-animation__circle.phase-1 { transition: transform 7s linear; transform: scale(1.35); } .breathing-478 .breathing-animation__circle.phase-2 { transition: transform 8s ease-in-out; transform: scale(0.9); } .breathing-box .breathing-animation__square.phase-0 { transition: transform 4s ease-in-out; transform: scale(1.35); } .breathing-box .breathing-animation__square.phase-1 { transition: transform 4s linear; transform: scale(1.35); } .breathing-box .breathing-animation__square.phase-2 { transition: transform 4s ease-in-out; transform: scale(0.9); } .breathing-box .breathing-animation__square.phase-3 { transition: transform 4s linear; transform: scale(0.9); } } @media (prefers-reduced-motion: reduce) { .breathing-animation__circle, .breathing-animation__square { display: none; } .breathing-animation__meta { display: none; } .breathing-animation__fallback { display: block; font-size: 1rem; line-height: 1.6; max-width: 480px; } } /* Movement */ .break-movement { max-width: 480px; } .break-movement__title { font-size: 1.5rem; font-weight: 600; margin: 0 0 16px 0; } .break-movement__instr { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 32px 0; } .break-movement__timer { font-size: 3rem; font-weight: 600; color: var(--color-green); font-variant-numeric: tabular-nums; } /* Eye tracking */ .break-eye__instr { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 32px; } .break-eye__track { position: relative; width: min(720px, 100%); height: 64px; background: transparent; } .break-eye__dot { position: absolute; top: 24px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-green); } @media (prefers-reduced-motion: no-preference) { .break-eye__dot { animation: eyeTrack 6s linear infinite alternate; } @keyframes eyeTrack { 0% { left: 0; } 100% { left: calc(100% - 16px); } } } /* Phase 02 Plan 08 — break reflection */ .break-reflection-page { max-width: 560px; margin: 0 auto; padding: 48px 24px; } .break-reflection { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 24px; } .break-reflection__title { font-size: 1.5rem; font-weight: 600; margin: 0 0 16px 0; text-align: center; } .break-reflection__textarea { width: 100%; padding: 12px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; line-height: 1.6; resize: vertical; min-height: 96px; } .break-reflection__textarea:focus { border-color: var(--color-green); outline: none; box-shadow: 0 0 0 3px rgba(79, 112, 85, 0.12); } .break-reflection__actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 16px; } .break-reflection__skip { background: none; border: none; padding: 8px 0; font-size: 0.875rem; color: var(--color-text-secondary); cursor: pointer; text-decoration: none; } .break-reflection__skip:hover { text-decoration: underline; color: var(--color-text-primary); } /* ============================================================ Settings Page ============================================================ */ .settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; } .settings-nav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-sm); } .settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); transition: all var(--transition); margin-bottom: 2px; } .settings-nav a:hover { background: var(--color-bg); color: var(--color-text-primary); } .settings-nav a.active { background: var(--color-green-light); color: var(--color-green); font-weight: 600; } .settings-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .settings-section-title { font-size: 1.125rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .settings-row:last-child { border-bottom: none; } .settings-row__info {} .settings-row__label { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); } .settings-row__desc { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 3px; } /* Toggle switch */ .toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch__track { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-border-md); cursor: pointer; transition: background var(--transition); } .toggle-switch input:checked + .toggle-switch__track { background: var(--color-green); } .toggle-switch__track::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform var(--transition); box-shadow: var(--shadow-sm); } .toggle-switch input:checked + .toggle-switch__track::after { transform: translateX(20px); } /* Accessibility feature card */ .a11y-feature-card { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; } .a11y-feature-card.active { border-color: var(--color-blue); background: var(--color-blue-light); } .a11y-feature-card.active-yellow { border-color: var(--color-yellow); background: var(--color-yellow-light); } .a11y-feature-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .a11y-feature-title { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); } .a11y-font-preview { font-size: 0.8125rem; color: var(--color-text-secondary); font-style: italic; padding: 8px 12px; background: var(--color-surface); border-radius: var(--radius-sm); margin-top: 8px; border: 1px solid var(--color-border); } /* Color theme buttons */ .theme-btn-group { display: flex; gap: 10px; } .theme-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1.5px solid var(--color-border-md); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); background: var(--color-surface); cursor: pointer; transition: all var(--transition); } .theme-btn.active { border-color: var(--color-green); color: var(--color-green); background: var(--color-green-light); } /* Profile avatar section */ .profile-avatar-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; } .profile-avatar-wrap { position: relative; } .profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-border); } .profile-avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; border: 3px solid var(--color-border); } .profile-avatar-change { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; border: 2px solid var(--color-surface); } /* Settings save footer */ .settings-save-footer { position: sticky; bottom: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin-top: 16px; } .settings-unsaved { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-orange); font-weight: 500; } /* ============================================================ Welcome / Hero (Start Screen) ============================================================ */ .hero-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; } .hero-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 24px; } .hero-icon--brand { border-radius: var(--radius-lg); background: var(--color-accent); color: #fff; font-size: 2.25rem; font-weight: 700; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 35%, transparent); } .hero-title { font-size: 2.75rem; font-weight: 800; color: var(--color-text-primary); line-height: 1.2; max-width: 540px; margin: 0 auto 16px; } .hero-desc { font-size: 1rem; color: var(--color-text-secondary); max-width: 400px; margin: 0 auto 36px; line-height: 1.6; } .hero-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 0.8125rem; } /* ============================================================ Onboarding Finish Screen ============================================================ */ .finish-avatar { position: relative; width: 90px; height: 90px; margin: 0 auto 20px; } .finish-avatar__img { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--color-border); object-fit: cover; } .finish-avatar__badge { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; border: 2px solid var(--color-surface); } .finish-title { font-size: 2rem; font-weight: 800; color: var(--color-text-primary); text-align: center; margin-bottom: 10px; } .finish-title .name { color: var(--color-green); } .finish-desc { font-size: 0.9375rem; color: var(--color-text-secondary); text-align: center; max-width: 400px; margin: 0 auto 24px; line-height: 1.5; } .finish-reassurance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .finish-reassurance-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; } .finish-reassurance-card__icon { font-size: 1.25rem; flex-shrink: 0; } .finish-reassurance-card__title { font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; } .finish-reassurance-card__desc { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.4; } /* ============================================================ Page headings ============================================================ */ .page-title { font-size: 2rem; font-weight: 800; color: var(--color-text-primary); margin-bottom: 4px; } .page-subtitle { font-size: 0.9375rem; color: var(--color-text-secondary); margin-bottom: 28px; } /* ============================================================ Utilities ============================================================ */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .text-muted { color: var(--color-text-muted); } .text-sm { font-size: 0.875rem; } .font-bold { font-weight: 700; } .text-center { text-align: center; } .w-full { width: 100%; } /* ============================================================ Animations DSGN-05: No decorative animations. Only subtle fade-in for initial page load is retained as acceptable UI feedback. ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.2s ease both; } /* ============================================================ Role Accent Application Role colors are driven by [data-role] on (set in head.php). Additional hook: make the user-role badge in the top nav wear the current role's accent so it reads at a glance during investor demos. ============================================================ */ .topnav__user-role { color: var(--color-accent); } .material-symbols-outlined { font-family: 'Material Symbols Outlined', sans-serif; font-weight: normal; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; line-height: 1; display: inline-block; vertical-align: middle; } /* ============================================================ Login (parity with /demo/public/index.php) ============================================================ */ .login-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px 64px; } .login-card { width: 100%; max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 28px 28px; } .login-brand { text-align: center; margin-bottom: 28px; } .login-brand__mark { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 1.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 35%, transparent); } .login-brand__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; } .login-brand__tagline { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; } .login-alert { background: var(--color-red-light); border: 1px solid var(--color-red); color: var(--color-red); padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 18px; font-size: 0.9375rem; } .login-alert--info { background: var(--color-orange-light); border-color: var(--color-orange); color: var(--color-orange-hover); } .login-sso { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .login-sso form { margin: 0; } .login-form .form-group { margin-bottom: 16px; } .login-form__submit { width: 100%; margin-top: 4px; } .login-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; opacity: 0.85; } .login-divider span:first-child, .login-divider span:last-child { flex: 1; height: 1px; background: var(--color-border); } .login-divider__text { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; } .login-demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .login-demo-grid--five { grid-template-columns: repeat(5, 1fr); } .login-demo-tile { margin: 0; } .login-demo-tile__btn { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); background: transparent; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); color: inherit; font: inherit; } .login-demo-tile__btn:hover { transform: translateY(-1px); } .login-demo-tile__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .login-demo-tile__btn[data-demo-role="student"]:hover { border-color: #566F58; box-shadow: 0 4px 16px rgba(86, 111, 88, 0.2); } .login-demo-tile__btn[data-demo-role="parent"]:hover { border-color: #2355C7; box-shadow: 0 4px 16px rgba(35, 85, 199, 0.2); } .login-demo-tile__btn[data-demo-role="teacher"]:hover { border-color: #CE6C29; box-shadow: 0 4px 16px rgba(206, 108, 41, 0.2); } .login-demo-tile__icon { font-size: 32px; } .login-demo-tile__icon--student { color: #566F58; } .login-demo-tile__icon--parent { color: #2355C7; } .login-demo-tile__icon--teacher { color: #CE6C29; } .login-demo-tile__name { font-size: 0.875rem; font-weight: 600; } .login-demo-tile__role { font-size: 0.75rem; color: var(--color-text-muted); } .login-demo-footnote { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.5; margin-top: 22px; } .login-demo-code { font-family: ui-monospace, monospace; font-size: 0.6875rem; background: var(--color-border); padding: 2px 6px; border-radius: var(--radius-sm); } .login-footer-link { text-align: center; margin-top: 22px; font-size: 0.9375rem; color: var(--color-text-secondary); } .login-footer-link a { color: var(--color-accent); font-weight: 600; } @media (max-width: 720px) { .login-demo-grid--five { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .login-demo-grid { grid-template-columns: 1fr; } .login-demo-grid--five { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Teacher / parent portal shells (mock parity with /demo) ============================================================ */ .portal-page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .portal-page-heading h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin: 0 0 6px; } .portal-page-heading .portal-subtitle { margin: 0; color: var(--color-text-secondary); font-size: 1rem; } .portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; } .portal-stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; text-align: center; transition: box-shadow var(--transition); } .portal-stat-card:hover { box-shadow: var(--shadow-md); } .portal-stat-card__icon { font-size: 28px; color: var(--color-accent); margin-bottom: 8px; } .portal-stat-card__icon--warn { color: var(--color-portal-warning); } .portal-stat-card__value { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; } .portal-stat-card__label { font-size: 0.8125rem; color: var(--color-text-secondary); } .portal-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } .portal-section-head h2 { font-size: 1.125rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; } .portal-badge-warn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 700; background: var(--color-portal-warning-light); color: var(--color-portal-warning); } .portal-alerts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px; } .portal-alert-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 20px; border-left: 4px solid var(--color-border); transition: transform var(--transition), box-shadow var(--transition); } .portal-alert-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .portal-alert-card--high { border-left-color: #D32F2F; } .portal-alert-card--med { border-left-color: var(--color-portal-streak); } .portal-alert-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; } .portal-alert-card__name { font-weight: 700; } .portal-pill { font-size: 0.6875rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); } .portal-pill--high { background: #FFEBEE; color: #D32F2F; } .portal-pill--med { background: var(--color-portal-streak-light); color: var(--color-portal-streak); } .portal-alert-card__msg { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 12px; line-height: 1.45; } .portal-alert-card__action { font-size: 0.875rem; font-weight: 600; color: var(--color-accent); } .portal-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } .portal-roster-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: auto; } .portal-roster { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .portal-roster th { text-align: left; padding: 12px 14px; font-size: 0.75rem; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--color-border); } .portal-roster td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); } .portal-roster tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); } .portal-sidebar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; } .portal-sidebar-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .portal-sidebar-card--accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .portal-sidebar-card--accent h3 { color: #fff; } .portal-sidebar-card--accent p { font-size: 0.9375rem; opacity: 0.95; margin: 0 0 14px; line-height: 1.45; } .portal-sidebar-card--accent .btn-primary { background: #fff; color: var(--color-accent); } .portal-sidebar-card--accent .btn-primary:hover { background: #f2f2f2; } .portal-alert-line { display: flex; gap: 10px; padding: 10px; margin-bottom: 8px; background: var(--color-bg); border-radius: var(--radius-sm); font-size: 0.8125rem; line-height: 1.4; } .portal-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .portal-status--ok { background: var(--color-portal-success-light); color: var(--color-portal-success); } .portal-status--risk { background: var(--color-portal-warning-light); color: var(--color-portal-warning); } .portal-status--watch { background: var(--color-portal-streak-light); color: #B45309; } /* Parent dashboard */ .portal-hero { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; } .portal-hero__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; } .portal-hero__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient( 135deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-bg)) 0%, color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)) 100% ); padding: 24px; } .portal-hero__body { padding: 28px; display: flex; flex-direction: column; justify-content: center; } .portal-timeline { list-style: none; padding: 0; margin: 0; } .portal-timeline li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); } .portal-timeline li:last-child { border-bottom: none; } .portal-timeline__dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; } .portal-tip-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; } .portal-tip-card h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 6px; } .portal-tip-card p { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0; line-height: 1.45; } @media (max-width: 900px) { .portal-stats { grid-template-columns: repeat(2, 1fr); } .portal-alerts-grid { grid-template-columns: 1fr; } .portal-two-col { grid-template-columns: 1fr; } .portal-hero__grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────── */ /* Phase 7 — Wave 1 hooks */ /* Empty slots are invisible until Wave 2/3 plans populate them. */ /* ───────────────────────────────────────────────────────────── */ [data-pre-teach-slot]:empty, [data-ai-help-slot]:empty, [data-nudge-slot]:empty, [data-reflection-slot]:empty, [data-timeline-slot]:empty, [data-approval-queue-slot]:empty, [data-friction-map-slot]:empty, [data-prepublish-slot]:empty, [data-pattern-insights-slot]:empty, [data-engagement-alerts-slot]:empty, [data-research-up-next-slot]:empty, [data-spend-warning-slot]:empty { display: none; } .ai-slot { display: block; } .ai-slot + .ai-slot { margin-top: 1rem; } /* Phase 7 — Pre-teach + tutor styles (07-02). */ @import url('_phase7-preteach-tutor.css'); /* Phase 7 — Wave 2 (07-03) adaptive UI styles. */ @import url('_phase7-adaptive.css'); /* ============================================================ Phase 02 Plan 09 — a11y settings panel (STUD-12/13/14) ============================================================ */ .a11y-panel { padding: 24px 0; } .a11y-field { border: none; padding: 0; margin: 0 0 24px 0; } .a11y-field__legend { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; padding: 0; } .a11y-segmented { display: inline-flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px; } .a11y-segmented__option { position: relative; padding: 8px 16px; min-height: 36px; min-width: 48px; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition), color var(--transition); } .a11y-segmented__option input { position: absolute; opacity: 0; width: 0; height: 0; } .a11y-segmented__option.is-active { background: var(--color-green); color: #fff; } .a11y-swatches { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .a11y-swatch { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .a11y-swatch input { position: absolute; opacity: 0; width: 0; height: 0; } .a11y-swatch__chip { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--color-border); transition: border-color var(--transition), box-shadow var(--transition); } .a11y-swatch.is-active .a11y-swatch__chip { border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(86,111,88,0.18); } .a11y-swatch__label { font-size: 0.75rem; color: var(--color-text-secondary); } .a11y-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; } .a11y-unsaved { font-size: 0.8125rem; color: var(--color-orange); } /* ============================================================ Phase 2.1 Plan 06 — I-need-help widget redesign (D-05/D-06/D-07) Footer-card pill + expandable panel. Existing .ai-help-widget / .ai-help-panel / .ai-help-output / .ai-help-anchor rules live in _phase7-preteach-tutor.css and are preserved; these BEM rules are additive surface treatment for the redesigned chrome. Calm visual system: no decorative color, schedule-card surface treatment, [hidden] continues to hide the panel. ============================================================ */ /* Root container — separates widget visually from step body. */ .ai-help { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); } /* The reader-toolbar "Need help" pill is the single entry point — hide the in-widget pill so we don't show two redundant triggers. The panel below it still expands when the toolbar pill is clicked. */ .ai-help__pill { display: none; } /* Expanded panel — adopts the schedule-card surface treatment so the lesson page reads as one cohesive design (CONTEXT §code_context). */ .ai-help__panel { margin-top: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } /* Reading-only pre-context wrapper — subtle separator before the mode picker. */ .ai-help__pre-context { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } /* Summary overview paragraph — body text, no decorative fill. */ .ai-help__overview { margin: 0 0 10px 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text-secondary); max-width: 60ch; } /* Vocab callouts — compact definition list. */ .ai-help__vocab { margin: 0; display: grid; grid-template-columns: minmax(80px, max-content) 1fr; gap: 4px 12px; font-size: 0.875rem; } .ai-help__vocab dt { font-weight: 600; color: var(--color-text-primary); margin: 0; } .ai-help__vocab dd { margin: 0; color: var(--color-text-secondary); line-height: 1.45; } /* Mode picker fieldset — horizontal radio row, wraps on narrow widths. */ .ai-help__modes { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0; padding: 0; border: 0; } .ai-help__modes label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: var(--color-text-primary); cursor: pointer; } .ai-help__mode-input { margin: 0; cursor: pointer; } /* Selection textarea — calm, no flashy chrome. */ .ai-help__selection { width: 100%; min-height: 64px; font-family: inherit; font-size: 0.9375rem; color: var(--color-text-primary); background: var(--color-surface); border: 1px solid var(--color-border-md); border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical; box-sizing: border-box; } .ai-help__selection:focus-visible { outline: none; border-color: var(--color-accent, var(--color-green)); box-shadow: 0 0 0 3px var(--color-accent-light, var(--color-green-light)); } /* Submit button — uses existing .btn .btn-primary tokens; the BEM class only adds layout spacing so the button doesn't stretch full-width. */ .ai-help__submit { align-self: flex-start; } /* Output area + anchor — additive layout tweaks. */ .ai-help__output { margin: 0; min-height: 1.5em; } .ai-help__anchor { margin: 0; } /* Honor the [hidden] attribute on the panel — JS flips it via aria-expanded. Default browser behavior handles this, but keep an explicit rule documented so future refactors don't introduce a higher-specificity selector that overrides it. */ .ai-help__panel[hidden] { display: none; } /* ============================================================ Phase 2.1 Plan 07 — D-16b card/text intersection on /settings.php ============================================================ GATE-DECISION (locked in Plan 01 by founder, 2026-05-20): card_border_affected_page: /settings.php Root cause: public/settings.php renders

INSIDE the parent

— i.e. a nested .settings-section. The base .settings-section rule (line 2978) gives both elements background + 1px border + 28px padding + shadow, so the outer card and inner card produce overlapping chrome and the "Reading Preferences" heading underline (.settings-section-title's border-bottom) visually intersects the inner card's top border. Fix (scoped — does NOT affect any other .settings-section page): When a .settings-section is also flagged .a11y-panel (only used in the accessibility tab of /settings.php today), neutralize the redundant card chrome — drop the background, border, shadow, and outer padding so the inner block reads as a logical sub-section of its parent card rather than a second card. The .a11y-panel { padding: 24px 0; } rule already above the file stays in effect because it has lower specificity (single class) than this combined selector. */ .settings-section.a11y-panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; margin-bottom: 0; } .settings-section.a11y-panel .settings-section-title { border-bottom: none; padding-bottom: 0; } /* ========================================================== Phase 10 Wave 2 — Gamification / Garden Card (Task 2) ========================================================== */ .garden-card { display: flex; align-items: center; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; margin-top: 16px; } .garden-card__plant { flex: 0 0 80px; width: 80px; height: 80px; color: var(--color-green); overflow: hidden; } .garden-card__plant svg { width: 100%; height: 100%; } .garden-card__text { flex: 1; } .garden-card__title { font-size: 0.9375rem; font-weight: 500; color: var(--color-text-primary); margin: 0 0 6px; } .garden-card__link { margin: 0; } .garden-card__link a { font-size: 0.8125rem; color: var(--color-green); text-decoration: none; } .garden-card__link a:hover { text-decoration: underline; } /* Stage visibility: only the matching stage group shows */ .garden-card [id^="stage-"] { display: none; } .garden-card[data-stage="1"] #stage-1 { display: block; } .garden-card[data-stage="2"] #stage-2 { display: block; } .garden-card[data-stage="3"] #stage-3 { display: block; } .garden-card[data-stage="4"] #stage-4 { display: block; } .garden-card[data-stage="5"] #stage-5 { display: block; } .garden-card[data-stage="6"] #stage-6 { display: block; } /* Gamification slot wrapper */ [data-gamification-slot]:empty { display: none; } /* ========================================================== Phase 10 Wave 2 — Ambient Affirmation (Task 3) ========================================================== */ .ambient-affirmation { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 10; } @keyframes affirmation-pulse { 0% { opacity: 0; transform: scale(0.85); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .ambient-affirmation--show { animation: affirmation-pulse 1000ms ease-out forwards; } /* Grade-band differentiation */ [data-grade-band="6_8"] .ambient-affirmation { color: var(--color-green); } [data-grade-band="6_8"] .ambient-affirmation__ring { border: 2px solid currentColor; border-radius: 50%; width: 28px; height: 28px; } [data-grade-band="9_12"] .ambient-affirmation { color: var(--color-text-muted); } [data-grade-band="9_12"] .ambient-affirmation__ring { border: 1px solid currentColor; border-radius: 50%; width: 28px; height: 28px; } /* Reduced motion: no scale/translate — static hold instead */ @media (prefers-reduced-motion: reduce) { @keyframes affirmation-pulse { 0% { opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } .ambient-affirmation--show { animation: affirmation-pulse 1400ms linear forwards; } } /* ========================================================== Phase 10 Wave 2 — Break-return reward card (Task 4) ========================================================== */ .break-return-reward { display: flex; align-items: center; gap: 14px; background: var(--color-surface-container-low, #F7F5F0); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; } .break-return-reward__plant { flex: 0 0 40px; width: 40px; height: 40px; color: var(--color-green); overflow: hidden; } .break-return-reward__plant svg { width: 100%; height: 100%; } .break-return-reward__body { flex: 1; } .break-return-reward__message { font-size: 0.9375rem; color: var(--color-text-primary); margin: 0 0 4px; } .break-return-reward__chip { display: inline-block; font-size: 0.75rem; color: var(--color-green); border: 1px solid var(--color-green-light); background: var(--color-green-light); border-radius: 100px; padding: 2px 10px; font-weight: 500; } /* ========================================================== Phase 10 Wave 2 — Welcome-back chip (Task 5) ========================================================== */ .welcome-back-chip { display: flex; align-items: center; gap: 12px; background: var(--color-orange-light); border: 1px solid rgba(206, 108, 41, 0.2); border-radius: 100px; padding: 10px 16px; margin-bottom: 16px; font-size: 0.9375rem; color: var(--color-text-primary); position: relative; overflow: hidden; transition: max-height 200ms ease, opacity 200ms ease; } .welcome-back-chip__icon { flex: 0 0 24px; width: 24px; height: 24px; color: var(--color-orange); overflow: hidden; } .welcome-back-chip__icon svg { width: 100%; height: 100%; } .welcome-back-chip__copy { flex: 1; } .welcome-back-chip__dismiss { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--color-text-muted); padding: 0 4px; line-height: 1; } .welcome-back-chip--collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .welcome-back-chip { transition: none; } } /* ========================================================== Phase 10 Wave 2 — My Garden page (Task 6) ========================================================== */ .garden-hero { text-align: center; padding: 32px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 24px; } .garden-hero__plant { width: 240px; height: 240px; margin: 0 auto 16px; color: var(--color-green); } .garden-hero__plant svg { width: 100%; height: 100%; } .garden-hero__label { font-size: 1.0625rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; } .garden-hero__meta { font-size: 0.8125rem; color: var(--color-text-muted); } .garden-section { margin-bottom: 24px; } .garden-section__heading { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 12px; } .garden-cosmetics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .garden-cosmetic-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 12px; text-align: center; } .garden-cosmetic-item--locked { opacity: 0.5; filter: grayscale(1); } .garden-cosmetic-item__plant { width: 60px; height: 60px; margin: 0 auto 8px; color: var(--color-green); overflow: hidden; } .garden-cosmetic-item__plant svg { width: 100%; height: 100%; } .garden-cosmetic-item__name { font-size: 0.75rem; font-weight: 500; color: var(--color-text-primary); margin-bottom: 2px; } .garden-cosmetic-item__hint { font-size: 0.6875rem; color: var(--color-text-muted); } .garden-gift-list { list-style: none; padding: 0; margin: 0; } .garden-gift-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; } .garden-gift-item:last-child { border-bottom: none; } .garden-gift-item__label { color: var(--color-text-primary); } .garden-gift-item__date { color: var(--color-text-muted); font-size: 0.8125rem; } /* ========================================================== Phase 10 Wave 2 — Token balance de-emphasis (Task 9) Hides [data-token-balance] chip on pages that show the garden card. body.body--garden-visible is set by home.php + my-garden.php. ========================================================== */ /* [data-token-balance] chip hidden on garden pages per Q5-B */ body.body--garden-visible [data-token-balance] { display: none; } /* ========================================================== Phase 10 Wave 2 — Settings "Focus & rewards" (Task 7) ========================================================== */ .focus-rewards-section { /* Inherits .settings-section chrome */ } .focus-rewards-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; }