: the plugin NEVER touches it) ---------- */ html body[class*="pojo-a11y-"][class] .wpcf7-response-output, html body[class*="pojo-a11y-"][class] .wpcf7 form .wpcf7-response-output{ font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; /* theme uses vh elsewhere; vh never grows */ } /* --- validation tips ---------------------------------------------------- */ html body[class*="pojo-a11y-"][class] .wpcf7-not-valid-tip, html body[class*="pojo-a11y-"][class] .wpcf7-form-control-wrap .wpcf7-not-valid-tip{ font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-tip)) !important; line-height: 1.3 !important; /* theme pins 14px - clips once scaled */ white-space: nowrap !important;/* client requirement: always ONE line */ } /* --- consent / checkbox label ------------------------------------------- */ html body[class*="pojo-a11y-"][class] .custom-check span, html body[class*="pojo-a11y-"][class] .wpcf7-list-item-label, html body[class*="pojo-a11y-"][class] .custom-check-label, html body[class*="pojo-a11y-"][class] .privacy-checkbox p{ font-size: calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.45 !important; } /* --- field labels ------------------------------------------------------- */ html body[class*="pojo-a11y-"][class] .field-wrapper > p > span, html body[class*="pojo-a11y-"][class] .form-label{ font-size: calc(max(13px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; /* theme uses 2vh */ } /* the CF7 control wrapper is also a direct span child - keep it neutral */ html body[class*="pojo-a11y-"][class] .field-wrapper > p > span.wpcf7-form-control-wrap{ font-size: inherit !important; } /* --- success block ------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"][class] .success-title{ font-size: calc(max(18px, 1.5vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"][class] .success-subtitle{ font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } /* --- equal control heights on every device (client requirement) --------- Inputs and the submit button are driven off one token, so their box heights match at every step and at every breakpoint. */ html body[class*="pojo-a11y-resize-font-"][class] .hebrew-contact-form .form-field, html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="text"], html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="email"], html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="tel"], html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="url"], html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="number"], html body[class*="pojo-a11y-resize-font-"][class] .submit-btn, html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-submit{ height: calc(34px * var(--a11y-scale-form)) !important; min-height: calc(34px * var(--a11y-scale-form)) !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"][class] .submit-btn, html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-submit{ padding-left: calc(14px * var(--a11y-scale-form)) !important; padding-right: calc(14px * var(--a11y-scale-form)) !important; width: auto !important; } /* --- checkbox box scales with its label --------------------------------- */ html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"]{ width: calc(max(15px, 1.2vw) * var(--a11y-scale-form)) !important; height: calc(max(15px, 1.2vw) * var(--a11y-scale-form)) !important; flex: 0 0 auto !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-checkbox input[type="checkbox"]:checked::after{ font-size: calc(max(11px, 0.85vw) * var(--a11y-scale-form)) !important; line-height: 1 !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* ========================================================================== SECTION 4a - Layout containment (gated) The landing page is a rigid 100vh / overflow:hidden frame, and the submit button is absolutely positioned inside a zero-height container, so scaling the form alone either clips it away or - if the frame is released - stretches the whole page (measured: scrollHeight 900 -> 1053 -> 1270 -> 1448px, with ~1100px of empty stretched hero). So: KEEP the 100vh frame on desktop and let the sidebar scroll internally. The design stays put, the form stays reachable, and the page itself never grows a scrollbar it did not have before. ========================================================================== */ @media (min-width: 601px){ html body[class*="pojo-a11y-resize-font-"][class] .main-layout-container{ height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; align-items: stretch !important; overflow: hidden !important; } html body[class*="pojo-a11y-resize-font-"][class] .right-sidebar{ height: 100vh !important; min-height: 0 !important; overflow: hidden !important; } /* the one scroll container: the form column, not the document */ html body[class*="pojo-a11y-resize-font-"][class] .right-sidebar-content{ height: 100% !important; max-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-width: thin !important; } /* ---- hero block ---------------------------------------------------- .hero-content-container is a stretched flex child, so .text-background- image (height:29.08% of it) grows to 421px at step 200 while the text it is supposed to sit behind is only 272px tall - that is the runaway cream panel. And .headlines-box is anchored at top:16.5vh, a viewport unit that cannot track a heading growing in px: measured clearance h1-bottom to headlines-box-top falls 54 -> 32 -> 19 -> 3px across the steps and goes negative on any viewport shorter than 900px. Fix: size the hero block to its content and put the headlines box back in flow underneath the heading. */ html body[class*="pojo-a11y-resize-font-"][class] .hero-section{ align-items: flex-start !important; overflow: hidden !important; } html body[class*="pojo-a11y-resize-font-"][class] .hero-content-container{ height: auto !important; max-width: calc(100% - 4vw) !important; padding-bottom: 2vh !important; } html body[class*="pojo-a11y-resize-font-"][class] .text-background-image{ top: 0 !important; height: 100% !important; } html body[class*="pojo-a11y-resize-font-"][class] .headlines-box{ position: relative !important; top: auto !important; left: auto !important; right: auto !important; margin-left: 9.5vw !important; margin-top: 1.5vh !important; max-width: 100% !important; } html body[class*="pojo-a11y-resize-font-"][class] .main-heading{ padding-top: 3vh !important; padding-bottom: 0 !important; } /* ---- price / info boxes ------------------------------------------- .price-box is max-width:14vw and .info-box 7vw. On hover the JS swaps a PRICE ("1,930,000") for a whole sentence, so at a larger font the text collapses into a ~6-character column. The sidebar content box is 30.5vw - 4vw padding = 26.5vw, so give the pair all of it: 17 + 8.5 + 1 gap = 26.5vw exactly, and drop the 2vw nudge that would push it out. */ html body[class*="pojo-a11y-resize-font-"][class] .content-area{ gap: 1vw !important; margin-left: 0 !important; } html body[class*="pojo-a11y-resize-font-"][class] .price-box{ max-width: 17vw !important; left: 0 !important; } html body[class*="pojo-a11y-resize-font-"][class] .info-box{ max-width: 8.5vw !important; } } /* form chrome that must stop being pinned at any breakpoint */ html body[class*="pojo-a11y-resize-font-"][class] .custom-check{ height: auto !important; max-width: none !important; overflow: visible !important; } html body[class*="pojo-a11y-resize-font-"][class] .submit-container{ height: auto !important; position: relative !important; } html body[class*="pojo-a11y-resize-font-"][class] .submit-btn{ position: relative !important; bottom: auto !important; left: auto !important; } html body[class*="pojo-a11y-resize-font-"][class] .disclaimer-text, html body[class*="pojo-a11y-resize-font-"][class] .content-area, html body[class*="pojo-a11y-resize-font-"][class] .price-box, html body[class*="pojo-a11y-resize-font-"][class] .info-box, html body[class*="pojo-a11y-resize-font-"][class] .info-button{ height: auto !important; min-height: 0 !important; } html body[class*="pojo-a11y-resize-font-"][class] .dynamic-info-container{ position: relative !important; max-width: none !important; } html body[class*="pojo-a11y-resize-font-"][class] .dynamic-price-container{ position: relative !important; margin-top: 0 !important; } /* ---- mobile hero + info rows ------------------------------------------- NOTE: on mobile the cream panel behind "10% בחתימה" is baked into mobile-feature-images.png, and .headlines-box is absolutely positioned on top of it. Taking that box out of flow drops the dark-teal text onto the dark-teal page background, where it is invisible - so it STAYS absolute. Sampled from the PNG, that cream band is a clean rgb(240,224,198) rectangle spanning x 21-78% (57% wide, matching the theme's max-width:56%) and y 0-25%. Once scaled the box reaches 29-33%, i.e. past the band and onto the photo, so the box is given that exact cream as its own background and simply continues the band downwards. */ @media (max-width: 600px){ html body[class*="pojo-a11y-resize-font-"][class] .main-heading{ text-align: center !important; /* wraps to 2 lines once scaled */ } html body[class*="pojo-a11y-resize-font-"][class] .headlines-box{ width: 57% !important; max-width: 57% !important; background: rgb(240, 224, 198) !important; padding-bottom: 8px !important; } /* the row is [label] [icon] [description] in RTL. Letting the label collapse squeezes it into a 38px column hard against the icon, which reads as icon and text running together - keep it proportional and let the description take the slack instead. */ html body[class*="pojo-a11y-resize-font-"][class] .info-button{ flex-wrap: wrap !important; } html body[class*="pojo-a11y-resize-font-"][class] .info-button p{ flex: 0 0 auto !important; min-width: calc(70px * var(--a11y-scale-display)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .info-button .hover-content{ flex: 1 1 auto !important; } /* ---- bottom CTA bar ------------------------------------------------ Each button is clipped to an arrow silhouette: .phone-mob cuts the LEFT edge at 4.24%-13% .detail-mob cuts the RIGHT edge at 78%-90.3% The label is centred over the FULL box, so at a larger font it runs out past the cut (measured at 375px: the .detail-mob label reaches x=355 while its shape ends at ~320). Give each column an exact 50% basis and inset the content by the size of its own cut. */ html body[class*="pojo-a11y-resize-font-"][class] .mobile-menu .col-6{ flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; } html body[class*="pojo-a11y-resize-font-"][class] .mobile-menu .phone-mob a{ padding-left: 15% !important; padding-right: 4% !important; } html body[class*="pojo-a11y-resize-font-"][class] .mobile-menu .detail-mob a{ padding-right: 24% !important; padding-left: 4% !important; } html body[class*="pojo-a11y-resize-font-"][class] .mobile-menu .detail-mob span{ width: auto !important; } } /* ========================================================================== SECTION 4b - Elements carrying an intentional size of their own Includes every selector the theme wrote with :where(), which has ZERO specificity and would otherwise be flattened by section 3. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"][class] .content-description{ /* div */ font-size: calc(max(12px, 0.9vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"][class] .dynamic-info-container{ /* div */ font-size: calc(max(12px, 0.9vw) * var(--a11y-scale-display)) !important; line-height: 1.45 !important; } html body[class*="pojo-a11y-resize-font-"][class] .info-button p, html body[class*="pojo-a11y-resize-font-"][class] .info-button .yellow-mob-text{ font-size: calc(max(12px, 0.9vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; /* theme uses 2.4vh */ max-width: none !important; } html body[class*="pojo-a11y-resize-font-"][class] .hover-price, html body[class*="pojo-a11y-resize-font-"][class] .dynamic-price-container .hover-price{ font-size: calc(max(20px, 1.8vw) * var(--a11y-scale-display)) !important; line-height: 1.2 !important; /* theme uses 3.8vh */ } html body[class*="pojo-a11y-resize-font-"][class] .dynamic-price-container .currency-symbol{ font-size: calc(max(12px, 1vw) * var(--a11y-scale-display)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .dynamic-price-container .label-bedge{ white-space: nowrap !important; font-size: calc(max(11px, 0.9vw) * var(--a11y-scale-display)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .hover-info, html body[class*="pojo-a11y-resize-font-"][class] #hidden-hover-content .hover-info{ font-size: calc(max(11px, 0.8vw) * var(--a11y-scale-display)) !important; } html body[class*="pojo-a11y-resize-font-"][class] p.hover-headline{ font-size: calc(max(11px, 0.8vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .checkbox-container label{ font-size: calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* privacy modal - the theme writes these with :where(), specificity (0,2,0) */ html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content h2{ font-size: calc(max(16px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; /* theme uses 2.6vh */ } html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content a{ font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.7 !important; /* theme uses 2.8vh */ } html body[class*="pojo-a11y-resize-font-"][class] .privacy-wrapper .privacy-content{ max-height: none !important; } /* ========================================================================== SECTION 4c - Cookie banner (#cc-banner-root) It is a direct child of , OUTSIDE every content root, so section 3 cannot reach it. Verified live: .cc-root and .cc-btn are frozen at 14px at every step (a div and a `font:inherit` button), while .cc-title (an h2) runs 16 -> 24.2 -> 37.2px. Generic inherit rule first, then explicit pins - each pin gets a bare AND a .cc-root-scoped selector. .cc-title / .cc-btn ride the FORM curve off bumped baselines (16 -> 18, 14 -> 15) so the first click is a visible jump. EVERY pin is a calc(). ========================================================================== */ html body[class*="pojo-a11y-resize-font-"][class] .cc-root :is(p,li,span,label,a){ font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-root{ font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-title, html body[class*="pojo-a11y-resize-font-"][class] .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-"][class] .cc-body, html body[class*="pojo-a11y-resize-font-"][class] .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-"][class] .cc-btn, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-btn, html body[class*="pojo-a11y-resize-font-"][class] .cc-btn.cc-btn-text, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-btn.cc-btn-text{ font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-lang-toggle, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-lang-toggle{ font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-modal-head h2, html body[class*="pojo-a11y-resize-font-"][class] .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-"][class] .cc-modal-close, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-modal-close{ font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1 !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-cat-desc, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-cat-desc{ font-size: calc(13px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-required-badge, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-required-badge{ font-size: calc(11px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list, html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"][class] .cc-cookies-list td, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"][class] .cc-root .cc-cookies-list td{ font-size: calc(12px * var(--a11y-scale)) !important; } /* the banner must be able to grow instead of clipping */ html body[class*="pojo-a11y-resize-font-"][class] .cc-banner.cc-box{ max-width: min(92vw, calc(420px * var(--a11y-scale))) !important; } /* CookieYes selectors (present in the theme CSS, inactive on this site today - kept so the fix survives if the CookieYes banner is switched back on). The theme writes them with :where(), so they are restated explicitly. */ html body[class*="pojo-a11y-resize-font-"][class] .cky-notice .cky-notice-group .cky-notice-des > p, html body[class*="pojo-a11y-resize-font-"][class] .cky-notice .cky-notice-group .cky-notice-des a{ font-size: calc(max(13px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"][class] .cky-btn{ font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } /* ========================================================================== SECTION 4d - Validation-tip positioning Audited live at 1440 and 375. This theme does NOT use a fixed px `top`; it uses `position:absolute; bottom:-15px` on a wrap whose height is the input height. Because the anchor is the tip's BOTTOM edge, the tip grows UPWARDS as the font scales and lands on top of the field - measured overlap at 1440: none 0px, 130 +27px, 200 +55px. Fix: re-anchor to `top:100%` and restate `bottom:auto` explicitly so it works without :has() support. NEVER position:static - the control wrap is only ~30px wide and the text would squeeze into a column. ========================================================================== */ html body[class*="pojo-a11y-"][class] .wpcf7-form-control-wrap > .wpcf7-not-valid-tip{ position: absolute !important; top: 100% !important; bottom: auto !important; right: 0 !important; left: auto !important; margin-top: 2px !important; z-index: 5 !important; } /* the consent row keeps the theme's in-flow tip, which tracks automatically */ html body[class*="pojo-a11y-"][class] .custom-check .wpcf7-not-valid-tip, html body[class*="pojo-a11y-"][class] .checkbox-container .wpcf7-not-valid-tip{ position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; display: block !important; width: max-content !important; max-width: 100% !important; margin-top: 4px !important; } /* spare room under each field so the re-anchored tip never covers the next row */ html body[class*="pojo-a11y-"][class] .field-wrapper > p{ padding-bottom: calc(13px * var(--a11y-scale-tip) * 1.5 + 6px) !important; margin-bottom: 0 !important; } /* ========================================================================== SECTION 5 - Every theme font-size rule, gated and scaled Base band first; each source @media block is repeated below in the theme's own source order (1020 -> 767 -> 600), because overlapping bands resolve by order, not by specificity. vw at base + px on mobile -> BOTH are emitted. ========================================================================== */ /* --- 5.0 BASE (assets/css/style.css, no media query) --------------------- */ html body[class*="pojo-a11y-resize-font-"][class] .main-heading{ font-size: calc(max(28px, 3.64vw) * var(--a11y-scale-display)) !important; line-height: 1.2 !important; /* theme uses 5.5vh */ } html body[class*="pojo-a11y-resize-font-"][class] .main-sub-headline{ font-size: calc(max(22px, 2.44vw) * var(--a11y-scale-display)) !important; line-height: 1.25 !important; /* theme uses 4vh */ } html body[class*="pojo-a11y-resize-font-"][class] .sub-headline{ font-size: calc(max(14px, 1.366vw) * var(--a11y-scale-display)) !important; line-height: 1.35 !important; /* theme uses 2.5vh */ } html body[class*="pojo-a11y-resize-font-"][class] .absolute-star{ font-size: calc(max(14px, 1.5vw) * var(--a11y-scale-display)) !important; line-height: 1 !important; } html body[class*="pojo-a11y-resize-font-"][class] .tag-line{ font-size: calc(max(14px, 1.3vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-"][class] .city-name{ font-size: calc(max(11px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"][class] .contact-heading h2{ font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-"][class] .disclaimer-text p{ font-size: calc(max(12px, 0.7vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; /* theme uses 1.9vh */ max-width: none !important; } html body[class*="pojo-a11y-"][class] .legal-text p{ font-size: calc(max(12px, 0.7vw) * var(--a11y-scale)) !important; line-height: 1.5 !important; max-width: none !important; } html body[class*="pojo-a11y-resize-font-"][class] .mobile-menu a{ font-size: calc(max(14px, 1.1vw) * var(--a11y-scale)) !important; line-height: 1.2 !important; } /* --- 5.1 @media(max-width:1020px) - assets/css/responsive.css ------------ */ @media (max-width: 1020px){ html body[class*="pojo-a11y-resize-font-"][class] .tag-line{ font-size: calc(max(14px, 2vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-"][class] .city-name{ font-size: calc(max(11px, 1.8vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .content-description{ font-size: calc(max(12px, 1.2vw) * var(--a11y-scale)) !important; } } /* --- 5.2 @media(max-width:767px) - inline theme