/* ROLLIN accessibility layer — loaded on every public page. Three jobs: (1) skip link + visible keyboard focus, (2) honor reduced motion from the OS or the user preference toggle, (3) apply the user-selected contrast/text-size preferences set by /js/a11y.js (data-a11y-* attributes stamped on before paint). */ /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100000; background: #030712; color: #ffffff; border: 2px solid #14b8a6; border-radius: 999px; padding: 10px 20px; font-family: 'Poppins', system-ui, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 16px; } /* ---------- Visible keyboard focus, sitewide ---------- */ :focus-visible { outline: 2px solid #14b8a6 !important; outline-offset: 2px; } [data-theme="light"] :focus-visible { outline-color: #0f766e !important; } main:focus-visible, main:focus { outline: none !important; /* programmatic focus target for the skip link */ } /* ---------- Reduced motion ---------- */ /* Applies when the OS asks for it, or when the user turns it on in ROLLIN display preferences. GSAP timelines are force-completed by /js/a11y.js; this handles CSS animation, transitions, smooth scroll. */ @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; } html { scroll-behavior: auto !important; } .lb-word { opacity: 1 !important; } } html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="reduce"] { scroll-behavior: auto !important; } html[data-a11y-motion="reduce"] .lb-word { opacity: 1 !important; } /* ---------- Increased contrast ---------- */ /* Editorial dimmed/muted text renders at full strength. Applies for the user toggle and for OS-level prefers-contrast. */ html[data-a11y-contrast="more"] .lb-word { opacity: 1 !important; } html[data-a11y-contrast="more"] .lb-muted, html[data-a11y-contrast="more"] .lb-eyebrow, html[data-a11y-contrast="more"] [class*="-muted"], html[data-a11y-contrast="more"] [class*="-sub"] { color: rgba(255, 255, 255, 0.92) !important; } html[data-a11y-contrast="more"][data-theme="light"] .lb-muted, html[data-a11y-contrast="more"][data-theme="light"] [class*="-muted"], html[data-a11y-contrast="more"][data-theme="light"] [class*="-sub"] { color: #1f2937 !important; } html[data-a11y-contrast="more"] .dense-footer-bottom, html[data-a11y-contrast="more"] .dense-footer-disclaimer { color: rgba(255, 255, 255, 0.85) !important; } html[data-a11y-contrast="more"] .dense-footer-disclaimer a, html[data-a11y-contrast="more"] .dense-footer-built-with a { color: rgba(255, 255, 255, 0.95) !important; } @media (prefers-contrast: more) { .lb-word { opacity: 1 !important; } .lb-muted, .lb-eyebrow { color: rgba(255, 255, 255, 0.92) !important; } [data-theme="light"] .lb-muted, [data-theme="light"] .lb-eyebrow { color: #1f2937 !important; } .dense-footer-bottom, .dense-footer-disclaimer { color: rgba(255, 255, 255, 0.85) !important; } } /* ---------- Larger text ---------- */ /* Flagship pages size type in rem, so bumping the root size scales them. Browser zoom remains fully supported everywhere. */ html[data-a11y-text="lg"] { font-size: 112.5%; } html[data-a11y-text="xl"] { font-size: 125%; } /* ---------- Preference toggles (accessibility statement page) ---------- */ .a11y-prefs { display: grid; gap: 14px; margin: 18px 0 6px; } .a11y-pref { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.03); } .a11y-pref-copy { max-width: 46ch; } .a11y-pref-title { font-weight: 600; font-size: 15px; margin: 0 0 2px; } .a11y-pref-sub { font-size: 13px; color: rgba(255, 255, 255, 0.72); margin: 0; } .a11y-toggle { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); position: relative; cursor: pointer; transition: background 0.15s ease; } .a11y-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; transition: transform 0.15s ease; } .a11y-toggle[aria-pressed="true"] { background: #0d9488; border-color: #0d9488; } .a11y-toggle[aria-pressed="true"]::after { transform: translateX(22px); }