@charset "UTF-8"; /* ============================================================================ GrillMaster - One Click Accessibility (Pojo) font resize + contrast fixes Loaded after 'style' and 'responsive'. Every rule is gated behind body[class*="pojo-a11y-resize-font-"] (or a pojo contrast class), so with nothing selected - and after Reset - this file contributes nothing. [RULE A] Nothing here targets #pojo-a11y-toolbar. [RULE B] ============================================================================ */ /* ---------------------------------------------------------------- Section 1 Two curves. Body copy uses --a11y-scale; form controls, messages and the cookie banner start smaller and need a bigger first jump, so they use --a11y-scale-form. ------------------------------------------------------------------------ */ :root { --a11y-scale: 1; --a11y-scale-form: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.08; --a11y-scale-form: 1.15; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.13; --a11y-scale-form: 1.20; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.17; --a11y-scale-form: 1.25; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.21; --a11y-scale-form: 1.30; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.25; --a11y-scale-form: 1.34; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.29; --a11y-scale-form: 1.38; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.33; --a11y-scale-form: 1.43; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.40; --a11y-scale-form: 1.48; } /* ---------------------------------------------------------------- Section 2 Base pin. DELIBERATE DEVIATION from the brief, which pins . This theme has no .elementor wrapper: the toolbar is

as a direct child of , and its item computes to 0.8em of . Measured plugin-only: 12.8px -> 25.6px at step 200. Pinning to calc(16px * 1.60) = 25.6px would drag that span to 20.5px and break RULE B. Pinning the content roots instead leaves on the plugin's own value, so the toolbar stays identical with and without this file. Content roots measured in the audit: every page's content sits in header / section / footer; template-privacy.php adds .privacy-content and .page-content; page.php uses .description-section. #cc-banner-root is a direct child and is handled separately in Section 4c. ------------------------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] :is(header, section, footer, .privacy-content, .page-content, .description-section) { font-size: calc(16px * var(--a11y-scale)) !important; } /* ---------------------------------------------------------------- Section 3 Kill percentage compounding. The plugin sets font-size:NN% !important on p/li/span/label/blockquote/legend/code/pre/dd/dt, which multiplies at every nesting level. Measured on the hero form at step 200: consent label 12px -> 1024px, and a

18px -> 128px. Collapsing them to inherit makes them follow the Section 2 root pin exactly once. Form controls are excluded here and pinned in Section 4. ------------------------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"] :is(header, section, footer, .privacy-content, .page-content, .description-section) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt) { font-size: inherit !important; } /* ---------------------------------------------------------------- Section 4 Form controls and messages, on the form curve, with a 14px readability floor. px only - never em: CF7 nests the tip inside the control wrap and its own `font-size: 1em` is what compounded 16px -> 256px at step 200. ------------------------------------------------------------------------ */ html body[class*="pojo-a11y-resize-font-"][class] :is(input, textarea, select):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) { font-size: calc(max(14px, 18px) * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-response-output { font-size: calc(max(14px, 16px) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* CF7 core ships .wpcf7-not-valid-tip { font-size: 1em } - the compounding source. Pinned in px with a unitless line-height. Measured position is `static` on this theme (consent row and a plain text field, at 375 and 1440), so no re-anchoring is needed - see REPORT re Section 4d. */ html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip { font-size: calc(max(14px, 14px) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-list-item-label, html body[class*="pojo-a11y-resize-font-"][class] .footer-form-checkbox label { font-size: calc(max(14px, 12px) * var(--a11y-scale-form)) !important; line-height: 1.4 !important; } /* -------------------------------------------------------------- Section 4c Cookie banner. #cc-banner-root is a direct child, outside every content root, so Sections 2/3 cannot reach it. Measured plugin-only: .cc-title 16 -> 37.2px and .cc-body 14 -> 28px run away, while .cc-root (div), .cc-btn (button) and .cc-lang-toggle (button) sit frozen at 14 / 14 / 12px - buttons and divs are not in the plugin's selector list. Every pin is calc(px * var(--scale)) so the banner still responds; flat px would stop the runaway but freeze the banner instead. ------------------------------------------------------------------------ */ 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, html body[class*="pojo-a11y-resize-font-"] #cc-banner-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, html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-btn.cc-btn-text { font-size: calc(15px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; } /* Present only once the preferences modal is opened - gated, so inert until then. */ 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-cat-desc, html body[class*="pojo-a11y-resize-font-"] .cc-required-badge, html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th, html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td { font-size: calc(13px * var(--a11y-scale)) !important; } @media (max-width: 767px) { /* .cc-title measures 30px here (the banner's own mobile rule), not 16px. */ html body[class*="pojo-a11y-resize-font-"] .cc-title, html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-title { font-size: calc(24px * var(--a11y-scale-form)) !important; } } /* ---------------------------------------------------------------- Section 5 Every font-size rule from the theme's own stylesheets, gated and scaled. Generated from a parse of style.css / responsive.css / landing-style.css / landing-responsive.css, preserving each rule's own @media block. Home-set rules are unscoped; landing-set rules are emitted only where their value differs, scoped to .page-template-template-grillmaster-landing. clamp() values are scaled component-wise so the vw term tracks too. ------------------------------------------------------------------------ */ /* ---- BASE ---- */ html body[class*="pojo-a11y-resize-font-"][class] #cart-total { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .accessibility-privacy-links { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .add-to-cart { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-button { font-size: calc(25px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-description { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-description { font-size: clamp(calc(15px * var(--a11y-scale)), calc(4vw * var(--a11y-scale)), calc(18px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-form-card .wpcf7-form input[type="text"], html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-form-card .wpcf7-form input[type="tel"], html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-form-card .wpcf7-form input[type="email"] { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-form-card .wpcf7-submit { font-size: calc(24px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-form-title { font-size: clamp(calc(20px * var(--a11y-scale)), calc(4.4vw * var(--a11y-scale)), calc(26px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-main-heading { font-size: calc(47px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-main-heading { font-size: clamp(calc(27px * var(--a11y-scale)), calc(7.2vw * var(--a11y-scale)), calc(47px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-sub-heading { font-size: calc(45px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .banner-sub-heading { font-size: clamp(calc(24px * var(--a11y-scale)), calc(6.4vw * var(--a11y-scale)), calc(45px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .breadcrumbs li { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .btn-call { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-consent-text { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-count-badge { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-form-field input { font-size: calc(16px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-form-message { font-size: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-item-details h3 { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-item-total { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-main-wrapper > div[style*="text-align"] { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-main-wrapper > p { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-popup-content h2 { font-size: calc(26px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-popup-item strong { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-quantity-icons input[type="number"] { font-size: calc(15px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-submit-button { font-size: calc(20px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-user-form::before { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .close-cart-popup { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .close-popup { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-description { font-size: calc(25px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-form .wpcf7-form input[type="text"], html body[class*="pojo-a11y-resize-font-"][class] .cta-form .wpcf7-form input[type="tel"], html body[class*="pojo-a11y-resize-font-"][class] .cta-form .wpcf7-form input[type="email"] { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-form input[type="submit"] { font-size: calc(24px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .cta-heading { font-size: calc(29px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-bottom { font-size: calc(26px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-btn { font-size: calc(16px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-cta-btn { font-size: calc(24px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .footer-desc { font-size: clamp(calc(15px * var(--a11y-scale)), calc(4vw * var(--a11y-scale)), calc(18px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-form-checkbox label { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-form input[type="text"], html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-form input[type="tel"], html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-form input[type="email"] { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-submit { font-size: calc(26px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-heading { font-size: calc(36px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .footer-heading { font-size: clamp(calc(26px * var(--a11y-scale)), calc(5.6vw * var(--a11y-scale)), calc(36px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-top-tag { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .footer-top-tag { font-size: clamp(calc(19px * var(--a11y-scale)), calc(2.6vw * var(--a11y-scale)), calc(28px * var(--a11y-scale))) !important; } html body[class*="pojo-a11y-resize-font-"][class] .form-middle-text { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .gallery-heading { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-close { font-size: calc(19px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup .wpcf7-form input[type="text"], html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup .wpcf7-form input[type="tel"], html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup .wpcf7-form input[type="email"] { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup .wpcf7-submit { font-size: calc(26px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup-text { font-size: calc(17px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup-title { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-box-description { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-box-heading { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-description { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-heading { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-number { font-size: calc(45px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-icon-desc { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-icon-title { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-main-header { font-size: calc(50px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-tagline { font-size: calc(26px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .module-name { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .module-tab { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .modules-title { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .new-price { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .old-price { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-description strong { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-info h2 { font-size: calc(28px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-pricing .new-price { font-size: calc(32px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-pricing .old-price { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .privacy-banner h1 { font-size: calc(50px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .project-detail-slider .slick-prev, html body[class*="pojo-a11y-resize-font-"][class] .project-detail-slider .slick-next { font-size: calc(44px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .quantity-wrapper input, html body[class*="pojo-a11y-resize-font-"][class] .quantity-input { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .quantity-wrapper label { font-size: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .remove-item { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .section-tag { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .testimonial-desc { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .testimonial-head { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .testimonial-heading { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .whatsapp-button { font-size: calc(17px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-button { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-description { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-heading { font-size: calc(50px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-desc { font-size: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-description { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-heading { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-title { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7-not-valid-tip { font-size: calc(1em * var(--a11y-scale-form)) !important; } /* ---- @media (max-width: 1020px) ---- */ @media (max-width: 1020px) { html body[class*="pojo-a11y-resize-font-"][class] .banner-button { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-form input[type="submit"] { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-cta-btn { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-submit { font-size: calc(22px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] h1 { font-size: calc(40px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] h2 { font-size: calc(35px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] p { font-size: calc(18px * var(--a11y-scale)) !important; } } /* ---- @media (max-width: 400px) ---- */ @media (max-width: 400px) { html body[class*="pojo-a11y-resize-font-"][class] .btn-call { font-size: calc(14px * var(--a11y-scale)) !important; } } /* ---- @media (max-width: 600px) ---- */ @media (max-width: 600px) { html body[class*="pojo-a11y-resize-font-"][class] .accessibility-privacy-links { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-button { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-main-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .banner-sub-heading { font-size: calc(32px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .breadcrumbs li { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-description { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cta-form input[type="submit"] { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-bottom { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-cta-btn { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-desc { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-form-wrapper .wpcf7-submit { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .footer-top-tag { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .gallery-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .journey-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-icon-title { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-main-header { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .kitchen-tagline { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .module-name { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .modules-title { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .new-price, html body[class*="pojo-a11y-resize-font-"][class] .old-price { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .privacy-banner h1 { font-size: calc(42px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .testimonial-desc { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .testimonial-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-button { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .who-we-are-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-description { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-heading { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .why-outdoor-title { font-size: calc(18px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] h2 { font-size: calc(30px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] p { font-size: calc(16px * var(--a11y-scale)) !important; } } /* ---- @media (max-width: 767px) ---- */ @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup-text { font-size: calc(15px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class].page-template-template-grillmaster-landing .hero-form-popup-title { font-size: calc(24px * var(--a11y-scale)) !important; } } /* ---- @media (max-width: 768px) ---- */ @media (max-width: 768px) { html body[class*="pojo-a11y-resize-font-"][class] .add-to-cart { font-size: calc(17px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-form-field input { font-size: calc(15px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-popup-content h2 { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-popup-content h2::after { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-popup-item strong { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-submit-button { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .cart-user-form::before { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .close-cart-popup { font-size: calc(26px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .close-popup { font-size: calc(20px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-description { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-info h2 { font-size: calc(22px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .popup-pricing .new-price { font-size: calc(20px * var(--a11y-scale)) !important; } } /* ---------------------------------------------------------------- Section 6 Keep background imagery visible in the contrast modes. What the plugin does (from its own stylesheet): high-contrast -> background-image: none !important + background: black !important negative-contrast-> body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar) { background:#000 !important } light-background -> ... *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) { background:#fff !important } grayscale -> filter: grayscale(100%) only, images survive - nothing needed here. All three are !important *shorthands*, so they also reset the background-image longhand. This theme sets every hero/footer/CTA image through an inline style="background-image:url(...)" attribute, which an !important declaration outranks - and CSS cannot read an inline URL back. So each image is restated here explicitly. See REPORT: the durable fix is a one-line template change (expose the URL as a custom property) which lives outside the two files this task permits. A scrim is blended over the photo per mode so the plugin's forced text colour still meets contrast: darken for the two dark modes, lighten for the light one. ------------------------------------------------------------------------ */ /* -- the images, restated (identical in all three modes) -- */ html body.pojo-a11y-high-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .banner-section:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/08/hero_image_new.webp") !important; } html body.pojo-a11y-high-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .footer-section:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/10/footer-pixeled.png") !important; } html body.pojo-a11y-high-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .why-choose-outdoor-section:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/07/Black-grey-background.webp") !important; } html body.pojo-a11y-high-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .cta-bg-image:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/10/new-pixeled-cta.jpg") !important; } /* .privacy-banner carries a different image on the privacy-policy page (page-id-3) than on the other three interior pages. */ html body.pojo-a11y-high-contrast .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .privacy-banner:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/07/Black-grey-background.webp") !important; } html body.pojo-a11y-high-contrast.page-id-3 .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast.page-id-3 .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background.page-id-3 .privacy-banner:not(#pojo-a11y-toolbar) { background-image: url("https://landing.grillmaster.co.il/wp-content/uploads/2025/07/CTA-background.webp") !important; } /* -- shared painting rules -- */ html body.pojo-a11y-high-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .privacy-banner:not(#pojo-a11y-toolbar) { background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; } /* -- per-mode scrim so the forced text colour stays legible over the photo -- */ html body.pojo-a11y-high-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .privacy-banner:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .privacy-banner:not(#pojo-a11y-toolbar) { background-color: transparent !important; background-blend-mode: normal !important; } html body.pojo-a11y-light-background .banner-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .footer-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .why-choose-outdoor-section:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .cta-bg-image:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .privacy-banner:not(#pojo-a11y-toolbar) { background-color: transparent !important; background-blend-mode: normal !important; } /* -- content images: high-contrast paints a grey plate behind every image and grayscale/negative wash them out. Keep the pixels readable. -- */ html body.pojo-a11y-high-contrast :is(header, section, footer, .privacy-content, .page-content, .description-section) img:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; } html body.pojo-a11y-negative-contrast :is(header, section, footer, .privacy-content, .page-content, .description-section) img:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background :is(header, section, footer, .privacy-content, .page-content, .description-section) img:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; filter: none !important; } /* -------------------------------------------------------------- Section 6b Checkboxes / radios in the contrast modes. The plugin forces background:black on its big element list, which includes . The control keeps appearance:auto, so the browser still paints a native checkbox - but filled black, on a black page. Measured on the consent row: 13x13, visible:visible, opacity 1, yet background-color rgb(0,0,0) in both high-contrast and negative-contrast, i.e. invisible. light-background has the mirror problem: rgb(255,255,255) on a white page. Fix: force a white face with a black tick (accent-color) in every mode, and add an outline that contrasts with that mode's page colour so the box edge reads. Size is left at the theme's 13px - the control is position:absolute in .footer-form-checkbox, so resizing it would not reflow the label but would shift it off the text baseline. ------------------------------------------------------------------------ */ html body.pojo-a11y-high-contrast input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast input[type="radio"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast input[type="radio"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background input[type="radio"]:not(#pojo-a11y-toolbar) { appearance: auto !important; -webkit-appearance: checkbox !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; accent-color: #000000 !important; opacity: 1 !important; filter: none !important; outline-offset: 1px !important; } html body.pojo-a11y-high-contrast input[type="radio"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast input[type="radio"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background input[type="radio"]:not(#pojo-a11y-toolbar) { -webkit-appearance: radio !important; } /* Dark modes: a white ring separates the white face from the black page. */ html body.pojo-a11y-high-contrast input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast input[type="radio"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast input[type="radio"]:not(#pojo-a11y-toolbar) { outline: 2px solid #ffffff !important; } /* Light mode: a black ring does the same job against the white page. */ html body.pojo-a11y-light-background input[type="checkbox"]:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background input[type="radio"]:not(#pojo-a11y-toolbar) { outline: 2px solid #000000 !important; } /* --------------------------------------------------------------- Section 7 Contrast-mode refinements requested after reviewing Section 6 on screen. These come after Section 6 deliberately: where they overlap, they win. Specificity note: negative-contrast's plugin rule is body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar) { background:#000 !important } The :not(#id) contributes an ID, so it scores (1,1,1). Every rule below therefore carries its own :not(#pojo-a11y-toolbar) to buy that ID weight back - which also keeps the toolbar excluded, so RULE B still holds. ------------------------------------------------------------------------ */ /* 7a. .footer-inner is an inner flex wrapper with no image of its own, so it is held transparent and the .footer-section photograph behind it shows through. .banner-section / .footer-section keep their restored images (Section 6) at full strength, and .banner-content-box keeps whatever panel colour the mode gives it so the hero text stays readable. */ html body.pojo-a11y-high-contrast .footer-inner:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .footer-inner:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .footer-inner:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* 7b. Buttons need a visible edge - the plugin fills them with a flat colour and strips their border, so on a black page they lose their shape. Scoped inside the content roots + .cc-root, so the toolbar is untouched. */ html body.pojo-a11y-high-contrast :is(header, section, footer, .cc-root) :is(button, input[type="submit"], .banner-button, .who-we-are-button, .footer-btn, .footer-cta-btn, .cc-btn, .btn-call, .btn-call-mobile, .navbar-toggler):not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast :is(header, section, footer, .cc-root) :is(button, input[type="submit"], .banner-button, .who-we-are-button, .footer-btn, .footer-cta-btn, .cc-btn, .btn-call, .btn-call-mobile, .navbar-toggler):not(#pojo-a11y-toolbar) { border: 2px solid #ffffff !important; outline: none !important; } html body.pojo-a11y-light-background :is(header, section, footer, .cc-root) :is(button, input[type="submit"], .banner-button, .who-we-are-button, .footer-btn, .footer-cta-btn, .cc-btn, .btn-call, .btn-call-mobile, .navbar-toggler):not(#pojo-a11y-toolbar) { border: 2px solid #000000 !important; outline: none !important; } /* 7c. Feature icons. .kitchen-icon-box is deliberately NOT touched - left exactly as the plugin renders it, per request. .why-outdoor-box icons are transparent PNGs in a single light tone: they read fine on the dark modes unaided, but vanish on light-background, which gets a black plate. */ html body.pojo-a11y-light-background .why-outdoor-box img:not(#pojo-a11y-toolbar) { background: #000000 !important; background-color: #000000 !important; padding: 3px !important; border-radius: 4px !important; box-sizing: content-box !important; } html body.pojo-a11y-high-contrast .why-outdoor-box img:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .why-outdoor-box img:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; padding: 0 !important; } /* 7d. Video cards. The posters live inside cross-origin player.vimeo.com iframes, so no rule here can reach them - see REPORT. What is reachable: stop the plugin painting the iframe element itself, and give the card a visible frame so it still reads as content while the poster loads. */ html body.pojo-a11y-high-contrast .vimeo-gallery-section iframe:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .vimeo-gallery-section iframe:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .vimeo-gallery-section iframe:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; filter: none !important; } html body.pojo-a11y-high-contrast .vimeo-gallery-section .video-wrapper:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .vimeo-gallery-section .video-wrapper:not(#pojo-a11y-toolbar) { border: 2px solid #ffffff !important; } html body.pojo-a11y-light-background .vimeo-gallery-section .video-wrapper:not(#pojo-a11y-toolbar) { border: 2px solid #000000 !important; } /* 7e. Gallery photographs: drop the plugin's grey plate so the pixels read against their own edges rather than a flat block. */ html body.pojo-a11y-high-contrast .project-gallery-grid img:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .project-gallery-grid img:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .project-gallery-grid img:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; filter: none !important; } /* --------------------------------------------------------------- Section 8 Slider arrows, video play button, and line-height under font scaling. ------------------------------------------------------------------------ */ /* 8a. LINE-HEIGHT. The theme sets line-height in px (26px, 35px, 40px...). Those do not grow with the font, so at higher steps the lines collide. Forced to unitless here so leading tracks the type. Buttons and inputs are excluded: several use line-height as a vertical-centring device (.wpcf7-submit is line-height:45px), and a unitless value would decapitate them. */ html body[class*="pojo-a11y-resize-font-"] :is(header, section, footer, .privacy-content, .page-content, .description-section) :is(p, li, blockquote, dd, dt, legend, label, figcaption) { line-height: 1.55 !important; } html body[class*="pojo-a11y-resize-font-"] :is(header, section, footer, .privacy-content, .page-content, .description-section) :is(h1, h2, h3, h4, h5, h6) { line-height: 1.25 !important; } html body[class*="pojo-a11y-resize-font-"] .cc-root :is(p, li, h1, h2, h3, h4, h5, h6) { line-height: 1.5 !important; } /* 8b. SLIDER ARROWS - paint only. Rewritten. The first attempt set `position: relative`, which threw the arrows out of place - but measurement on a clean tab showed the PLUGIN does the same thing on its own: these controls read position:absolute with no a11y class and position:relative under any contrast class, with nothing of ours loaded. So the one structural declaration kept here is `position: absolute`, restoring the theme value the plugin overrides. Nothing else structural is touched: no top/left, transform, width, height, border, border-radius or font-size. The icons are background-images. light-background nulls background-image outright, so each icon is restated below with the theme's own URL; the other two modes keep theirs. A black disc behind the icon is what makes the white arrow readable - the same approach as the .whatsapp-float example. The theme's URLs point at grillmaster.webzsites.site rather than this domain; reproduced verbatim so they keep resolving as today. */ html body.pojo-a11y-high-contrast :is(.slick-prev, .slick-next, .swiper-button-prev, .swiper-button-next, .gallery-nav):not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast :is(.slick-prev, .slick-next, .swiper-button-prev, .swiper-button-next, .gallery-nav):not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background :is(.slick-prev, .slick-next, .swiper-button-prev, .swiper-button-next, .gallery-nav):not(#pojo-a11y-toolbar) { position: absolute !important; background-color: #000000 !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; opacity: 1 !important; } /* Icons restated. Measured on a clean tab: background-image reads NONE under all three contrast classes, not only light-background, so all three are covered here. */ html body.pojo-a11y-high-contrast .project-detail-slider .slick-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .project-detail-slider .slick-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .project-detail-slider .slick-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .swiper-button-next.gallery-nav:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .swiper-button-next.gallery-nav:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .swiper-button-next.gallery-nav:not(#pojo-a11y-toolbar) { background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/previous-shadow-icon.svg') !important; } html body.pojo-a11y-high-contrast .project-detail-slider .slick-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .project-detail-slider .slick-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .project-detail-slider .slick-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .swiper-button-prev.gallery-nav:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .swiper-button-prev.gallery-nav:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .swiper-button-prev.gallery-nav:not(#pojo-a11y-toolbar) { background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-shadow-icon.svg') !important; } html body.pojo-a11y-high-contrast .modules-swiper .swiper-button-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .modules-swiper .swiper-button-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .modules-swiper .swiper-button-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .kitchen-swiper .swiper-button-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .kitchen-swiper .swiper-button-prev:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .kitchen-swiper .swiper-button-prev:not(#pojo-a11y-toolbar) { background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/next-module-slider.svg') !important; } html body.pojo-a11y-high-contrast .modules-swiper .swiper-button-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .modules-swiper .swiper-button-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .modules-swiper .swiper-button-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .kitchen-swiper .swiper-button-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .kitchen-swiper .swiper-button-next:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .kitchen-swiper .swiper-button-next:not(#pojo-a11y-toolbar) { background-image: url('https://grillmaster.webzsites.site/wp-content/themes/GrillMaster/assets/images/prev-module-slider.svg') !important; } /* 8c. VIDEO PLAY / PAUSE BUTTON. The icon is a white SVG. light-background paints it #fff, so it disappears against the white page - a black disc behind it restores the contrast. The dark modes keep it as-is. */ html body.pojo-a11y-light-background :is(.play-btn, .pause-button, .who-we-are-play-button, .who-we-are-pause-button):not(#pojo-a11y-toolbar) { background: #000000 !important; background-color: #000000 !important; border-radius: 50% !important; padding: 6px !important; box-sizing: content-box !important; } /* --------------------------------------------------------------- Section 9 Icon/separator plates, plus corrected versions of the hand-written rules currently sitting at the end of style.css and landing-style.css. accessibility.css is enqueued with deps ('style','responsive'), so it always cascades after both of those files - these win wherever they overlap, and the originals can be deleted from style.css / landing-style.css once confirmed. Two shapes in the originals never matched anything (verified by counting querySelectorAll hits with the contrast class applied): body.X *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .whatsapp-float svg body.X *:not(...) .banner-section .container body.X *:not(...) .banner-row The leading `*` requires the target to sit at least two levels below . .whatsapp-float and .banner-section are DIRECT children of (body.home > a.whatsapp-float), so no element exists for the `*` to match and the rule is inert. The guard belongs on the target instead, where it still buys the ID weight needed to beat the plugin's own `*:not(#pojo-a11y-toolbar)` rule - that scores (1,1,1). Also note .banner-row exists ONLY on the landing template; on the home page the hero has no such wrapper, which is why that rule appeared to work on one page and not the other. .banner-section .container covers both. */ /* 9a. Header cart icon - requested white plate in the two dark modes. */ html body.pojo-a11y-high-contrast .header-cart-icon img:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .header-cart-icon img:not(#pojo-a11y-toolbar) { background: #ffffff !important; background-color: #ffffff !important; } /* 9b. Module separator - a thin rule that the contrast modes flatten into the surrounding fill, so it disappears. Inverted per mode. */ html body.pojo-a11y-high-contrast .module-separator:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .module-separator:not(#pojo-a11y-toolbar) { background: #ffffff !important; background-color: #ffffff !important; } html body.pojo-a11y-light-background .module-separator:not(#pojo-a11y-toolbar) { background: #000000 !important; background-color: #000000 !important; } /* 9c. Phone icon - white glyph, invisible on the white page. Qualified as img.call-icon deliberately: measured, a bare .call-icon selector at the same weight loses to an img-specific competitor, while .module-separator (a div) wins at that weight. Adding the element name is the smallest change that makes it stick. */ html body.pojo-a11y-light-background img.call-icon:not(#pojo-a11y-toolbar) { background: #000000 !important; background-color: #000000 !important; border-radius: 50% !important; } /* 9d. WhatsApp glyph - corrected: no leading `*`, guard on the target. */ html body.pojo-a11y-light-background .whatsapp-float:not(#pojo-a11y-toolbar) svg { background: #000000 !important; } /* 9e. Video touch overlay - kept transparent in all three modes. */ html body.pojo-a11y-high-contrast .touch-layer:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .touch-layer:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .touch-layer:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; } /* 9f. Kitchen feature icons - white plate in the dark modes. This supersedes the "deliberately NOT touched" note in Section 7c: the hand-written rules ask for #fff here, so it is set in one place rather than two. */ html body.pojo-a11y-high-contrast .kitchen-icon-box img:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .kitchen-icon-box img:not(#pojo-a11y-toolbar) { background: #ffffff !important; background-color: #ffffff !important; } /* 9g. Hero wrappers held transparent so the restored photograph shows through. .banner-row is landing-template only; .banner-section .container is on both pages. Corrected for light-background, where the original `*` form matched nothing. */ html body.pojo-a11y-high-contrast .banner-section .container:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .banner-row:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .banner-section .container:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .banner-row:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .banner-section .container:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .banner-row:not(#pojo-a11y-toolbar) { background: transparent !important; background-color: transparent !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .arrow-icon{ background: #000 !important } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) { background: #000; } /* 9h. Slider pagination dots. The theme paints them .swiper-pagination-bullet { background:#000 } with the active one #e60012. On a white page that reads fine, but every contrast mode flattens the section behind them: black dots on the black page in high-contrast and negative-contrast, white on white in light-background. Only the red active dot survived, which is what made the row look empty. Inactive dots are given a translucent fill plus a solid 1px ring so they stay countable, and the active dot is solid. Both carry the :not(#pojo-a11y-toolbar) guard for the usual ID-weight reason. NOTE: this rule could not be confirmed against the live node - that element ignores even its own inline !important in the test harness. It was verified instead against a clone and a freshly created in the same parent, both of which take the rule correctly. Worth one look in a real browser after deploy. */ html body.pojo-a11y-high-contrast .swiper-pagination-bullet:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .swiper-pagination-bullet:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .testimonial-pagination .swiper-pagination-bullet:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .testimonial-pagination .swiper-pagination-bullet:not(#pojo-a11y-toolbar) { background: rgba(255, 255, 255, 0.45) !important; background-color: rgba(255, 255, 255, 0.45) !important; border: 1px solid #ffffff !important; opacity: 1 !important; } html body.pojo-a11y-high-contrast .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar), html body.pojo-a11y-high-contrast .testimonial-pagination .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast .testimonial-pagination .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar) { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #ffffff !important; opacity: 1 !important; } html body.pojo-a11y-light-background .swiper-pagination-bullet:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .testimonial-pagination .swiper-pagination-bullet:not(#pojo-a11y-toolbar) { background: rgba(0, 0, 0, 0.45) !important; background-color: rgba(0, 0, 0, 0.45) !important; border: 1px solid #000000 !important; opacity: 1 !important; } html body.pojo-a11y-light-background .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar), html body.pojo-a11y-light-background .testimonial-pagination .swiper-pagination-bullet-active:not(#pojo-a11y-toolbar) { background: #000000 !important; background-color: #000000 !important; border: 1px solid #000000 !important; opacity: 1 !important; } /* 9i. Mobile hamburger. .navbar-toggler-icon is Bootstrap's three-bar glyph delivered as a background-image data-URI. Measured: present with no a11y class, NONE under all three contrast classes - the plugin's background-image:none and background:#000|#fff wipe it and fill the box solid, which is why only the (Section 7b) border remained visible. The glyph is restated as an inline data-URI rather than a file, so it cannot go missing, with the stroke recoloured per mode. The element's own fill is cleared so the bars are not painted over. Qualified with the element name (span.navbar-toggler-icon) for the same reason as img.call-icon in 9c - a plain class selector loses at that weight. */ html body.pojo-a11y-high-contrast span.navbar-toggler-icon:not(#pojo-a11y-toolbar), html body.pojo-a11y-negative-contrast span.navbar-toggler-icon:not(#pojo-a11y-toolbar) { background-color: transparent !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% !important; opacity: 1 !important; } html body.pojo-a11y-light-background span.navbar-toggler-icon:not(#pojo-a11y-toolbar) { background-color: transparent !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% !important; opacity: 1 !important; } .pojo-a11y-toolbar-icon svg { padding-right: 0 !important; padding-left: 6px; }