, footer.footer and .mobile-menu (page.php / 404.php use .description-section). Roots are wrapped in :where() so an ID does not inflate specificity. */ html body[class*="pojo-a11y-resize-font-"] :where(#header, body > section, footer.footer, .mobile-menu, .description-section, .gold-card-banner, .breadcrums, main, article) :is(p, li, span, label, blockquote, legend, code, pre, dd, dt):not(.pojo-a11y-toolbar-title) { font-size: inherit !important; } html body[class*="pojo-a11y-resize-font-"] :where(#header, body > section, footer.footer, .mobile-menu, .description-section, .gold-card-banner, .breadcrums, main, article) :is(h1, h2, h3, h4, h5, h6) span:not(.pojo-a11y-toolbar-title) { font-size: inherit !important; } /* Theme-template pages (page.php / 404.php / single.php) have no class-based sizes: give their text an explicit, non-compounding size. */ html body[class*="pojo-a11y-resize-font-"][class] .description-section .text-wraper { font-size: calc(16px * var(--a11y-scale)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .description-section :is(h1, h2, h3, h4, h5, h6) { font-size: calc(26px * var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class*="pojo-a11y-resize-font-"][class] .description-section .text-wraper h3[style] { font-size: calc(30px * var(--a11y-scale)) !important; } /* Section 4: form controls + response/validation messages on --a11y-scale-form. Text inputs and the submit share ONE explicit height so they stay equal on every device (border-box: the 1px borders added by the contrast modes do not change the outer height). Line-height = height minus vertical padding. */ html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], select) { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: calc(24px * var(--a11y-scale-form)) !important; height: calc(24px * var(--a11y-scale-form) + 26px) !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 textarea { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.35 !important; max-height: calc(120px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 input[type="submit"] { font-size: calc(23px * var(--a11y-scale-form)) !important; line-height: calc(24px * var(--a11y-scale-form)) !important; height: calc(24px * var(--a11y-scale-form) + 26px) !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; white-space: nowrap !important; } /* CF7 response message: base 16px / 24px in the theme. Unitless line-height. */ html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 form .wpcf7-response-output { font-size: calc(max(14px, 16px) * var(--a11y-scale-form)) !important; line-height: 1.5 !important; } /* Validation tip: always ONE line. The form becomes an inline-size container (gated, so the default layout is untouched) and the tip size is capped by the form width so the longest message ("אנא הזן מספר טלפון ישראלי תקין") fits. */ html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 form.wpcf7-form { container-type: inline-size; } html body[class*="pojo-a11y-resize-font-"][class] .wpcf7 .wpcf7-not-valid-tip { font-size: min(calc(max(14px, 16px) * var(--a11y-scale-form)), 6.8cqi) !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* Section 4b: elements with an intentional size of their own. */ /* Hero heading spans are 50px / 40px / 32px, larger than the h1 itself. */ html body[class*="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(50px * var(--a11y-scale)) !important; } @media (max-width: 991px) { html body[class*="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(40px * var(--a11y-scale)) !important; } } @media (max-width: 767px) { html body[class*="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(32px * var(--a11y-scale)) !important; } } /* FAQ question wrapper is an

: keep its strut in step with the button. / html body[class="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-header { font-size: calc(19px * var(--a11y-scale)) !important; } /* .comparision-wrapper uses :where() (0 specificity) for its zebra rows - restated. / html body[class="pojo-a11y-resize-font-"][class] .comparision-wrapper .item-row .comapre-item span { font-size: inherit !important; } /* Footer highlight box ".trial" ("ותיהנו מ-45 ימי התנסות אישית בחינם"): by default one line inside max-width:380px. When the text grows, let the box widen with it (never narrower than the default 380px) and keep the sentence on one line, with the size capped by the column width (sentence = ~15.1em + 34px padding/border). Narrow phones (< 360px column) wrap by default too, so they keep wrapping. / html body[class="pojo-a11y-resize-font-"][class] .footer .footer-cotnent-wrapper { container-type: inline-size; } html body[class="pojo-a11y-resize-font-"][class] .footer .footer-cotnent-wrapper .trial { max-width: 100% !important; } @container (min-width: 360px) { html body[class="pojo-a11y-resize-font-"][class] .footer .footer-cotnent-wrapper .trial { width: fit-content !important; min-width: min(380px, 100%) !important; max-width: 100% !important; white-space: nowrap !important; font-size: min(calc(21px * var(--a11y-scale)), calc((100cqi - 38px) / 15.4)) !important; } } /* Comparison table header row: the two title boxes wrap to different heights when the text grows; the row centers them, leaving an empty gap above/below the shorter "Oticon Intent" box. Stretch both to the row height (as by default). / html body[class="pojo-a11y-resize-font-"][class] .comparision-wrapper .comparision-row:not(.item-row) { align-items: stretch !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-wrapper .comparision-row:not(.item-row) > :is(.cons-col, .pros-col).title { height: auto !important; align-items: stretch !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-wrapper .comparision-row:not(.item-row) > :is(.cons-col, .pros-col).title p { display: flex !important; flex-direction: column !important; /* keeps the
line breaks / align-items: center !important; justify-content: center !important; text-align: center !important; } / "לפרטים נוספים" button sitting on the bottom border of the hearing frame. The theme centers it on the border with a fixed margin-bottom:-24px (half of a 48px button) and the ::after dot sits at top:50% of the wrapper. When the text grows the button wrapped to 2 lines and both drifted off the line. Keep it on one line and pull it down by exactly half of its scaled height: height = line-height + 16px padding + 2px border. / html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .button-wrapper { padding-left: 30px !important; /* dot side (::after, left:0): keep the default 14px gap / padding-right: 12px !important; margin-bottom: calc((30px var(--a11y-scale-form) + 18px) / -2) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .button-wrapper .global-btn, html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .button-wrapper .global-btn span { white-space: nowrap !important; } @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .button-wrapper { margin-bottom: calc((28px var(--a11y-scale-form) + 18px) / -2) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .button-wrapper .global-btn { font-size: min(calc(19px var(--a11y-scale-form)), 7.5vw) !important; } } /* Fixed bottom bar on phones: two 50% buttons. Grows with the form curve but is capped by the viewport so each label stays on one line. / @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"][class] .mobile-menu .global-btn { font-size: min(calc(18px * var(--a11y-scale-form)), 5.4vw) !important; line-height: 1.45 !important; white-space: nowrap !important; } } @media (max-width: 400px) { html body[class="pojo-a11y-resize-font-"][class] .mobile-menu .global-btn { font-size: min(calc(16px var(--a11y-scale-form)), 5.1vw) !important; line-height: 1.45 !important; } } /* Accessibility toolbar items: keep growing, but at half the rate of the page text (12.8px -> 16.6px at step 200) so the whole list, Reset included, stays on screen on phones. / 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: calc(12.8px * (1 + (var(--a11y-scale) - 1) * 0.5)) !important; } /* Section 4c: cookie banner (#cc-banner-root sits outside every content root). Generic inherit rule FIRST, then explicit pins (bare + .cc-root-scoped). Every pin is calc(px * var(--scale...)) so nothing freezes. / 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-"][class] .cc-root { font-size: calc(14px var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-title, html body[class="pojo-a11y-resize-font-"][class] .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-"][class] .cc-body, html body[class="pojo-a11y-resize-font-"][class] .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-"][class] .cc-btn, html body[class="pojo-a11y-resize-font-"][class] .cc-root .cc-btn, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-btn { font-size: calc(15px var(--a11y-scale-form)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-lang-toggle, html body[class="pojo-a11y-resize-font-"][class] .cc-root .cc-lang-toggle { font-size: calc(12px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-modal, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-modal { font-size: calc(14px * var(--a11y-scale)) !important; line-height: 1.5 !important; } html body[class="pojo-a11y-resize-font-"] .cc-modal-wrap :is(p, li, span, label, a) { font-size: inherit !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-modal-head h2, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-modal-head h2 { font-size: calc(18px var(--a11y-scale)) !important; line-height: 1.3 !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-modal-close, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-modal-close { font-size: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-cat-name, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-cat-name { font-size: calc(14px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-cat-desc, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-cat-desc { font-size: calc(13px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-required-badge, html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-required-badge { font-size: calc(11px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .cc-cookies-list, html body[class="pojo-a11y-resize-font-"][class] .cc-cookies-list :is(th, td, summary), html body[class="pojo-a11y-resize-font-"][class] .cc-modal-wrap .cc-cookies-list :is(th, td, summary) { font-size: calc(12px var(--a11y-scale)) !important; } /* Section 4d: tip positioning. Audit: this theme never takes .wpcf7-not-valid-tip out of flow (position:static, no px top/bottom at any breakpoint) and the form has no consent checkbox row, so no anchor restore is needed. The one-line rule in Section 4 keeps the tip height constant (one line) so nothing below it jumps. / / Section 5: every font-size rule from assets/css/style.css + responsive.css, gated and scaled, media blocks in the theme's source order. Line-heights are px in the theme, so they are scaled with the same curve. / html body[class="pojo-a11y-resize-font-"][class] .global-btn { font-size: calc(21px * var(--a11y-scale-form)) !important; line-height: calc(30px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class] .navbar-nav .menu-item > a { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .header-dropdown .dropdown-menu .dropdown-item { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .header-social-icons li a { font-size: calc(20px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .header-social-icons li:first-child a { font-size: calc(24px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .title { font-size: calc(44px var(--a11y-scale)) !important; line-height: calc(52px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(50px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .desc { font-size: calc(19px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .hero-list .list-item .desc { font-size: calc(17px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-btn { font-size: calc(23px var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .footer-cotnent-wrapper .title { font-size: calc(32px var(--a11y-scale)) !important; line-height: calc(36px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .footer-cotnent-wrapper .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .trial-text { font-size: calc(19px var(--a11y-scale)) !important; line-height: calc(23px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .trial { font-size: calc(21px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .form-bottom-title { font-size: calc(23px var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .title-area .title { font-size: calc(40px var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-button { font-size: calc(19px var(--a11y-scale)) !important; line-height: calc(28px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-body { font-size: calc(17px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .subtitle { font-size: calc(32px var(--a11y-scale)) !important; line-height: calc(40px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row .cons-col.title p, html body[class="pojo-a11y-resize-font-"][class] .comparision-row .pros-col.title p { font-size: calc(22px * var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .comapre-item { font-size: calc(15px var(--a11y-scale)) !important; line-height: calc(18px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .title-col > p { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .how-work-content-wrapper .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .work-list .item > p { font-size: calc(17px var(--a11y-scale)) !important; line-height: calc(23px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .how-work-content-wrapper .subtitle { font-size: calc(26px var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-title-wrapper .desc { font-size: calc(21px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .hearing-item .title { font-size: calc(20px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-content-wrapper .hearing-item .desc { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .customer-sec p.desc { font-size: calc(21px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } @media (max-width: 991px) { html body[class="pojo-a11y-resize-font-"][class] .hero-content .title { font-size: calc(36px var(--a11y-scale)) !important; line-height: calc(46px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(40px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .desc { font-size: calc(18px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .hero-list .list-item .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-btn { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .title-area .title { font-size: calc(34px var(--a11y-scale)) !important; line-height: calc(38px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .subtitle { font-size: calc(28px var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .title-col > p { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row .cons-col.title p, html body[class="pojo-a11y-resize-font-"][class] .comparision-row .pros-col.title p { font-size: calc(20px * var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .comapre-item { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .how-work-content-wrapper .desc { font-size: calc(18px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .work-list .item > p { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .how-work-content-wrapper .subtitle { font-size: calc(22px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-title-wrapper .desc { font-size: calc(20px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .customer-sec p.desc { font-size: calc(20px var(--a11y-scale)) !important; line-height: calc(26px * var(--a11y-scale)) !important; } } @media (max-width: 767px) { html body[class="pojo-a11y-resize-font-"][class] .global-btn { font-size: calc(19px var(--a11y-scale-form)) !important; line-height: calc(28px * var(--a11y-scale-form)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .title { font-size: calc(28px var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .title > span { font-size: calc(32px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-content .hero-list .list-item .desc { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hero-btn { font-size: calc(17px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .title-area .title { font-size: calc(28px var(--a11y-scale)) !important; line-height: calc(34px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .desc { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .struggling-content .subtitle { font-size: calc(22px var(--a11y-scale)) !important; line-height: calc(30px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .comapre-item { font-size: calc(14px var(--a11y-scale)) !important; line-height: calc(18px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .comparision-row.item-row .title-col > p { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(20px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .how-work-content-wrapper .desc { font-size: calc(16px var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .work-list .item > p { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .hearing-title-wrapper .desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .customer-sec p.desc { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-button { font-size: calc(18px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .faq-accordion .accordion-body { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .footer-cotnent-wrapper .title { font-size: calc(30px var(--a11y-scale)) !important; line-height: calc(32px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .footer-cotnent-wrapper .desc { font-size: calc(16px var(--a11y-scale)) !important; line-height: calc(22px * var(--a11y-scale)) !important; } html body[class="pojo-a11y-resize-font-"][class] .form-bottom-title { font-size: calc(20px var(--a11y-scale)) !important; line-height: calc(24px * var(--a11y-scale)) !important; } } /* ========================================================================== Section 6: contrast modes (high contrast / negative contrast / light background / grayscale) - text, images, icons, forms, videos. Plugin selectors to beat: negative: body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) (1,1,1) light: body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(..) (1,2,1) hence the ":not(#pojo-a11y-toolbar)" prefix pattern below. ========================================================================== / / --- 6.1 Form fields: readable background, text and placeholder --- / body.pojo-a11y-high-contrast .wpcf7 :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { background: #000 !important; background-color: #000 !important; color: #fff !important; border: 1px solid #fff !important; } body.pojo-a11y-high-contrast .wpcf7 :is(input, textarea)::placeholder, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7 :is(input, textarea)::placeholder { color: #fff !important; opacity: 0.85 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7 :is(input, textarea)::placeholder { color: #000 !important; opacity: 0.7 !important; } body.pojo-a11y-grayscale .wpcf7 :is(input, textarea)::placeholder { color: #333 !important; opacity: 1 !important; } / Submit button / body.pojo-a11y-high-contrast .wpcf7 input[type="submit"] { background: #600040 !important; background-color: #600040 !important; color: #fff !important; border: 1px solid #fff !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7 input[type="submit"] { background: #000 !important; background-color: #000 !important; color: #fff !important; } / --- 6.2 Validation tips + response message --- / body.pojo-a11y-high-contrast .wpcf7 .wpcf7-not-valid-tip, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7 .wpcf7-not-valid-tip { color: #ffff00 !important; font-weight: 600 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7 .wpcf7-not-valid-tip { color: #b00000 !important; font-weight: 600 !important; } body.pojo-a11y-high-contrast .wpcf7 form .wpcf7-response-output, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7 form .wpcf7-response-output { color: #ffff00 !important; border-color: #ffff00 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7 form .wpcf7-response-output { color: #000 !important; border-color: #000 !important; } / --- 6.3 Checkboxes: keep the native check mark visible in every mode --- / body.pojo-a11y-high-contrast input[type="checkbox"], body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) input[type="checkbox"]:not(.cc-toggle input) { -webkit-appearance: checkbox !important; appearance: auto !important; accent-color: #ffff00 !important; background: #000 !important; border: 1px solid #fff !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input[type="checkbox"]:not(.cc-toggle input) { -webkit-appearance: checkbox !important; appearance: auto !important; accent-color: #000 !important; } body.pojo-a11y-grayscale input[type="checkbox"] { accent-color: #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wpcf7-checkbox input[type="checkbox"]:checked::before, body.pojo-a11y-grayscale .wpcf7-checkbox input[type="checkbox"]:checked::before { color: #000; } / Cookie-settings toggles: keep ON distinguishable from OFF / body .cc-toggle input:checked + .cc-slider, body.pojo-a11y-high-contrast .cc-toggle input:checked + .cc-slider, body.pojo-a11y-grayscale .cc-toggle input:checked + .cc-slider, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-toggle input:checked + .cc-slider, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-toggle input:checked + .cc-slider { background: #3b3bb3 !important; } / --- 6.4 Comparison table (high contrast): theme forces light cell backgrounds with !important, which hides the white text --- / body.pojo-a11y-high-contrast .comparision-wrapper :is(.title-col > p, .comapre-item, .cons-col.title p, .pros-col.title p) { background: #000 !important; background-color: #000 !important; color: #fff !important; border: 1px solid #fff !important; } body.pojo-a11y-high-contrast .comparision-wrapper :is(.title-col > p, .comapre-item, .cons-col.title p, .pros-col.title p) :is(span, strong, b) { background: transparent !important; color: #fff !important; } / Light-background and negative modes: keep the zebra cells readable too / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .comparision-wrapper :is(.title-col > p, .comapre-item, .cons-col.title p, .pros-col.title p) { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .comparision-wrapper :is(.title-col > p, .comapre-item, .cons-col.title p, .pros-col.title p) { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } / The check / cross icons are colored circles: no grey plate behind them / body.pojo-a11y-high-contrast .comapre-item img { background: transparent !important; } / --- 6.5 Sections whose design depends on a background image / light fill (high contrast strips background-image but keeps light fills) --- / body.pojo-a11y-high-contrast :is(.hero-sec, .struggling-sec, .customer-sec, .footer, .how-it-work-sec, .hearing-sec, .faq-sec, .header, .mobile-menu), body.pojo-a11y-high-contrast :is(.hearing-content-wrapper .button-wrapper, .hearing-content-wrapper .hearing-item .icon), body.pojo-a11y-high-contrast .faq-accordion :is(.accordion-item, .accordion-button, .accordion-collapse, .accordion-body) { background-color: #000 !important; } body.pojo-a11y-high-contrast .faq-accordion .accordion-item { border: 1px solid #fff !important; } body.pojo-a11y-high-contrast .faq-accordion .accordion-button::after, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .faq-accordion .accordion-button::after { filter: brightness(0) invert(1) !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faq-accordion .accordion-item { border: 1px solid #000 !important; } / Hamburger icon: the 3 lines are a background-image, which the contrast modes strip (and paint the span solid). Redraw the lines in a readable color. / body.pojo-a11y-high-contrast .navbar-light .navbar-toggler-icon, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .navbar-light .navbar-toggler-icon { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat !important; filter: none !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .navbar-light .navbar-toggler-icon { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% 100% no-repeat !important; filter: none !important; } body.pojo-a11y-high-contrast .navbar-light .navbar-toggler, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .navbar-light .navbar-toggler { background: #000 !important; border: 1px solid #fff !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .navbar-light .navbar-toggler { background: #fff !important; border: 1px solid #000 !important; } / Highlighted hero/footer box: keep it framed / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .trial, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hero-btn { border: 1px solid #000 !important; } / --- 6.6 Buttons and their SVG / PNG icons (all icons are white artwork) --- / / High contrast: no grey plate behind the icons, button keeps a dark fill / body.pojo-a11y-high-contrast :is(.global-btn, .hero-btn, .phone-btn) { background: #600040 !important; background-color: #600040 !important; border: 1px solid #fff !important; } body.pojo-a11y-high-contrast a:is(.global-btn, .hero-btn, .phone-btn):is(:link, :visited, :hover, :focus) :is(span, strong, b) { color: #fff !important; background: transparent !important; background-color: transparent !important; } body.pojo-a11y-high-contrast a.hero-btn:is(:link, :visited, :hover, :focus) span.primary { color: #ffff00 !important; } body.pojo-a11y-high-contrast :is(.global-btn, .hero-btn, .phone-btn) img, body.pojo-a11y-high-contrast :is(.global-btn, .hero-btn, .phone-btn) svg { background: transparent !important; background-color: transparent !important; filter: brightness(0) invert(1) !important; color: #fff !important; } / Negative contrast: icons forced white on the black button / body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.global-btn, .hero-btn, .phone-btn) img, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.global-btn, .hero-btn, .phone-btn) svg { background: transparent !important; filter: brightness(0) invert(1) !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.global-btn, .hero-btn, .phone-btn) { border: 1px solid #fff !important; } / Light background: white icons would vanish on the white button - make them black / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.global-btn, .hero-btn, .phone-btn) { border: 1px solid #000 !important; color: #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.global-btn, .hero-btn, .phone-btn) img, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.global-btn, .hero-btn, .phone-btn) img:hover, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.global-btn, .hero-btn, .phone-btn):hover img { background: transparent !important; filter: brightness(0) !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.global-btn, .hero-btn, .phone-btn) svg { background: transparent !important; color: #000 !important; fill: #000 !important; } / Swiper arrows (pseudo-element glyphs) / body.pojo-a11y-high-contrast .swiper-button-next::after, body.pojo-a11y-high-contrast .swiper-button-prev::after, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .swiper-button-next::after, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .swiper-button-prev::after { color: #fff !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .swiper-button-next::after, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .swiper-button-prev::after { color: #000 !important; } / --- 6.7 Images under "שמיעה חדשה בלחיצת כפתור אחת!" (hearing icons): white plate in high + negative contrast --- / body.pojo-a11y-high-contrast .hearing-content-wrapper .hearing-item .icon > img, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .hearing-content-wrapper .hearing-item .icon > img { background: #fff !important; background-color: #fff !important; border-radius: 10px !important; padding: 6px !important; } / Other artwork icons on the page get the same treatment / body.pojo-a11y-high-contrast :is(.work-list .item > img, .hero-list .list-item img), body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.work-list .item > img, .hero-list .list-item img) { background: #fff !important; background-color: #fff !important; border-radius: 8px !important; padding: 4px !important; } / Logo: dark artwork - white plate instead of the plugin grey / black one / body.pojo-a11y-high-contrast .navbar-brand .logo, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .navbar-brand .logo { background: #fff !important; background-color: #fff !important; border-radius: 6px !important; padding: 2px 4px !important; } / --- 6.8 Video thumbnails: the full-cover helper layers are painted solid by negative / light modes and hide the YouTube poster --- / body.pojo-a11y-high-contrast :is(.touch-layer, .yt-cover, .youtube-suggestions-blocker), body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) :is(.touch-layer, .yt-cover, .youtube-suggestions-blocker), body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(.touch-layer, .yt-cover, .youtube-suggestions-blocker) { background: transparent !important; background-color: transparent !important; } body.pojo-a11y-high-contrast .video-wrapper .video-control, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .video-wrapper .video-control, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .video-wrapper .video-control { background: transparent !important; background-color: transparent !important; border-radius: 50% !important; filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 1px #000) !important; } body.pojo-a11y-high-contrast .video-wrapper iframe, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .video-wrapper iframe, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .video-wrapper iframe { border: 0 !important; } / Hero sound-wave video uses mix-blend-mode:screen; on a white page it would blend to pure white - invert it so the wave shows dark on white / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hero-img-wrapper video { mix-blend-mode: multiply !important; filter: invert(1) !important; } / High contrast removes the hero background image: keep a dark stage / body.pojo-a11y-high-contrast .hero-img-wrapper video { mix-blend-mode: normal !important; } / Hero product image (transparent webp): no plate behind it in any mode / body.pojo-a11y-high-contrast .hero-img-wrapper .hero-product, body.pojo-a11y-grayscale .hero-img-wrapper .hero-product, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .hero-img-wrapper .hero-product, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hero-img-wrapper .hero-product { background: transparent !important; background-color: transparent !important; } / --- 6.8b Hearing frame: the items are pulled up over the frame's top border, so the solid background the contrast modes paint on them hid the border and its rounded corners. Items + texts transparent (as by default); the .icon box and .button-wrapper keep their fill because they mask the line on purpose. --- / body.pojo-a11y-high-contrast .hearing-content-wrapper :is(.hearing-item-row, .hearing-item, .hearing-item .title, .hearing-item .desc, .hearing-item .title , .hearing-item .desc ), body.pojo-a11y-grayscale .hearing-content-wrapper :is(.hearing-item-row, .hearing-item, .hearing-item .title, .hearing-item .desc, .hearing-item .title , .hearing-item .desc ), body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .hearing-content-wrapper :is(.hearing-item-row, .hearing-item, .hearing-item .title, .hearing-item .desc, .hearing-item .title , .hearing-item .desc ), body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hearing-content-wrapper :is(.hearing-item-row, .hearing-item, .hearing-item .title, .hearing-item .desc, .hearing-item .title , .hearing-item .desc ) { background: transparent !important; background-color: transparent !important; } / --- 6.9 Brand-colored text that disappears in light mode --- / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :is(span.primary, .work-list .item > p > strong, .hearing-item .title) { color: #000 !important; } / ========================================================================== Section 7: site-specific additions (supplied verbatim) ========================================================================== / body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select { border: 1px solid #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) textarea::placeholder { color: #000; } /* Remove the problematic body filter only during grayscale mode / body.pojo-a11y-grayscale { -webkit-filter: none !important; filter: none !important; overflow-x: hidden !important; } / Reapply grayscale to the document root / html:has(body.pojo-a11y-grayscale) { -webkit-filter: grayscale(100%) !important; filter: grayscale(100%) !important; } / Change toolbar positioning only during grayscale mode / body.pojo-a11y-grayscale #pojo-a11y-toolbar { position: fixed !important; z-index: 99999 !important; } .cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{ background: #ababff !important; } body.pojo-a11y-grayscale .wpcf7-not-valid-tip { color: #fff; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{ border: 1px solid #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider { background: gray !important; } body.pojo-a11y-high-contrast .cc-slider { background: gray !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider { background: gray !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .black-bg img{ background: #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg { background: transparent !important; } body.pojo-a11y-high-contrast .transparent-bg { background: transparent !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg { background: transparent !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg img{ background: transparent !important; } body.pojo-a11y-high-contrast .transparent-bg img{ background: transparent !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .transparent-bg img{ background: transparent !important; } body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before { color: #fff; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .wpcf7-checkbox input[type="checkbox"]:checked::before { color: #fff; } body #cc-floater { bottom: unset !important; top: 12.5vw !important; left: 0.2vw !important; right: unset !important; width: 2.5vw !important; height: 2.5vw !important; line-height: 2.5vw; text-align: center !important; z-index: 999 !important; } body #cc-floater svg{ width: 1.5vw !important; height: 1.5vw !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body #pojo-a11y-toolbar{ z-index: 9999 !important; top: 9vw !important; } body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { font-size: 1.5vw !important; padding: 0.6vw !important; } body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{ width: 1.5vw !important; } @media(max-width: 767px){ body #cc-floater{ bottom: unset !important; top: 60vw !important; left: 2px !important; width: 7.5vw !important; height: 7.5vw !important; line-height: 7.5vw; padding: 4.5vw !important; } body #cc-floater svg { width: 5vw !important; height: 5vw !important; } body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { font-size: 5.5vw !important; padding: 2vw !important; } body #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg { width: 5.8vw !important; } body #pojo-a11y-toolbar { top: 48vw !important; } .cc-banner { padding: 16px !important; } .cc-pos-right { left: 50% !important; right: unset !important; bottom: 10px !important; width: 95%; transform: translateX(-50%); } .cc-btn{ padding: 7px 9px !important; } } /* Remove the problematic body filter only during grayscale mode / body.pojo-a11y-grayscale { -webkit-filter: none !important; filter: none !important; overflow-x: hidden !important; } / Reapply grayscale to the document root / html:has(body.pojo-a11y-grayscale) { -webkit-filter: grayscale(100%) !important; filter: grayscale(100%) !important; } / Change toolbar positioning only during grayscale mode / body.pojo-a11y-grayscale #pojo-a11y-toolbar { position: fixed !important; z-index: 99999 !important; } .cc-slider, body.pojo-a11y-high-contrast .cc-slider, body.pojo-a11y-grayscale .cc-slider, body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider{ background: #ababff !important; } body.pojo-a11y-grayscale .wpcf7-not-valid-tip { color: #fff; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-btn{ border: 1px solid #000 !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .cc-slider { background: gray !important; } body.pojo-a11y-high-contrast .cc-slider { background: gray !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .cc-slider { background: gray !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg { padding-right: 0 !important; padding-left: 6px !important; } /* ========================================================================== Section 8: default-view fixes (not gated - apply without any a11y option) ========================================================================== / / Video slider: Swiper gives every slide a 20px gap, including the last one, and the theme centers the wrapper on desktop (justify-content:center). The extra gap made the row 20px wider than the slider, pushing the right-hand video 10px past the slider's overflow clip, which cut off its rounded corners. */ @media (min-width: 768px) { .vimeo-swiper .swiper-slide:last-child { margin-left: 0 !important; } .vimeo-swiper.swiper-horizontal:not(.swiper-rtl) .swiper-slide:last-child { margin-right: 0 !important; } }