/* * Accessibility overrides for the "One Click Accessibility" (Pojo) plugin. * Theme: silit — saleet.co.il * * Structure: * 1 Scale curves (font resize steps 130–200; 120 = plugin baseline, no class) * 2 Base pin on * 3 Anti-compounding: inherit inside content roots (+ generic headings) * 4 Form controls, messages, validation tips (form curve) + tip positioning * 4c Cookie-consent banner (.cc-*) * 5 Theme font-size mirror — every theme rule, gated, × scale (base + each breakpoint, * in the theme's own source order: 1550 / 1024 / 991 / 767 / 600) * 5b Accessibility-toolbar items on a reduced curve (client request) * 6 Contrast-mode fixes (high / negative / light / grayscale): WhatsApp float, * select double-arrow, checkbox check glyph, placeholders, text over bg images * 7 Client-supplied block (toolbar / cookie floater positioning, grayscale fix) * 8 lang/dir neutraliser * * RULE A: with no toolbar option selected nothing here changes the page * (exceptions the client asked for: section 7 positioning and section 8). */ /* ============================================================ 1. SCALE CURVES ============================================================ */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; --a11y-scale-header: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.08; --a11y-scale-header: 1.05; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.12; --a11y-scale-header: 1.08; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.16; --a11y-scale-header: 1.10; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.20; --a11y-scale-header: 1.12; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.24; --a11y-scale-header: 1.14; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.28; --a11y-scale-header: 1.16; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.32; --a11y-scale-header: 1.18; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.36; --a11y-scale-header: 1.20; } /* ============================================================ 2. BASE PIN — measured body baseline 16px. calc(), never flat px. Deliberately UNSCOPED so the toolbar popup keeps behaving. ============================================================ */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; } /* Scaled text can nudge an edge case past the viewport on phones — never allow a horizontal scrollbar while font resize is active. */ html body[class*="pojo-a11y-resize-font-"] { overflow-x: hidden !important; } html:has(body[class*="pojo-a11y-resize-font-"]) { overflow-x: hidden; } /* ============================================================ 3. KILL COMPOUNDING inside every content root. Content roots on this theme: header / section / footer / privacy modal / lightbox — all direct children of . Toolbar and .cc-root excluded. Excludes input/select/textarea (section 4). ============================================================ */ html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, .lightbox, .lightboxOverlay, main, .page-content, .error-section, .description-section, .home-banner, .breadcrums, .users-grid) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) { font-size: inherit !important; } /* 3b. Generic headings without a class (e.g. .page-content h2 on the privacy pages) — mirror Bootstrap 5 reboot formulas × scale so the plugin's compounding percentages never apply. Theme-styled headings all carry classes and are pinned in section 5. */ html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h1:not([class]) { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h2:not([class]) { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h3:not([class]) { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h4:not([class]) { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h5:not([class]) { font-size: calc(1.25rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.header, section, footer, .privacy-wrapper, main, .page-content, .error-section, .description-section, .home-banner, .users-grid) h6:not([class]) { font-size: calc(1rem * var(--a11y-scale)) !important; } /* ============================================================ 4. FORM CONTROLS + MESSAGES — form curve. Unitless line-heights so heights stay proportional on every device / breakpoint. ============================================================ */ html body[class*="pojo-a11y-resize-font-"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html body[class*="pojo-a11y-resize-font-"] textarea, html body[class*="pojo-a11y-resize-font-"] select { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; /* theme: 16px/24px */ } /* Submit button (