/* ==========================================================================
One Click Accessibility (Pojo) - font-resize repair layer
Theme: hedera rotstein webz | Site: hedera.rotshtein-lp.co.il
--------------------------------------------------------------------------
EVERY rule in sections 1-5 is gated behind body[class*="pojo-a11y-resize-font-"].
With no accessibility step selected (and after Reset) this file contributes
nothing: the computed-style diff vs. baseline is empty on every page.
#pojo-a11y-toolbar is a SIBLING of the content roots; only section 4e touches
it, and only when a resize step is active (see the note in that section).
Section 6 is gated on the contrast / greyscale body classes instead.
========================================================================== */
/* ==========================================================================
SECTION 1 - the two curves
--------------------------------------------------------------------------
--a11y-scale : body copy, headings, banners, generic UI.
--a11y-scale-form : form controls, buttons, validation / response messages
and the cookie banner. These start from much smaller
design sizes (0.6vw-1.2vw, i.e. 8-17px), so they need a
bigger first jump to feel like anything happened.
--a11y-scale-menu : the accessibility toolbar's own menu items - requested
to grow noticeably LESS than page content.
========================================================================== */
:root{
--a11y-scale:1;
--a11y-scale-form:1;
--a11y-scale-menu:1;
}
body.pojo-a11y-resize-font-130{--a11y-scale:1.15;--a11y-scale-form:1.30;--a11y-scale-menu:1.10;}
body.pojo-a11y-resize-font-140{--a11y-scale:1.22;--a11y-scale-form:1.40;--a11y-scale-menu:1.16;}
body.pojo-a11y-resize-font-150{--a11y-scale:1.28;--a11y-scale-form:1.48;--a11y-scale-menu:1.21;}
body.pojo-a11y-resize-font-160{--a11y-scale:1.35;--a11y-scale-form:1.55;--a11y-scale-menu:1.27;}
body.pojo-a11y-resize-font-170{--a11y-scale:1.42;--a11y-scale-form:1.62;--a11y-scale-menu:1.32;}
body.pojo-a11y-resize-font-180{--a11y-scale:1.48;--a11y-scale-form:1.68;--a11y-scale-menu:1.37;}
body.pojo-a11y-resize-font-190{--a11y-scale:1.54;--a11y-scale-form:1.72;--a11y-scale-menu:1.42;}
body.pojo-a11y-resize-font-200{--a11y-scale:1.60;--a11y-scale-form:1.75;--a11y-scale-menu:1.45;}
/* ==========================================================================
SECTION 2 - base pin on
--------------------------------------------------------------------------
Measured body baseline is 16px at 375, 900 and 1440. Deliberately UNSCOPED
(no content root) so the toolbar popup keeps inheriting a real px value.
calc(), never a flat px, or the toolbar freezes.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"]{
font-size:calc(16px * var(--a11y-scale)) !important;
}
/* ==========================================================================
SECTION 3 - kill the percentage compounding inside every content root
--------------------------------------------------------------------------
The plugin emits `p, li, span, label, ... { font-size:NN% !important }`, and
% resolves against the PARENT. CF7 nests span > span > span, so at step 200
the consent label measured 8.64px -> 2048px and the text input 14.4 -> 256px.
Making these elements `inherit` collapses the whole chain to one multiplier.
Content roots found in the audit:
.elementor - all Elementor pages (incl. the 191 header/footer
template nested inside .elementor-6 / -381)
.description-section - page.php / 404.php (no .elementor at all)
.login-section - single.php
.login-banner / .gold-card-banner / .home-banner - template banners
.lightbox - body-level lightbox overlay
input / select / textarea are deliberately NOT here - section 4 owns them.
#pojo-a11y-toolbar is outside every root, so RULE B holds.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner,.lightbox) :where(p,li,span,label,blockquote,legend,code,pre,dd,dt,figcaption,th,td){
font-size:inherit !important;
}
/* ==========================================================================
SECTION 3b - headings that have no size of their own
--------------------------------------------------------------------------
The plugin emits `body...NN h1..h6 { font-size: NN*1.33% }`, another PARENT
percentage. Headings with no author size fall back to Bootstrap 5's fluid
defaults, which are rem/vw based and therefore invisible to that percentage.
Measured on single.php at 1440: .login-banner h1 40px -> 31.8px at step 130,
i.e. the heading got SMALLER when the user asked for bigger text.
Restated here as Bootstrap's own values x --a11y-scale, in Bootstrap's own
two bands. Verified baselines - fluid: h1 22px+1.5vw, h2 21.2px+0.9vw,
h3 20.8px+0.6vw, h4 20.4px+0.3vw, h5 20px, h6 16px; >=1200px: 40/32/28/24.
`:where()` keeps this at zero heading-specificity, so every explicit size
(section 4b, section 5, Elementor) still wins.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h1){font-size:calc((22px + 1.5vw) * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h2){font-size:calc((21.2px + 0.9vw) * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h3){font-size:calc((20.8px + 0.6vw) * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h4){font-size:calc((20.4px + 0.3vw) * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h5){font-size:calc(20px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h6){font-size:calc(16px * var(--a11y-scale)) !important;}
@media (min-width:1200px){
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h1){font-size:calc(40px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h2){font-size:calc(32px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h3){font-size:calc(28px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] :is(.elementor,.description-section,.login-section,.login-banner,.gold-card-banner,.home-banner) :where(h4){font-size:calc(24px * var(--a11y-scale)) !important;}
}
/* ==========================================================================
SECTION 4 - form controls, submit button, response + validation messages
--------------------------------------------------------------------------
Measured (plugin only, no fix):
1440 input 14.4 -> 45.7 -> 256px submit 17.3 -> 35.2 -> 128px
900 input 10.8 -> 45.7 -> 256px in a box frozen at 35px
375 input 16 -> 45.7 -> 256px, box 38 -> 81 -> 390px
submit frozen at 38px -> input and submit never match
Fix: one shared control-height token per breakpoint, multiplied by the form
curve, applied to BOTH the inputs and the submit button. Equal height on
every device at every step, by construction.
Units: px / vw only. Never em (CF7 nesting compounds it) and never rem
(section 2 raises the root, which would double-apply).
========================================================================== */
/* -- shared control height, mirroring the theme's own values per breakpoint -- */
html body[class*="pojo-a11y-resize-font-"]{--a11y-ctl-h:44px;} /* measured 43.6px at 1440 */
@media (min-width:768px) and (max-width:1200px){
html body[class*="pojo-a11y-resize-font-"]{--a11y-ctl-h:35px;} /* theme: height:35px !important */
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"]{--a11y-ctl-h:38px;} /* theme: .submit-btn input{height:38px} */
}
/* -- identical box for text inputs, selects and the submit button ----------- */
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col select,
html body[class*="pojo-a11y-resize-font-"] .field-col textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit{
height:calc(var(--a11y-ctl-h) * var(--a11y-scale-form)) !important;
min-height:calc(var(--a11y-ctl-h) * var(--a11y-scale-form)) !important;
max-height:calc(var(--a11y-ctl-h) * var(--a11y-scale-form)) !important;
line-height:1.2 !important; /* unitless - the theme's 1.5 / 24px / vh values do not track */
padding-top:0 !important;
padding-bottom:0 !important;
box-sizing:border-box !important;
}
/* The wrappers must stop dictating the height - but they must still be able
to GROW. A fixed height here made a CF7 validation tip overflow its own
and get painted underneath the next element: measured at 390px / step 130 the
e-mail tip (y 2470-2493) landed inside the submit button (y 2391-2440), and
one row further down it covered the consent label. min-height keeps the rows
equal while leaving the tip somewhere to go. */
html body[class*="pojo-a11y-resize-font-"] .field-col > p,
html body[class*="pojo-a11y-resize-font-"] .submit-btn > p{
height:auto !important;
min-height:calc(var(--a11y-ctl-h) * var(--a11y-scale-form)) !important;
margin-bottom:0 !important;
}
/* the control wrap is an inline span; make it a block so an injected tip takes
its own line inside the
instead of spilling out of the inline box */
html body[class*="pojo-a11y-resize-font-"] .field-col .wpcf7-form-control-wrap,
html body[class*="pojo-a11y-resize-font-"] .checkbox-group .wpcf7-form-control-wrap{
display:block !important;
}
html body[class*="pojo-a11y-resize-font-"] #contactUs{align-items:flex-start !important;}
/* -- control font sizes, mirroring the theme 1:1 per breakpoint ------------- */
/* base: .field-col input{font-size:1vw} .submit-btn input{font-size:1.2vw}
READABILITY FLOOR - 1vw is 7px at a 700px viewport, which the theme has no
override for. Gated, so the default render is untouched. */
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col select,
html body[class*="pojo-a11y-resize-font-"] .field-col textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-select{
font-size:calc(max(16px, 1vw) * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit{
font-size:calc(max(18px, 1.2vw) * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input::before{
font-size:calc(22px * var(--a11y-scale-form)) !important;
}
@media (min-width:768px) and (max-width:1200px){
/* theme: inputs 1.2vw !important, submit 1.6vw !important, both height:35px */
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col select,
html body[class*="pojo-a11y-resize-font-"] .field-col textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-select{
font-size:calc(max(16px, 1.2vw) * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit{
font-size:calc(max(18px, 1.6vw) * var(--a11y-scale-form)) !important;
}
}
@media (max-width:600px){
/* theme: inputs 16px, submit 22px / line-height 26px */
html body[class*="pojo-a11y-resize-font-"] .field-col input,
html body[class*="pojo-a11y-resize-font-"] .field-col select,
html body[class*="pojo-a11y-resize-font-"] .field-col textarea,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-select{
font-size:calc(16px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .wpcf7-submit{
font-size:calc(22px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .submit-btn img{
width:calc(18px * var(--a11y-scale-form)) !important;
}
}
/* -- CF7 response output: a
, so the plugin never touches it ----------- */
/* theme: font-size 0.9vw (= 8.1px at 900, 3.4px at 375!), line-height 1.8vh */
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;
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.sent .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.failed .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.aborted .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 form.invalid .wpcf7-response-output{
font-size:calc(14px * var(--a11y-scale-form)) !important;
line-height:1.4 !important;
}
}
html body[class*="pojo-a11y-resize-font-"] .success-message,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 .success-message{
font-size:calc(max(14px, 1.2vw) * var(--a11y-scale-form)) !important;
line-height:1.3 !important;
height:auto !important;
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .success-message,
html body[class*="pojo-a11y-resize-font-"] .wpcf7 .success-message{
font-size:calc(18px * var(--a11y-scale-form)) !important;
}
}
/* -- validation tips: must stay on ONE line -------------------------------- */
/* Audited: position:relative in every band - no fixed px anchor anywhere on
this site, so no re-anchoring is needed (section 4d is N/A here).
What IS broken: line-height is 1.5vh (12px, frozen) while the font runs to
256px, so the tip wrapped to 2-5 overlapping lines. Unitless line-height +
nowrap fixes both; min() caps the size so a nowrap tip can never overflow
its column. Verified: no overflow:hidden ancestor between tip and . */
html body[class*="pojo-a11y-resize-font-"] .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-"] .checkbox-group .wpcf7-not-valid-tip{
font-size:min(calc(max(13px, 0.7vw) * var(--a11y-scale-form)), 1.5vw) !important;
line-height:1.35 !important;
white-space:nowrap !important;
overflow:visible !important;
}
@media (min-width:768px) and (max-width:1200px){
html body[class*="pojo-a11y-resize-font-"] .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-"] .checkbox-group .wpcf7-not-valid-tip{
font-size:min(calc(13px * var(--a11y-scale-form)), 1.9vw) !important;
}
}
@media (max-width:767px){
/* theme: font 14px / line-height 20px / margin -14px 0 2px */
html body[class*="pojo-a11y-resize-font-"] .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-"] .checkbox-group .wpcf7-not-valid-tip{
font-size:min(calc(14px * var(--a11y-scale-form)), 4.4vw) !important;
line-height:1.35 !important;
margin-top:2px !important;
margin-bottom:2px !important;
}
}
/* ==========================================================================
SECTION 4b - elements that carry an intentional size of their own
--------------------------------------------------------------------------
Section 3 flattens p / li / span / label to `inherit`, which would also wipe
these. Restated here explicitly, including everything the theme wrote with
:where() - `.privacy-content :where(p,li,a,div)` is (0,2,0) and loses to the
section 3 rule, so it has to be spelled out.
Bands are written non-overlapping so the theme's own !important / source
order asymmetries cannot change the effective value.
========================================================================== */
/* consent checkbox label - theme: 0.6vw / 1vw!imp (768-1200) / 11px!imp (<=600) */
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label{
font-size:calc(max(13px, 0.6vw) * var(--a11y-scale-form)) !important;
line-height:1.5 !important;
}
@media (min-width:768px) and (max-width:1200px){
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label{
font-size:calc(max(13px, 1vw) * var(--a11y-scale-form)) !important;
}
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .form-order form .wpcf7-list-item-label{
font-size:calc(11px * var(--a11y-scale-form)) !important;
line-height:1.6 !important;
}
}
/* legal text + its links -
is not in the plugin's selector list, so it was
frozen at 9.6px / 9px / 11px at every step. */
html body[class*="pojo-a11y-resize-font-"] .legal-text p,
html body[class*="pojo-a11y-resize-font-"] .checkbox-inner p{
font-size:calc(max(12px, 0.6vw) * var(--a11y-scale-form)) !important;
line-height:1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .legal-text a,
html body[class*="pojo-a11y-resize-font-"] .legal-links a{
font-size:calc(max(12px, 0.67vw) * var(--a11y-scale-form)) !important;
line-height:1.6 !important;
}
@media (min-width:768px) and (max-width:1200px){
html body[class*="pojo-a11y-resize-font-"] .legal-text p,
html body[class*="pojo-a11y-resize-font-"] .checkbox-inner p,
html body[class*="pojo-a11y-resize-font-"] .legal-text a,
html body[class*="pojo-a11y-resize-font-"] .legal-links a{
font-size:calc(max(12px, 1vw) * var(--a11y-scale-form)) !important;
}
}
@media (min-width:601px) and (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .legal-text p,
html body[class*="pojo-a11y-resize-font-"] .checkbox-inner p,
html body[class*="pojo-a11y-resize-font-"] .legal-text a,
html body[class*="pojo-a11y-resize-font-"] .legal-links a{
font-size:calc(13px * var(--a11y-scale-form)) !important;
}
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .legal-text p,
html body[class*="pojo-a11y-resize-font-"] .checkbox-inner p,
html body[class*="pojo-a11y-resize-font-"] .legal-text a,
html body[class*="pojo-a11y-resize-font-"] .legal-links a{
font-size:calc(11px * var(--a11y-scale-form)) !important;
}
}
/* form heading column - theme: 1.2vw / 1.3vw!imp (768-1200) / 15px (<=600) */
html body[class*="pojo-a11y-resize-font-"] .contact-form-heading p{
font-size:calc(max(14px, 1.2vw) * var(--a11y-scale-form)) !important;
line-height:1.2 !important;
}
@media (min-width:768px) and (max-width:1200px){
html body[class*="pojo-a11y-resize-font-"] .contact-form-heading p{
font-size:calc(max(14px, 1.3vw) * var(--a11y-scale-form)) !important;
}
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .contact-form-heading p{
font-size:calc(15px * var(--a11y-scale-form)) !important;
}
}
html body[class*="pojo-a11y-resize-font-"] .contact-form .form-heading{
font-size:calc(30px * var(--a11y-scale)) !important;
line-height:1.1 !important;
}
/* inline emphasis spans used by the Elementor copy */
html body[class*="pojo-a11y-resize-font-"] .currency-fonts,
html body[class*="pojo-a11y-resize-font-"] .elementor .currency-fonts{font-size:calc(1.8vw * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] .small-fonts,
html body[class*="pojo-a11y-resize-font-"] .elementor .small-fonts{font-size:calc(1.5vw * var(--a11y-scale)) !important;}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .currency-fonts,
html body[class*="pojo-a11y-resize-font-"] .elementor .currency-fonts{font-size:calc(29px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] .small-fonts,
html body[class*="pojo-a11y-resize-font-"] .elementor .small-fonts{font-size:calc(18px * var(--a11y-scale)) !important;}
}
/* price cluster on / - the two spans inside the price heading each carry their
own size, so section 3 flattened them to the heading's. Measured at 1440:
.price-after went 11.52 -> 73.73px (6.4x) and .price-before 28.8 -> 73.73px,
which is what pushed "החל מ-" over the gold band in full price size and blew
the heading out to 394px of text in a 341px box. .price-after is absolutely
positioned on a % top, so it tracks once it is the right size again. */
html body[class*="pojo-a11y-resize-font-"] .price-before{
font-size:calc(2vw * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .price-after{
font-size:calc(0.8vw * var(--a11y-scale)) !important;line-height:1 !important;
}
@media (max-width:767px){
/* mobile design values, left unscaled - see section 7 for why */
html body[class*="pojo-a11y-resize-font-"] .price-before{font-size:9vw !important;}
html body[class*="pojo-a11y-resize-font-"] .price-after{font-size:4vw !important;line-height:1 !important;}
}
/* banner slider notice */
html body[class*="pojo-a11y-resize-font-"] .slider-fullscreen .img-notice{font-size:calc(16px * var(--a11y-scale)) !important;}
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .slider-fullscreen .img-notice{font-size:calc(14px * var(--a11y-scale)) !important;}
}
/* privacy / accessibility statement modal - the :where() restatement */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{
font-size:calc(max(16px, 1.4vw) * var(--a11y-scale)) !important;line-height:1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3{
font-size:calc(max(15px, 1.1vw) * var(--a11y-scale)) !important;line-height:1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span{
font-size:calc(max(14px, 0.8vw) * var(--a11y-scale)) !important;line-height:1.6 !important;
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2{font-size:calc(18px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3{font-size:calc(16px * var(--a11y-scale)) !important;}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span{font-size:calc(12px * var(--a11y-scale)) !important;}
}
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link{
font-size:calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;line-height:1.3 !important;
}
@media (max-width:600px){
html body[class*="pojo-a11y-resize-font-"] .pv-links > span,
html body[class*="pojo-a11y-resize-font-"] .pv-link{font-size:calc(14px * var(--a11y-scale)) !important;}
}
/* theme + Elementor defaults that carry a fixed px size */
html body[class*="pojo-a11y-resize-font-"] .global-btn{font-size:calc(24px * var(--a11y-scale-form)) !important;line-height:1.2 !important;}
html body[class*="pojo-a11y-resize-font-"] .elementor-button{font-size:calc(15px * var(--a11y-scale-form)) !important;}
html body[class*="pojo-a11y-resize-font-"] .elementor-field-textual{font-size:calc(15px * var(--a11y-scale-form)) !important;}
html body[class*="pojo-a11y-resize-font-"] .lightbox .lb-data .lb-caption{font-size:calc(13px * var(--a11y-scale)) !important;line-height:1.3 !important;}
html body[class*="pojo-a11y-resize-font-"] .lightbox .lb-data .lb-number{font-size:calc(12px * var(--a11y-scale)) !important;}
/* ==========================================================================
SECTION 4c - cookie consent banner (#cc-banner-root / .cc-root)
--------------------------------------------------------------------------
The banner is a direct child of , OUTSIDE every content root, so the
section 3 inherit fix cannot reach it. Measured plugin-only at 1440:
.cc-title (h2) 16 -> 24.2 -> 37.2px runaway
.cc-body (p) 14 -> 18.2 -> 28px runaway
.cc-root (div) 14 -> 14 -> 14px frozen
.cc-btn (font-size:inherit - confirmed) 14 -> 14 -> 14px frozen
Every pin below is calc(px * var(--scale...)) - a flat px pin would stop the
runaway but freeze the banner instead.
Both a bare and a .cc-root-scoped selector are emitted for each pin so the
class column always wins over the generic inherit rule above.
.cc-title / .cc-btn use the FORM curve with bumped baselines (16 -> 18,
14 -> 15) so the first click is a visible jump.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p,li,span,label,a,div){font-size:inherit !important;}
html body[class*="pojo-a11y-resize-font-"] .cc-root{font-size:calc(14px * var(--a11y-scale)) !important;line-height:1.5 !important;}
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{font-size:calc(15px * var(--a11y-scale-form)) !important;line-height:1.3 !important;height:auto !important;}
html body[class*="pojo-a11y-resize-font-"] .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;}
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{font-size:calc(12px * var(--a11y-scale)) !important;}
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 - TIP POSITIONING for the home page's consent checkbox
--------------------------------------------------------------------------
Two different contact forms exist on this site:
#contactUs / .field-col / .submit-btn - /landing/ and /home-new/ (tip is
position:relative, stays in flow, handled by the line-height fix only)
.main-contact-form / .form-field / .submit-col / .privacy-checkbox - /
On the second one the consent tip is taken out of flow:
.privacy-checkbox.first .wpcf7-not-valid-tip{
position:absolute; bottom:-1.5vw; top:unset; width:100%; }
@media (max-width:767px){ ... top:45px; } / FIXED px /
The trap is WHICH box those offsets resolve against. The row itself is
position:static, and the theme sets `.wpcf7-form-control-wrap{position:
relative !important}` - so the containing block is the WRAP, measured 3px
wide x 22px tall and sitting in the middle of a label that is 87px tall at
step 130 and 176px at step 200. Both the theme's top:45px and a plain
bottom:0 therefore land in the middle of the label text, which is exactly
the red-over-label overlap: measured 104x23px at 1440 and 94x23px at 390,
at steps 130 and 200, and none at all with no step selected.
The fix is to move the containing block, not the offset: make the row the
positioned ancestor and take the wrap (and the p / label between them) out
of the positioning chain, so bottom:0 means the bottom of the ROW. `bottom`
is restated explicitly so nothing depends on :has() support, and the row
gets padding in proportion to the scaled tip so there is somewhere to put
it. Never position:static on the tip - the wrap is 3px wide and the text
would squeeze into a column.
Verified after the fix at 390 / 767 / 900 / 1440 x steps 130 and 200: zero
overlap with the label, tip spans the full row width, spill below row = 0.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox{
position:relative !important;
padding-bottom:calc(max(13px, 0.8vw) * var(--a11y-scale-form) * 1.6 + 6px) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox > p,
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox label.custom-check-label,
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox .wpcf7-form-control-wrap{
position:static !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox .wpcf7-not-valid-tip{
position:absolute !important;
top:auto !important;
bottom:0 !important;
right:0 !important;
left:0 !important;
width:100% !important;
margin:0 !important;
text-align:start !important;
}
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .privacy-checkbox{
padding-bottom:calc(max(13px, 3vw) * var(--a11y-scale-form) * 1.6 + 6px) !important;
}
}
/* ==========================================================================
SECTION 4f - the home page's second form: .main-contact-form
--------------------------------------------------------------------------
/ uses a completely different form from /landing/ and /home-new/, with its
own classes, so none of the section 4 rules above reached it. Its controls
are sized by bare element selectors:
input, textarea, select 1vw / line-height 1 / padding 0.4vw 1vw
@max-767 16px / height 40px / padding 8px 16px !imp
.submit-col .global-btn 1.4vw / line-height 1.3 / padding .29vw 1.4vw
@max-767 5vw / height 40px / padding 9px 20px
`input` IS in the plugin's selector list, so it compounded: measured 16px ->
23.92 -> 51.2px at 390 while the box stayed pinned at the theme's 40px, and
at 1440 the input grew to 89.5px tall while the button stopped at 60.7px -
a 28.8px mismatch. Same treatment as section 4: one shared control height,
derived here from the BUTTON's scaled font (it is the larger of the two) so
the taller label always fits, applied identically to both controls.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .main-contact-form{
--a11y-inp-fs:calc(max(16px, 1vw) * var(--a11y-scale-form));
--a11y-btn-fs:calc(max(18px, 1.4vw) * var(--a11y-scale-form));
--a11y-ctl-h2:calc(var(--a11y-btn-fs) * 1.2 + 14px);
}
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .main-contact-form{
--a11y-inp-fs:calc(16px * var(--a11y-scale-form));
--a11y-btn-fs:calc(5vw * var(--a11y-scale-form));
}
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body[class*="pojo-a11y-resize-font-"] .main-contact-form textarea,
html body[class*="pojo-a11y-resize-font-"] .main-contact-form select{
font-size:var(--a11y-inp-fs) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .submit-col .global-btn,
html body[class*="pojo-a11y-resize-font-"] .submit-col .global-btn{
font-size:var(--a11y-btn-fs) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body[class*="pojo-a11y-resize-font-"] .main-contact-form textarea,
html body[class*="pojo-a11y-resize-font-"] .main-contact-form select,
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .submit-col .global-btn{
height:calc(var(--a11y-ctl-h2)) !important;
min-height:calc(var(--a11y-ctl-h2)) !important;
line-height:1.2 !important;
padding-top:0 !important;
padding-bottom:0 !important;
box-sizing:border-box !important;
}
/* the .global-btn base rule is 24px flat and applies wherever the class is used */
html body[class*="pojo-a11y-resize-font-"] .global-btn{
line-height:1.2 !important;
}
/* text elements of this form - all of them are section 3 casualties */
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p,
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox.first > p{
font-size:calc(max(12px, 0.9vw) * var(--a11y-scale-form)) !important;
line-height:1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .custom-check-label{
font-size:calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important;
line-height:1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox-group .first.last .wpcf7-list-item-label{
font-size:calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important;
line-height:1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child{
font-size:calc(max(13px, 1.18vw) * var(--a11y-scale-form)) !important;
line-height:1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .success-title{
font-size:calc(max(14px, 1vw) * var(--a11y-scale)) !important;line-height:1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .success-subtitle,
html body[class*="pojo-a11y-resize-font-"] .bottom-small-text{
font-size:calc(max(13px, 0.9vw) * var(--a11y-scale)) !important;line-height:1.4 !important;
}
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox p,
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox.first > p{
font-size:calc(12px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .privacy-checkbox .custom-check-label{
font-size:calc(11px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .checkbox-group .first.last .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .first.last .wpcf7-list-item-label{
font-size:calc(14px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-contact-form label span:first-child{
font-size:calc(max(13px, 3.4vw) * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .success-title{
font-size:calc(22px * var(--a11y-scale)) !important;
}
}
/* this form's tip is sized 0.8vw / 3vw@767 rather than the 0.7vw of the other one */
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .main-contact-form .wpcf7-not-valid-tip{
font-size:min(calc(max(13px, 3vw) * var(--a11y-scale-form)), 4.4vw) !important;
}
}
/* ==========================================================================
SECTION 4e - accessibility toolbar menu items
--------------------------------------------------------------------------
NOTE - deliberate, requested deviation from "do not touch #pojo-a11y-toolbar".
Plugin-only, the toolbar item span goes 12.8 -> 16.6 (130) -> 25.6px (200).
Requested: the menu items should grow noticeably LESS than page content, so
they run on --a11y-scale-menu: 12.8 -> 14.1 -> 18.6px.
Scoped to the menu item labels only - the toggle button, the toolbar title
and the toolbar's own 16px base are untouched, and the whole thing is still
gated behind the resize class, so nothing changes until a step is chosen.
========================================================================== */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a span{
font-size:calc(12.8px * var(--a11y-scale-menu)) !important;
line-height:1.5 !important;
}
/* ==========================================================================
SECTION 6 - consent checkbox tick in the contrast / greyscale modes
--------------------------------------------------------------------------
NOT gated on the resize class - these are gated on the mode classes, which
only exist while that mode is on, so RULE A still holds.
The tick is `input[type=checkbox]:checked::before`, a filled block hard-coded
to #fff on a #4271A7 box. Measured per mode:
high contrast box #000 / tick #fff -> ok
negative contrast box #000 / tick #fff -> ok
greyscale box grey / tick #fff -> ok
light background box #fff / tick #fff -> INVISIBLE (the plugin forces
`background:#fff !important` onto every element)
All four are pinned explicitly below so the tick can never be lost, and the
block is re-centred on the box in each mode.
========================================================================== */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked{
background:#000 !important;background-color:#000 !important;
border:2px solid #fff !important;
}
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before{
background-color:#fff !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked{
background:#fff !important;background-color:#fff !important;
border:2px solid #000 !important;
}
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before{
background-color:#000 !important;
}
/* Light background forces `background:#fff` onto every element, and the theme
gives the submit `border:none` - measured: button background #fff on a #fff
form with a 0px border, i.e. the button disappears and its label reads as
loose text sitting between the fields. Give it its outline back. */
html body.pojo-a11y-light-background .submit-btn input,
html body.pojo-a11y-light-background .wpcf7-submit,
html body.pojo-a11y-light-background .global-btn{
border:2px solid #000 !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked{
background:#4271A7 !important;background-color:#4271A7 !important;
border:2px solid #4271A7 !important;
}
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before{
background-color:#fff !important;
}
/* The home page's .main-contact-form draws its tick differently: it is a "✓"
GLYPH (content:"✓"; color:#183e2d), not a filled block. The block rules above
also match it and would paint a solid background behind the character -
measured: white block behind a white glyph in high contrast and negative
contrast, i.e. the tick vanished. Keep the background off it and drive its
colour instead. These come after the block rules and tie on specificity, so
they win on source order. */
html body.pojo-a11y-high-contrast .privacy-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast .privacy-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-grayscale .privacy-checkbox input[type="checkbox"]:checked::before{
background-color:transparent !important;
color:#fff !important;
}
html body.pojo-a11y-light-background .privacy-checkbox input[type="checkbox"]:checked::before{
background-color:transparent !important;
color:#000 !important;
}
/* keep the tick inside the box and centred on it in all four modes */
html body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before,
html body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before{
top:50% !important;
left:50% !important;
right:auto !important;
transform:translate(-50%,-50%) !important;
}
/* ==========================================================================
SECTION 5 - every font-size rule from every Elementor post-*.css, gated
--------------------------------------------------------------------------
Generated 1:1 from post-6.css, post-191.css, post-381.css and post-459.css
(page CSS AND the 191 header / footer template CSS). Selectors that share a
value are grouped; the @media blocks are emitted in each file's own SOURCE
ORDER (base -> 1200 -> 1024 -> 767), because overlapping bands resolve by
order, not specificity. vw at base and px on mobile are BOTH emitted.
Elementor buttons run on --a11y-scale-form, everything else on --a11y-scale.
========================================================================== */
/* --- post-191.css (base) --- */
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-2f70f88 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-419ebc3 .elementor-heading-title{font-size:calc(1.1vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-705aa40 .elementor-heading-title{font-size:calc(1.2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-a70ace8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-a36f4ed .elementor-heading-title{font-size:calc(1.5vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-28242a5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-22a5778 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-6441500 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-1e86ab5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-34ccf25 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-5717e39 .elementor-heading-title{font-size:calc(1vw * var(--a11y-scale)) !important}
/* --- post-191.css @media(max-width:767px) --- */
@media(max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-2f70f88 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-a70ace8 .elementor-heading-title{font-size:calc(23px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-705aa40 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-419ebc3 .elementor-heading-title{font-size:calc(14px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-a36f4ed .elementor-heading-title{font-size:calc(30px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-28242a5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-22a5778 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-6441500 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-1e86ab5 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-34ccf25 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-191 .elementor-element.elementor-element-5717e39 .elementor-heading-title{font-size:calc(15px * var(--a11y-scale)) !important}
}
/* --- post-381.css (base) --- */
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2ff2fbb .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-d5a783a .elementor-heading-title{font-size:calc(2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-f625ac6 .elementor-heading-title{font-size:calc(1.2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-a08ef60 .elementor-heading-title{font-size:calc(1.5vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2d97730 .elementor-heading-title{font-size:calc(0.7vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-db4f600 .elementor-heading-title{font-size:calc(2.5vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-ea42789 .elementor-heading-title{font-size:calc(1.1vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-f1d97ea .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-c56fb74 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-77717f8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-8dafb42 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-71f18f0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2e54e8a .elementor-heading-title{font-size:calc(1vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-0cb40ea .elementor-heading-title{font-size:calc(0.8vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-d0dc139 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-62c424e .elementor-button{font-size:calc(1.23vw * var(--a11y-scale-form)) !important}
/* --- post-381.css @media(max-width:1200px) --- */
@media(max-width:1200px){
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-db4f600 .elementor-heading-title{font-size:calc(2vw * var(--a11y-scale)) !important}
}
/* --- post-381.css @media(max-width:1024px) --- */
@media(max-width:1024px){
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-d0dc139 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-62c424e .elementor-button{font-size:calc(2.4vw * var(--a11y-scale-form)) !important}
}
/* --- post-381.css @media(max-width:767px) --- */
@media(max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2ff2fbb .elementor-heading-title{font-size:calc(30px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-d5a783a .elementor-heading-title{font-size:calc(40px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2d97730 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-0cb40ea .elementor-heading-title{font-size:calc(12px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-db4f600 .elementor-heading-title{font-size:calc(27px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-ea42789 .elementor-heading-title{font-size:calc(20px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-f1d97ea .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-c56fb74 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-77717f8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-8dafb42 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-71f18f0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-2e54e8a .elementor-heading-title{font-size:calc(15px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-d0dc139 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-381 .elementor-element.elementor-element-62c424e .elementor-button{font-size:calc(4.6vw * var(--a11y-scale-form)) !important}
}
/* --- post-459.css (base) --- */
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-18a1882 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-19be5db .elementor-heading-title{font-size:calc(1vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-d5cfe09 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-9096167 .elementor-heading-title{font-size:calc(3vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-dec4e16 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-8527d34 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-a780c2e .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-4c00274 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-1878022 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-1878022 .elementor-icon-list-item > a{font-size:calc(0.8vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-2a51ad8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-efc70ac .elementor-heading-title{font-size:calc(1.3vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-b9609a3 .elementor-heading-title{font-size:calc(3.2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-9d5f5fb .elementor-heading-title{font-size:calc(2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-5ba2f1e .elementor-heading-title{font-size:calc(1.2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-05b584f .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-3799de1 .elementor-heading-title{font-size:calc(1.5vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-17d5491 .elementor-button{font-size:calc(1.23vw * var(--a11y-scale-form)) !important}
/* --- post-459.css @media(max-width:1024px) --- */
@media(max-width:1024px){
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-17d5491 .elementor-button{font-size:calc(2.4vw * var(--a11y-scale-form)) !important}
}
/* --- post-459.css @media(max-width:767px) --- */
@media(max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-18a1882 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-1878022 .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-1878022 .elementor-icon-list-item > a{font-size:calc(12px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-d5cfe09 .elementor-heading-title{font-size:calc(41px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-9096167 .elementor-heading-title{font-size:calc(45px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-dec4e16 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-8527d34 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-a780c2e .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-4c00274 .elementor-heading-title{font-size:calc(16px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-19be5db .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-05b584f .elementor-heading-title{font-size:calc(19px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-2a51ad8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-efc70ac .elementor-heading-title{font-size:calc(17px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-b9609a3 .elementor-heading-title{font-size:calc(17vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-9d5f5fb .elementor-heading-title{font-size:calc(34px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-5ba2f1e .elementor-heading-title{font-size:calc(20px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-3799de1 .elementor-heading-title{font-size:calc(27px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-17d5491 .elementor-button{font-size:calc(4.6vw * var(--a11y-scale-form)) !important}
}
/* --- post-6.css (base) --- */
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-eee50b3 .elementor-heading-title{font-size:calc(1.8vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ea7dc00 .elementor-heading-title{font-size:calc(2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-67f3a2c .elementor-heading-title{font-size:calc(1vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2b93b3d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-0c785b9 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-09e255b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-983acfc .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-dfed102 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ad221a6 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-5fe2fc0 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6f0947a .elementor-heading-title{font-size:calc(0.8vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-abd9591 .elementor-heading-title{font-size:calc(1.2vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c23104 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-d63a0a4 .elementor-heading-title{font-size:calc(1.5vw * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-47052d3 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-f048202 .elementor-button{font-size:calc(1.23vw * var(--a11y-scale-form)) !important}
/* --- post-6.css @media(max-width:1024px) --- */
@media(max-width:1024px){
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-47052d3 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-f048202 .elementor-button{font-size:calc(2.4vw * var(--a11y-scale-form)) !important}
}
/* --- post-6.css @media(max-width:767px) --- */
@media(max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-eee50b3 .elementor-heading-title{font-size:calc(30px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ea7dc00 .elementor-heading-title{font-size:calc(40px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-67f3a2c .elementor-heading-title{font-size:calc(20px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2b93b3d .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-0c785b9 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-09e255b .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-983acfc .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-dfed102 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ad221a6 .elementor-heading-title{font-size:calc(15px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-6f0947a .elementor-heading-title{font-size:calc(12px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-47052d3 .elementor-button,
html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-f048202 .elementor-button{font-size:calc(4.6vw * var(--a11y-scale-form)) !important}
}
/* ==========================================================================
SECTION 7 - display numerals / badges must never wrap or overflow
--------------------------------------------------------------------------
These headings are sized in vw and sit in fit-content boxes whose width is
set by the surrounding Elementor containers, so once the font grows the text
no longer fits and either wraps or bleeds over the artwork behind it.
Measured (deployed scale, no fix) at 1440 / step 200:
/ .price-text "החל מ-1,990,000 ₪" 394px of text in a 341px box
/home-new/ db4f600 "1,990,000 ₪" 274px in 224px -> 2 lines,
with the absolutely positioned 2d97730 "החל מ-"
then landing on top of that second line
f625ac6 "PRESALE" 154px in 117px
a08ef60 "3-5 חד׳" wrapped to 2 lines
/landing/ abd9591 "PRESALE" 154px in 113px
From 768px up there is room beside them, so: keep them on one line, let the
box size to its content, and let the Elementor containers holding them grow
too. Verified after the fix: each reports scrollWidth == clientWidth on a
single line at steps none/130/200 with no horizontal page overflow.
The :has() rules sit in their own block, so a browser without :has() support
just keeps the nowrap + max-content behaviour.
========================================================================== */
@media (min-width:768px){
html body[class*="pojo-a11y-resize-font-"] .price-text .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-db4f600 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-2d97730 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-f625ac6 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-abd9591 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-a08ef60 .elementor-heading-title{
white-space:nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] .price-text,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-db4f600,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-f625ac6,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-abd9591,
html body[class*="pojo-a11y-resize-font-"] .elementor-element-a08ef60{
width:max-content !important;
max-width:100% !important;
}
}
@media (min-width:768px){
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .price-text),
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .e-con > .price-text),
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .elementor-element-db4f600),
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .elementor-element-f625ac6),
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .elementor-element-abd9591),
html body[class*="pojo-a11y-resize-font-"] .e-con:has(> .elementor-element-a08ef60){
min-width:max-content !important;
}
}
/* Below 768px the mobile design already sets the price to 17vw - measured at
390px it is 66.3px and its two lines fill 328px of a 330px box, i.e. it is
maxed out. Scaling it there pushed 567px of text onto a 390px screen and
blew the layout viewport out to 597px. So on mobile the price keeps its own
design size: it is a 66px display numeral already, well past any legibility
need, and every other element on the page still scales normally.
Selector carries .elementor + .price-text + .elementor-widget so it ties with
the section 5 rule and wins on source order. */
@media (max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor .price-text.elementor-widget .elementor-heading-title{
font-size:17vw !important;
}
}
/* ==========================================================================
SECTION 5b - Elementor's px line-heights (mobile block only)
--------------------------------------------------------------------------
At base Elementor writes line-height in em / unitless / %, which all track a
scaled font-size on their own. Inside @media(max-width:767px) it writes some
of them in PX, which do not - so the lines collided as soon as the font grew.
Measured on / at 390px, step 200:
3799de1 "השאירו פרטים ונציג..." font 43.2px, line-height still 26px (0.60)
dec4e16 / 8527d34 / a780c2e / 4c00274 font 25.6px, line-height 20px (0.78)
Same treatment as the font sizes: mirror the value and multiply by the curve.
(0.8em / 0.2em / 131% values in the same block are deliberately left alone -
they track by themselves and their tight ratio is the design.)
========================================================================== */
@media(max-width:767px){
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-dec4e16 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-8527d34 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-a780c2e .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-4c00274 .elementor-heading-title{line-height:calc(20px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-2a51ad8 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-efc70ac .elementor-heading-title{line-height:calc(17px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-9d5f5fb .elementor-heading-title{line-height:calc(30px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-5ba2f1e .elementor-heading-title{line-height:calc(19px * var(--a11y-scale)) !important}
html body[class*="pojo-a11y-resize-font-"] .elementor-459 .elementor-element.elementor-element-3799de1 .elementor-heading-title{line-height:calc(26px * var(--a11y-scale)) !important}
}