. * 4. .a11y-error / aria-invalid — visual style that pairs with * the JS that sets aria-invalid + aria-describedby on form * fields when validation fails (so screen readers announce * the error text). */ /* 1) prefers-reduced-motion ------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 2) keyboard focus -------------------------------------------- */ *:focus-visible { outline: 2px solid #00D4FF; outline-offset: 2px; border-radius: 4px; } /* Suppress the focus ring when the user used a mouse — Chrome/Safari treat :focus and :focus-visible separately; this lets us keep :focus rules elsewhere without doubling up. */ button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } /* 3) skip-link ------------------------------------------------- */ /* Canonical "visually hidden" pattern: 1x1 clipped element that does NOT extend the page bounds. Previous version used left: -9999px which extended the page horizontally by ~10k px; on iOS Safari that interacted badly with overflow:clip on and was a contributor to "scroll only moves the hero, doesn't continue past it". This version lives at top:0 left:0, clipped to a 1x1 region, so no extra page bounds. */ .skip-link { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; z-index: 99999; } .skip-link:focus { position: fixed; top: 16px; left: 16px; width: auto; height: auto; padding: 10px 16px; margin: 0; clip: auto; clip-path: none; background: #0052cc; color: #fff; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); outline: 2px solid #fff; outline-offset: 2px; } /* 4) form errors ----------------------------------------------- */ [aria-invalid="true"] { border-color: #dc2626 !important; outline-color: #dc2626 !important; } [role="alert"].a11y-error { display: block; margin-top: 4px; font-size: 12px; color: #dc2626; font-weight: 600; } /* NOTE: Dark mode intentionally NOT shipped here. * Initial attempt (2026-05-12) used :root token overrides via * @media (prefers-color-scheme: dark). The codebase has hundreds of * hardcoded colors (background:#fff, color:#0f172a, etc.) and inline * styles that don't read the tokens — flipping tokens only ended up * with unreadable text-on-text and broken cards. * * Proper dark mode needs a full token refactor first: replace every * hardcoded #fff/#0f172a/etc. with a CSS variable. Estimated 2-3 days * of careful audit per surface. See ROADMAP > Accesibilidad > Dark mode. * * Until then we ship light-mode only. The brand identity is daytime * anyway — desktop SaaS dashboards typically stay light. */