- the plugin never touches it) -------- */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .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.sent .wpcf7-response-output { /* readability floor: 0.9vw renders ~7px on a narrow desktop window */ font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; /* theme used 1vh - never grows */ padding: calc(1vh * var(--a11y-scale-form)) calc(0.5vw * var(--a11y-scale-form)) !important; height: auto !important; } /* ---- 4.3 Validation tips - sized so they stay on ONE line -------------- */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip.wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip.wpcf7-not-valid-tip { font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-tip)) !important; line-height: 1.35 !important; /* theme used 1.5vh - never grows */ position: relative !important; /* stays in flow so it reserves its own vertical space */ top: auto !important; bottom: auto !important; display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ---- 4.4 Checkbox consent row ----------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label { font-size: calc(max(13px, 0.703vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; /* inline page CSS caps this at 17vw; let it use the room it actually has */ max-width: min(100%, calc(17vw * var(--a11y-scale-form))) !important; } /* The checkbox itself must not react to the exploding font-size / line-height. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1 !important; } /* ---- 4.5 Small print --------------------------------------------------- */ /* Class doubled so these out-specify the Section 3 `inherit` rule. */ html body[class*="pojo-a11y-resize-font-"] .form-bottom-text.form-bottom-text { font-size: calc(max(13px, 0.703vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* `.privacy-links :where(a, span, p)` carries ZERO class weight from :where() - restated explicitly here. is not in the plugin's element list at all, so without this rule the privacy / accessibility links never move at any step. */ html body[class*="pojo-a11y-resize-font-"] .privacy-links.privacy-links :is(a, span, p) { font-size: calc(max(13px, 0.703vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-success-message .success-title, html body[class*="pojo-a11y-resize-font-"] .cf7-success-message .success-subtitle { font-size: calc(max(14px, 1.2vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } /* ---- 4.6 Privacy / accessibility statement modal ------------------------ `.privacy-content :where(p, li, a)` is (0,2,0) and would be flattened by the Section 3 rule - restated explicitly at higher weight. */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 { font-size: calc(max(15px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p, li, a, span) { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } /* ========================================================================== SECTION 4b - Cookie banner (#cc-banner-root) The banner is a direct child of , OUTSIDE .elementor, so the Section 3 inherit rule cannot reach it. Measured plugin-only behaviour at step 200: .cc-title 16 -> 37.2px and .cc-body 14 -> 28px (runaway: h2 and p), .cc-root and .cc-btn frozen at 14px (a

, and `font: inherit`). Generic inherit first, then explicit pins - every pin is calc(px * scale) so nothing freezes. Each pin has a bare (doubled-class) and a .cc-root scoped selector. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, a, div, strong, em), html body[class*="pojo-a11y-resize-font-"] #cc-banner-root :is(p, li, span, label, a, div, strong, em), html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap :is(p, li, span, label, a, div, strong, em) { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] .cc-root, html body[class*="pojo-a11y-resize-font-"] #cc-banner-root { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* Baselines bumped (16->18, 14->15) so the very first click is a visible jump. */ html body[class*="pojo-a11y-resize-font-"] .cc-title.cc-title, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-body.cc-body, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-body { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn, html body[class*="pojo-a11y-resize-font-"] .cc-root .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-"] .cc-lang-toggle.cc-lang-toggle, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-modal-close.cc-modal-close, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc.cc-cat-desc, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-cat-name.cc-cat-name, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cat-name { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-required-badge.cc-required-badge, html body[class*="pojo-a11y-resize-font-"] .cc-root .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.cc-cookies-list, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list, 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 { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* ========================================================================== SECTION 4c - Form layout while scaling The desktop field columns are only ~180px wide. A validation tip cannot both grow and stay on one line inside 180px (measured: the Hebrew phone message already fills 175px of the 175px box at the 10.1px baseline). Gated at >=768px the four field columns go full width (~361px), which: - keeps every tip on ONE line at every step, - stops two adjacent tips from colliding, - makes the submit button the same width as the inputs. ========================================================================== */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"] .first-col-row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } } /* Keep the consent label clear of the absolutely-positioned checkbox as the text grows; the box itself is pinned in 4.4 and Section 7. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label { align-items: flex-start !important; } /* ========================================================================== SECTION 4d - Stop the black form section swallowing the text above it The black band (post-2 #718e23a / post-352 #3922e4d) is pulled up over the white hero with `--margin-top: -4.9vh` (-44px at 900px tall). At the design size the left column is shorter than the 78vh hero image, so the icon-box labels sit ~130px clear of it. As soon as the text grows, the left column becomes the taller one and its last row lands inside that 44px overlap - the labels ("סביבת עבודה ירוקה" etc.) get painted over by the black band. Gated: while font-resize is on, the two sections stop overlapping and the left column keeps a little extra breathing room underneath. The overlap is restored untouched the moment the size is reset. Mobile already sets --margin-top:0, so this is desktop/tablet only. ========================================================================== */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-718e23a, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-3922e4d { --margin-top: 0px !important; margin-top: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-857812c, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-caa57e6 { --padding-bottom: 4vh !important; } } /* ========================================================================== SECTION 4e - Fixed bottom CTA bar: the two buttons must stay the same size The bar (post-2 #d28ea49 / post-352 #c96553c) holds two 50% columns. The labels are different lengths, so as the text grows "לפרטים נוספים" wraps to two lines while "חייג עכשיו" stays on one - the columns stretch to match but each keeps its own content height, so one button ends up visibly shorter than the other. Making the widget and the anchor fill their column height keeps both buttons identical whatever the label does, and centring the text keeps a wrapped label balanced inside the taller box. Gated, so the bar is untouched at the design size. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d28ea49 > .e-con-inner, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c96553c > .e-con-inner { align-items: stretch !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d28ea49 .elementor-widget-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c96553c .elementor-widget-button { display: flex !important; flex: 1 1 auto !important; align-self: stretch !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d28ea49 .elementor-widget-button > .elementor-widget-container, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c96553c .elementor-widget-button > .elementor-widget-container, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d28ea49 .elementor-button-wrapper, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c96553c .elementor-button-wrapper { display: flex !important; width: 100% !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d28ea49 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c96553c .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; height: 100% !important; line-height: 1.15 !important; } /* ========================================================================== SECTION 5 - Every theme + Elementor font-size rule, gated and scaled. Base first, then the source-order media blocks each file actually uses (post-2.css / post-352.css both emit max-width:1024px BEFORE max-width:767px - mirrored exactly, because overlapping bands resolve by order). Elementor buttons ride the form curve; headings ride the general curve. ========================================================================== */ /* ---- post-2.css : base -------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f5c5423 .elementor-heading-title { font-size: calc(7.6vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-506eb67 .elementor-heading-title { font-size: calc(4.05vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-926a5c6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-8ec5bc9 .elementor-heading-title { font-size: calc(4.15vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c76f00a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-482ea85 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2f7baac .elementor-heading-title { font-size: calc(1.7vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-0222142 .elementor-heading-title { font-size: calc(1.75vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-43802b6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-16e9eb9 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c9974e6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ad4b942 .elementor-heading-title { font-size: calc(1.3vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-5eb5f0c .elementor-heading-title { font-size: calc(1.95vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-cf0961a .elementor-heading-title { font-size: calc(0.9vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-567ee93 .elementor-heading-title { font-size: calc(1.88vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c05cbb4 .elementor-heading-title { font-size: calc(0.95vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a08ead0 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c8a07c8 .elementor-button { font-size: calc(1.23vw * var(--a11y-scale-form)) !important; } /* ---- post-352.css : base ------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-3a1805f .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-0755718 .elementor-heading-title { font-size: calc(6vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-719d3e5 .elementor-heading-title { font-size: calc(3.33vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-f9fc0a7 .elementor-heading-title { font-size: calc(4.15vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-133d2dd .elementor-heading-title { font-size: calc(3vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-a6a9dc9 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-e327044 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-792423d .elementor-heading-title { font-size: calc(1.5vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-ace7b11 .elementor-heading-title { font-size: calc(1.75vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-486e333 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-d9710b1 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-5465b64 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-12d3770 .elementor-heading-title { font-size: calc(1.3vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-09b809a .elementor-heading-title { font-size: calc(1.95vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-2b25d2d .elementor-heading-title { font-size: calc(1.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-0e1bdd2 .elementor-heading-title { font-size: calc(0.9vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-c633d4a .elementor-heading-title { font-size: calc(1.88vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-0370b9b .elementor-heading-title { font-size: calc(0.95vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-4016148 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-30fb9cf .elementor-button { font-size: calc(1.23vw * var(--a11y-scale-form)) !important; } /* ---- max-width:1024px (source order: BEFORE the 767 block) ------------- */ @media (max-width: 1024px) { html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a08ead0 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c8a07c8 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-4016148 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-30fb9cf .elementor-button { font-size: calc(2.4vw * var(--a11y-scale-form)) !important; } } /* ---- max-width:767px ---------------------------------------------------- */ @media (max-width: 767px) { /* post-2.css */ html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f5c5423 .elementor-heading-title { font-size: calc(27vw * var(--a11y-scale-disp)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-926a5c6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-8ec5bc9 .elementor-heading-title { font-size: calc(14vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c76f00a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-482ea85 .elementor-heading-title { font-size: calc(4.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-0222142 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-2f7baac .elementor-heading-title { font-size: calc(5.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-43802b6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-16e9eb9 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c9974e6 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ad4b942 .elementor-heading-title { font-size: calc(6.2vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-5eb5f0c .elementor-heading-title { font-size: calc(9vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c05cbb4 .elementor-heading-title { font-size: calc(4vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a08ead0 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-c8a07c8 .elementor-button { font-size: calc(4.6vw * var(--a11y-scale-form)) !important; } /* post-352.css */ html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-3a1805f .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-0755718 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-2b25d2d .elementor-heading-title { font-size: calc(27vw * var(--a11y-scale-disp)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-f9fc0a7 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-133d2dd .elementor-heading-title { font-size: calc(11vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-a6a9dc9 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-e327044 .elementor-heading-title { font-size: calc(4.8vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-ace7b11 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-792423d .elementor-heading-title { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-486e333 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-d9710b1 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-5465b64 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-12d3770 .elementor-heading-title { font-size: calc(6.2vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-09b809a .elementor-heading-title { font-size: calc(9vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-0370b9b .elementor-heading-title { font-size: calc(4vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-4016148 .elementor-button, html body[class*="pojo-a11y-resize-font-"] .elementor-352 .elementor-element.elementor-element-30fb9cf .elementor-button { font-size: calc(4.6vw * var(--a11y-scale-form)) !important; } /* --- theme mobile values (assets/css/responsive.css) ----------------- */ html body[class*="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="text"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="email"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="url"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 textarea, html body[class*="pojo-a11y-resize-font-"] .wpcf7-select, html body[class*="pojo-a11y-resize-font-"] select { font-size: calc(18px * var(--a11y-scale-form)) !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; } html body[class*="pojo-a11y-resize-font-"] .field-col input, html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="text"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="email"], html body[class*="pojo-a11y-resize-font-"] .wpcf7 input[type="url"], 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 { line-height: calc(26px * var(--a11y-scale-form)) !important; padding-top: calc(8px * var(--a11y-scale-form)) !important; padding-bottom: calc(8px * var(--a11y-scale-form)) !important; padding-right: calc(16px * var(--a11y-scale-form)) !important; padding-left: calc(16px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .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.sent .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; padding: calc(6px * var(--a11y-scale-form)) calc(8px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip.wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-not-valid-tip.wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-tip)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, 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; max-width: 100% !important; } html body[class*="pojo-a11y-resize-font-"] .form-bottom-text.form-bottom-text { font-size: calc(13px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-links.privacy-links :is(a, span, p) { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-success-message .success-title, html body[class*="pojo-a11y-resize-font-"] .cf7-success-message .success-subtitle { font-size: calc(20px * var(--a11y-scale)) !important; } 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 :is(p, li, a, span) { font-size: calc(13px * var(--a11y-scale)) !important; } } /* ========================================================================== SECTION 6 - Accessibility toolbar menu items Requested: while font-resize is active the a11y menu text should stay a bit smaller than the rest of the page. Plugin-only it goes 12.8px -> 25.6px; here it follows the gentler --a11y-scale-tb curve (12.8px -> 17.3px at 200). This is the ONLY rule in this file that touches #pojo-a11y-toolbar - every generic rule above is scoped inside a content root so nothing else leaks in. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a .pojo-a11y-toolbar-text { font-size: calc(12.8px * var(--a11y-scale-tb)) !important; line-height: 1.3 !important; } /* ========================================================================== SECTION 7 - Consent checkbox tick in the contrast / colour modes The tick is a filled block drawn with `background-color` on input[type=checkbox]:checked::before. The plugin repaints `input` in every contrast mode (measured: the box background becomes #000 even in Light background mode, so an UNCHECKED box reads as a filled one and the tick has no reliable contrast). These rules re-establish box / border / tick colours per mode and pin the tick geometry so it always sits inside the box. Gated on the pojo contrast classes only - no mode selected, no effect. ========================================================================== */ /* Geometry - identical in every mode, immune to the font-size explosion. */ html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before, html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before, html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before, html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: 60% !important; height: 60% !important; border: 0 !important; border-radius: 2px !important; box-sizing: border-box !important; font-size: 0 !important; line-height: 0 !important; } /* Light background - white box, black border, black tick. */ html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked { background: #fff !important; background-color: #fff !important; border: 1px solid #000 !important; } html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before { background: #000 !important; background-color: #000 !important; } /* High contrast - black box, white border, white tick. */ html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked { background: #000 !important; background-color: #000 !important; border: 1px solid #fff !important; } html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { background: #fff !important; background-color: #fff !important; } /* Negative contrast - same treatment. */ html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked { background: #000 !important; background-color: #000 !important; border: 1px solid #fff !important; } html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { background: #fff !important; background-color: #fff !important; } /* Grayscale - the page keeps its own colours under a grayscale() filter, so the design's transparent box / white tick is kept and made explicit. */ html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked { background: transparent !important; background-color: transparent !important; border: 1px solid #fff !important; } html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { background: #fff !important; background-color: #fff !important; }