/* ============================================================================= a11y.css — Wave-2 Member-Funnel accessibility primitives (DEV-1 foundation) See: DOCS/INDIANMARRIAGE/2026-06-29-WAVE2-MEMBER-FUNNEL-DESIGN.md §3 + EVAL must-folds (accessibility 9.3 + gold-on-white contrast). This file is ADDITIVE and token-only (no hardcoded hex). It is the canonical home for the focus-ring utility, the gold-contrast rule, and reduced-motion handling so EVERY later Wave-2 DEV unit (onboarding stepper, twin-pane manage hub, preferences/family drawers) inherits the same accessible primitives instead of re-authoring them per page. Load AFTER tokens.css / main.css so the var(--*) tokens resolve. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Visible focus ring (WCAG 2.4.7 / 2.4.11). Keyboard-only via :focus-visible so mouse users don't see the ring, but keyboard + screen-reader users always get a clear, token-coloured indicator. Brand gold ring on a 2px offset reads on both light and dark surfaces. ----------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="option"], [contenteditable="true"]):focus-visible { outline: 2px solid var(--marriage-gold-700, #b8860b); outline-offset: 2px; border-radius: var(--radius-sm, 0.125rem); } /* Opt-in helper for custom widgets that paint their own focus ring (e.g. the stepper .step-circle, section-nav rail items, drawer close buttons). Apply class="focus-ring" + ensure the element is focusable (tabindex). */ .focus-ring:focus-visible { outline: 2px solid var(--marriage-gold-700, #b8860b); outline-offset: 2px; } /* A token-driven box-shadow ring variant for elements where outline is clipped by overflow:hidden parents (cards, pills). Same gold, AA-contrast colour. */ .focus-ring-inset:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg-primary, #fff), 0 0 0 4px var(--marriage-gold-700, #b8860b); } /* ----------------------------------------------------------------------------- 2. Gold-on-light contrast rule (EVAL must-fold). The brand primary gold (--marriage-gold / #d4af37) is ~1.9:1 on white and FAILS WCAG AA for text and thin (1px) UI affordances. On light surfaces, TEXT / ICONS / 1px BORDERS must use the darker --marriage-gold-700 (#b8860b ~ passes 4.5:1 for normal text against white). Gold may still FILL large blocks (buttons, progress fills, banners) where it carries a dark/white label. `.gold-text` / `.gold-icon` / `.gold-border` are the accessible tokens for text-weight gold; later units use these instead of raw gold on light bg. ----------------------------------------------------------------------------- */ .gold-text { color: var(--marriage-gold-700, #b8860b); } .gold-icon { color: var(--marriage-gold-700, #b8860b); } .gold-border { border-color: var(--marriage-gold-700, #b8860b); } /* Under dark surfaces the lighter gold has sufficient contrast and is the intended brand hue — restore it so dark cards keep the richer gold. */ :root.dark .gold-text, [data-theme="dark"] .gold-text, .dark .gold-text { color: var(--marriage-gold-300, #fbbf24); } :root.dark .gold-icon, [data-theme="dark"] .gold-icon, .dark .gold-icon { color: var(--marriage-gold-300, #fbbf24); } /* ----------------------------------------------------------------------------- 3. Screen-reader-only utility (visually hidden but announced). Used for aria-live status text, off-screen labels on icon-only controls, etc. ----------------------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- 4. Reduced-motion handling (WCAG 2.3.3 / EVAL must-fold). Later units animate the completeness rail / score gauges and pane-swap transitions; gate those behind prefers-reduced-motion so users who opt out get instant state. `.motion-safe-anim` is the opt-in hook those units attach their transitions/animations to. ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .motion-safe-anim, .motion-safe-anim * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* QA-FIX-1: the .motion-safe-anim opt-in covers the signature completeness/ score animations, but the Wave-2 funnel pages also carry load-bearing non-essential motion that is NOT tagged — the onboarding step-panel pane-swap (opacity/transform), the twin-pane section/tab colour transitions, toggle-switch knob slide, upload-zone hover, and the header-card collapse. Per the EVAL reduced-motion must-fold, neutralise ALL non-essential motion for opted-out users so in-place pane-swapping and state changes are instant, not animated. Scoped to the Wave-2 funnel surfaces (pages that link this file render their content under these hooks) so this is additive and does not re-style the wider fleet. transition/animation timing only — no layout, colour, or token change. */ .step-panel, .step-indicator, .step-circle, .section-tab, .section-chip, .pref-tab, .hub-headercard, .toggle-switch, .toggle-switch::after, .upload-zone, .completeness-fill, .ring-fill, .pane { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }