/* Minimal visually-hidden helper */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* Floating button (top-right) */ .a11y-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 1060; width: 54px; height: 54px; border-radius: 50%; border: none; background: linear-gradient(135deg,#009887,#C90166); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.25); cursor: pointer; font-size: 1.2rem; } .a11y-toggle:focus { outline: 3px solid rgba(255,255,255,0.6); } /* Panel */ .a11y-panel { position: fixed; top: 4.8rem; right: 1rem; z-index: 1060; width: 320px; max-width: calc(100% - 2rem); background: #fff; color: #111; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); transform-origin: top right; } .a11y-inner { padding: 1rem; } .a11y-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.5rem; } .a11y-header h2 { font-size:1rem; margin:0; } .a11y-header button { background:transparent; border:none; font-size:1.1rem; cursor:pointer; } .a11y-controls { display:flex; flex-direction:column; gap:.6rem; } .a11y-row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; } .a11y-btns button { background: #f5f5f5; border:1px solid #e6e6e6; padding:.45rem .6rem; border-radius:6px; cursor:pointer; font-size:.9rem; } .a11y-btns button[aria-pressed="true"] { background: linear-gradient(135deg,#009887,#C90166); color:#fff; border-color:transparent; } /* Reset */ .a11y-reset { width:100%; background:#111; color:#fff; border:none; padding:.6rem; border-radius:6px; cursor:pointer; } /* Accessibility classes applied to or */ .html-a11y-font-1 { --a11y-font-mult: 0.92; } .html-a11y-font-2 { --a11y-font-mult: 1; } .html-a11y-font-3 { --a11y-font-mult: 1.1; } .html-a11y-font-4 { --a11y-font-mult: 1.24; } /* Use CSS variable in body text sizes */ body { font-size: calc(1rem * var(--a11y-font-mult, 1)); transition: font-size .18s ease; } /* High contrast */ .html-a11y-contrast * { background-color: transparent !important; color: #fff !important; background-image: none !important; border-color: #fff !important; box-shadow: none !important; } .html-a11y-contrast a { color: #ffd54f !important; text-decoration: underline; } /* Grayscale */ .html-a11y-grayscale { filter: grayscale(1) contrast(.95) !important; } /* Dyslexic font */ @font-face { font-family: 'OpenDyslexicLocal'; src: local('OpenDyslexic3'), local('OpenDyslexic'); } .html-a11y-dyslexic { font-family: 'OpenDyslexicLocal', system-ui, Arial, sans-serif !important; } /* Spacing */ .html-a11y-spacing * { letter-spacing: .02em !important; word-spacing: .2em !important; line-height: 1.7 !important; } /* Reduce motion */ .html-a11y-reducemotion *, .html-a11y-reducemotion *::before, .html-a11y-reducemotion *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } /* Small responsive adjustments */ @media (max-width: 480px) { .a11y-panel { width: 92%; left:4%; right:4%; top: 5.2rem; } .a11y-toggle { width:48px; height:48px; font-size:1rem; } }