/* ============================================================ Revonexis v3.2.5 -- Revenue Leak Quick Check Light Section Polish Scoped, additive visual fix only -- no JavaScript, no question text, no result copy, no CTA links, no page structure changed. Turns the canonical #quick-check section (Diagnostics page, all 3 languages) into a light "clarity / decision" island inside the otherwise dark Diagnostics journey, matching the same approved light system already used for the homepage hero, the Founder/About card (v3.2.2), and the global light navigation -- see V325_QUICK_CHECK_LIGHT_SECTION_NOTES.md for the full reasoning. Mechanism:
also gets the sitewide .rx-light-section class (defined in v314_visual_system.css), which supplies the canonical warm-white background and base ink/paragraph colors for free -- the same mechanism every other light section on the site already uses. This file adds only the qc-specific overrides .rx-light-section's generic rules don't reach: the H2 heading (the sitewide `h2 { color: var(--white) }` rule would otherwise render the heading in almost the exact same color as this section's own background -- effectively invisible; the same issue v3.2.2 found and fixed on .founder-card), the eyebrow label, the card surface, question dividers, question text, the Yes/No pills, the validation hint, and the result panel. Every color is an existing --rx-* token from v314_visual_system.css except one: the validation-hint red, which has no existing --rx-* equivalent (the site's light system has no warning-color token) -- #B3261E is the same warm-red family as the pre-existing dark-theme hint color, darkened to clear WCAG AA (6.3:1) against the card's --rx-light-strong background. See notes for the full color table. Loaded last (after v324_quick_check_hotfix.css) so it wins the cascade without needing broad !important use, consistent with this project's established convention. Linked only on the three Diagnostics pages, matching the Quick Check's canonical location. ============================================================ */ /* ---- Section heading + eyebrow: the sitewide h2/section-label rules are tuned for dark sections and are invisible or low-contrast here -- override for this section only. ---- */ #quick-check h2 { color: var(--rx-ink); } #quick-check .section-label { color: var(--rx-cyan-dark) !important; } /* ---- Card surface: reuses the existing (previously unused-in-markup) .qc-card rules for shape/spacing/max-width, overriding only the dark-tuned background/border/shadow with the same light-card treatment already approved for .founder-card in v3.2.2. ---- */ #quick-check .qc-card { background: var(--rx-light-strong); border: 1px solid var(--rx-light-border); box-shadow: 0 18px 45px rgba(16, 33, 60, 0.08); } /* ---- Question rows: dark-on-dark divider and light-blue-grey text (tuned for navy backgrounds) replaced with a light hairline divider and real ink text. Questions are functional copy, not decorative metadata, so they move from the mono "UI label" treatment to the site's normal light-section body typeface (matching .clarity-body, the light hero's own body-copy pattern). ---- */ #quick-check .qc-question { border-bottom-color: var(--rx-light-border); } #quick-check .qc-q-text { font-family: 'Satoshi', sans-serif; font-weight: 500; color: var(--rx-ink-2); } /* ---- Yes/No pills: default, hover, selected and focus states tuned for the light card. Selected uses a clearly cyan-accented fill so the state reads as obvious at a glance, not just a border change. ---- */ #quick-check .qc-option { border-color: var(--rx-light-border); color: var(--rx-ink-2); } #quick-check .qc-option:hover { border-color: var(--rx-cyan); color: var(--rx-cyan-dark); } #quick-check .qc-option input:checked + span { color: var(--rx-ink); } #quick-check .qc-option:has(input:checked) { border-color: var(--rx-cyan); background: var(--rx-cyan-soft); color: var(--rx-ink); } #quick-check .qc-option input:focus-visible ~ *, #quick-check .qc-option:has(input:focus-visible) { outline: 2px solid var(--rx-cyan); outline-offset: 2px; } /* ---- Validation hint: same warm-red family as the original dark-theme hint, darkened for AA contrast on a light card (6.3:1 against --rx-light-strong). No --rx-* warning token exists to reuse; this is the one new color value in this release. ---- */ #quick-check .qc-hint { color: #B3261E; } /* ---- Result panel: a subtle cyan-tinted highlight (Task 2's "light card or subtle cyan-tinted highlight" direction), reusing the existing --rx-cyan-glow / --rx-cyan-border tokens rather than inventing a new tint. Title moves off the sitewide h2-style var(--white) default; interpretation and next-step move off mono (long-form body copy, not UI metadata) onto the same Satoshi body treatment as the question text and .clarity-body. ---- */ #quick-check .qc-result { margin-top: 1.75rem; padding: 1.5rem 1.75rem; background: var(--rx-cyan-glow); border: 1px solid var(--rx-cyan-border); border-radius: 8px; } #quick-check .qc-result-label { font-family: 'Satoshi', sans-serif; color: var(--rx-ink); } #quick-check .qc-result-interp { font-family: 'Satoshi', sans-serif; font-size: 0.98rem; line-height: 1.75; color: var(--rx-light-text); } #quick-check .qc-result-next { font-family: 'Satoshi', sans-serif; font-weight: 600; font-size: 0.98rem; line-height: 1.7; color: var(--rx-ink-2); } /* ---- Result CTAs: the outline button's dark-theme border/text (tuned for navy backgrounds) is near-invisible on the light result panel -- same fix pattern as .founder-actions .btn-outline in v3.2.2. The primary (solid cyan) button already reads correctly on any background and is left untouched. ---- */ #quick-check .qc-result-ctas .btn-outline { border-color: var(--rx-light-border); color: var(--rx-ink); } #quick-check .qc-result-ctas .btn-outline:hover { border-color: var(--rx-cyan); color: var(--rx-cyan-dark); } @media (max-width: 960px) { #quick-check .qc-result { padding: 1.25rem 1.4rem; } }