/* * Sitewide accessibility layer (Workstream 3). * Loaded in the of every layout AFTER the chrome stylesheets so it * can override legacy focus resets without touching the mirrored files * under /Content (which fetch-parity can refresh). This file holds only * accessibility affordances: the skip link and a global visible focus ring. * * Gold focus token matches the site identity (#c9a86a). Per the chrome * header note (.agents/memory/chrome-header-sticky.md), never add * padding-top offsets here: the sticky header reserves its own height. */ /* Skip link: first focusable element on every page. Visually hidden until it receives keyboard focus, then pinned to the top-left above all chrome. */ .brz-skip-link { position: absolute; left: 0; top: 0; transform: translateY(-120%); z-index: 100000; margin: 0; padding: 0.75rem 1.2rem; background: #231f20; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid #c9a86a; border-radius: 0 0 6px 0; transition: transform 0.12s ease-in-out; } .brz-skip-link:focus, .brz-skip-link:focus-visible { transform: translateY(0); outline: 2px solid #c9a86a; outline-offset: 2px; } /* Global visible focus ring for keyboard users across the whole site. Uses :focus-visible so it never shows on mouse click, only on keyboard or programmatic focus. Covers links, buttons, and form controls. */ 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 { outline: 2px solid #c9a86a; outline-offset: 2px; } /* The main content target must not paint a focus ring when it receives programmatic focus from the skip link (it is not an interactive control). */ #main-content:focus { outline: none; } /* Visually hidden but exposed to assistive tech and the accessibility tree. Used for section headings that keep heading order sane without altering the visible design. */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }