/* ============================================================================ * ACCESSIBILITY.CSS — WCAG 2.1 AA layer, site-wide. * * Loaded LAST in so its rules win the cascade against page-scoped * CSS (main.css, home.css, stitch-tokens.css, per-page overrides). Nothing * in this file changes visual identity — it only adds/fixes the pieces that * make the site usable for people relying on: * * - Screen readers (JAWS, NVDA, VoiceOver, TalkBack) * - Keyboard-only navigation * - Zoom (up to 400% per WCAG 1.4.4) * - Reduced motion (vestibular disorders, migraine, epilepsy) * - High contrast (low vision) * - Larger touch targets (motor impairments, tremor) * * References: * - WCAG 2.1: https://www.w3.org/TR/WCAG21/ * - MDN accessibility guide: https://developer.mozilla.org/en-US/docs/Web/Accessibility * ========================================================================= */ /* ── 1. SKIP-TO-CONTENT LINK ───────────────────────────────────────────── The first thing a keyboard/screen-reader user hits on every page. Lets them jump past the nav to the main content in one Tab press. Hidden visually until focused (mouse users never see it). WCAG 2.4.1. */ .skip-to-content { position: absolute; top: -100px; left: 8px; z-index: 10000; padding: 12px 20px; background: #033619; color: #ffffff; font-weight: 600; text-decoration: none; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: top 0.15s ease; } .skip-to-content:focus, .skip-to-content:focus-visible { top: 8px; outline: 3px solid #ffdf98; outline-offset: 2px; color: #ffffff; } /* ── 2. SCREEN-READER-ONLY UTILITY ─────────────────────────────────────── Hides content visually while keeping it accessible to screen readers. Standard clip-path pattern that works in every SR engine. Use for: icon-only buttons ("