/* WCAG Widget — Accessibility mode CSS
* All rules key off classes on . Never applies background:* to containers.
* Text overrides scoped to text elements only so layouts stay intact.
*/
/* ================================================================
* CONTENT MODULES
* ================================================================ */
/* ----- Font size (stepped) -----
* Uses CSS `zoom` so px, rem, em and images all scale uniformly.
* Widget and reading-aid overlays use inverse zoom so they stay
* at their authored size regardless of the active scale.
*/
html { --wcag-zoom: 1; }
html.wcag-font-size-1 { --wcag-zoom: 1.125; zoom: var(--wcag-zoom); }
html.wcag-font-size-2 { --wcag-zoom: 1.25; zoom: var(--wcag-zoom); }
html.wcag-font-size-3 { --wcag-zoom: 1.5; zoom: var(--wcag-zoom); }
.wcag-trigger,
.wcag-panel,
.wcag-magnifier,
.wcag-reading-line,
.wcag-reading-mask-top,
.wcag-reading-mask-bottom {
zoom: calc(1 / var(--wcag-zoom, 1));
}
/* Fixed site chrome stays at authored size so navigation remains
* reachable when content is zoomed. Scales content but not controls.
*/
html.wcag-font-size-1 #masthead,
html.wcag-font-size-2 #masthead,
html.wcag-font-size-3 #masthead,
html.wcag-font-size-1 header[role="banner"],
html.wcag-font-size-2 header[role="banner"],
html.wcag-font-size-3 header[role="banner"],
html.wcag-font-size-1 .site-header,
html.wcag-font-size-2 .site-header,
html.wcag-font-size-3 .site-header {
zoom: calc(1 / var(--wcag-zoom, 1));
}
/* ----- Line height (stepped) ----- */
html.wcag-line-height-1 p, html.wcag-line-height-1 li, html.wcag-line-height-1 h1,
html.wcag-line-height-1 h2, html.wcag-line-height-1 h3, html.wcag-line-height-1 h4,
html.wcag-line-height-1 h5, html.wcag-line-height-1 h6, html.wcag-line-height-1 span,
html.wcag-line-height-1 td, html.wcag-line-height-1 th, html.wcag-line-height-1 label,
html.wcag-line-height-1 a { line-height: 1.75 !important; }
html.wcag-line-height-2 p, html.wcag-line-height-2 li, html.wcag-line-height-2 h1,
html.wcag-line-height-2 h2, html.wcag-line-height-2 h3, html.wcag-line-height-2 h4,
html.wcag-line-height-2 h5, html.wcag-line-height-2 h6, html.wcag-line-height-2 span,
html.wcag-line-height-2 td, html.wcag-line-height-2 th, html.wcag-line-height-2 label,
html.wcag-line-height-2 a { line-height: 2 !important; }
html.wcag-line-height-3 p, html.wcag-line-height-3 li, html.wcag-line-height-3 h1,
html.wcag-line-height-3 h2, html.wcag-line-height-3 h3, html.wcag-line-height-3 h4,
html.wcag-line-height-3 h5, html.wcag-line-height-3 h6, html.wcag-line-height-3 span,
html.wcag-line-height-3 td, html.wcag-line-height-3 th, html.wcag-line-height-3 label,
html.wcag-line-height-3 a { line-height: 2.4 !important; }
/* ----- Letter spacing ----- */
html.wcag-letter-spacing p, html.wcag-letter-spacing li, html.wcag-letter-spacing span,
html.wcag-letter-spacing a, html.wcag-letter-spacing td, html.wcag-letter-spacing th,
html.wcag-letter-spacing label, html.wcag-letter-spacing h1, html.wcag-letter-spacing h2,
html.wcag-letter-spacing h3, html.wcag-letter-spacing h4, html.wcag-letter-spacing h5,
html.wcag-letter-spacing h6, html.wcag-letter-spacing button {
letter-spacing: 0.12em !important;
word-spacing: 0.18em !important;
}
/* ----- Font weight (bold) ----- */
html.wcag-font-weight p, html.wcag-font-weight li, html.wcag-font-weight span,
html.wcag-font-weight a, html.wcag-font-weight td, html.wcag-font-weight label {
font-weight: 700 !important;
}
/* ----- Text align (cycle) ----- */
html.wcag-text-align-left p, html.wcag-text-align-left li,
html.wcag-text-align-left h1, html.wcag-text-align-left h2, html.wcag-text-align-left h3,
html.wcag-text-align-left h4, html.wcag-text-align-left h5, html.wcag-text-align-left h6,
html.wcag-text-align-left td, html.wcag-text-align-left th { text-align: left !important; }
html.wcag-text-align-center p, html.wcag-text-align-center li,
html.wcag-text-align-center h1, html.wcag-text-align-center h2, html.wcag-text-align-center h3,
html.wcag-text-align-center h4, html.wcag-text-align-center h5, html.wcag-text-align-center h6,
html.wcag-text-align-center td, html.wcag-text-align-center th { text-align: center !important; }
html.wcag-text-align-right p, html.wcag-text-align-right li,
html.wcag-text-align-right h1, html.wcag-text-align-right h2, html.wcag-text-align-right h3,
html.wcag-text-align-right h4, html.wcag-text-align-right h5, html.wcag-text-align-right h6,
html.wcag-text-align-right td, html.wcag-text-align-right th { text-align: right !important; }
/* ----- Highlight links ----- */
html.wcag-highlight-links a {
text-decoration: underline !important;
text-underline-offset: 2px !important;
outline: 2px solid currentColor !important;
outline-offset: 2px !important;
background: rgba(255, 235, 59, 0.35) !important;
padding: 0 2px !important;
}
/* ----- Readable font (swap body font only, keep theme headings) ----- */
html.wcag-readable-font body,
html.wcag-readable-font p,
html.wcag-readable-font li,
html.wcag-readable-font span,
html.wcag-readable-font a,
html.wcag-readable-font td,
html.wcag-readable-font th,
html.wcag-readable-font label,
html.wcag-readable-font input,
html.wcag-readable-font textarea,
html.wcag-readable-font button {
font-family: Arial, Helvetica, "Liberation Sans", sans-serif !important;
}
/* ----- Dyslexic font ----- */
html.wcag-dyslexic-font body,
html.wcag-dyslexic-font p,
html.wcag-dyslexic-font li,
html.wcag-dyslexic-font span,
html.wcag-dyslexic-font a,
html.wcag-dyslexic-font td,
html.wcag-dyslexic-font th,
html.wcag-dyslexic-font label,
html.wcag-dyslexic-font h1,
html.wcag-dyslexic-font h2,
html.wcag-dyslexic-font h3,
html.wcag-dyslexic-font h4,
html.wcag-dyslexic-font h5,
html.wcag-dyslexic-font h6,
html.wcag-dyslexic-font input,
html.wcag-dyslexic-font textarea,
html.wcag-dyslexic-font button {
font-family: 'WCAGOpenDyslexic', 'OpenDyslexic', 'Comic Sans MS', Arial, sans-serif !important;
}
/* Panel always uses its own system font */
html.wcag-readable-font .wcag-panel,
html.wcag-dyslexic-font .wcag-panel,
html.wcag-readable-font .wcag-panel *,
html.wcag-dyslexic-font .wcag-panel * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
/* ----- Big cursor ----- */
html.wcag-big-cursor,
html.wcag-big-cursor * {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
html.wcag-big-cursor a,
html.wcag-big-cursor button,
html.wcag-big-cursor [role="button"],
html.wcag-big-cursor input[type="submit"],
html.wcag-big-cursor input[type="button"] {
cursor: url("data:image/svg+xml;utf8,") 24 24, pointer !important;
}
/* ----- Text magnifier popup ----- */
.wcag-magnifier {
position: absolute;
background: #111;
color: #fff;
padding: 10px 14px;
border-radius: 6px;
font-size: 22px;
line-height: 1.35;
font-weight: 500;
max-width: 480px;
z-index: 100001;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.wcag-magnifier.is-visible { opacity: 1; }
/* ================================================================
* ORIENTATION MODULES
* ================================================================ */
/* ----- Stop animations ----- */
html.wcag-stop-animations *,
html.wcag-stop-animations *::before,
html.wcag-stop-animations *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* ----- Highlight titles ----- */
html.wcag-highlight-titles h1,
html.wcag-highlight-titles h2,
html.wcag-highlight-titles h3,
html.wcag-highlight-titles h4,
html.wcag-highlight-titles h5,
html.wcag-highlight-titles h6 {
outline: 3px solid var(--wcag-brand, #40a639) !important;
outline-offset: 3px !important;
padding: 2px 4px !important;
}
/* ----- Highlight all (on hover) ----- */
html.wcag-highlight-all *:hover:not(.wcag-trigger):not(.wcag-panel):not(.wcag-panel *) {
outline: 2px dashed var(--wcag-brand, #40a639) !important;
outline-offset: 2px !important;
}
/* ----- Hide images (opacity, keeps layout) ----- */
html.wcag-hide-images img,
html.wcag-hide-images picture,
html.wcag-hide-images video,
html.wcag-hide-images svg:not(.wcag-panel svg):not(.wcag-trigger svg) {
opacity: 0 !important;
}
html.wcag-hide-images [style*="background-image"] {
background-image: none !important;
}
/* But never on our own UI */
html.wcag-hide-images .wcag-trigger,
html.wcag-hide-images .wcag-panel,
html.wcag-hide-images .wcag-panel * { opacity: 1 !important; }