/* 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; } /* Holds your ACTUAL site content. Color filters (dark mode / invert / contrast / grayscale) and text-zoom are applied ONLY here via inline style from JS — never on — so the floating widget (a sibling, outside this element) can never be dragged into a new fixed-position containing block or covered by a filtered/transformed block. */ #uoh-a11y-page-wrap { min-height: 100%; } /* ---------- 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 ---------- */ .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(360px, calc(100vw - 32px)); max-height: min(620px, 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; } [dir="rtl"] .uoh-a11y-panel { text-align: right; } /* ---------- FAQ view ---------- */ .uoh-a11y-faq-back { background: none; border: none; color: var(--uoh-a11y-accent); font-weight: 700; cursor: pointer; padding: 0 0 6px; font-size: 13px; } .uoh-a11y-faq-view-title { font-weight: 800; font-size: 15px; margin: 0 0 10px; } .uoh-a11y-faq-search { width: 100%; padding: 9px 10px; border: 1px solid #d6dae3; border-radius: 8px; margin-bottom: 10px; font-size: 13.5px; } .uoh-a11y-faq-list { max-height: 220px; overflow-y: auto; margin-bottom: 12px; } .uoh-a11y-faq-q { display: block; width: 100%; text-align: left; background: #fafbfd; border: 1px solid #e6e8ee; border-radius: 8px; padding: 9px 10px; margin-bottom: 6px; cursor: pointer; font-weight: 600; font-size: 13px; color: #14161c; } [dir="rtl"] .uoh-a11y-faq-q { text-align: right; } .uoh-a11y-faq-q:hover { background: #f1f4ff; } .uoh-a11y-faq-a { background: #fff; border: 1px dashed #e6e8ee; border-radius: 8px; padding: 8px 10px; margin: -2px 0 8px; font-size: 13px; color: #3a3f4b; } .uoh-a11y-faq-nomatch { font-size: 13px; color: #6a707c; margin: 6px 0; } .uoh-a11y-faq-ask { border-top: 1px solid #e6e8ee; padding-top: 10px; } .uoh-a11y-faq-ask-label { font-weight: 700; font-size: 13px; margin: 0 0 6px; } .uoh-a11y-faq-question, .uoh-a11y-faq-email { width: 100%; padding: 8px 10px; border: 1px solid #d6dae3; border-radius: 8px; font: inherit; margin-bottom: 6px; } .uoh-a11y-faq-send { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--uoh-a11y-accent); color: var(--uoh-a11y-accent-ink); font-weight: 700; cursor: pointer; } .uoh-a11y-faq-status { font-size: 12.5px; color: #3a3f4b; min-height: 16px; margin: 6px 0 0; } /* ================= Applied effects (added to ) ================= */ /* dark_mode / invert_colors / contrast / grayscale are NOT class-based — they're a combined inline `filter` set on #uoh-a11y-page-wrap from JS. */ html.uoh-a11y-underline-links #uoh-a11y-page-wrap a { text-decoration: underline !important; } 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; } .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; } 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); } }