/* ============================================================================ RoboWorx, Vertical-rail design system V5 ยท Accessibility stylesheet: visible focus, the skip link, and a reduced-motion layer. Loaded last. These rules are additive, they do not change the visual design, they make it operable by keyboard and respectful of motion preferences. ============================================================================ */ /* --- Skip link ------------------------------------------------------------- */ /* The first focusable element on the page. Off-screen until focused, then it slides into the top-left corner. Jumps to the
landmark. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 200; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 18px; transform: translateY(-130%); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); } /* --- Visible focus --------------------------------------------------------- */ /* A clear rust ring on any element reached by keyboard. :focus-visible means it shows for keyboard users without adding a ring on mouse clicks. S53: --rust measures 2.87:1 on --ink, below the 3:1 WCAG 1.4.11 minimum for a non-text indicator, and the rail is where Accept, Decline, Mark complete and Sign out live, plus every footer link and the .rail-btn (a rust ring 2px outside a rust button). Dark surfaces therefore take a bone ring instead. The ring colour is a token so a new dark surface only has to set it. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring, var(--rust)); outline-offset: 2px; } /* Dark surfaces: a bone ring (14.9:1 on --ink) rather than rust (2.87:1). */ .aside, .rail, .site-footer, .tj-card, .rail-block { --focus-ring: #EFE9DC; } /* The
landmark is focused programmatically on route change, and #main-start by the skip link. Both are focus targets, not interactive controls, so neither carries a ring. */ #main:focus, #main:focus-visible, #main-start:focus, #main-start:focus-visible { outline: none; } /* --- Reduced motion -------------------------------------------------------- */ /* Honour a request for reduced motion: near-instant transitions and animations, and no smooth scrolling. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* --- Accessibility preferences --------------------------------------------- */ /* Set as attributes on by lib/a11yPrefs.js, and, before first paint, by the inline script in index.html. They adjust the live design additively. */ /* Text size. The interface is px-based, so scale the whole interface with zoom in modest steps that keep the grid layout intact (like browser zoom). PF-103: pre-126 Firefox has no `zoom`, so the control silently no-opped there; @supports adds a transform-scale fallback so the preference always does SOMETHING, and a third step serves people for whom 1.2x is not enough. */ html[data-ax-textsize="large"] body { zoom: 1.10; } html[data-ax-textsize="larger"] body { zoom: 1.20; } html[data-ax-textsize="largest"] body { zoom: 1.35; } @supports not (zoom: 1.1) { html[data-ax-textsize="large"] body { font-size: 110%; } html[data-ax-textsize="larger"] body { font-size: 120%; } html[data-ax-textsize="largest"] body { font-size: 135%; } } /* High contrast. Strengthen secondary text and borders and darken the accent hover. The default accent is already AA 4.5 on light, so it is left as is. */ html[data-ax-contrast="high"] { --ink-mute: #3A3A3A; --line: #7A725E; --rust-dk: #7A2E0E; /* PF-093: the secondary-ink tokens are reachable by the preference now they exist; PF-101: the on-dark chrome accent strengthens too. */ --ink-soft: #444139; --ink-faint: #4E4A42; --rust-bright: #E8702F; } /* Forced reduced motion, in addition to the operating-system @media rule. */ html[data-ax-motion="reduce"] *, html[data-ax-motion="reduce"] *::before, html[data-ax-motion="reduce"] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Underline links in running text (classless ), so they are distinguished by more than colour. UI links (nav, buttons, chips) carry classes and so are left unchanged. */ html[data-ax-linkunderline="on"] a[href]:not([class]) { text-decoration: underline; text-underline-offset: 2px; } /* Visually hidden, screen-reader available (the runway's dated-list twin, P1 S2 / E8). */ .ax-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }