are not in the plugin's selector list, so the CF7 submit (#final-submit) and the cookie buttons never moved at all. 5. #cc-banner-root lives OUTSIDE .elementor, so its

/
ran away while .cc-btn (font:inherit) and .cc-root stayed frozen at 14px. 6. The consent validation tip is absolutely positioned at a FIXED offset (top:3vw desktop / top:50px mobile) that cannot track a consent label which grows taller as it scales. See Section 4d. TWO RULES THIS FILE OBEYS A. Nothing selected -> design unchanged. Every rule that sets a SIZE is gated behind body[class="pojo-a11y-resize-font-"], so with no step chosen, and again after Reset, this file contributes zero computed font-size/line-height differences on any page at 375/900/1440. Ungated, by deliberate exception: - :root and the body.pojo- variable rules (they set no font-size); - the @supports(display:contents) block in Section 4d, which only re-flows the consent validation tip. That bug predates this file and is visible with accessibility OFF, so gating it would leave the default render broken. It sets no font-size, and it changes nothing at all until CF7 injects a tip — see the note there. B. #pojo-a11y-toolbar is a SIBLING of .elementor, never a child. No rule here is scoped to it, so the toolbar keeps scaling exactly as the plugin always made it. NOTE ON DOUBLED [class=...]: a few selectors repeat the gate attribute. That is deliberate — it buys one extra class-column point so the rule beats both the plugin's `body.pojo-a11y-resize-font-NN p:not(...)` (0,2,2) and this file's own generic inherit rules, without depending on source order. ========================================================================== / /* -------------------------------------------------------------------------- SECTION 1 — STEP -> MULTIPLIERS (two curves) Two curves, because form controls and the cookie banner start from the smallest sizes on the page (0.6vw–1vw, 14px) and need a bigger first jump to read as "bigger" at all: --a11y-scale text / headings / lists step 1 +15% … max +60% --a11y-scale-form inputs, submit, Elementor buttons, response output, validation tips, consent label, 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 Deliberately NOT scoped to a content root: is the shared ancestor of both .elementor and #pojo-a11y-toolbar, and the toolbar's popup is sized in % off it. calc() (never a flat px) is what keeps the toolbar alive. 16px is the MEASURED body baseline on every page of this site. -------------------------------------------------------------------------- / html body[class="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; } /* -------------------------------------------------------------------------- SECTION 3 — KILL THE COMPOUNDING PERCENTAGES INSIDE EVERY CONTENT ROOT Roots found by enumerating every page (see report): .elementor – / , /home-old/ , 404 (Elementor template 299) .description-section – /sample-page/ and any page.php page body > … – single.php / index.php / search.php emit the_content() with NO wrapper at all, so the content is a direct child of . The child combinator is what keeps this away from the toolbar (
) and the cookie banner (
). input/select/textarea are deliberately excluded — Section 4 owns 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 { font-size: inherit !important; } / Bare-body templates (single.php / index.php / search.php). Doubled gate: `body[g] > p` alone is (0,1,3) and LOSES to the plugin's `body.pojo-a11y-resize-font-NN p:not(.pojo-a11y-toolbar-title)` (0,2,2). / html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > p, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > p span, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > blockquote, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > blockquote p, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > blockquote span, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > ul li, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > ol li, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > dl dd, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > dl dt, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] > pre { font-size: inherit !important; } / -------------------------------------------------------------------------- SECTION 4 — FORM CONTROLS + RESPONSE / VALIDATION MESSAGES Everything here rides --a11y-scale-form. Values mirror the theme's own inline stylesheet 1:1, and the @media blocks are emitted in the theme's SOURCE ORDER — its bands overlap ((min-width:500px)and(max-width:767px) is declared BEFORE (max-width:768px)), so order, not "specificity", decides. px/vw only: never em (CF7 nesting compounds it), never rem. READABILITY FLOORS (all inside the gate, so the default render is untouched). The theme's base values are vw and get very small on the narrow end of their own band: inputs / submit max(16px, …) – 1vw is 10.8px at the 1080px band edge, and 16px is the theme's own mobile value consent label max(12px, …) – 0.6vw is 8.6px at 1440; 12px is the theme's own mobile value tip / response max(14px, …) – 0.8vw is 7.2px at 900px wide The input floor also closes a pre-existing breakpoint gap: the theme has no input rule between 481px and 499px, so inputs there fall back to base 1vw (~4.9px). Reported, not silently patched elsewhere. -------------------------------------------------------------------------- / / Generic CF7 fallback (any future form outside .private-contact-form). Declared FIRST so the .private-contact-form rules below — equal specificity — win on source order. / html body[class="pojo-a11y-resize-font-"] .elementor input, html body[class="pojo-a11y-resize-font-"] .elementor select, html body[class="pojo-a11y-resize-font-"] .elementor textarea { font-size: calc(16px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip, html body[class="pojo-a11y-resize-font-"] .elementor .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* ---- base (theme: no media block) ---- / html body[class="pojo-a11y-resize-font-"] .private-contact-form input, html body[class="pojo-a11y-resize-font-"] .private-contact-form textarea { font-size: calc(max(16px, 1vw) var(--a11y-scale-form)) !important; line-height: 1 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn { font-size: calc(max(16px, 1vw) var(--a11y-scale-form)) !important; line-height: 1.2 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label { font-size: calc(max(12px, 0.6vw) var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.8vw) var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.8vw) var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .success-title, html body[class="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle { font-size: calc(2vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .success-title { font-size: calc(max(18px, 1.5vw) var(--a11y-scale)) !important; } /* ---- theme band 1: (min-width:768px) and (max-width:1079px) ---- / @media (min-width: 768px) and (max-width: 1079px) { html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form input, html body[class="pojo-a11y-resize-font-"] .private-contact-form textarea { font-size: calc(max(16px, 1.5vw) * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn { font-size: calc(max(16px, 1.6vw) var(--a11y-scale-form)) !important; } } /* ---- theme band 2: (min-width:500px) and (max-width:767px) ---- / @media (min-width: 500px) and (max-width: 767px) { html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label { font-size: calc(12px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form input, html body[class="pojo-a11y-resize-font-"] .private-contact-form textarea { font-size: calc(16px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn { font-size: calc(18px var(--a11y-scale-form)) !important; } } /* ---- theme band 3: (max-width:768px) [declared AFTER band 2 — intentional] ---- / @media (max-width: 768px) { html body[class="pojo-a11y-resize-font-"] .private-contact-form .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .wpcf7 form .wpcf7-response-output { font-size: calc(14px var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox .wpcf7-list-item-label { font-size: calc(12px var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .submit-col .global-btn { font-size: calc(18px var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .success-title, html body[class="pojo-a11y-resize-font-"] .private-contact-form .success-subtitle { font-size: calc(24px * var(--a11y-scale)) !important; } } /* ---- theme band 4: (max-width:480px) ---- / @media (max-width: 480px) { html body[class="pojo-a11y-resize-font-"] .private-contact-form input, html body[class="pojo-a11y-resize-font-"] .private-contact-form textarea { font-size: calc(16px var(--a11y-scale-form)) !important; } } /* ---- theme band 5: (max-width:767px) — .success-title lives in its own later inline block, mirrored here in that same order ---- / @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"] .success-title { font-size: calc(20px * var(--a11y-scale)) !important; } } /* -------------------------------------------------------------------------- SECTION 4b — ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN Section 3 would flatten these to their parent's size. -------------------------------------------------------------------------- / / Price badge: a inside a
inside the hero
. This is the site's one heading-with-span. Pure 1:1 mirror, no floor — the badge is absolutely positioned inside a fixed-width price box and a floor would push it out of the box. (6px at mobile is a pre-existing readability problem; reported, not papered over here.) / html body[class="pojo-a11y-resize-font-"] .price .small-txt { font-size: calc(1.3vw * var(--a11y-scale)) !important; line-height: 1 !important; } @media (max-width: 768px) { html body[class="pojo-a11y-resize-font-"] .price .small-txt { font-size: calc(6px var(--a11y-scale)) !important; } } /* Privacy / accessibility modal. The theme writes these with :where(), which is ZERO specificity — (0,2,0) — so Section 3 (0,2,3) would flatten every paragraph in the modal. Restated explicitly here. line-height is restated UNITLESS: the theme uses vh, which does not grow with the font and would collapse the lines onto each other when scaled. The floors are PROPORTIONAL (22 / 18 / 13 mirrors the theme's 1.4 / 1.1 / 0.8vw ratio). A flat floor on the body text alone inverts the hierarchy: at 900px wide the theme's h2 is 12.6px and its
7.2px, so floor-13 body text would render LARGER than the heading above it. / html body[class="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(22px, 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(18px, 1.1vw) var(--a11y-scale)) !important; line-height: 1.35 !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, html body[class="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span { font-size: calc(max(13px, 0.8vw) var(--a11y-scale)) !important; line-height: 1.6 !important; } @media (max-width: 768px) { html body[class="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(18px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(16px 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, html body[class="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span { font-size: calc(13px * var(--a11y-scale)) !important; } } /* Footer privacy links. `.pv-links > span` ties with Section 3 on specificity (0,2,3); it is declared after, so it wins on order. `.pv-link` is an , which Section 3 never touches. / html body[class="pojo-a11y-resize-font-"] .pv-links > span, html body[class="pojo-a11y-resize-font-"] .pv-link { font-size: calc(max(12px, 0.8vw) var(--a11y-scale)) !important; line-height: 1.2 !important; } @media (max-width: 768px) { 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; } } /* -------------------------------------------------------------------------- SECTION 4c — COOKIE BANNER (#cc-banner-root) AND ITS SETTINGS MODAL The banner is a direct child of , outside .elementor, so Section 3 cannot reach it. The settings modal (.cc-modal-wrap) is ALSO a direct child of and is NOT inside .cc-root — verified live — so every pin needs a selector that works in both places. That is what the doubled gate does: it lifts each pin to (0,3,2), which beats the generic inherit rule below (0,2,3) and the plugin's own (0,2,2), in either container. Measured plugin-only failures this fixes, at step 200: runaways : .cc-title 16 -> 37.2px , .cc-body 14 -> 28.0px freezes : .cc-root and every .cc-btn stuck at 14px (font:inherit) Every pin is calc(px * var(--a11y-scale…)) — never a flat px, which would stop the runaway but freeze the banner. .cc-title (16->18) and .cc-btn (14->15) get bumped baselines so the very first click is a visible jump rather than a rounding difference. -------------------------------------------------------------------------- / html body[class="pojo-a11y-resize-font-"] .cc-root p, html body[class="pojo-a11y-resize-font-"] .cc-root li, html body[class="pojo-a11y-resize-font-"] .cc-root span, html body[class="pojo-a11y-resize-font-"] .cc-root label, html body[class="pojo-a11y-resize-font-"] .cc-root a, html body[class="pojo-a11y-resize-font-"] .cc-modal p, html body[class="pojo-a11y-resize-font-"] .cc-modal li, html body[class="pojo-a11y-resize-font-"] .cc-modal span, html body[class="pojo-a11y-resize-font-"] .cc-modal label, html body[class="pojo-a11y-resize-font-"] .cc-modal a { font-size: inherit !important; } / Roots. .cc-modal has no size of its own and would otherwise inherit the scaled pin (25.6px at max) and drag .cc-cat-name with it. / html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-root, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-modal-wrap, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-modal { font-size: calc(14px var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-title { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-body { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-btn, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cat-name { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cookies-list, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cookies-list summary, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cookies-list th, html body[class="pojo-a11y-resize-font-"][class="pojo-a11y-resize-font-"] .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- SECTION 4d — VALIDATION TIP POSITIONING (MANDATORY on this site) -------------------------------------------------------------------------- The theme takes the consent tip out of flow at a FIXED offset: .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip { position:absolute; top:3vw; width:100%; text-wrap:nowrap } @media (max-width:768px) { … top:50px } There is no @supports/:has() auto-tracking variant on this site — BOTH the desktop and the mobile anchor are fixed, so both are broken. Why a fixed `top` cannot work here: the consent row is p (display:flex) ├ span.wpcf7-form-control-wrap <- 26x24px, position:relative, │ and the tip is injected in HERE └ span.custom-check-label <- the visible consent text, a SIBLING, many lines tall The tip is positioned against the 24px-tall checkbox wrapper, not against the text it must clear. Scale the consent label and it wraps to more lines; the fixed offset stays put and the red message is drawn across the text. Measured overlap at 388px wide: none +18px, 130 +68px, 160 +157px, 200 +384px. Fix: put the tip back IN FLOW as a full-width flex item on its own line. The row's
is already display:flex, so `display:contents` on the control wrapper promotes the checkbox and the tip to flex items of the row itself; `order:9` + `flex:0 0 100%` + `flex-wrap:wrap` then drops the tip onto a line of its own underneath everything. That is completely self-sizing — no reserved-padding guess to get wrong — so overlap stays <= 0 whether the message wraps to one, two or three lines. Measured after the fix at 375px: overlap -6px and spill 0 at EVERY step, for both a short and a long message. `position:static` on the tip ALONE would not do — the tip would be laid out inside the 26px-wide control wrapper. It is the display:contents on the wrapper that makes static positioning safe here. The theme's `text-wrap:nowrap` is dropped: at max scale a nowrapped message is wider than a 360px viewport and pushes the whole page sideways. Fallback below @supports, for engines without display:contents: anchor to bottom:0 of the row and reserve three lines. Not self-sizing, but still far better than a fixed offset drawn across the consent text. -------------------------------------------------------------------------- / @supports not (display: contents) { html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first .wpcf7-form-control-wrap { position: static !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first > p { position: relative !important; padding-bottom: calc(max(14px, 0.8vw) var(--a11y-scale-form) * 1.35 * 3 + 8px) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip { position: absolute !important; top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin-top: 0 !important; white-space: normal !important; text-wrap: wrap !important; } @media (max-width: 768px) { html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first > p { padding-bottom: calc(14px * var(--a11y-scale-form) * 1.35 * 3 + 8px) !important; } html body[class="pojo-a11y-resize-font-"] .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip { top: auto !important; bottom: 0 !important; } } } / Primary, self-sizing fix — DELIBERATELY UNGATED. See the note on Rule A in the file header. These rules carry no font-size; they only put the tip back in flow. The theme's fixed `top` offset draws the message across the consent text even with accessibility switched OFF (measured overlap +18px at 375px, and the tip hangs 27px below its row at 1440px), so gating this behind the accessibility class would leave the default render broken for everyone. Verified that this changes nothing until CF7 actually injects a tip: with no error showing, the consent row's geometry is identical byte-for-byte before and after (row height, label width, label top, checkbox top) at 375 and 1440. The only computed differences anywhere in the document are three internal box-model values inside this one row — the wrapper going display:block -> contents, its child inline -> block at the same 30x25 box, and the
going block -> none — none of which move a pixel. / @supports (display: contents) { .private-contact-form .privacy-checkbox.first > p { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; position: static !important; padding-bottom: 0 !important; } .private-contact-form .privacy-checkbox.first .wpcf7-form-control-wrap { display: contents !important; } / flex-wrap:wrap is what lets the tip take its own line, but it also lets the CONSENT LABEL take one: its flex-basis is auto, i.e. max-content, so once the text is scaled it no longer fits beside the checkbox and wraps below it, leaving the checkbox stranded on a line of its own. Measured at 375px: label top sits 27px under the checkbox at step 160, 29px at 200, against 0px at rest. flex-basis 0 + min-width 0 makes the label SHRINK into the space left over on line one instead of wrapping, so the checkbox and its text stay on the same line at every step, exactly as they are at rest. The tip still wraps, because it is flex:0 0 100%. / .private-contact-form .privacy-checkbox.first > p > .custom-check-label { flex: 1 1 0 !important; min-width: 0 !important; } .private-contact-form .privacy-checkbox.first .wpcf7-form-control { flex: 0 0 auto !important; } / the
between the control and the label is inert in a nowrap flex row but becomes a zero-width flex item once wrapping is on; drop it so it can never introduce a break of its own. / .private-contact-form .privacy-checkbox.first > p > br { display: none !important; } .private-contact-form .privacy-checkbox.first .wpcf7-not-valid-tip { position: static !important; order: 9 !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; top: auto !important; bottom: auto !important; margin-top: 6px !important; white-space: normal !important; text-wrap: wrap !important; } } / -------------------------------------------------------------------------- SECTION 5 — PER-ELEMENT HEADINGS / BUTTONS / ICON-LISTS Every font-size rule from every post-.css on every page, gated and multiplied. 214 source declarations -> 24 grouped rules. page 342 + templates 347/350/353/398 (home) 105 declarations page 6 (/home-old/) 104 template 299 (404) 2 template 3 (Elementor kit) 0 Element ids are unique site-wide, so the `.elementor-NNN ` page prefix is dropped and the pages merge into shared value groups. Both the base `vw` value AND the `px` value from each breakpoint are emitted — overriding only the vw one would silently destroy the mobile size. Elementor buttons ride --a11y-scale-form; headings and lists --a11y-scale. line-height is never touched here: the theme writes it in `em` and unitless units, both of which already follow the font-size. -------------------------------------------------------------------------- / html body[class="pojo-a11y-resize-font-"] .elementor-element-5183d2a .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-68d4092 .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-ad2f9b4 .elementor-button { font-size: calc(1.5vw var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0945df8 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d6fb4f3 .elementor-heading-title { font-size: calc(5.2vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-08b817b .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-0da6d35 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-11fdd62 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1a0c137 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-290f42c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-39995a0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-6e0838ee .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7833591 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a226fbc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2d1da1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c2cb2dd .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d06151d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d0a7638 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e99e4d4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-eddb40e .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-fb5bc3b .elementor-heading-title { font-size: calc(2.5vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-3f49c1b .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-75980e22 .elementor-heading-title { font-size: calc(2.2vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0752553 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-13fc46a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1a74e60 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1d0820a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1ec8171 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1f4c337 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1f54759 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-221d505 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2dff52f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-318b2db .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3207dc5 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3663d76 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-39b5028 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-511735a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-79251e6 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7b279ef .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7ca9aab .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7e668e2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-82721b2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-8d2f06c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-953d579 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-95ce015 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9cc5bc8 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9ef7772 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9f6f1b1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2eeae2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a30ff3d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a6f5504 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b188db4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b42f936 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b637595 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bf0f6c1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c3db4fb .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c7f8505 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c977b6a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cbc3e76 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d328514 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-dc03ee1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-de50ce7 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ef96a24 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-f4bf0c4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ffc27d7 .elementor-heading-title { font-size: calc(1.3vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0259cd2 .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-05ddfbd .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-a043c4d .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-ae28a4f .elementor-button { font-size: calc(1.23vw * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-2359dcb0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-28759d74 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2b3da38 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-364147fc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-454e809f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5181b224 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5a8be13c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-86f85e3 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-89b6ff0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ac43bc1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e540564 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e606d41 .elementor-heading-title { font-size: calc(1.2vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-07b581c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-19f6d13 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-21ae3d4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-298f42d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7978f77 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-8cb41f9 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2fd7a9 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-aec5a77 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b020759 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bc90b5f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ccff587 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cecbc7c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cf20dc6 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-fa2a5cf .elementor-heading-title { font-size: calc(1.1vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-03a9504 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2c6ebfc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3f170ee .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5db63ed .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-662758e .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bd520f4 .elementor-heading-title { font-size: calc(1vw * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-1dd358e .elementor-icon-list-item > .elementor-icon-list-text, html body[class="pojo-a11y-resize-font-"] .elementor-element-1dd358e .elementor-icon-list-item > a, html body[class="pojo-a11y-resize-font-"] .elementor-element-6866fc15 .elementor-icon-list-item > .elementor-icon-list-text, html body[class="pojo-a11y-resize-font-"] .elementor-element-6866fc15 .elementor-icon-list-item > a { font-size: calc(1vw * var(--a11y-scale)) !important; } @media (max-width: 1024px) { html body[class="pojo-a11y-resize-font-"] .elementor-element-0259cd2 .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-05ddfbd .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-a043c4d .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-ae28a4f .elementor-button { font-size: calc(2.4vw * var(--a11y-scale-form)) !important; } } @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"] .elementor-element-0945df8 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d6fb4f3 .elementor-heading-title { font-size: calc(28px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-08b817b .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1a0c137 .elementor-heading-title { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0da6d35 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-11fdd62 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-290f42c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-39995a0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-6e0838ee .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7833591 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a226fbc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2d1da1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c2cb2dd .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d06151d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d0a7638 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e99e4d4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-eddb40e .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-fb5bc3b .elementor-heading-title { font-size: calc(21px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-3f49c1b .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-75980e22 .elementor-heading-title { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0752553 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-13fc46a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1a74e60 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1d0820a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1ec8171 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1f4c337 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-1f54759 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-221d505 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2dff52f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-318b2db .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3207dc5 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3663d76 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-39b5028 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-511735a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-79251e6 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7b279ef .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7ca9aab .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7e668e2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-82721b2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-8d2f06c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-953d579 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-95ce015 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9cc5bc8 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9ef7772 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-9f6f1b1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2eeae2 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a30ff3d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a6f5504 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b188db4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b42f936 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b637595 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bf0f6c1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c3db4fb .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c7f8505 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-c977b6a .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cbc3e76 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-d328514 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-dc03ee1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-de50ce7 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ef96a24 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-f4bf0c4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ffc27d7 .elementor-heading-title { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-28759d74 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-454e809f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5a8be13c .elementor-heading-title { font-size: calc(16px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-5183d2a .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-68d4092 .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-ad2f9b4 .elementor-button { font-size: calc(15px var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-03a9504 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-19f6d13 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-21ae3d4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2359dcb0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2b3da38 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-2c6ebfc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-364147fc .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5181b224 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-86f85e3 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-89b6ff0 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-a2fd7a9 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ac43bc1 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-b020759 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bc90b5f .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cecbc7c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-cf20dc6 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e540564 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-e606d41 .elementor-heading-title { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-6866fc15 .elementor-icon-list-item > .elementor-icon-list-text, html body[class="pojo-a11y-resize-font-"] .elementor-element-6866fc15 .elementor-icon-list-item > a { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-662758e .elementor-heading-title { font-size: calc(13px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-07b581c .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-298f42d .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-3f170ee .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-5db63ed .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-7978f77 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-8cb41f9 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-aec5a77 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-bd520f4 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-ccff587 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-fa2a5cf .elementor-heading-title { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-1dd358e .elementor-icon-list-item > .elementor-icon-list-text, html body[class="pojo-a11y-resize-font-"] .elementor-element-1dd358e .elementor-icon-list-item > a { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element-0259cd2 .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-05ddfbd .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-a043c4d .elementor-button, html body[class="pojo-a11y-resize-font-"] .elementor-element-ae28a4f .elementor-button { font-size: calc(4.6vw * var(--a11y-scale-form)) !important; } } /* -------------------------------------------------------------------------- SECTION 6 — MOBILE HERO HEADING: KEEP IT CLEAR OF THE STICKY HEADER -------------------------------------------------------------------------- The hero heading widget is absolutely positioned and anchored to the BOTTOM of a banner that is only ~252px tall on mobile: .elementor-element-d6fb4f3 { position:absolute; bottom:16px } - home .elementor-element-0945df8 { position:absolute; bottom:16px } - home-old Because it is bottom-anchored, every extra line the scaled heading needs grows UPWARD — straight into the header logo and the "צור קשר" button, which are not part of the banner and cannot move out of the way. Measured at 375px, clearance between the CTA's bottom edge and the heading's top edge: step none 160 200 home +68 +1 -27 <- negative = drawn over the header home-old +110 +53 -13 There is genuinely only ~162px of free space between the CTA and the banner floor, and the heading wants 179px at full scale, so something has to give. Three cheap levers are used together instead of one blunt one: line-height 0.9 – the heading ships at line-height 1.0; 0.9 is tight but it is a large display face and this only applies once the user has explicitly enlarged the text bottom 2px – recovers the 14px of the original 16px floor gap scale cap 1.45 – the ONLY concession on size. The heading still reaches 40.6px (1.45x its 28px base) instead of 44.8px (1.6x). Capping just this one heading is what buys a stable 20px of clearance at 360px, the narrowest common phone. Everything else on the page keeps the full 1.6x curve — this cap is scoped to these two widgets, on mobile only. Desktop and tablet need none of it: at 900px the clearance at max is 239px and at 1440px it is 616px. Declared after Section 5 on purpose: the font-size selector here has the same specificity (0,3,2) as its Section 5 counterpart, so source order is what makes it win. -------------------------------------------------------------------------- / @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"] .elementor-element-d6fb4f3 .elementor-heading-title, html body[class="pojo-a11y-resize-font-"] .elementor-element-0945df8 .elementor-heading-title { font-size: calc(28px min(var(--a11y-scale), 1.45)) !important; line-height: 0.9 !important; } html body[class="pojo-a11y-resize-font-"] .elementor-element.elementor-element-d6fb4f3, html body[class="pojo-a11y-resize-font-"] .elementor-element.elementor-element-0945df8 { bottom: 2px !important; } }