is not in the plugin selector list, so this message never moved at any step (measured 12.96px at every step, with a 9px line-height). READABILITY FLOOR: the theme sizes it at 0.9vw with no tablet override, which renders ~8px at a 900px viewport - the floor fixes that too. The floor is gated, so the default render is untouched. */ html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; height: auto !important; } /* 4.3 - validation tips. Position is `relative` on this theme (no fixed px anchor anywhere, desktop or mobile), so no re-anchoring is needed - see Section 4d. REQUIREMENT: the tip must stay on ONE line at every step. `white-space: nowrap` on its own would simply run off the page, so the tip is also capped against the width of the FORM. The longest Hebrew CF7 message measures 14.65px of width for every 1px of font-size, so a tip whose font stays under formWidth/14.65 can never need a second line. The cap is expressed in vw because .form-order tracks the viewport at every breakpoint - measured widths: 22.5vw at >=1025, 31vw at 768-1024 (the theme sets .form-order to width:100% there), ~90vw below 768. Dividing each by 14.65 gives the caps below. Container query units were tried first and rejected: a field column is only ~156px wide, so anchoring the cap to .wpcf7-form-control-wrap drove the tip below its own theme size (stuck at 10.1px at every step) and inline-size containment collapsed the consent wrap to 26px; moving the container up to .form-order shrank the whole form, because .form is a flex item sized from its contents. */ html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .wpcf7-not-valid-tip { display: block !important; position: relative !important; white-space: nowrap !important; overflow: visible !important; line-height: 1.45 !important; font-size: min(calc(max(14px, 0.7vw) * var(--a11y-scale-form)), 1.45vw) !important; } /* 4.4 - checkbox / consent label. On mobile the theme pins this with !important at a higher specificity than the plugin, so it was frozen at 12px; on desktop it ran away to 2048px. Both are handled by Section 3 plus these pins. */ /* READABILITY FLOOR: the theme sizes the consent label and the small print at 0.6vw / 0.8vw, i.e. 8.6px - 11.5px at 1440 and under 8px on a 900px tablet. Gated, so the default render keeps the theme values exactly. */ html body[class*="pojo-a11y-resize-font-"][class*="template-new-home"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"]:not([class*="template-new-home"]) .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.56 !important; } html body[class*="pojo-a11y-resize-font-"][class*="template-new-home"] .form-bottom-text { font-size: calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"]:not([class*="template-new-home"]) .form-bottom-text { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.56 !important; } /* 4.5 - clearance under the consent row. `.bottom-blac-inte-wrap` (the privacy / accessibility links) is pulled up by `margin-top: -1vh`. That is harmless at the default size because the form logo is taller than the consent text and holds the row open, but once the text grows past the logo the text becomes the tallest thing in the row and the pulled-up links land on top of it. Measured at 1366x700, consent text bottom -> links top: step 0 +13px step 130 -7px step 150 -7px step 200 -7px i.e. a 7px overlap at every step above the first. Restoring the clearance on the consent row itself, on the form curve, keeps it positive and roughly constant: +13 / +11 / +13. Scoped above 767px on purpose - below that `.bottom-blac-inte-wrap` has no negative pull (`margin: 0 0 30px`) and the row wraps so the logo sits under the text, leaving 150px of clearance at every step. */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .checkbox-group { margin-bottom: calc(14px * var(--a11y-scale-form)) !important; } } /* ===================================================================== SECTION 4b - elements that carry an intentional size of their own ===================================================================== */ /* SUBMIT ARROW drifting off centre once validation fires. The arrow is `position: absolute; top: 50%; transform: translateY(-50%)` and its containing block is `.submit-btn > p`, which the theme gives `height: 100%`. That paragraph therefore stretches to the column, the column stretches to the flex row, and the row grows the moment a sibling field shows its .wpcf7-not-valid-tip - so 50% stops being the middle of the button. Measured at 1366px, arrow centre vs button centre: step 0 0px clean -> 5px after validation step 130 0px clean -> 13px after validation step 200 0px clean -> 14px after validation Letting the paragraph hug the button restores 50% to the button's middle: measured 0px at every step, before and after validation, with the paragraph height then matching the button exactly (47/47, 63/63). *** THIS IS THE ONE DELIBERATE EXCEPTION TO RULE A. *** It is intentionally UNGATED, because the drift is there at the default font size too - a real click with no accessibility option selected still puts the arrow 5px below centre on a 30px button. Gating it left the bug in place for everyone who has not opened the toolbar, which is most visitors. The blast radius was measured on the live page in the invalid state: of 411 elements, exactly TWO change - the submit paragraph (41px -> 30px, and it is the last thing in its column, so nothing below it shifts) and the arrow itself (up 5px, onto the button's centre). Nothing else on the page moves. `height: 100%` on that paragraph serves no layout purpose: the button's height comes from `.submit-btn input`, not from its wrapper. The equivalent one-line change at source is `.submit-btn > p` in new-style.css, which is outside this task's two-file scope. */ html body .submit-btn > p { height: auto !important; } html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .slick-arrow > i { font-size: calc(3vw * var(--a11y-scale)) !important; } /* NOTE - deliberately NO layout overrides here. An earlier build set `.main-wrapper .slider-wrapper { width: 64% }` and `min-width: 0` on the flex children to chase 22px of horizontal scroll at 820px. That was wrong: min-width:auto is the min-content floor that stops a flex item from being squeezed, and removing it let the default flex-shrink collapse the slider as the text grew. Measured at 1366px: slider 874px at step 0 but 283px at step 130 and 228px at step 200, with the content column ballooning from 477px to 1123px. With those rules gone the split holds at 874 / 477 at EVERY step. The column widths are vw-based and must not be touched - the 22px is reported instead. */ html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .price-wrapper .price-col .price-content .main-price { line-height: 1.25 !important; } /* is not in the plugin selector list either: these were frozen at every step before Section 3 made them inherit. Sizes restated below. */ html body[class*="pojo-a11y-resize-font-"][class*="template-new-home"] .pv-link, html body[class*="pojo-a11y-resize-font-"][class*="template-new-home"] .pv-links > span { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.15 !important; } html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .bottom-small-text, html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .success-subtitle { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"][class*="wp-theme-"] .success-title { font-size: calc(max(20px, 1.5vw) * var(--a11y-scale)) !important; line-height: 1.25 !important; } /* ===================================================================== SECTION 4c - cookie consent banner (#cc-banner-root) The banner is a direct child of , OUTSIDE every content root, so the Section 3 inherit fix cannot reach it. Left alone, .cc-title (an

) and .cc-body (a
) ran away on the plugin percentages while .cc-btn (font: inherit) and .cc-root froze at 14px. Generic inherit rule first, then explicit pins; each pin is a calc() so nothing freezes, and each gets both a bare and a .cc-root scoped selector. .cc-title and .cc-btn use the FORM curve with bumped baselines (16 -> 18, 14 -> 15) so click 1 is a visible jump. Specificity note: `.cc-root .cc-body` (class column 2) beats `.cc-root p` (class column 1), so the pins below win over the generic rule. ===================================================================== / html body[class="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, a, div, button) { 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; } html body[class="pojo-a11y-resize-font-"] .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, 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, html body[class="pojo-a11y-resize-font-"] .cc-root .cc-btn, html body[class="pojo-a11y-resize-font-"] .cc-modal .cc-btn { font-size: calc(15px var(--a11y-scale-form)) !important; line-height: 1.4 !important; height: auto !important; } html body[class="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text, 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, 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; height: auto !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, 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-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-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-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.5 !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-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 { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* ===================================================================== SECTION 4d - tip positioning Audited on this theme at 375 and 1440, for the consent checkbox row and a plain text field, at steps none / 130 / 200: position: relative, top: auto, bottom: auto, white-space: normal No tip is taken out of flow and no tip carries a fixed px anchor, so there is nothing to re-anchor and no measured overlap or spill. The row grows with the tip on its own. Section 4.3 handles the sizing and the one-line requirement. Nothing to emit here; documented so the audit is on record. ===================================================================== / / ===================================================================== SECTION 5 - every themed font-size, gated and multiplied Emitted in the theme source order: BASE, then @1920, then @1024, then @767, then @380 - so the overlapping bands resolve by order, exactly the way the theme resolves them. 5A = the value is identical in both stylesheet sets 5B = New-Landing only (new-style.css / new-responsive.css) 5C = Landing + Privacy + the rest (style.css / responsive.css) ===================================================================== / / ---------- 5A BASE ---------- / html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .main-title-wrapper .title { font-size: calc(4vw var(--a11y-scale)) !important; line-height: 1.25 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .main-title { font-size: calc(2.4vw * var(--a11y-scale)) !important; line-height: 1.17 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .subtitle { font-size: calc(max(16px, 1.75vw) * var(--a11y-scale)) !important; line-height: 1.15 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .inner-content-wrapper .title.desc-title { font-size: calc(max(16px, 1.5vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .icon-title .title { font-size: calc(max(14px, 1.3vw) * var(--a11y-scale)) !important; line-height: 1.44 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .icon-title .title .highlighted-text { font-size: calc(max(16px, 1.6vw) * var(--a11y-scale)) !important; line-height: 1.37 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .img-notice { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .privacy-banner h1 { font-size: calc(50px * var(--a11y-scale)) !important; line-height: 1.15 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .breadcrumbs li, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .breadcrumbs li a, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .breadcrumbs li span { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.15 !important; } /* ---------- 5B BASE (New-Landing) ---------- / html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .location { font-size: calc(max(17px, 1.8vw) var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .location > span { font-size: calc(max(16px, 1.6vw) * var(--a11y-scale)) !important; line-height: 1.15 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-desc { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .icon-list .item .desc { font-size: calc(max(13px, 0.7vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-form-title { font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .price-wrapper .price-col .price-content { font-size: calc(max(14px, 1.3vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .price-wrapper .price-col .price-content .main-price { font-size: calc(max(16px, 1.5vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .price-replacement-text { font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-option, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-title { font-size: calc(5vw * var(--a11y-scale)) !important; line-height: 1.1 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .separator { font-size: calc(max(17px, 2vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-detail-1 { font-size: calc(max(17px, 2vw) * var(--a11y-scale)) !important; line-height: 1.41 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-detail-2 { font-size: calc(max(14px, 1.3vw) * var(--a11y-scale)) !important; line-height: 1.8 !important; } /* the theme writes these three with :where() - (0,2,0) - restate explicitly / html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li a { font-size: calc(max(13px, 0.7vw) var(--a11y-scale)) !important; line-height: 1.79 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.16 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content h3 { font-size: calc(max(15px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.36 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content p, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content li, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content a, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content div { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.88 !important; } /* ---------- 5C BASE (Landing / Privacy / everything else) ---------- / html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .location { font-size: calc(max(16px, 1.5vw) var(--a11y-scale)) !important; line-height: 1.46 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .main-desc { font-size: calc(max(13px, 0.92vw) * var(--a11y-scale)) !important; line-height: 1.83 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .icon-list .item .desc { font-size: calc(max(13px, 0.92vw) * var(--a11y-scale)) !important; line-height: 1.63 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .main-form-title { font-size: calc(max(15px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.7 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .price-wrapper .price-col .price-content { font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; line-height: 1.56 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .price-wrapper .price-col .price-content .main-price { font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .in-privacy-ytr-wrap li, html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .in-privacy-ytr-wrap li a { font-size: calc(max(13px, 0.9vw) * var(--a11y-scale)) !important; line-height: 1.39 !important; } /* ---------- @media (max-width: 1920px) - New-Landing only ---------- / @media (max-width: 1920px) { html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-desc { font-size: calc(max(13px, 0.9vw) var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .location { font-size: calc(max(17px, 2vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-form-title { font-size: calc(max(15px, 1.1vw) * var(--a11y-scale)) !important; } } /* ---------- @media (max-width: 1024px) - New-Landing only ---------- / @media (max-width: 1024px) { html body[class="pojo-a11y-resize-font-"][class="template-new-home"] { --a11y-ctl-h: calc((1.3vw 1.4 + 2.5vw) * var(--a11y-scale-form)); } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .field-col label .wpcf7-form-control-wrap, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .field-col input, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .wpcf7-select { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .submit-btn input { font-size: calc(max(14px, 1.3vw) * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .form-bottom-text { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .icon-list .item .desc { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li a { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 2 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-form-title { line-height: 1.4 !important; } /* .form-order goes to width:100% in this band - measured 31vw / html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .wpcf7-not-valid-tip { font-size: min(calc(max(14px, 0.7vw) var(--a11y-scale-form)), 2vw) !important; } } /* ---------- @media (max-width: 767px) ---------- / @media (max-width: 767px) { / One shared control height for both stylesheet sets on mobile. Both gates are restated so this matches the (0,2,2) specificity of the BASE --a11y-ctl-h declarations: a custom property set at (0,1,2) here would lose to them no matter which media block it sits in. / html body[class="pojo-a11y-resize-font-"][class="template-new-home"], html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) { --a11y-ctl-h: calc((22px 1.4 + 12px) * var(--a11y-scale-form)); } /* --- 5A --- / html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .field-col label .wpcf7-form-control-wrap, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .field-col input, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .wpcf7-select { font-size: calc(16px var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .submit-btn input { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .wpcf7-response-output, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 3.5vw) * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } /* the form is full width here - measured ~90vw / html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .wpcf7-not-valid-tip { font-size: min(calc(14px var(--a11y-scale-form)), 5.9vw) !important; line-height: 1.45 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .detail-mob a, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .phone-mob a { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .main-title-wrapper .title { font-size: calc(14vw * var(--a11y-scale)) !important; line-height: 1.05 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .main-title { font-size: calc(8.4vw * var(--a11y-scale)) !important; line-height: 1.05 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .subtitle { font-size: calc(6.2vw * var(--a11y-scale)) !important; line-height: 1.05 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .img-notice { font-size: calc(3vw * var(--a11y-scale)) !important; line-height: 1.8 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .price-wrapper .price-col .price-content .main-price { font-size: calc(6vw * var(--a11y-scale)) !important; line-height: 1.15 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .inner-content-wrapper .title.desc-title { font-size: calc(22px * var(--a11y-scale)) !important; line-height: 1.18 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .icon-title .title, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .icon-title .title .highlighted-text { font-size: calc(22px * var(--a11y-scale)) !important; line-height: 1.18 !important; } html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .slick-arrow > i { font-size: calc(28px * var(--a11y-scale)) !important; } /* --- 5B (New-Landing) --- / html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .form-order form p, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .form-order form .wpcf7-list-item-label { font-size: calc(12px var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .location { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .location > span { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-desc { font-size: calc(15px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .price-wrapper .price-col .price-content { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.22 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .icon-list .item .desc { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .main-form-title { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .in-privacy-ytr-wrap li a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-title { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.19 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-detail-1 { font-size: calc(23px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pricing-detail-2 { font-size: calc(17px * var(--a11y-scale)) !important; line-height: 1.76 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .separator { font-size: calc(34px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.22 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content h3 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.38 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content p, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content li, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .privacy-wrapper .privacy-content a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.67 !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pv-link, html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .pv-links > span { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class="template-new-home"] .price-replacement-text { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* --- 5C (Landing / Privacy / everything else) --- / html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .form-order form p, html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .form-order form .wpcf7-list-item-label { font-size: calc(13px var(--a11y-scale-form)) !important; line-height: 1.38 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(13px * var(--a11y-scale-form)) !important; line-height: 1.38 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .location { font-size: calc(6.4vw * var(--a11y-scale)) !important; line-height: 1.18 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .main-desc { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .icon-list .item .desc { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.38 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .main-form-title { font-size: calc(22px * var(--a11y-scale)) !important; line-height: 1.18 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .price-wrapper .price-col .price-content { font-size: calc(4.5vw * var(--a11y-scale)) !important; line-height: 1.44 !important; } html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .in-privacy-ytr-wrap li, html body[class="pojo-a11y-resize-font-"]:not([class="template-new-home"]) .in-privacy-ytr-wrap li a { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.15 !important; } } /* ---------- @media (max-width: 380px) ---------- / @media (max-width: 380px) { html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .detail-mob a, html body[class="pojo-a11y-resize-font-"][class="wp-theme-"] .phone-mob a { font-size: calc(14px var(--a11y-scale)) !important; line-height: 1.4 !important; } } /* ===================================================================== SECTION 6 - the OTHER toolbar modes (contrast / greyscale) --------------------------------------------------------------------- Not font-resize. Both fixes below repair rules that live in assets/css/new-style.css, which is outside this task's two-file scope, so they are overridden from here instead. Each one is gated on the mode's own body class, so with nothing selected the page is still untouched. ===================================================================== / / 6a - DOUBLE BORDER on the contact form controls. THE ACTUAL CAUSE is the placeholder, handled in 6a-2 below; 6a-1 is defensive hardening. 6a-1 - native widget chrome. The contrast rules force `border: 1px solid #000 !important` onto controls that still compute `appearance: auto` (text/tel/email) and `appearance: button` (submit). Engines that keep painting native chrome under an author border draw a second rectangle. Measured: resetting appearance leaves geometry byte-identical (148x17 / 18x11 before and after), so this costs nothing. The checkbox never doubled - the theme already resets its appearance. / html body.pojo-a11y-light-background .field-col input, html body.pojo-a11y-light-background .field-col textarea, html body.pojo-a11y-light-background .field-col select, html body.pojo-a11y-light-background .wpcf7-select, html body.pojo-a11y-light-background .submit-btn input, html body.pojo-a11y-light-background .wpcf7-submit, html body.pojo-a11y-light-background .wpcf7-form-control, html body.pojo-a11y-high-contrast .field-col input, html body.pojo-a11y-high-contrast .field-col textarea, html body.pojo-a11y-high-contrast .field-col select, html body.pojo-a11y-high-contrast .wpcf7-select, html body.pojo-a11y-high-contrast .submit-btn input, html body.pojo-a11y-high-contrast .wpcf7-submit, html body.pojo-a11y-high-contrast .wpcf7-form-control, html body.pojo-a11y-negative-contrast .field-col input, html body.pojo-a11y-negative-contrast .field-col textarea, html body.pojo-a11y-negative-contrast .field-col select, html body.pojo-a11y-negative-contrast .wpcf7-select, html body.pojo-a11y-negative-contrast .submit-btn input, html body.pojo-a11y-negative-contrast .wpcf7-submit, html body.pojo-a11y-negative-contrast .wpcf7-form-control, html body.pojo-a11y-grayscale .field-col input, html body.pojo-a11y-grayscale .field-col textarea, html body.pojo-a11y-grayscale .field-col select, html body.pojo-a11y-grayscale .wpcf7-select, html body.pojo-a11y-grayscale .submit-btn input, html body.pojo-a11y-grayscale .wpcf7-submit, html body.pojo-a11y-grayscale .wpcf7-form-control { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-clip: border-box !important; box-shadow: none !important; } / the checkbox keeps its own custom tick, so only normalise its outline / html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"] { box-shadow: none !important; } / 6a-2 - THE DUAL BORDER. new-style.css groups the placeholder into the same block as the controls: body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(...) :where(input, textarea, select), body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(...) input::placeholder { background: transparent !important; border: 1px solid #000 !important; color: #000 !important; } The intent was `color: #000` on the placeholder, but it also lands `border: 1px solid #000` on it. Blink and WebKit paint a border on the ::placeholder box; Gecko drops it. So Chrome/Edge/Safari draw a second rectangle around the placeholder text, inset by the input's padding, inside the input's own border - and Firefox shows one. That is exactly the "dual borders in some browsers, one border in others" report. Measured on the live page: getComputedStyle(input, '::placeholder') border-width goes 0px -> 1px the moment light-background is switched on. The theme selector carries an ID inside :not(), so it computes to (1,2,3). The overrides below mirror it with `html` prepended, giving (1,2,4), which is the minimum that can win. Only the border is reset - the black placeholder colour the rule was actually written for is left alone. / html body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, html body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder, html body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, html body.pojo-a11y-high-contrast :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder, html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, html body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder, html body.pojo-a11y-grayscale :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, html body.pojo-a11y-grayscale :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } / 6b - GREYSCALE broke the sticky slider (white band under it). `body.pojo-a11y-grayscale { overflow-x: hidden }` is the cause. Per spec, overflow-x:hidden forces overflow-y to compute to `auto`, which turns into a scroll container - so `position: sticky` on .slider-wrapper started resolving against BODY's scrollport instead of the viewport, and body's scrollport never scrolls. Measured at 1366x400 after scrolling 248px: slider top 0px in none / high-contrast / negative-contrast, but -248px in greyscale, i.e. it scrolled away and left the gap. Isolated: removing the html filter alone does NOT fix it; changing the body overflow does. `clip` keeps the horizontal clipping the original rule wanted while leaving overflow-y visible, so body never becomes a scroll container. The `visible` pair above it is the fallback for engines without `overflow: clip` - they lose the clipping but keep a working sticky. Measured horizontal overflow is 0 either way. */ html body.pojo-a11y-grayscale { overflow-x: visible !important; overflow-y: visible !important; overflow-x: clip !important; }

and an