/* FV Accessibility — feature classes applied to . * * Each adjustment is exposed as one or more `html.fv-*` classes; the JS * (and the inline head bootstrap) toggles them based on user state. * * Selectors target `body ELEMENT` rather than `body *` where possible to * keep the cascade reasonable. Where `body *` is unavoidable, we exclude * our own UI: `:not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *)`. * * `fv-a11y.css` re-declares the relevant properties on our own UI with * `!important` so even unprotected rules don't bleed into the menu/button. */ /* --- Feature 6: Text size (4 steps, max +200%) --- */ html.fv-text-size-1 body { font-size: 1.1em } html.fv-text-size-2 body { font-size: 1.3em } html.fv-text-size-3 body { font-size: 1.6em } html.fv-text-size-4 body { font-size: 2em } /* --- Feature 7: Line spacing (3 steps) --- */ html.fv-line-spacing-1 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { line-height: 1.5 !important } html.fv-line-spacing-2 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { line-height: 1.85 !important } html.fv-line-spacing-3 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { line-height: 2.25 !important } /* --- Feature 8: Word spacing (3 steps) --- */ html.fv-word-spacing-1 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { word-spacing: 0.16em !important } html.fv-word-spacing-2 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { word-spacing: 0.32em !important } html.fv-word-spacing-3 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { word-spacing: 0.5em !important } /* --- Feature 9: Letter spacing (3 steps) --- */ html.fv-letter-spacing-1 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { letter-spacing: 0.05em !important } html.fv-letter-spacing-2 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { letter-spacing: 0.1em !important } html.fv-letter-spacing-3 body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { letter-spacing: 0.15em !important } /* --- Feature 20: "Line height" — distinct from line-spacing: this controls * the vertical rhythm by enlarging margin-bottom on block elements. --- */ html.fv-line-height-1 body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dl) { margin-bottom: 1em !important } html.fv-line-height-2 body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dl) { margin-bottom: 1.5em !important } html.fv-line-height-3 body :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dl) { margin-bottom: 2em !important } /* --- Feature 10: Readable font --- */ html.fv-readable-font body, html.fv-readable-font body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { font-family: "Heebo", "Assistant", "Open Sans Hebrew", system-ui, -apple-system, sans-serif !important; } /* --- Feature 11: Dyslexic-friendly font --- */ @font-face { font-family: 'OpenDyslexic'; src: local('OpenDyslexic'), url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } html.fv-dyslexic-font body, html.fv-dyslexic-font body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; } /* --- Feature 12: Text alignment (cycle through left/right/center/justify) --- */ html.fv-text-align-left body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { text-align: left !important } html.fv-text-align-right body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { text-align: right !important } html.fv-text-align-center body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { text-align: center !important } html.fv-text-align-justify body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { text-align: justify !important } /* --- Feature 13: Page zoom (3 steps, max ~150%) --- */ html.fv-page-zoom-1 body { zoom: 1.1 } html.fv-page-zoom-2 body { zoom: 1.25 } html.fv-page-zoom-3 body { zoom: 1.5 } /* --- Feature 14: Larger click targets (toggle) --- */ html.fv-larger-targets body :is(button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, a):not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { padding: 12px 16px !important; min-height: 44px !important; font-size: 1.05em !important; } /* --- Feature 15: Highlight headings (toggle) --- */ html.fv-highlight-headings body :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid #1d4ed8 !important; outline-offset: 4px !important; background: rgba(29, 78, 216, 0.08) !important; padding: 4px 8px !important; border-radius: 4px !important; } /* --- Feature 16: Highlight links (toggle) --- */ html.fv-highlight-links body a:not(.fv-a11y-button):not(.fv-a11y-panel a):not(.fv-a11y-statement-link) { color: #1d4ed8 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 1px dashed #1d4ed8 !important; outline-offset: 2px !important; } /* --- Feature 17: Highlight on hover/focus (toggle) --- */ html.fv-highlight-focus body :is(a, button, input, select, textarea, [tabindex]):not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *):hover, html.fv-highlight-focus body :is(a, button, input, select, textarea, [tabindex]):not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *):focus { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; background-color: rgba(245, 158, 11, 0.08) !important; } /* --- Feature 18: Image descriptions (toggle, JS injects .fv-a11y-img-caption) --- */ html.fv-image-descriptions body img:not(.fv-a11y-icon) { outline: 1px dashed #94a3b8; outline-offset: 2px; } .fv-a11y-img-caption { display: block; font-size: 0.85em; color: #475569; background: #f1f5f9; border-right: 3px solid #1d4ed8; padding: 6px 10px; margin-top: 6px; font-style: italic; direction: rtl; } /* --- Feature 19: Content magnifier on hover (toggle) --- */ html.fv-content-magnifier body :is(p, li, h1, h2, h3, h4, h5, h6, td, blockquote):not(.fv-a11y-button *):not(.fv-a11y-panel *):hover { transform: scale(1.4); transform-origin: var(--fv-magnify-origin, right top); background: #ffffff; position: relative; z-index: 50; transition: transform 0.12s ease; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); padding: 8px 12px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { html.fv-content-magnifier body *:hover { transition: none } } /* ─────────────────────────── Color & contrast ─────────────────────────── */ /* --- Feature 21: Light high-contrast (white bg / black text) --- */ html.fv-contrast-light body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } html.fv-contrast-light body a:not(.fv-a11y-button):not(.fv-a11y-panel a) { color: #0000ee !important; text-decoration: underline !important; } html.fv-contrast-light body a:visited:not(.fv-a11y-button):not(.fv-a11y-panel a) { color: #551a8b !important; } /* --- Feature 22: Dark high-contrast (black bg / white text) --- */ html.fv-contrast-dark body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; text-shadow: none !important; box-shadow: none !important; } html.fv-contrast-dark body a:not(.fv-a11y-button):not(.fv-a11y-panel a) { color: #ffff00 !important; text-decoration: underline !important; } html.fv-contrast-dark body :is(h1, h2, h3, h4, h5, h6) { color: #ffff00 !important; } /* Filters MUST go on body's direct children (excluding our own UI), not on body itself. A `filter` on body turns body into the containing block for all `position: fixed` descendants, which would yank our floating button and drawer panel off the viewport and break page scrolling. */ /* --- Feature 23: Monochrome (grayscale) --- */ html.fv-monochrome body > *:not(.fv-a11y-button):not(.fv-a11y-panel) { filter: grayscale(100%); } /* --- Feature 24: Invert colors. Re-invert images / videos / iframes so photographs don't look uncanny. --- */ html.fv-invert-colors body > *:not(.fv-a11y-button):not(.fv-a11y-panel) { filter: invert(100%) hue-rotate(180deg); } html.fv-invert-colors body img:not(.fv-a11y-icon), html.fv-invert-colors body video, html.fv-invert-colors body iframe, html.fv-invert-colors body picture { filter: invert(100%) hue-rotate(180deg); } /* --- Feature 25: Saturation cycle (high / low / off) --- */ html.fv-saturation-high body > *:not(.fv-a11y-button):not(.fv-a11y-panel) { filter: saturate(2); } html.fv-saturation-low body > *:not(.fv-a11y-button):not(.fv-a11y-panel) { filter: saturate(0.4); } /* --- Feature 26: Custom colors. CSS variables set inline by JS on documentElement; the rule only kicks in when at least one of them is non-empty (`fv-custom-colors` class). --- */ html.fv-custom-colors body :not(.fv-a11y-button):not(.fv-a11y-button *):not(.fv-a11y-panel):not(.fv-a11y-panel *) { background-color: var(--fv-custom-bg, transparent) !important; color: var(--fv-custom-fg, inherit) !important; } html.fv-custom-colors body :is(h1, h2, h3, h4, h5, h6) { color: var(--fv-custom-heading, inherit) !important; } /* When only one of the three is set, only that channel overrides — leaving the other two as `inherit` / `transparent` so the page's existing values aren't trampled. JS sets the CSS variable to empty when not configured. */ /* ─────────────────────────── Media & motion ──────────────────────────── */ /* --- Feature 27: Pause animations (CSS) --- */ html.fv-pause-animations *, html.fv-pause-animations *::before, html.fv-pause-animations *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* --- Feature 28: Hide images (display:none keeps layout intact-ish) --- */ html.fv-hide-images body img:not(.fv-a11y-icon), html.fv-hide-images body picture, html.fv-hide-images body svg:not(.fv-a11y-icon), html.fv-hide-images body video { visibility: hidden !important; } /* --- Feature 29: Block flashing (>3Hz). Animations are already disabled under fv-pause-animations; here we explicitly kill obvious offenders (marquee/blink legacy elements) and CSS-keyframed flash classes. --- */ html.fv-block-flashing body marquee, html.fv-block-flashing body blink { animation: none !important; display: inline !important; } html.fv-block-flashing body * { animation-iteration-count: 1 !important; animation-duration: 1s !important; /* Keep transitions: only repeating animations cause WCAG 2.3.1 issues. */ } /* --- Feature 30: Mute media (visual marker; the actual muting is JS) --- */ html.fv-mute-media body video, html.fv-mute-media body audio { outline: 1px dashed #94a3b8; outline-offset: 2px; } /* ────────────────────────── Navigation & cursor ──────────────────────── */ /* --- Feature 31/32: Big cursors. Hot-spot at (3,3) matches the SVG arrow tip. Use !important so themes' inline cursor:pointer still loses. --- */ html.fv-cursor-black, html.fv-cursor-black body, html.fv-cursor-black body *:not(.fv-a11y-button):not(.fv-a11y-panel):not(.fv-a11y-panel *) { cursor: url('../img/cursor-black.svg') 3 3, default !important; } html.fv-cursor-white, html.fv-cursor-white body, html.fv-cursor-white body *:not(.fv-a11y-button):not(.fv-a11y-panel):not(.fv-a11y-panel *) { cursor: url('../img/cursor-white.svg') 3 3, default !important; } /* --- Feature 33: Keyboard navigation. Adds a globally-visible focus ring and surfaces the skip-to-content link. JS injects #fv-a11y-skip-link. */ html.fv-keyboard-nav body :focus, html.fv-keyboard-nav body :focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 3px !important; } .fv-a11y-skip-link { position: fixed; top: -100px; inset-inline-start: 12px; z-index: 1000001; background: #1d4ed8; color: #ffffff !important; padding: 10px 16px; border-radius: 6px; font-family: "Heebo", "Assistant", system-ui, sans-serif !important; font-size: 15px !important; text-decoration: none; transition: top 0.15s ease; } .fv-a11y-skip-link:focus, .fv-a11y-skip-link:focus-visible { top: 12px; outline: 3px solid #ffffff !important; } /* --- Feature 34: Reading ruler — horizontal line follows cursor. JS sets --fv-ruler-y based on mousemove. */ .fv-a11y-reading-ruler { position: fixed; inset-inline-start: 0; inset-inline-end: 0; height: 36px; top: var(--fv-ruler-y, -100px); background: rgba(245, 158, 11, 0.18); border-top: 2px solid rgba(245, 158, 11, 0.65); border-bottom: 2px solid rgba(245, 158, 11, 0.65); pointer-events: none; z-index: 999998; display: none; transform: translateY(-50%); } html.fv-reading-ruler .fv-a11y-reading-ruler { display: block; } /* --- Feature 35: Reading mask — dim everything outside a horizontal strip around the cursor. Two fixed overlays whose heights are driven by JS via --fv-mask-y. */ .fv-a11y-reading-mask { position: fixed; inset-inline-start: 0; inset-inline-end: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; z-index: 999997; display: none; } .fv-a11y-reading-mask-top { top: 0; height: calc(var(--fv-mask-y, 50%) - 80px); } .fv-a11y-reading-mask-bottom { bottom: 0; top: calc(var(--fv-mask-y, 50%) + 80px); } html.fv-reading-mask .fv-a11y-reading-mask { display: block; } /* --- Feature 36 (reader mode): hide non-content body children. JS clones the detected main content into .fv-a11y-reader-mode-content so the original DOM stays intact when user toggles off. */ html.fv-reader-mode body > *:not(.fv-a11y-button):not(.fv-a11y-panel):not(.fv-a11y-reader-mode-content):not(.fv-a11y-reading-ruler):not(.fv-a11y-reading-mask):not(.fv-a11y-reading-mask-top):not(.fv-a11y-reading-mask-bottom):not(#wpadminbar) { display: none !important; } .fv-a11y-reader-mode-content { display: none; max-width: 720px; margin: 40px auto !important; padding: 32px 28px !important; background: #fafaf2; color: #1f2937; font-family: "Heebo", "Assistant", "Open Sans Hebrew", system-ui, sans-serif; font-size: 18px; line-height: 1.7; border: 1px solid #e5e7eb; border-radius: 8px; } html.fv-reader-mode .fv-a11y-reader-mode-content { display: block; } .fv-a11y-reader-mode-content :is(h1, h2, h3, h4, h5, h6) { margin: 1.4em 0 0.5em; } .fv-a11y-reader-mode-content img, .fv-a11y-reader-mode-content video, .fv-a11y-reader-mode-content iframe { max-width: 100%; height: auto; } /* --- Element-jump highlight (used by page-structure clicks). JS adds the class for ~2s, then removes. */ .fv-a11y-jump-highlight { outline: 4px solid #f59e0b !important; outline-offset: 4px !important; transition: outline-color 0.4s ease; }