/* ============================================================ a11y.css - site-wide accessibility layer for techspert-data.com Loaded from every page's (via BaseLayout + the 4 standalone heads). Contains ONLY fixes that are safe in every context (dark sections AND light sections), because the site alternates dark/light backgrounds and each page inlines its own styles. Text-contrast fixes (muted gray, orange links) are NOT here - they are context-dependent and are handled per-core-page in the page's own CSS, scoped to its light sections. See the design spec, section 4. ============================================================ */ /* 1) Visible keyboard focus (WCAG 2.4.7 / 2.4.11). Nothing else defines focus. The orange ring clears 3:1 on both white and the dark #1A1D23 chrome. */ :focus-visible { outline: 3px solid #F96302; outline-offset: 2px; border-radius: 2px; } /* On the dark chrome, add a white ring + orange halo for extra visibility. */ .top-bar :focus-visible, nav :focus-visible, footer :focus-visible, .footer :focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px rgba(249, 99, 2, 0.65); } /* 2) Skip-to-content link (WCAG 2.4.1). Hidden until focused. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: #1A1D23; color: #FFFFFF; padding: 10px 16px; border-radius: 6px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus-visible { top: 8px; outline: 3px solid #FFFFFF; } /* 3) Screen-reader-only helper (used by Phase 2 link/icon fixes). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 4) Primary button label -> dark (WCAG 1.4.3, owner-approved Option A). Safe in every context: the button background is brand orange #F96302 everywhere, and dark #1A1D23 text on it is 5.48:1. Bright orange bg is kept, so the brand is unchanged. */ .btn-primary { color: #1A1D23 !important; }