/* ========================================================================== Assessment funnel - page styles -------------------------------------------------------------------------- Loaded only by /assessment/. Consumes the tokens from tokens.css and the button/icon primitives from shell.css; defines nothing that could collide with the legacy WordPress stylesheet, which this page does not load at all. ========================================================================== */ /* -------------------------------------------------------------------------- No-JS / ready gating. The funnel card is hidden until engine.js adds .qa-ready to , and the fallback block is shown in its place. A one-line blocking script in adds .qa-js before first paint, so there is no flash of the fallback for the overwhelming majority who do have JS. -------------------------------------------------------------------------- */ /* MUST come first, and must be !important. * * The browser's built-in rule is `[hidden] { display: none }`, at specificity * (0,1,0). Any class-based display rule below - `.qa-js .qa-card { display: * block }` is (0,2,0) - silently OUTRANKS it, so an element the engine has * marked hidden stays laid out. That produced a real bug: on the results * screen the hidden question card remained 1361px tall, leaving a huge empty * block above the results and a blank first screen. * * The engine toggles visibility with the `hidden` attribute throughout, so * that attribute has to be the final word. */ [hidden] { display: none !important; } .qa-card, .qa-intro { display: none; } .qa-nojs { display: block; } .qa-js .qa-card, .qa-js .qa-intro { display: block; } .qa-js .qa-nojs { display: none; } /* Once results are showing, the "here is what this is" intro is spent - it would otherwise sit above the results repeating a pitch the visitor has already accepted. */ .qa-phase-results .qa-intro { display: none; } /* Until the engine boots, the card is present but inert. Showing it only on .qa-ready avoids a frame of un-hydrated markup (an empty step host with a 0% progress bar). */ .qa-js .qa-card { visibility: hidden; } .qa-js.qa-ready .qa-card { visibility: visible; } /* -------------------------------------------------------------------------- Page frame -------------------------------------------------------------------------- */ .qa-page { background: var(--sn-bg); color: var(--sn-text); font-family: var(--sn-font-sans); font-size: var(--sn-fs-body); line-height: var(--sn-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .qa-main { /* Enough room that the card is never flush against the sticky header. */ padding: var(--sn-space-7) var(--sn-gutter) var(--sn-space-9); background: linear-gradient(180deg, var(--sn-green-50) 0%, var(--sn-bg) 22rem); } .qa-shell { max-width: var(--sn-container-narrow); margin-inline: auto; } .qa-intro { text-align: center; margin-block-end: var(--sn-space-6); } .qa-eyebrow { display: inline-block; font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: var(--sn-ls-caps); text-transform: uppercase; color: var(--sn-accent); margin-block-end: var(--sn-space-3); } .qa-title { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h2); line-height: var(--sn-lh-snug); letter-spacing: var(--sn-ls-tight); color: var(--sn-ink); font-weight: 600; margin: 0 0 var(--sn-space-4); } .qa-subhead { font-size: var(--sn-fs-lead); color: var(--sn-text); margin: 0 auto var(--sn-space-3); max-width: 46ch; } .qa-promise { font-size: var(--sn-fs-sm); font-weight: 600; color: var(--sn-accent); margin: 0; } /* -------------------------------------------------------------------------- Card -------------------------------------------------------------------------- */ .qa-card, .qa-results { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-r-lg); box-shadow: var(--sn-shadow-md); padding: var(--sn-space-5); } @media (min-width: 30rem) { .qa-card, .qa-results { padding: var(--sn-space-6); } } /* --- Progress ------------------------------------------------------------ */ .qa-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sn-space-3); font-size: var(--sn-fs-xs); color: var(--sn-text-muted); margin-block-end: var(--sn-space-2); } .qa-progress-pct { font-weight: 600; color: var(--sn-accent); } .qa-progress { height: 8px; border-radius: var(--sn-r-pill); background: var(--sn-green-100); overflow: hidden; margin-block-end: var(--sn-space-6); } .qa-progress__fill { height: 100%; border-radius: var(--sn-r-pill); background: var(--sn-accent); /* So step 1 still shows the bar exists, while aria-valuenow stays honestly 0. */ min-width: 6px; transition: width 320ms var(--sn-ease); } @media (prefers-reduced-motion: reduce) { .qa-progress__fill { transition: none; } } /* Visually-hidden live region. */ .qa-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Questions ---------------------------------------------------------- */ .qa-fieldset { border: 0; padding: 0; margin: 0 0 var(--sn-space-5); } .qa-legend { /* A legend cannot be flexed reliably across browsers, so it is displayed as a block and the step counter sits above the prompt inside it. */ display: block; padding: 0; margin-block-end: var(--sn-space-4); } .qa-step-count { display: block; font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: var(--sn-ls-caps); text-transform: uppercase; color: var(--sn-text-muted); margin-block-end: var(--sn-space-2); } .qa-prompt { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h3); line-height: var(--sn-lh-snug); font-weight: 600; color: var(--sn-ink); margin: 0; scroll-margin-top: 6rem; } .qa-prompt:focus { outline: none; /* focused programmatically for announcement, not by the user */ } .qa-prompt:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: 4px; border-radius: var(--sn-r-sm); } .qa-hint { font-size: var(--sn-fs-sm); color: var(--sn-text-muted); margin: 0 0 var(--sn-space-4); } .qa-options { display: grid; /* 12px minimum between targets so adjacent options are not mis-tapped. */ gap: var(--sn-space-3); } .qa-option { display: flex; align-items: center; gap: var(--sn-space-3); /* 48px, not the 44px floor: this is the primary interaction on the page. */ min-height: 48px; padding: 14px 16px; border: 1px solid var(--sn-border, var(--sn-line)); border-radius: var(--sn-r-md); background: var(--sn-surface); cursor: pointer; transition: border-color var(--sn-dur) var(--sn-ease), background-color var(--sn-dur) var(--sn-ease); } .qa-option:hover { border-color: var(--sn-green-300); background: var(--sn-green-50); } /* The native input stays in the accessibility tree and the tab order - it is only visually replaced. Never display:none, which would remove it entirely. */ .qa-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .qa-option__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--sn-warm-400); background: var(--sn-surface); transition: border-color var(--sn-dur) var(--sn-ease), background-color var(--sn-dur) var(--sn-ease); } /* Radios read round, checkboxes read square - the shape is the affordance that tells someone whether they may pick more than one. */ .qa-option input[type="radio"] ~ .qa-option__mark { border-radius: var(--sn-r-pill); } .qa-option input[type="checkbox"] ~ .qa-option__mark { border-radius: var(--sn-r-sm); } .qa-option__check { width: 14px; height: 14px; color: var(--sn-on-dark); opacity: 0; transition: opacity var(--sn-dur) var(--sn-ease); } .qa-option__label { font-size: var(--sn-fs-body); color: var(--sn-ink); } /* Selected state carries THREE signals - border, background tint, and the check glyph - so it never depends on colour alone (WCAG 1.4.1). */ .qa-option.is-checked, .qa-option:has(input:checked) { border-color: var(--sn-accent); background: var(--sn-green-100); } .qa-option.is-checked .qa-option__mark, .qa-option:has(input:checked) .qa-option__mark { border-color: var(--sn-accent); background: var(--sn-accent); } .qa-option.is-checked .qa-option__check, .qa-option:has(input:checked) .qa-option__check { opacity: 1; } /* :focus-within puts the ring on the whole 48px target rather than on the visually-hidden input. Outline, not box-shadow, so it survives Windows High Contrast Mode. */ .qa-option:focus-within { outline: 3px solid var(--sn-focus); outline-offset: 2px; } .qa-actions { display: flex; align-items: center; gap: var(--sn-space-4); margin-block-start: var(--sn-space-5); } .qa-continue { min-width: 10rem; } /* aria-disabled rather than [disabled], so keyboard users can still reach the button and hear why it will not proceed. */ .qa-continue[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .qa-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-4); margin-block-start: var(--sn-space-5); padding-block-start: var(--sn-space-4); border-top: 1px solid var(--sn-line); } .qa-back { display: inline-flex; align-items: center; gap: var(--sn-space-2); min-height: 44px; padding: 0 var(--sn-space-2); border: 0; background: none; color: var(--sn-text-muted); font: inherit; font-size: var(--sn-fs-sm); cursor: pointer; border-radius: var(--sn-r-sm); } .qa-back:hover:not(:disabled) { color: var(--sn-accent); } .qa-back:disabled { opacity: 0.4; cursor: not-allowed; } .qa-back .sn-icon { color: currentColor; } .qa-disclaimer { font-size: var(--sn-fs-xs); color: var(--sn-text-muted); margin: 0; max-width: 46ch; } /* -------------------------------------------------------------------------- Contact gate -------------------------------------------------------------------------- */ .qa-lead__heading { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h3); line-height: var(--sn-lh-snug); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-3); scroll-margin-top: 6rem; } .qa-lead__heading:focus { outline: none; } .qa-lead__sub { font-size: var(--sn-fs-sm); color: var(--sn-text-muted); margin: 0 0 var(--sn-space-5); } .qa-grid { display: grid; gap: var(--sn-space-4); } @media (min-width: 30rem) { .qa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qa-field label { display: block; font-size: var(--sn-fs-sm); font-weight: 600; color: var(--sn-ink); margin-block-end: var(--sn-space-2); } .qa-input { width: 100%; min-height: 48px; padding: var(--sn-space-3) var(--sn-space-4); border: 1px solid var(--sn-line); border-radius: var(--sn-r-md); background: var(--sn-surface); color: var(--sn-ink); font-family: var(--sn-font-sans); /* 16px is load-bearing: iOS Safari zooms the viewport on focus of any input below 16px, and the visitor then has to pinch back out. */ font-size: 1rem; } .qa-input::placeholder { color: var(--sn-warm-400); } .qa-input:focus-visible { outline: 3px solid var(--sn-focus); outline-offset: 2px; } .qa-input[aria-invalid="true"] { border-color: var(--sn-error); background: var(--sn-error-bg); } /* Per-field errors, not one shared banner: a single banner makes a keyboard or screen-reader user hunt for which field is wrong. */ .qa-error { display: block; min-height: 1.1em; margin-block-start: var(--sn-space-1); font-size: var(--sn-fs-xs); color: var(--sn-error); } .qa-error:empty { min-height: 0; } .qa-prefs { border: 0; padding: 0; margin: 0; } .qa-prefs legend { padding: 0; font-size: var(--sn-fs-sm); font-weight: 600; color: var(--sn-ink); margin-block-end: var(--sn-space-2); } .qa-prefs[aria-invalid="true"] .qa-option { border-color: var(--sn-error); } .qa-consent { display: flex; align-items: flex-start; gap: var(--sn-space-3); padding: var(--sn-space-4); border: 1px solid var(--sn-line); border-radius: var(--sn-r-md); background: var(--sn-bg-alt); cursor: pointer; } .qa-consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--sn-accent); } .qa-consent span { font-size: var(--sn-fs-xs); color: var(--sn-text); line-height: 1.5; } .qa-consent:focus-within { outline: 3px solid var(--sn-focus); outline-offset: 2px; } .qa-consent[aria-invalid="true"] { border-color: var(--sn-error); background: var(--sn-error-bg); } .qa-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-4); margin-block-start: var(--sn-space-5); } .qa-server-error { margin: var(--sn-space-4) 0 0; padding: var(--sn-space-3) var(--sn-space-4); border: 1px solid var(--sn-error); border-radius: var(--sn-r-md); background: var(--sn-error-bg); color: var(--sn-error); font-size: var(--sn-fs-sm); } /* The honeypot. Off-screen, NOT display:none - some bots skip hidden fields but fill positioned ones, which is the point. */ .qa-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } /* -------------------------------------------------------------------------- Results -------------------------------------------------------------------------- */ .qa-results { padding: var(--sn-space-6) var(--sn-space-5); } @media (min-width: 30rem) { .qa-results { padding: var(--sn-space-7) var(--sn-space-6); } } .qa-r__heading { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h2); line-height: var(--sn-lh-snug); letter-spacing: var(--sn-ls-tight); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-3); scroll-margin-top: 6rem; } .qa-r__heading:focus { outline: none; } .qa-r__sub { font-size: var(--sn-fs-sm); color: var(--sn-text-muted); margin: 0 0 var(--sn-space-6); } .qa-score { padding: var(--sn-space-5); border: 1px solid var(--sn-line-strong); border-radius: var(--sn-r-md); background: var(--sn-green-50); margin-block-end: var(--sn-space-6); } .qa-score__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sn-space-3); margin-block-end: var(--sn-space-3); } .qa-score__label { font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: var(--sn-ls-caps); text-transform: uppercase; color: var(--sn-text-muted); } .qa-score__num { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h2); font-weight: 600; line-height: 1; color: var(--sn-accent); } .qa-score__max { font-size: var(--sn-fs-sm); color: var(--sn-text-muted); } .qa-score__band { margin-left: auto; padding: var(--sn-space-1) var(--sn-space-3); border-radius: var(--sn-r-pill); background: var(--sn-accent); color: var(--sn-on-dark); font-size: var(--sn-fs-xs); font-weight: 600; } .qa-score__track { height: 8px; border-radius: var(--sn-r-pill); background: var(--sn-surface); border: 1px solid var(--sn-line); overflow: hidden; margin-block-end: var(--sn-space-3); } .qa-score__fill { height: 100%; background: var(--sn-accent); border-radius: var(--sn-r-pill); } .qa-score__note { margin: 0; font-size: var(--sn-fs-sm); color: var(--sn-text); } .qa-r__h3 { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h4); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-3); } .qa-r__section { margin-block-end: var(--sn-space-6); } .qa-heard p { margin: 0 0 var(--sn-space-4); } .qa-heard p:last-child { margin-bottom: 0; } .qa-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sn-space-4); } .qa-rec { padding: var(--sn-space-4); border: 1px solid var(--sn-line); border-radius: var(--sn-r-md); background: var(--sn-bg-alt); } .qa-rec__title { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h4); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-2); } .qa-rec__blurb { margin: 0 0 var(--sn-space-3); font-size: var(--sn-fs-sm); } .sn-tlink { display: inline-flex; align-items: center; gap: var(--sn-space-2); min-height: 44px; font-size: var(--sn-fs-sm); font-weight: 600; color: var(--sn-accent); text-decoration: none; } .sn-tlink:hover { color: var(--sn-accent-hover); text-decoration: underline; text-underline-offset: 3px; } .qa-telehealth { margin-block-start: var(--sn-space-4); padding: var(--sn-space-4); border: 1px dashed var(--sn-line-strong); border-radius: var(--sn-r-md); font-size: var(--sn-fs-sm); } /* Honest-expectations callout. Sits ABOVE the CTA on purpose: the money conversation happens before the click, not after it. */ .qa-honest { padding: var(--sn-space-5); border-radius: var(--sn-r-md); background: var(--sn-green-100); border: 1px solid var(--sn-line-strong); margin-block-end: var(--sn-space-6); } .qa-honest p { margin: 0 0 var(--sn-space-4); font-size: var(--sn-fs-sm); } .qa-honest p:last-child { margin-bottom: 0; } .qa-cta { text-align: center; padding: var(--sn-space-6) var(--sn-space-4); border-radius: var(--sn-r-md); background: var(--sn-bg-alt); border: 1px solid var(--sn-line); } .qa-cta__h { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h4); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-4); } .qa-cta .sn-btn { width: 100%; } @media (min-width: 30rem) { .qa-cta .sn-btn { width: auto; } } .qa-cta__micro { margin: var(--sn-space-3) 0 0; font-size: var(--sn-fs-xs); color: var(--sn-text-muted); } .qa-cta__call { margin: var(--sn-space-4) 0 0; font-size: var(--sn-fs-sm); } .qa-cta__call a { color: var(--sn-accent); font-weight: 600; } .qa-savefail { display: flex; gap: var(--sn-space-3); padding: var(--sn-space-4); border: 1px solid var(--sn-warn); border-radius: var(--sn-r-md); background: var(--sn-warn-bg); margin-block-end: var(--sn-space-5); } .qa-savefail .sn-icon { color: var(--sn-warn); } .qa-savefail strong { display: block; color: var(--sn-ink); margin-block-end: var(--sn-space-1); } .qa-savefail p { margin: 0 0 var(--sn-space-3); font-size: var(--sn-fs-sm); } .qa-r__foot { margin-block-start: var(--sn-space-6); padding-block-start: var(--sn-space-5); border-top: 1px solid var(--sn-line); font-size: var(--sn-fs-xs); color: var(--sn-text-muted); } .qa-r__foot p { margin: 0 0 var(--sn-space-3); } .qa-restart { color: var(--sn-text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--sn-fs-xs); } /* -------------------------------------------------------------------------- No-JS fallback - a real page, not an apology. -------------------------------------------------------------------------- */ .qa-nojs { padding: var(--sn-space-6); background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: var(--sn-r-lg); box-shadow: var(--sn-shadow-sm); } .qa-nojs h1 { font-family: var(--sn-font-serif); font-size: var(--sn-fs-h3); font-weight: 600; color: var(--sn-ink); margin: 0 0 var(--sn-space-4); } .qa-nojs ul { margin: 0 0 var(--sn-space-5); padding-left: 1.2em; } .qa-nojs li { margin-block-end: var(--sn-space-3); } .qa-nojs a { color: var(--sn-accent); font-weight: 600; } /* -------------------------------------------------------------------------- Minimal shell overrides for this page -------------------------------------------------------------------------- */ .sn-header--minimal .sn-header__bar { max-width: var(--sn-container); justify-content: space-between; min-height: 68px; } /* shell.css hides .sn-header__tel below 48rem, because on the full header the phone, the CTA and the burger cannot all fit in a 350px bar. This bar carries the logo and the phone and nothing else, so there is room at every width - and the phone is the only contact route in this page's minimal shell above the fold. Restore it unconditionally. */ .sn-header--minimal .sn-header__tel { display: inline-flex; } .sn-footer--minimal .sn-footer__top { display: grid; gap: var(--sn-space-6); padding-block: var(--sn-space-7) var(--sn-space-6); } @media (min-width: 48rem) { .sn-footer--minimal .sn-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sn-footer--minimal .sn-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sn-space-3); justify-content: space-between; } /* Debug payload dump, only rendered under ?qadebug=1. */ .qa-debug { margin-block-start: var(--sn-space-5); padding: var(--sn-space-4); border: 1px dashed var(--sn-warm-400); border-radius: var(--sn-r-md); background: #fff; font-size: 12px; line-height: 1.4; overflow-x: auto; white-space: pre; }