/* ============================================================================= * quiz.css — the two-minute test, on the landing's skin * ============================================================================= * * WHAT THIS PAGE IS * * Optional preferences, then five questions. It is the landing page's primary call to * action, so it is the first product surface a stranger sees — and it is not a * marketing page. It is the app's onboarding, and since 2026-09-13 it is drawn * in the landing's own language: kc-landing-skin.css carries the nav, the one * gradient action, the cards, the choice rows, the eyebrow and the heading * scale. This file carries ONLY what the skin does not do: * * - the one column, centred * - the answer states after a pick, and the reveal that follows * - the result's ring * - the preference grid and the focus chips * - `clear`, and the static equivalent under reduced motion * * THE GROUND IS THE LANDING'S, ALWAYS. Since 2026-09-15 this page is pinned * to the landing's flat space-black whatever the member's theme or OS says * (section 1), so the ink and line literals here are the landing's own and * are the only ground they will ever sit on. Everything else still reads the * `--ks-*` names, and no face is named here: --ks-display, --ks-body and * --ks-mono are the skin's three. * ========================================================================== */ /* ============================================================================= * 1 — THE GROUND, AND THE TWO RULES PUT BACK * ========================================================================== */ /* kc-theme.css writes `main h2, main h3 { font-weight: 600; letter-spacing: -0.005em }` with !important for the generated apps. The skin's headings are 700 with their own tracking; this file loads after, so an equally specific !important here wins on order. */ main .ks-h2 { font-weight: 700 !important; letter-spacing: -0.015em !important; } main .ks-h3 { font-weight: 700 !important; letter-spacing: -0.005em !important; } body.qz { min-height: 100svh; } /* THE LANDING'S GROUND, FLAT, ALWAYS. kc-uplift.css LAYER 6 paints `html, body` from --page with !important, and in the dark+glass mode --page is a three- wash aurora. This page is the landing's front door and wears the landing's flat space-black instead (founder, 2026-09-15). `:root` and `body.qz` are each more specific than the token layer's bare type selectors, so an equal !important here wins. The skin's ground and plate tokens are pinned to the landing's literals for the same reason — --page is a gradient in that mode, and color-mix() on the nav and the rail cannot take one. */ :root, body.qz { background: #0b0a14 !important; } :root { --ks-bg: #0b0a14; --ks-plate: rgba(20, 18, 32, 0.66); --ks-line: rgba(236, 231, 223, 0.07); --ks-line-2: rgba(236, 231, 223, 0.18); } /* The progress line rides the nav's bottom edge: two pixels, the gradient, and no visible track — the nav's own rule is the track. */ .qz-nav { flex-wrap: nowrap; } .qz-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; border-radius: 0; } .qz-bar > i { width: 0; transition: width .35s cubic-bezier(.2, .7, .2, 1); } .qz-nav .ks-steps { font-variant-numeric: tabular-nums; white-space: nowrap; } .qz-nav .ks-steps:empty { display: none; } @media (max-width: 480px) { .qz-nav__long { display: none; } } /* ============================================================================= * 2 — THE COLUMN * ----------------------------------------------------------------------------- * One column of 720, centred. The assessment readout that sat beside it from * 1200 up went on 2026-09-26 (founder: "make the onboarding view more simple, * remove the assessment engine"). The short public flow needs no fact rail. * ========================================================================== */ .qz-cols { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; align-items: start; gap: 24px; padding: 20px var(--ks-gutter) 48px; } .qz-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; } /* Chinese labels need natural spacing. The language control is shared with the other entry pages. */ html[lang="zh-Hans"] .qz :is(.qz-pick, .ks-choice, .qz-explain, .qz-fact__text) { line-height: 1.65; } html[lang="zh-Hans"] .qz .qz-nav { letter-spacing: normal; } @media (max-width: 520px) { .qz-nav .ks-steps { order: 3; flex-basis: 100%; text-align: right; } .qz-nav .ks-nav__links { max-width: 65%; } } /* ============================================================================= * 3 — THE CARD, ITS ACTIONS, AND THE ANSWER STATES * ========================================================================== */ .qz-card { gap: 12px; padding: 24px 30px 26px; } .qz-card .ks-h2 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.18; } .qz-card .ks-choice { min-height: 50px; padding: 9px 16px; font-size: 15px; } .qz-card .qz-reveal.ks-card--tight { padding: 14px 18px; gap: 6px; } .qz-card .qz-reveal .qz-explain { font-size: 14.5px; line-height: 1.5; } .qz-card .ks-h1 { max-width: none; font-size: clamp(30px, 3.6vw, 48px); } .qz-topic { color: var(--ks-ink-3); letter-spacing: 0.12em; } .qz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .qz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 0; } .qz-actions .ks-quiet { margin-left: auto; min-height: 44px; font-size: 14px; } .qz-legal { text-align: center; max-width: 56ch; margin: 18px auto 0; } .qz-intro-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px 0; margin: 4px 0; border-block: 1px solid var(--ks-line); list-style: none; } .qz-intro-steps li { font-size: 15px; line-height: 1.4; } .qz-intro-steps b { display: block; margin-bottom: 12px; color: var(--ks-acc); font: 11px var(--ks-mono); } body.qz .qz-cols[data-stage="intro"] .qz-card { padding-block: 20px 12px; gap: 18px; } body.qz .qz-cols[data-stage="intro"] .qz-card .ks-h1 { font-size: clamp(44px, 6vw, 72px); } body.qz .qz-prefs__h { font-size: clamp(36px, 4vw, 56px) !important; } body.qz .qz-prefs > .ks-body { margin-bottom: 22px; } .qz-reassurance { max-width: 52ch; line-height: 1.6; } .qz-question-actions { justify-content: space-between; } .qz-question-actions .ks-quiet { margin-left: 0; } .qz-evidence summary { padding-block: 8px; color: var(--ks-ink-2); font-size: 14px; cursor: pointer; } .qz-evidence[open] summary { margin-bottom: 6px; } .qz-evidence .src { display: block; margin-top: 10px; } .qz-evidence summary:focus-visible, .qz-preferences-more summary:focus-visible { outline: 2px solid var(--ks-ink-1); outline-offset: 4px; } body.qz .qz-preferences-more { border-block: 1px solid var(--ks-line); } body.qz .qz-preferences-more > summary { padding: 18px 0; color: var(--ks-ink-1); font-size: 15px; cursor: pointer; } .qz-preferences-more > summary > span { float: right; color: var(--ks-ink-3); font-size: 12px; } .qz-preferences-more[open] > .qz-pref { margin-bottom: 12px; } body.qz .qz-prefs-actions { padding-block: 10px; } body.qz .qz-prefs > .qz-pref { padding: 20px 24px; } @media (max-width: 520px) { .qz-intro-steps { gap: 12px; } .qz-intro-steps li { font-size: 13px; } body.qz .qz-prefs > .qz-pref { padding: 18px; } body.qz .qz-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } body.qz .qz-grid.g3 .qz-pick { padding: 10px 8px; min-height: 68px; } body.qz .qz-grid.g3 .qz-pick > b { font-size: 13px; } body.qz .qz-grid.g3 .qz-pick > span { font-size: 12px; } body.qz .qz-preferences-more .qz-grid.g3 { grid-template-columns: 1fr; } } /* After a pick: the right answer is affirmed in the gradient (the skin's data-state="right"); the wrong one is only marked, on its rule and its letter, never filled — a wrong answer filled in the brand colour reads as "selected", which is the opposite of what it means. */ .ks-choice[data-state="wrong"] { border-color: var(--crit, var(--ks-bad)); } .ks-choice[data-state="wrong"] .ks-choice__key { border-color: var(--crit, var(--ks-bad)); color: var(--crit, var(--ks-bad)); } .ks-choice[data-state="right"] .ks-choice__key { background: rgba(11, 10, 20, 0.14); } /* THE REVEAL: the product, arriving whether you were right or not. A tight plate inside the card, one verdict line in the mono voice, the explanation in body ink, and the source under it. */ .qz-reveal { margin-top: 6px; animation: qzRise .18s cubic-bezier(.2, .7, .2, 1) both; } .qz-reveal .qz-explain { max-width: none; font-size: 15px; line-height: 1.6; color: var(--ks-ink-1); } .qz-verdict { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-ink-2); } .qz-reveal[data-verdict="right"] { border-color: var(--green-fill, var(--ks-good)); } .qz-reveal[data-verdict="right"] .qz-verdict { color: var(--green, var(--ks-good)); } .qz-reveal[data-verdict="wrong"] { border-color: var(--ks-line-2); } @keyframes qzRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .qz-fade { animation: qzRise .2s cubic-bezier(.2, .7, .2, 1) both; } /* Keyboard: the letter on the key is the hint. The whole row is the target. */ .ks-choice:focus-visible .ks-choice__key { border-color: var(--ks-acc); color: var(--ks-ink-1); } /* ============================================================================= * 4 — THE RESULT * ----------------------------------------------------------------------------- * The one flourish in the flow: a drawn ring, filled on the frame after it * arrives. The number is in the body face, which has real tabular figures. * ========================================================================== */ .qz-score { text-align: center; align-items: center; } .qz-score .ks-body { margin-inline: auto; max-width: 46ch; } .qz-dial { position: relative; width: 148px; height: 148px; max-width: 100%; flex: 0 0 auto; } .qz-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); } .qz-dial .track { stroke: var(--ks-line-2); stroke-width: 9; fill: none; } .qz-dial .fill { stroke: url(#dg); stroke-width: 9; fill: none; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2, .75, .2, 1); } .qz-dial .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .qz-dial .num { font-family: var(--ks-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ks-ink-1); } .qz-dial .of { margin-top: 6px; font-family: var(--ks-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-ink-3); } .qz-road { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; max-width: 60ch; margin-inline: auto; font-size: 13px; color: var(--ks-ink-2); } .qz-road .ks-eyebrow { flex-basis: 100%; text-align: center; } .qz-road__step { white-space: nowrap; } .qz-road__step b { font-family: var(--ks-mono); font-weight: 500; color: var(--ks-acc); margin-right: 6px; } .qz-score .qz-actions { justify-content: center; } .qz-score .qz-actions .ks-quiet { margin-left: 0; } /* ============================================================================= * 5 — PREFERENCES * ----------------------------------------------------------------------------- * Numbered plates, each a card: a mono number, the question at h3, a grid of * choices. The chosen option takes the gradient — the skin's one convention * for "on" — except in the two presentation samples, where the accent is the * thing being chosen and cannot also be the thing that says "chosen". * ========================================================================== */ .qz-prefs { display: flex; flex-direction: column; gap: 14px; } .qz-prefs > .ks-eyebrow { margin-bottom: -6px; } .qz-prefs__h { margin-bottom: 10px; } .qz-pref { gap: 10px; } .qz-pref .ks-h3 { margin-top: -2px; } .qz-hint { margin-top: -4px; } .qz-pref .count { margin-top: 2px; } .qz-grid { display: grid; gap: 10px; margin-top: 8px; } @media (min-width: 620px) { .qz-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qz-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qz-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qz-pick { display: flex; flex-direction: column; gap: 4px; justify-content: center; text-align: left; padding: 14px 16px; min-height: 64px; border-radius: var(--ks-radius-s); border: 1px solid var(--ks-line-2); background: transparent; color: var(--ks-ink-1); font-family: var(--ks-body); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .qz-pick:hover { border-color: rgba(167, 139, 250, 0.6); } .qz-pick > b { font-size: 15px; font-weight: 600; } .qz-pick > span { font-size: 13px; line-height: 1.45; color: var(--ks-ink-2); } .qz-pick[aria-checked="true"] { background: var(--ks-grad); border-color: transparent; color: var(--ks-on-grad); } .qz-pick[aria-checked="true"] > span { color: var(--ks-on-grad); opacity: .8; } /* The focus chips are buttons wearing the skin's static chip. */ .qz-chip { background: transparent; cursor: pointer; font: inherit; } .qz-chip:hover { border-color: rgba(167, 139, 250, 0.6); } .qz-chip[aria-checked="true"] { background: var(--ks-grad); border-color: transparent; color: var(--ks-on-grad); } /* ============================================================================= * 7 — THE FIELD * ----------------------------------------------------------------------------- * kc-shoal.js painted its specks in the landing's pale ink, read from the body * ground at mount. This page is always that ground (section 1), so the * light-ground inversion the skin's other pages carry does not apply here. * The canvas is fixed behind everything; .ks-above lifts the columns over it. * (The page has drawn public-scenery.js's scenery instead since 2026-09-26, and * kc-shoal.js was deleted on 2026-10-01; nothing mounts .ks-field-bg now.) * ========================================================================== */ body.qz .ks-field-bg { z-index: 0; } body.qz .ks-field-bg .lp2-shoal { filter: none; opacity: 1; } /* Public-editorial intentionally loads later, but the compact onboarding * layout is page-owned. Scope these rules to body.qz so its broad entry-page * rules cannot expand the controls or flatten their corners again. */ body.qz .qz-cols { padding-top: 24px; } body.qz .qz-card { border-radius: 16px; } body.qz .qz-card .ks-choice { border-radius: 10px; } body.qz .qz-card .qz-reveal { border-radius: 12px; } body.qz .qz-prefs { gap: 12px; } body.qz .qz-prefs > .ks-eyebrow { margin-bottom: 0; } body.qz .qz-prefs__h { margin-bottom: 0; } body.qz .qz-prefs > .ks-body { margin-bottom: 8px; } body.qz .qz-prefs .qz-pref { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 8px 8px; padding: 18px 20px; border: 1px solid var(--ks-line); border-radius: 14px; background: #101210; } body.qz .qz-pref > .ks-eyebrow { grid-column: 1; grid-row: 1; padding-top: 5px; color: var(--ks-ink-3); } body.qz .qz-pref > .ks-eyebrow::before { content: none; } body.qz .qz-pref > .ks-h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 21px; line-height: 1.25; } body.qz .qz-pref > :not(.ks-eyebrow):not(.ks-h3) { grid-column: 1 / -1; } body.qz .qz-pref .qz-hint { margin: 0; line-height: 1.45; } body.qz .qz-pref .ks-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } body.qz .qz-pref .qz-chip { width: 100%; min-width: 0; min-height: 48px; height: auto; justify-content: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--ks-ink-1); border-color: var(--ks-line-3); font-size: 14px; line-height: 1.35; text-align: left; white-space: normal; } body.qz .qz-pref .count { margin: 0; line-height: 1.4; } body.qz .qz-pref .qz-grid { margin-top: 4px; gap: 8px; } body.qz .qz-pref .qz-pick { min-width: 0; min-height: 64px; padding: 10px 12px; border-radius: 10px; background: transparent; border-color: var(--ks-line-3); color: var(--ks-ink-1); } body.qz .qz-pref .qz-pick > span { color: var(--ks-ink-2); } body.qz .qz-pref :is(.qz-pick, .qz-chip):hover { background: #1a201b; border-color: var(--ks-ink-2); } body.qz .qz-pref :is(.qz-pick, .qz-chip)[aria-checked="true"] { background: #f4f1ea; border-color: #f4f1ea; color: #101210; } body.qz .qz-pref .qz-pick[aria-checked="true"] > span { color: #323a33; opacity: 1; } body.qz .qz-pref :is(.qz-pick, .qz-chip):focus-visible { outline: 2px solid var(--ks-ink-1); outline-offset: 3px; } body.qz .qz-preferences-more { border-block: 1px solid var(--ks-line); } body.qz .qz-preferences-more > summary { min-height: 48px; padding-block: 14px; } /* Explicitly hide all optional blocks when native details is closed. Some * accessibility snapshots otherwise expose their generated number prefixes. */ body.qz .qz-preferences-more:not([open]) > :not(summary) { display: none !important; } body.qz .qz-preferences-more[open] > .qz-pref { margin: 0 0 10px; } body.qz .qz-prefs > .qz-prefs-actions { border-top: 0; padding-block: 4px; } body.qz .qz-prefs-actions .ks-cta { min-height: 48px; border-radius: 12px; } @media (min-width: 620px) { body.qz .qz-pref .ks-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 520px) { body.qz .qz-cols { padding-top: 18px; padding-bottom: 28px; } body.qz .qz-prefs { gap: 10px; } body.qz .qz-prefs__h { font-size: 32px !important; line-height: 1.12; } body.qz .qz-prefs > .ks-body { font-size: 15px; line-height: 1.45; margin-bottom: 4px; } body.qz .qz-prefs .qz-pref { padding: 14px; gap: 7px 6px; } body.qz .qz-pref > .ks-h3 { font-size: 19px; } body.qz .qz-pref .qz-hint { font-size: 13px; } body.qz .qz-pref .ks-chips { gap: 7px; } body.qz .qz-pref .qz-chip { padding: 9px 10px; font-size: 13px; } body.qz .qz-pref .qz-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } body.qz .qz-pref .qz-grid.g3 .qz-pick { padding: 10px 7px; min-height: 68px; } body.qz .qz-pref .qz-pick > b { font-size: 13px; } body.qz .qz-pref .qz-pick > span { font-size: 12px; } body.qz .qz-preferences-more .qz-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.qz .qz-preferences-more .qz-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.qz .qz-prefs-actions { gap: 10px; } body.qz .qz-prefs-actions .ks-cta { font-size: 14px; padding-inline: 15px; } } /* ============================================================================= * 8 — `clear`, AND THE STATIC EQUIVALENT * ----------------------------------------------------------------------------- * `clear` is the high-legibility register: no decorative motion, no accent * bloom, hairlines everywhere. Under reduced motion the ring arrives at its * value instead of travelling to it and the thinking dots hold one opacity. * ========================================================================== */ [data-presentation="clear"] .ks-field-bg { display: none; } [data-presentation="clear"] .ks-cta:hover, [data-presentation="clear"] .ks-cta:focus-visible, [data-presentation="clear"] .ks-choice:hover:not(:disabled) { transform: none; } @media (prefers-reduced-motion: reduce) { .qz-fade, .qz-reveal { animation: none; } .qz-bar > i, .qz-dial .fill, .qz-pick, .qz-chip { transition: none; } }