/* ============================================================================ * styles.css — Trading in the Zone design system. * OWNER: A1 (Scaffold). All screen agents reuse these tokens + component * classes rather than inventing new ones. See schema.md §9 for the catalog. * * Theming: :root defines LIGHT tokens. [data-theme="dark"] overrides them. * app.js sets data-theme on ; default follows prefers-color-scheme via * the @media block at the bottom (used only when no explicit theme is set). * ========================================================================== */ /* ------------------------------- Reset ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } a { color: inherit; } /* ----------------------------- Design tokens ---------------------------- */ :root { /* Color — light theme */ --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f7; --text: #1a2233; --text-muted: #5b6577; --border: #d9dEe8; --brand: #3b5bdb; /* primary accent */ --brand-ink: #ffffff; /* text on brand */ --accent: #7048e8; --success: #2f9e44; --danger: #e03131; --warning: #f08c00; --info: #1c7ed6; /* Type scale */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; --lh: 1.6; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Radius / shadow / layout */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16); --maxw: 1040px; --focus-ring: 0 0 0 3px rgba(59, 91, 219, 0.45); } /* Explicit dark theme (set by app.js). Also mirrored by the prefers block. */ [data-theme="dark"] { --bg: #0f1420; --surface: #161d2b; --surface-2: #1e2636; --text: #e8ecf4; --text-muted: #9aa5b8; --border: #2b3446; --brand: #5c7cfa; --brand-ink: #0b1020; --accent: #9775fa; --success: #51cf66; --danger: #ff6b6b; --warning: #ffa94d; --info: #4dabf7; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px rgba(92, 124, 250, 0.55); } /* ------------------------------- Base ----------------------------------- */ body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh); color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: var(--fs-2xl); line-height: 1.2; } h2 { font-size: var(--fs-xl); line-height: 1.25; } h3 { font-size: var(--fs-lg); } .text-muted { color: var(--text-muted); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* ----------------------------- App chrome ------------------------------- */ .appbar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-sm); } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; text-decoration: none; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { color: var(--brand); font-size: 1.4em; } .mainnav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: auto; } .mainnav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; } .mainnav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .mainnav a.active { background: var(--brand); color: var(--brand-ink); } .theme-toggle { border: 1px solid var(--border); background: var(--surface-2); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; line-height: 1; } .theme-toggle:hover { background: var(--surface); } .view { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5); flex: 1 0 auto; } .appfoot { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5); color: var(--text-muted); font-size: var(--fs-sm); } /* ----------------------------- Flash / banners -------------------------- */ .flash-region { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); position: sticky; top: 62px; z-index: 15; } .banner, .flash { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); margin-top: var(--sp-3); } .banner-info { border-left-color: var(--info); } .banner-success { border-left-color: var(--success); } .banner-warning { border-left-color: var(--warning); } .banner-danger { border-left-color: var(--danger); } .flash-msg { flex: 1; } .flash-close { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: var(--fs-md); } .flash-close:hover { color: var(--text); } /* ------------------------------- Cards ---------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); } .callout { border-left: 4px solid var(--brand); background: var(--surface-2); } .error-card { border-left: 4px solid var(--danger); } .error-detail { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--text-muted); overflow-x: auto; } .screen-head { margin-bottom: var(--sp-5); } .subtitle { color: var(--text-muted); font-size: var(--fs-lg); } .section-title { margin: var(--sp-5) 0 var(--sp-3); } .stub-note { margin-top: var(--sp-4); font-size: var(--fs-sm); font-style: italic; } /* ------------------------------ Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--brand-ink); } .btn-primary:hover { filter: brightness(1.08); } .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--surface); } .btn-ghost { background: transparent; color: var(--brand); border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); } /* -------------------------- Pills / badges / stats ---------------------- */ .pill { display: inline-block; padding: 2px var(--sp-3); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: capitalize; text-decoration: none; } .pill.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .badge { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); } .stat { flex: 1 1 140px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); text-align: center; box-shadow: var(--shadow-sm); } .stat-num { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--brand); } .stat-label { display: block; font-size: var(--fs-sm); color: var(--text-muted); } /* Tabs / pill rows */ .tab-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); } /* ------------------------ Module grid / tiles --------------------------- */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .module-grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .module-tile { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.08s ease, box-shadow 0.15s ease; } .module-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); } .module-tile.locked { opacity: 0.6; } .module-tile.current { border-color: var(--brand); } .module-tile.complete { border-left: 4px solid var(--success); } .module-card { border-top: 4px solid var(--border); } .module-card.current { border-top-color: var(--brand); } .module-card.complete { border-top-color: var(--success); } .module-card.locked { opacity: 0.7; } .module-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); } .lesson-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); } /* ------------------------------ Stepper --------------------------------- */ .stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; } .step-dot { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-muted); } .step-dot.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .step-dot.done { border-color: var(--success); color: var(--success); } /* ----------------------------- Quiz options ----------------------------- */ .quiz-option { display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--text); } .quiz-option:hover { border-color: var(--brand); } .quiz-option.selected { border-color: var(--brand); background: var(--surface-2); } .quiz-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface)); } .quiz-option.incorrect { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); } /* --------------------------- Form controls ------------------------------ */ .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .field > label { font-weight: 600; font-size: var(--fs-sm); } input[type="text"], input[type="number"], input[type="date"], textarea, select { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); } textarea { min-height: 96px; resize: vertical; } /* ---------------------------- Progress ring ----------------------------- */ .progress-ring { --size: 96px; width: var(--size); height: var(--size); transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 8; } .progress-ring .track { stroke: var(--surface-2); } .progress-ring .value { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; } /* ------------------------------ Flip card ------------------------------- */ .flip-card { background: transparent; perspective: 1000px; min-height: 160px; } .flip-card-inner { position: relative; width: 100%; height: 100%; min-height: 160px; transition: transform 0.5s; transform-style: preserve-3d; } .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); background: var(--surface); display: flex; align-items: center; justify-content: center; text-align: center; } .flip-card-back { transform: rotateY(180deg); background: var(--surface-2); } /* ------------------------------ Utilities ------------------------------- */ .callout .btn-row { margin-bottom: 0; } /* ============================================================================ * ===== Enhancement components (Phase 2) — added by E5 ==================== * Reuses the existing token system (colors / type / spacing / radius / * shadow / focus-ring). Works in BOTH light and dark themes via tokens and * is responsive to ~380px. EVERY animation defined here is neutralised under * `@media (prefers-reduced-motion: reduce)` (see the guard added to the * reduced-motion block at the end of the file). No tokens are redefined for * the screen — the only token overrides live inside `@media print`. * ========================================================================== */ /* 1) Skip link — off-screen until focused, then pinned top-left ---------- */ .skip-link { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--surface); color: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - var(--sp-4))); transition: transform 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: none; box-shadow: var(--focus-ring), var(--shadow); } /* 2) Programmatic screen focus — no visible ring when app.js focuses the * main region (E4 sets tabindex="-1" on #view + focuses on route change). * Scoped to #view only, so focus-visible rings elsewhere are untouched. */ #view:focus, #view[tabindex]:focus, #view[tabindex]:focus-visible { outline: none; box-shadow: none; } /* 3) Onboarding / first-run --------------------------------------------- */ .welcome-card { border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface)); padding: var(--sp-6); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); } .welcome-card > .subtitle { margin-top: var(--sp-2); } .path-overview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; margin-top: var(--sp-4); } .path-step { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .path-step.current { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); } .path-step.done { color: var(--success); } /* small connectors between steps (decorative → glyph) */ .path-step:not(:last-child)::after { content: "\2192"; margin-left: var(--sp-2); color: var(--text-muted); opacity: 0.5; font-weight: 700; } /* 4) PWA install -------------------------------------------------------- */ .install-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); } .install-banner .install-text { flex: 1 1 200px; } .btn-install { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: none; } .btn-install:hover { filter: brightness(1.08); text-decoration: none; } .btn-install:active { transform: translateY(1px); } /* 5) Utility actions (Export / Back up / Import / Reminder) -------------- */ .util-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .btn-util { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: none; } .btn-util:hover { background: var(--surface); text-decoration: none; } .btn-util:active { transform: translateY(1px); } .field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .field-inline input[type="time"] { width: auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; } .field-inline input[type="time"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); } /* 6) Inline reason hint near a disabled Next button --------------------- */ .nav-hint { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); } /* 8) Celebration -------------------------------------------------------- */ .celebrate { position: relative; border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--success) 12%, var(--surface)); padding: var(--sp-5); text-align: center; animation: tz-pop 0.42s cubic-bezier(0.2, 0.85, 0.3, 1.15) both; } @keyframes tz-pop { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: none; } } .spark { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--success); transform: rotate(45deg); opacity: 0.9; animation: tz-twinkle 1.8s ease-in-out infinite; } .spark.accent { background: var(--brand); } @keyframes tz-twinkle { 0%, 100% { opacity: 0.35; transform: rotate(45deg) scale(0.85); } 50% { opacity: 1.0; transform: rotate(45deg) scale(1.15); } } /* 9) Certificate (graduation report) ------------------------------------ */ .cert { position: relative; max-width: 760px; margin: var(--sp-5) auto; padding: var(--sp-7) var(--sp-6); border: 2px solid var(--brand); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); text-align: center; } .cert::after { content: ""; position: absolute; inset: var(--sp-3); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius); pointer-events: none; } .cert > * { position: relative; } .cert h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); } .cert .cert-name { font-size: var(--fs-2xl); font-weight: 700; color: var(--brand); } .cert .cert-seal { font-size: var(--fs-3xl); color: var(--brand); line-height: 1; } /* 10) Screen mount transition ------------------------------------------- */ .fade-in { animation: tz-fade-in 0.16s ease both; } @keyframes tz-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* 11) Keyboard hint chip ------------------------------------------------ */ .kbd { display: inline-block; min-width: 1.6em; padding: 0 var(--sp-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; text-align: center; } /* 12) Radio-style option groups (survey 5-point scale + lab Yes/No) ------ * Mirrors .quiz-option so the survey/lab options stay visually * consistent with the lesson checks. Works via [aria-checked="true"]. */ [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .scale-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); } .scale-group .scale-option { flex: 1 1 0; min-width: 60px; } [role="radio"], .scale-option { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; text-align: center; cursor: pointer; } [role="radio"]:hover, .scale-option:hover { border-color: var(--brand); } [role="radio"][aria-checked="true"], .scale-option[aria-checked="true"], .scale-option.selected { border-color: var(--brand); background: var(--surface-2); font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand); } [role="radio"]:focus-visible, .scale-option:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--brand); } /* Print / screen visibility helpers ------------------------------------- */ .print-only { display: none; } /* shown only inside @media print */ /* .no-print needs no screen rule; it is hidden inside @media print. */ /* ============================================================================ * ===== Path / Flags / Tags (v2) — added by G2 =========================== * The app is moving from hard locks -> non-blocking FLAGS, journals -> TAG * pickers, and adds a still-point-style course PATH / TRAIL. All classes * below reuse the existing token system (no tokens redefined), work in BOTH * light + dark themes, wrap/stack without horizontal scroll down to ~380px, * and every animation is neutralised under prefers-reduced-motion (guards at * the end of this section). Existing components are NOT restyled regressively; * only the hard-locked module look is softened into an "explorable" signpost. * ========================================================================== */ /* 1) Flag banner — a calm, non-blocking advisory bar at the top of #view. * Reads as a gentle signpost (soft --info tint + left accent + ⚑ marker), * never an error. Wraps gracefully; the action is a ≥44px touch target. */ .flag-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border)); border-left: 4px solid var(--info); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--info) 8%, var(--surface)); color: var(--text); box-shadow: var(--shadow-sm); } .flag-banner::before { content: "\2691"; /* ⚑ signpost marker */ flex: 0 0 auto; align-self: center; color: var(--info); font-size: var(--fs-lg); line-height: 1; } .flag-banner .flag-msg { flex: 1 1 200px; min-width: 0; /* allow the text to wrap instead of overflow */ } .flag-banner a, .flag-banner .flag-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* comfortable touch target */ padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); color: var(--info); font-weight: 600; text-decoration: underline; cursor: pointer; background: transparent; border: 1px solid transparent; } .flag-banner a:hover, .flag-banner .flag-action:hover { background: color-mix(in srgb, var(--info) 14%, transparent); text-decoration: underline; } .flag-banner a:focus-visible, .flag-banner .flag-action:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* 2) Course path / Trail — the still-point-inspired vertical journey. * A single connective spine runs through the circular markers; each node * is a link/button milestone. Nodes are contiguous (no flex gap) so the * per-node ::before segments join into one continuous rail; the first and * last segments are trimmed to their marker centre. */ .trail { display: flex; flex-direction: column; gap: 0; /* contiguous so spine segments connect */ margin: var(--sp-4) 0; padding: 0; } .trail-node { position: relative; display: grid; grid-template-columns: 32px 1fr; /* rail column + body */ align-items: start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; color: var(--text); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); } /* the connective spine segment (one per node, joined by contiguous layout) */ .trail-node::before { content: ""; position: absolute; left: 15px; /* centre of the 32px rail (marker centred) */ top: 0; bottom: 0; width: 2px; background: var(--border); z-index: 0; } .trail-node:first-child::before { top: 25px; } /* start at marker */ .trail-node:last-child::before { bottom: auto; height: 25px; } /* stop at marker */ .trail-node:only-child::before { display: none; } /* completed segments read as green progress up the path */ .trail-node.done::before { background: color-mix(in srgb, var(--success) 45%, var(--border)); } /* interactive nodes (a / button) get clear hover + focus feedback */ a.trail-node, button.trail-node { width: 100%; font: inherit; color: var(--text); background: transparent; cursor: pointer; } button.trail-node { text-align: left; } a.trail-node:hover, button.trail-node:hover { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); text-decoration: none; } .trail-node:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* the circular node dot that sits ON the spine */ .trail-marker { position: relative; z-index: 1; /* above the spine line */ justify-self: center; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; line-height: 1; } /* Node states ----------------------------------------------------------- */ /* done: filled success marker with a ✓ */ .trail-node.done .trail-marker { border-color: var(--success); background: var(--success); color: var(--brand-ink); } .trail-node.done .trail-marker::before { content: "\2713"; } /* ✓ */ .trail-node.done .trail-title { color: var(--text-muted); } /* current: prominent brand "you are here" marker with a soft pulse-glow */ .trail-node.current { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); } .trail-node.current .trail-marker { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); /* static ring = reduced-motion fallback; the pulse animates on top */ box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); animation: tz-trail-pulse 2s ease-in-out infinite; } .trail-node.current .trail-title { color: var(--brand); } @keyframes tz-trail-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 6%, transparent); } } /* upcoming: outlined / faded, dashed marker */ .trail-node.upcoming { color: var(--text-muted); } .trail-node.upcoming .trail-marker { border-style: dashed; border-color: var(--border); background: var(--surface); color: var(--text-muted); } .trail-node.upcoming .trail-title { color: var(--text-muted); } /* flagged: ⚑ prerequisite affordance — still clearly explorable, NOT a lock */ .trail-node.flagged .trail-marker { border-color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--surface)); color: var(--info); } .trail-node.flagged .trail-marker::before { content: "\2691"; } /* ⚑ */ /* Node body ------------------------------------------------------------- */ .trail-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; /* let long titles wrap, no horizontal scroll */ padding-bottom: var(--sp-1); } .trail-title { font-weight: 700; font-size: var(--fs-md); color: var(--text); } .trail-meta { font-size: var(--fs-sm); color: var(--text-muted); } /* a module's child lessons: small, indented under the node */ .trail-sub { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--border); } .trail-sub-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); } /* 3) Tag pickers — journals become tag-only. ----------------------------- * .tag-picker wraps selectable .tag-chip pills; .tag-group labels a set; * .tag-list shows chosen tags read-only on an entry. */ .tag-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .tag-group-label { font-weight: 600; font-size: var(--fs-sm); color: var(--text); } .tag-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .tag-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .tag-chip:hover { border-color: var(--brand); background: var(--surface); } .tag-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* selected: brand-tinted with a leading ✓ (via .selected or aria-pressed) */ .tag-chip.selected, .tag-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); border-color: var(--brand); color: var(--brand); } .tag-chip.selected::before, .tag-chip[aria-pressed="true"]::before { content: "\2713"; /* ✓ */ font-weight: 700; } /* read-only chosen tags on a journal entry — small badge-like pills */ .tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .tag-chip.readonly { min-height: 0; padding: 2px var(--sp-2); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--text-muted); border-color: var(--border); cursor: default; } .tag-chip.readonly:hover { background: var(--surface-2); border-color: var(--border); } .tag-chip.readonly::before { content: none; } /* 4) Module "explorable" state — the old hard-locked (🔒) look is softened * into an available-to-explore signpost: full opacity, an --info dashed * accent + faint tint, still clearly clickable. `.complete` / `.current` * are untouched. Screen agents add the ⚑ markup; .flag-badge is provided * for that. Applies to .locked (retro-fit) and .flagged / .explorable. */ .module-tile.locked, .module-tile.flagged, .module-tile.explorable { opacity: 1; border-style: dashed; border-color: color-mix(in srgb, var(--info) 35%, var(--border)); background: color-mix(in srgb, var(--info) 4%, var(--surface)); } .module-card.locked, .module-card.flagged, .module-card.explorable { opacity: 1; border-top-style: dashed; border-top-color: var(--info); background: color-mix(in srgb, var(--info) 4%, var(--surface)); } /* the state badge in the head reads as an info signpost, not a dead lock */ .module-tile.locked .badge, .module-tile.flagged .badge, .module-tile.explorable .badge, .module-card.locked .badge, .module-card.flagged .badge, .module-card.explorable .badge { background: color-mix(in srgb, var(--info) 14%, var(--surface)); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, var(--border)); } /* reusable inline ⚑ signpost pill for screen agents */ .flag-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--info) 14%, var(--surface)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border)); font-size: var(--fs-xs); font-weight: 700; } .flag-badge::before { content: "\2691"; } /* ⚑ */ /* Responsive (v2) — wrap/stack, comfortable touch targets to ~380px ------ */ @media (max-width: 640px) { .tag-chip { min-height: 44px; } /* touch target on small screens */ } @media (max-width: 380px) { .flag-banner { padding: var(--sp-3); } .flag-banner a, .flag-banner .flag-action { flex: 1 1 auto; } /* full-width tap on wrap */ .trail-node { gap: var(--sp-2); } } /* Reduced motion (v2) — freeze the current-node pulse, keep a static ring. * (The global `*` guard at the end zeroes durations; this keeps the visible * "you are here" glow as the non-animated fallback.) */ @media (prefers-reduced-motion: reduce) { .trail-node.current .trail-marker { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } } /* --------------------- Default to system dark scheme -------------------- */ /* Applies only when app.js has NOT set an explicit data-theme (e.g. first paint before JS runs, or if scripting is disabled). app.js always stamps a concrete theme, which wins over this block. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0f1420; --surface: #161d2b; --surface-2: #1e2636; --text: #e8ecf4; --text-muted: #9aa5b8; --border: #2b3446; --brand: #5c7cfa; --brand-ink: #0b1020; --accent: #9775fa; --success: #51cf66; --danger: #ff6b6b; --warning: #ffa94d; --info: #4dabf7; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } } /* ----------------------------- Responsive ------------------------------- */ @media (max-width: 640px) { .appbar { flex-wrap: wrap; padding: var(--sp-3); } .mainnav { margin-left: 0; width: 100%; order: 3; } /* E5 (UX F): the nav wraps to a full-width row here, making the appbar taller than the fixed 62px `top` the flash-region used — flashes tucked under the header. Drop sticky under 640px so flashes flow right below the appbar regardless of its (variable) wrapped height. */ .flash-region { position: static; top: auto; } /* E5 (UX F): comfortable ~44px touch targets for the wrapped nav links, stretched to share the full-width row. Desktop layout is unaffected. */ .mainnav a { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 44px; padding: var(--sp-2) var(--sp-4); } .view { padding: var(--sp-4); } h1 { font-size: var(--fs-xl); } } @media (max-width: 380px) { .module-grid, .module-grid.wide { grid-template-columns: 1fr; } .stat { flex-basis: 100%; } /* E5: keep Phase 2 cards / certificate comfortable at the smallest width */ .welcome-card { padding: var(--sp-4); } .cert { padding: var(--sp-5) var(--sp-4); } .scale-group .scale-option { min-width: 44px; padding: var(--sp-2); } } /* --------------------------- Reduced motion ----------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .flip-card-inner { transition: none; } /* E5 (Phase 2): explicitly neutralise the new animations and keep a clearly-visible static state where a looping animation is the signal. */ .skip-link { transition: none; } .mic-btn.listening { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 32%, transparent); } .celebrate, .fade-in { animation: none; } .spark { animation: none; opacity: 0.9; } } /* ------------------------------- Print ---------------------------------- */ /* Certificate / reports print on clean white with black text. Chrome is * hidden. Tokens are overridden HERE ONLY (print media) so components that * use tokens automatically render high-contrast — this never affects the * on-screen light/dark themes. */ @media print { :root, [data-theme="light"], [data-theme="dark"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f4; --text: #000000; --text-muted: #333333; --border: #9aa0a6; --brand: #14213a; --brand-ink: #ffffff; --accent: #14213a; --shadow-sm: none; --shadow: none; --shadow-lg: none; } html, body { background: #ffffff !important; color: #000000 !important; } .appbar, .appfoot, .flash-region, .skip-link, .theme-toggle, .mainnav, .install-banner, .util-bar, .mic-btn, .no-print { display: none !important; } .print-only { display: revert !important; } body { display: block; } .view { max-width: none; margin: 0; padding: 0; } .card { box-shadow: none; } .cert { max-width: none; box-shadow: none; page-break-inside: avoid; } a { color: #000000; text-decoration: none; } }