/************************************************************* One Click Accessibility (Pojo) - font resize + form fixes Every font rule below is gated behind body[class*="pojo-a11y-resize-font-"], so with no step selected (or after Reset) the design is untouched. "html body[...]" is used throughout to out-specify the plugin's !important rules. **************************************************************/ /************* Section 0: neutralizers slick-theme.css / slick.css carry [dir='rtl'] rules that would move the gallery prev arrow to the right and float the slides right. Restore the current look. **************/ html[dir="rtl"] .slick-gallery .slick-prev { right: auto; } html[dir="rtl"] .slick-gallery .slick-next { left: auto; } html[dir="rtl"] .slick-gallery .slick-slide { float: left; } /************* Section 1: scale curves --a11y-scale content text --a11y-scale-form form controls, messages, cookie banner (start smallest, bigger first jump) --a11y-scale-tb accessibility toolbar items (grow a bit less than the page) **************/ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-tb: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-tb: 1.06; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-tb: 1.10; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-tb: 1.14; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-tb: 1.18; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-tb: 1.22; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-tb: 1.26; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-tb: 1.30; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-tb: 1.34; } /************* Section 2: base pin on (measured baseline 18px / 26px) **************/ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(18px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)); } /* Landing page only: text that grows past the hero image stays on a dark ground */ html body.page-template-template-home[class*="pojo-a11y-resize-font-"]:not(.pojo-a11y-light-background) { background-color: #000; } /************* Section 3: kill % compounding inside every content root (landing .main-wrapper + page/single/404/search template wrappers) **************/ html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) { font-size: inherit !important; } /* Generic headings (Bootstrap 5.0.2 sizes) */ html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) :is(h1, h2, h3, h4, h5, h6) { line-height: 1.2 !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h1 { font-size: calc((22px + 1.5vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h2 { font-size: calc((21.2px + 0.9vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h3 { font-size: calc((20.8px + 0.6vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h4 { font-size: calc((20.4px + 0.3vw) * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h5 { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h6 { font-size: calc(16px * var(--a11y-scale)) !important; } @media (min-width: 1200px) { html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h1 { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h2 { font-size: calc(32px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h3 { font-size: calc(28px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] :is(.main-wrapper, .home-banner, .gold-card-banner, .login-banner, .login-section, .login-wraper, .breadcrums, .description-section, .faq-accordian-section, .website-presentation-wrapper) h4 { font-size: calc(24px * var(--a11y-scale)) !important; } } /* 404.php inline style="font-size:30px" */ html body[class*="pojo-a11y-resize-font-"] .description-section h3[style*="font-size:30px"] { font-size: calc(30px * var(--a11y-scale)) !important; } /* Native forms outside CF7 (comment form on single posts) */ html body[class*="pojo-a11y-resize-font-"] :is(.login-section, .login-wraper, .description-section) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } /************* Section 4: contact form (CF7) on --a11y-scale-form Theme: style.css (base, vw/vh) + responsive.css @media (max-width: 767px), same order here. **************/ /* Tip size lives in one variable so the row can reserve exactly one line for it. Capped by the column width so every CF7 message stays on ONE line. */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 { --a11y-tip-fs: min(calc(max(11px, 0.5vw) * var(--a11y-scale-form)), max(11px, 0.9vw)); } /* Text inputs + submit share one height (theme: input 5.2vh, font 1vw) */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]) { font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; height: calc(max(5.2vh, max(12px, 1vw) * 2.4) * var(--a11y-scale-form)) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.75); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .submit-btn input[type="submit"] { font-size: calc(max(12px, 1vw) * var(--a11y-scale-form)) !important; line-height: 1.2 !important; height: calc(max(5.2vh, max(12px, 1vw) * 2.4) * var(--a11y-scale-form)) !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Consent row: label on its own line, full-width submit under it */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .checkbox-group { flex-wrap: wrap !important; row-gap: calc(1.5vh * var(--a11y-scale-form)); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .checkbox-group > :is(.check-col, .submit-col) { flex: 0 0 100%; max-width: 100%; margin-right: 0; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(max(10px, 0.6vw) * var(--a11y-scale-form)) !important; line-height: 1.35 !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox label { padding-right: calc(1.8vw * var(--a11y-scale-form)); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox input[type="checkbox"] { min-width: calc(1.3vw * var(--a11y-scale-form)); width: calc(1.3vw * var(--a11y-scale-form)); height: calc(2.5vh * var(--a11y-scale-form)); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox input[type="checkbox"]:checked::before { width: calc(0.8vw * var(--a11y-scale-form)); height: calc(1.2vh * var(--a11y-scale-form)); } /* Validation tips: one line, space reserved under the field so nothing is overlapped */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-not-valid-tip { font-size: var(--a11y-tip-fs) !important; line-height: 1.25 !important; white-space: nowrap !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 :is(.form-field-col, .check-col) > p:has(> .wpcf7-form-control-wrap > .wpcf7-not-valid-tip) { padding-bottom: calc(var(--a11y-tip-fs) * 1.25 + 4px); } /* Response message: readability floor 14px, unitless line-height (theme uses vh) */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } /* Grown form no longer lines up with the field lines drawn in the background image: cover them and draw real underlines (inputs above). */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .form-order { background-color: #000; } /* The heading grows too, so the image line under the first row can end up above the fields - the heading and the gap under it (padding instead of margin) cover it. */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .main-form-title { background-color: #000; margin-bottom: 0; padding-bottom: 1.6vh; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 { --a11y-tip-fs: min(calc(12px * var(--a11y-scale-form)), 5.5vw); } /* theme gap here is .form-order margin-top 9% (collapses with the heading's 16px) */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .main-form-title { padding-bottom: 0; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .form-order { margin-top: 0; padding-top: 9%; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]) { font-size: calc(14px * var(--a11y-scale-form)) !important; height: calc(max(4.8vh, 34px) * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .submit-btn input[type="submit"] { font-size: calc(11px * var(--a11y-scale-form)) !important; height: calc(max(4.8vh, 34px) * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox .wpcf7-list-item-label { font-size: calc(10px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox label { padding-right: calc(28px * var(--a11y-scale-form)); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox input[type="checkbox"] { min-width: calc(18px * var(--a11y-scale-form)); width: calc(18px * var(--a11y-scale-form)); height: calc(18px * var(--a11y-scale-form)); } html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 .wpcf7-checkbox input[type="checkbox"]:checked::before { width: calc(8px * var(--a11y-scale-form)); height: calc(8px * var(--a11y-scale-form)); } /* theme 10px, lifted to the 14px readability floor */ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .wpcf7 form .wpcf7-response-output { font-size: calc(14px * var(--a11y-scale-form)) !important; } } /************* Section 4b: landing-page text with its own size (content curve) **************/ html body[class*="pojo-a11y-resize-font-"] .form-wrapper .main-form-title { font-size: calc(max(12px, 0.93vw) * var(--a11y-scale)) !important; line-height: 1.25 !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper :is(.note, .copy-text) { font-size: calc(max(10px, 0.6vw) * var(--a11y-scale)) !important; line-height: 1.45 !important; background-color: #000; } html body[class*="pojo-a11y-resize-font-"] .main-wrapper .img-notice { font-size: calc(max(10px, 0.82vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; white-space: nowrap; } /* style.css uses :where(p, li, a) here (zero specificity) - restated explicitly */ html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 { font-size: calc(max(14px, 1.4vw) * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content :is(p, li, a) { font-size: calc(max(11px, 0.8vw) * var(--a11y-scale)) !important; line-height: 1.6 !important; } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"] .form-wrapper .main-form-title { font-size: calc(17px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .form-wrapper :is(.note, .copy-text) { font-size: calc(11px * var(--a11y-scale)) !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 :is(p, li, a) { font-size: calc(12px * var(--a11y-scale)) !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; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-modal, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-head h2 { font-size: calc(18px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-modal-close, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; } 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-"] :is(.cc-cookies-list, .cc-cookies-list th, .cc-cookies-list td), html body[class*="pojo-a11y-resize-font-"] .cc-root :is(.cc-cookies-list, .cc-cookies-list th, .cc-cookies-list td) { font-size: calc(12px * var(--a11y-scale)) !important; } /* Fixed banner must never grow taller than the screen */ html body[class*="pojo-a11y-resize-font-"] .cc-banner, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-banner { max-height: calc(100vh - 40px); overflow-y: auto; } /************* Section 4d: accessibility toolbar items (grow less than the page) **************/ html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item .pojo-a11y-toolbar-link > span { font-size: calc(12.8px * var(--a11y-scale-tb)) !important; } /************* Section 5: validation state (no font step needed) The response box and the in-flow consent tip pushed the consent note down 38px: over the logos in the mobile background and off the black area on desktop. Every invalid field already shows its own tip (and CF7 announces the error to screen readers in .screen-reader-response), so the duplicate box is hidden only for invalid states; sent / failed / spam messages still show. **************/ .form-wrapper .wpcf7 form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output { display: none; } .form-wrapper .check-col .wpcf7-not-valid-tip { position: absolute; white-space: nowrap; } /************* Section 6: checkbox tick inside the box in every colour mode The theme tick is 0.8vw x 1.2vh centred with translate(), so its fit depends on the screen ratio and on the border the modes swap in. Here it is inset from the box edges instead, and the box/tick colours are forced to contrast. :not(#pojo-a11y-toolbar) adds the id weight needed to beat the theme/pojo mode rules. **************/ body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :not(#pojo-a11y-toolbar) .form-wrapper .wpcf7-checkbox input[type="checkbox"] { background-color: #000 !important; border-color: #fff !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar) .form-wrapper .wpcf7-checkbox input[type="checkbox"] { background-color: #000 !important; border-color: #000 !important; } body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .form-wrapper .wpcf7-checkbox input[type="checkbox"]:checked::before { top: max(3px, 20%); right: max(3px, 20%); bottom: max(3px, 20%); left: max(3px, 20%); width: auto !important; height: auto !important; transform: none; background-color: #fff !important; }