/* ============================================================ The Bureau — built-in Accessibility toolkit. Self-contained: drop a11y.css + a11y.js on any page. Settings persist across all pages (shared localStorage key) and apply via classes on . Replaces third-party widgets like UserWay for the bespoke build. ============================================================ */ /* ---- Floating launcher button ---- */ .a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background: #1a8c9c; color: #fff; border: 3px solid #fff; box-shadow: 0 8px 22px -8px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, background .15s ease; touch-action: none; } .a11y-fab--dragging { cursor: grabbing; transition: none; opacity: .92; } /* corner positioning (set by JS via data-a11y-corner on ) */ html[data-a11y-corner="bl"] .a11y-fab { left: 18px; right: auto; bottom: 18px; top: auto; } html[data-a11y-corner="br"] .a11y-fab { right: 18px; left: auto; bottom: 18px; top: auto; } html[data-a11y-corner="tl"] .a11y-fab { left: 18px; right: auto; top: 18px; bottom: auto; } html[data-a11y-corner="tr"] .a11y-fab { right: 18px; left: auto; top: 18px; bottom: auto; } .a11y-fab:hover { transform: scale(1.06); background: #136d7c; } .a11y-fab svg { width: 30px; height: 30px; } /* ---- Panel ---- */ .a11y-panel { position: fixed; left: 18px; bottom: 84px; z-index: 9001; width: 320px; max-width: calc(100vw - 36px); background: #fff; color: #1b4b54; border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); font-family: 'Mulish', system-ui, sans-serif; overflow: hidden; transform-origin: bottom left; animation: a11yIn .18s ease both; } /* panel anchors to the same corner as the launcher */ html[data-a11y-corner="bl"] .a11y-panel { left: 18px; right: auto; bottom: 84px; top: auto; transform-origin: bottom left; } html[data-a11y-corner="br"] .a11y-panel { right: 18px; left: auto; bottom: 84px; top: auto; transform-origin: bottom right; } html[data-a11y-corner="tl"] .a11y-panel { left: 18px; right: auto; top: 84px; bottom: auto; transform-origin: top left; } html[data-a11y-corner="tr"] .a11y-panel { right: 18px; left: auto; top: 84px; bottom: auto; transform-origin: top right; } @keyframes a11yIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } } .a11y-panel[hidden] { display: none; } .a11y-head { background: #1a8c9c; color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .a11y-head h2 { margin: 0; font-family: 'Baloo 2', system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 9px; } .a11y-head h2 svg { width: 22px; height: 22px; } .a11y-close { background: rgba(255,255,255,.18); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .a11y-close:hover { background: rgba(255,255,255,.3); } .a11y-body { padding: 16px 18px 20px; max-height: 70vh; overflow-y: auto; } .a11y-group { margin-bottom: 18px; } .a11y-group:last-child { margin-bottom: 0; } .a11y-label { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: #6c8086; margin-bottom: 8px; } /* segmented text-size control */ .a11y-seg { display: flex; gap: 6px; } .a11y-seg button { flex: 1; border: 1.5px solid #e7dcc4; background: #faf3e3; color: #1b4b54; border-radius: 10px; padding: 9px 4px; cursor: pointer; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; } .a11y-seg button.on { background: #1a8c9c; color: #fff; border-color: transparent; } .a11y-seg button:nth-child(1) { font-size: .9rem; } .a11y-seg button:nth-child(2) { font-size: 1.05rem; } .a11y-seg button:nth-child(3) { font-size: 1.2rem; } /* toggle rows */ .a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: #faf3e3; border: 1.5px solid #e7dcc4; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; text-align: left; font-family: inherit; color: #1b4b54; } .a11y-toggle:last-child { margin-bottom: 0; } .a11y-toggle:hover { border-color: #1a8c9c; } .a11y-toggle__txt { font-weight: 700; font-size: .95rem; } .a11y-toggle__sub { font-weight: 400; font-size: .78rem; color: #6c8086; margin-top: 1px; } .a11y-switch { flex: none; width: 44px; height: 26px; border-radius: 20px; background: #cdbf9f; position: relative; transition: background .15s ease; } .a11y-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .a11y-toggle[aria-pressed="true"] .a11y-switch { background: #7fb73e; } .a11y-toggle[aria-pressed="true"] .a11y-switch::after { transform: translateX(18px); } .a11y-reset { width: 100%; margin-top: 14px; background: none; border: 1.5px solid #e24e37; color: #c63f2b; border-radius: 11px; padding: 11px; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; cursor: pointer; } .a11y-reset:hover { background: #fdecea; } .a11y-hide { width: 100%; margin-top: 8px; background: none; border: none; color: #6c8086; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: underline; } .a11y-hide:hover { color: #c63f2b; } /* ===================================================================== EFFECTS — applied via classes on . The app mounts in #root, the panel is a body sibling, so #root zoom never scales the panel itself. ===================================================================== */ /* Text size (proportional zoom of the app only) */ html.a11y-text-1 #root { zoom: 1.12; } html.a11y-text-2 #root { zoom: 1.25; } /* High contrast */ html.a11y-contrast #root { --muted: #2b3a3f; --ink: #0c1d21; --line: #6c8086; --cream: #ffffff; --cream-2: #f0f0f0; --card: #ffffff; } html.a11y-contrast #root, html.a11y-contrast #root p, html.a11y-contrast #root span, html.a11y-contrast #root li, html.a11y-contrast #root div { color: #0c1d21; } html.a11y-contrast #root .muted, html.a11y-contrast #root [class*="__sub"], html.a11y-contrast #root [class*="__note"] { color: #2b3a3f !important; } html.a11y-contrast #root .surface, html.a11y-contrast #root .card, html.a11y-contrast #root .pcard, html.a11y-contrast #root .panel { border: 2px solid #1b4b54; } html.a11y-contrast #root img { filter: contrast(1.06); } /* Readable font (Atkinson Hyperlegible — designed for low vision) */ html.a11y-readable #root, html.a11y-readable #root h1, html.a11y-readable #root h2, html.a11y-readable #root h3, html.a11y-readable #root h4, html.a11y-readable #root button, html.a11y-readable #root input, html.a11y-readable #root textarea, html.a11y-readable #root select { font-family: 'Atkinson Hyperlegible', 'Mulish', system-ui, sans-serif !important; letter-spacing: .01em; } html.a11y-readable #root { line-height: 1.7; word-spacing: .04em; } /* Highlight links */ html.a11y-links #root a:not(.btn):not(.card__file):not([class*="logobox"]) { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 700; } /* Bigger pointer target / focus emphasis */ html.a11y-focus #root *:focus-visible { outline: 4px solid #ee6b2d !important; outline-offset: 3px !important; } html.a11y-focus #root a, html.a11y-focus #root button, html.a11y-focus #root input, html.a11y-focus #root select, html.a11y-focus #root textarea { scroll-margin: 80px; } /* Reduce motion (user-forced, on top of the media query) */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-nomotion [data-reveal] { opacity: 1 !important; transform: none !important; } @media (max-width: 560px) { html[data-a11y-corner="bl"] .a11y-fab, html[data-a11y-corner="tl"] .a11y-fab { left: 12px; } html[data-a11y-corner="br"] .a11y-fab, html[data-a11y-corner="tr"] .a11y-fab { right: 12px; } html[data-a11y-corner="bl"] .a11y-fab, html[data-a11y-corner="br"] .a11y-fab { bottom: 12px; } html[data-a11y-corner="tl"] .a11y-fab, html[data-a11y-corner="tr"] .a11y-fab { top: 12px; } .a11y-fab { width: 50px; height: 50px; } html[data-a11y-corner="bl"] .a11y-panel, html[data-a11y-corner="tl"] .a11y-panel { left: 12px; } html[data-a11y-corner="br"] .a11y-panel, html[data-a11y-corner="tr"] .a11y-panel { right: 12px; } html[data-a11y-corner="bl"] .a11y-panel, html[data-a11y-corner="br"] .a11y-panel { bottom: 72px; } html[data-a11y-corner="tl"] .a11y-panel, html[data-a11y-corner="tr"] .a11y-panel { top: 72px; } } /* one-time "drag me" hint */ .a11y-hint { position: fixed; z-index: 9002; background: #1b4b54; color: #fff; font-family: 'Mulish', system-ui, sans-serif; font-size: .82rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); max-width: 180px; pointer-events: none; animation: a11yIn .2s ease both; } .a11y-hint::after { content: ""; position: absolute; width: 9px; height: 9px; background: #1b4b54; transform: rotate(45deg); }