/* * Sprint 8 v1.9.0 (2026-05-15) — I4 reduced-motion support (WCAG 2.3.3). * * The EU Web Accessibility Directive (2016/2102) requires public-sector and * public-facing services to respect `prefers-reduced-motion`. AssurePort * targets the EU edge and bills itself as GDPR-by-design, so the * accessibility story has to match. Customers with vestibular disorders * (~35% of the population per the WCAG WG estimates), epilepsy * photosensitivity, or simply battery-conscious laptops opt into this * setting via OS-level preference. * * Strategy: when the OS reports `prefers-reduced-motion: reduce`, neutralise * transitions, animations, scroll-behaviour, and spinner rotation across the * entire surface. Everything still works; nothing twinkles, slides, fades or * pulses. Chart.js gets `animation: false` flagged via JS (see app.html * dashboard render), this CSS handles the rest. * * Why a shared asset (not inline)? Marketing, app, status, docs, faq, blog, * positioning, tools, changelog, feedback, security, legal/*.html — twelve * surfaces, one rule. Linking `/assets/a11y-motion.css` in `` keeps * the override consistent and avoids twelve separate edits when the policy * evolves. * * Spec: https://www.w3.org/TR/WCAG21/#animation-from-interactions (2.3.3) */ @media (prefers-reduced-motion: reduce) { /* Globally kill non-essential motion. The `!important` here is intentional: reduced-motion is a user request, never overridable by a component. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Spinners commonly use `animation: spin Ns linear infinite`. Force them to a static dim circle so the user still gets a "loading" affordance without the spin. */ .spinner, .loading-spinner, [class*='spin'] { animation: none !important; opacity: 0.5; } /* Pulse / glow boxes — silence the breathing effect. */ [class*='pulse'], [class*='glow'] { animation: none !important; } /* Smooth-scroll anchors → jump instantly. */ html { scroll-behavior: auto !important; } /* Auto-playing transitions on hover (CTA scale, button lift) — disable. */ .btn:hover, .nav-link:hover, .module-card:hover { transform: none !important; } }