/* ========================================================================== One Click Accessibility (pojo-accessibility) fixes for a vw/px based theme. The plugin resizes text with % on body / p / li / span / label / input / h1-h6. On this theme that ignores the vw (desktop) and px (mobile) sizes and compounds on nested elements (the CF7 consent label reached 460px at 200%), while divs, buttons and the CF7 response message never move. Every resize rule is gated behind the plugin's body class, and every contrast rule behind its contrast class, so the default design is untouched until a visitor picks an option. Ungated on purpose: the mobile toolbar position (see "Toolbar") and the gallery arrow hit areas (no visual change). ========================================================================== */ /* -------------------------------------------------------------------------- Section 1: scale curves (plugin steps 120-200) Form and cookie-banner text starts smallest, so it gets a bigger first jump. The toolbar grows a bit less than the page text. -------------------------------------------------------------------------- */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; } body.pojo-a11y-resize-font-120 { --a11y-scale: 1.08; --a11y-scale-form: 1.20; --a11y-scale-toolbar: 1.05; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.10; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.15; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.20; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.25; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.30; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.34; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.37; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.40; } /* -------------------------------------------------------------------------- Section 2: base size on (theme body is 18px; the plugin used 16px %) -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(18px * var(--a11y-scale)) !important; } /* -------------------------------------------------------------------------- Section 3: stop compounding inside every content root (home: .main-wrapper, .mobile-menu, .privacy-wrapper; page/single/404/search templates: banners, .description-section, .login-section, and the bare breadcrumb .container) -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .mobile-menu, .privacy-wrapper, .gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt), html body[class*="pojo-a11y-resize-font-"] > .container :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) :is(input, select, textarea) { font-size: calc(16px * var(--a11y-scale-form)) !important; } /* -------------------------------------------------------------------------- Section 4: contact form (form curve, readability floor, unitless line-heights) -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form { /* inputs and the submit button share one height */ --a11y-field-h: max(4.5vh, calc(max(14px, 1.1vw) * var(--a11y-scale-form) * 1.75)); } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form h2 { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.25 !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-grid input { font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important; height: var(--a11y-field-h) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container { height: auto !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container input { font-size: calc(max(14px, 1.1vw) * var(--a11y-scale-form)) !important; height: var(--a11y-field-h) !important; line-height: 1.2 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-list-item-label { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } /* checkbox: a square the size of its label text (theme box is 3.4vw x 2.5vh), tick scaled */ html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"] { flex: 0 0 auto; width: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; height: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; margin-top: calc(max(14px, 0.8vw) * var(--a11y-scale-form) * 0.175) !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form) * 0.7) !important; } /* validation tip: one line */ html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.25 !important; white-space: nowrap !important; } /* response message: one line, capped to the form width (text is ~21.5em long) */ html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-response-output { font-size: min(calc(max(14px, 0.8vw) * var(--a11y-scale-form)), calc((36vw - 8px) / 21.5)) !important; line-height: 1.3 !important; white-space: nowrap !important; } /* fields, consent text and button full width (checkbox moves under the fields on desktop, see below) */ html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-grid, html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .checkbox-container.custom-check { width: 100% !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container { position: relative !important; text-align: center; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container input { width: 100% !important; } /* CF7's spinner (visible only while sending) sits inside the full-width button */ html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container .wpcf7-spinner { position: absolute; top: 50%; left: 12px; margin: 0 !important; transform: translateY(-50%); } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form { height: auto !important; --a11y-field-h: max(4.5vh, calc(18px * var(--a11y-scale-form) * 1.75)); } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form h2 { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .form-grid input, html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container input { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .wpcf7 .wpcf7-response-output { font-size: min(calc(14px * var(--a11y-scale-form)), calc((100vw - 40px) / 21.5)) !important; } /* consent text, then a full-width button below it (no absolute 28% column) */ html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .left-side { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .submit-container { align-self: stretch; width: 100% !important; } /* room for the taller fixed bottom bar */ html body[class*="pojo-a11y-resize-font-"] .bottom-sec-main { padding-bottom: calc(115px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"] { width: calc(14px * var(--a11y-scale-form)) !important; height: calc(14px * var(--a11y-scale-form)) !important; margin-top: calc(14px * var(--a11y-scale-form) * 0.175) !important; } html body[class*="pojo-a11y-resize-font-"] .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked::after { font-size: calc(14px * var(--a11y-scale-form) * 0.7) !important; } /* features: icon centred above its text with a gap */ html body[class*="pojo-a11y-resize-font-"] .features ul li img { display: block; margin: 0 auto 8px !important; } html body[class*="pojo-a11y-resize-font-"] .features ul li span { display: block; } /* price on one line; on narrow screens it moves under the description instead of squeezing it */ html body[class*="pojo-a11y-resize-font-"] .property-details { flex-wrap: wrap; row-gap: 8px; } html body[class*="pojo-a11y-resize-font-"] .price-tag { white-space: nowrap; line-height: 1.2 !important; width: auto !important; flex: 0 0 auto; } html body[class*="pojo-a11y-resize-font-"] .property-desc { width: auto !important; flex: 1 1 7.5em; min-width: 0; } /* bottom bar: both buttons keep the same height when one label wraps */ html body[class*="pojo-a11y-resize-font-"] .mobile-menu .row { align-items: stretch !important; } html body[class*="pojo-a11y-resize-font-"] .mobile-menu .col-6 { display: flex; align-items: stretch; } html body[class*="pojo-a11y-resize-font-"] .mobile-menu .col-6 > a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } } /* desktop: the content column and form sit in fixed vh boxes; let them grow with the text instead of overlapping / being clipped by the wrapper */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"] .givat-bereshit-wrapper { height: auto !important; min-height: 106vh; } html body[class*="pojo-a11y-resize-font-"] .overlay-content { height: auto !important; min-height: 100vh; } html body[class*="pojo-a11y-resize-font-"] .right-section { height: auto !important; min-height: 102vh; } html body[class*="pojo-a11y-resize-font-"] .left-section .content-section { height: auto !important; min-height: calc((100vh - 4vw) * 0.62); } html body[class*="pojo-a11y-resize-font-"] .left-section .contact-form { height: auto !important; min-height: calc((100vh - 4vw) * 0.31); } /* the taller form reaches the dark wave: give it a panel in the background's grey so the heading and fields stay readable, and stack checkbox + button under the fields */ html body[class*="pojo-a11y-resize-font-"] .left-section .hebrew-contact-form { background-color: rgb(140, 158, 160); border-radius: 1vw; padding: 2vh 1.2vw !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .hebrew-contact-form .form-container { flex-direction: column; align-items: stretch; } html body[class*="pojo-a11y-resize-font-"] .left-section .hebrew-contact-form .right-side, html body[class*="pojo-a11y-resize-font-"] .left-section .hebrew-contact-form .left-side { width: 100% !important; } /* features: 3 per row, icon centred above its text (wider rows put them side by side) */ html body[class*="pojo-a11y-resize-font-"] .left-section .features ul { flex-wrap: wrap; justify-content: center; row-gap: 2vh; } html body[class*="pojo-a11y-resize-font-"] .left-section .features li { flex: 0 0 calc(100% / 3); flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; margin-bottom: 0; } html body[class*="pojo-a11y-resize-font-"] .left-section .features li img { margin: 0 0 0.8vh 0 !important; } /* price on one line; the description takes the remaining width */ html body[class*="pojo-a11y-resize-font-"] .left-section .price-tag { white-space: nowrap; line-height: 1.2 !important; width: auto !important; flex: 0 0 auto; } html body[class*="pojo-a11y-resize-font-"] .left-section .property-desc { flex: 1 1 auto; min-width: 0; } html body[class*="pojo-a11y-resize-font-"] .left-section .disclaimer { position: static !important; align-self: flex-end; margin-top: 1vh !important; } /* the custom.js form shift is only for the fixed-height layout */ html body[class*="pojo-a11y-resize-font-"] .left-section.has-form-messages .contact-form .wpcf7, html body[class*="pojo-a11y-resize-font-"] .left-section.has-form-messages .disclaimer-contact-text { top: 0 !important; } } /* -------------------------------------------------------------------------- Section 4c: cookie banner (#cc-banner-root sits outside the content roots) -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, span, label, 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; } 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; } 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 :is(th, td), html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-cookies-list :is(th, td) { font-size: calc(12px * var(--a11y-scale)) !important; } /* -------------------------------------------------------------------------- Section 5: every theme font-size (style.css base, then responsive.css max-width:767px, in source order), scaled -------------------------------------------------------------------------- */ html body[class*="pojo-a11y-resize-font-"] .left-section .main-description { font-size: calc(1vw * var(--a11y-scale)) !important; line-height: calc(1.6vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .price-tag { font-size: calc(1.9vw * var(--a11y-scale)) !important; height: auto !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .property-desc { font-size: calc(1vw * var(--a11y-scale)) !important; line-height: calc(3vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .features li { font-size: calc(1.1vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .features li span { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .disclaimer { font-size: calc(0.9vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .left-section .contact-form { font-size: calc(1vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .right-section .main-heading { font-size: calc(3.5vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .right-section .sub-heading { font-size: calc(2.5vw * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .disclaimer-contact-text p { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(1.4vw * var(--a11y-scale)) !important; line-height: 1.3 !important; } /* theme uses :where(p, li, a) here, restated so it isn't flattened by Section 3 */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(16px * var(--a11y-scale)) !important; line-height: calc(22px * 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; line-height: calc(20px * var(--a11y-scale)) !important; } /* hero text must stay on the brown part of the mobile background image: grow at half the rate, cap by screen width, and start a little higher */ html body[class*="pojo-a11y-resize-font-"] .right-section .top-sec { padding-top: 50px !important; } html body[class*="pojo-a11y-resize-font-"] .right-section .main-heading { font-size: min(calc(27.938px * (1 + (var(--a11y-scale) - 1) * 0.5)), 9.6vw) !important; } html body[class*="pojo-a11y-resize-font-"] .right-section .sub-heading { font-size: min(calc(24.75px * (1 + (var(--a11y-scale) - 1) * 0.5)), 8.5vw) !important; } html body[class*="pojo-a11y-resize-font-"] .property-desc { font-size: calc(13.613px * var(--a11y-scale)) !important; line-height: calc(13.613px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .price-tag { font-size: calc(21.038px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .bottom-sec .main-description { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .disclaimer { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .features ul li span { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .disclaimer-contact-text-mobile p { font-size: calc(12px * var(--a11y-scale)) !important; line-height: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .mobile-menu a { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.2 !important; } } /* headings on page / single / 404 / search templates (bootstrap sizes, scaled) */ html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h1 { font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h2 { font-size: calc((1.325rem + 0.9vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h3 { font-size: calc((1.3rem + 0.6vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h4 { font-size: calc((1.275rem + 0.3vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h5 { font-size: calc(1.25rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h6 { font-size: calc(1rem * var(--a11y-scale)) !important; } @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h2 { font-size: calc(2rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.gold-card-banner, .home-banner, .description-section, .login-banner, .login-section, .users-grid) h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; } } /* -------------------------------------------------------------------------- Toolbar -------------------------------------------------------------------------- */ /* menu item text grows a bit less than page text */ 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 .pojo-a11y-toolbar-text { font-size: calc(12.8px * var(--a11y-scale-toolbar)) !important; } /* mobile: keep the toggle on the left (responsive.css moves it to the right) */ @media (max-width: 767px) { html body #pojo-a11y-toolbar.pojo-a11y-toolbar-left { right: auto !important; left: -180px !important; transition: left 750ms cubic-bezier(.23, 1, .32, 1) !important; } html body #pojo-a11y-toolbar.pojo-a11y-toolbar-left.pojo-a11y-toolbar-open { left: 0 !important; right: auto !important; } html body #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle { right: auto !important; left: 180px !important; } } /* -------------------------------------------------------------------------- Contrast modes The plugin's contrast selectors carry :not(#pojo-a11y-toolbar) (ID weight), so these rules add :not(#_) to outrank them. -------------------------------------------------------------------------- */ /* right side: show the background photo; the left (form) side stays solid */ @media (min-width: 768px) { html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .givat-bereshit-wrapper:not(#_) { background: linear-gradient(to right, #000 41vw, transparent 41vw), url('/wp-content/uploads/sites/6/2025/09/givatbereshit-bg-scaled.webp') center center / cover no-repeat !important; } /* light mode already shows the full photo via the site's inline (DB) CSS */ html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.overlay-content, .right-section, .right-section *, .gallery-btn, .gallery-btn img):not(#_) { background: transparent !important; } } @media (max-width: 767px) { html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .right-section .top-sec:not(#_) { background: url('/wp-content/uploads/sites/6/2025/09/givatbereshit-mobile-background.webp') top center / cover no-repeat !important; } html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .right-section .top-sec *:not(#_) { background: transparent !important; } } /* consent checkbox: white box in high / negative contrast, black box in light mode; the tick (::after) stays centred and visible on the filled box */ html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:not(#_) { background: transparent !important; border: 2px solid #fff !important; } html body.pojo-a11y-light-background .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:not(#_) { background: transparent !important; border: 2px solid #000 !important; } html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked:not(#_) { background: #fff !important; } html body.pojo-a11y-light-background .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked:not(#_) { background: #000 !important; } html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked:not(#_)::after { color: #000 !important; } html body.pojo-a11y-light-background .hebrew-contact-form .wpcf7-checkbox input[type="checkbox"]:checked:not(#_)::after { color: #fff !important; } /* gallery popup arrows: style.css pulls each arrow glyph 3vw outside its 27px button (negative margin), so the visible arrow wasn't clickable and contrast modes painted the empty button box beside it. Move the button under the arrow instead; the arrow stays exactly where it was (ungated, no visual change). */ #galleryModal .swiper-button-next::after { margin-right: 0 !important; } #galleryModal .swiper-button-prev::after { margin-left: 0 !important; } #galleryModal .swiper-button-next { transform: translateX(1.5vw); } #galleryModal .swiper-button-prev { transform: translateX(-1.5vw); } /* gallery popup slider: no stray boxes beside the arrows */ html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) #galleryModal :is(.swiper, .swiper-wrapper, .swiper-slide, .swiper-slide img, .swiper-button-next, .swiper-button-prev):not(#_) { background: transparent !important; } html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) #galleryModal .swiper-pagination-bullet:not(#_) { background: #fff !important; } html body.pojo-a11y-light-background #galleryModal .swiper-pagination-bullet:not(#_) { background: #000 !important; } /* mobile buttons: white border in high / negative contrast, black in light mode */ @media (max-width: 767px) { html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.mobile-menu .detail-mob, .mobile-menu .phone-mob):not(#_), html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) #contactform .submit-btn:not(#_) { border: 2px solid #fff !important; } html body.pojo-a11y-light-background :is(.mobile-menu .detail-mob, .mobile-menu .phone-mob):not(#_), html body.pojo-a11y-light-background #contactform .submit-btn:not(#_) { border: 2px solid #000 !important; } /* the two bar buttons share an edge: draw it once so every line is 2px, and drop the bar's inner shadow that darkens the lower border */ html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .mobile-menu .detail-mob:not(#_) { border-left-width: 0 !important; } html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .mobile-menu:not(#_) { box-shadow: none !important; } }