/* * Accessibility overrides for the "One Click Accessibility" (Pojo) toolbar. * Theme: Effi Ofakim LP. Loaded last (see functions.php). * * Font resize: the plugin sets percentage font-sizes (which compound through * nested markup and ignore vw units). Every resize rule below is gated behind * body[class*="pojo-a11y-resize-font-"], so with no size selected (or after * Reset) this file changes nothing. * * Contrast modes: check mark visibility and the fixes that mirror the theme's * light-background rules, gated behind the plugin's mode classes. */ /* Section 1: step -> multipliers --a11y-scale text / headings / lists +15% ... +60% --a11y-scale-form form controls, buttons, messages, cookie title/body/buttons +30% ... +75% --a11y-scale-toolbar the accessibility toolbar itself (grows less than content) +8% ... +36% */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-toolbar: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-toolbar: 1.08; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-toolbar: 1.12; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-toolbar: 1.16; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-toolbar: 1.20; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-toolbar: 1.24; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-toolbar: 1.28; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-toolbar: 1.32; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-toolbar: 1.36; } /* Section 2: base pin on (theme body is 18px) */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(18px * var(--a11y-scale)) !important; } /* Section 2b: accessibility toolbar - scaled on its own, smaller curve. Plugin base: #pojo-a11y-toolbar 16px, item links 80% (12.8px). */ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay p.pojo-a11y-toolbar-title { font-size: calc(16px * var(--a11y-scale-toolbar)) !important; } 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 { font-size: calc(12.8px * var(--a11y-scale-toolbar)) !important; } 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: inherit !important; } /* Section 3: stop the compounding percentages inside every content root (landing template + the theme-template pages 404.php / search.php) */ html body[class*="pojo-a11y-resize-font-"] .main-wrapper p, html body[class*="pojo-a11y-resize-font-"] .main-wrapper li, html body[class*="pojo-a11y-resize-font-"] .main-wrapper span, html body[class*="pojo-a11y-resize-font-"] .main-wrapper label, html body[class*="pojo-a11y-resize-font-"] .main-wrapper blockquote, html body[class*="pojo-a11y-resize-font-"] .main-wrapper legend, html body[class*="pojo-a11y-resize-font-"] .main-wrapper code, html body[class*="pojo-a11y-resize-font-"] .main-wrapper pre, html body[class*="pojo-a11y-resize-font-"] .main-wrapper dd, html body[class*="pojo-a11y-resize-font-"] .main-wrapper dt, html body[class*="pojo-a11y-resize-font-"] .mobile-menu p, html body[class*="pojo-a11y-resize-font-"] .mobile-menu li, html body[class*="pojo-a11y-resize-font-"] .mobile-menu span, html body[class*="pojo-a11y-resize-font-"] .mobile-menu label, html body[class*="pojo-a11y-resize-font-"] .mobile-menu blockquote, html body[class*="pojo-a11y-resize-font-"] .mobile-menu legend, html body[class*="pojo-a11y-resize-font-"] .mobile-menu code, html body[class*="pojo-a11y-resize-font-"] .mobile-menu pre, html body[class*="pojo-a11y-resize-font-"] .mobile-menu dd, html body[class*="pojo-a11y-resize-font-"] .mobile-menu dt, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper p, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper li, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper span, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper label, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper blockquote, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper legend, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper code, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper pre, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper dd, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper dt, html body[class*="pojo-a11y-resize-font-"] .lightbox p, html body[class*="pojo-a11y-resize-font-"] .lightbox li, html body[class*="pojo-a11y-resize-font-"] .lightbox span, html body[class*="pojo-a11y-resize-font-"] .lightbox label, html body[class*="pojo-a11y-resize-font-"] .lightbox blockquote, html body[class*="pojo-a11y-resize-font-"] .lightbox legend, html body[class*="pojo-a11y-resize-font-"] .lightbox code, html body[class*="pojo-a11y-resize-font-"] .lightbox pre, html body[class*="pojo-a11y-resize-font-"] .lightbox dd, html body[class*="pojo-a11y-resize-font-"] .lightbox dt, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner li, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner label, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner legend, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner code, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner pre, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dd, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dt, html body[class*="pojo-a11y-resize-font-"] .breadcrums p, html body[class*="pojo-a11y-resize-font-"] .breadcrums li, html body[class*="pojo-a11y-resize-font-"] .breadcrums span, html body[class*="pojo-a11y-resize-font-"] .breadcrums label, html body[class*="pojo-a11y-resize-font-"] .breadcrums blockquote, html body[class*="pojo-a11y-resize-font-"] .breadcrums legend, html body[class*="pojo-a11y-resize-font-"] .breadcrums code, html body[class*="pojo-a11y-resize-font-"] .breadcrums pre, html body[class*="pojo-a11y-resize-font-"] .breadcrums dd, html body[class*="pojo-a11y-resize-font-"] .breadcrums dt, html body[class*="pojo-a11y-resize-font-"] .description-section p, html body[class*="pojo-a11y-resize-font-"] .description-section li, html body[class*="pojo-a11y-resize-font-"] .description-section span, html body[class*="pojo-a11y-resize-font-"] .description-section label, html body[class*="pojo-a11y-resize-font-"] .description-section blockquote, html body[class*="pojo-a11y-resize-font-"] .description-section legend, html body[class*="pojo-a11y-resize-font-"] .description-section code, html body[class*="pojo-a11y-resize-font-"] .description-section pre, html body[class*="pojo-a11y-resize-font-"] .description-section dd, html body[class*="pojo-a11y-resize-font-"] .description-section dt, html body[class*="pojo-a11y-resize-font-"] .home-banner p, html body[class*="pojo-a11y-resize-font-"] .home-banner li, html body[class*="pojo-a11y-resize-font-"] .home-banner span, html body[class*="pojo-a11y-resize-font-"] .home-banner label, html body[class*="pojo-a11y-resize-font-"] .home-banner blockquote, html body[class*="pojo-a11y-resize-font-"] .home-banner legend, html body[class*="pojo-a11y-resize-font-"] .home-banner code, html body[class*="pojo-a11y-resize-font-"] .home-banner pre, html body[class*="pojo-a11y-resize-font-"] .home-banner dd, html body[class*="pojo-a11y-resize-font-"] .home-banner dt, html body[class*="pojo-a11y-resize-font-"] .users-grid p, html body[class*="pojo-a11y-resize-font-"] .users-grid li, html body[class*="pojo-a11y-resize-font-"] .users-grid span, html body[class*="pojo-a11y-resize-font-"] .users-grid label, html body[class*="pojo-a11y-resize-font-"] .users-grid blockquote, html body[class*="pojo-a11y-resize-font-"] .users-grid legend, html body[class*="pojo-a11y-resize-font-"] .users-grid code, html body[class*="pojo-a11y-resize-font-"] .users-grid pre, html body[class*="pojo-a11y-resize-font-"] .users-grid dd, html body[class*="pojo-a11y-resize-font-"] .users-grid dt, html body[class*="pojo-a11y-resize-font-"] .website-presentation p, html body[class*="pojo-a11y-resize-font-"] .website-presentation li, html body[class*="pojo-a11y-resize-font-"] .website-presentation span, html body[class*="pojo-a11y-resize-font-"] .website-presentation label, html body[class*="pojo-a11y-resize-font-"] .website-presentation blockquote, html body[class*="pojo-a11y-resize-font-"] .website-presentation legend, html body[class*="pojo-a11y-resize-font-"] .website-presentation code, html body[class*="pojo-a11y-resize-font-"] .website-presentation pre, html body[class*="pojo-a11y-resize-font-"] .website-presentation dd, html body[class*="pojo-a11y-resize-font-"] .website-presentation dt { font-size: inherit !important; } /* Section 3b: headings in the content roots - Bootstrap 5 sizes, scaled */ html body[class*="pojo-a11y-resize-font-"] .main-wrapper h1, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h1, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h1, html body[class*="pojo-a11y-resize-font-"] .lightbox h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .breadcrums h1, html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .home-banner h1, html body[class*="pojo-a11y-resize-font-"] .users-grid h1, html body[class*="pojo-a11y-resize-font-"] .website-presentation h1 { font-size: calc((calc(1.375rem + 1.5vw)) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h2, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h2, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h2, html body[class*="pojo-a11y-resize-font-"] .lightbox h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .breadcrums h2, html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .home-banner h2, html body[class*="pojo-a11y-resize-font-"] .users-grid h2, html body[class*="pojo-a11y-resize-font-"] .website-presentation h2 { font-size: calc((calc(1.325rem + 0.9vw)) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h3, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h3, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h3, html body[class*="pojo-a11y-resize-font-"] .lightbox h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .breadcrums h3, html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .home-banner h3, html body[class*="pojo-a11y-resize-font-"] .users-grid h3, html body[class*="pojo-a11y-resize-font-"] .website-presentation h3 { font-size: calc((calc(1.3rem + 0.6vw)) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h4, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h4, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h4, html body[class*="pojo-a11y-resize-font-"] .lightbox h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4, html body[class*="pojo-a11y-resize-font-"] .breadcrums h4, html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .home-banner h4, html body[class*="pojo-a11y-resize-font-"] .users-grid h4, html body[class*="pojo-a11y-resize-font-"] .website-presentation h4 { font-size: calc((calc(1.275rem + 0.3vw)) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h5, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h5, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h5, html body[class*="pojo-a11y-resize-font-"] .lightbox h5, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h5, html body[class*="pojo-a11y-resize-font-"] .breadcrums h5, html body[class*="pojo-a11y-resize-font-"] .description-section h5, html body[class*="pojo-a11y-resize-font-"] .home-banner h5, html body[class*="pojo-a11y-resize-font-"] .users-grid h5, html body[class*="pojo-a11y-resize-font-"] .website-presentation h5 { font-size: calc((1.25rem) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h6, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h6, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h6, html body[class*="pojo-a11y-resize-font-"] .lightbox h6, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h6, html body[class*="pojo-a11y-resize-font-"] .breadcrums h6, html body[class*="pojo-a11y-resize-font-"] .description-section h6, html body[class*="pojo-a11y-resize-font-"] .home-banner h6, html body[class*="pojo-a11y-resize-font-"] .users-grid h6, html body[class*="pojo-a11y-resize-font-"] .website-presentation h6 { font-size: calc((1rem) * var(--a11y-scale)) !important; } @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper h1, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h1, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h1, html body[class*="pojo-a11y-resize-font-"] .lightbox h1, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1, html body[class*="pojo-a11y-resize-font-"] .breadcrums h1, html body[class*="pojo-a11y-resize-font-"] .description-section h1, html body[class*="pojo-a11y-resize-font-"] .home-banner h1, html body[class*="pojo-a11y-resize-font-"] .users-grid h1, html body[class*="pojo-a11y-resize-font-"] .website-presentation h1 { font-size: calc(2.5rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h2, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h2, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h2, html body[class*="pojo-a11y-resize-font-"] .lightbox h2, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2, html body[class*="pojo-a11y-resize-font-"] .breadcrums h2, html body[class*="pojo-a11y-resize-font-"] .description-section h2, html body[class*="pojo-a11y-resize-font-"] .home-banner h2, html body[class*="pojo-a11y-resize-font-"] .users-grid h2, html body[class*="pojo-a11y-resize-font-"] .website-presentation h2 { font-size: calc(2rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h3, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h3, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h3, html body[class*="pojo-a11y-resize-font-"] .lightbox h3, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3, html body[class*="pojo-a11y-resize-font-"] .breadcrums h3, html body[class*="pojo-a11y-resize-font-"] .description-section h3, html body[class*="pojo-a11y-resize-font-"] .home-banner h3, html body[class*="pojo-a11y-resize-font-"] .users-grid h3, html body[class*="pojo-a11y-resize-font-"] .website-presentation h3 { font-size: calc(1.75rem * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper h4, html body[class*="pojo-a11y-resize-font-"] .mobile-menu h4, html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper h4, html body[class*="pojo-a11y-resize-font-"] .lightbox h4, html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4, html body[class*="pojo-a11y-resize-font-"] .breadcrums h4, html body[class*="pojo-a11y-resize-font-"] .description-section h4, html body[class*="pojo-a11y-resize-font-"] .home-banner h4, html body[class*="pojo-a11y-resize-font-"] .users-grid h4, html body[class*="pojo-a11y-resize-font-"] .website-presentation h4 { font-size: calc(1.5rem * var(--a11y-scale)) !important; } } /* Section 4: form controls and messages (form curve). Values mirror style.css (base) and responsive.css (max-width: 767px). max() floors keep the vw-sized form text readable on tablet widths. */ html body[class*="pojo-a11y-resize-font-"] .main-wrapper input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .mobile-menu input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .lightbox input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .gold-card-banner input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .breadcrums input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .description-section input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .home-banner input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .users-grid input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .website-presentation input:not([type="checkbox"]):not([type="submit"]) { font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col > p > span:first-child { font-size: calc(max(12px, 0.8vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(10px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .submit-btn input { font-size: calc(max(12px, 1.1vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7-form-control-wrap .wpcf7-not-valid-tip { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .gallery-btn { font-size: calc(1.3vw * var(--a11y-scale-form)) !important; line-height: calc(2.5vh * var(--a11y-scale-form)) !important; max-width: calc(8.5vw * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .description-section .accordion-button { font-size: calc(1rem * var(--a11y-scale)) !important; } /* Section 4e: with a size selected the sidebar is too narrow for the consent text and the button side by side, so give the checkbox the full row and put the button underneath it. */ /* Section 4f: the form is capped at 18vw on desktop; widen it with the text, up to the sidebar inner width (31vw content-wrapper - 2 x 2.5vw padding). */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-order form { max-width: min(calc(18vw * var(--a11y-scale-form)), 26vw) !important; } } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .checkbox-group { flex-wrap: wrap !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .checkbox-group > .check-col { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .checkbox-group > .submit-col { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-top: calc(1.2vh * var(--a11y-scale-form)) !important; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper .checkbox-group > .submit-col { margin-top: calc(10px * var(--a11y-scale-form)) !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .mobile-menu input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .lightbox input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .gold-card-banner input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .breadcrums input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .description-section input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .home-banner input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .users-grid input:not([type="checkbox"]):not([type="submit"]), html body[class*="pojo-a11y-resize-font-"] .website-presentation input:not([type="checkbox"]):not([type="submit"]) { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col > p > span:first-child { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(10px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .submit-btn input { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7 form .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .wpcf7-form-control-wrap .wpcf7-not-valid-tip { font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] .mobile-menu .detail-mob a, html body[class*="pojo-a11y-resize-font-"] .mobile-menu .phone-mob a { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: calc(22px * var(--a11y-scale-form)) !important; } } @media (max-width: 400px) { html body[class*="pojo-a11y-resize-font-"] .mobile-menu .detail-mob a, html body[class*="pojo-a11y-resize-font-"] .mobile-menu .phone-mob a { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: calc(22px * var(--a11y-scale-form)) !important; } } /* Section 4b: elements with an intentional size of their own that Section 3 would flatten (the theme wrote the privacy text with :where(), zero specificity) */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(1.4vw * var(--a11y-scale)) !important; line-height: calc(2.6vh * 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(max(11px, 0.9vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class*="pojo-a11y-resize-font-"] .description-section.error-content h3 { font-size: calc(30px * var(--a11y-scale)) !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: 1.6 !important; } } /* Section 4c: cookie banner (#cc-banner-root) and its settings modal (.cc-modal-wrap), both outside the content roots. Generic inherit first, then scaled pins. */ 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, html body[class*="pojo-a11y-resize-font-"] .cc-root summary, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap p, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap li, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap span, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap label, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap a, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap summary { 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; } 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, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .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-modal-wrap .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; } /* Section 4d: validation tips. Text-field tips are absolute and sit in the paragraph's bottom margin. Anchor them to the whole row (not the narrow control wrapper, where the scaled message wrapped to 3 lines) and give the margin room: up to two lines on desktop/tablet, one line on mobile where the row is wide. */ html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col > p:has(.wpcf7-not-valid-tip) { position: relative !important; margin-bottom: calc(1.6vh + max(14px, 0.9vw) * var(--a11y-scale-form) * 1.2 * 2) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col > p > .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) { position: static !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col .wpcf7-form-control-wrap .wpcf7-not-valid-tip { top: 100% !important; right: 0 !important; left: 0 !important; white-space: normal !important; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper .form-field-col > p:has(.wpcf7-not-valid-tip) { margin-bottom: calc(16px + 14px * var(--a11y-scale-form) * 1.2) !important; } } /* Section 5: landing template text (text curve), base then max-width: 767px */ html body[class*="pojo-a11y-resize-font-"] .main-wrapper .heading-wrapper > .title { font-size: calc(4vw * var(--a11y-scale)) !important; line-height: calc(8.5vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .heading-wrapper > .subtitle { font-size: calc(2vw * var(--a11y-scale)) !important; line-height: calc(4.5vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .sidebar-desc { font-size: calc(1.23vw * var(--a11y-scale)) !important; line-height: calc(3.7vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .sidebar-subtitle { font-size: calc(1.7vw * var(--a11y-scale)) !important; line-height: calc(4.5vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .item-list .item { font-size: calc(1.23vw * var(--a11y-scale)) !important; line-height: calc(3.7vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .price-wrappwe { font-size: calc(1.2vw * var(--a11y-scale)) !important; line-height: calc(3.5vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .main-form-title { font-size: calc(1.1vw * var(--a11y-scale)) !important; line-height: calc(3vh * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .note, html body[class*="pojo-a11y-resize-font-"] .main-wrapper .copy-text { font-size: calc(max(11px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .price-wrappwe { max-width: min(calc(18vw * var(--a11y-scale)), 26vw) !important; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper .heading-wrapper > .title { font-size: calc(29px * var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .heading-wrapper > .subtitle { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .sidebar-desc { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .sidebar-subtitle { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .item-list .item { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .price-wrappwe { font-size: calc(17px * var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .main-form-title { font-size: calc(14px * var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .price-wrappwe .price { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .note, html body[class*="pojo-a11y-resize-font-"] .main-wrapper .copy-text { font-size: calc(12px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .price-wrappwe { max-width: min(calc(240px * var(--a11y-scale)), calc(100% - 32px)) !important; } } /* Section 5b: layout room for the larger text. Desktop is a fixed 100vh split; let it grow instead of spilling past the sidebar. */ @media (min-width: 768px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper { height: auto !important; min-height: 100vh !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .slider-wrapper, html body[class*="pojo-a11y-resize-font-"] .main-wrapper .content-wrapper { height: auto !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .slider-wrapper .slider-img { object-fit: cover !important; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .bottom-wrapper { padding-top: calc(7.5vh + (var(--a11y-scale) - 1) * 28vh) !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .main-wrapper .top-wrapper { padding-bottom: calc(30px + (var(--a11y-scale) - 1) * 60px) !important; } } /* Mobile gallery slider arrows, every mode including the default view. slick-theme.css adds [dir='rtl'] .slick-prev { right: -25px } and .slick-next { left: -25px }. The theme only sets left (prev) / right (next), so in RTL the prev arrow was pushed 25px outside the photo on the right, next to the next arrow, and caused horizontal scrolling. */ .mobile-gallery-slider .slick-gallery .slick-prev { left: 12px; right: auto; } .mobile-gallery-slider .slick-gallery .slick-next { right: 12px; left: auto; } /* ========================================================================== Contrast modes ========================================================================== */ /* Checkbox check mark: visible and centred inside the box in every mode. The plugin's colour rules use * which never matches ::before, so the mark kept its theme colour: navy on the black box (high/negative contrast, desktop) and white on white (light background, mobile). */ body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before, body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #fff !important; } body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before { background-color: #000 !important; } body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before, body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before, body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before, body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; max-width: calc(100% - 4px) !important; max-height: calc(100% - 4px) !important; } /* High / negative contrast - mirrors the light-background fixes in style.css */ /* Submit: solid inverted button (light mode uses black with white text) */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-btn input, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .submit-btn input { background-color: #fff !important; border-color: #fff !important; color: #000 !important; } /* Form: same design as light mode, only the colours change. The plugin draws a 1px box around every input/button; restore the theme's border widths (fields: bottom line only, 0.2vh / 1px on mobile; checkbox 0.15vw / 1px; submit 0.1rem / 1px). */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]) { background: transparent !important; border-style: solid !important; border-color: #fff !important; border-width: 0 0 0.2vh 0 !important; } body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .wpcf7-checkbox input[type="checkbox"], body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .wpcf7-checkbox input[type="checkbox"] { background: transparent !important; border-style: solid !important; border-color: #fff !important; border-width: 0.15vw !important; } body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .submit-btn input, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .submit-btn input { border-width: 0.1rem !important; } @media (max-width: 767px) { body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]) { border-width: 0 0 1px 0 !important; } body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .wpcf7-checkbox input[type="checkbox"], body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .wpcf7-checkbox input[type="checkbox"], body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .submit-btn input, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-form .submit-btn input { border-width: 1px !important; } } /* Logo on a black chip, never the plugin's grey image background */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg :where(img, svg) { background: #000 !important; } /* Icons that already carry their own shape: no grey box behind them */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .detail-mob a img, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .phone-mob a img, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .privacy-close-btn img, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slick-arrow-custom img, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .detail-mob a img, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .phone-mob a img, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .privacy-close-btn img, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slick-arrow-custom img { background: transparent !important; } body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slick-arrow-custom, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .slick-arrow-custom { background: transparent !important; border: 0 !important; } /* Borders drawn in the theme's navy disappear on black */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .heading-wrapper > .subtitle, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .heading-wrapper > .subtitle { border-color: #fff !important; } body.pojo-a11y-high-contrast .mobile-menu, body.pojo-a11y-negative-contrast .mobile-menu { border-top: 1px solid #fff !important; } /* Lightbox, every mode including the default view: no strip under the photo. .lb-dataContainer is a 5px padded bar below the image and .lb-outerContainer is white behind it; the accessibility modes paint them white/black, which showed as a line under the rounded photo. Only the (absolutely positioned) close button lives in the data container, so it can collapse. */ html body:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lightbox .lb-outerContainer, html body:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lightbox .lb-dataContainer { background: transparent !important; } html body:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lightbox .lb-dataContainer { height: 0 !important; padding: 0 !important; } /* Lightbox: same as light mode. The plugin paints .lb-nav (a full-size layer above the photo) black, which hid the image; keep the layers transparent. */ body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lb-nav, .lightbox, .lightboxOverlay, .lb-data), body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lb-nav, .lightbox, .lightboxOverlay, .lb-data) { background: transparent !important; } /* Lightbox arrows / close: the plugin strips their background images */ body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-nav a.lb-next, body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-nav a.lb-next { background: url(../images/next.png) center center / 14px no-repeat #fff !important; } body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-nav a.lb-prev, body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-nav a.lb-prev { background: url(../images/prev.png) center center / 14px no-repeat #fff !important; } body.pojo-a11y-high-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-data .lb-close, body.pojo-a11y-negative-contrast:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .lb-data .lb-close { background: url(../images/close.png) center center / 14px no-repeat #fff !important; }