/** * Quick Scan — GENERIC STYLES * * Content-free, scoped under .qs-root. Deliberately does NOT impose its * own palette/font/radius — every token below inherits the host theme's * own design tokens first (--bg/--surface/--border/--text/--muted/ * --accent/--accent-ink/--radius, the orbicul-brand.css convention used * across the ORGX network) and only falls back to a standalone default * when embedded somewhere without them (e.g. this repo's own demo * index.html). The host theme leads; Quick Scan should look like it was * built by the same hand as the rest of the page, not like an imported * widget in a box. */ /* Page-template chrome (quick-scan-template.php's own two wraps around the H1, outside .qs-root/the shortcode entirely) — pulled out of that template's inline styles specifically so mobile can get its own, smaller values below instead of carrying fixed rem paddings sized for desktop into a 375px viewport, where they ate a disproportionate share of the screen before any real content appeared. Top/bottom only, deliberately not the `padding: Xrem 0 Yrem` shorthand the original inline style used — that 3-value form also sets left/right to 0, which on `.orgx-qs-content-wrap` (which carries the theme's own `.wrap` class alongside this one) silently cancelled the theme's own 1.5rem side padding, flush against BOTH edges of the viewport instead of inset like the breadcrumb/header directly above it. Pre-existing since this template was first written, just never as visible on desktop as it is on a 375px phone. */ .orgx-qs-content-wrap { padding-top: 2.5rem; padding-bottom: 4rem; } .orgx-qs-title-wrap { max-width: var(--measure, 720px); margin: 0 auto; padding-bottom: 2.5rem; } .qs-root { --qs-surface: var(--surface, #ffffff); --qs-border: var(--border, #e2dfd7); --qs-text: var(--text, #1e2124); --qs-text-muted: var(--muted, #63686d); /* This theme convention only has two text tiers (text/muted); Quick Scan's "faint" tier (unselected captions, inactive labels) aliases to muted rather than inventing a third tier the host theme doesn't have. */ --qs-text-faint: var(--muted, #8b9095); /* Falls back to the host theme's own --accent (e.g. orbicul-brand.css) when a site's config doesn't set accentColor explicitly — see mount()'s conditional setProperty() in quick-scan-engine.js. */ --qs-accent: var(--accent, #2e6f4e); /* Mirrors the host theme's own contrast pairing: orbicul-brand.css's .btn-primary sets `color: var(--accent-ink)` on `background: var(--accent)` — accent-ink is that theme's deliberately-chosen ink colour for text/icons placed directly on its accent. Inheriting it here means a button using an inherited theme accent automatically gets that theme's own correct contrast colour instead of an assumed white. */ --qs-accent-contrast: var(--accent-ink, #ffffff); --qs-radius: var(--radius, 6px); --qs-max-width: var(--measure, 720px); box-sizing: border-box; /* No font-family here on purpose — inherits whatever the host page's body already set (Raleway on the ORGX network). A standalone preview with no host theme sets its own fallback stack on instead (see index.html), not here. */ color: var(--qs-text); margin-top: 1.5rem; } .qs-root * { box-sizing: border-box; } .qs-stage { max-width: var(--qs-max-width); /* Centered (margin: auto), and deliberately at the same max-width (var(--qs-max-width), i.e. --measure) that quick-scan-template.php gives the page title above it — the two need to share BOTH the same width and the same centering rule, or their edges drift apart on wide viewports. Don't change one without the other. */ margin: 0 auto; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; } .qs-stage.qs-enter-active { opacity: 1; transform: translateY(0); } /* ---------- Shared primitives ---------- */ .qs-btn { font-family: inherit; font-size: 15px; font-weight: 600; border-radius: var(--qs-radius); border: 1px solid transparent; padding: 13px 26px; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1.2; } .qs-btn-primary { background: var(--qs-accent); color: var(--qs-accent-contrast); border-color: var(--qs-accent); } .qs-btn-primary:hover:not(:disabled) { opacity: 0.9; } .qs-btn-primary:disabled { background: var(--qs-border); color: var(--qs-text-faint); border-color: var(--qs-border); cursor: not-allowed; } .qs-btn-ghost { background: transparent; color: var(--qs-text-muted); border-color: var(--qs-border); } .qs-btn-ghost:hover:not(:disabled) { border-color: var(--qs-text-muted); color: var(--qs-text); } .qs-btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; } .qs-btn-large { padding: 15px 34px; font-size: 16px; } /* ---------- Intro ---------- */ /* No standalone title here on purpose — see the comment in quick-scan-engine.js's renderIntro(): the host page's own real title already renders directly above this shortcode's output. */ .qs-intro-copy { font-size: 17px; line-height: 1.6; color: var(--qs-text-muted); margin: 0 0 28px; max-width: 560px; } .qs-intro-meta { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px 0; margin-bottom: 24px; border-top: 1px solid var(--qs-border); border-bottom: 1px solid var(--qs-border); } .qs-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--qs-text); } .qs-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--qs-accent); flex-shrink: 0; } .qs-intro-explainer { font-size: 15px; line-height: 1.6; color: var(--qs-text-muted); margin: 0 0 32px; max-width: 560px; } /* ---------- Question ---------- */ .qs-progress-wrap { margin-bottom: 36px; } .qs-progress-label { font-size: 13px; font-weight: 600; color: var(--qs-text-muted); margin-bottom: 10px; letter-spacing: 0.01em; } .qs-progress-bar { height: 4px; background: var(--qs-border); border-radius: 2px; overflow: hidden; } .qs-progress-fill { height: 100%; background: var(--qs-accent); border-radius: 2px; transition: width 320ms ease; } /* Font-size/weight intentionally NOT set here — this is a real

, so it takes the host theme's own h2 rule (the same one every other h2 on the page uses), rather than a Quick-Scan-specific size competing with it. Only the spacing below it is this component's own concern. / .qs-question-text { margin: 0 0 28px; } .qs-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .qs-option { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; background: var(--qs-surface); border: 1px solid var(--qs-border); border-radius: var(--qs-radius); padding: 16px 18px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--qs-text); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } .qs-option:hover { border-color: var(--qs-accent); } .qs-option-marker { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--qs-border); position: relative; transition: border-color 150ms ease; } .qs-option-selected { border-color: var(--qs-accent); background: color-mix(in srgb, var(--qs-accent) 10%, var(--qs-surface)); } .qs-option-selected .qs-option-marker { border-color: var(--qs-accent); } .qs-option-selected .qs-option-marker::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--qs-accent); } .qs-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .qs-nav .qs-btn-primary { margin-left: auto; } / ---------- Processing ---------- / .qs-processing { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; text-align: center; } .qs-processing-dots { display: flex; gap: 8px; margin-bottom: 18px; } .qs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--qs-accent); opacity: 0.25; animation: qs-pulse 1.1s ease-in-out infinite; } .qs-dot:nth-child(2) { animation-delay: 0.15s; } .qs-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes qs-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } .qs-processing-text { font-size: 15px; color: var(--qs-text-muted); margin: 0; } / ---------- Result ---------- / / Same reasoning as .qs-question-text: a real

