/* ============================================================================= Accessibility support - One Click Accessibility (Pojo) font resize + contrast ----------------------------------------------------------------------------- Site : https://introoffice.lp-efficapital.co.il/ Why : the layout is sized in vw/vh. The plugin only emits `font-size: NN%`, which resolves against the PARENT, so vw text never moves while nested CF7 spans compound to hundreds of px. Every rule below is gated behind a `body.pojo-a11y-*` class, so with nothing selected - and after Reset - the rendered page is identical to the original design (verified: 0 computed-style / geometry diffs across 422 nodes). Specificity notes - Section 3 deliberately omits the leading `html` so it stays at (0,2,2); the later, equally specific pins in Sections 4-5 then win on source order. With `html` in front it is (0,2,3) and it silently flattens them. - A ~130-rule handwritten a11y block is printed from the database AFTER this file and several of its rules carry `!important` with an ID in the selector (`:not(#pojo-a11y-toolbar)`). `:not(#a11y-x):not(#a11y-y)` only exists to raise the ID column so those rules can be corrected. ========================================================================== */ /* ============================================================================= SECTION 1 - scale curves Three curves: page text, form/banner UI (starts smaller, needs a bigger first jump), and the accessibility toolbar itself (deliberately the gentlest - the menu items should stay visibly smaller than page copy). ========================================================================== */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-ui: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-ui: 1.08; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-ui: 1.12; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-ui: 1.16; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-ui: 1.20; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-ui: 1.24; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-ui: 1.28; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-ui: 1.32; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-ui: 1.35; } /* ============================================================================= SECTION 2 - the base pin Measured baseline: body = 18px (assets/css/style.css). Deliberately NOT scoped to a content root, so the accessibility toolbar popup keeps behaving normally. calc(), never a flat px, or the toolbar freezes at one size. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(18px * var(--a11y-scale)) !important; } /* ============================================================================= SECTION 3 - kill the compounding (keep at (0,2,2) - see header note) `.elementor` is the only content root on this page; the Elementor popup and lightbox are appended to and are handled on the second selector list. input/select/textarea are excluded on purpose - Section 4 owns them. ========================================================================== */ 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 legend, body[class*="pojo-a11y-resize-font-"] .elementor blockquote, body[class*="pojo-a11y-resize-font-"] .elementor code, body[class*="pojo-a11y-resize-font-"] .elementor pre, body[class*="pojo-a11y-resize-font-"] .elementor dd, body[class*="pojo-a11y-resize-font-"] .elementor dt, body[class*="pojo-a11y-resize-font-"] .dialog-widget p, body[class*="pojo-a11y-resize-font-"] .dialog-widget span, body[class*="pojo-a11y-resize-font-"] .dialog-widget li, body[class*="pojo-a11y-resize-font-"] .dialog-widget label { font-size: inherit !important; } /* ============================================================================= SECTION 4 - form controls, validation and response messages One rule per selector PER BREAKPOINT, mirroring the theme 1:1, media blocks in the theme's own source order (base -> 767 -> 600 -> 2400). px/vw only, never em (CF7 nesting compounds) and never rem. ========================================================================== */ /* ---- 4.1 text inputs + submit: identical box on every device -------------- Baseline desktop is input 36px (3vh + 2 x 2vh padding) and submit 36px (4vh). Both are pinned to the same scaled 4vh box with the vertical padding folded in, so they stay exactly the same height at every step. */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="submit"] { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; height: calc(4vh * var(--a11y-scale-form)) !important; min-height: calc(4vh * var(--a11y-scale-form)) !important; line-height: normal !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] { width: 100% !important; min-width: 0 !important; padding-right: 0.8vw !important; padding-left: 0.8vw !important; /* the gap between fields comes from column-gap below - a margin on a `width: 100%` flex item just overflows into its neighbour */ margin-left: 0 !important; margin-right: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit { width: auto !important; min-width: 6.5vw !important; padding-right: 1vw !important; padding-left: 1vw !important; } /* The four columns share the row and shrink together instead of one field forcing a wrap. `flex-basis: 0` is what keeps them on one line. */ /* row-gap has to clear a one-line validation tip, because the tip is absolutely positioned at `top: 100%` of its field - anything smaller and the message is drawn over the next input (or over the submit button). column-gap restores the visible separation between the four columns. */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout { flex-wrap: wrap !important; align-items: stretch !important; column-gap: 0.8vw !important; row-gap: calc(max(11px, 0.7vw) * var(--a11y-scale) * 1.4 + 8px) !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > .field-wrapper-placeholder { flex: 1 1 0 !important; min-width: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > .field-wrapper-placeholder > p, html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > p { margin: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > p { flex: 0 0 auto !important; } /* From 170% up a four-column row cannot hold a readable field plus a one-line validation message, so the fields go full width and stack. */ html body.pojo-a11y-resize-font-170 .cf7-vertical-layout > .field-wrapper-placeholder, html body.pojo-a11y-resize-font-180 .cf7-vertical-layout > .field-wrapper-placeholder, html body.pojo-a11y-resize-font-190 .cf7-vertical-layout > .field-wrapper-placeholder, html body.pojo-a11y-resize-font-200 .cf7-vertical-layout > .field-wrapper-placeholder, html body.pojo-a11y-resize-font-170 .cf7-vertical-layout > p, html body.pojo-a11y-resize-font-180 .cf7-vertical-layout > p, html body.pojo-a11y-resize-font-190 .cf7-vertical-layout > p, html body.pojo-a11y-resize-font-200 .cf7-vertical-layout > p { flex: 1 1 100% !important; text-align: center !important; } /* ---- 4.2 consent row ------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical p { font-size: calc(max(12px, 0.7vw) * var(--a11y-scale-form)) !important; line-height: 1.45 !important; } /* Contact Form 7 stamps dir="ltr" on its own wrapper (the form's locale is en_US), so as soon as the label wraps, the box drops onto a new line at the left. Force the row to read right-to-left and keep the box at the RTL start. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item label { direction: rtl !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.5vw !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item label > input[type="checkbox"] { order: -1 !important; margin-right: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item label > span.wpcf7-list-item-label { order: 0 !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; direction: rtl !important; text-align: right !important; } /* Square box, tied to the label size, tick always centred and inside it. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; height: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; min-width: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; flex: 0 0 auto !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form) * 0.72) !important; } /* ---- 4.3 validation tips - one line, out of flow, never over the field ---- The theme gives the tip `line-height: 0.8vh` (a ~7px line box for 11px text) and leaves it in flow, so it is drawn across whatever follows. Anchor it under its own field instead. Uses --a11y-scale (not the form curve) so the message stays narrow enough to sit beside its neighbours. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-form-control-wrap { position: relative !important; display: inline-block !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { position: absolute !important; top: 100% !important; bottom: auto !important; right: 0 !important; left: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; font-size: calc(max(11px, 0.7vw) * var(--a11y-scale)) !important; line-height: 1.35 !important; direction: rtl !important; text-align: right !important; z-index: 5 !important; } /* Reserve the strip the absolute tip sits in, so nothing is drawn over. */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical { padding-bottom: calc(max(11px, 0.7vw) * var(--a11y-scale) * 1.5 + 6px) !important; } /* The theme sizes the success / error banner with `width: fit-content`, so once the text grows it becomes a narrow column of wrapped lines. Let it use the full width of the form. */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important; text-align: center !important; padding: calc(4px * var(--a11y-scale-form)) calc(8px * var(--a11y-scale-form)) !important; } /* ============================================================================= SECTION 4b - elements that own an intentional size (including the `:where()` rules, which have ZERO specificity and would otherwise be flattened). ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(1.4vw * var(--a11y-scale)) !important; line-height: 1.6 !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 { font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.7 !important; } /* ============================================================================= SECTION 4c - cookie banner (#cc-banner-root, a sibling of .elementor, so the Section 3 inherit-fix cannot reach it). `.cc-btn` is `font-size: inherit`, so without an explicit pin it freezes while `.cc-title`/`.cc-body` run away. Every pin is a calc(), never a flat px. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] .cc-root p, html body[class*="pojo-a11y-resize-font-"] .cc-root li, html body[class*="pojo-a11y-resize-font-"] .cc-root span, html body[class*="pojo-a11y-resize-font-"] .cc-root label, html body[class*="pojo-a11y-resize-font-"] .cc-root a { 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.4 !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; } 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; } 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-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; } /* ============================================================================= SECTION 4d - the accessibility toolbar itself The menu items grow, but noticeably less than page copy (--a11y-scale-ui). Measured baselines: toggle 21.6px, title 16px, item link/span 12.8px. ========================================================================== */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a span { font-size: calc(12.8px * var(--a11y-scale-ui)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar p.pojo-a11y-toolbar-title { font-size: calc(16px * var(--a11y-scale-ui)) !important; } html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a, html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a span { font-size: calc(21.6px * var(--a11y-scale-ui)) !important; } /* ============================================================================= SECTION 5 - every font-size rule of the page, gated and scaled Mirrors wp-content/uploads/sites/10/elementor/css/post-6.css 1:1: base (vw) first, then the theme's own @media(max-width:767px) block (px). ========================================================================== */ /* ---- 5.1 0.8vw : intro copy + both feature strips ----------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8cdb7da .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2455c8a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-9a19dfd .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3d0f32d .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-15471e7 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-85c9b9b .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c1b48cc .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-50c4ba2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3df0af5 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ee20f30 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-4851493 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2899f76 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c6ef045 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82ff5b4 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ec8649a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-203a265 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-586774e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-e257cc2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c21370 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8ab7675 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-be3f35e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c5dc24a .elementor-heading-title { font-size: calc(0.8vw * var(--a11y-scale)) !important; } /* ---- 5.2 1.12vw : the price line ---------------------------------------- It is right-aligned by default, which reads as ragged the moment it wraps to a second or third line between the two diamond ornaments - centre it, and give it breathing room top and bottom so it never touches them. */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b7c5724 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-1125df1 .elementor-heading-title { font-size: calc(1.12vw * var(--a11y-scale)) !important; text-align: center !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b7c5724, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-1125df1 { text-align: center !important; padding-top: calc(10px * var(--a11y-scale)) !important; padding-bottom: calc(10px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-1b572b8, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b891896 { --padding-top: calc(6px * var(--a11y-scale)); --padding-bottom: calc(6px * var(--a11y-scale)); } /* ---- 5.3 1vw : the form heading ----------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-771f6da .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b4325f2 .elementor-heading-title { font-size: calc(1vw * var(--a11y-scale)) !important; line-height: 1.4 !important; white-space: normal !important; } /* ---- 5.4 0.7vw : legal / disclaimer copy -------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-27f7788 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-9391c5b .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-77bb85f .elementor-heading-title { font-size: calc(0.7vw * var(--a11y-scale)) !important; } /* ---- 5.5 the feature strips must reflow, not shred ---------------------- The desktop strip (2139dfd) is a 6-item `flex-wrap: nowrap` row of auto-width widgets separated by 1px borders; the two mobile strips use fixed percentage widths. Left alone, a larger font squeezes each cell until Hebrew breaks one letter per line. Allow wrapping, let each cell take its content width, and forbid the text itself from breaking. */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2139dfd, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ab35527, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-197c758 { flex-wrap: wrap !important; --flex-wrap: wrap; justify-content: center !important; row-gap: 0.8vh !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-85c9b9b, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c1b48cc, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-50c4ba2, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3df0af5, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ee20f30, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-4851493, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-586774e, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-e257cc2, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c21370, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8ab7675, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-be3f35e, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c5dc24a { --container-widget-width: auto; --container-widget-flex-grow: 0; width: auto !important; max-width: none !important; flex: 0 0 auto !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-85c9b9b .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c1b48cc .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-50c4ba2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3df0af5 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ee20f30 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-4851493 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-586774e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-e257cc2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c21370 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8ab7675 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-be3f35e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c5dc24a .elementor-heading-title { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } /* ============================================================================= SECTION 5m - the theme's own @media(max-width:767px) block, mirrored ========================================================================== */ @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8cdb7da .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2455c8a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-9a19dfd .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3d0f32d .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-15471e7 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b7c5724 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-85c9b9b .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c1b48cc .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-50c4ba2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3df0af5 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ee20f30 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-4851493 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-771f6da .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-27f7788 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-b4325f2 .elementor-heading-title { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-2899f76 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c6ef045 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-82ff5b4 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ec8649a .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-203a265 .elementor-heading-title { font-size: calc(10px * var(--a11y-scale)) !important; line-height: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-1125df1 .elementor-heading-title { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-586774e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-e257cc2 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-3c21370 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-8ab7675 .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-be3f35e .elementor-heading-title, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-c5dc24a .elementor-heading-title { font-size: calc(10px * var(--a11y-scale)) !important; line-height: calc(13px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-9391c5b .elementor-heading-title { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-77bb85f .elementor-heading-title { font-size: calc(10px * var(--a11y-scale)) !important; } /* theme responsive.css @767 */ html body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip { font-size: calc(11px * var(--a11y-scale)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical { padding-bottom: calc(11px * var(--a11y-scale) * 1.5 + 6px) !important; } } /* ============================================================================= SECTION 5s - the site's own @media(max-width:600px) block, mirrored (comes after the 767 block, exactly as in the original source order) ========================================================================== */ @media (max-width: 600px) { /* Baseline here is a 46px input (26px line + 9px padding x2 + 1px border x2) against a 28px submit - they are visibly different heights. Both are given the same box: the 18px of chrome plus a scaled 28px text row. */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout .wpcf7-submit, html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="submit"] { font-size: calc(14px * var(--a11y-scale-form)) !important; height: calc(18px + 28px * var(--a11y-scale-form)) !important; min-height: calc(18px + 28px * var(--a11y-scale-form)) !important; width: 100% !important; min-width: 0 !important; line-height: normal !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 9px !important; padding-left: 9px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* `.cf7-vertical-layout` is `display: block` at this width, so row-gap does not apply - each stacked field needs its own clearance for the absolutely positioned validation tip below it. The clearance must sit on the field WRAPPER, not on the input: a margin on the input falls inside the inline-block `.wpcf7-form-control-wrap`, which pushes the tip's `top:100%` anchor down to the next field instead of clearing it. */ html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > .field-wrapper-placeholder { margin-bottom: calc(11px * var(--a11y-scale) * 1.4 + 10px) !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout > .field-wrapper-placeholder > p { margin: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="text"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="tel"], html body[class*="pojo-a11y-resize-font-"] .cf7-vertical-layout input[type="email"] { margin-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical, html body[class*="pojo-a11y-resize-font-"] .checkbox-row-vertical p { font-size: calc(12px * var(--a11y-scale-form)) !important; line-height: 1.45 !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(15px * var(--a11y-scale-form)) !important; height: calc(15px * var(--a11y-scale-form)) !important; min-width: calc(15px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(15px * var(--a11y-scale-form) * 0.72) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7-list-item label { gap: 8px !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { 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 { font-size: calc(12px * var(--a11y-scale)) !important; } /* The feature strips are percentage-width here; free them too. */ html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-ab35527, html body[class*="pojo-a11y-resize-font-"] .elementor-6 .elementor-element.elementor-element-197c758 { flex-wrap: wrap !important; --flex-wrap: wrap; } } /* ============================================================================= SECTION 5x - the site's own @media(min-width:2400px) block, mirrored ========================================================================== */ @media (min-width: 2400px) { html body[class*="pojo-a11y-resize-font-"] .wpcf7-checkbox input[type="checkbox"] { width: calc(1vw * var(--a11y-scale-form)) !important; height: calc(1vw * var(--a11y-scale-form)) !important; min-width: calc(1vw * var(--a11y-scale-form)) !important; } } /* ============================================================================= SECTION 6 - contrast modes Independent of the font-size steps, so these are gated on the contrast classes instead. Grayscale is intentionally left alone - it is only a filter, it breaks nothing, and touching it would change that mode's appearance. The `:not(#a11y-x):not(#a11y-y)` pair only raises the ID column so the database block printed after this file can be corrected. ========================================================================== */ /* ---- 6.1 placeholders ----------------------------------------------------- High / negative contrast paint every input black but leave ::placeholder at the theme's `color: black`, so the hint text disappears. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) input::placeholder, html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) textarea::placeholder, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) input::placeholder, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) textarea::placeholder { color: #ffffff !important; opacity: 1 !important; } html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) input::placeholder, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) textarea::placeholder { color: #000000 !important; opacity: 1 !important; } /* ---- 6.2 text inputs need a visible edge in high contrast ----------------- The site sets `border: none !important` on the CF7 fields (0,2,1), which outranks the plugin's own `border: 1px solid #fff` (0,1,1). */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout input[type="text"], html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout input[type="tel"], html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout input[type="email"], html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout .wpcf7-submit, html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout input[type="submit"] { border: 1px solid #ffffff !important; } /* ---- 6.3 the consent checkbox tick --------------------------------------- The tick is a `::after` glyph, which no contrast mode recolours. On the dark modes the box turns black, so the tick must be white; the database block forces it white in light-background mode too, where the box is white - there it has to be black. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .wpcf7-checkbox input[type="checkbox"]:checked::after, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .wpcf7-checkbox input[type="checkbox"]:checked::after { color: #ffffff !important; } html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .wpcf7-checkbox input[type="checkbox"]:checked::after { color: #000000 !important; } /* Keep the glyph centred inside the box at every size and in every mode. */ html body[class*="pojo-a11y-"] .wpcf7-checkbox input[type="checkbox"]:checked::after { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; transform: none !important; line-height: 1 !important; } /* ---- 6.4 popup close button ---------------------------------------------- `a.dialog-close-button` is a full-width flex strip. It is transparent by default, but the dark modes give every a black background, which paints a black bar across the top of the map popup and hides the icon inside it. Light-background mode already neutralises it in the database block - this reproduces that same result in the two dark modes. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .dialog-close-button { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .dialog-close-button, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .dialog-close-button, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .dialog-close-button { left: auto !important; right: 3% !important; width: auto !important; } html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button svg, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button svg, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .dialog-close-button svg { background: transparent !important; background-color: transparent !important; fill: #000000 !important; color: #000000 !important; } html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button i, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .dialog-close-button i, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .dialog-close-button i { color: #000000 !important; background: transparent !important; } /* ---- 6.5 the two diamond ornaments around the price line ------------------ They are the background-image of the container that wraps the price heading, and every dark mode kills background images outright (`background-image: none !important` on div). Put each container's own image back, together with the position/size the `background` shorthand wiped. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-1b572b8, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-1b572b8 { background-image: url("/wp-content/uploads/sites/10/2025/09/vector-star-blue.png") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896 { background-image: url("/wp-content/uploads/sites/10/2025/09/intro-bg-1.png") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } @media (max-width: 767px) { html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896 { background-image: url("/wp-content/uploads/sites/10/2025/09/vector-star-blue-2-mob.png") !important; } } /* Restoring the image is only half the job: every contrast mode also paints an opaque background on the price heading that sits on top of it, which hides the middle of both rules and the inner half of each diamond - all that survives is two stubs at the edges and a half-diamond. The heading is the only child of these containers, so clearing its background lets the ornament show through. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-1b572b8 *, html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896 *, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-1b572b8 *, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896 *, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-1b572b8 *, html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-b891896 * { background: transparent !important; background-color: transparent !important; } /* ---- 6.6 the sticky mobile call-to-action bar ---------------------------- Its label is an image, so on a black page the whole bar has no edge at all. Give it a border that reads against each mode's background. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-e39d2a7, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-e39d2a7 { border: 1px solid #ffffff !important; } html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .elementor-6 .elementor-element.elementor-element-e39d2a7 { border: 1px solid #000000 !important; } /* Same treatment for the form's own submit button on mobile. */ @media (max-width: 600px) { html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout .wpcf7-submit, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout .wpcf7-submit { border: 1px solid #ffffff !important; } html body.pojo-a11y-light-background:not(#a11y-x):not(#a11y-y) .cf7-vertical-layout .wpcf7-submit { border: 1px solid #000000 !important; } } /* ---- 6.7 the map popup itself -------------------------------------------- Keep the image readable in the dark modes, exactly as light-background already renders it. */ html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .dialog-message, html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .elementor-widget-image, html body.pojo-a11y-high-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .elementor-widget-image img, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .dialog-message, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .elementor-widget-image, html body.pojo-a11y-negative-contrast:not(#a11y-x):not(#a11y-y) #elementor-popup-modal-39 .elementor-widget-image img { background: transparent !important; background-color: transparent !important; }