:root { --a11y-text-scale: 1; --a11y-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* text scaling using CSS variable */ html { font-size: calc(100% * var(--a11y-text-scale)); font-family: var(--a11y-font-family); } /* Focus visible for keyboard users */ :focus-visible { outline: 3px dashed #2563eb; outline-offset: 3px; } /* Visual helper - screen reader only */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Accessibility feature classes applied to --- */ /* Grayscale */ .a11y-grayscale { filter: grayscale(1) !important; } /* High contrast (black bg, white text) */ .a11y-high-contrast { background-color: #000 !important; color: #fff !important; } /* Negative contrast / invert */ .a11y-negative-contrast { filter: invert(1) hue-rotate(180deg) !important; } /* Light background */ .a11y-light-background { background-color: #fff !important; color: #000 !important; } /* Underline links */ .a11y-links-underline a { text-decoration: underline !important; } /* Readable font (larger x-height and spacing) */ .a11y-readable-font { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; } /* --- Accessibility widget UI (floating panel) --- */ .accessibility-container { position: fixed; left: 18px; top: 90px; z-index: 9999; font-family: inherit; } /* Floating open button */ .a11y-open-btn { /* width: 48px; height: 48px; */ /* border-radius: 8px; */ background: #0991d8; color: white; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; /* border: none; */ } .a11y-open-btn svg { font-size: 39px; margin: 10px 5px 10px 5px; } .a11y-open-btn:focus { outline: 3px dashed #fff; outline-offset: 3px } /* Panel */ .a11y-panel { width: 260px; max-width: calc(100vw - 48px); background: #00527c; color: #fff; border-radius: 6px; margin-bottom: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transform-origin: bottom right; } /* Panel header */ .a11y-panel h2 { margin: 0 0 8px 0; font-size: 1rem; } /* List */ .a11y-list { list-style: none; padding: 0; margin: 0; } .a11y-list li { display: flex; align-items: center; gap: 8px; margin: 6px 0; } /* Buttons in list */ .a11y-control-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .a11y-control-btn[aria-pressed="true"] { background: #4f46e5; /* visual pressed state */ border-color: #4f46e5; } .a11y-control-btn:focus { outline: 3px dashed #fff; outline-offset: 2px } /* small control group for inc/dec */ .control-row { display: flex; gap: 8px; } :root { --a11y-text-scale: 1; --a11y-base-font-size: 16px; /* change if your base is different */ } /* Guaranteed root font-size (so scaling always works) */ html { font-size: calc(var(--a11y-base-font-size) * var(--a11y-text-scale)); font-family: var(--a11y-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); } /* If your project uses rem correctly, the above will scale the whole UI. If it uses px heavily, the safe root font-size calc still increases readable text. */ /* Focus visible for keyboard users */ :focus-visible { outline: 3px dashed #2563eb; outline-offset: 3px; } /* High contrast — stronger selector to override existing styles */ .a11y-high-contrast, .a11y-high-contrast * { color: #ffffff !important; background-color: #000000 !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; } /* Grayscale (affects images) */ .a11y-grayscale { filter: grayscale(1) !important; } /* Negative / invert contrast */ .a11y-negative-contrast { filter: invert(1) hue-rotate(180deg) !important; } /* Light background */ .a11y-light-background, .a11y-light-background * { color: #000000 !important; background-color: #ffffff !important; } /* Links underline */ .a11y-links-underline a { text-decoration: underline !important; } /* Readable font */ .a11y-readable-font { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; }