/** * WP Access Pilot — front-end content transforms. * * These rules act on the host page (light DOM). They are applied via classes * and CSS custom properties set on by the pre-paint script and the * toolbar bundle. The toolbar UI itself renders inside a shadow root and is * therefore isolated from every rule below. * * Transforms are intentionally heavy-handed (high specificity / !important) * so they override theme and page-builder styles. This is an assistive * overlay; it adapts the page for the visitor and is not a substitute for an * accessible site. */ /* The shadow host: a fixed, non-interfering anchor for the widget. */ #wpap-root { position: fixed; z-index: 2147483000; } #wpap-root.wpap-pos-bottom-right { bottom: 20px; right: 20px; } #wpap-root.wpap-pos-bottom-left { bottom: 20px; left: 20px; } #wpap-root.wpap-pos-top-right { top: 20px; right: 20px; } #wpap-root.wpap-pos-top-left { top: 20px; left: 20px; } /* ---- Text size (level) ---- */ html.wpap-text-size-on { font-size: calc(100% + (var(--wpap-text-size, 0) * 10%)) !important; } /* ---- Line height (level) ---- */ html.wpap-line-height-on body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, a, span, label, td, th, figcaption) { line-height: calc(1.4 + (var(--wpap-line-height, 0) * 0.3)) !important; } /* ---- Letter spacing (level) ---- */ html.wpap-letter-spacing-on body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, a, span, label, td, th, figcaption) { letter-spacing: calc(var(--wpap-letter-spacing, 0) * 0.06em) !important; } /* ---- Readable font ---- */ html.wpap-readable-font body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, a, span, label, td, th, button, input, textarea, select, figcaption) { font-family: Verdana, Tahoma, Arial, "Helvetica Neue", sans-serif !important; } /* ---- Dyslexia-friendly font ---- * Uses widely available fonts as a friendly fallback stack. A bundled * OpenDyslexic web font can be lazy-loaded in a later phase. */ html.wpap-dyslexic-font body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, a, span, label, td, th, button, input, textarea, select, figcaption) { font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important; letter-spacing: 0.04em !important; word-spacing: 0.12em !important; } /* ---- High contrast ---- * Forces a black background with high-contrast text and clearly marked links. */ html.wpap-high-contrast body, html.wpap-high-contrast body :where(*:not(svg):not(path)) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; } html.wpap-high-contrast body :where(a, a *) { color: #ffff00 !important; text-decoration: underline !important; } html.wpap-high-contrast body :where(button, input, select, textarea) { border: 1px solid #fff !important; } /* ---- Dark contrast ---- * A softer dark theme than high contrast. */ html.wpap-dark-contrast body, html.wpap-dark-contrast body :where(*:not(svg):not(path)) { background-color: #111418 !important; background-image: none !important; color: #e6e6e6 !important; border-color: #444 !important; } html.wpap-dark-contrast body :where(a, a *) { color: #6cb6ff !important; } /* ---- Highlight links ---- */ html.wpap-highlight-links body :where(a, a *) { outline: 2px solid #ffbf00 !important; outline-offset: 1px !important; background-color: #fff8e1 !important; color: #1a1a1a !important; text-decoration: underline !important; } /* ---- Big cursor ---- */ html.wpap-big-cursor, html.wpap-big-cursor body :where(*) { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* ---- Stop animations ---- */ html.wpap-stop-animations *, html.wpap-stop-animations *::before, html.wpap-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ============================================================ * Phase 2 modules * ============================================================ */ /* ---- Bold text ---- */ html.wpap-font-weight body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, a, span, label, td, th, button, figcaption) { font-weight: 700 !important; } /* ---- Text alignment (level: 1 left, 2 center, 3 right, 4 justify) ---- */ html.wpap-align-text-1 body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, figcaption) { text-align: left !important; } html.wpap-align-text-2 body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, figcaption) { text-align: center !important; } html.wpap-align-text-3 body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, figcaption) { text-align: right !important; } html.wpap-align-text-4 body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, figcaption) { text-align: justify !important; } /* ---- Light contrast ---- */ html.wpap-light-contrast body, html.wpap-light-contrast body :where(*:not(svg):not(path)) { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; } html.wpap-light-contrast body :where(a, a *) { color: #0000ee !important; text-decoration: underline !important; } /* ---- Monochrome & saturation ---- * Applied to top-level page blocks, excluding our own host/overlays so the * toolbar UI is never filtered. */ html.wpap-monochrome body > :not(#wpap-root):not([class*="wpap-"]) { filter: grayscale(1) !important; } html.wpap-saturation-1 body > :not(#wpap-root):not([class*="wpap-"]) { filter: saturate(0.5) !important; } html.wpap-saturation-2 body > :not(#wpap-root):not([class*="wpap-"]) { filter: saturate(1.7) !important; } /* ---- Hide images ---- */ html.wpap-hide-images body :where(img, picture, figure img, [role="img"]) { opacity: 0 !important; } /* ---- Keyboard navigation: strong, always-visible focus outline ---- */ html.wpap-keyboard-nav body :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 3px solid #1d4ed8 !important; outline-offset: 2px !important; } /* ---- Highlight titles / content ---- */ html.wpap-highlight-titles body :where(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #f59e0b !important; outline-offset: 3px !important; background-color: rgba(245, 158, 11, 0.12) !important; } html.wpap-highlight-content body :where(p, li, blockquote, dd) { outline: 2px dashed #3b82f6 !important; outline-offset: 2px !important; } /* ---- JS behavior overlays (light DOM, created on demand) ---- */ .wpap-reading-guide { position: fixed; left: 0; right: 0; height: 40px; transform: translateY(-50%); background: rgba(29, 78, 216, 0.12); border-top: 2px solid rgba(29, 78, 216, 0.7); border-bottom: 2px solid rgba(29, 78, 216, 0.7); pointer-events: none; z-index: 2147482000; } .wpap-reading-mask { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 2147482000; } .wpap-reading-mask-top { top: 0; height: 0; } .wpap-reading-mask-bottom { bottom: 0; top: 100%; } .wpap-magnifier { position: fixed; display: none; max-width: 320px; padding: 10px 14px; background: #fff; color: #111; border: 2px solid #1d4ed8; border-radius: 10px; font-size: 24px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 2147483600; } html.wpap-tts-active body { cursor: help; } /* When a visitor has hidden the toolbar, the host stays out of the layout. */ #wpap-root.wpap-hidden-host { display: none !important; }