/* * Styles for the server-rendered accessibility statement * (resources/views/accessibility.blade.php). * * Loaded only by that page. This file is hand-written and is NOT a build * artifact — unlike app.css / chunk-vendors.css, it is safe to edit. */ /* Skip link: hidden until focused, then pinned above the fixed header. */ .skipLink { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 20px; background: #5207e9; color: #fff; font-family: Muli-Bold, sans-serif; font-size: 14px; text-decoration: none; } .skipLink:focus { left: 0; } /* The SPA suppresses focus outlines in places; restore a clearly visible one for every interactive element on this page (WCAG 2.4.7 Focus Visible). */ .accessibilityPage a:focus, .accessibilityPage [tabindex]:focus, .skipLink:focus, .bottomMenu a:focus, .header a:focus { outline: 3px solid #5207e9; outline-offset: 2px; } /* Moving focus to
via the skip link should not draw a focus ring around the whole page region. */ .accessibilityPage main:focus { outline: none; } .accessibilityPage .container { max-width: 760px; margin: 0 auto; } .accessibilityPage h1 { font-size: 28px; line-height: 1.25; margin-bottom: 24px; } .accessibilityPage h2 { font-size: 19px; line-height: 1.3; margin-top: 36px; margin-bottom: 12px; } .accessibilityPage p, .accessibilityPage li { /* 16px minimum with generous leading; body copy must reflow on zoom. */ font-size: 16px; line-height: 1.65; color: #222; } .accessibilityPage p { margin-bottom: 16px; } .accessibilityPage ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .accessibilityPage li { margin-bottom: 8px; } .accessibilityPage a { /* Never signal a link by colour alone (WCAG 1.4.1 Use of Color). */ color: #4406c4; text-decoration: underline; } .accessibilityPage .a11yLede { font-size: 18px; line-height: 1.6; margin-bottom: 8px; } .accessibilityPage .a11yDate { margin-top: 36px; font-size: 14px; color: #555; } /* app.css locks the viewport for the SPA: html and body both get overflow:hidden, and body is position:absolute with a fixed height, so the document can never scroll. That is right for an app shell and wrong for a long static document, so undo it for this page only. Both elements carry .a11yDoc, which no SPA route uses. */ html.a11yDoc { overflow: visible; height: auto; } body.a11yDoc { position: static; height: auto; min-height: 100%; overflow: visible; } /* The shared .page rule is built for the SPA: position:absolute, height:100vh and overflow-y:auto, so each route scrolls inside its own container while the document itself never scrolls. That breaks keyboard scrolling on a long static document. With focus on there is nothing for PageDown, Space or the arrow keys to scroll, because the document has no overflow and the container is not focusable, so most of this statement is only reachable by tabbing between links (WCAG 2.1.1 Keyboard). Restore normal document scrolling for this page only; the SPA keeps its own behaviour. The bottom menu is fixed, so reserve room for it plus the iOS safe area. */ .accessibilityPage { position: static; height: auto; min-height: 100vh; overflow: visible; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } @media (prefers-reduced-motion: reduce) { .accessibilityPage * { animation: none !important; transition: none !important; } }