:root { --a11y-accent: #2d6cdf; --base-font-size: 16px; } html { font-size: var(--base-font-size); } .a11y-fab { position: fixed; right: 16px; bottom: 16px; z-index: 99999; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--a11y-accent); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; } .a11y-fab:focus { outline: 3px solid #0a58ca; outline-offset: 2px; } .a11y-fab svg { width: 28px; height: 28px; fill: #fff; } #a11y-panel[aria-hidden="true"] { opacity: 0; transform: translateY(8px); pointer-events: none; } #a11y-panel { position: fixed; right: 16px; bottom: 84px; z-index: 99999; width: min(92vw, 360px); background: #fff; color: #111; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); padding: 12px; transition: opacity .15s, transform .15s; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-title { font-weight: 600; font-size: 16px; margin: 0; } .a11y-close { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; } .a11y-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .a11y-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 1px solid #e6e6e6; border-radius: 10px; background: #fafafa; min-height: 84px; } .a11y-item button { background: none; border: none; cursor: pointer; text-align: center; } .a11y-item .lbl { display: block; font-size: 12px; margin-top: 6px; } .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: #000; color: #fff; padding: .5rem 1rem; z-index: 100000; } /* Focus ring helper */ .a11y-focus { outline: 3px solid #0a58ca !important; outline-offset: 2px; } /* EFFECTS (toggle by adding classes to ) */ html.a11y-hc, html.a11y-hc body { background: #000 !important; color: #fff !important; } html.a11y-hc a { color: #ffd400 !important; text-decoration: underline; } html.a11y-ul a { text-decoration: underline !important; } html.a11y-fs { --base-font-size: 18px; } html.a11y-spacing body { line-height: 1.8; letter-spacing: .06em; word-spacing: .16em; } html.a11y-rm * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* Dyslexia-friendly: swap the whole site font (self-host if possible) */ @font-face { font-family: "AtkinsonHyperlegible"; src: local("Atkinson Hyperlegible Regular"), local("Atkinson Hyperlegible"), url("/fonts/Atkinson-Hyperlegible-Regular.woff2") format("woff2"); font-display: swap; } html.a11y-dys body { font-family: "AtkinsonHyperlegible", Arial, system-ui, sans-serif; }