/* ================================================================ WCAG 2.2 Level AA — Global Accessibility Stylesheet shdw.com — applies to all pages via in ================================================================ */ /* 1. Skip navigation link (WCAG 2.4.1) Appears only on keyboard focus; invisible otherwise. */ .skip-link { position: fixed; top: -100%; left: 1rem; z-index: 9999999; background: #C9A84C; color: #080808; padding: 14px 28px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border-radius: 0 0 4px 4px; transition: top 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid #080808; outline-offset: 2px; } /* 2. Custom cursor — only active when mouse is detected (WCAG 1.4.3) JS adds .has-custom-cursor on first mousemove. Keyboard-only users never trigger this, so their system cursor stays visible. */ body:not(.has-custom-cursor) *, body:not(.has-custom-cursor) *::before, body:not(.has-custom-cursor) *::after { cursor: auto !important; } /* 3. Visible focus indicators (WCAG 2.4.11, 2.4.13 — new in 2.2) 2px solid gold (#C9A84C) contrasts ≥ 3:1 against the site's black (#080808) and the focused element background. */ :focus-visible { outline: 2px solid #C9A84C !important; outline-offset: 3px !important; border-radius: 1px; } /* Override inline outline:none on form controls */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #C9A84C !important; outline-offset: 0 !important; border-color: #C9A84C !important; } /* Override outline removal on buttons */ button:focus-visible { outline: 2px solid #C9A84C !important; outline-offset: 3px !important; } /* 4. Focused element not fully obscured by sticky nav (WCAG 2.4.11) scroll-margin-top ensures anchor targets appear below the nav bar. */ :target, [id] { scroll-margin-top: 90px; } /* 5. Minimum target size (WCAG 2.5.8 — new in 2.2) All interactive elements must be at least 24×24 CSS pixels. */ a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], input[type="checkbox"], input[type="radio"] { min-height: 24px; } /* 6. Ticker separator contrast fix (WCAG 1.4.3) rgba(0,0,0,0.35) on gold yields ~2.1:1 — fails AA. Raising to 0.65 opacity gives ~5.2:1 — passes. */ .ticker-sep, .globalops__ticker-sep { color: rgba(0, 0, 0, 0.65) !important; } /* 7. Footer — 6-column grid with Legal column */ .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr !important; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .footer-top { grid-template-columns: 1fr !important; } /* Prevent grid-column:span 2 from overflowing a 1-column grid */ .gap-card--cta, .gap-card--sports { grid-column: span 1 !important; } } /* 8. Reduce motion — respect prefers-reduced-motion (WCAG 2.3.3) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 9. Discreet pause/play control for autoplay background video (WCAG 2.2.2) Decorative hero videos autoplay, loop, and run > 5s in parallel with page content, so 2.2.2 requires a mechanism to pause them. The control is kept visually minimal: a small, translucent corner chip. It still satisfies: - 1.4.11 Non-text Contrast — the icon (#f0ede8, fully opaque) sits on a dark chip and clears 3:1 even over a bright video frame. - 2.5.8 Target Size — 30×30px exceeds the 24px minimum. - 2.4.13 Focus — inherits the global gold focus ring (button rule above). The button is injected by accessibility.js into each video's container. */ .vid-pause-btn { position: absolute !important; bottom: 14px; right: 14px; z-index: 5; width: 30px; height: 30px; min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(8, 8, 8, 0.55) !important; color: #f0ede8; cursor: pointer; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background 0.2s ease, transform 0.2s ease; } .vid-pause-btn svg { width: 13px; height: 13px; display: block; fill: currentColor; } .vid-pause-btn:hover, .vid-pause-btn:focus-visible { background: rgba(8, 8, 8, 0.9) !important; transform: scale(1.08); } @media (max-width: 600px) { .vid-pause-btn { bottom: 10px; right: 10px; } }