/* =================================================================== AI Momentum Learn Hub - redesign Static CSS only. Tokens are namespaced (--hub-*) where they would otherwise clobber the Delivery dashboard's tested values in styles.css. The four brand topic colours and the neutral/surface system are added to :root (new names, no collision); topic-tinted surfaces, fonts and dark theme are scoped to #learn-root / body.theme-topic-N so the Delivery dashboard renders unchanged. =================================================================== */ :root { /* Brand topic colours (the recognisable programme set) */ --topic-1: #4B2AAD; --topic-2: #0D9488; --topic-3: #2563EB; --topic-4: #A21CAF; /* Text-safe variants (small coloured text on light) */ --topic-1-text: #4B2AAD; --topic-2-text: #0A7971; --topic-3-text: #2563EB; --topic-4-text: #A21CAF; /* Per-topic surface tints (light) */ --topic-1-tint: #F0EDFA; --topic-2-tint: #E9F6F4; --topic-3-tint: #EBF1FE; --topic-4-tint: #F7EAF9; /* RGB triplets (rgba glows) */ --topic-1-rgb: 75,42,173; --topic-2-rgb: 13,148,136; --topic-3-rgb: 37,99,235; --topic-4-rgb: 162,28,175; /* Cross-topic gold accent (decorative / on-dark only) */ --accent-gold: #F4B740; --accent-gold-strong: #D77100; /* Neutral + surface system (cool mauve) */ --surface-page: #F5F3F7; --surface-card: #FFFFFF; --surface-hover: #F0EDF3; --surface-sunken: #ECEAF0; --border-subtle: #E4E1E8; --border-default: #D5D2DB; --divider: #EAE7EC; --hub-text-primary: #1A1A2E; --hub-text-secondary: #585573; --hub-text-muted: #6B6884; /* Hue-tinted depth (namespaced; Delivery keeps styles.css shadows) */ --hub-shadow-sm: 0 1px 2px hsl(263deg 30% 50% / .06), 0 2px 4px hsl(263deg 30% 50% / .04); --hub-shadow-md: 0 1px 2px hsl(263deg 30% 50% / .06), 0 3px 8px hsl(263deg 30% 50% / .08), 0 6px 16px hsl(263deg 30% 50% / .05); --hub-shadow-lg: 0 2px 4px hsl(263deg 30% 50% / .07), 0 6px 16px hsl(263deg 30% 50% / .10), 0 12px 32px hsl(263deg 30% 50% / .06); /* Focus ring (works on every surface + brand fill) */ --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #1A1A2E; /* Motion tokens */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 250ms; --dur-moderate: 350ms; --dur-slow: 500ms; --ease-out: cubic-bezier(0,0,0.2,1); --ease-productive: cubic-bezier(0.4,0,0.2,1); --ease-expressive: cubic-bezier(0.34,1.56,0.64,1); /* Fonts */ --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Active topic colour: header stripe + progress bar read this. Default = programme violet (landing / Delivery). Renderer sets it per topic page via documentElement.style.setProperty. */ --active-topic-color: var(--topic-1); } /* =================================================================== DARK MODE (toggled, scoped to Learn via [data-theme="dark"] on ) Delivery charts hardcode their own colours, so only Learn surfaces flip. =================================================================== */ [data-theme="dark"] { --surface-page: #0E0E1A; --surface-card: #161624; --surface-2: #1E1E30; --surface-3: #252540; --border-subtle: rgba(255,255,255,.09); --border-default: rgba(255,255,255,.14); --divider: rgba(255,255,255,.06); --hub-text-primary: #E8E6F0; --hub-text-secondary: #9E9BB8; --hub-text-muted: #7E7CA4; --focus-ring: 0 0 0 2px #0E0E1A, 0 0 0 4px currentColor; color-scheme: dark; } [data-theme="dark"] body.theme-topic-1 { --topic-tint:#1C172B; } [data-theme="dark"] body.theme-topic-2 { --topic-tint:#172B29; } [data-theme="dark"] body.theme-topic-3 { --topic-tint:#171D2B; } [data-theme="dark"] body.theme-topic-4 { --topic-tint:#29172B; } /* retuned topic-text accents on dark (lighter for legibility) */ [data-theme="dark"] .tc-t1 { --tc-text:#8E79CD; } [data-theme="dark"] .tc-t2 { --tc-text:#2EC9BA; } [data-theme="dark"] .tc-t3 { --tc-text:#93AFEA; } [data-theme="dark"] .tc-t4 { --tc-text:#CB65D5; } /* Fix #23: landing hero eyebrow stays programme-violet in dark mode; topic-header eyebrow uses the topic-3 blue retune (tinted per topic context) */ [data-theme="dark"] .hero-eyebrow { color: #8E79CD; } [data-theme="dark"] .topic-header-eyebrow { color: #93AFEA; } /* =================================================================== PASSCODE GATE =================================================================== */ .gate-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); background: radial-gradient(ellipse at 50% 30%, #2d1260, #1a1033); } .gate-overlay[hidden] { display: none; } .gate-card { background: var(--surface-card); border-radius: 16px; padding: 40px; width: min(90vw, 380px); text-align: center; box-shadow: 0 24px 64px rgba(20,8,48,.5); } .gate-card.gate-shake { animation: gateShake 400ms var(--ease-productive); } @keyframes gateShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } .gate-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--hub-text-primary); } .gate-text { margin: 0 0 24px; color: var(--hub-text-secondary); } .gate-input { width: 100%; padding: 12px 14px; min-height: 44px; border: 1px solid var(--border-default); border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: var(--font-body); color: var(--hub-text-primary); background: var(--surface-card); } .gate-input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--topic-1); } .gate-button { margin-top: 16px; width: 100%; padding: 12px; min-height: 44px; border: 0; border-radius: 8px; background: var(--topic-1); color: #fff; font-size: 16px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .gate-button:hover { background: #3A1F8C; } .gate-error { margin-top: 12px; color: #DC2626; font-size: 14px; } .gate-error[hidden] { display: none; } .gate-help { margin-top: 16px; font-size: 13px; color: var(--hub-text-muted); } .gate-help a { color: var(--topic-1-text); text-decoration: underline; } /* =================================================================== SHARED HEADER CHROME (restyled; Delivery still uses .header from styles.css) =================================================================== */ /* 3px header bottom accent stripe; colour follows the active topic */ .header { position: relative; } .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--active-topic-color); z-index: 1; transition: background var(--dur-base) var(--ease-out); } /* Mode segmented control (restyle) */ .mode-nav { display: inline-flex; align-items: center; gap: 0; background: var(--surface-hover); border-radius: 20px; padding: 3px; border: 1px solid var(--border-subtle); } .mode-btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 7px 18px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 17px; cursor: pointer; background: transparent; color: var(--hub-text-secondary); transition: background var(--dur-fast) var(--ease-productive), color var(--dur-fast) var(--ease-productive); } .mode-btn.active { background: var(--surface-card); color: var(--hub-text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(74,42,173,.15); } /* Theme toggle (visible in Learn only) */ .theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--surface-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--hub-text-secondary); font-size: 18px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { background: var(--surface-hover); color: var(--hub-text-primary); } body.mode-delivery .theme-toggle { display: none; } /* Delivery-only cohort select: hidden in Learn, restyled with custom chevron. styles.css already styles .cohort-select; we keep it and just enforce appearance:none + the hidden-in-learn rule here. */ body.mode-learn .cohort-select { display: none; } /* Fix #17: hide the Delivery scroll-progress bar in Learn mode so it does not collide visually with the Learn .reading-progress bar */ body.mode-learn .scroll-progress { display: none; } .cohort-select { appearance: none; -webkit-appearance: none; } #learn-root[hidden], #delivery-root[hidden] { display: none; } /* =================================================================== LEARN ROOT base + dot-grid texture =================================================================== */ #learn-root { font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.65; color: var(--hub-text-primary); background-color: var(--surface-page); --dot-color: #DDD9EC; background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: 24px 24px; min-height: 60vh; } [data-theme="dark"] #learn-root { /* Dim dots for the dark canvas; the per-topic rules below read this var too, so they no longer paint bright light dots in dark mode. */ --dot-color: rgba(255, 255, 255, 0.05); } /* Topic-page ambient wash (upper radial only) layered with the dot-grid */ body.theme-topic-1.mode-learn #learn-root { background-image: radial-gradient(ellipse 1000px 480px at 50% -60px, rgba(75,42,173,.06) 0%, transparent 65%), radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: auto, 24px 24px; } body.theme-topic-2.mode-learn #learn-root { background-image: radial-gradient(ellipse 1000px 480px at 50% -60px, rgba(13,148,136,.05) 0%, transparent 65%), radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: auto, 24px 24px; } body.theme-topic-3.mode-learn #learn-root { background-image: radial-gradient(ellipse 1000px 480px at 50% -60px, rgba(37,99,235,.05) 0%, transparent 65%), radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: auto, 24px 24px; } body.theme-topic-4.mode-learn #learn-root { background-image: radial-gradient(ellipse 1000px 480px at 50% -60px, rgba(162,28,175,.06) 0%, transparent 65%), radial-gradient(circle, var(--dot-color) 1px, transparent 1px); background-size: auto, 24px 24px; } #learn-root .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Per-topic colour custom property carrier */ .tc-t1 { --tc: var(--topic-1); --tc-text: var(--topic-1-text); --tc-tint: var(--topic-1-tint); --tc-rgb: var(--topic-1-rgb); --tc-end: #6B4FCC; } .tc-t2 { --tc: var(--topic-2); --tc-text: var(--topic-2-text); --tc-tint: var(--topic-2-tint); --tc-rgb: var(--topic-2-rgb); --tc-end: #2EC9BA; } .tc-t3 { --tc: var(--topic-3); --tc-text: var(--topic-3-text); --tc-tint: var(--topic-3-tint); --tc-rgb: var(--topic-3-rgb); --tc-end: #5B8EF0; } .tc-t4 { --tc: var(--topic-4); --tc-text: var(--topic-4-text); --tc-tint: var(--topic-4-tint); --tc-rgb: var(--topic-4-rgb); --tc-end: #CB65D5; } /* Focus-visible ring everywhere in Learn + gate */ #learn-root :focus-visible, .gate-card :focus-visible, .mode-btn:focus-visible, .theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } @supports not selector(:focus-visible) { #learn-root a:focus, #learn-root button:focus { outline: 2px solid var(--hub-text-primary); outline-offset: 2px; } } /* =================================================================== LANDING PAGE =================================================================== */ .landing-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* Hero */ .hero-learn { padding: 64px 0 48px; position: relative; } .hero-learn::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 1; max-width: 720px; } .hero-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--topic-1-text); margin-bottom: 16px; } .hero-h1 { font-family: var(--font-display); font-size: clamp(2.0rem, 1.95rem + 2.1vw, 3.5rem); font-weight: 750; line-height: 1.1; letter-spacing: -0.03em; color: var(--hub-text-primary); margin-bottom: 20px; } .hero-lead { font-size: clamp(1.125rem, 1.07rem + 0.3vw, 1.375rem); font-weight: 400; line-height: 1.45; color: var(--hub-text-secondary); max-width: 75ch; } .hero-lead p { margin-bottom: 12px; } .hero-lead p:last-child { margin-bottom: 0; } /* AI Spectrum band (signature) */ .spectrum-band { padding: 56px 0; } .spectrum-band-inner { position: relative; } .spectrum-rail { position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 6px; background: linear-gradient(90deg, var(--topic-1) 0 25%, var(--topic-2) 25% 50%, var(--topic-3) 50% 75%, var(--topic-4) 75% 100%); border-radius: 3px; z-index: 0; } .spectrum-stations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; z-index: 1; } .spectrum-station { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; cursor: default; } /* entrance (gated by body.hub-landed - set once per session by JS) */ body.hub-landed .spectrum-station { opacity: 0; transform: translateY(8px); animation: stationEntrance var(--dur-moderate) var(--ease-expressive) forwards; } body.hub-landed .spectrum-station:nth-child(1) { animation-delay: 0ms; } body.hub-landed .spectrum-station:nth-child(2) { animation-delay: 60ms; } body.hub-landed .spectrum-station:nth-child(3) { animation-delay: 120ms; } body.hub-landed .spectrum-station:nth-child(4) { animation-delay: 180ms; } @keyframes stationEntrance { to { opacity: 1; transform: translateY(0); } } .station-node { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-bottom: 16px; border: 2px solid; /* Opaque fill: tint over the page surface so the gradient rail behind the node cannot show through (the tint alone is translucent in dark mode). */ background-color: var(--surface-page); background-image: linear-gradient(var(--tc-tint), var(--tc-tint)); border-color: var(--tc); color: var(--tc-text); transition: transform var(--dur-fast) var(--ease-out); position: relative; z-index: 1; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .spectrum-station:hover .station-node { transform: translateY(-3px); } } .station-topic-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-text); margin-bottom: 4px; } .station-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--hub-text-primary); margin-bottom: 6px; } .station-blurb { font-size: 0.875rem; line-height: 1.45; color: var(--hub-text-secondary); max-width: 180px; } /* Four topic cards */ .topic-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 64px; } .topic-card { background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--hub-shadow-md), inset 0 1px 0 rgba(255,255,255,.9); border-radius: 12px; padding: 0 24px 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; position: relative; text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } [data-theme="dark"] .topic-card { box-shadow: var(--hub-shadow-md); } .topic-card::before { content: ''; display: block; height: 6px; margin: 0 -24px 20px; background: var(--tc); } .topic-card:hover { box-shadow: var(--hub-shadow-lg), 0 0 0 1px var(--tc); border-color: var(--tc); } .card-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-text); margin-bottom: 8px; } .card-title { font-family: var(--font-display); font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--hub-text-primary); margin-bottom: 10px; } .card-blurb { font-size: 0.9375rem; line-height: 1.5; color: var(--hub-text-secondary); flex: 1; margin-bottom: 16px; } .card-visited-dot { position: absolute; top: 16px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-gold); opacity: 0.6; } .card-explore { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--tc-text); margin-top: auto; } .card-explore .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); } .topic-card:hover .card-explore .arrow { transform: translateX(3px); } /* =================================================================== TOPIC PAGE =================================================================== */ /* Reading-progress bar (under sticky header) */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--active-topic-color); transform-origin: left; transform: scaleX(0); z-index: 200; /* Pinned to the very top of the viewport (above the sticky header), mirroring the Delivery .scroll-progress bar. */ transition: transform var(--dur-fast) var(--ease-productive); } /* Mobile topic pill strip */ .topic-pill-strip { display: flex; gap: 8px; padding: 8px 16px; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); overflow-x: auto; /* Fix #12/#21: add scroll-snap per spec (section 6, Axis 2) */ scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%); } .topic-pill-strip::-webkit-scrollbar { display: none; } .topic-pill { flex-shrink: 0; font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 8px 16px; min-height: 44px; border-radius: 20px; border: none; cursor: pointer; white-space: nowrap; background: var(--surface-hover); color: var(--hub-text-secondary); text-decoration: none; display: inline-flex; align-items: center; /* Fix #12/#21: snap alignment for pills */ scroll-snap-align: start; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .topic-pill:hover:not(.active) { background: var(--surface-sunken); color: var(--hub-text-primary); } .topic-pill.active { background: var(--tc); color: #fff; font-weight: 600; } /* shown only on topic pages, tablet/mobile, learn mode */ .topic-pill-strip { display: none; } @media (max-width: 1023px) { body.mode-learn .topic-pill-strip { display: flex; } } /* Topic header band */ .topic-header-band { /* Fix #6: --topic-tint is never defined; use surface-hover as base. The per-topic overrides below (body.theme-topic-N) provide the real backgrounds. */ background: var(--surface-hover); /* overridden per body.theme-topic-N rules below */ border-top: 3px solid var(--active-topic-color); padding: 40px 24px 36px; position: relative; } .topic-header-band::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; } /* topic-tint per theme (light) */ body.theme-topic-1 .topic-header-band { background: var(--topic-1-tint); } body.theme-topic-2 .topic-header-band { background: var(--topic-2-tint); } body.theme-topic-3 .topic-header-band { background: var(--topic-3-tint); } body.theme-topic-4 .topic-header-band { background: var(--topic-4-tint); } [data-theme="dark"] body.theme-topic-1 .topic-header-band { background: #1C172B; } [data-theme="dark"] body.theme-topic-2 .topic-header-band { background: #172B29; } [data-theme="dark"] body.theme-topic-3 .topic-header-band { background: #171D2B; } [data-theme="dark"] body.theme-topic-4 .topic-header-band { background: #29172B; } .topic-header-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .topic-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--tc-text); margin-bottom: 12px; min-height: 48px; padding: 4px 0; transition: color var(--dur-instant) var(--ease-out); } .topic-back-link .back-arrow { display: inline-flex; transition: transform var(--dur-instant) var(--ease-out); } .topic-back-link:hover .back-arrow { transform: translateX(-3px); } .topic-header-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-text); margin-bottom: 8px; } .topic-header-h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.6rem + 1.1vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--hub-text-primary); margin-bottom: 12px; } .topic-header-tagline { font-size: clamp(1.125rem, 1.07rem + 0.3vw, 1.375rem); color: var(--hub-text-secondary); max-width: 65ch; } /* Compact spectrum reference strip */ .spectrum-strip-compact { display: flex; align-items: center; gap: 0; margin-top: 24px; background: rgba(255,255,255,0.6); border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border-subtle); max-width: 580px; flex-wrap: wrap; } [data-theme="dark"] .spectrum-strip-compact { background: rgba(255,255,255,0.04); } .strip-station { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .strip-node { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; flex-shrink: 0; border: 1.5px solid; } /* Fix #16: use var(--tc-tint) so dark-mode override on .station-node/.strip-node covers both without hardcoding the per-topic-N-tint values here */ .strip-node.tc-t1 { background: var(--tc-tint); border-color: var(--topic-1); color: var(--topic-1-text); } .strip-node.tc-t2 { background: var(--tc-tint); border-color: var(--topic-2); color: var(--topic-2-text); } .strip-node.tc-t3 { background: var(--tc-tint); border-color: var(--topic-3); color: var(--topic-3-text); } .strip-node.tc-t4 { background: var(--tc-tint); border-color: var(--topic-4); color: var(--topic-4-text); } /* Fix #10: station and strip nodes show light pastels in dark mode because --topic-N-tint tokens are not overridden for dark. Apply the same rgba pattern used for .cn-block / .rule-card / .practise-intro. */ [data-theme="dark"] .station-node, [data-theme="dark"] .strip-node { /* Opaque tint over the dark surface so the gradient rail cannot show through the node (a translucent fill let it bleed through in dark mode). */ background-color: var(--surface-page); background-image: linear-gradient(rgba(var(--tc-rgb), .22), rgba(var(--tc-rgb), .22)); } .strip-label { font-size: 12px; font-weight: 500; color: var(--hub-text-secondary); white-space: nowrap; } .strip-station.current .strip-label { font-weight: 700; color: var(--tc-text); } .strip-station.current .strip-node { font-weight: 700; } .strip-connector { width: 20px; height: 2px; background: var(--border-default); flex-shrink: 0; margin: 0 4px; } /* Three-column topic layout */ .topic-layout { display: grid; grid-template-columns: 200px minmax(0, 680px) 180px; gap: 0 40px; align-items: start; max-width: 1100px; margin: 0 auto; padding: 32px 24px; } .topic-nav, .topic-toc { position: sticky; top: calc(var(--header-height) + 24px); align-self: start; } /* Left rail */ .topic-nav-label, .toc-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-text-muted); margin-bottom: 12px; } .topic-nav-list { display: flex; flex-direction: column; gap: 2px; } .topic-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: none; border-left: 3px solid transparent; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--hub-text-secondary); background: transparent; text-align: left; width: 100%; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .topic-nav-item:hover { background: var(--surface-hover); color: var(--hub-text-primary); } .topic-nav-item.active { background: var(--tc-tint); color: var(--tc-text); font-weight: 600; border-left-color: var(--tc); } [data-theme="dark"] .topic-nav-item.active { background: rgba(var(--tc-rgb), .18); } .nav-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tc); } /* Right rail TOC */ .toc-list { display: flex; flex-direction: column; gap: 0; } .toc-link { display: block; padding: 6px 12px; font-size: 13px; color: var(--hub-text-muted); text-decoration: none; border-left: 2px solid var(--border-subtle); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .toc-link:hover { color: var(--hub-text-primary); } .toc-link.toc-sub { padding-left: 20px; font-size: 12px; } .toc-link.active { color: var(--active-topic-color); border-left-color: var(--active-topic-color); font-weight: 600; } /* Centre content */ .topic-content { min-width: 0; } .section-heading { font-family: var(--font-display); font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--hub-text-primary); margin-bottom: 24px; padding-top: 40px; border-top: 1px solid var(--divider); scroll-margin-top: calc(var(--header-height) + 16px); } .section-heading:first-of-type { padding-top: 0; border-top: none; } /* ----- Concept component library ----- */ .cn-block { background: var(--tc-tint); border-left: 3px solid var(--tc); border-radius: 0 8px 8px 0; padding: 20px; margin-bottom: 20px; scroll-margin-top: calc(var(--header-height) + 16px); } [data-theme="dark"] .cn-block { background: rgba(var(--tc-rgb), .12); } .cn-heading { font-family: var(--font-display); font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--hub-text-primary); margin-bottom: 12px; } .cn-body { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; color: var(--hub-text-secondary); max-width: 65ch; } .cn-body p { margin-bottom: 12px; } .cn-body p:last-child { margin-bottom: 0; } .cn-body strong { color: var(--hub-text-primary); font-weight: 600; } .cn-body ul { padding-left: 20px; list-style: disc; margin: 8px 0; } .cn-body ol { padding-left: 20px; list-style: decimal; margin: 8px 0; } .cn-body li { margin-bottom: 8px; } .cn-body code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-sunken); padding: 1px 5px; border-radius: 3px; } .cn-body a { color: var(--tc-text); text-decoration: underline; } /* KeyQuestion variant (left-border + tint, larger) */ .key-question { background: var(--tc-tint); border-left: 3px solid var(--tc); border-radius: 0 8px 8px 0; padding: 18px 20px; margin-bottom: 20px; font-size: 1.1rem; line-height: 1.5; color: var(--hub-text-primary); } [data-theme="dark"] .key-question { background: rgba(var(--tc-rgb), .12); } /* RuleCard list (tint, ghost numeral, no left border) */ .rule-list { display: grid; gap: 16px; margin-bottom: 20px; } .rule-card { position: relative; background: var(--tc-tint); border-radius: 10px; padding: 20px 20px 20px 24px; overflow: hidden; scroll-margin-top: calc(var(--header-height) + 16px); } [data-theme="dark"] .rule-card { background: rgba(var(--tc-rgb), .12); } .rule-card::before { content: attr(data-num); position: absolute; top: -10px; right: 8px; font-family: var(--font-display); font-size: 5rem; font-weight: 800; line-height: 1; color: var(--tc); opacity: 0.10; pointer-events: none; } .rule-card .cn-heading { margin-bottom: 8px; } .rule-card .cn-body { color: var(--hub-text-secondary); } /* SpectrumStep (vertical connector + numbered nodes) */ .sstep-list { position: relative; margin-bottom: 20px; padding-left: 8px; } .sstep-list::before { content: ''; position: absolute; /* Fix #14: left=22px centres the rail on the 28px node whose left edge is at 8px (list padding), so centre = 8 + 14 = 22px */ left: 22px; top: 18px; bottom: 18px; width: 2px; background: var(--border-default); } .sstep { position: relative; display: flex; gap: 16px; padding: 12px 0; } .sstep-node { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; background: var(--tc-tint); border: 1.5px solid var(--tc); color: var(--tc-text); position: relative; z-index: 1; } .sstep-body { flex: 1; min-width: 0; } .sstep-label { font-family: var(--font-display); font-weight: 600; color: var(--hub-text-primary); margin-bottom: 2px; } .sstep-blurb { font-size: 0.9375rem; color: var(--hub-text-secondary); } /* DefinitionRow (label:description grid dl) */ .defrow-list { display: grid; grid-template-columns: auto 1fr; gap: 0; margin-bottom: 20px; } .defrow-list .defrow-dt { align-self: start; background: var(--tc); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 6px 10px; border-radius: 6px; margin: 12px 16px 12px 0; white-space: nowrap; } .defrow-list .defrow-dd { padding: 12px 0; color: var(--hub-text-secondary); align-self: center; } /* divider above every row except the first (renderer marks rows past the first pair with .defrow-divider on both the dt and dd of that row) */ .defrow-list .defrow-divider { border-top: 1px solid var(--divider); } /* DoPair (correct / incorrect contrast, fixed semantic colours) */ .do-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .do-pair .do-col { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 3px solid; border-radius: 8px; padding: 16px; } .do-pair .do-yes { border-top-color: #16A34A; } .do-pair .do-no { border-top-color: #DC2626; } .do-pair .do-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; } .do-pair .do-yes .do-eyebrow { color: #16A34A; } .do-pair .do-no .do-eyebrow { color: #DC2626; } .do-pair .do-text { font-size: 0.9375rem; color: var(--hub-text-secondary); } @media (max-width: 559px) { .do-pair { grid-template-columns: 1fr; } } /* ----- Practise ----- */ .practise-intro { background: var(--tc-tint); border-left: 3px solid var(--tc); border-radius: 0 8px 8px 0; padding: 16px 20px; margin-bottom: 24px; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.55; color: var(--hub-text-secondary); } [data-theme="dark"] .practise-intro { background: rgba(var(--tc-rgb), .12); } /* Featured lab card (gradient border) */ .lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 24px; } .lab-card { border-radius: 12px; overflow: hidden; background: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, linear-gradient(135deg, var(--tc) 0%, var(--tc-end) 100%) border-box; border: 2px solid transparent; box-shadow: var(--hub-shadow-md); } .lab-card-header { background: rgba(var(--tc-rgb), .12); padding: 14px 20px; display: flex; align-items: center; gap: 12px; } .lab-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--tc-rgb), .12); color: var(--tc-text); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .lab-card-body { padding: 20px; } .lab-card-body h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 600; color: var(--hub-text-primary); margin-bottom: 12px; } .btn-lab-launch { display: inline-flex; align-items: center; gap: 8px; background: var(--tc); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); } /* Fix #9: full-width on narrow viewports so long labels (e.g. "Launch Shadow Workflow Lab") do not overflow .lab-card-body and clip the trailing icon */ @media (max-width: 639px) { .btn-lab-launch { width: 100%; box-sizing: border-box; } } .btn-lab-launch:hover { background: var(--tc-end); box-shadow: var(--hub-shadow-md); } .btn-lab-launch:active { transform: scale(0.97); } .lab-card-sub { font-size: 12px; color: var(--hub-text-muted); margin-top: 8px; font-family: var(--font-mono); } /* Solo / empty-labs card (dashed) */ .lab-card-solo { border: 2px dashed rgba(var(--tc-rgb), .4); border-radius: 12px; background: var(--surface-card); padding: 20px; margin-bottom: 24px; } .lab-card-solo .lab-badge { background: transparent; padding-left: 0; } .lab-card-solo h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--hub-text-primary); margin: 8px 0; } .lab-card-solo p { font-size: 0.9375rem; color: var(--hub-text-secondary); } /* redo disclosure */ .lab-redo-summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--tc-text); margin-top: 16px; display: list-item; list-style: inside disclosure-closed; padding: 8px 0; } details[open] > .lab-redo-summary { list-style-type: disclosure-open; } .lab-redo-body { font-size: 14px; line-height: 1.6; color: var(--hub-text-secondary); padding: 12px 0 0 16px; border-left: 2px solid var(--tc-tint); margin-top: 4px; } /* ----- Handouts ----- */ .handout-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; box-shadow: var(--hub-shadow-sm); } .handout-row { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; background: var(--surface-card); text-decoration: none; border-left: 3px solid transparent; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } /* Fix #11: drop the separate arrow column on narrow viewports to give the label more space; the entire row is already the tap target */ @media (max-width: 639px) { .handout-row { grid-template-columns: 40px 1fr auto; } .handout-row .handout-arrow { display: none; } } .handout-row + .handout-row { border-top: 1px solid var(--divider); } .handout-row:hover { background: rgba(var(--tc-rgb), .06); border-left-color: var(--tc); } .handout-row:hover .handout-arrow { opacity: 1; } .handout-filetype { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #fff; flex-shrink: 0; } .ft-pdf { background: #FA0F00; } .ft-pptx { background: #D24726; } .ft-docx { background: #2B579A; } .ft-xlsx { background: #217346; } .ft-md { background: #374151; } .ft-prompt { background: var(--tc); } .handout-info { min-width: 0; } .handout-label { font-size: 14px; font-weight: 500; color: var(--hub-text-primary); line-height: 1.3; display: block; } .handout-desc { font-size: 13px; color: var(--hub-text-muted); margin-top: 2px; display: block; } .handout-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .handout-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: var(--surface-sunken); color: var(--hub-text-muted); } .handout-size { font-size: 12px; color: var(--hub-text-muted); } .handout-arrow { opacity: 0.4; color: var(--tc-text); font-size: 18px; display: flex; align-items: center; transition: opacity var(--dur-fast) var(--ease-out); flex-shrink: 0; } /* ----- Shared empty / error states ----- */ .hub-empty, .hub-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; border: 1px dashed var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--hub-text-secondary); gap: 12px; } .hub-empty .hub-empty-icon, .hub-error .hub-empty-icon { font-size: 32px; color: var(--active-topic-color); } .hub-empty h3, .hub-error h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--hub-text-primary); } .hub-empty p, .hub-error p { font-size: 0.9375rem; max-width: 48ch; } .hub-error-retry { margin-top: 8px; background: var(--topic-1); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; min-height: 44px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; } .hub-error-retry:hover { background: #3A1F8C; } /* =================================================================== RESPONSIVE BREAKPOINTS (mobile-first set replaces old queries) =================================================================== */ /* hide left rail + TOC below 1024px */ @media (max-width: 1023px) { .topic-layout { grid-template-columns: 1fr; } .topic-nav, .topic-toc { display: none; } .topic-cards-grid { grid-template-columns: repeat(2, 1fr); } .header-inner { gap: 8px; } } /* Delivery mobile: allow header-controls to flex-wrap so the cohort select doesn't push the header wider than the viewport. 640px, not 639px: the matching mobile-header band in styles.css runs to max-width 640 and pins .header-controls to flex-shrink:0, so a 639 ceiling left exactly one viewport width with neither shrink path available. */ @media (max-width: 640px) { .header-inner { flex-wrap: wrap; height: auto; min-height: var(--header-height); } .header-controls { flex-shrink: 1; min-width: 0; max-width: 100%; } .cohort-select { max-width: 50vw; min-width: 0; } /* mode-nav buttons can use shorter padding on narrow screens */ .mode-btn { padding: 7px 10px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; } /* Four tabs do not fit on a 375px viewport. Let the pill group scroll within itself (same pattern as .topic-pill-strip) so a long tab set can never widen the page. min-width:0 is required for a flex child to be allowed to shrink below its content width. */ .mode-nav { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mode-nav::-webkit-scrollbar { display: none; } } /* cards 1-up, spectrum -> vertical timeline below 640px */ @media (max-width: 639px) { .topic-cards-grid { grid-template-columns: 1fr; gap: 12px; padding-bottom: 32px; } .topic-card::before { height: 5px; } .spectrum-rail { display: none; } .spectrum-stations { grid-template-columns: 1fr; gap: 0; } .spectrum-station { flex-direction: row; text-align: left; align-items: flex-start; padding: 16px 0; position: relative; } .spectrum-station:not(:last-child)::after { content: ''; position: absolute; /* Fix #15: express top as calc so intent is clear and future size changes are self-documenting. 16px station padding-top + 56px node height = 72px. */ left: 27px; top: calc(16px + 56px); width: 2px; height: calc(100% - 16px - 56px); background: var(--border-default); } .station-node { flex-shrink: 0; margin-bottom: 0; margin-right: 16px; } .station-content { flex: 1; } .station-blurb { max-width: 100%; } .spectrum-strip-compact { display: none; } .landing-container { padding: 0 16px; } .hero-learn { padding: 32px 0 24px; } .topic-header-band { padding: 28px 16px 24px; } .topic-layout { padding: 16px; } .lab-grid { grid-template-columns: 1fr; } } /* =================================================================== REDUCED MOTION =================================================================== */ @media (prefers-reduced-motion: reduce) { #learn-root *, #learn-root *::before, #learn-root *::after, .header::after, .mode-btn, .theme-toggle, .gate-card { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body.hub-landed .spectrum-station { opacity: 1; transform: none; } }