/* ========================================================================== Accessibility toolbar — a self-hosted widget (no third-party overlay) that lets visitors adjust text size, contrast, link visibility and font legibility. Choices are remembered (localStorage) and applied as classes on the element by js/accessibility.js. ========================================================================== */ /* --- Toggle button (fixed, bottom-right) --------------------------------- */ .a11y-toggle { position: fixed; right: 20px; bottom: 80px; z-index: 1200; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(11, 31, 58, 0.35); } .a11y-toggle:hover { background: var(--color-secondary); } .a11y-toggle svg { width: 30px; height: 30px; fill: currentColor; } .a11y-toggle:focus-visible, .a11y-panel button:focus-visible { outline: 3px solid var(--color-accent-light); outline-offset: 2px; } /* --- Panel --------------------------------------------------------------- */ .a11y-panel { position: fixed; right: 20px; bottom: 158px; z-index: 1200; width: 300px; max-width: calc(100vw - 40px); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(11, 31, 58, 0.28); padding: var(--space-3); display: none; } .a11y-panel[data-open="true"] { display: block; } .a11y-panel h2 { margin: 0 0 var(--space-2); font-size: 1.125rem; color: var(--color-primary); } .a11y-group { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); } .a11y-group:first-of-type { border-top: none; padding-top: 0; } .a11y-group__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-1); } .a11y-row { display: flex; gap: var(--space-1); } .a11y-panel button.a11y-btn { flex: 1; font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.55em 0.6em; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; } .a11y-panel button.a11y-btn:hover { background: var(--color-surface-muted); } .a11y-panel button.a11y-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .a11y-panel .a11y-size { min-width: 0; } .a11y-panel .a11y-reset { width: 100%; margin-top: var(--space-2); color: var(--color-accent); border-color: var(--color-accent); } .a11y-panel .a11y-reset:hover { background: #fdecec; } /* ========================================================================== Applied accessibility modes (classes on ) ========================================================================== */ /* Text size — scale the typography tokens plus rem/em-based text. */ html.a11y-text-1 { font-size: 112.5%; --text-h1: 46px; --text-h2: 32px; --text-h3: 25px; --text-body: 18px; --text-small: 16px; } html.a11y-text-2 { font-size: 125%; --text-h1: 52px; --text-h2: 36px; --text-h3: 28px; --text-body: 21px; --text-small: 18px; } /* High-contrast mode — near-black ground, white text, yellow interactive. */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast .site-header, html.a11y-contrast .site-footer, html.a11y-contrast .section--dark, html.a11y-contrast .hero, html.a11y-contrast .feature-card, html.a11y-contrast .quick-access__card, html.a11y-contrast .value-card, html.a11y-contrast .region-highlighted, html.a11y-contrast .section--muted, html.a11y-contrast .ncard, html.a11y-contrast .card { background: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast .hero::before { background: rgba(0, 0, 0, 0.75) !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast label { color: #fff !important; } html.a11y-contrast a, html.a11y-contrast .header-cta, html.a11y-contrast .button { color: #ffff00 !important; border-color: #ffff00 !important; } html.a11y-contrast .a11y-panel, html.a11y-contrast .a11y-panel * { background: #000 !important; color: #fff !important; } /* Highlight links — underline and embolden every link in the content. */ html.a11y-links a:not(.a11y-toggle):not(.button):not(.header-cta) { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 700 !important; } /* Readable font — a highly legible stack with generous spacing. */ html.a11y-readable body { font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0.03em; word-spacing: 0.08em; line-height: 1.8; } html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4, html.a11y-readable p, html.a11y-readable a, html.a11y-readable li, html.a11y-readable span { font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important; } @media (prefers-reduced-motion: no-preference) { .a11y-panel[data-open="true"] { animation: a11y-fade 0.15s ease; } @keyframes a11y-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } }