/**
* Oversight Accessibility — front-end widget + page-effect styles.
*
* Two concerns live here:
* 1. The widget UI (button + card-grid panel), namespaced under .oa-widget.
* 2. The document-effect classes toggled on (oa-filter-*, oa-contrast-*,
* etc.). These use !important because they must win over theme CSS; the
* widget subtree is excluded/reset so the toolbar stays usable.
*
* © Oversight
*/
/* ===================================================================== */
/* Widget container + toggle button */
/* ===================================================================== */
.oa-widget {
--oa-accent: #1d4ed8;
--oa-ink: #26246e;
--oa-border: #d6d8f2;
--oa-track: #e9eafc;
--oa-offset-x: 20px;
--oa-offset-y: 20px;
position: fixed;
z-index: 2147483000;
bottom: var(--oa-offset-y);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
line-height: 1.4;
}
.oa-pos-bottom-right { right: var(--oa-offset-x); }
.oa-pos-bottom-left { left: var(--oa-offset-x); }
.oa-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--oa-accent);
color: #fff;
cursor: pointer;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
}
.oa-toggle:hover { transform: scale(1.06); }
.oa-toggle.oa-size-small { width: 44px; height: 44px; }
.oa-toggle.oa-size-large { width: 68px; height: 68px; }
.oa-toggle:focus-visible,
.oa-widget button:focus-visible,
.oa-widget a:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--oa-accent);
}
/* ===================================================================== */
/* Panel */
/* ===================================================================== */
.oa-panel {
position: absolute;
bottom: 68px;
width: 372px;
max-width: 94vw;
max-height: 82vh;
/* Above the screen-reader control bar so, on mobile where they overlap,
the panel header is never covered by the reader buttons. */
z-index: 3;
/* Flex column so the header stays put and ONLY the body scrolls. */
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
color: var(--oa-ink);
border-radius: 16px;
box-shadow: 0 12px 48px rgba(20, 20, 60, 0.28);
border: 1px solid #e3e4f3;
}
.oa-pos-bottom-right .oa-panel { right: 0; }
.oa-pos-bottom-left .oa-panel { left: 0; }
.oa-panel[hidden] { display: none; }
.oa-panel-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 18px;
background: var(--oa-accent);
color: #fff;
}
.oa-panel-title { margin: 0; font-size: 19px; color: #fff; font-weight: 700; }
.oa-close {
background: rgba(255, 255, 255, 0.15);
border: none;
color: #fff;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s ease;
}
.oa-close:hover { background: rgba(255, 255, 255, 0.3); }
/* The scrollable options region. min-height:0 is required for a flex child
to shrink and scroll instead of stretching the whole panel. */
.oa-panel-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 18px;
scrollbar-width: thin;
scrollbar-color: #c3c5e6 transparent;
overscroll-behavior: contain;
}
.oa-panel-body::-webkit-scrollbar { width: 8px; }
.oa-panel-body::-webkit-scrollbar-track { background: transparent; }
.oa-panel-body::-webkit-scrollbar-thumb {
background: #c3c5e6;
border-radius: 8px;
border: 2px solid #fff;
}
.oa-panel-body::-webkit-scrollbar-thumb:hover { background: #a9abd6; }
/* ---- Tiles (icon + label cards) --------------------------------------- */
.oa-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.oa-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 90px;
padding: 13px 6px 11px;
background: #fff;
border: 1.5px solid var(--oa-border);
border-radius: 14px;
color: var(--oa-ink);
cursor: pointer;
text-align: center;
transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}
/* Keyboard-shortcut badge (hidden unless keyboard-nav mode is on). */
.oa-tile-key {
display: none;
position: absolute;
top: 5px;
inset-inline-start: 5px;
min-width: 17px;
height: 17px;
padding: 0 3px;
box-sizing: border-box;
background: var(--oa-accent);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 17px;
border-radius: 5px;
text-align: center;
}
.oa-show-keys .oa-tile-key { display: block; }
.oa-tile.oa-active .oa-tile-key { background: #fff; color: var(--oa-accent); }
.oa-reset-key { position: static; display: none; margin-inline-start: 8px; background: rgba(255, 255, 255, 0.25); }
.oa-show-keys .oa-reset-key { display: inline-block; }
/* Shortcuts legend. */
.oa-kbd-legend {
display: none;
margin: 0 0 14px;
padding: 8px 10px;
background: #eef1fd;
color: var(--oa-ink);
border-radius: 8px;
font-size: 12.5px;
line-height: 1.4;
text-align: center;
}
.oa-show-keys .oa-kbd-legend { display: block; }
/* Brief visual pulse when a shortcut fires. */
.oa-tile.oa-flash { animation: oa-flash-anim 0.32s ease; }
@keyframes oa-flash-anim {
0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.5); }
100% { box-shadow: 0 0 0 8px rgba(29, 78, 216, 0); }
}
.oa-tile:hover {
border-color: var(--oa-accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 20, 60, 0.1);
}
.oa-tile:active { transform: translateY(0); }
.oa-tile-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 11px;
background: #eef1fd;
color: var(--oa-accent);
transition: background 0.14s ease, color 0.14s ease;
}
.oa-tile-icon svg { width: 24px; height: 24px; display: block; }
.oa-tile-label {
font-size: 12px;
line-height: 1.25;
font-weight: 600;
max-width: 100%;
}
.oa-tile.oa-active {
background: var(--oa-accent);
border-color: var(--oa-accent);
box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}
.oa-tile.oa-active .oa-tile-label { color: #fff; }
.oa-tile.oa-active .oa-tile-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* ---- Sliders ---------------------------------------------------------- */
.oa-slider-block { margin-bottom: 18px; }
.oa-section-title {
text-align: center;
color: var(--oa-accent);
font-size: 15px;
font-weight: 700;
margin: 0 0 10px;
}
.oa-slider-row { display: flex; align-items: center; gap: 10px; }
.oa-circle {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--oa-border);
background: #fff;
color: var(--oa-accent);
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.oa-circle:hover { border-color: var(--oa-accent); }
.oa-slider-track {
position: relative;
flex: 1;
height: 38px;
border-radius: 20px;
background: var(--oa-track);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.oa-slider-fill {
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 0;
background: linear-gradient(90deg, #8fb6ff, var(--oa-accent));
}
.oa-slider-value {
position: relative;
z-index: 1;
background: #fff;
color: var(--oa-ink);
font-weight: 700;
font-size: 13px;
border-radius: 14px;
padding: 4px 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.oa-slider-labels { display: flex; justify-content: space-between; margin-top: 6px; }
.oa-slider-endlabel,
.oa-slider-midlabel {
background: none;
border: none;
cursor: pointer;
font-size: 11.5px;
padding: 2px 4px;
color: #6b6f9c;
}
.oa-slider-midlabel { color: var(--oa-accent); font-weight: 600; }
/* ---- Footer ----------------------------------------------------------- */
.oa-panel-footer {
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid #e5e6f4;
text-align: center;
}
.oa-reset {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px;
border: none;
border-radius: 10px;
background: #e11d48;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.oa-reset svg { width: 18px; height: 18px; }
.oa-statement-link { display: inline-block; margin-top: 12px; color: var(--oa-accent); font-size: 14px; }
.oa-credit { margin-top: 8px; font-size: 12px; color: #888; }
.oa-credit-link { color: var(--oa-accent); text-decoration: underline; }
.oa-close svg { display: block; }
@media (max-width: 600px) {
.oa-hide-mobile { display: none !important; }
}
/* ===================================================================== */
/* Document-effect classes (toggled on ) */
/* ===================================================================== */
/* Font scaling is applied inline on by the script. */
/* Word / letter / line spacing. */
html.oa-word-spacing body :is(p, li, a, span, td, blockquote, h1, h2, h3, h4) {
word-spacing: var(--oa-word-spacing, 0.24em) !important;
}
html.oa-letter-spacing body :is(p, li, a, span, td, h1, h2, h3, h4) {
letter-spacing: var(--oa-letter-spacing, 0.06em) !important;
}
html.oa-line-spacing body :is(p, li, dd, dt, blockquote, td) {
line-height: var(--oa-line-height, 1.8) !important;
}
/* Readable (sans-serif) font. */
html.oa-readable-font body,
html.oa-readable-font body :is(p, li, a, span, h1, h2, h3, h4, h5, h6) {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
/* Highlight links / headings. */
html.oa-highlight-links body a {
text-decoration: underline !important;
outline: 2px solid #ffd400 !important;
background: #fff8c4 !important;
color: #0000ee !important;
}
html.oa-highlight-titles body :is(h1, h2, h3, h4, h5, h6) {
outline: 2px dashed #e11d48 !important;
background: #fff0f3 !important;
}
/* Hide images (preserve layout with visibility). */
html.oa-hide-images body :is(img, picture, video, [role="img"]) {
visibility: hidden !important;
}
/* Contrast: high / dark / light (color overrides, not filters). */
html.oa-contrast-high body,
html.oa-contrast-high body :is(p, li, span, div, a, h1, h2, h3, h4, h5, h6, td) {
background-color: #000 !important;
color: #fff !important;
}
html.oa-contrast-high body a { color: #ffff00 !important; }
html.oa-contrast-dark body { background-color: #121212 !important; color: #e6e6e6 !important; }
html.oa-contrast-dark body :is(p, li, span, h1, h2, h3, h4, h5, h6, td) { color: #e6e6e6 !important; }
html.oa-contrast-dark body a { color: #8ab4ff !important; }
html.oa-contrast-light body { background-color: #ffffff !important; color: #111 !important; }
html.oa-contrast-light body :is(p, li, span, h1, h2, h3, h4, h5, h6, td) { color: #111 !important; }
/* Color filters (mutually exclusive whole-page filters). */
html.oa-filter-grayscale { filter: grayscale(100%); }
html.oa-filter-monochrome { filter: grayscale(100%) contrast(1.4); }
html.oa-filter-invert { filter: invert(1) hue-rotate(180deg); }
/* Re-invert the widget so it stays readable in invert mode. */
html.oa-filter-invert .oa-widget { filter: invert(1) hue-rotate(180deg); }
/* Stop animations. */
html.oa-stop-animations *,
html.oa-stop-animations *::before,
html.oa-stop-animations *::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
scroll-behavior: auto !important;
}
/* Large cursors (light + dark variants).
Base = big arrow on everything; interactive elements get a big HAND so the
pointer still changes over links/buttons; text fields keep an I-beam.
:where() keeps specificity equal to the base rule, so source order wins. */
html.oa-cursor-light,
html.oa-cursor-light * {
cursor: url('data:image/svg+xml;utf8,') 5 3, auto !important;
}
html.oa-cursor-dark,
html.oa-cursor-dark * {
cursor: url('data:image/svg+xml;utf8,') 5 3, auto !important;
}
html.oa-cursor-light :where(a[href], button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for], select, summary, [onclick]),
html.oa-cursor-light :where(a[href], button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for], select, summary, [onclick]) * {
cursor: url('data:image/svg+xml;utf8,') 17 2, pointer !important;
}
html.oa-cursor-dark :where(a[href], button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for], select, summary, [onclick]),
html.oa-cursor-dark :where(a[href], button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for], select, summary, [onclick]) * {
cursor: url('data:image/svg+xml;utf8,') 17 2, pointer !important;
}
html.oa-cursor-light :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]),
html.oa-cursor-dark :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]) {
cursor: text !important;
}
/* Keyboard-navigation: strong focus outlines everywhere. */
html.oa-keyboard-nav body :is(a, button, input, select, textarea, [tabindex]):focus {
outline: 3px solid #e11d48 !important;
outline-offset: 2px !important;
}
/* Read-aloud affordance. */
html.oa-read-aloud body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote):hover {
outline: 2px dotted var(--oa-accent, #1d4ed8);
cursor: pointer;
}
/* Reading guide. */
.oa-reading-guide {
position: fixed;
left: 0;
right: 0;
height: 3px;
background: #e11d48;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.02);
pointer-events: none;
z-index: 2147482000;
}
/* ---- Screen-reader mode: control bar + current-element highlight. ----- */
.oa-reader-bar {
position: fixed;
top: 0;
inset-inline: 0;
margin-inline: auto;
width: max-content;
max-width: 96vw;
/* Sits below the open panel (z-index:3) so it never covers the panel
header on mobile; still above the page since .oa-widget is at 2147483000. */
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--oa-accent, #1d4ed8);
color: #fff;
border-radius: 0 0 14px 14px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.oa-reader-bar[hidden] { display: none; }
.oa-reader-bar button {
width: 40px;
height: 40px;
border: none;
border-radius: 9px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.oa-reader-bar button:hover { background: rgba(255, 255, 255, 0.32); }
.oa-reader-speed { display: flex; align-items: center; gap: 4px; }
.oa-reader-rate { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; }
.oa-reader-current {
outline: 3px solid #e11d48 !important;
background: rgba(255, 212, 0, 0.35) !important;
scroll-margin-top: 64px;
}
/* ---- Image descriptions: permanent overlay + hover tooltip. ----------- */
/* Permanent caption overlays the bottom of the image (positioned by JS),
so it never pushes page content around. */
.oa-alt-overlay {
position: fixed;
z-index: 2147482500; /* below the widget (2147483000) so it never covers it */
box-sizing: border-box;
padding: 3px 9px;
background: rgba(17, 20, 33, 0.82);
color: #fff;
font-size: 12.5px;
line-height: 1.35;
border-radius: 0 0 5px 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.oa-alt-overlay-empty { background: rgba(150, 30, 30, 0.9); font-style: italic; }
.oa-alt-tip {
position: fixed;
z-index: 2147483002;
display: none;
max-width: 320px;
padding: 7px 11px;
background: #1f2430;
color: #fff;
font-size: 14px;
line-height: 1.45;
border-radius: 7px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.oa-alt-tip.oa-alt-tip-empty { background: #8a1c1c; font-style: italic; }
/* ---- Widget reset: never let page-effect rules distort the toolbar. --- */
/* Protect the widget UI + reader bar from page contrast/filter overrides. */
.oa-widget .oa-panel { background: #fff !important; color: var(--oa-ink) !important; }
.oa-widget .oa-panel-header { background: var(--oa-accent) !important; color: #fff !important; }
.oa-widget .oa-panel-body,
.oa-widget .oa-tiles,
.oa-widget .oa-slider-block,
.oa-widget .oa-slider-row,
.oa-widget .oa-slider-labels,
.oa-widget .oa-panel-footer { background: transparent !important; }
.oa-widget .oa-tile { background: #fff !important; color: var(--oa-ink) !important; }
.oa-widget .oa-tile-icon { background: #eef1fd !important; color: var(--oa-accent) !important; }
.oa-widget .oa-tile.oa-active { background: var(--oa-accent) !important; }
.oa-widget .oa-tile.oa-active .oa-tile-label { color: #fff !important; }
.oa-widget .oa-tile.oa-active .oa-tile-icon { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }
.oa-widget .oa-tile-key { background: var(--oa-accent) !important; color: #fff !important; }
.oa-widget .oa-tile.oa-active .oa-tile-key { background: #fff !important; color: var(--oa-accent) !important; }
.oa-widget .oa-slider-track { background: var(--oa-track) !important; }
.oa-widget .oa-slider-value { background: #fff !important; color: var(--oa-ink) !important; }
.oa-reader-bar { background: var(--oa-accent, #1d4ed8) !important; color: #fff !important; }
.oa-reader-bar button { color: #fff !important; }
.oa-widget,
.oa-widget * {
letter-spacing: normal !important;
word-spacing: normal !important;
line-height: 1.4 !important;
background-image: none;
visibility: visible !important;
}
.oa-widget .oa-slider-fill { background-image: linear-gradient(90deg, #8fb6ff, var(--oa-accent)) !important; }
.oa-widget .oa-toggle { color: #fff !important; }
/* ===================================================================== */
/* Theme isolation / hardening. */
/* WordPress themes style bare