/* ============================================================ Accessibility Widget — shared across all page layouts ============================================================ */ .a11y-widget { position: fixed; right: 0; bottom: 20px; z-index: 10002; display: flex; flex-direction: column; align-items: flex-end; } .a11y-trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 52px; background: rgba(15, 15, 15, 0.92); border: 1.5px solid rgba(255, 255, 255, 0.16); border-right: none; border-radius: 10px 0 0 10px; color: rgba(255, 255, 255, 0.78); cursor: pointer; padding: 0; flex-shrink: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .a11y-trigger:hover, .a11y-trigger[aria-expanded="true"] { background: rgba(35, 35, 35, 0.98); color: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.3); } .a11y-panel { position: fixed; right: 44px; bottom: 20px; top: auto; left: auto; width: 196px; background: rgba(13, 13, 13, 0.97); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 14px 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -4px 0 32px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; visibility: hidden; transform: translateX(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .a11y-panel.is-open { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(0); transition: opacity 0.18s ease, transform 0.18s ease; } .a11y-section { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.055); } .a11y-section:first-child { padding-top: 0; } .a11y-section:last-child { border-bottom: none; padding-bottom: 0; } .a11y-section-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); margin-bottom: 7px; font-family: system-ui, -apple-system, sans-serif; line-height: 1; } .a11y-row { display: flex; gap: 4px; } .a11y-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.72); cursor: pointer; font-family: system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; user-select: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .a11y-text-btn { flex: 1; font-size: 13px; text-align: center; } .a11y-toggle { width: 100%; padding: 8px 10px; justify-content: flex-start; font-size: 12px; font-weight: 500; } .a11y-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.95); } .a11y-btn:focus-visible { outline: 2px solid rgba(255, 224, 0, 0.85); outline-offset: 2px; } .a11y-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.42); color: #fff; } .a11y-btn:disabled { opacity: 0.32; cursor: default; } @media (max-width: 767px) { .a11y-widget { bottom: 68px; } .a11y-panel { bottom: 68px; } } /* ============================================================ Accessibility States (data attributes on ) NOTE: text-size zoom rules live in each page's own CSS at the END of the file so they override px-based values. ============================================================ */ /* Dyslexia-friendly font (Lexend loaded on demand via JS) */ html[data-a11y-dyslexia] body, html[data-a11y-dyslexia] p, html[data-a11y-dyslexia] span, html[data-a11y-dyslexia] h1, html[data-a11y-dyslexia] h2, html[data-a11y-dyslexia] h3, html[data-a11y-dyslexia] h4, html[data-a11y-dyslexia] li, html[data-a11y-dyslexia] a { font-family: 'Lexend', 'Arial', sans-serif !important; letter-spacing: 0.04em !important; line-height: 1.65 !important; word-spacing: 0.1em !important; } /* High contrast — generic link rule; page overrides in each page's CSS */ html[data-a11y-contrast] a:not([class*="a11y"]) { color: #ffe000 !important; text-decoration: underline !important; }