/* ========================================================================== benefitra.com — accessibility layer (WCAG 2.1 AA) Scope: SKIP LINK + visible keyboard focus restoration ONLY. Does NOT restyle the site. Loaded globally via nginx sub_filter (matomo conf). Theme model (matches the site + consent.css): - has NO baked theme attribute. - JS sets html[data-theme="light"|"dark"] from localStorage['benefitra-theme']. - BASE (no attribute) === DARK. html[data-theme="light"] overrides to light. Focus colors are therefore themed so the ring keeps >=3:1 non-text contrast (WCAG 2.1 SC 1.4.11) against BOTH the dark navy and the white backgrounds. ========================================================================== */ /* -- Focus ring color tokens (themed) ------------------------------------- */ /* Dark (default/base) + explicit dark: bright emerald reads on navy #0a1628. */ :root, html[data-theme="dark"] { --bf-focus: #34d399; /* emerald-400 — ~6:1 on #0a1628 */ --bf-focus-halo: rgba(0, 0, 0, 0.55); } /* Light: darker emerald so the ring keeps >=3:1 on white. */ html[data-theme="light"] { --bf-focus: #047857; /* emerald-700 — ~4.9:1 on #ffffff */ --bf-focus-halo: rgba(255, 255, 255, 0.92); } /* -- Global visible keyboard focus ---------------------------------------- Uses :focus-visible so mouse clicks stay clean but keyboard nav always shows a ring. The !important + the dual outline/box-shadow ring OVERRIDE the per-page `*:focus{outline:none}` / `input:focus{outline:none}` rules baked into the marketing + calculator templates. The halo (a 2nd ring in the opposite tone) guarantees the indicator is visible on any surface colour, not just the page background. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid var(--bf-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px var(--bf-focus-halo) !important; border-radius: 3px; } /* Fallback for the (rare) browser without :focus-visible support: still show a ring on real keyboard focus. Modern browsers ignore this via -moz/-webkit auto behaviour; harmless where :focus-visible is supported. */ @supports not selector(:focus-visible) { a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 3px solid var(--bf-focus) !important; outline-offset: 2px !important; } } /* The skip-link target is a container; moving focus to it should not paint a full-width ring around the whole content region. Screen readers still announce the landing. (Only applies to the id a11y.js assigns.) */ #bf-main:focus, #bf-main:focus-visible { outline: none !important; box-shadow: none !important; } /* -- Skip to content link -------------------------------------------------- Visually hidden until focused, then pinned top-left, high contrast. Its own background/text so it is readable regardless of theme. Injected right after via the gtm sub_filter. */ .bf-skip-link { position: fixed; top: -120px; /* off-screen but still focusable/tabbable */ left: 12px; z-index: 2147483647; /* above sticky nav, cookie banner, everything */ display: inline-block; padding: 12px 18px; background: #047857 !important; /* emerald-700; white text ~5.9:1 (AA) */ color: #ffffff !important; /* !important: site sets a link color w/ !important */ font: 700 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); transition: top 0.15s ease-in-out; } /* The site sets `:root[data-theme="light"] a { color:#0a1628 !important }` (specificity 0,2,1), which beats a plain .bf-skip-link. Match/exceed it so the white text wins in both themes. */ :root[data-theme="light"] a.bf-skip-link, :root[data-theme="dark"] a.bf-skip-link, html a.bf-skip-link { color: #ffffff !important; background: #047857 !important; } .bf-skip-link:focus { top: 12px; outline: 3px solid #ffffff; /* white ring on emerald = clearly visible */ outline-offset: 2px; } /* Respect reduced-motion for the reveal transition. */ @media (prefers-reduced-motion: reduce) { .bf-skip-link { transition: none; } } /* -- Mobile drawer, while a11y.js has it open ------------------------------ a11y.js adds data-bf-modal="open" to the drawer when the site toggles .nav-links.open. Purely defensive polish (scroll lock cue); the site's own CSS still controls the visual drawer. No layout override here. */ body.bf-drawer-open { overflow: hidden; /* lock background scroll (iOS + desktop) */ } /* ========================================================================== A11y v4 (2026-07-17) — contrast + link-distinguishability remediation Fixes surfaced by an axe-core WCAG 2.1 AA audit in BOTH light and dark mode. Theme model: base (no attribute) === dark; html[data-theme="light"] === light. ========================================================================== */ /* -- (1) In-content emerald links/accents miss 4.5:1 ----------------------- LIGHT: brand emerald-600 (#059669) on white/near-white = ~3.6:1. Darken to emerald-800 (#065f46 ~6.9:1 on #fff, ~6.6:1 on #f8fafc). */ :root[data-theme="light"] a[style*="059669"], :root[data-theme="light"] a[style*="10b981"], :root[data-theme="light"] a[style*="10B981"], :root[data-theme="light"] a[style*="34d399"], :root[data-theme="light"] .toc a, :root[data-theme="light"] .contact-box a, :root[data-theme="light"] .article-body a, :root[data-theme="light"] .related-cat { color: #065f46 !important; } /* DARK: emerald-600 on dark cards (#111d2e/#1e252a) = ~4.1-4.49:1. Brighten to emerald-400 (#34d399 ~7:1+ on dark navy). */ :root:not([data-theme="light"]) a[style*="059669"], :root:not([data-theme="light"]) a[style*="10b981"], :root:not([data-theme="light"]) .related-cat, :root:not([data-theme="light"]) .container a[style*="059669"] { color: #34d399 !important; } /* -- (2) Links inside paragraphs must be distinguishable without colour (WCAG 1.4.1). Underline in BOTH themes. Nav/CTAs are not inside

. -------- */ html p a, :root[data-theme="light"] p a, :root:not([data-theme="light"]) p a, :root[data-theme="light"] .toc a, :root:not([data-theme="light"]) .toc a { text-decoration: underline; } /* -- (3) Primary CTA: navy text on emerald fill (#0a1628 on #047857 = 3.3:1). White text on emerald-deep = 5.9:1. ------------------------------------- */ .cta-btn-primary { color: #ffffff !important; } /* -- (4) Muted helper / date / slider-label text is too dark on dark cards (#47505e / #58616d on navy = 2.2-2.7:1). Lighten to slate-400 (#94a3b8, ~6:1 on #0a1628) in DARK mode. Light mode already passes. --------------- */ :root:not([data-theme="light"]) .related-date, :root:not([data-theme="light"]) .slider-labels span, :root:not([data-theme="light"]) .slider-labels, :root:not([data-theme="light"]) [style*="47505e"], :root:not([data-theme="light"]) [style*="58616d"], :root:not([data-theme="light"]) [style*="58616D"] { color: #94a3b8 !important; } /* -- (5) Policy page .toc / .contact-box keep a light background (#f8fafc) in DARK mode while their text turns near-white -> 1.04:1 (invisible). Give the boxes a dark surface + light text in dark mode so both themes are legible. -- */ :root:not([data-theme="light"]) .toc, :root:not([data-theme="light"]) .contact-box { background: #0f1f38 !important; border-color: #22385c !important; } :root:not([data-theme="light"]) .toc *, :root:not([data-theme="light"]) .contact-box > *:not(a) { color: #e6edf6 !important; } :root:not([data-theme="light"]) .toc a, :root:not([data-theme="light"]) .contact-box a { color: #34d399 !important; } /* ========================================================================== A11y v5 (2026-07-17) — dark-mode contrast token remediation (axe WCAG 2.1 AA) Root causes: muted-grey text tokens (rgba(255,255,255,.25-.4)) and the emerald accent token fall below 4.5:1 on dark card surfaces. Light mode already passes. ========================================================================== */ /* -- (A) Muted helper/label/meta greys on dark surfaces -> lighten to slate-300 (#cbd5e1: ~9:1 on #0f1f38, ~6:1 on #1e252a). DARK mode only. --------------- */ :root:not([data-theme="light"]) .result-card .label, :root:not([data-theme="light"]) .detail, :root:not([data-theme="light"]) .bar-label, :root:not([data-theme="light"]) .results-count, :root:not([data-theme="light"]) #resultsCount, :root:not([data-theme="light"]) .slider-labels, :root:not([data-theme="light"]) .slider-labels span, :root:not([data-theme="light"]) .related-date, :root:not([data-theme="light"]) [style*="rgba(255,255,255,0.3)"], :root:not([data-theme="light"]) [style*="rgba(255,255,255,0.35)"], :root:not([data-theme="light"]) [style*="rgba(255,255,255,0.4)"], :root:not([data-theme="light"]) [style*="rgba(255, 255, 255, 0.3)"] { color: #cbd5e1 !important; } /* Footer section headings (rgba(255,255,255,0.25) on navy = 2.4:1) -> slate. */ :root:not([data-theme="light"]) .footer-col h4, :root[data-theme="light"] .footer-col h4 { color: #aebccf !important; /* ~6.5:1 on navy footer (footer is navy both modes) */ } /* -- (B) Emerald accent text on DARK card surfaces -> emerald-400 (#34d399, ~7:1+ on navy cards). Covers .green, tier names, related-cat, summary. ----- */ :root:not([data-theme="light"]) .green, :root:not([data-theme="light"]) .lead-tier-name.green, :root:not([data-theme="light"]) .related-cat, :root:not([data-theme="light"]) .lead-tier-rate, :root:not([data-theme="light"]) [id^="summary"], :root:not([data-theme="light"]) td .green, :root:not([data-theme="light"]) .container [style*="059669"] { color: #34d399 !important; } /* -- (C) .card-link "Read More" is emerald on WHITE blog cards (both modes) -> dark emerald-800 (#065f46 ~6.9:1 on #fff). High specificity to beat token. -- */ :root[data-theme="light"] a.card-link, :root:not([data-theme="light"]) a.card-link, html a.card-link { color: #065f46 !important; } /* -- (D) CTA buttons: navy-on-emerald fill fails 3.3:1. Force white text with specificity high enough to beat `:root[data-theme] a{color:navy!important}`. - */ :root[data-theme="light"] a.cta-btn-primary, :root:not([data-theme="light"]) a.cta-btn-primary, :root[data-theme="light"] a.nav-cta, :root:not([data-theme="light"]) a.nav-cta, html a.cta-btn-primary, html a.nav-cta { color: #ffffff !important; } /* -- (E) Policy (privacy/cookie) in-content + TOC links: emerald #059669 on white = 3.76:1. Darken to emerald-800 in LIGHT mode, high specificity. ----- */ :root[data-theme="light"] .legal-content a, :root[data-theme="light"] .legal a, :root[data-theme="light"] .policy-content a, :root[data-theme="light"] main .toc a, :root[data-theme="light"] main ul li a[href^="#"], :root[data-theme="light"] main p a, :root[data-theme="light"] .container p a, :root[data-theme="light"] .container li a[href^="#"] { color: #065f46 !important; } /* -- (F) Category filter button `.cat-btn.active` (homepage) contrast. -------- */ :root[data-theme="light"] .cat-btn.active, :root:not([data-theme="light"]) .cat-btn.active { color: #ffffff !important; } /* === A11y v6 (2026-07-17) — final residuals ============================== */ /* Emerald-600 button fills fail white text (3.76:1). Darken fill to emerald-700 (#047857) where white text = 5.9:1. Covers nav CTA + active category button. */ :root[data-theme="light"] .nav-cta, :root:not([data-theme="light"]) .nav-cta, :root[data-theme="light"] a.nav-cta, :root:not([data-theme="light"]) a.nav-cta, :root[data-theme="light"] .cat-btn.active, :root:not([data-theme="light"]) .cat-btn.active, .nav-cta, .cat-btn.active { background-color: #047857 !important; color: #ffffff !important; } /* TOC / in-list anchor links: underline for link-distinguishability (1.4.1). */ :root[data-theme="light"] .toc a, :root:not([data-theme="light"]) .toc a, :root[data-theme="light"] li a[href^="#"], :root:not([data-theme="light"]) li a[href^="#"], html .toc a, html li a[href^="#"] { text-decoration: underline !important; } /* Dark-mode inline emerald text/badges -> emerald-400. */ :root:not([data-theme="light"]) [style*="color:#059669"], :root:not([data-theme="light"]) [style*="color: #059669"], :root:not([data-theme="light"]) [style*="color:var(--ocean-400)"] { color: #34d399 !important; } /* === A11y v7 (2026-07-17) — nav CTA + active filter button, max specificity == */ /* White text on emerald-600 fill = 3.76:1. Darken fill to emerald-700 (#047857 -> white = 5.9:1). Ultra-high specificity + background-image:none to beat any gradient/site rule. */ nav.nav .nav-inner .nav-links a.nav-cta, nav.nav .nav-links a.nav-cta, nav .nav-cta, a.nav-cta, .blog-controls .cat-filters button.cat-btn.active, .cat-filters button.cat-btn.active, button.cat-btn.active { background: #047857 !important; background-image: none !important; color: #ffffff !important; } /* === A11y v8 (2026-07-17) — nav CTA ID-specificity override ================ Page chrome bakes `nav#mainNav .nav-cta{background:#059669!important}` (1,1,1) which re-breaks white-on-emerald to 3.76:1. Beat it with `nav#mainNav a.nav-cta` (1,2,1) -> emerald-700 fill, white text = 5.9:1. */ nav#mainNav a.nav-cta, nav#mainNav a.nav-cta:hover { background: #047857 !important; background-color: #047857 !important; background-image: none !important; color: #ffffff !important; } /* === A11y v9 (2026-07-17) — final two ==================================== */ /* (1) .contact-box is a NAVY box in BOTH themes; its links must be light emerald (#34d399 ~8:1 on navy), not the dark emerald used for white backgrounds. */ :root[data-theme="light"] .contact-box a, :root:not([data-theme="light"]) .contact-box a, html .contact-box a { color: #34d399 !important; } /* (2) Muted inline greys written WITHOUT a leading zero (.4/.35/.3/.25) slipped the v5 selectors -> lighten to slate-300 in dark mode (chart legends etc). */ :root:not([data-theme="light"]) [style*="rgba(255,255,255,.4)"], :root:not([data-theme="light"]) [style*="rgba(255,255,255,.35)"], :root:not([data-theme="light"]) [style*="rgba(255,255,255,.3)"], :root:not([data-theme="light"]) [style*="rgba(255,255,255,.25)"] { color: #cbd5e1 !important; }