/* ============================================================================ css/flow.css — /briefing · "Show me — it's 60 seconds" ---------------------------------------------------------------------------- Four stages (intro · quiz · analyze · brief), one visible at a time. Semantic tokens only (tokens.css Part 2) so light / dark / system fall out of the same rules. Flat by design: hairlines, 12 px cards, one highlighter + one lemon CTA per screen, status inks only with a label, no shadows / gradients / glow. ROUND 3 (founder review) — three structural changes: 1 · FIXED TEMPLATE. The page itself never scrolls (html.flow-app locks it and drops the footer). Every stage is exactly one viewport tall and splits into [top bar] · [stage that scrolls on its own] · [control bar]. A scene that genuinely overflows scrolls INSIDE .brief__frame — so pressing Next can never "bounce" the page back to the top. 2 · TINTED KPI TILES. The founder's original grid was pastel colour tiles with a coloured value. Restored here in the token system: six families built from the data inks and the status washes (blue · win · plum · oxide · warning · watch), every text pair measured ≥ 4.5:1 in BOTH themes. Scene 3 keeps the choreography: the grid lands lit, then everything but the two findings drains away and those two take a critical ring. 3 · ICON CHIPS. Quiz options and the day-one pills carry an inline line icon in a tinted rounded square (never emoji — the brand bans them). ============================================================================ */ /* ---------- 1 · shell: the page is an app, not a document ------------------- */ /* flow.js adds .flow-app to — the flow owns the viewport, so the page scrollbar goes away and the footer with it. Nothing below is reachable, so nothing below may claim height (that is what the founder's "bounce" was). */ .flow-app, .flow-app body { height: 100%; overflow: hidden; overscroll-behavior: none; } .flow-app body > footer { display: none; } .flow-app { scroll-behavior: auto; } .flow-stage { --flow-top: calc(var(--nav-h) + 16px + clamp(16px, 4vh, 48px)); display: flex; flex-direction: column; height: 100vh; height: 100svh; } .flow-stage[hidden] { display: none; } /* the one scrolling box per stage: content is centred, and when it is taller than the box the top stays reachable (safe centring) instead of being clipped */ .flow-stage > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; padding-block: var(--flow-top) clamp(20px, 4vh, 48px); } .js .flow-stage.is-active > .wrap { animation: flowStageIn .5s var(--reveal-ease) both; } @keyframes flowStageIn { from { opacity: 0; transform: translateY(var(--reveal-rise)); } } /* programmatic focus targets (the stage / scene headings get focus after each step so screen readers announce them); they are not Tab stops, so they carry no ring */ .flow [data-focus]:focus { outline: none; } /* the scroll fade — only painted while a box actually has more to show (flow.js toggles .is-scrollable on the two scrollers) */ .flow-stage > .wrap.is-scrollable, .brief__frame.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } /* ---------- 2 · intro ------------------------------------------------------- */ .flow-intro .eyebrow { margin-bottom: var(--spacing-24); } .flow-intro__title { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; max-width: 1000px; margin-inline: auto; } .flow-intro .lede { margin: var(--spacing-24) auto 0; } .flow-asked { margin-bottom: var(--spacing-32); font-size: var(--fs-small); color: var(--ink-2); max-width: 60ch; margin-inline: auto; } .flow-asked .mono { margin-right: 10px; } .flow-asked q { quotes: "\201C" "\201D"; color: var(--ink); } .flow-meta { margin-top: var(--spacing-32); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; } .flow-meta span + span::before { content: "·"; margin: 0 10px; color: var(--hair-2); } /* ---------- 3 · quiz -------------------------------------------------------- */ .quiz { width: 100%; max-width: 680px; text-align: center; } .quiz__count, .quiz__hint { max-width: none; } .quiz__count { color: var(--muted); } .quiz__count b { font-weight: var(--font-weight-regular); color: var(--ink); } .quiz__bar { height: 2px; background: var(--hair); border-radius: 2px; margin: var(--spacing-16) auto var(--spacing-32); max-width: 200px; overflow: hidden; } .quiz__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .45s var(--ui-ease); } .quiz__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; margin-bottom: var(--spacing-24); outline-offset: 6px; } .quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); text-align: left; } .q-opt { display: flex; align-items: center; gap: var(--spacing-12); min-height: 72px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-xl); color: var(--ink); text-align: left; font: inherit; transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease); } .q-opt:hover { background: var(--surface-2); border-color: var(--hair-2); } .q-opt.is-picked { background: var(--accent-lemon-quiet); border-color: var(--ink); color: var(--on-lemon-quiet); } /* the icon chip — a tinted rounded square holding a 1.6-stroke line icon */ .q-opt__icon { flex: none; width: 38px; height: 38px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-blue-wash); color: var(--accent-blue); transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease); } .q-opt__icon svg { width: 20px; height: 20px; } .q-opt.is-picked .q-opt__icon { background: var(--ink); color: var(--ink-inverse); } .q-opt__key { flex: none; margin-left: auto; align-self: flex-start; font-size: var(--fs-label); color: var(--muted); font-family: var(--font-mono); } .q-opt.is-picked .q-opt__key { color: var(--on-lemon-quiet); } .q-opt__body { display: block; min-width: 0; } .q-opt__label { display: block; font-size: 16px; font-weight: var(--font-weight-medium); line-height: 1.3; letter-spacing: -0.2px; } .q-opt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); } .q-opt.is-picked small { color: var(--on-lemon-quiet); } .quiz__back { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--spacing-20); font-size: 14px; color: var(--ink-2); min-height: 44px; padding-inline: var(--spacing-8); } .quiz__back span { border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease); } .quiz__back:hover { color: var(--ink); } .quiz__back:hover span { border-color: var(--ink); } .quiz__back[hidden] { display: none; } .quiz__hint { margin-top: var(--spacing-12); } @media (hover: none) { .quiz__hint { display: none; } } /* ---------- 4 · analyzing --------------------------------------------------- */ .analyze { width: 100%; max-width: 520px; text-align: center; } .analyze__mark { display: inline-block; margin-bottom: var(--spacing-24); } .analyze__mark svg { height: 40px; width: auto; } .js .analyze__mark { animation: flowBreathe 1.8s ease-in-out infinite; } @keyframes flowBreathe { 50% { opacity: .45; } } .analyze__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } .analyze__sub { margin: var(--spacing-12) auto 0; font-size: 16px; color: var(--ink-2); } .analyze__list { list-style: none; margin: var(--spacing-32) auto 0; padding: 0; max-width: 400px; text-align: left; } .analyze__row { display: flex; align-items: center; gap: var(--spacing-12); padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-small); color: var(--muted); max-width: none; opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ui-ease), transform .4s var(--ui-ease), color .3s var(--ui-ease); } .analyze__row:last-child { border-bottom: 0; } .analyze__row.is-shown { opacity: 1; transform: none; color: var(--ink-2); } .analyze__row.is-done { color: var(--ink); } .analyze__tick, .check-item__tick { flex: none; width: 18px; height: 18px; border-radius: 50%; position: relative; border: 1px solid var(--hair-2); background: transparent; transition: background-color .3s var(--ui-ease), border-color .3s var(--ui-ease); } .analyze__tick::after, .check-item__tick::after { content: ""; position: absolute; inset: 3px; opacity: 0; background: var(--ink-inverse); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity .2s var(--ui-ease); } .analyze__row.is-done .analyze__tick, .check-item__tick { background: var(--st-win); border-color: var(--st-win); } .analyze__row.is-done .analyze__tick::after, .check-item__tick::after { opacity: 1; } /* ---------- 5 · briefing: the fixed template -------------------------------- */ .flow-brief > .wrap { justify-content: stretch; overflow: hidden; /* the FRAME scrolls, never the stage */ padding-block: calc(var(--nav-h) + 16px + 8px) 0; } .brief { width: 100%; max-width: 920px; flex: 1; min-height: 0; margin-inline: auto; display: flex; flex-direction: column; } /* top bar — where you are · the quiet controls · Skip (far away from Next) */ .brief__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); padding-bottom: 8px; } .brief__where { display: flex; align-items: center; gap: var(--spacing-8); max-width: none; color: var(--muted); font-size: var(--fs-label); } .brief__where .mono { white-space: nowrap; } .brief__where b { font-weight: var(--font-weight-regular); color: var(--ink); } .brief__mark { display: inline-flex; } .brief__mark svg { height: 13px; width: auto; } .brief__top-side { display: flex; align-items: center; gap: var(--spacing-8); } .brief__skip { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--spacing-4); padding-inline: var(--spacing-16) var(--spacing-8); border-left: 1px solid var(--hair); /* keeps "skip" a separate thought from the voice toggle */ font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color var(--ui-duration) var(--ui-ease); } .brief__skip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; } .brief__skip[hidden] { display: none; } .brief__skip-short { display: none; } .brief__progress { flex: none; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; } .brief__progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .45s var(--ui-ease); } /* the stage — the ONLY thing on this page that scrolls */ .brief__frame { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; align-items: center; align-items: safe center; justify-content: center; padding: clamp(16px, 3.5vh, 44px) 0 clamp(16px, 3vh, 36px); } .scene { width: 100%; text-align: center; } .js .scene { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity .55s var(--reveal-ease), transform .55s var(--reveal-ease); } .js .scene.is-in { opacity: 1; transform: none; } .scene__kicker { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--spacing-12); max-width: none; } .scene__head { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; max-width: 780px; margin: 0 auto; outline-offset: 6px; } .scene__head em { font-style: italic; } .scene__sub { font-size: clamp(15px, 1.3vw, 19px); font-weight: var(--font-weight-light); line-height: 1.5; letter-spacing: -0.2px; color: var(--ink-2); max-width: 620px; margin: var(--spacing-12) auto 0; text-wrap: pretty; } .scene__sub strong { color: var(--ink); font-weight: var(--font-weight-medium); } .scene__sub a { color: var(--ink); } /* ---------- 6 · the KPI grid — tinted tiles --------------------------------- */ /* Six families. Each sets its own wash + ink; the mono label and the delta stay on graphite / status inks so every pair clears 4.5:1 on the tint, light AND dark. The two colour-mix washes are the only derived values — they mix a data ink into --surface, so they follow the theme like every other token. */ .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: var(--spacing-24) auto 0; } .kpi { --tile-wash: var(--surface); --tile-ink: var(--ink); position: relative; text-align: left; padding: 11px 13px 10px; background: var(--tile-wash); border: 1px solid transparent; border-radius: var(--radius-lg); transition: opacity .55s var(--ui-ease), filter .55s var(--ui-ease), transform .45s var(--ui-ease); } .kpi__name { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi__val { display: block; margin-top: 5px; font-weight: var(--font-weight-medium); font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tile-ink); } .kpi__delta { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink-2); } .kpi__delta.is-down { color: var(--st-critical); } .kpi__delta.is-up { color: var(--st-win); } .kpi--blue { --tile-wash: var(--accent-blue-wash); --tile-ink: var(--accent-blue); } .kpi--win { --tile-wash: var(--st-win-wash); --tile-ink: var(--st-win); } /* plum + oxide have no wash token of their own — mix the data ink into the surface so the tint follows the theme. 12% matches the weight of the four status washes and still leaves headroom on 4.5:1 (worst pair 4.77). */ .kpi--plum { --tile-wash: color-mix(in srgb, var(--dv-5) 12%, var(--surface)); --tile-ink: var(--dv-5); } .kpi--oxide { --tile-wash: color-mix(in srgb, var(--dv-2) 12%, var(--surface)); --tile-ink: var(--dv-2); } .kpi--warn { --tile-wash: var(--st-warning-wash); --tile-ink: var(--st-warning); } .kpi--watch { --tile-wash: var(--st-watch-wash); --tile-ink: var(--st-watch); } /* "90% of this is noise" — the grid arrives lit, then everything but the two findings drains away and those two take a critical ring. */ .kpi--dim { opacity: .16; filter: grayscale(1); transform: scale(.97); } .kpi--flag::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 2px solid var(--st-critical); } .js .kpi--flag::after { animation: kpiRing 1.6s var(--ui-ease) infinite; } @keyframes kpiRing { 0%, 100% { opacity: 1; transform: scale(1); } 55% { opacity: .25; transform: scale(1.045); } } /* the beat before the cut: JS renders with .is-lit, then drops it one frame later */ .kpi-grid.is-lit .kpi--dim { opacity: 1; filter: none; transform: none; } .kpi-grid.is-lit .kpi--flag::after { opacity: 0; animation: none; } /* ---------- 7 · the checks VEX runs ----------------------------------------- */ .check-list { list-style: none; padding: 0; max-width: 460px; margin: var(--spacing-24) auto 0; text-align: left; display: grid; gap: 8px; position: relative; overflow: hidden; border-radius: var(--radius-lg); } /* the original's scan sweep, rebuilt as a single pen-ink hairline (no gradient) */ .js .scene.is-in .check-list::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent-blue); opacity: 0; animation: checkScan 2.6s var(--ui-ease) 400ms 2; } @keyframes checkScan { 0% { top: 0; opacity: 0; } 12% { opacity: .7; } 88% { opacity: .7; } 100% { top: 100%; opacity: 0; } } .check-item { display: flex; align-items: center; gap: var(--spacing-12); max-width: none; padding: 11px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); font-size: var(--fs-small); line-height: 1.4; color: var(--ink); } .js .scene.is-in .check-item { animation: flowRise .5s var(--reveal-ease) both; animation-delay: calc(var(--i, 0) * 140ms + 200ms); } @keyframes flowRise { from { opacity: 0; transform: translateY(6px); } } /* ---------- 8 · the catch card ---------------------------------------------- */ /* the story-card rule: mono header · money 24 · base 16 · small 14 · lemon-quiet callout */ .catch { max-width: 580px; margin: var(--spacing-24) auto 0; text-align: left; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-xl); padding: var(--spacing-24); } .catch p, .catch dd, .catch dt { max-width: none; } .catch__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--st-critical); } .catch__head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-critical); flex: none; } .catch__money { margin-top: var(--spacing-12); font-weight: var(--font-weight-medium); font-size: var(--card-money); line-height: var(--leading-card-money); letter-spacing: var(--tracking-card-money); color: var(--ink); } .catch__money .tail { color: var(--ink-2); } .catch__lede { margin-top: var(--spacing-12); font-size: var(--card-base); line-height: var(--leading-card); color: var(--ink); } .catch__rows { margin: var(--spacing-16) 0 0; border-top: 1px solid var(--hair); } .catch__row { display: flex; justify-content: space-between; gap: var(--spacing-16); padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: var(--card-small); line-height: var(--leading-card); } .catch__row dt { color: var(--ink-2); flex: none; } .catch__row dd { margin: 0; text-align: right; color: var(--ink); font-weight: var(--font-weight-medium); } .catch__row dd.is-neg { color: var(--st-critical); } .catch__note { margin-top: var(--spacing-16); font-size: var(--card-base); line-height: var(--leading-card); } /* .callout: lemon-quiet wash, radius 8 */ .catch__note b { font-weight: var(--font-weight-medium); } .catch__note .catch__label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* ---------- 9 · cost of waiting --------------------------------------------- */ .cost { max-width: 520px; margin: var(--spacing-24) auto 0; text-align: left; display: grid; gap: var(--spacing-16); } .cost__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-12); margin-bottom: 8px; } .cost__when { color: var(--muted); } .cost__amt { font-weight: var(--font-weight-medium); font-size: 20px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .cost__track { height: 10px; background: var(--hair); border-radius: var(--radius-pill); overflow: hidden; } .cost__fill { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); transition: width 1.1s cubic-bezier(.3, .8, .3, 1); } .cost--a .cost__fill { background: var(--st-win); } .cost--a .cost__amt { color: var(--st-win); } .cost--b .cost__fill { background: var(--st-warning); } .cost--b .cost__amt { color: var(--st-warning); } .cost--c .cost__fill { background: var(--st-critical); } .cost--c .cost__amt { color: var(--st-critical); } /* ---------- 10 · day-one pills (icon chip + label) -------------------------- */ .dayone { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-12); margin-top: var(--spacing-24); } .dayone__item { display: inline-flex; align-items: center; gap: var(--spacing-12); padding: 10px 18px 10px 10px; min-height: 56px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-xl); font-size: var(--fs-small); color: var(--ink); text-align: left; } .dayone__icon { flex: none; width: 36px; height: 36px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-blue-wash); color: var(--accent-blue); } .dayone__icon svg { width: 19px; height: 19px; } /* ---------- 11 · the form scene + success ----------------------------------- */ .brief-form-slot { max-width: 440px; margin: var(--spacing-24) auto 0; text-align: left; } .brief-form .btn { width: 100%; margin-top: var(--spacing-20); min-height: 48px; } .brief-form .caption { margin-top: var(--spacing-12); text-align: center; max-width: none; } .brief-form.is-sending .btn { opacity: .6; pointer-events: none; } .brief-form .form-error { margin-top: var(--spacing-16); padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-lg); background: var(--st-critical-wash); color: var(--st-critical); font-size: var(--fs-small); max-width: none; } .brief-form .form-error a { color: inherit; } .form-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .brief-success__check { display: block; width: 32px; height: 32px; margin: 0 auto var(--spacing-20); background: var(--accent-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- 12 · control bar (pinned to the bottom of the template) --------- */ .brief__bar { flex: none; z-index: 5; background: var(--bg); border-top: 1px solid var(--hair); padding: 8px 0 max(12px, env(safe-area-inset-bottom)); } .brief__bar[hidden] { display: none; } .brief__hint { min-height: 20px; margin: 0 0 6px; text-align: center; max-width: none; font-size: 13px; line-height: 20px; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ui-ease), transform .4s var(--ui-ease); } .brief__hint.is-shown { opacity: 1; transform: none; } .brief__hint b { font-weight: var(--font-weight-medium); color: var(--ink); } /* [prev] · dots (truly centred) · [Next] */ .brief__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--spacing-12); } .brief__side { display: flex; align-items: center; gap: var(--spacing-12); } .brief__side--end { justify-self: end; } .ctrl { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hair-2); color: var(--ink); background: transparent; transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease); } .ctrl:hover { background: var(--surface-2); border-color: var(--ink); } .ctrl svg { width: 18px; height: 18px; } .ctrl--voice .ic-voice-on { display: none; } .ctrl--voice[aria-pressed="true"] .ic-voice-on { display: block; } .ctrl--voice[aria-pressed="true"] .ic-voice-off { display: none; } /* The voice control must never look ambiguous, so colour carries the state: OFF = lemon "click me" · NARRATING = blue "it is talking" · ON = ink "ready". The label is width-locked so swapping its text cannot shove the button sideways (the row is right-aligned), and it pulses for as long as the voice is off. */ .brief__voice { display: inline-flex; align-items: center; gap: var(--spacing-8); margin-right: var(--spacing-16); } /* width-locked to the longest label — measured 150px for "TURN ON VOICE" in Roboto Mono 11 / 1.54px tracking ("NARRATING" 108, "VOICE ON" 93). Without this the row is right-aligned, so a shorter word drags the button sideways. */ .brief__voice .ctrl__label { min-width: 152px; text-align: left; color: var(--ink); } .ctrl--voice { background: var(--accent-lemon); border-color: var(--accent-lemon); color: var(--accent-lemon-ink); } .ctrl--voice:hover { background: var(--accent-lemon); border-color: var(--ink); } .ctrl--voice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); } .ctrl--voice[aria-pressed="true"]:hover { background: var(--ink); } .ctrl--voice.is-speaking { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--bg); } .ctrl--voice.is-speaking:hover { background: var(--accent-blue); border-color: var(--accent-blue); } .ctrl--voice.is-speaking + .ctrl__label { color: var(--accent-blue); } /* pulses while the voice is off — the same rhythm as the nav's Try VEX */ .js .ctrl--voice[aria-pressed="false"] + .ctrl__label { animation: voiceInvite 1.8s ease-in-out infinite; } @keyframes voiceInvite { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .js .ctrl--voice[aria-pressed="false"] + .ctrl__label { animation: none; } } .ctrl__label[hidden] { display: none; } .brief__dots { display: flex; justify-content: center; align-items: center; gap: 6px; } .brief__dot { display: block; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--hair-2); transition: width .3s var(--ui-ease), background-color .3s var(--ui-ease); } .brief__dot.is-seen { background: var(--muted); } .brief__dot.is-on { width: 18px; background: var(--ink); } .brief__next { padding: 12px 20px; min-height: 44px; } .brief__next[hidden] { display: none; } /* once you have had time to read the scene, the arrow gives one quiet nudge */ .js .brief__next.is-ready .arrow { animation: nextNudge 1.8s var(--ui-ease) infinite; } @keyframes nextNudge { 0%, 55%, 100% { transform: none; } 28% { transform: translateX(3px); } } /* The site's floating theme pill (site.css .theme-fab, fixed bottom-right, ~132 px wide; site.js only floats it above 900 px) reaches under the bar's Next below ~1184 px. Lifting it would park it ON the scene, so instead the bar keeps its hands to itself and reserves the corner. */ @media (min-width: 901px) and (max-width: 1184px) { .flow-brief-on .brief__nav { padding-right: 124px; } } /* ---------- 13 · responsive -------------------------------------------------- */ @media (max-width: 860px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .flow-stage { --flow-top: calc(var(--nav-h) + 16px + clamp(12px, 3vh, 32px)); } .quiz__options { grid-template-columns: 1fr; gap: 10px; } .q-opt { min-height: 60px; padding: 11px 14px; } .q-opt__icon { width: 34px; height: 34px; } .q-opt__icon svg { width: 18px; height: 18px; } .flow-intro .btn-row .btn { width: 100%; } .flow-meta { flex-direction: column; gap: 6px; } .flow-meta span + span::before { content: none; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kpi { padding: 10px 12px 9px; } .kpi__val { font-size: 19px; } .kpi__delta { font-size: 12px; } .catch { padding: var(--spacing-20); } .catch__row { flex-direction: column; gap: 2px; } .catch__row dd { text-align: left; } .dayone { flex-direction: column; align-items: stretch; } .dayone__item { justify-content: flex-start; } .ctrl__label { display: none; } .brief__skip-long { display: none; } .brief__skip-short { display: inline; } .brief__mark { display: none; } } /* short viewports (390×667, 844×390 landscape, the 960×600 demo): buy the stage its height back, so the whole twelve-tile grid still lands in one screen instead of asking for a scroll */ @media (max-height: 700px) { .flow-stage { --flow-top: calc(var(--nav-h) + 16px + 8px); } .flow-brief > .wrap { padding-top: calc(var(--nav-h) + 12px); } .brief__frame { padding-block: var(--spacing-16); } .scene__kicker { margin-bottom: var(--spacing-8); } .scene__head { font-size: clamp(22px, 3vw, 32px); } .scene__sub { margin-top: var(--spacing-8); } .brief__hint { display: none; } .kpi-grid, .check-list, .catch, .cost, .dayone, .brief-form-slot { margin-top: var(--spacing-16); } .kpi { padding: 8px 11px 8px; } .kpi__val { font-size: 19px; margin-top: 3px; } .kpi__delta { font-size: 12px; margin-top: 2px; } .check-item { padding: 8px 14px; } .cost { gap: var(--spacing-12); } } /* ---------- 14 · reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js .flow-stage.is-active > .wrap, .js .analyze__mark, .js .scene.is-in .check-item, .js .kpi--flag::after, .js .scene.is-in .check-list::after, .js .brief__next.is-ready .arrow { animation: none; } .js .scene.is-in .check-list::after { display: none; } .js .scene { opacity: 1; transform: none; transition: none; } .analyze__row { transition: none; opacity: 1; transform: none; } .cost__fill, .kpi { transition: none; } } .no-anim .flow-stage.is-active > .wrap, .no-anim .analyze__mark, .no-anim .scene.is-in .check-item, .no-anim .kpi--flag::after, .no-anim .scene.is-in .check-list::after, .no-anim .brief__next.is-ready .arrow { animation: none; } .no-anim .scene.is-in .check-list::after { display: none; } .no-anim .scene { opacity: 1; transform: none; transition: none; } .no-anim .analyze__row, .no-anim .cost__fill, .no-anim .brief__hint, .no-anim .brief__progress i, .no-anim .quiz__bar i, .no-anim .kpi { transition: none; }