@charset "UTF-8"; /* ========================================================================== accessibility.css - One Click Accessibility (Pojo) font-resize repair Theme: r-yaridvitzman webz Site: yaridvizman.rotshtein-lp.co.il -------------------------------------------------------------------------- The plugin only adds a body class and emits two !important rules: body.pojo-a11y-resize-font-NN, ...p, li, label, input, select, textarea, legend, code, pre, dd, dt, span, blockquote { font-size: NN% !important } body.pojo-a11y-resize-font-NN h1..h6, h_ span { font-size: NN*1.33% !important } On this vw-based layout that produces, measured on the live site: - compounding percentages : consent label 8.64px -> 2048px at step 200 - frozen elements : .wpcf7-response-output (div), swiper buttons (div), .privacy-content a (a), .cc-root, .cc-btn - never change at any step - headings that SHRINK : .login-banner h1 40px -> 35.96px at step 130 - a runaway cookie banner : .cc-title 16 -> 37.24px, .cc-body 14 -> 28px - horizontal overflow : scrollWidth 9763px at a 1440px viewport EVERY rule below is gated behind body[class*="pojo-a11y-resize-font-"] (or, for the checkbox work, an explicit contrast-mode body class), so with nothing selected - and again after Reset - this file contributes zero computed differences at any viewport on any page. ========================================================================== */ /* ========================================================================== SECTION 1 - STEP -> MULTIPLIERS (three curves) -------------------------------------------------------------------------- --a11y-scale body text, headings, lists, links step 1 +15% .. +60% --a11y-scale-form inputs, submit, response output, validation tips, consent label, cookie banner step 1 +30% .. +75% (these start from the smallest sizes on the page and need a bigger first jump to read as "bigger") --a11y-scale-ui the accessibility toolbar itself step 1 +10% .. +38% (deliberately the gentlest curve, so the accessibility menu items stay noticeably smaller than the page text) ========================================================================== */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-ui: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-ui: 1.10; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-ui: 1.14; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-ui: 1.18; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-ui: 1.22; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-ui: 1.26; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-ui: 1.30; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-ui: 1.34; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-ui: 1.38; } /* ========================================================================== SECTION 2 - BASE PIN Measured baseline is 18px (theme: body{font-size:18px;line-height:26px}), NOT the WordPress-default 16px. calc(), never a flat px, or the toolbar popup would freeze. line-height is restated unitless because the theme's fixed 26px clamps the scaled text. Deliberately NOT scoped to a root. ========================================================================== */ 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 One block per content root found by walking every page in the sitemap: / -> .elementor (only Elementor page) /sample-page/ -> .description-section 404 -> .gold-card-banner, .container, .description-section /2025/09/18/hello-world/ -> .login-banner, .login-section every page -> #lightbox (Lightbox2 chrome, a body child) #pojo-a11y-toolbar is a SIBLING of all of these, never a descendant, so the toolbar is untouched here (Section 6 handles it on its own curve). input / select / textarea are excluded - Section 4 owns them. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .elementor p, html body[class*="pojo-a11y-resize-font-"] .elementor li, html body[class*="pojo-a11y-resize-font-"] .elementor span, html body[class*="pojo-a11y-resize-font-"] .elementor label, html body[class*="pojo-a11y-resize-font-"] .elementor 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, 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-"] .login-section p, html body[class*="pojo-a11y-resize-font-"] .login-section li, html body[class*="pojo-a11y-resize-font-"] .login-section span, html body[class*="pojo-a11y-resize-font-"] .login-section label, html body[class*="pojo-a11y-resize-font-"] .login-section a, html body[class*="pojo-a11y-resize-font-"] .login-section blockquote, html body[class*="pojo-a11y-resize-font-"] .login-section legend, html body[class*="pojo-a11y-resize-font-"] .login-section code, html body[class*="pojo-a11y-resize-font-"] .login-section pre, html body[class*="pojo-a11y-resize-font-"] .login-section dd, html body[class*="pojo-a11y-resize-font-"] .login-section dt, html body[class*="pojo-a11y-resize-font-"] .login-banner p, html body[class*="pojo-a11y-resize-font-"] .login-banner li, html body[class*="pojo-a11y-resize-font-"] .login-banner span, html body[class*="pojo-a11y-resize-font-"] .login-banner label, html body[class*="pojo-a11y-resize-font-"] .login-banner a, html body[class*="pojo-a11y-resize-font-"] .login-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .login-banner legend, html body[class*="pojo-a11y-resize-font-"] .login-banner code, html body[class*="pojo-a11y-resize-font-"] .login-banner pre, html body[class*="pojo-a11y-resize-font-"] .login-banner dd, html body[class*="pojo-a11y-resize-font-"] .login-banner dt, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner li, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner label, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner a, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner legend, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner code, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner pre, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dd, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dt, html body[class*="pojo-a11y-resize-font-"] .container p, html body[class*="pojo-a11y-resize-font-"] .container li, html body[class*="pojo-a11y-resize-font-"] .container span, html body[class*="pojo-a11y-resize-font-"] .container label, html body[class*="pojo-a11y-resize-font-"] .container a, html body[class*="pojo-a11y-resize-font-"] .container blockquote, html body[class*="pojo-a11y-resize-font-"] .container legend, html body[class*="pojo-a11y-resize-font-"] .container code, html body[class*="pojo-a11y-resize-font-"] .container pre, html body[class*="pojo-a11y-resize-font-"] .container dd, html body[class*="pojo-a11y-resize-font-"] .container dt, html body[class*="pojo-a11y-resize-font-"] .breadcrums p, html body[class*="pojo-a11y-resize-font-"] .breadcrums li, html body[class*="pojo-a11y-resize-font-"] .breadcrums span, html body[class*="pojo-a11y-resize-font-"] .breadcrums label, html body[class*="pojo-a11y-resize-font-"] .breadcrums a, html body[class*="pojo-a11y-resize-font-"] .breadcrums blockquote, html body[class*="pojo-a11y-resize-font-"] .breadcrums legend, html body[class*="pojo-a11y-resize-font-"] .breadcrums code, html body[class*="pojo-a11y-resize-font-"] .breadcrums pre, html body[class*="pojo-a11y-resize-font-"] .breadcrums dd, html body[class*="pojo-a11y-resize-font-"] .breadcrums dt, html body[class*="pojo-a11y-resize-font-"] #lightbox p, html body[class*="pojo-a11y-resize-font-"] #lightbox li, html body[class*="pojo-a11y-resize-font-"] #lightbox span, html body[class*="pojo-a11y-resize-font-"] #lightbox label, html body[class*="pojo-a11y-resize-font-"] #lightbox a, html body[class*="pojo-a11y-resize-font-"] #lightbox blockquote, html body[class*="pojo-a11y-resize-font-"] #lightbox legend, html body[class*="pojo-a11y-resize-font-"] #lightbox code, html body[class*="pojo-a11y-resize-font-"] #lightbox pre, html body[class*="pojo-a11y-resize-font-"] #lightbox dd, html body[class*="pojo-a11y-resize-font-"] #lightbox dt { font-size: inherit !important; } /* ========================================================================== SECTION 4 - FORM CONTROLS + MESSAGES (--a11y-scale-form) Values mirror the theme 1:1, per breakpoint (see the media blocks further down, emitted in the theme's own source order). px/vw only: never em (CF7 nests p > span > span > span > span, so em compounds) and never rem (rem shrinks below the design size on wide screens). READABILITY FLOOR - the theme declares exactly ONE breakpoint (600px), so from 601px to 1024px every field falls back to its vw value. Measured at a 900px viewport with accessibility OFF: inputs 7.65px, submit 9px, response output 8.1px, validation tip 7.2px, consent label 5.4px. max(, ) keeps them legible at every step; it is inside the gate, so the default render is untouched. No content-root scope is needed here: the toolbar contains no form controls. ========================================================================== */ /* text inputs - theme: input:not([type=checkbox],[type=submit]) { .85vw / 2vh } */ html body[class*="pojo-a11y-resize-font-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), 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; } /* textarea (comment form) - design size is the inherited body size. max-width/box-sizing: the WordPress comment textarea is sized by its cols=45 attribute, so it is already 426px wide inside a 375px viewport with accessibility OFF (a pre-existing overflow). Scaling its font would widen it to 664px, so it is constrained here - inside the gate, which is why the pre-existing 438px overflow at rest is left exactly as it is. */ html body[class*="pojo-a11y-resize-font-"] textarea { font-size: inherit !important; line-height: 1.45 !important; max-width: 100% !important; box-sizing: border-box !important; } /* generic submit (comment form) - design size is the inherited body size */ html body[class*="pojo-a11y-resize-font-"] input[type="submit"] { font-size: inherit !important; line-height: 1.3 !important; } /* landing-page submit - theme: .submit-btn input { 1vw / 2vh } Emitted after the generic submit rule: equal specificity, later wins. */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .submit-btn input[type="submit"], html body[class*="pojo-a11y-resize-font-"] .submit-btn input.wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } /* CF7 response output - a
, so the plugin's selector list can never reach it: measured frozen at 12.96px (1440) / 8.1px (900) / 10px (375) at EVERY step without this rule. theme: { .9vw / 2vh }, { 10px / 12px } <=600 */ 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.4 !important; } /* CF7 validation tip - theme: .wpcf7-not-valid-tip { .8vw / 2vh } Every tip on this site is in flow (static, or relative with margin-top), so no repositioning is required - see the note above Section 4d. The tip is a , so Section 3's "... .elementor span { inherit }" (0,2,3) would flatten a bare ".wpcf7-not-valid-tip" (0,2,2) to the body size. The extra ancestor selectors below lift this group to (0,3,2). */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* consent checkbox label - the worst compounding case on the site: p > span.wpcf7-form-control-wrap > span.wpcf7-checkbox > span.wpcf7-list-item > label > span.wpcf7-list-item-label = 8.64px -> 2048px at step 200. theme: .wpcf7-checkbox .wpcf7-list-item-label { .6vw / 1.7vh } */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .custom-check-label, html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p { font-size: calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* form title helper that carries its own size - theme: { .93vw / 1.5vh } */ html body[class*="pojo-a11y-resize-font-"] .main-form-title { font-size: calc(max(14px, 0.93vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } /* the CF7 wrapper span's line-height is 2vh - a vh unit never grows with the font, so it clamps the scaled control */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap { line-height: normal !important; } /* ========================================================================== SECTION 4b - ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN Section 3 would otherwise flatten these to the inherited body size. NOTE the :where() trap - the theme writes .privacy-wrapper .privacy-content :where(p, li, a) which is only (0,2,0) because :where() contributes ZERO specificity, so Section 3's (0,2,3) would beat it and flatten the whole privacy modal. Restated explicitly below at (0,3,3). ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a, html body[class*="pojo-a11y-resize-font-"] .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-content a { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2, html body[class*="pojo-a11y-resize-font-"] .privacy-content h2 { font-size: calc(max(20px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } /* Lightbox2 chrome - #lightbox is a body child, so the plugin's span rule runs .lb-caption 13px -> 27.04px -> 64px. Pinned to its design size. */ html body[class*="pojo-a11y-resize-font-"] #lightbox .lb-caption, html body[class*="pojo-a11y-resize-font-"] #lightbox .lb-data .lb-caption { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] #lightbox .lb-number, html body[class*="pojo-a11y-resize-font-"] #lightbox .lb-data .lb-number { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.4 !important; } /* ========================================================================== SECTION 4c - COOKIE CONSENT BANNER (#cc-banner-root / .cc-root) The banner is injected client-side and sits OUTSIDE .elementor as a direct child of , so Section 3 cannot reach it. Measured plugin-only: .cc-title 16px -> 24.21px (130) -> 37.24px (200) runaway (it is an h2) .cc-body 14px -> 18.20px (130) -> 28.00px (200) runaway (it is a p) .cc-root 14px -> 14px -> 14px frozen (it is a div) .cc-btn 14px -> 14px -> 14px frozen (font: inherit) Every pin below is calc( * var(--a11y-scale...)), never a flat px, or the runaway would stop but the banner would freeze instead. SPECIFICITY - each pin is given BOTH a bare and a .cc-root-scoped selector. html body[attr] .cc-root .cc-body = (0,3,2) beats the generic inherit rule html body[attr] .cc-root p = (0,2,3), because the class column is compared before the element column. The bare selector additionally covers the settings modal, which is rendered outside .cc-root. ========================================================================== */ /* generic inherit rule FIRST ... */ 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 div { font-size: inherit !important; } /* ... then the explicit pins */ 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-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 on the live site, on the VISIBLE form (the page ships two CF7 forms; the desktop one is display:none below the tablet breakpoint and the mobile one above it, so the hidden copy must not be measured). Every validation tip here is in normal flow: .wpcf7-not-valid-tip -> position: static (CF7 default) .check-col .wpcf7-not-valid-tip -> position: relative; margin-top: 1vh There is no absolutely-positioned tip and no fixed px 'top' anchor, so nothing can fail to track a consent label that grows taller. Measured at 360 / 375 / 1440px, at steps none / 130 / 160 / 200, before and after this file: overlap <= 0 and spill <= 0 in every cell. No rule is emitted here. If a future revision moves a tip out of flow, restore the auto-tracking anchor (top:auto; bottom:0) inside the same media block that introduced the fixed offset - do NOT use position:static, the tip lives inside .wpcf7-form-control-wrap which is only ~30px wide. ========================================================================== */ /* ========================================================================== SECTION 5 - PER-ELEMENT HEADINGS / BUTTONS (--a11y-scale) -------------------------------------------------------------------------- Headings on the theme-template pages come from bootstrap.rtl.min.css, which switches units at 1200px (calc(rem + vw) below, flat rem above) - so BOTH are emitted. Without this the plugin's h1..h6 rule makes the post title SHRINK: measured .login-banner h1 40px -> 35.96px at step 130. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .elementor h1, html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .login-section h1, html body[class*="pojo-a11y-resize-font-"] .login-banner h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .container h1, html body[class*="pojo-a11y-resize-font-"] .breadcrums h1, html body[class*="pojo-a11y-resize-font-"] #lightbox h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h2, html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .login-section h2, html body[class*="pojo-a11y-resize-font-"] .login-banner h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .container h2, html body[class*="pojo-a11y-resize-font-"] .breadcrums h2, html body[class*="pojo-a11y-resize-font-"] #lightbox h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h3, html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .login-section h3, html body[class*="pojo-a11y-resize-font-"] .login-banner h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .container h3, html body[class*="pojo-a11y-resize-font-"] .breadcrums h3, html body[class*="pojo-a11y-resize-font-"] #lightbox h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h4, html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .login-section h4, html body[class*="pojo-a11y-resize-font-"] .login-banner h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4, html body[class*="pojo-a11y-resize-font-"] .container h4, html body[class*="pojo-a11y-resize-font-"] .breadcrums h4, html body[class*="pojo-a11y-resize-font-"] #lightbox h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h5, html body[class*="pojo-a11y-resize-font-"] .description-section h5, html body[class*="pojo-a11y-resize-font-"] .login-section h5, html body[class*="pojo-a11y-resize-font-"] .login-banner h5, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h5, html body[class*="pojo-a11y-resize-font-"] .container h5, html body[class*="pojo-a11y-resize-font-"] .breadcrums h5, html body[class*="pojo-a11y-resize-font-"] #lightbox h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h6, html body[class*="pojo-a11y-resize-font-"] .description-section h6, html body[class*="pojo-a11y-resize-font-"] .login-section h6, html body[class*="pojo-a11y-resize-font-"] .login-banner h6, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h6, html body[class*="pojo-a11y-resize-font-"] .container h6, html body[class*="pojo-a11y-resize-font-"] .breadcrums h6, html body[class*="pojo-a11y-resize-font-"] #lightbox h6 { font-size: calc(1rem * var(--a11y-scale)) !important; line-height: 1.2 !important; } /* the plugin also stacks "NN*1.33%" onto h_ span, on top of a heading this file has already scaled - flatten those back to their parent heading */ html body[class*="pojo-a11y-resize-font-"] .elementor h1 span, html body[class*="pojo-a11y-resize-font-"] .elementor h2 span, html body[class*="pojo-a11y-resize-font-"] .elementor h3 span, html body[class*="pojo-a11y-resize-font-"] .elementor h4 span, html body[class*="pojo-a11y-resize-font-"] .elementor h5 span, html body[class*="pojo-a11y-resize-font-"] .elementor h6 span, 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-"] .login-section h1 span, html body[class*="pojo-a11y-resize-font-"] .login-section h2 span, html body[class*="pojo-a11y-resize-font-"] .login-section h3 span, html body[class*="pojo-a11y-resize-font-"] .login-section h4 span, html body[class*="pojo-a11y-resize-font-"] .login-section h5 span, html body[class*="pojo-a11y-resize-font-"] .login-section h6 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h1 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h2 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h3 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h4 span, html body[class*="pojo-a11y-resize-font-"] .login-banner h5 span, html body[class*="pojo-a11y-resize-font-"] .login-banner 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, html body[class*="pojo-a11y-resize-font-"] .container h1 span, html body[class*="pojo-a11y-resize-font-"] .container h2 span, html body[class*="pojo-a11y-resize-font-"] .container h3 span, html body[class*="pojo-a11y-resize-font-"] .container h4 span, html body[class*="pojo-a11y-resize-font-"] .container h5 span, html body[class*="pojo-a11y-resize-font-"] .container h6 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h1 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h2 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h3 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h4 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h5 span, html body[class*="pojo-a11y-resize-font-"] .breadcrums h6 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h1 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h2 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h3 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h4 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h5 span, html body[class*="pojo-a11y-resize-font-"] #lightbox h6 span { font-size: inherit !important; } /* Elementor swiper navigation arrows - post-9.css, both
s, so the plugin's selector list never reaches them and they are frozen at 112px / 48px (58px below 767px). BY DESIGN they are NOT scaled: they are decorative chevrons that are already far larger than any text on the page, and growing them to 179px added nothing for legibility. They still need explicit rules, though. Section 2 replaces the theme's fixed 'line-height: 26px' on with a unitless 1.45 so scaled text is not clamped, and line-height inherits: without the pins below these arrows would keep their 112px font but jump from a 26px line box to 162px, which moves them. Restating both properties at their design values makes the arrows completely inert at every step. */ html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-59cd2b1 .elementor-swiper-button.elementor-swiper-button-prev, html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-59cd2b1 .elementor-swiper-button.elementor-swiper-button-next { font-size: 7rem !important; line-height: 26px !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-43e6012 .elementor-swiper-button.elementor-swiper-button-prev, html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-43e6012 .elementor-swiper-button.elementor-swiper-button-next { font-size: 3rem !important; line-height: 26px !important; } /* ========================================================================== SECTION 6 - THE ACCESSIBILITY TOOLBAR ITSELF (--a11y-scale-ui) -------------------------------------------------------------------------- Requested behaviour: when the visitor increases the font size, the items in the accessibility menu should grow noticeably LESS than the page text. The toolbar therefore runs on the gentlest curve (+10% .. +38%, against +15% .. +60% for text and +30% .. +75% for form controls). The theme pins the toolbar with #pojo-a11y-toolbar { font-size: .9vw !important } (14px !important below 600px), which at a 900px viewport is 8.1px with 6.48px labels - so a floor is applied here too. All of this sits inside the resize gate: with nothing selected the toolbar renders exactly as the plugin and theme have always made it. The plugin scales .pojo-a11y-toolbar-text / -icon through its generic span rule (NN%), which compounds on top of the menu link's own 80%. Both spans are restated as 'inherit', which is their design ratio: the plugin's own #pojo-a11y-toolbar ... li.pojo-a11y-toolbar-item a rule is font-size:80%, and the two spans sit at 1em of that link. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar { font-size: calc(max(13px, 0.9vw) * var(--a11y-scale-ui)) !important; } html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-text, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-icon { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-sr-only, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .sr-only { font-size: inherit !important; } /* ========================================================================== MEDIA BLOCKS - emitted in the same source order the site itself uses: bootstrap @media (min-width: 1200px) headings switch to flat rem post-9.css @media (max-width: 767px) small carousel arrows theme @media (max-width: 600px) the ONLY form breakpoint Mirroring the order matters: the 767px and 600px bands overlap, and they resolve by source order, not by which looks "more specific". ========================================================================== */ @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .elementor h1, html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .login-section h1, html body[class*="pojo-a11y-resize-font-"] .login-banner h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .container h1, html body[class*="pojo-a11y-resize-font-"] .breadcrums h1, html body[class*="pojo-a11y-resize-font-"] #lightbox h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h2, html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .login-section h2, html body[class*="pojo-a11y-resize-font-"] .login-banner h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .container h2, html body[class*="pojo-a11y-resize-font-"] .breadcrums h2, html body[class*="pojo-a11y-resize-font-"] #lightbox h2 { font-size: calc(2rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h3, html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .login-section h3, html body[class*="pojo-a11y-resize-font-"] .login-banner h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .container h3, html body[class*="pojo-a11y-resize-font-"] .breadcrums h3, html body[class*="pojo-a11y-resize-font-"] #lightbox h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor h4, html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .login-section h4, html body[class*="pojo-a11y-resize-font-"] .login-banner h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4, html body[class*="pojo-a11y-resize-font-"] .container h4, html body[class*="pojo-a11y-resize-font-"] .breadcrums h4, html body[class*="pojo-a11y-resize-font-"] #lightbox h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; } } @media (max-width: 767px) { /* same as above: held at the theme's mobile value, never scaled */ html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-43e6012 .elementor-swiper-button.elementor-swiper-button-prev, html body[class*="pojo-a11y-resize-font-"] .elementor-9 .elementor-element.elementor-element-43e6012 .elementor-swiper-button.elementor-swiper-button-next { font-size: 58px !important; line-height: 26px !important; } } @media (max-width: 600px) { /* theme: input:not([type=checkbox],[type=submit]) { 16px / 20px } */ html body[class*="pojo-a11y-resize-font-"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), html body[class*="pojo-a11y-resize-font-"] select { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } /* theme: .submit-btn input { 16px / 16px } */ html body[class*="pojo-a11y-resize-font-"] .submit-btn input, html body[class*="pojo-a11y-resize-font-"] .submit-btn input[type="submit"], html body[class*="pojo-a11y-resize-font-"] .submit-btn input.wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } /* theme: .wpcf7-response-output { 10px / 12px } floored to 14px - a 10px status message is below the legibility floor at every step once it is the only feedback the form gives */ 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.4 !important; } /* theme: .wpcf7-not-valid-tip { 12px / 18px } */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap .wpcf7-not-valid-tip, html body[class*="pojo-a11y-resize-font-"] .check-col .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* theme: .wpcf7-checkbox .wpcf7-list-item-label { 10px / 13px } */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .custom-check-label, html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* theme: .privacy-wrapper .privacy-content :where(p, li, a) { 12px / 20px } restated explicitly - :where() has zero specificity */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a, html body[class*="pojo-a11y-resize-font-"] .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-content a { font-size: calc(13px * var(--a11y-scale)) !important; line-height: 1.6 !important; } /* theme: .privacy-wrapper .privacy-content h2 { 16px / 22px } */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2, html body[class*="pojo-a11y-resize-font-"] .privacy-content h2 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.35 !important; } /* theme: #pojo-a11y-toolbar { 14px !important } */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar { font-size: calc(14px * var(--a11y-scale-ui)) !important; } } /* ========================================================================== SECTION 7 - CONSENT CHECKBOX TICK, ACROSS THE CONTRAST MODES -------------------------------------------------------------------------- The custom checkbox is an appearance:none whose tick is drawn with ::after { content: "\2714" }. The theme colours that glyph #000 (desktop) and #fff (below 600px), and the ::before block is suppressed by 'content: none !important', so the glyph is the ONLY tick. Measured on the live site, consent box checked, at a 1440px viewport: mode box background tick colour visible ------------------------ --------------- ------------ -------- (none) transparent #000 yes pojo-a11y-high-contrast #000 #000 NO <-- bug pojo-a11y-negative-contrast #000 #000 NO <-- bug pojo-a11y-light-background #22252d #fff yes pojo-a11y-grayscale transparent #000 yes The plugin paints body.pojo-a11y-high-contrast * { background:#000 } and the same for negative contrast, but '*' does not match pseudo-elements, so the tick keeps the theme's #000 and disappears into the black box. The rules below force box + border + tick together in all four modes, so the result no longer depends on what happens to sit behind the control, and give the glyph a floor so it reads clearly inside the box at every viewport (0.8vw alone is 7.2px at a 900px viewport). Gated on the mode classes, so nothing changes with nothing selected. ========================================================================== */ /* --- high contrast + negative contrast: black box, white tick ------------ */ html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked, html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked { background: #000 !important; background-color: #000 !important; border-color: #fff !important; } html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after { color: #fff !important; font-size: max(11px, 0.8vw) !important; line-height: 1 !important; opacity: 1 !important; } /* --- light background: keep the dark box the site's own override sets, and keep the tick white against it ---------------------------------- */ html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"], html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked { background: #22252d !important; background-color: #22252d !important; border-color: #00b0d2 !important; } html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::after { color: #fff !important; font-size: max(11px, 0.8vw) !important; line-height: 1 !important; opacity: 1 !important; } /* --- grayscale: a filter over the default render, so the only risk is the tick being too small to read once desaturated -------------------------*/ html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: max(11px, 0.8vw) !important; line-height: 1 !important; opacity: 1 !important; } /* --- all four modes: guarantee the glyph stays centred inside the box ----- */ html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } @media (max-width: 600px) { html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: 11px !important; } }