/* SPARK Site Tools — Accessibility Widget: host-page adjustment rules. These intentionally style the HOST page (the #sst-a11y-page wrapper, classes on , and the light-DOM skip-links), so they must live in the global, light-DOM stylesheet — not in the shadow root. The widget's own UI (trigger, panel, tiles, overlays, confirm dialog) is rendered inside a Shadow DOM and styled by panel.css; host CSS cannot reach it and these rules cannot leak into it. Adjustment classes live on ; level vars too, and every rule is scoped to #sst-a11y-page so it never restyles anything outside the wrapped page content. */ /* Content Scaling */ html.sst-a11y-content-scaling #sst-a11y-page { zoom: calc(var(--sst-a11y-content-scaling-level, 100) / 100); } /* Readable Font (icons reverted so icon fonts don't turn into boxes). Must target every element, not just the wrapper: the theme sets explicit font-family per element, so inheritance from the container won't override. */ html.sst-a11y-readable-font #sst-a11y-page * { font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; } html.sst-a11y-readable-font #sst-a11y-page i, html.sst-a11y-readable-font #sst-a11y-page [class*="icon"], html.sst-a11y-readable-font #sst-a11y-page [class*="fa-"], html.sst-a11y-readable-font #sst-a11y-page [class*="eicon"], html.sst-a11y-readable-font #sst-a11y-page .dashicons { font-family: revert !important; } /* Adjust Line Height (unitless multiplier off a 1.5 base) */ html.sst-a11y-line-height #sst-a11y-page * { line-height: calc(var(--sst-a11y-line-height-level, 100) / 100 * 1.5) !important; } /* Adjust Letter Spacing (em-relative; icons reverted) */ html.sst-a11y-letter-spacing #sst-a11y-page * { letter-spacing: calc((var(--sst-a11y-letter-spacing-level, 100) - 100) / 100 * 0.12em) !important; } html.sst-a11y-letter-spacing #sst-a11y-page i, html.sst-a11y-letter-spacing #sst-a11y-page [class*="icon"], html.sst-a11y-letter-spacing #sst-a11y-page [class*="fa-"], html.sst-a11y-letter-spacing #sst-a11y-page [class*="eicon"], html.sst-a11y-letter-spacing #sst-a11y-page .dashicons { letter-spacing: revert !important; } /* Highlight Titles / Links */ html.sst-a11y-highlight-titles #sst-a11y-page :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid #0050c8 !important; outline-offset: 2px; } html.sst-a11y-highlight-links #sst-a11y-page a { outline: 2px solid #e8730f !important; outline-offset: 2px; } /* Text alignment */ html.sst-a11y-align-left #sst-a11y-page { text-align: left !important; } html.sst-a11y-align-center #sst-a11y-page { text-align: center !important; } html.sst-a11y-align-right #sst-a11y-page { text-align: right !important; } /* --- Color adjustments -------------------------------------------------- */ /* Dark / Light contrast = color overrides (media kept legible, not recolored). High Contrast + saturation modes are a composed CSS `filter` set inline on #sst-a11y-page by JS (see recomputeFilter). */ html.sst-a11y-dark-contrast #sst-a11y-page, html.sst-a11y-dark-contrast #sst-a11y-page *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) { background-color: #0f0f0f !important; color: #ffffff !important; border-color: #444 !important; } html.sst-a11y-dark-contrast #sst-a11y-page a, html.sst-a11y-dark-contrast #sst-a11y-page a * { color: #5cb3ff !important; } html.sst-a11y-light-contrast #sst-a11y-page, html.sst-a11y-light-contrast #sst-a11y-page *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) { background-color: #ffffff !important; color: #111111 !important; border-color: #bbb !important; } html.sst-a11y-light-contrast #sst-a11y-page a, html.sst-a11y-light-contrast #sst-a11y-page a * { color: #0050c8 !important; } /* Color palettes (chosen hex stored in the level var) */ html.sst-a11y-text-color #sst-a11y-page *:not(svg):not(svg *) { color: var(--sst-a11y-text-color-level) !important; } html.sst-a11y-title-color #sst-a11y-page :is(h1, h2, h3, h4, h5, h6), html.sst-a11y-title-color #sst-a11y-page :is(h1, h2, h3, h4, h5, h6) * { color: var(--sst-a11y-title-color-level) !important; } html.sst-a11y-bg-color #sst-a11y-page, html.sst-a11y-bg-color #sst-a11y-page *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) { background-color: var(--sst-a11y-bg-color-level) !important; } /* --- Orientation adjustments -------------------------------------------- */ /* Hide Images (visibility keeps layout; Mute Sounds / Reading Guide / Mask are JS) */ html.sst-a11y-hide-images #sst-a11y-page img, html.sst-a11y-hide-images #sst-a11y-page svg, html.sst-a11y-hide-images #sst-a11y-page picture, html.sst-a11y-hide-images #sst-a11y-page video { visibility: hidden !important; } /* Stop Animations (CSS animations/transitions;