/* ========================================================================== One Click Accessibility (Pojo) - font-resize repair layer Theme: beitshemesh webz | https://beitshemesh.rotshtein-lp.co.il/ -------------------------------------------------------------------------- WHY THIS FILE EXISTS The plugin emits only percentage rules: body...NN, p, li, label, input, select, textarea, legend, code, pre, dd, dt, span, blockquote { font-size: NN% !important } body...NN h1..h6, h1 span .. h6 span { font-size: NN*1.33% !important } On this site that breaks in six ways: 1. Every size in the design is vw / vh. A percentage resolves against the PARENT, never against a vw value, so the plugin can never move them predictably. 2. Percentages COMPOUND. CF7 nests p > span > span > span; the consent label measured 8.64px -> 4096px at step 200 (measured 1440x900). 3. Units change per breakpoint (2.8vw at base, 55px under 767) - only overriding one destroys the other, so BOTH are emitted. 4. Every Elementor heading on this site is

, so it is hit by the plugin's `p` rule and compounds with its own parent. 5.

and are not in the plugin's selector list, so .wpcf7-response-output, .elementor-button and the footer icon-list links never moved at any step (measured: frozen at 10.08px / 15px). 6. #cc-banner-root (cookie banner) sits OUTSIDE .elementor as a direct child of : .cc-title / .cc-body ran away while .cc-btn (font:inherit) and .cc-root stayed frozen at 14px. RULES OBSERVED A. EVERYTHING is gated behind body[class*="pojo-a11y-resize-font-"]. With no class - and after Reset - the computed diff vs baseline is {}. B. #pojo-a11y-toolbar is a SIBLING of .elementor; every generic rule is scoped inside a content root so the toolbar is never touched by them. (The one deliberate exception is Section 4e - see the note there.) Selectors use `html body[class*="..."]` throughout so they out-specify any handwritten a11y overrides stored in the DB. ========================================================================== */ /* -------------------------------------------------------------------------- SECTION 1 - Two curves Content grows on --a11y-scale. Forms, buttons, messages and the cookie banner start from much smaller baselines (0.6vw-0.8vw = 8.6-11.5px), so they ride --a11y-scale-form, which has a bigger first jump. -------------------------------------------------------------------------- */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.08; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.11; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.14; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.18; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.21; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.24; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.27; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.30; } /* -------------------------------------------------------------------------- SECTION 2 - Base pin on Deliberately UNSCOPED: the toolbar popup reads its size from here, so this must stay a calc() and never a flat px, or the popup freezes. Measured baseline: body = 16px with no class. -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; } /* -------------------------------------------------------------------------- SECTION 3 - Kill the compounding inside every content root Content roots found on this install: .elementor (/, /home/, /beitshemesh-new-lp/) .description-section (page.php, 404.php, single.php, search.php) .login-section .login-banner .gold-card-banner .home-banner .users-grid .website-presentation .breadcrums (theme templates) Everything here resolves to `inherit`, which cancels the plugin's stacked percentages. input/select/textarea are excluded - they are handled in Section 4 on the form curve. .elementor-heading-title is excluded because Section 5 pins each heading to its own designed size. -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor p:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .elementor li, html body[class*="pojo-a11y-resize-font-"] .elementor span, html body[class*="pojo-a11y-resize-font-"] .elementor label, html body[class*="pojo-a11y-resize-font-"] .elementor legend, html body[class*="pojo-a11y-resize-font-"] .elementor code, html body[class*="pojo-a11y-resize-font-"] .elementor pre, html body[class*="pojo-a11y-resize-font-"] .elementor dd, html body[class*="pojo-a11y-resize-font-"] .elementor dt, html body[class*="pojo-a11y-resize-font-"] .description-section p, html body[class*="pojo-a11y-resize-font-"] .description-section li, html body[class*="pojo-a11y-resize-font-"] .description-section span, html body[class*="pojo-a11y-resize-font-"] .description-section label, html body[class*="pojo-a11y-resize-font-"] .description-section legend, html body[class*="pojo-a11y-resize-font-"] .description-section code, html body[class*="pojo-a11y-resize-font-"] .description-section pre, html body[class*="pojo-a11y-resize-font-"] .description-section dd, html body[class*="pojo-a11y-resize-font-"] .description-section dt, html body[class*="pojo-a11y-resize-font-"] .login-section p, html body[class*="pojo-a11y-resize-font-"] .login-section li, html body[class*="pojo-a11y-resize-font-"] .login-section span, html body[class*="pojo-a11y-resize-font-"] .login-section label, html body[class*="pojo-a11y-resize-font-"] .login-banner p, html body[class*="pojo-a11y-resize-font-"] .login-banner span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span, html body[class*="pojo-a11y-resize-font-"] .home-banner p, html body[class*="pojo-a11y-resize-font-"] .home-banner li, html body[class*="pojo-a11y-resize-font-"] .home-banner span, html body[class*="pojo-a11y-resize-font-"] .home-banner label, html body[class*="pojo-a11y-resize-font-"] .users-grid p, html body[class*="pojo-a11y-resize-font-"] .users-grid li, html body[class*="pojo-a11y-resize-font-"] .users-grid span, html body[class*="pojo-a11y-resize-font-"] .website-presentation p, html body[class*="pojo-a11y-resize-font-"] .website-presentation li, html body[class*="pojo-a11y-resize-font-"] .website-presentation span, html body[class*="pojo-a11y-resize-font-"] .breadcrums a, html body[class*="pojo-a11y-resize-font-"] .breadcrums span { font-size: inherit !important; } /* Blockquote keeps its designed emphasis instead of the plugin's 8x runaway (measured on /sample-page/: blockquote p 16px -> 128px at step 200). */ html body[class*="pojo-a11y-resize-font-"] .elementor blockquote, html body[class*="pojo-a11y-resize-font-"] .description-section blockquote, html body[class*="pojo-a11y-resize-font-"] .login-section blockquote { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor blockquote p, html body[class*="pojo-a11y-resize-font-"] .description-section blockquote p, html body[class*="pojo-a11y-resize-font-"] .login-section blockquote p { font-size: inherit !important; } /* Non-Elementor templates have no per-element typography of their own; give their headings a designed ladder instead of the plugin's 1.33x stack. */ html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .login-section h1, html body[class*="pojo-a11y-resize-font-"] .login-banner h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 { font-size: calc(32px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .login-section h2 { font-size: calc(26px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .login-section h3 { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .description-section h5, html body[class*="pojo-a11y-resize-font-"] .description-section h6, html body[class*="pojo-a11y-resize-font-"] .login-section h4, html body[class*="pojo-a11y-resize-font-"] .login-section h5, html body[class*="pojo-a11y-resize-font-"] .login-section h6 { font-size: calc(19px * var(--a11y-scale)) !important; } /* The plugin stacks `h_ span` on top of headings it has already scaled, which multiplied those spans by a further ~1.7x. */ html body[class*="pojo-a11y-resize-font-"] .elementor h1 span, html body[class*="pojo-a11y-resize-font-"] .elementor h2 span, html body[class*="pojo-a11y-resize-font-"] .elementor h3 span, html body[class*="pojo-a11y-resize-font-"] .elementor h4 span, html body[class*="pojo-a11y-resize-font-"] .elementor h5 span, html body[class*="pojo-a11y-resize-font-"] .elementor h6 span, html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title span, html body[class*="pojo-a11y-resize-font-"] .description-section h1 span, html body[class*="pojo-a11y-resize-font-"] .description-section h2 span, html body[class*="pojo-a11y-resize-font-"] .description-section h3 span, html body[class*="pojo-a11y-resize-font-"] .description-section h4 span, html body[class*="pojo-a11y-resize-font-"] .description-section h5 span, html body[class*="pojo-a11y-resize-font-"] .description-section h6 span, html body[class*="pojo-a11y-resize-font-"] .login-section h1 span, html body[class*="pojo-a11y-resize-font-"] .login-section h2 span, html body[class*="pojo-a11y-resize-font-"] .login-section h3 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h1 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 span { font-size: inherit !important; } /* -------------------------------------------------------------------------- SECTION 4 - Form controls, messages and validation One rule per selector PER BREAKPOINT, mirroring the theme 1:1, with the theme's own media blocks in the theme's own source order: BASE -> (min-width:768px) and (max-width:1200px) -> (min-width:1921px) -> (max-width:600px) px / vw / vh only - never em (CF7 nesting compounds it) and never rem. READABILITY FLOOR: max(14px, ) - the desktop input is 0.8vw, which renders 7.2px at a 900px-wide window. Input and submit share ONE height expression per breakpoint so they stay equal on every device at every step, with unitless line-height so the text stays vertically centred (the theme pinned line-height to 23px / 2vh, which does not grow). -------------------------------------------------------------------------- */ /* --- BASE (desktop) ------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; height: calc(max(38px, 4vh + 0.2vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale-form)) !important; height: calc(max(38px, 4vh + 0.2vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } /* .wpcf7-response-output is a
: the plugin never touched it (measured frozen at 10.08px at none / 130 / 200). Unitless line-height because the theme set none and CF7's default did not track the font. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* --- (min-width:768px) and (max-width:1200px) ---------------------------- */ @media (min-width: 768px) and (max-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] { font-size: calc(max(14px, 1.2vw) * var(--a11y-scale-form)) !important; height: calc(25px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale-form)) !important; height: calc(25px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* --- (min-width:1921px) -------------------------------------------------- */ @media (min-width: 1921px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { line-height: 1.3 !important; } } /* --- (max-width:600px) --------------------------------------------------- */ @media (max-width: 600px) { html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] { font-size: calc(14px * var(--a11y-scale-form)) !important; height: calc(42px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* baseline was input 42px vs submit 38px - unified so they match at every step */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { font-size: calc(23px * var(--a11y-scale-form)) !important; height: calc(42px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } } /* -------------------------------------------------------------------------- SECTION 4b - Elements with an intentional size of their own Includes every selector the theme wrote with :where(), restated explicitly: `.privacy-content :where(p,li,a)` is (0,2,0) and loses to the Section 3 rule above, which would flatten it. CLASS DOUBLING: these targets are s that live inside a content root, so Section 3's `html body[attr] .elementor span` (0,2,3) out-specifies a plain `html body[attr] .wpcf7-list-item-label` (0,2,2) - the class column ties and the ELEMENT column decides. Measured before the fix: the consent label and the validation tip both fell through to `inherit` (25.6px at step 200) instead of their pins. Repeating the class lifts them to (0,3,2), which wins on the class column, without tying them to one content root. -------------------------------------------------------------------------- */ /* Consent label: two NESTED .wpcf7-list-item-label spans. A calc(px) pin on both stops the inner one inheriting-and-multiplying (8.64px -> 4096px). */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label.wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .custom-check-label.custom-check-label, html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox.privacy-checkbox p { font-size: calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .checkbox-row-vertical { font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important; } /* The box and the tick scale on ONE variable, so the tick can never outgrow the box at any step (colours per contrast mode are in Section 4f). */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(max(16px, 1.3vw) * var(--a11y-scale-form)) !important; min-width: calc(max(16px, 1.3vw) * var(--a11y-scale-form)) !important; height: calc(max(16px, 1.3vw) * var(--a11y-scale-form)) !important; flex: 0 0 auto !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(max(16px, 1.3vw) * var(--a11y-scale-form) * 0.72) !important; line-height: 1 !important; } /* Privacy modal - restated from `.privacy-content :where(p, li, a)`. */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important; line-height: calc(2.6vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: calc(2.8vh * var(--a11y-scale)) !important; } /* Small text / success panel. */ html body[class*="pojo-a11y-resize-font-"] .success-title.success-title { font-size: calc(23px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .success-subtitle.success-subtitle, html body[class*="pojo-a11y-resize-font-"] .bottom-small-text.bottom-small-text, html body[class*="pojo-a11y-resize-font-"] .pv-links.pv-links > span, html body[class*="pojo-a11y-resize-font-"] .pv-link.pv-link { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* is not in the plugin's selector list - it was frozen at 15px at every step. */ html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-button .elementor-button-text { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] .global-btn, html body[class*="pojo-a11y-resize-font-"] .call-btn, html body[class*="pojo-a11y-resize-font-"] .search-btn { font-size: calc(24px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } @media (min-width: 768px) and (max-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label.wpcf7-list-item-label { line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(15px * var(--a11y-scale-form)) !important; min-width: calc(15px * var(--a11y-scale-form)) !important; height: calc(15px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(15px * var(--a11y-scale-form) * 0.72) !important; } } @media (max-width: 600px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label.wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .custom-check-label.custom-check-label, html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox.privacy-checkbox p { font-size: calc(10px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(19px * var(--a11y-scale-form)) !important; min-width: calc(19px * var(--a11y-scale-form)) !important; height: calc(19px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(19px * var(--a11y-scale-form) * 0.72) !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.6 !important; } } /* -------------------------------------------------------------------------- SECTION 4c - Cookie banner (#cc-banner-root) Injected by cookie-consent.js as a DIRECT CHILD OF , outside .elementor, so the Section 3 inherit-fix cannot reach it. Measured with the plugin only: .cc-title (an

) 16 -> 37.24px and .cc-body (a

) 14 -> 28px ran away, while .cc-root (a

) and .cc-btn (a