/* ========================================================================== One Click Accessibility (Pojo) — font-resize corrections -------------------------------------------------------------------------- The plugin emits only two !important rules per step: body.pojo-a11y-resize-font-NN, p, li, label, input, select, textarea, legend, code, pre, dd, dt, span, blockquote { font-size: NN% } body.pojo-a11y-resize-font-NN h1..h6, h1 span.. { font-size: NN*1.33% } On this site that produces, measured on the live pages: - every heading collapses to one identical size (vw is ignored by %) - percentages compound through CF7's

nesting: checkbox label 11.09px -> 2048px at step 200 - and

are not in the selector list, so .elementor-button, .elementor-icon-list-item > a and .wpcf7-response-output never move - #cc-banner-root sits outside .elementor: .cc-title/.cc-body run away while .cc-root and .cc-btn (font-size:inherit) stay frozen at 14px - the theme-template pages (/sample-page/, single, 404, search) have no .elementor wrapper at all:

16 -> 64px, blockquote p 16 -> 128px Two hard rules this file obeys: RULE A Every rule is gated behind body[class*="pojo-a11y-resize-font-"], so with nothing selected (and after Reset) it contributes zero computed differences on every page at 375 / 900 / 1440. RULE B #pojo-a11y-toolbar is a SIBLING of the content roots and is never matched here, so the toolbar keeps scaling exactly as the plugin always made it (item span 12.8px -> 25.6px). Every value below mirrors a rule measured in the live CSS; the media blocks are emitted in the same source order the theme uses, so overlapping bands resolve identically. ========================================================================== */ /* ========================================================================== SECTION 1 — STEP -> MULTIPLIERS (two curves) Form controls and the cookie banner start from the smallest sizes on the page, so they need a bigger first jump to read as "bigger". --a11y-scale text / headings / lists step 1 +15% ... max +60% --a11y-scale-form inputs, submit, Elementor buttons, response output, validation tips, checkbox labels, cookie title/body/btn step 1 +30% ... max +75% ========================================================================== */ :root { --a11y-scale: 1; --a11y-scale-form: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; } /* ========================================================================== SECTION 2 — BASE PIN Measured baseline on every page of this site is 16px. calc(), never a flat px: the value has to keep growing per step. Deliberately NOT scoped to a content root — it replaces the plugin's body{NN%} so nothing downstream compounds. It cannot affect the toolbar: the plugin pins #pojo-a11y-toolbar / ul / li to a fixed 16px and a.pojo-a11y-toolbar-link to 12.8px, so the toolbar chain never inherits from (verified: span 12.8 -> 16.64 -> 25.6 with and without this file). ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; } /* ========================================================================== SECTION 3 — KILL THE COMPOUNDING PERCENTAGES One entry per content root enumerated from the live pages: .elementor home (Elementor) .description-section /sample-page/ (page.php), 404, search, single .login-banner .login-section single.php .gold-card-banner 404.php .home-banner search.php .users-grid search.php .website-presentation search.php .breadcrums 404 / single / search input / select / textarea are deliberately excluded — Section 4 pins them. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .elementor p, 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 blockquote, 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 blockquote, 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-banner p, html body[class*="pojo-a11y-resize-font-"] .login-banner li, html body[class*="pojo-a11y-resize-font-"] .login-banner span, html body[class*="pojo-a11y-resize-font-"] .login-banner label, html body[class*="pojo-a11y-resize-font-"] .login-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .login-banner legend, html body[class*="pojo-a11y-resize-font-"] .login-banner code, html body[class*="pojo-a11y-resize-font-"] .login-banner pre, html body[class*="pojo-a11y-resize-font-"] .login-banner dd, html body[class*="pojo-a11y-resize-font-"] .login-banner 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-section blockquote, html body[class*="pojo-a11y-resize-font-"] .login-section legend, html body[class*="pojo-a11y-resize-font-"] .login-section code, html body[class*="pojo-a11y-resize-font-"] .login-section pre, html body[class*="pojo-a11y-resize-font-"] .login-section dd, html body[class*="pojo-a11y-resize-font-"] .login-section dt, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner li, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner label, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner legend, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner code, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner pre, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dd, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dt, 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-"] .home-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .home-banner legend, html body[class*="pojo-a11y-resize-font-"] .home-banner code, html body[class*="pojo-a11y-resize-font-"] .home-banner pre, html body[class*="pojo-a11y-resize-font-"] .home-banner dd, html body[class*="pojo-a11y-resize-font-"] .home-banner dt, 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-"] .users-grid label, html body[class*="pojo-a11y-resize-font-"] .users-grid blockquote, html body[class*="pojo-a11y-resize-font-"] .users-grid legend, html body[class*="pojo-a11y-resize-font-"] .users-grid code, html body[class*="pojo-a11y-resize-font-"] .users-grid pre, html body[class*="pojo-a11y-resize-font-"] .users-grid dd, html body[class*="pojo-a11y-resize-font-"] .users-grid dt, 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-"] .website-presentation label, html body[class*="pojo-a11y-resize-font-"] .website-presentation blockquote, html body[class*="pojo-a11y-resize-font-"] .website-presentation legend, html body[class*="pojo-a11y-resize-font-"] .website-presentation code, html body[class*="pojo-a11y-resize-font-"] .website-presentation pre, html body[class*="pojo-a11y-resize-font-"] .website-presentation dd, html body[class*="pojo-a11y-resize-font-"] .website-presentation dt, html body[class*="pojo-a11y-resize-font-"] .breadcrums p, html body[class*="pojo-a11y-resize-font-"] .breadcrums li, html body[class*="pojo-a11y-resize-font-"] .breadcrums span, html body[class*="pojo-a11y-resize-font-"] .breadcrums label, html body[class*="pojo-a11y-resize-font-"] .breadcrums blockquote, html body[class*="pojo-a11y-resize-font-"] .breadcrums legend, html body[class*="pojo-a11y-resize-font-"] .breadcrums code, html body[class*="pojo-a11y-resize-font-"] .breadcrums pre, html body[class*="pojo-a11y-resize-font-"] .breadcrums dd, html body[class*="pojo-a11y-resize-font-"] .breadcrums dt { font-size: inherit !important; } /* ========================================================================== SECTION 4 — FORM CONTROLS + response / validation messages On --a11y-scale-form. One rule per selector PER BREAKPOINT, values mirroring the theme 1:1, media blocks emitted in the theme's own source order: BASE (min-width: 768px) and (max-width: 1080px) (max-width: 767px) px / vw only — never em (CF7's

nesting compounds it) and never rem (would shrink below the design size on wide screens). line-height is forced UNITLESS: the theme writes 2vh / 1.8vh / 1.5vh, and vh does not grow with the font, so scaled text would collide. READABILITY FLOOR: the theme sizes these in vw with no tablet override, so at 900px the input, the checkbox label, the tip and the response output all render at 9px and would only reach ~15px at max scale. max(14px, ) keeps them legible at every step. It is inside the gate, so the default render is untouched — at 1440px max(14px, 1vw) is 14.4px, exactly the theme value. ========================================================================== */ /* --- text inputs / selects ------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), html body[class*="pojo-a11y-resize-font-"] .elementor textarea.wpcf7-form-control, html body[class*="pojo-a11y-resize-font-"] .elementor select.wpcf7-form-control { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .field-col label > span:first-child { font-size: calc(25px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .field-col label input { font-size: calc(22px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .contact-form .form-heading { font-size: calc(30px * var(--a11y-scale)) !important; line-height: 1.2 !important; } /* --- consent checkbox label ---------------------------------------------- This is fine print sitting next to much larger field text, so it runs on the TEXT curve (max +60%) with a 13px floor rather than the form curve — on the form curve it reached 24.5px at max and read as oversized next to the 20.8px it now uses. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(13px, 0.77vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* --- validation tip ------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* --- response output ------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.sent .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.failed .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.aborted .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .wpcf7-response-output { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* --- submit --------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn, html body[class*="pojo-a11y-resize-font-"] .global-btn { font-size: calc(max(16px, 1.2vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } /* --- the unstyled WordPress comment form on single.php -------------------- */ html body[class*="pojo-a11y-resize-font-"] .login-section input, html body[class*="pojo-a11y-resize-font-"] .login-section textarea, html body[class*="pojo-a11y-resize-font-"] .login-section select { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* ========================================================================== SECTION 4b — elements carrying an intentional size of their own Section 3 would flatten these to the body pin. Includes every selector the theme wrote with :where(), which has ZERO specificity — .privacy-content :where(p,li,a,div) is (0,2,0) and would lose to the Section 3 rule (0,2,3), so it is restated explicitly here. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .simple-text p { font-size: calc(max(14px, 0.77vw) * var(--a11y-scale)) !important; line-height: 1.6 !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, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class*="pojo-a11y-resize-font-"] .pv-links > span, html body[class*="pojo-a11y-resize-font-"] .pv-link { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } /* ========================================================================== SECTION 4c — COOKIE BANNER (#cc-banner-root.cc-root) The banner is a body child, OUTSIDE every content root, so Section 3 cannot reach it. Plugin-only, measured: .cc-title 16 -> 37.24px and .cc-body 14 -> 28px run away (h2 and p are in the plugin's selector list) while .cc-root (a div) and .cc-btn (a button whose own rule is font-size:inherit) stay frozen at 14px at every step. There are TWO such roots, not one. The settings modal .cc-modal-wrap is a direct child of as well — it is NOT inside #cc-banner-root — so it needs the same treatment. Measured plugin-only at step 200 inside the modal:

16 -> 64px, the toggle

, so the plugin never touches it: it correctly follows the wrapper pin and needs nothing here. */ html body[class*="pojo-a11y-resize-font-"] .cc-required-badge, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-required-badge, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list, html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list td, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* ========================================================================== SECTION 4d — VALIDATION TIP POSITIONING Audited on this site at 360 / 375 / 1440, for the plain name/phone/email fields and for the consent checkbox row, at steps none / 130 / 160 / 200. Every .wpcf7-not-valid-tip here is position:relative — in normal flow — at every breakpoint, so there is no absolutely-positioned tip with a fixed px `top` to repair, and no @supports selector(:has(*)) block to restate. The one fixed offset the theme does use is a negative pull-up at <=767px: .wpcf7-not-valid-tip { margin: -11px 0 2px 0 } -11px is a constant, so as the tip grows the box extends downward and the overlap against the field above does not grow with scale. Measured at 375px the default clearance is already only 1px INTO the input, so the pull-up is neutralised inside the gate: the tip is scaled text and needs to sit clear of the control it describes. Both margins are scaled rather than zeroed. Zeroing margin-top also outranks the theme's .checkbox-group .wpcf7-not-valid-tip{margin-top:0.5vh !important} (this rule is (0,2,2) against its (0,2,0)), which left the consent tip at exactly 0px clearance below the label. A scaled positive margin keeps a gap that grows with the text on both the plain fields and the consent row. ========================================================================== */ @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip { margin-top: calc(4px * var(--a11y-scale-form)) !important; margin-bottom: calc(4px * var(--a11y-scale-form)) !important; } } /* ========================================================================== SECTION 5 — PER-ELEMENT HEADINGS / BUTTONS / LISTS Every font-size rule from post-6.css (the only post-*.css on this site that carries any), wrapped in the gate and multiplied by var(--a11y-scale). Elementor buttons use var(--a11y-scale-form). The source emits each element at BASE in vw, again at (max-width:1024px) in vw, and again at (max-width:767px) in px — so BOTH units are emitted here. Overriding only the vw value would silently destroy the mobile size. Blocks are ordered BASE -> 1024 -> 767, matching post-6.css, so at <=767px the 767 block wins on source order exactly as it does in the original. ========================================================================== */ /* --- BASE ----------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-252fc23 .elementor-heading-title { font-size: calc(2.4vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82b6f28 .elementor-heading-title { font-size: calc(2vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c4264ea .elementor-heading-title { font-size: calc(1.54vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82ff9e0 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c009fca .elementor-heading-title { font-size: calc(1vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-61b09bd .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-94d5051 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-40ede59 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-cda140a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c8b585 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > .elementor-icon-list-text, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > a { font-size: calc(0.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3902c70 .elementor-button { font-size: calc(1.23vw * var(--a11y-scale-form)) !important; } /* --- (max-width: 1024px) -------------------------------------------------- */ @media (max-width: 1024px) { html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-61b09bd .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-94d5051 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-40ede59 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-cda140a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c8b585 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > .elementor-icon-list-text, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > a { font-size: calc(1.2vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c009fca .elementor-heading-title { font-size: calc(1.4vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3902c70 .elementor-button { font-size: calc(2.4vw * var(--a11y-scale-form)) !important; } } /* --- (max-width: 767px) --------------------------------------------------- */ @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82ff9e0 .elementor-heading-title { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82b6f28 .elementor-heading-title { font-size: calc(25px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-252fc23 .elementor-heading-title { font-size: calc(33px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c4264ea .elementor-heading-title { font-size: calc(19px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-61b09bd .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-94d5051 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-40ede59 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-cda140a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c8b585 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > .elementor-icon-list-text, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d13f2fd .elementor-icon-list-item > a { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c009fca .elementor-heading-title { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3902c70 .elementor-button { font-size: calc(4.6vw * var(--a11y-scale-form)) !important; } } /* ========================================================================== SECTION 5b — HEADINGS WITH NO THEME RULE The theme-template pages (/sample-page/, single, 404, search) and the privacy / accessibility modals contain plain h1-h6 that nothing in the theme sizes — they fall through to Bootstrap's responsive formulas. The plugin replaces all of them with one flat NN*1.33% of the parent, so every heading on those pages collapses to the same size. These mirror Bootstrap 5's own values 1:1, multiplied by the text curve, so the relative hierarchy survives. rem is correct here: it is the unit Bootstrap itself uses for these headings. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .elementor h1:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .login-banner h1, html body[class*="pojo-a11y-resize-font-"] .login-section h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .home-banner h1, html body[class*="pojo-a11y-resize-font-"] .users-grid h1, html body[class*="pojo-a11y-resize-font-"] .website-presentation h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h2:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .login-banner h2, html body[class*="pojo-a11y-resize-font-"] .login-section h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .home-banner h2, html body[class*="pojo-a11y-resize-font-"] .users-grid h2, html body[class*="pojo-a11y-resize-font-"] .website-presentation h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h3:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .login-banner h3, html body[class*="pojo-a11y-resize-font-"] .login-section h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .home-banner h3, html body[class*="pojo-a11y-resize-font-"] .users-grid h3, html body[class*="pojo-a11y-resize-font-"] .website-presentation h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h4:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .login-section h4, html body[class*="pojo-a11y-resize-font-"] .home-banner h4, html body[class*="pojo-a11y-resize-font-"] .users-grid h4, html body[class*="pojo-a11y-resize-font-"] .website-presentation h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h5:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h5, html body[class*="pojo-a11y-resize-font-"] .login-section h5, html body[class*="pojo-a11y-resize-font-"] .home-banner h5, html body[class*="pojo-a11y-resize-font-"] .users-grid h5, html body[class*="pojo-a11y-resize-font-"] .website-presentation h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h6:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h6, html body[class*="pojo-a11y-resize-font-"] .login-section h6, html body[class*="pojo-a11y-resize-font-"] .home-banner h6, html body[class*="pojo-a11y-resize-font-"] .users-grid h6, html body[class*="pojo-a11y-resize-font-"] .website-presentation h6 { font-size: calc(1rem * var(--a11y-scale)) !important; } @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .elementor h1:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .login-banner h1, html body[class*="pojo-a11y-resize-font-"] .login-section h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .home-banner h1, html body[class*="pojo-a11y-resize-font-"] .users-grid h1, html body[class*="pojo-a11y-resize-font-"] .website-presentation h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h2:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .login-banner h2, html body[class*="pojo-a11y-resize-font-"] .login-section h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .home-banner h2, html body[class*="pojo-a11y-resize-font-"] .users-grid h2, html body[class*="pojo-a11y-resize-font-"] .website-presentation h2 { font-size: calc(2rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h3:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .login-banner h3, html body[class*="pojo-a11y-resize-font-"] .login-section h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .home-banner h3, html body[class*="pojo-a11y-resize-font-"] .users-grid h3, html body[class*="pojo-a11y-resize-font-"] .website-presentation h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h4:not(.elementor-heading-title), html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .login-section h4, html body[class*="pojo-a11y-resize-font-"] .home-banner h4, html body[class*="pojo-a11y-resize-font-"] .users-grid h4, html body[class*="pojo-a11y-resize-font-"] .website-presentation h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; } } /* The 404 template writes its heading inline as style="font-size:30px", which the plugin's !important rule overrides. Mirror that exact value so the page keeps its own hierarchy while scaling. */ html body[class*="pojo-a11y-resize-font-"] .description-section.error-content h3 { font-size: calc(30px * var(--a11y-scale)) !important; } /* Privacy / accessibility modal headings — the theme sizes these itself. */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(20px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(max(16px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } /* ========================================================================== SECTION 6 — BREAKPOINT MIRRORS FOR SECTION 4 Emitted in the theme's own source order: (min-width: 768px) and (max-width: 1080px) declared first in the source (max-width: 767px) declared second Reordering these would change sizes at rest on the overlapping edges. ========================================================================== */ @media (min-width: 768px) and (max-width: 1080px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(13px, 1vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .simple-text p { font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.sent .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.failed .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.aborted .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .wpcf7-response-output { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), html body[class*="pojo-a11y-resize-font-"] .elementor textarea.wpcf7-form-control, html body[class*="pojo-a11y-resize-font-"] .elementor select.wpcf7-form-control { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* The theme only sizes the response output at <=767px through the form.sent / .failed / .aborted / .invalid state selectors; the plain element falls back to the 0.9vw base and renders at 3.4px. Both are covered here. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.sent .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.failed .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.aborted .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* .form-order form :where(p, .wpcf7-list-item-label) is (0,2,0) in the source — restated explicitly so it outranks Section 3. */ html body[class*="pojo-a11y-resize-font-"] .form-order form p, html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label { font-size: calc(13px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn, html body[class*="pojo-a11y-resize-font-"] .global-btn { font-size: calc(22px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .simple-text p { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.5 !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; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .pv-links > span, html body[class*="pojo-a11y-resize-font-"] .pv-link { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.2 !important; } } /* ========================================================================== SECTION 7 — BOX GEOMETRY THAT FONT SCALING BREAKS Four controls change SIZE, not just font-size, when the text grows. All of these are caused BY the scaling, so they are fixed here. Measured on the live page at 1440px, step 200, before this section: checkbox 18.7 x 17.6 -> 18.7 x 56.3 (tall rectangle) submit text line-height 36.3px inside a box locked at 40.5px side logo 71.8px wide -> 36.7px wide, stretched to 220.5px tall Everything here is inside the gate, so the default render is untouched. ========================================================================== */ /* --- 7a. Consent checkbox: keep it SQUARE -------------------------------- The theme sizes the box asymmetrically: width / min-width : 1.3vw (viewport-locked, never grows) height : 1.1em !important (grows with font-size) and at >=2500px height becomes 2em. Because this input sits in .checkbox-group rather than .field-col, nothing pinned its font-size, so the plugin's percentages compounded it from 16px to 51.2px — and 1.1em of that is 56px against a frozen 18.7px width. Pinning the font-size kills the em blow-up at every breakpoint, including the >=2500px one this file does not otherwise mirror. width/min-width/height are then driven from one value so the box can only ever be square, with aspect-ratio as a belt-and-braces guard and flex:0 0 auto so the flex row cannot squash it. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { font-size: calc(14px * var(--a11y-scale)) !important; width: calc(max(15px, 1.3vw) * var(--a11y-scale)) !important; min-width: calc(max(15px, 1.3vw) * var(--a11y-scale)) !important; height: calc(max(15px, 1.3vw) * var(--a11y-scale)) !important; aspect-ratio: 1 / 1 !important; flex: 0 0 auto !important; } /* The tick drawn inside it — base is 0.8vw x 1.6vh, i.e. also not square. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before { width: calc(max(9px, 0.8vw) * var(--a11y-scale)) !important; height: calc(max(9px, 0.8vw) * var(--a11y-scale)) !important; } /* Mobile already draws a square, but a bigger one: 22px with a 12px tick. Without this the base 15px floor would SHRINK the box from 22px to 17.3px on the first step — enlarging the text must never shrink a control. */ @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(22px * var(--a11y-scale)) !important; min-width: calc(22px * var(--a11y-scale)) !important; height: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before { width: calc(12px * var(--a11y-scale)) !important; height: calc(12px * var(--a11y-scale)) !important; } } /* --- 7b. Submit button: let the box follow its own text ------------------- .submit-btn input is locked to height:4.5vh, which is tied to the viewport and cannot grow with the label. At step 200 the line-height alone (36.3px) already exceeded the 40.5px box once padding was counted, so "שליחה" overflowed its background. height:auto lets it fit the text; min-height keeps it no shorter than the design at rest. Padding is scaled so the button keeps its proportions instead of the text crowding the edges. */ /* The submit and the text inputs are sized together in 7d — they share one rule so their heights cannot drift apart. */ /* The "«" glyph and the arrow image are absolutely positioned against the button's left edge, so both the offset and the size have to track it. */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input::before { font-size: calc(22px * var(--a11y-scale-form)) !important; left: calc(25px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .submit-btn img { width: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; height: auto !important; left: calc(0.5vw * var(--a11y-scale-form)) !important; } /* --- 7d. Text inputs: the same height trap as the submit ------------------ .field-col input / .wpcf7-select declare height:4.5vh at BASE and it is never overridden at any breakpoint — only the padding changes (1vh/0.6vh/8px). So once 7b let the submit grow to fit its text, the button became taller than the boxes above it, because those were still pinned to a viewport-derived 4.5vh that ignores font-size entirely. The submit is sized in the SAME rule rather than a parallel one. Keeping them separate left a 3.2px gap at max, because the theme gives the button 1.2vh of vertical padding against the input's 1vh — small, but it is exactly the mismatch being reported. Sharing one declaration means both clamp to the same min-height and are pixel-identical at every step, as they are at rest. Horizontal padding is already the same 0.8vw on both, so unifying the vertical value costs nothing visually. */ html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { height: auto !important; min-height: calc(4.5vh * var(--a11y-scale-form)) !important; padding: calc(1vh * var(--a11y-scale-form)) calc(0.8vw * var(--a11y-scale-form)) !important; } @media (min-width: 768px) and (max-width: 1080px) { html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { padding: calc(0.6vh * var(--a11y-scale-form)) calc(0.8vw * var(--a11y-scale-form)) !important; } } @media (max-width: 767px) { /* Mobile is the one band where min-height does not decide the outcome: the theme's mobile type is big enough that both controls exceed 4.5vh on their own, and the button's font is deliberately 22px against the input's 16px, so their natural heights differ by ~4px. Raising the floor to the taller of the two — the button's own content box, 22px of text at line-height 1.2 plus 8px padding top and bottom — puts both back on the same clamp, so they stay identical here too. */ html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit { min-height: calc((22px * 1.2 + 16px) * var(--a11y-scale-form)) !important; padding: calc(8px * var(--a11y-scale-form)) calc(16px * var(--a11y-scale-form)) !important; } } /* --- 7e. Gutter the consent checkbox sits in ------------------------------ The checkbox is position:absolute; right:0 inside the label, and the space it occupies is reserved purely by the label's padding-right: BASE 1.8vw 768px - 1080px 2.7vw <= 767px 30px Every one of those is locked to the viewport or to a fixed pixel value, so scaling the box in 7a made it outgrow its own gutter and overlap the first line of the consent text (RTL, so it runs left onto the words). Scaling the gutter by the SAME --a11y-scale the box uses keeps the two in proportion, so the clearance can never close: the theme's own values are already wider than the box at every breakpoint (25.9 vs 18.7 at 1440, 24.3 vs 15 at 900, 30 vs 22 at 375) and multiplying both by one factor preserves that ratio exactly. The validation tip is indented to match the label, so it scales too — otherwise the red message would sit under the checkbox instead of under the text it belongs to. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label { padding-right: calc(1.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip { padding-right: calc(1.8vw * var(--a11y-scale)) !important; } @media (min-width: 768px) and (max-width: 1080px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label { padding-right: calc(2.7vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip { padding-right: calc(2.7vw * var(--a11y-scale)) !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label { padding-right: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip { padding-right: calc(28px * var(--a11y-scale)) !important; } } /* --- 7c. Logo beside the consent checkbox -------------------------------- .checkbox-group > p is display:flex and .side-logo is a plain flex item, so it inherits flex-shrink:1 and align-items:stretch. As the consent label grew the logo was squeezed from 71.8px to 36.7px wide and stretched into a 220.5px tall empty box. Note it is ALREADY shrunk at rest: the declared width is 12vw (172.8px at 1440) but it renders at 71.8px, because the label alone over-constrains the row. So flex-shrink must NOT simply be disabled — that snaps the logo out to the full 172.8px, more than doubling it. Instead the shrink stays enabled and a scaled min-width sets a floor at the size it renders at today, so growing the text makes the label wrap rather than eat the logo. The floor is per-breakpoint because the declared width changes (12vw / 22vw / 67%) and the rendered result differs at each: 71.8px at 1440, 64.4px at 900, 73.3px at 375. align-self stops the empty-box stretch. */ html body[class*="pojo-a11y-resize-font-"] .side-logo { min-width: calc(72px * var(--a11y-scale)) !important; align-self: center !important; } html body[class*="pojo-a11y-resize-font-"] .side-logo img { height: auto !important; } @media (min-width: 768px) and (max-width: 1080px) { html body[class*="pojo-a11y-resize-font-"] .side-logo { min-width: calc(64px * var(--a11y-scale)) !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .side-logo { min-width: calc(73px * var(--a11y-scale)) !important; } }