/* ============================================================================= ACCESSIBILITY – FONT RESIZE (for "One Click Accessibility" / Pojo a11y) ----------------------------------------------------------------------------- THE SITE IS BUILT IN vw. The plugin's +/- buttons only (a) set body{font-size:%} and (b) force !important percentages on p / li / span / input / h_. That breaks in three ways, all of which this file fixes: 1. vw text ignores the body % -> headings never changed. 2. The plugin's percentages COMPOUND through nested elements (body% x wrapper% x element%). Contact Form 7 wraps every field in

, so inputs reached ~256px and s inside headings grew ~1.7x too much. 3. Elements have DIFFERENT units per breakpoint (e.g. the footer link list is 1.1vw on desktop but 11px under 767px). Overriding only the desktop value with !important silently broke the mobile size. --------------------------------------------------------------------------- TWO RULES THIS FILE FOLLOWS (do not break them when editing) --------------------------------------------------------------------------- A. EVERY rule is gated behind `body[class*="pojo-a11y-resize-font-"]`. When the visitor has NOT chosen a text size, this stylesheet contributes absolutely nothing, so the design renders exactly as designed. (Verified: zero computed-size differences at 375 / 900 / 1440 with nothing selected.) B. The accessibility toolbar (#pojo-a11y-toolbar) is NEVER targeted. All generic rules are scoped inside `.elementor` (the page-content wrapper; the toolbar is a sibling of it, not a child). This leaves the toolbar popup scaling exactly the way the plugin always made it scale. HOW SCALING WORKS The plugin's step classes (pojo-a11y-resize-font-130 ... -200) become one gentle multiplier `--a11y-scale`. Every size is then re-declared as calc( * var(--a11y-scale)) — so text stays in vw, stays responsive, and grows/shrinks by one predictable factor with no compounding. TUNING: to make the effect stronger/weaker, edit only section 1. MAINTENANCE: if the page is redesigned (Elementor element IDs change), re-emit section 5 from that page's post-*.css. Extract EVERY font-size rule — all units and all breakpoints, not just vw — or you will reintroduce problem 3. ========================================================================== */ /* 1) STEP -> MULTIPLIERS --------------------------------------------------- Two curves so form fields, submit + response message grow noticeably more than body text — they are the smallest starting sizes and need a bigger first jump to actually feel bigger: --a11y-scale (headings, paragraphs, lists, general text) step 1: +10 % ... max: +55 % --a11y-scale-form (inputs, textareas, selects, submit, response output) step 1: +20 % ... max: +70 % Both are set on so they inherit everywhere; sections 4-5 pick the right one per selector. ------------------------------------------------------------------------ */ :root { --a11y-scale: 1; --a11y-scale-form: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.10; --a11y-scale-form: 1.20; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.18; --a11y-scale-form: 1.30; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.25; --a11y-scale-form: 1.38; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.32; --a11y-scale-form: 1.46; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.38; --a11y-scale-form: 1.53; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.44; --a11y-scale-form: 1.60; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.50; --a11y-scale-form: 1.65; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.55; --a11y-scale-form: 1.70; } /* 2) One clean base. Replaces the plugin's runaway body % with a single step. Deliberately applied to (not scoped) so the a11y toolbar keeps scaling exactly as it did before this file existed. -------------------- */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; } /* 3) Neutralise the plugin's compounding percentages INSIDE PAGE CONTENT. These elements have no size of their own, so `inherit` makes them follow the already-scaled cascade — exactly one scaling, never stacked. This is what keeps a the same size as the

it sits in (e.g. .span-h2, .p-tag-span). ---------------------------------------- / body[class="pojo-a11y-resize-font-"] .elementor p, body[class="pojo-a11y-resize-font-"] .elementor li, body[class="pojo-a11y-resize-font-"] .elementor span, body[class="pojo-a11y-resize-font-"] .elementor label, body[class="pojo-a11y-resize-font-"] .elementor blockquote, body[class="pojo-a11y-resize-font-"] .elementor dd, body[class="pojo-a11y-resize-font-"] .elementor dt { font-size: inherit !important; } /* 4) FORM CONTROLS – use --a11y-scale-form (a bit stronger than text scale). Explicit per-breakpoint values so the CF7
nesting cannot compound them and so they never end up SMALLER than their design size on large screens. Values mirror the theme's own form CSS. ------------- / body[class="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, body[class="pojo-a11y-resize-font-"] .field-col input, body[class="pojo-a11y-resize-font-"] .wpcf7-select { font-size: calc(1vw * var(--a11y-scale-form)) !important; } body[class="pojo-a11y-resize-font-"] .submit-btn input, body[class="pojo-a11y-resize-font-"] .wpcf7-submit { font-size: calc(1.2vw * var(--a11y-scale-form)) !important; } /* Contact-form response message ("שדה אחד או יותר יש שגיאה…"). Same scale as the button so growth feels consistent. Note the theme sets 0.9vw with NO mobile override, so on 375px it renders ~3px (bug); we give it a readable 14px mobile default under the (max-width:600px) block. line-height: 1.5 (unitless) replaces the theme's `1.8vh` — vh is viewport- height relative and does NOT grow when the font grows, so at any accessibility step the lines were crowding. 1.5 scales proportionally with the font size. / body[class="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output, body[class="pojo-a11y-resize-font-"] .wpcf7-response-output { font-size: calc(0.9vw var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* Per-field validation tips ("אנא מלא שדה זה."). Theme base is 0.7vw + line-height 1.5vh (vh again — didn't scale with font). Mobile theme rule is 14px + line-height:1 (crowded once font grows). We give it the same form scale as the button and a proportional 1.5 line-height. / body[class="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip, body[class="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(0.7vw var(--a11y-scale-form)) !important; line-height: 1.5 !important; } @media (min-width: 768px) and (max-width: 1200px) { body[class="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, body[class="pojo-a11y-resize-font-"] .field-col input, body[class="pojo-a11y-resize-font-"] .wpcf7-select { font-size: calc(1.2vw var(--a11y-scale-form)) !important; } body[class="pojo-a11y-resize-font-"] .submit-btn input, body[class="pojo-a11y-resize-font-"] .wpcf7-submit { font-size: calc(1.6vw * var(--a11y-scale-form)) !important; } } @media (max-width: 600px) { body[class="pojo-a11y-resize-font-"] .field-col label .wpcf7-form-control-wrap, body[class="pojo-a11y-resize-font-"] .field-col input, body[class="pojo-a11y-resize-font-"] .wpcf7-select { font-size: calc(16px var(--a11y-scale-form)) !important; } body[class="pojo-a11y-resize-font-"] .submit-btn input, body[class="pojo-a11y-resize-font-"] .wpcf7-submit { font-size: calc(22px * var(--a11y-scale-form)) !important; } /* Only active WHEN an accessibility size is chosen — original 0.9vw stays when nothing is selected, so we don't silently redesign the mobile form. / body[class="pojo-a11y-resize-font-"] .wpcf7 form .wpcf7-response-output, body[class="pojo-a11y-resize-font-"] .wpcf7-response-output { font-size: calc(14px var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* Per-field tips — theme's mobile default is 14px; scale it with the form. / body[class="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip, body[class="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(14px var(--a11y-scale-form)) !important; line-height: 1.5 !important; } } /* 4b) Spans that DO carry an intentional size of their own: keep it, scale it. (Section 3 would otherwise flatten them to `inherit`.) --------------- / body[class="pojo-a11y-resize-font-"] .elementor .pv-links > span { font-size: calc(0.8vw * var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor .field-col label > span:first-child { font-size: calc(25px var(--a11y-scale)) !important; } @media (max-width: 600px) { body[class="pojo-a11y-resize-font-"] .elementor .pv-link, body[class="pojo-a11y-resize-font-"] .elementor .pv-links > span { font-size: calc(14px * var(--a11y-scale)) !important; } } /* 4c) Cookie banner (#cc-banner-root) sits OUTSIDE .elementor. Without explicit rules the plugin's !important h2/span/etc rules cascade in (e.g. .cc-title was blowing up to 37 px at max) while .cc-btn stays inherit-locked and does not grow at all. We re-declare each `.cc-` size explicitly: - Kills the plugin's compounding on the banner - Multiplies by --a11y-scale so buttons AND title DO grow with the accessibility control (this is user-facing content, it should scale). Verified live: at default → design untouched; at each step buttons +15..+60%. / html body[class="pojo-a11y-resize-font-"] .cc-root { font-size: calc(14px var(--a11y-scale)) !important; } /* cc-title uses the form scale AND a slightly bigger baseline (18px, up from the theme's 16) so the FIRST click is clearly bigger — the plain +20% form-scale jump from 16 to 19.2 was still too subtle on mobile. Base only fires when an accessibility step is active (rule is gated), so the default 16px is untouched. / html body[class="pojo-a11y-resize-font-"] .cc-title { font-size: calc(18px * var(--a11y-scale-form)) !important; } /* cc-body — the theme sets the banner paragraph to 14px but the plugin's `p` !important cascades in (banner is OUTSIDE .elementor, so Section 3's inherit fix doesn't reach it). Without a pin, cc-body was blowing up 14 → 43 px at max. Same form scale + line-height:1.5 so lines don't crowd. / html body[class="pojo-a11y-resize-font-"] .cc-body { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* .cc-btn's theme rule is `font-size: inherit` — declared explicitly to lock out any plugin !important on button, and to give it a slightly bigger baseline (15px) so the FIRST click is a visible jump (15 → 18) rather than a subtle 14 → 15.4 nudge. / html body[class="pojo-a11y-resize-font-"] .cc-btn { font-size: calc(15px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"] .cc-lang-toggle { font-size: calc(12px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .cc-modal-head h2 { font-size: calc(18px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .cc-modal-close { font-size: calc(24px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .cc-cat-desc { font-size: calc(13px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"] .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-cookies-list th, html body[class="pojo-a11y-resize-font-"] .cc-cookies-list td { font-size: calc(12px var(--a11y-scale)) !important; } /* ============================================================================= 5) PAGE ELEMENTS – every font-size from Elementor's post-2.css, per breakpoint. Each keeps its own original value (vw stays vw, px stays px) and is simply multiplied by --a11y-scale, so text remains responsive on every device. ========================================================================== / / === DESKTOP / BASE === / body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b48e599 .elementor-heading-title { font-size: calc(1.13vw * var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e6ff747 .elementor-heading-title { font-size: calc(1.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a0c37d8 .elementor-heading-title { font-size: calc(3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-477d977 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-52d7a40 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f166bae .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e74bb91 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d8d1c51 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-5968bb2 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-fea6f84 .elementor-heading-title { font-size: calc(1.3vw var(--a11y-scale)) !important; } /* "מבט על השכונה" block (the neighbourhood-map section). These two widgets were added to the page AFTER this file was first written, so they had no pin and the plugin percentage drove them instead. The plugin sizes h1..h6 at NN1.33% OF THE BODY, and the body starts at 16px while these are sized in vw, so on a 1440px viewport the FIRST click made them SMALLER: h3 6ae5fd1 37.44px -> 30.43px at step 130 (2.6vw vs 17.6px 1.729) p 633fab4 18.72px -> 17.60px at step 130 (1.3vw vs 17.6px * 1.10) Pinning each to its OWN vw value * --a11y-scale makes every step grow. / body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-633fab4 .elementor-heading-title { font-size: calc(1.3vw * var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a053ebf .elementor-heading-title { font-size: calc(1.7vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-253a666 .elementor-heading-title { font-size: calc(1.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-7085436 .elementor-heading-title { font-size: calc(1.16vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ee739c9 .elementor-heading-title { font-size: calc(1.16vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-410669a .elementor-heading-title { font-size: calc(1.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9ae5d22 .elementor-heading-title { font-size: calc(1.16vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-686b0e4 .elementor-heading-title { font-size: calc(1.16vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6ae5fd1 .elementor-heading-title { font-size: calc(2.6vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-fc7bce7 .elementor-heading-title { font-size: calc(2.5vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f0b3bfe .elementor-heading-title { font-size: calc(1.1vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f853b4f .elementor-heading-title { font-size: calc(1.65vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-82413c8 .elementor-icon-list-item > .elementor-icon-list-text, body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-82413c8 .elementor-icon-list-item > a { font-size: calc(1.1vw * var(--a11y-scale)) !important; } /* === MOBILE (<= 767px) === / @media (max-width: 767px) { body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-b48e599 .elementor-heading-title { font-size: calc(3.8vw * var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e6ff747 .elementor-heading-title { font-size: calc(4.7vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a0c37d8 .elementor-heading-title { font-size: calc(4.9vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-477d977 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-52d7a40 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f166bae .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-e74bb91 .elementor-heading-title { font-size: calc(4vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-d8d1c51 .elementor-heading-title { font-size: calc(4vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-5968bb2 .elementor-heading-title { font-size: calc(4vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-fea6f84 .elementor-heading-title { font-size: calc(4vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-633fab4 .elementor-heading-title { font-size: calc(4vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-a053ebf .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-253a666 .elementor-heading-title { font-size: calc(4.6vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-7085436 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-ee739c9 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-410669a .elementor-heading-title { font-size: calc(4.6vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-9ae5d22 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-686b0e4 .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-6ae5fd1 .elementor-heading-title { font-size: calc(6vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-fc7bce7 .elementor-heading-title { font-size: calc(5vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f0b3bfe .elementor-heading-title { font-size: calc(3.8vw var(--a11y-scale)) !important; } body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-f853b4f .elementor-heading-title { font-size: calc(4.3vw var(--a11y-scale)) !important; } /* NOTE: this list is 11px (not vw) under 767px – scaling the desktop vw value here is what previously shrank the footer links on mobile. / body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-82413c8 .elementor-icon-list-item > .elementor-icon-list-text, body[class="pojo-a11y-resize-font-"] .elementor-2 .elementor-element.elementor-element-82413c8 .elementor-icon-list-item > a { font-size: calc(11px var(--a11y-scale)) !important; } }