depending on the widget's HTML-tag setting; both are neutralised so no 266% rule can survive. Every heading present on / and /home/ carries an explicit size (Section 5); this is the safety net for widgets added later. */ body[class*="pojo-a11y-resize-font-"] .elementor :where( h1, h2, h3, h4, h5, h6, .elementor-heading-title ) { font-size: inherit !important; } /* Theme templates use bare heading tags sized by Bootstrap 5. Verified on /2026/05/18/hello-world/ : .login-banner h1 = 27.625px @375 and 40px @1440, i.e. exactly calc(1.375rem + 1.5vw) capped at 2.5rem from 1200px up. Restated in px/vw so the html root font-size is never a hidden dependency. */ body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h1 { font-size: calc((22px + 1.5vw) * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h2 { font-size: calc((21.2px + 0.9vw) * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h3 { font-size: calc((20.8px + 0.6vw) * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h4 { font-size: calc((20.4px + 0.3vw) * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h5 { font-size: calc(20px * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h6 { font-size: calc(16px * var(--a11y-scale)) !important; } @media (min-width: 1200px) { body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h1 { font-size: calc(40px * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h2 { font-size: calc(32px * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h3 { font-size: calc(28px * var(--a11y-scale)) !important; } body[class*="pojo-a11y-resize-font-"] :is( .login-banner, .login-section, .description-section, .gold-card-banner, .error-content, .general-content, .home-banner, .users-grid, .login-wraper, .faq-accordian-section, .privacy-content, .privacy-wrapper, .text-wraper, .content-wraper ) h4 { font-size: calc(24px * var(--a11y-scale)) !important; } } /* 404.php ships an inline `style="font-size:30px"` on its error heading. An !important stylesheet rule out-specifies the inline declaration, which is what lets it scale at all. */ body[class*="pojo-a11y-resize-font-"] .error-content .text-wraper h3 { font-size: calc(30px * var(--a11y-scale)) !important; } /* ========================================================================== SECTION 4 — FORMS, BUTTONS, MESSAGES -------------------------------------------------------------------------- Sizes below are the theme's own, read out of assets/css/style.css and assets/css/responsive.css and confirmed against the live computed styles. px and vw only — no em/rem, so nothing re-inherits and re-multiplies. Media order reproduces the source order: base -> 1681 -> 767 -> 600. ========================================================================== */ /* --- base (assets/css/style.css) -------------------------------------- */ body[class*="pojo-a11y-resize-font-"] input, body[class*="pojo-a11y-resize-font-"] textarea, body[class*="pojo-a11y-resize-font-"] select { font-size: calc(1vw * var(--a11y-scale-form)) !important; line-height: 1 !important; } body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child { font-size: calc(1.18vw * var(--a11y-scale-form)) !important; line-height: 1 !important; } body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn { font-size: calc(1.4vw * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } body[class*="pojo-a11y-resize-font-"] .new-home-contact .submit-col .global-btn { font-size: calc(1.3vw * var(--a11y-scale-form)) !important; line-height: 1.6 !important; } body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p, body[class*="pojo-a11y-resize-font-"] .checkbox-group .first.last .wpcf7-list-item-label { font-size: calc(0.9vw * var(--a11y-scale-form)) !important; line-height: 1 !important; } /* READABILITY FLOOR — the theme has no override between 768px and 1024px, so these vw sizes bottom out around 900px viewport width. Measured at rest with accessibility OFF at 900px: consent label 6.1px, response output 6.3px, validation tip 6.3px. Scaling a 6px string by 1.75 still only reaches 11px, so the feature would do nothing useful there. max() raises the floor INSIDE the gate only — the default render is untouched, so Rule A still holds. THE FLOOR RAMPS IN; IT IS NOT APPLIED ON THE FIRST CLICK. A flat 12px floor is the right size at the TOP of the range and far too big as an opening move: it does not scale the text, it JUMPS it straight to 12px and then scales that. Measured on the consent label with the old flat floor, first click: viewport at rest 1st click ratio 1920 13.06px 15.02px x1.15 (no floor - vw already > 12) 1440 9.79px 13.80px x1.41 900 6.12px 13.80px x2.26 x2.26 for one press of a button is exactly the reported problem, and 1440 is a normal laptop, so most users saw the x1.41 version of it. `--a11y-cb-min` is 0 for the first click, so step 130 is a plain x1.15 on the label's own size at EVERY width - the same first click the rest of the form gets. From step 140 the floor fades in (7.5 -> 12px) and reaches its full value at maximum, so the 768-1024 band still ends up readable. Now: viewport 1st click maximum 1920 13.06 -> 15.02 x1.15 22.86px 1440 9.79 -> 11.26 x1.15 21.00px 900 6.12 -> 7.04 x1.15 21.00px The ramp is 7.5 / 8.5 / 9.5 / 10.3 / 11 / 11.5 / 12 rather than a straight line from 9.5, because the floor has to fade in from BELOW the label's own size or the second click inherits the same jump the first one just lost. Measured at 900px, the worst step-to-step ratio: flat 12px floor x2.26 on click 1 ramp starting at 9.5px x1.15 on click 1, then x1.67 on click 2 ramp starting at 7.5px x1.15 on click 1, then x1.32 on click 2 Monotonic at every width - each step is larger than the one before it. */ body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .wpcf7-list-item-label, body[class*="pojo-a11y-resize-font-"] .checkbox-group .first.last .wpcf7-list-item-label { font-size: calc(max(var(--a11y-cb-min), 0.58vw) * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } body[class*="pojo-a11y-resize-font-"] .new-home-contact .privacy-checkbox .wpcf7-list-item-label, body[class*="pojo-a11y-resize-font-"] .new-home-contact .checkbox-group .first.last .wpcf7-list-item-label { font-size: calc(max(var(--a11y-cb-min), 0.68vw) * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } body[class*="pojo-a11y-resize-font-"] .privacy-checkbox input[type="checkbox"]:checked::before { font-size: calc(0.9vw * var(--a11y-scale-form)) !important; line-height: 1 !important; } body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } body[class*="pojo-a11y-resize-font-"] .success-title { font-size: calc(1.3vw * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } /* --- @media (min-width: 1681px) ---------------------------------------- */ @media (min-width: 1681px) { body[class*="pojo-a11y-resize-font-"] .new-home-contact .submit-col .global-btn { font-size: calc(1.3vw * var(--a11y-scale-form)) !important; } } /* --- @media (max-width: 767px) ----------------------------------------- */ @media (max-width: 767px) { body[class*="pojo-a11y-resize-font-"] input, body[class*="pojo-a11y-resize-font-"] textarea, body[class*="pojo-a11y-resize-font-"] select { font-size: calc(16px * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .form-field select { font-size: calc(4.4vw * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child { font-size: calc(3.4vw * var(--a11y-scale-form)) !important; line-height: 1 !important; } body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .wpcf7-list-item-label { font-size: calc(9px * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .new-home-contact .privacy-checkbox .wpcf7-list-item-label, body[class*="pojo-a11y-resize-font-"] .new-home-contact .checkbox-group .first.last .wpcf7-list-item-label { font-size: calc(9px * var(--a11y-scale-form)) !important; } /* responsive.css declares this AFTER the 9px rules and at equal specificity, so it must stay last here too or the CF7-internal label (hidden on .privacy-checkbox.first, visible in other checkbox groups) drops to 9px. */ body[class*="pojo-a11y-resize-font-"] .first.last .wpcf7-list-item-label { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } body[class*="pojo-a11y-resize-font-"] .privacy-checkbox input[type="checkbox"]:checked::before { font-size: calc(12px * var(--a11y-scale-form)) !important; } /* Mobile floor is 12px, not the 14px used above: the consent tip carries the theme's `text-wrap: nowrap`, and 14px x 1.75 would push the single line past a 360px viewport. 12px x 1.75 = 21px still fits. */ body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(max(12px, 3vw) * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn { font-size: calc(5vw * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .new-home-contact .submit-col .global-btn { font-size: calc(6.5vw * var(--a11y-scale-form)) !important; } body[class*="pojo-a11y-resize-font-"] .success-title { font-size: calc(18px * var(--a11y-scale-form)) !important; } } /* ========================================================================== SECTION 4b — COOKIE BANNER (#cc-banner-root) -------------------------------------------------------------------------- Original sizes read from the inline