, sized by the host theme's own h2 rule, not a Quick-Scan-specific size. / .qs-result-headline { margin: 0 0 32px; } / The bucket's own name within the headline (e.g. "…is DEVELOPING"), highlighted the same way meta.titleHighlight colours a substring of the page title (ORGX_QS_Public::render_title_html()) — see buildHeadlineHtml() in quick-scan-engine.js. / .qs-result-bucket { color: var(--qs-accent); } / ---------- Result visual: staircase (default) ---------- / .qs-stairs { margin-bottom: 32px; } .qs-stairs-track { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 6px; height: 96px; margin-bottom: 12px; } .qs-stair { background: var(--qs-border); border-radius: 3px 3px 0 0; min-height: 10px; transition: background-color 200ms ease; } .qs-stair-past { background: color-mix(in srgb, var(--qs-accent) 40%, var(--qs-border)); } .qs-stair-active { background: var(--qs-accent); } .qs-stairs-captions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .qs-stair-caption { display: flex; flex-direction: column; gap: 4px; text-align: center; } .qs-stair-caption-label { font-size: 12.5px; font-weight: 700; color: var(--qs-text-faint); } .qs-stair-caption-active .qs-stair-caption-label { color: var(--qs-accent); } .qs-stair-caption-desc { font-size: 11.5px; line-height: 1.35; color: var(--qs-text-faint); } .qs-stair-caption-active .qs-stair-caption-desc { color: var(--qs-text); } / ---------- Result visual: matrix (alternative) ---------- / .qs-matrix { margin-bottom: 32px; } .qs-matrix-body { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 8px; } .qs-matrix-yaxis { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--qs-text-faint); } .qs-matrix-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; / min-height, not height: a fixed height clips nothing itself (grid children aren't clipped by default), it just under-reports its own box to anything sizing against it, so taller-than-expected cell content silently overflows into whatever renders next instead of pushing it down. min-height keeps the intended sizing while letting the grid grow if a cell ever genuinely needs more room. / min-height: 220px; } .qs-matrix-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--qs-border); border-radius: var(--qs-radius); background: var(--qs-surface); padding: 14px 16px; text-align: left; } .qs-matrix-cell-active { border-color: var(--qs-accent); background: color-mix(in srgb, var(--qs-accent) 10%, var(--qs-surface)); } .qs-matrix-cell span { display: block; } .qs-matrix-cell-label { font-size: 13.5px; font-weight: 700; color: var(--qs-text-faint); } .qs-matrix-cell-active .qs-matrix-cell-label { color: var(--qs-accent); } .qs-matrix-cell-desc { font-size: 12px; line-height: 1.4; color: var(--qs-text-faint); } .qs-matrix-cell-active .qs-matrix-cell-desc { color: var(--qs-text); } .qs-matrix-xaxis { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--qs-text-faint); padding-left: 38px; } / ---------- Dev-only testing toggle (intro screen) ---------- / .qs-dev-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 14px; border: 1px dashed var(--qs-text-faint); border-radius: var(--qs-radius); / Mixed from --qs-text rather than a hardcoded black/white so the hatch stays faintly visible on both a light and a dark host background. / background: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--qs-text) 6%, transparent), color-mix(in srgb, var(--qs-text) 6%, transparent) 6px, transparent 6px, transparent 12px ); } .qs-dev-toggle-label { font-size: 12px; font-weight: 600; color: var(--qs-text-faint); } .qs-dev-toggle-group { display: flex; gap: 6px; } .qs-dev-toggle-btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--qs-border); background: var(--qs-surface); color: var(--qs-text-muted); cursor: pointer; } .qs-dev-toggle-btn-active { border-color: var(--qs-accent); color: var(--qs-accent); background: color-mix(in srgb, var(--qs-accent) 10%, var(--qs-surface)); } .qs-result-summary { font-size: 17px; line-height: 1.65; color: var(--qs-text-muted); margin: 0 0 36px; } / One short conditional line a content brief asks to append when a specific answer crosses a threshold (see resolveFootnotes() in quick-scan-engine.js) — visually a caveat, not a continuation of the main diagnosis above it, so it gets its own smaller, muted treatment and a left border rather than just another paragraph of body copy. / .qs-result-footnote { font-size: 14px; line-height: 1.55; color: var(--qs-text-muted); margin: -12px 0 36px; padding-left: 14px; border-left: 2px solid var(--qs-border, #d8dcd6); } .qs-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; } .qs-result-block { background: var(--qs-surface); border: 1px solid var(--qs-border); border-radius: var(--qs-radius); padding: 20px 22px; } / Small, bold, accent-coloured structural label — the same pattern the host theme itself already uses (.section-label, .card .kicker, .cluster-card span in orbicul-brand.css), not a new "eyebrow" style. / .qs-block-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--qs-accent); margin: 0 0 14px; } .qs-obs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .qs-obs-list li { font-size: 14.5px; line-height: 1.55; padding-left: 16px; position: relative; } .qs-obs-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--qs-accent); } .qs-block-copy { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--qs-text); } .qs-priority { background: color-mix(in srgb, var(--qs-accent) 6%, var(--qs-surface)); border: 1px solid var(--qs-border); border-left: 3px solid var(--qs-accent); border-radius: var(--qs-radius); padding: 20px 22px; margin-bottom: 32px; } .qs-priority-text { font-size: 16.5px; font-weight: 600; line-height: 1.5; margin: 0; color: var(--qs-text); } .qs-steps { margin-bottom: 44px; } .qs-steps-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: qs-step; } .qs-steps-list li { counter-increment: qs-step; display: flex; gap: 14px; font-size: 15px; line-height: 1.55; align-items: baseline; color: var(--qs-text); } .qs-steps-list li::before { content: counter(qs-step); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--qs-accent); color: var(--qs-accent-contrast); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; align-self: flex-start; } .qs-cta { border-top: 1px solid var(--qs-border); padding-top: 36px; text-align: center; } / Font-size intentionally not set — a real

, same reasoning as .qs-question-text/.qs-result-headline above. / .qs-cta-heading { margin: 0 0 12px; } .qs-cta-body { font-size: 15.5px; line-height: 1.6; color: var(--qs-text-muted); margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto; } .qs-email-result { margin-top: 14px; } .qs-email-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .qs-email-input { font: inherit; font-size: 14px; padding: 11px 14px; border-radius: var(--qs-radius); border: 1px solid var(--qs-border); background: var(--qs-surface); color: var(--qs-text); min-width: 240px; } .qs-email-input:focus { outline: none; border-color: var(--qs-accent); } .qs-email-input:disabled { opacity: 0.6; } .qs-email-status { font-size: 13px; margin: 10px 0 0; color: var(--qs-text-muted); } .qs-email-status-success { color: var(--qs-accent); } / ---------- Responsive ---------- / @media (max-width: 640px) { / The two page-template wraps above .qs-root: same fixed rem values as desktop ate a disproportionate share of a phone's much shorter viewport before any real content appeared — this is what the user flagged as making the page feel mostly empty on mobile. / .orgx-qs-content-wrap { padding-top: 1.5rem; padding-bottom: 2rem; } .orgx-qs-title-wrap { padding-bottom: 1.25rem; } / Same reasoning for the intro screen's own vertical rhythm — desktop's 28–32px gaps between the copy/meta/explainer/button stack were designed for a page with much more content around them; on a phone, four short blocks separated by that much space each just reads as "empty", not "spacious". / .qs-intro-copy { margin-bottom: 18px; } .qs-intro-meta { flex-direction: column; gap: 10px; padding: 12px 0; margin-bottom: 16px; } .qs-intro-explainer { margin-bottom: 20px; } .qs-nav { flex-direction: column-reverse; align-items: stretch; } .qs-nav .qs-btn-primary { margin-left: 0; } .qs-result-grid { grid-template-columns: 1fr; } .qs-stair-caption-label { font-size: 11px; } .qs-stair-caption-desc { display: none; } .qs-matrix-cell { padding: 10px 12px; } / `.qs-matrix-cell .qs-matrix-cell-desc`, not the bare class: the base rule `.qs-matrix-cell span { display: block; }` (two selectors, higher specificity) was silently beating a bare `.qs-matrix-cell-desc { display: none; }` here, so the description text never actually hid on mobile. With it still showing, cell content grew taller than the grid's fixed height and overflowed into the axis label and the summary text below it — keep this selector at least this specific so the override actually wins. */ .qs-matrix-cell .qs-matrix-cell-desc { display: none; } .qs-matrix-grid { min-height: 180px; } }