/* UOH Accessibility Widget — frontend styles */ :root { --uoh-a11y-accent: #2454FF; --uoh-a11y-accent-ink: #ffffff; --uoh-a11y-icon-size: 56px; --uoh-a11y-radius: 14px; } #uoh-a11y-root, #uoh-a11y-root * { box-sizing: border-box; } /* The wrapper that holds your ACTUAL site content. Color-scheme filters (dark mode / invert / contrast / grayscale) are applied ONLY to this element via inline style from JS, never to . This keeps the floating widget completely outside the filtered subtree, so it can never be visually altered, covered, or have its position:fixed behavior broken by the filter creating a new containing block. */ #uoh-a11y-page-wrap { min-height: 100%; } /* When an invert-like filter (dark mode / invert colors) is active, cancel it back out specifically on media so photos/logos aren't inverted along with the page — the filter is applied twice (once by the element itself, once by the ancestor), which mathematically cancels for that element. */ .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media img, .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media video, .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media svg, .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media picture, .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media iframe, .uoh-a11y-page-wrap.uoh-a11y-counter-invert-media canvas { filter: invert(1) hue-rotate(180deg); } /* ---------- Skip link ---------- */ .uoh-a11y-skip-link { position: fixed !important; top: -100px; left: 12px; z-index: 2147483000; background: #111318; color: #fff; padding: 12px 18px; border-radius: 8px; font: 600 15px/1.3 system-ui, sans-serif; text-decoration: none; transition: top .15s ease; } .uoh-a11y-skip-link:focus { top: 12px; } /* ---------- Floating toggle button ---------- */ /* !important on positioning so no theme/plugin rule can accidentally detach it from the corner of the viewport. */ .uoh-a11y-toggle { position: fixed !important; z-index: 2147483000; width: var(--uoh-a11y-icon-size); height: var(--uoh-a11y-icon-size); border-radius: 50%; background: var(--uoh-a11y-accent); color: var(--uoh-a11y-accent-ink); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: transform .18s ease, box-shadow .18s ease; } .uoh-a11y-toggle:hover { transform: translateY(-2px) scale(1.04); } .uoh-a11y-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } .uoh-a11y-toggle svg { width: 60%; height: 60%; } .uoh-a11y-pos-bottom-left { left: 20px !important; bottom: 20px !important; right: auto !important; top: auto !important; } .uoh-a11y-pos-bottom-right { right: 20px !important; bottom: 20px !important; left: auto !important; top: auto !important; } .uoh-a11y-pos-top-left { left: 20px !important; top: 20px !important; right: auto !important; bottom: auto !important; } .uoh-a11y-pos-top-right { right: 20px !important; top: 20px !important; left: auto !important; bottom: auto !important; } /* ---------- Panel ---------- */ .uoh-a11y-panel { position: fixed !important; z-index: 2147483000; width: min(340px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 40px)); overflow-y: auto; background: #fff; color: #14161c; border-radius: var(--uoh-a11y-radius); box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 16px; font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; display: none; } .uoh-a11y-panel.is-open { display: block; } #uoh-a11y-root.uoh-a11y-pos-bottom-left .uoh-a11y-panel { left: 20px; bottom: calc(var(--uoh-a11y-icon-size) + 32px); } #uoh-a11y-root.uoh-a11y-pos-bottom-right .uoh-a11y-panel { right: 20px; bottom: calc(var(--uoh-a11y-icon-size) + 32px); } #uoh-a11y-root.uoh-a11y-pos-top-left .uoh-a11y-panel { left: 20px; top: calc(var(--uoh-a11y-icon-size) + 32px); } #uoh-a11y-root.uoh-a11y-pos-top-right .uoh-a11y-panel { right: 20px; top: calc(var(--uoh-a11y-icon-size) + 32px); } .uoh-a11y-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e6e8ee; } .uoh-a11y-panel-header h2 { font-size: 16px; margin: 0; font-weight: 700; } .uoh-a11y-close { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #14161c; } .uoh-a11y-close:hover { background: #f1f2f6; } .uoh-a11y-close:focus-visible { outline: 2px solid var(--uoh-a11y-accent); outline-offset: 2px; } .uoh-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .uoh-a11y-item { border: 1px solid #e6e8ee; border-radius: 10px; background: #fafbfd; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; font-size: 12.5px; font-weight: 600; color: #14161c; transition: background .12s ease, border-color .12s ease; } .uoh-a11y-item:hover { background: #f1f4ff; } .uoh-a11y-item:focus-visible { outline: 2px solid var(--uoh-a11y-accent); outline-offset: 2px; } .uoh-a11y-item[aria-pressed="true"] { background: var(--uoh-a11y-accent); border-color: var(--uoh-a11y-accent); color: var(--uoh-a11y-accent-ink); } .uoh-a11y-item svg { width: 22px; height: 22px; } .uoh-a11y-stepper { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e6e8ee; border-radius: 10px; padding: 8px 10px; background: #fafbfd; } .uoh-a11y-stepper span { font-weight: 600; font-size: 13px; } .uoh-a11y-stepper-controls { display: flex; gap: 6px; } .uoh-a11y-stepper button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #d6dae3; background: #fff; cursor: pointer; font-size: 16px; font-weight: 700; color: #14161c; } .uoh-a11y-stepper button:hover { background: #f1f2f6; } .uoh-a11y-stepper button:focus-visible { outline: 2px solid var(--uoh-a11y-accent); outline-offset: 2px; } .uoh-a11y-reset { margin-top: 12px; width: 100%; padding: 10px; border-radius: 10px; border: 1px dashed #c7cbd6; background: transparent; cursor: pointer; font-weight: 700; font-size: 13px; color: #14161c; } .uoh-a11y-reset:hover { background: #f1f2f6; } .uoh-a11y-reset:focus-visible { outline: 2px solid var(--uoh-a11y-accent); outline-offset: 2px; } /* RTL */ [dir="rtl"] .uoh-a11y-panel { text-align: right; } /* ================= Applied effects (added to ) ================= */ /* Note: dark_mode / invert_colors / contrast / grayscale are NOT here — they're applied as a combined inline `filter` on #uoh-a11y-page-wrap from JS (see updateColorFilters in widget.js) so they compose correctly instead of separate CSS classes overwriting each other's `filter`. */ html.uoh-a11y-underline-links #uoh-a11y-page-wrap a { text-decoration: underline !important; } /* Big, clearly visible cursor. Sized at the upper end of what browsers reliably render (larger custom cursors are often silently ignored). */ html.uoh-a11y-big-cursor #uoh-a11y-page-wrap, html.uoh-a11y-big-cursor #uoh-a11y-page-wrap * { cursor: url('data:image/svg+xml;utf8,') 2 2, auto !important; } html.uoh-a11y-pause-animations #uoh-a11y-page-wrap *, html.uoh-a11y-pause-animations #uoh-a11y-page-wrap *::before, html.uoh-a11y-pause-animations #uoh-a11y-page-wrap *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } html.uoh-a11y-hide-images #uoh-a11y-page-wrap img, html.uoh-a11y-hide-images #uoh-a11y-page-wrap [style*="background-image"] { visibility: hidden !important; } html.uoh-a11y-letter-spacing #uoh-a11y-page-wrap body { letter-spacing: 0.06em !important; } html.uoh-a11y-letter-spacing #uoh-a11y-page-wrap p, html.uoh-a11y-letter-spacing #uoh-a11y-page-wrap li { line-height: 1.9 !important; } /* Reading guide bar */ .uoh-a11y-reading-guide-bar { position: fixed; left: 0; width: 100%; height: 34px; background: rgba(255, 224, 102, .45); border-top: 2px solid rgba(0,0,0,.35); border-bottom: 2px solid rgba(0,0,0,.35); pointer-events: none; z-index: 2147482999; display: none; } html.uoh-a11y-reading-guide .uoh-a11y-reading-guide-bar { display: block; } /* Strong visible focus ring whenever keyboard-nav mode is on */ html.uoh-a11y-keyboard-nav #uoh-a11y-page-wrap *:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; } @media (max-width: 480px) { .uoh-a11y-panel { width: calc(100vw - 24px); } }