/* =========================================================================== /quiz/ and /quiz// - the persona quiz funnels. Brand tokens come from ../styles.css; the email form reuses /resources/resources.css (.rg-form, .rg-done) so the site's two guide forms look and behave alike. Two layouts, one markup. Without the page script everything reads as a page: every question is a plain radio list and all four results are listed. quiz.js adds `qz-ready` to , and ONLY that class turns on the stepped quiz - not main.js's `.js`, because a page whose quiz script failed while main.js loaded must still show its content. `qz-done` marks the moment a result is shown. =========================================================================== */ .qz { max-width: 46rem; } /* ── Hub ──────────────────────────────────────────────────────────────── */ .qz-hub { margin-top: 8px; } .qz-hub__card { display: flex; flex-direction: column; } .qz-hub__dot { display: block; width: 12px; height: 12px; border-radius: var(--pill); background: var(--accent, var(--red)); } .qz-hub__card .card__title { margin-top: 6px; } .qz-hub__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; padding-top: 18px; } .qz-hub__skip { color: var(--text-2); font-size: 0.94rem; text-decoration: underline; } .qz-hub__skip:hover { color: var(--text); } .qz-hub__foot { margin-top: 32px; } .qz-hub__foot a, .qz-help a, .qz-nojs a { color: var(--red-bright); text-decoration: underline; } /* ── Questions ───────────────────────────────────────────────────────── */ .qz-section .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .qz-form { margin-top: 8px; } .qz-q { border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--bg-elev); padding: 20px 22px 22px; margin: 0 0 16px; min-width: 0; /* a fieldset's default min-width is its content, which overflows a phone */ } /* A legend straddles its fieldset's top border by default; floating it full width seats it INSIDE the box, and the options clear it. */ .qz-q__text { float: left; width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--text); } .qz-q__num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pill); background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red-bright); font-size: 0.9rem; font-weight: 700; } .qz-opts { clear: both; display: grid; gap: 10px; padding-top: 16px; } .qz-opt { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--text); cursor: pointer; line-height: 1.45; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .qz-opt:hover { border-color: rgba(255, 255, 255, 0.22); } .qz-opt input { flex: none; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; } .qz-opt input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .qz-opt:has(input:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--bg)); } /* The no-script note, and the controls that only mean something with the script. */ .qz-nojs { margin: 8px 0 0; color: var(--text-2); font-size: 0.94rem; } .qz-progress, .qz-bar, .qz-nav, .qz-result__kicker, .qz-result__others { display: none; } /* ── Stepped quiz (script loaded) ────────────────────────────────────── */ .qz-ready .qz-nojs { display: none; } .qz-ready .qz-q { display: none; } .qz-ready .qz-q.is-current { display: block; } .qz-ready .qz-progress { display: block; margin: 0 0 8px; color: var(--text-2); font-size: 0.9rem; font-weight: 600; } .qz-ready .qz-bar { display: block; height: 4px; margin: 0 0 16px; border-radius: var(--pill); background: var(--bg-2); overflow: hidden; } .qz-bar span { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.3s var(--ease); } .qz-ready .qz-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .qz-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Before a result: the whole results section waits, with nothing to show yet. */ .qz-ready:not(.qz-done) #results { display: none; } /* With a result: the question form steps aside and ONLY the earned result shows. */ .qz-ready.qz-done #qzForm { display: none; } .qz-ready .qz-result { display: none; } .qz-ready .qz-result.is-active { display: block; } .qz-ready .qz-result__kicker, .qz-ready .qz-result__others { display: block; } /* ── Results ─────────────────────────────────────────────────────────── */ .qz-results__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; } .qz-results__lede { margin: 0 0 20px; color: var(--text-2); } .qz-result { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 28px; margin: 0 0 18px; scroll-margin-top: 96px; /* clears the sticky site header */ } .qz-result:focus { outline: none; } .qz-result:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .qz-result__kicker { margin: 0; color: var(--red-bright); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .qz-result__name { margin: 6px 0 14px; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .qz-result__heard { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.6; color: var(--text); } .qz-result__cost, .qz-result__fix { margin: 0 0 10px; line-height: 1.65; color: var(--text-2); } .qz-result__features { margin-top: 18px; } .qz-result__label { margin: 0 0 8px; font-size: 0.84rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); } .qz-result__features ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .qz-result__features a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red-bright); text-underline-offset: 3px; } .qz-result__features a:hover { color: var(--red-bright); } .qz-result__others { margin: 20px 0 0; color: var(--text-2); font-size: 0.94rem; line-height: 1.7; } .qz-link { background: none; border: 0; padding: 0; font: inherit; color: var(--red-bright); text-decoration: underline; cursor: pointer; } .qz-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; } .qz-note { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--red); background: var(--bg-elev); border-radius: var(--r-md); color: var(--text-2); font-size: 0.94rem; line-height: 1.6; } /* ── Get the guide ───────────────────────────────────────────────────── */ .qz-get { margin-top: 8px; } .qz-get__card { margin-top: 0; } .qz-email { margin-top: 14px; } .qz-get__next { margin-top: 18px; } .qz-age { color: var(--text-2); } .qz-help { margin-top: 28px; } @media (max-width: 560px) { .qz-q { padding: 18px 16px 18px; } .qz-result { padding: 22px 18px; } .qz-nav .btn { flex: 1 1 auto; } }