/** * Hmeonot Accessibility — feature classes applied to by user choice. * These are user-activated, so !important is justified (overrides theme). * Phase 3: text size, line height, contrast (high/dark), highlight links. */ /* Text size — scales rem-based text via root font-size. */ html.hma-text-size-115 { font-size: 115% !important; } html.hma-text-size-130 { font-size: 130% !important; } html.hma-text-size-150 { font-size: 150% !important; } /* Line height. */ html.hma-line-160 body :where(p, li, dd, dt, blockquote, figcaption, a, span) { line-height: 1.6 !important; } html.hma-line-200 body :where(p, li, dd, dt, blockquote, figcaption, a, span) { line-height: 2 !important; } /* High contrast — black on white, strong link colour. */ html.hma-contrast-high body, html.hma-contrast-high body *:not(img):not(svg):not(svg *) { background-color: #fff !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; } html.hma-contrast-high body a, html.hma-contrast-high body a * { color: #0000ee !important; text-decoration: underline !important; } /* Dark mode — light text on dark. */ html.hma-contrast-dark body, html.hma-contrast-dark body *:not(img):not(svg):not(svg *) { background-color: #1a1a1a !important; color: #e8e8e8 !important; border-color: #555 !important; } html.hma-contrast-dark body a, html.hma-contrast-dark body a * { color: #7cc4ff !important; } /* Highlight links. */ html.hma-highlight-links body a { text-decoration: underline !important; font-weight: 700 !important; outline: 1px solid #b8860b; } /* Letter spacing. */ html.hma-letter-005 body :where(p, li, a, span, dd, dt, blockquote, h1, h2, h3, h4, h5, h6) { letter-spacing: .05em !important; } html.hma-letter-01 body :where(p, li, a, span, dd, dt, blockquote, h1, h2, h3, h4, h5, h6) { letter-spacing: .1em !important; } /* Large cursor (local data-URI SVG, no external resource). */ html.hma-cursor-large, html.hma-cursor-large * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 9-6 1 3 7-3 1-3-7-5 4z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 10 6, auto !important; } /* Keyboard mode — strong focus on every focusable, not only focus-visible. */ html.hma-keyboard *:focus { outline: 3px solid #ffb300 !important; outline-offset: 2px !important; } /* Bundled local fonts (no external resource). */ @font-face { font-family: 'HMA Heebo'; src: url('../fonts/heebo-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'HMA Heebo'; src: url('../fonts/heebo-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'HMA OpenDyslexic'; src: url('../fonts/opendyslexic-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'HMA OpenDyslexic'; src: url('../fonts/opendyslexic-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Readable Hebrew font. */ html.hma-font-readable body, html.hma-font-readable body :where(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, td, th, label, div) { font-family: 'HMA Heebo', 'Heebo', Arial, sans-serif !important; } /* Dyslexia font (latin glyphs; Hebrew falls back to Heebo). */ html.hma-font-dyslexia body, html.hma-font-dyslexia body :where(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, td, th, label, div) { font-family: 'HMA OpenDyslexic', 'HMA Heebo', Arial, sans-serif !important; } /* ===== Parity with Access4U + beyond ===== */ /* Whole-page zoom / magnify. Applied to body's children (not body itself): `zoom` on an ancestor of our fixed widget would make it a containing block and shove the widget off-screen. Excluding [class*="hma-"] keeps our floating UI fixed to the viewport. */ html.hma-zoom-110 body > :not([class*="hma-"]) { zoom: 1.1; } html.hma-zoom-125 body > :not([class*="hma-"]) { zoom: 1.25; } html.hma-zoom-150 body > :not([class*="hma-"]) { zoom: 1.5; } /* Text alignment. */ html.hma-align-right body :where(p,li,h1,h2,h3,h4,h5,h6,dd,dt,blockquote) { text-align: right !important; } html.hma-align-center body :where(p,li,h1,h2,h3,h4,h5,h6,dd,dt,blockquote) { text-align: center !important; } html.hma-align-left body :where(p,li,h1,h2,h3,h4,h5,h6,dd,dt,blockquote) { text-align: left !important; } /* Colour filters. Same containing-block rule as zoom: `filter` on body would re-anchor our fixed widget. Apply to body's children, excluding our floating UI. */ html.hma-filter-grayscale body > :not([class*="hma-"]) { filter: grayscale(1) !important; } html.hma-filter-sathigh body > :not([class*="hma-"]) { filter: saturate(1.6) !important; } html.hma-filter-satlow body > :not([class*="hma-"]) { filter: saturate(0.5) !important; } /* Light / beige contrast (low glare). */ html.hma-contrast-light body, html.hma-contrast-light body *:not(img):not(svg):not(svg *) { background-color: #f7f3e8 !important; color: #222 !important; border-color: #cbbf9a !important; } html.hma-contrast-light body a, html.hma-contrast-light body a * { color: #0033aa !important; } /* Highlight headings. */ html.hma-highlight-headings body :where(h1,h2,h3,h4,h5,h6) { background: #fff3cd !important; border-inline-start: 4px solid #b8860b !important; padding: 2px 8px !important; } /* Hide images. */ html.hma-hide-images body img { display: none !important; } /* Hover highlight. */ html.hma-hover-highlight body :where(a,button,li,[role="button"]):hover { outline: 2px solid #b8860b !important; outline-offset: 1px; background: #fff8e1 !important; } /* Reading mode — strip chrome, focus content. */ html.hma-reading-mode body :where(header,nav,aside,footer,.sidebar,#sidebar,[role="banner"],[role="navigation"],[role="complementary"],[role="contentinfo"]) { display: none !important; } html.hma-reading-mode body img { display: none !important; } html.hma-reading-mode body { background: #fff !important; } html.hma-reading-mode body :where(main,#content,.site-content,article) { max-width: 760px !important; margin-inline: auto !important; float: none !important; width: auto !important; } html.hma-reading-mode .hma-root, html.hma-reading-mode .hma-skip-link { display: block !important; } /* Large cursor variants (local data-URI). */ html.hma-cursor-large-black, html.hma-cursor-large-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 9-6 1 3 7-3 1-3-7-5 4z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 10 6, auto !important; } html.hma-cursor-large-white, html.hma-cursor-large-white * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 9-6 1 3 7-3 1-3-7-5 4z' fill='%23fff' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 10 6, auto !important; } /* Click highlight (added by JS for ~1s). */ .hma-click-flash { outline: 3px solid #ff5722 !important; outline-offset: 2px !important; } /* Keyboard quick-nav selection indicator. */ .hma-nav-flash { outline: 3px solid #ff9800 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(255,152,0,.25) !important; } /* Reading guide line + focus mask (positioned by JS). */ .hma-guide-line { position: fixed; left: 0; right: 0; height: 4px; background: rgba(184,134,11,.9); z-index: 2147482000; pointer-events: none; display: none; } .hma-focus-mask { position: fixed; left: 0; right: 0; height: 100px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); z-index: 2147482000; pointer-events: none; display: none; } .hma-magnifier-tip { position: fixed; z-index: 2147483002; background: #fff; color: #111; border: 2px solid #0f5fa6; border-radius: 8px; padding: 8px 12px; font-size: 1.6rem; max-width: 60vw; box-shadow: 0 6px 24px rgba(0,0,0,.35); pointer-events: none; display: none; } /* Keep the accessibility widget itself readable regardless of contrast mode. */ html.hma-contrast-high .hma-panel, html.hma-contrast-dark .hma-panel, html.hma-contrast-high .hma-toggle, html.hma-contrast-dark .hma-toggle { color: #fff !important; } html.hma-contrast-high .hma-panel-body, html.hma-contrast-dark .hma-panel-body { background: #fff !important; }