/* ========================================================================== Accessibility base layer — WCAG 2.1 AA remediation for the public site. Loaded LAST in so its focus rules win over the scattered `outline: none` declarations in the older stylesheets. This file is for cross-cutting a11y primitives only; per-component fixes belong in that component's stylesheet. ========================================================================== */ /* -------------------------------------------------------------------------- 2.4.1 Bypass Blocks — skip link Off-screen until focused, then pinned to the top-left above the sticky header. -------------------------------------------------------------------------- */ .sbi-skip-link { position: absolute; top: -100px; left: 16px; z-index: 2147482000; padding: 12px 20px; background: #131413; color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; border: 2px solid #ffffff; border-radius: 0 0 8px 8px; transition: top .15s ease-in; } .sbi-skip-link:focus { top: 0; color: #ffffff; } /* The skip target is focused programmatically; it must not draw a ring itself. */ #main-content:focus { outline: none; } /* -------------------------------------------------------------------------- 2.4.7 Focus Visible — one authoritative keyboard focus indicator. `!important` is deliberate: form.css, club_registration.css and others set `outline: none` on buttons, checkboxes and inputs with higher specificity. :focus-visible means mouse clicks do NOT draw the ring, only keyboard focus. -------------------------------------------------------------------------- */ 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, [role="tab"]:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid #ff9811 !important; outline-offset: 2px !important; border-radius: 2px; } /* On dark surfaces the orange ring needs a light companion to stay visible. */ .sb-top-bar a:focus-visible, .sb-main-header a:focus-visible, .sb-main-header button:focus-visible, .sb-side-drawer a:focus-visible, .sb-side-drawer button:focus-visible, .sb-footer a:focus-visible, .sb-footer button:focus-visible { outline: 3px solid #ff9811 !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, .35); } /* Composite controls that show focus on a wrapper rather than the input. */ .bl-coach-card:focus-within, .bl-session-btn:focus-within, .sb-checkbox:focus-within, .sb-radio:focus-within { outline: 3px solid #ff9811; outline-offset: 2px; } /* -------------------------------------------------------------------------- 1.4.3 Contrast — text sitting on the brand orange. White on #FF9811 is 2.15:1. The approved fix keeps the bright orange fill and switches its text to near-black (8.58:1). Most of that was done in each component's own stylesheet; the rules below catch the cases where the fill and the text colour are declared in DIFFERENT rules, so the white was being inherited from an ancestor rather than set alongside the background. Add any new orange-filled component here as well. -------------------------------------------------------------------------- */ .sb-tag.sb-tag-featured, .sb-tag-featured, .sb-club-badge-province, .sb-referee-badge-level, .pb-join__btn-primary, .pb-join__btn-primary--lg, .pb-join__btn-text, .pb-hero__badge, .pb-btn--accent, .pb-btn--orange, .sb-header-btn-orange, .sb-mega-card-btn-orange, .sb-btn-orange, .cart-btn-orange, .shop-add, .eb-btn, .rl-btn, .ls-btn-orange, .narticle-cat, .mlog-btn-orange { color: #fff !important; } /* Icon glyphs and nested text spans inherit from the button, so they need the same treatment (SVG strokes use currentColor in most of these components). */ .pb-join__btn-primary *, .pb-join__btn-primary--lg *, .sb-header-btn-orange *, .sb-btn-orange *, .cart-btn-orange *, .shop-add *, .eb-btn *, .rl-btn *, .ls-btn-orange *, .mlog-btn-orange * { color: inherit; } /* -------------------------------------------------------------------------- 1.4.3 Contrast — brand green on DARK surfaces. The approved brand green #3F7818 is tuned for light backgrounds (5.37:1 on white). On the near-black footer and the dark hero it drops to ~3.6:1, so those surfaces get a lighter green instead — 9.51:1 on the footer. -------------------------------------------------------------------------- */ .sb-footer .sb-footer-col-title, .sb-footer h2, .sb-footer h3, .sb-footer h4, .pb-join__accent--light, .pb-join__h2--light .pb-join__accent { color: #7ec850; } /* -------------------------------------------------------------------------- Screen-reader-only text (accessible names for icon-only controls) -------------------------------------------------------------------------- */ .pb-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible again when it is the focus target (skip-link style patterns). */ .pb-sr-only--focusable:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* -------------------------------------------------------------------------- 1.4.12 Text Spacing / 1.4.4 Resize — never clip scaled text -------------------------------------------------------------------------- */ .sbi-a11y-scaled-safe { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 4.1.3 Status Messages — error summary produced by common.js -------------------------------------------------------------------------- */ .sbi-error-summary { margin: 0 0 20px; padding: 16px 18px; border: 2px solid #b3261e; border-left-width: 6px; border-radius: 8px; background: #fdf2f2; color: #8c1d18; } .sbi-error-summary:focus-visible { outline: 3px solid #b3261e !important; outline-offset: 2px; } .sbi-error-summary__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #8c1d18; } .sbi-error-summary__list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; } .sbi-error-summary__list a { color: #8c1d18; text-decoration: underline; } /* -------------------------------------------------------------------------- 2.3.3 Animation from Interactions -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }