, plugin cannot reach it) swiper arrows 153.6px -> 153.6px (vw ignores body font-size) .cc-title 16px -> 37.24px (banner sits outside the content root) .cc-root/.cc-btn 14px -> 14px (frozen) EVERY rule below is gated behind body[class*="pojo-a11y-resize-font-"] (or, for the contrast-mode block, behind the matching contrast class), so with nothing selected - and again after Reset - this file contributes zero computed differences. ========================================================================== */ /* ========================================================================== SECTION 1 - STEP -> MULTIPLIERS Three curves: --a11y-scale body text, headings, lists, links step1 +15% .. +60% --a11y-scale-form inputs, submit, messages, checkbox labels, cookie title/body/buttons step1 +30% .. +75% --a11y-scale-tb the accessibility toolbar itself step1 +8% .. +28% (deliberately gentler - requested) ========================================================================== */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-tb: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-tb: 1.08; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-tb: 1.11; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-tb: 1.14; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-tb: 1.17; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-tb: 1.20; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-tb: 1.23; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-tb: 1.26; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-tb: 1.28; } /* ========================================================================== SECTION 2 - BASE PIN Measured body baseline on this theme is 18px (assets/css/style.css), not 16. Left unscoped on on purpose: the toolbar carries its own font-size (0.9vw / 14px) so it is unaffected, and calc() keeps every em-based popup inside the toolbar alive. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.45 !important; } /* ========================================================================== SECTION 3 - KILL THE COMPOUNDING PERCENTAGES Content roots on this site: .description-section - page.php / 404.php wrapper (EVERY page has it) .elementor - nests inside .description-section on the LP The toolbar (#pojo-a11y-toolbar) and the cookie banner (#cc-banner-root) are BODY SIBLINGS of these roots and are handled separately, so the toolbar keeps behaving exactly as the plugin always made it. input / select / textarea are excluded - Section 4 sizes them. ========================================================================== */ 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 a, html body[class*="pojo-a11y-resize-font-"] .description-section blockquote, html body[class*="pojo-a11y-resize-font-"] .description-section legend, html body[class*="pojo-a11y-resize-font-"] .description-section code, html body[class*="pojo-a11y-resize-font-"] .description-section pre, html body[class*="pojo-a11y-resize-font-"] .description-section dd, html body[class*="pojo-a11y-resize-font-"] .description-section dt, html body[class*="pojo-a11y-resize-font-"] .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 a, 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 { font-size: inherit !important; } /* The plugin's "h_ span" rule stacks 133% on top of an already-scaled heading. */ html body[class*="pojo-a11y-resize-font-"] .description-section h1 span, html body[class*="pojo-a11y-resize-font-"] .description-section h2 span, html body[class*="pojo-a11y-resize-font-"] .description-section h3 span, html body[class*="pojo-a11y-resize-font-"] .description-section h4 span, html body[class*="pojo-a11y-resize-font-"] .description-section h5 span, html body[class*="pojo-a11y-resize-font-"] .description-section h6 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h5 span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h6 span { font-size: inherit !important; } /* ========================================================================== SECTION 4 - FORM CONTROLS + MESSAGES (--a11y-scale-form) Values mirror assets/css/style.css 1:1, then assets/css/responsive.css inside the SAME media block (Section 8) and in the SAME source order. px / vw only - never em (CF7's p > span > span nesting compounds it) and never rem (would shrink below the design size on wide screens). READABILITY FLOOR - this theme sizes the whole form in vw with no tablet band, so at 900px wide (plugin OFF) the inputs render at 7.65px, the messages at 8.1px and the consent label at 6.3px. calc(max(, ) * scale) keeps them legible at every step. It is inside the gate, so the untouched default render is preserved exactly. ========================================================================== */ /* -- text inputs ------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] textarea, html body[class*="pojo-a11y-resize-font-"] select { font-size: calc(max(14px, 0.85vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; min-height: calc(4.6vh * var(--a11y-scale-form)) !important; padding-right: calc(3vw * var(--a11y-scale-form)) !important; } /* -- submit ------------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] input.wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn, html body[class*="pojo-a11y-resize-font-"] .global-btn { font-size: calc(max(16px, 1.2vw) * var(--a11y-scale-form)) !important; line-height: 1.3 !important; padding: calc(1.3vh * var(--a11y-scale-form)) calc(0.8vw * var(--a11y-scale-form)) !important; } /* -- CF7 response output (a

- the plugin can never reach it) ------ */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* -- CF7 validation tips ------------------------------------------------ Audited on this site at 375 / 900 / 1440 and at steps none/130/160/200: every tip computes position:static (plain fields) or position:relative with top:0 (.check-col). Both stay in flow, so overlap and spill are <= 0 at every step and no positional repair is required. Size + unitless line-height only. See Section 4d. ------------------------------------- */ /* The tip is a inside .elementor, so the bare selector (0,2,2) would LOSE to Section 3's `.elementor span` (0,2,3) and be flattened to the body size. The .wpcf7 qualifier lifts it to (0,3,2), which wins on the class column. The bare selector is kept for tips rendered outside .wpcf7. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; white-space: normal !important; } /* -- the wrap span must not hold a vh line-height around a grown input -- */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap { line-height: 1.4 !important; } /* ========================================================================== SECTION 4a - FORM LAYOUT WHILE A STEP IS ACTIVE At rest the three fields sit side by side at 32.6% each, and the consent row shares one line with the submit button while the consent text is capped at max-width:16vw. Measured at step 200 / 1920px that left the text in a 307px column wrapping to 4 lines (132px tall) with the checkbox stranded at the top, because the theme pins it position:absolute; top:0. Requested: full-width name / phone / mail fields, a full-width consent field, and the checkbox aligned to its text the way it reads by default. The result is the stacked layout the theme already uses below 767px. The checkbox is switched to position:RELATIVE, never `static`. Static takes it out of being a containing block, and the theme's `:checked::before` tick is position:absolute - it would then resolve its 60% against the instead and paint a 337x59px white slab across the consent text (observed). Relative keeps it in normal flow for the flex row AND keeps the tick anchored. Box sizing is em-based off the checkbox's own pinned font-size, so it holds the default's box-to-text ratio (default: 25px box / 13.44px text = 1.8em) at every step. Never em off an inherited size here - the plugin's percentage would compound through the p > span > span > span nesting. ========================================================================== */ /* name / phone / mail each take the full row */ html body[class*="pojo-a11y-resize-font-"] .contactUs .form-field-col, html body[class*="pojo-a11y-resize-font-"] .form-field-col.col-md-4, html body[class*="pojo-a11y-resize-font-"] .form-field-col.col-12 { max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; } /* consent field and submit button each take the full row. The submit MUST be full width, not 32.6%: it is an , and an input never shrink-wraps its own value - `width:auto` sizes from the `size` attribute and `min-width:max-content` is ignored on form controls in Chrome (both measured: the button stayed 265.9px). At 32.6% the label text needs 252.1px in a 183.4px button at step 160 (+68.8px) and 356.8px at step 200 (+173.4px), and an input clips rather than wraps - which is the cut-off text. Full width gives 205-310px of headroom at every step and viewport. */ html body[class*="pojo-a11y-resize-font-"] .checkbox-group { flex-wrap: wrap !important; row-gap: calc(10px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .checkbox-group > .check-col, html body[class*="pojo-a11y-resize-font-"] .checkbox-group > .submit-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-right: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] input.wpcf7-submit { width: 100% !important; max-width: 100% !important; } /* theme caps this at 16vw, which is what forced the tall narrow column */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label { max-width: 100% !important; } /* checkbox back in flow, on the first line of its own text */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox label { align-items: flex-start !important; padding-right: 0 !important; gap: calc(8px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { font-size: calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important; position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; flex: 0 0 auto !important; align-self: flex-start !important; min-width: 1.8em !important; width: 1.8em !important; height: 1.8em !important; /* Reproduces the DEFAULT box-to-first-line relationship, measured on the untouched layout at 1920 (label 13.44px, box 25x24.4): box top = +0.149em below the first line's ink top box centre = +0.313em below the first line's centre `calc((1.4em - 1.8em)/2)` (= -0.2em) centred the box on the line BOX instead, which put it at -0.115em - i.e. overhanging ABOVE the first line, which is what looked wrong. 0.07em lands on the default: step 130 top +0.126em centre +0.309em step 200 top +0.153em centre +0.310em (default 0.149 / 0.313) */ margin-top: 0.07em !important; } /* tick as a share of the box, so it tracks the scaled box instead of the theme's fixed 0.8vw x 1.2vh */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::before { width: 60% !important; height: 60% !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* ========================================================================== SECTION 4b - ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN Section 3 would flatten these to the body size. Restated explicitly - including every selector the theme wrote with :where(), which has ZERO specificity and would otherwise lose to Section 3. ========================================================================== */ /* floating field labels */ html body[class*="pojo-a11y-resize-font-"] .form-field-col > p > span:first-child { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-form)) !important; } /* consent checkbox label - source of the 2048px runaway */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label { font-size: calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* form heading above the fields (theme .main-form-title) */ html body[class*="pojo-a11y-resize-font-"] .description-section .main-form-title, html body[class*="pojo-a11y-resize-font-"] .elementor .main-form-title, html body[class*="pojo-a11y-resize-font-"] .main-form-title { font-size: calc(max(14px, 0.93vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } /* privacy modal - theme writes these with :where(), specificity (0,2,0) */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(1.4vw * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } /* ========================================================================== SECTION 4c - COOKIE BANNER (#cc-banner-root, a BODY SIBLING) Section 3 cannot reach it, so the plugin's p / h_ rules run .cc-body and .cc-title away (14 -> 28px, 16 -> 37.24px) while .cc-btn (font-size:inherit in its own stylesheet) and .cc-root stay frozen at 14px. Generic inherit-rule first, then explicit pins - each pin is given both a bare and a .cc-root-scoped selector so it wins in the banner AND in the settings modal. Specificity note: the scoped pins are (0,3,2) and beat the generic inherit rule at (0,2,3) on the class column. EVERY pin is calc(px * scale) - a flat px would stop the runaway but freeze the banner, so clicking "increase" would do nothing. ========================================================================== */ 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-root h1, html body[class*="pojo-a11y-resize-font-"] .cc-root h2, html body[class*="pojo-a11y-resize-font-"] .cc-root h3, html body[class*="pojo-a11y-resize-font-"] .cc-root h4, html body[class*="pojo-a11y-resize-font-"] .cc-root h5, html body[class*="pojo-a11y-resize-font-"] .cc-root h6 { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; } /* baseline bumped 16 -> 18 so the very first click is a visible jump */ 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; } /* baseline bumped 14 -> 15; .cc-btn's own rule is font-size:inherit */ 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-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.3 !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; } 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-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; } 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 - VALIDATION-TIP POSITIONING NOT REQUIRED on this site. Audited at 375 / 900 / 1440 and at every step: .wpcf7-not-valid-tip computes position:static on the name/phone/email rows and position:relative / top:0 inside .check-col. Both remain in flow, so a growing consent label pushes the tip down instead of being drawn over by it - measured overlap stays negative (clearance) at every step, and spill stays <= 0. There is no fixed-px absolute anchor to repair here, and position:static is deliberately NOT forced (the tip lives inside .wpcf7-form-control-wrap). Section 4 handles size + line-height. ========================================================================== */ /* ========================================================================== SECTION 5 - PER-ELEMENT RULES FROM post-*.css (--a11y-scale) Extracted from post-2.css (page 2, the LP) and post-205.css (Elementor popup 205). post-3.css (the kit) declares no font-size at all. Emitted at base, then again inside the source's own @media band (Section 8). ========================================================================== */ /* post-2.css :: base :: 0.8vw - the only heading widget on the LP. Floor raised to 13px: this rule has no mobile override, so plugin-OFF it renders at 3px on a 375px screen (pre-existing bug, left untouched at rest). */ html body[class*="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-5a6e0a3 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-heading-title { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } /* post-2.css :: base :: 8vw and @max-767 :: 38px - the carousel arrows are DELIBERATELY NOT SCALED (requested). They are decorative navigation glyphs already rendered at 153.6px on a 1920px screen; enlarging them covered the slide image. Left at their natural vw / px size, which is also exactly what the plugin did on its own (a vw value ignores body font-size). */ /* The Elementor popup close button (.dialog-close-button, theme style.css 3.4vw !important, post-205.css 3.4rem) is DELIBERATELY NOT SCALED (requested). It is the X on the area-map lightbox, already ~65px on a 1920px screen; enlarging it pushed it over the map artwork. Left at its natural vw size - which is also what the plugin did on its own. */ /* The theme-template root (page.php / 404.php) carries no Elementor typography, so its headings fall through to Bootstrap 5 RTL. Mirrored exactly - fluid band below 1200px, fixed band at and above it (verified against 375 / 900 / 1199 / 1440). */ html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h5, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h6, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h6 { font-size: calc(1rem * var(--a11y-scale)) !important; } @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2 { font-size: calc(2rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; } } /* 404.php prints an inline style="font-size:30px" on its h3 - preserved. */ html body[class*="pojo-a11y-resize-font-"] .error-content .text-wraper h3 { font-size: calc(30px * var(--a11y-scale)) !important; } /* ========================================================================== SECTION 6 - ACCESSIBILITY TOOLBAR (--a11y-scale-tb) Requested behaviour: the toolbar's own menu items must grow LESS than page content. Plugin-only they do the opposite - #pojo-a11y-toolbar is pinned by the theme to 0.9vw / 14px so the labels never move, while the plugin's generic `span` rule doubles the icon glyphs (13.82 -> 27.65px at step 200), leaving icons twice the size of their own labels. Here the whole toolbar scales together on the gentle curve and the icon is returned to its designed 0.8em. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar { font-size: calc(0.9vw * var(--a11y-scale-tb)) !important; } /* Only the icon is reachable by the plugin's resize rule, and it is designed to be 100% of its own link. The link itself is left alone on purpose: the plugin sizes it 80% on desktop but 100% in its own mobile media block, so hard-coding 80% here would shrink the icons below their resting size on a phone (measured 14px -> 9.68px). */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item span, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar span.pojo-a11y-toolbar-icon { font-size: 100% !important; } html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar p.pojo-a11y-toolbar-title, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title { font-size: 100% !important; line-height: 2 !important; } /* ========================================================================== SECTION 7 - CHECKBOX TICK VISIBILITY IN THE CONTRAST MODES Independent of font resize: gated behind the contrast body classes only, so with no mode active this block contributes nothing. The tick is a filled rectangle drawn as input::before in assets/css/style.css, always white. A `*` selector never matches a pseudo element, so the plugin (and the site's own inline overrides) repaint the BOX but never the TICK: light background : box forced to #000, border stays #fff on a white page -> the outline disappears into the page grayscale : box transparent + #fff border + #fff tick over a white body -> the whole control is invisible negative contrast: tick stays white while all other text is #ff0 Each mode gets an explicit box / border / tick triple, plus a tick sized as a percentage of the box so it can never spill outside it (the theme sizes the box in vw + vh and the tick in vw + vh independently, so on a wide and short window 1.2vh can exceed the box's inner height). Specificity: the site's own inline override is body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(input,textarea,select) = (1,2,1) !important. The selectors here are (1,3,3) !important. ========================================================================== */ /* --- high contrast : black box, white border, white tick --------------- */ html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"] { background: #000 !important; background-color: #000 !important; border-color: #fff !important; border-style: solid !important; } html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #fff !important; } /* --- negative contrast : black box, yellow border, yellow tick --------- */ html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"] { background: #000 !important; background-color: #000 !important; border-color: #ff0 !important; border-style: solid !important; } html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #ff0 !important; } /* --- light background : white box, black border, black tick ------------ */ html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"] { background: #fff !important; background-color: #fff !important; border-color: #000 !important; border-style: solid !important; } html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #000 !important; } /* --- grayscale : black box, white border, white tick ------------------- */ html body.pojo-a11y-grayscale:not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"] { background: #000 !important; background-color: #000 !important; border-color: #fff !important; border-style: solid !important; } html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #fff !important; } /* --- shared geometry: the tick can never leave the box in any of the 4 - */ 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-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before, html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { content: "" !important; display: block !important; width: 60% !important; height: 60% !important; min-width: 0 !important; min-height: 0 !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; border-radius: 1px !important; } /* ========================================================================== SECTION 7b - HIGH / NEGATIVE CONTRAST PARITY WITH LIGHT BACKGROUND The site's own inline stylesheet corrects light-background mode thoroughly but leaves high-contrast and negative-contrast on the plugin's raw output. Measured differences against light mode (which is the reference here): img light #000 / transparent, HIGH rgb(128,128,128) -> the plugin ships `body.pojo-a11y-high-contrast img { background-color: rgb(128,128,128) }`, which paints a grey plate behind every logo and behind the hero heading (that heading is an , not text), so the green word sat on grey at roughly 1.7:1. submit light #000, HIGH rgb(96,0,64) -> the plugin's own #600040 for input[type=submit]; this is the purple button visible on mobile. backing plates light sets .map-btn a / carousel wrappers / swiper buttons transparent; HIGH + NEGATIVE leave them #000, which draws a black square behind the round "מפת האזור" button. Gated on the contrast classes only - nothing here applies unless a contrast mode is on, so it is independent of the font-resize gate. Specificity: the plugin's rule is (0,1,2); the site's inline overrides are (1,2,1). These are (1,1,3)-(1,2,3), all !important. ========================================================================== */ /* 1. image plates (the grey behind every logo and behind the hero heading, which is an ) are handled for all three modes together in Section 7d - light background needs the same treatment and a higher specificity than a (1,1,3) selector can reach. */ /* 2. submit button - black like light mode, text in each mode's own colour */ html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .submit-btn input, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) input.wpcf7-submit, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .submit-container input, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .global-btn { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .submit-btn input, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) input.wpcf7-submit, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .submit-container input, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .global-btn { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } /* 3. the same backing plates light mode clears - same selector list */ html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .slick-arrow-transparent, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .slick-arrow, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-swiper-button, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-swiper-button svg, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .swiper-pagination, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-image-carousel-wrapper, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .elementor-image-carousel-wrapper *, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .map-btn a, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .contact-btn a, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .mobile-menu, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .transparent-text-bg, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar) .transparent-text-bg .elementor-heading-title, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .slick-arrow-transparent, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .slick-arrow, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-swiper-button, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-swiper-button svg, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .swiper-pagination, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-image-carousel-wrapper, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .elementor-image-carousel-wrapper *, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .map-btn a, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .contact-btn a, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .mobile-menu, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .transparent-text-bg, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar) .transparent-text-bg .elementor-heading-title { background-color: transparent !important; } /* ========================================================================== SECTION 7c - FIELD CAPTION CENTRING *** NOT GATED - READ THIS *** One of the two rules in this file that apply with NO accessibility option selected (the other is the response-output alignment below), because the fault it fixes is present in every mode including the default one, and that is what was asked for. assets/css/style.css positions the caption at `top: 1vh` with the span inheriting the body's FIXED `line-height: 26px`, inside an input whose height is `min-height: 4.6vh`. Two of the three terms scale with viewport HEIGHT and one does not, so the offset works out at 13px - 0.013 * H: window height 700 900 1031 1200 1440 caption offset +3.9 +1.3 -0.4 -2.6 -5.7 (px, - = too high) It is only accidentally centred at H = 1031. On a tall desktop the caption sits up to ~6px high, which is what is visible in the field. Mobile uses a fixed 40px box and 8px top, so it was already within +0.5px. NOT `top: 50%`. The caption's containing block is .form-field-col, and CF7 appends the red .wpcf7-not-valid-tip INSIDE the column, in flow - so the moment a field fails validation the column grows and a 50% anchor drags the caption down with it (measured @1920: column 47.4 -> 68px, caption top 23.7 -> 34.0px, i.e. +10.3px out of the field; @375 +11.5px; @2500 +9.5px). Anchoring to half the INPUT's own height instead is immune to that, because the input's height is what the caption is supposed to sit in the middle of. The values below mirror the theme's own min-heights per breakpoint, and multiplying by --a11y-scale-form (which is 1 until a step is chosen) lets the SAME rule serve both the resting layout and every font step. error showing? no yes caption offset -0.5 -0.5 (@375, was +2.5 / +11.5) 0 0 (@1920, was 0 / +10.3) -1 -1 (@1920 step 130 and 200) Being ungated it DOES change the resting design by up to ~6px on non-1031px-tall windows; that is the intended fix, and it is a documented exception to the "nothing selected -> zero difference" rule everything else in this file obeys. If the exception is unwanted here, this block belongs in assets/css/style.css instead. ========================================================================== */ html body .form-field-col > p > span:first-child { top: calc(4.6vh * var(--a11y-scale-form) / 2) !important; transform: translateY(-50%) !important; } /* theme responsive.css: input min-height 3.9vh above 2400px */ @media (min-width: 2400px) { html body .form-field-col > p > span:first-child { top: calc(3.9vh * var(--a11y-scale-form) / 2) !important; } } /* theme responsive.css: input min-height 40px at 767px and below */ @media (max-width: 767px) { html body .form-field-col > p > span:first-child { top: calc(40px * var(--a11y-scale-form) / 2) !important; } } /* ========================================================================== SECTION 7e - FORM RESPONSE MESSAGE ALIGNMENT *** NOT GATED *** assets/css/style.css gives .wpcf7-response-output no text-align, so the success / error banner inherits the body's RTL `start` and sits hard against the right edge; assets/css/responsive.css only centres it at 767px and below. Centred at every width, in every mode, as requested. ========================================================================== */ html body .wpcf7-response-output, html body .wpcf7 form .wpcf7-response-output { text-align: center !important; } /* ========================================================================== SECTION 7d - NO PLATE BEHIND TRANSPARENT IMAGES IN ANY CONTRAST MODE Several brand assets are transparent PNGs (the framed price panel wp-image-115, logos, the round map button). Every contrast mode paints a solid plate behind them, which shows as the box edges around the artwork: light background #fff (plugin: body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link)) high contrast #808080 negative contrast #000 Specificity matters here: the plugin's light-background rule is (1,2,1) !important, so a (1,1,3) selector LOSES to it on the class column (measured - the panel stayed #fff). These selectors repeat the plugin's own :not():not() shape to reach (1,2,3), which ties on classes and wins on elements. .black-bg / .icon-bg keep the black plate the site's own light-mode CSS gives them on purpose - those hold white-on-transparent artwork. ========================================================================== */ html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) img { background-color: transparent !important; } html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img, html body.pojo-a11y-light-background:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img, html body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img, html body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img { background-color: #000 !important; } /* ========================================================================== SECTION 8 - MOBILE BAND Mirrors assets/css/responsive.css @media(max-width:767px) 1:1 and in the theme's own source order. The theme declares no other overlapping band below 2400px, so no ordering conflict exists. ========================================================================== */ @media (max-width: 767px) { /* toolbar - theme pins it to 14px !important here */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar { font-size: calc(14px * var(--a11y-scale-tb)) !important; } /* privacy modal */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.6 !important; } /* floating field labels */ html body[class*="pojo-a11y-resize-font-"] .form-field-col > p > span:first-child { font-size: calc(14px * var(--a11y-scale-form)) !important; } /* text inputs */ html body[class*="pojo-a11y-resize-font-"] input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] textarea, html body[class*="pojo-a11y-resize-font-"] select { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.35 !important; min-height: calc(40px * var(--a11y-scale-form)) !important; padding-right: calc(46px * var(--a11y-scale-form)) !important; } /* validation tips - theme 12px, floored to 14px inside the gate */ html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* consent label - theme 11px, floored to 12px inside the gate */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* submit */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] input.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(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; padding: calc(11px * var(--a11y-scale-form)) calc(5px * var(--a11y-scale-form)) !important; } /* response output - theme 10px, floored to 14px inside the gate */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output, html body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* mobile carousel arrows intentionally left unscaled - see Section 5 */ } /* ========================================================================== SECTION 9 - OVERFLOW GUARD Plugin-only, step 200 measured documentElement.scrollWidth 11137px against a 1920px viewport (and 9999px against 375px) because the consent label reached 2048px. Sections 3-5 remove the cause; this is belt-and-braces so a future widget cannot reintroduce a sideways scrollbar while a step is active. `clip`, NOT `hidden`: overflow-x:hidden forces the computed overflow-y to `auto`, which turns into a scroll container (verified: overflow-y went visible -> auto, and window scrolling stopped responding). `clip` leaves overflow-y visible and the page scrolls normally. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] { overflow-x: clip !important; } html body[class*="pojo-a11y-resize-font-"] .description-section, html body[class*="pojo-a11y-resize-font-"] .elementor { max-width: 100% !important; }