@charset "UTF-8"; /* ========================================================================= ACCESSIBILITY CSS – Shoval Haifa Font resize + contrast-mode repairs for the "Ally" (pojo-accessibility) plugin, legacy toolbar mode. This theme is sized entirely in PX (78 font-size declarations across style.css and responsive.css; the only vw value in the project is the toolbar launcher, which this file deliberately leaves alone). Every rule below therefore re-declares a real px value multiplied by a scale variable. Nothing here uses em (compounds through nesting) or rem (drifts away from the design on wide screens). ------------------------------------------------------------------------- HOW THE PLUGIN WORKS ------------------------------------------------------------------------- app.min.js keeps a counter starting at 120 (= normal) moving in steps of 10 up to 200, and puts one class on : pojo-a11y-resize-font-130 ... pojo-a11y-resize-font-200 At 120 no class is left, which is how "A-" and Reset return to normal. For each step the plugin emits exactly two rules: body...NN, body...NN p:not(.pojo-a11y-toolbar-title), body...NN li:not(.pojo-a11y-toolbar-item), body...NN label, body...NN input, body...NN select, body...NN textarea, body...NN legend, body...NN code, body...NN pre, body...NN dd, body...NN dt, body...NN span, body...NN blockquote { font-size: NN% !important } body...NN h1..h6, body...NN h1 span .. h6 span { font-size: NN*1.33% !important } ------------------------------------------------------------------------- WHY THIS FILE IS NEEDED (every figure below measured on the live site) ------------------------------------------------------------------------- 1. The percentages COMPOUND. Every % resolves against the parent, so each nesting level multiplies. Measured at step 200: bare

18 -> 64px (3.56x), nav

16 -> 64px (4.00x), 18 -> 64px. 2. SPECIFICITY. The plugin's paragraph selector body.pojo-a11y-resize-font-200 p:not(.pojo-a11y-toolbar-title) scores (0,2,2) — two classes, because :not() carries the specificity of its argument. A prefix of "html body[class*=...] p" scores only (0,1,3), so the plugin wins every bare p and li on the page no matter how many !important declarations are thrown at it. This file therefore repeats the attribute selector: html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] = (0,2,2), and with a trailing tag (0,2,3) — one point of class weight above the plugin. Class-scoped pins then land at (0,3,x) or higher, so they also beat the generic inherit block in section 3 regardless of source order. The repetition is load-bearing, not a typo. 3. Tags the plugin never lists — a, button, td, th, .btn, .nav-link — stay frozen while everything around them grows, so the menu, the search buttons and the whole price table would keep their original size. 4. Every p/li/span forced to one value flattens the theme's typographic hierarchy (18px body text against 44-72px headings). The cookie banner and its settings modal are direct children of , not of a content wrapper, so the generic rules reach them and the theme's own h2 pin would blow the modal title up. Section 4c handles them explicitly. Measured plugin-only at step 200: .cc-modal-head h2 18 -> 88px and .cc-required-badge 11 -> 32px ran away, while .cc-cat-desc (13px) and .cc-modal-close (24px) stayed completely frozen. ------------------------------------------------------------------------- THREE CURVES ------------------------------------------------------------------------- --a11y-scale text, headings, tables, lists 1.15 .. 1.60 --a11y-scale-form selects, buttons, cookie banner 1.30 .. 1.75 --a11y-scale-ui the accessibility toolbar itself 1.10 .. 1.35 Form controls and the cookie banner start from the smallest sizes on the page, so they need a bigger first jump to read as "bigger". The toolbar grows the least on purpose: it is a fixed overlay, and a panel that grows as fast as the page would cover the content the reader just enlarged. ------------------------------------------------------------------------- GUARANTEE ------------------------------------------------------------------------- Every resize rule is gated behind body[class*="pojo-a11y-resize-font-"]; every contrast repair is gated behind a pojo-a11y-*-contrast / -background / -grayscale class. With nothing selected, and again after Reset, this file contributes zero computed differences. Only :root and the body.pojo-* variable rules are ungated, and they declare nothing but custom properties — plus one styling rule that keeps the toolbar menu items free of underlines in every state (section 8). Structure: 1. Scale steps 2. Base pin 3. Neutralise the compounding percentages 4. Form controls 4c. Cookie banner and settings modal 5. Theme font sizes x scale (mirrors style.css) 6. Responsive font sizes x scale (mirrors responsive.css) 7. Layout protection at large sizes 8. The accessibility toolbar 9. Checkbox check mark in the contrast modes 10. Contrast modes: page background, search button border, price-list labels, table border, cookie button border 11. Light mode: select arrows ========================================================================= */ /* ========================================================================= 1. SCALE STEPS ========================================================================= */ :root { --a11y-scale: 1; --a11y-scale-form: 1; --a11y-scale-ui: 1; } body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-ui: 1.10; } body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-ui: 1.14; } body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-ui: 1.18; } body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-ui: 1.22; } body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-ui: 1.26; } body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-ui: 1.29; } body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-ui: 1.32; } body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-ui: 1.35; } /* ========================================================================= 2. BASE PIN Measured baseline: body = 16px. A calc(), never a flat px, so everything that legitimately inherits from keeps moving with the setting. ========================================================================= */ html body[class*="pojo-a11y-resize-font-"] { font-size: calc(16px * var(--a11y-scale)) !important; overflow-wrap: break-word; } /* ========================================================================= 3. NEUTRALISE THE COMPOUNDING PERCENTAGES Tags that carry no size of their own in this theme go back to inheriting, so a size is applied once per element instead of once per nesting level. Tags that DO have a theme size (p, span, h1-h6, table cells, inputs) are pinned in sections 4 and 5 instead, and are deliberately absent here. ========================================================================= */ html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] li, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] label, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] legend, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] code, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] pre, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] dd, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] dt, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] blockquote, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] textarea, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] strong, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] em, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] b, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] i { font-size: inherit !important; } /* relative sizes already follow the parent, they only need protection from the plugin's !important declarations */ html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] small, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] sub, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] sup { font-size: 0.875em !important; } /* ========================================================================= 4. FORM CONTROLS (--a11y-scale-form) Bootstrap components the plugin never touches are included so the search bar and the building tabs grow with everything else. ========================================================================= */ html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] input, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] select { font-size: calc(14px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] :is(.btn, .accordion-button, .nav-link, .form-control, .form-select, .dropdown-item) { font-size: calc(16px * var(--a11y-scale-form)) !important; } /* --- the two search bars (header + price list) --- */ html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-form label { font-size: calc(16px * var(--a11y-scale-form)) !important; line-height: 1.125 !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-form select { font-size: calc(14px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] :is(.ads-serch-btn-top, .ads-serch-btn, .ads-serch-btn-comp4, .ads-serch-btn-topcomp4, .ads-serch-btn-comp1) { font-size: calc(18px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .ads-clear-filter { font-size: calc(32px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-list input[type='text'] { font-size: calc(14px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .price-list ::placeholder { font-size: calc(14px * var(--a11y-scale-form)) !important; } /* The availability checkbox is a real 20px control whose tick is drawn with a ::before glyph. Box and glyph have to grow together or the tick spills out of the square. Written with the ids because the theme sizes them as ".chkbox #chkbxinputone", which scores (1,1,0). */ html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .chkbox #chkbxinputone, html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] .chkbox #chkbxinputmain { width: calc(20px * var(--a11y-scale-form)) !important; height: calc(20px * var(--a11y-scale-form)) !important; } html body[class*="pojo-a11y-resize-font-"][class*="pojo-a11y-resize-font-"] input[type="checkbox"]:checked::before { font-size: calc(16px * var(--a11y-scale-form)) !important; } /* ========================================================================= 4c. COOKIE BANNER AND SETTINGS MODAL Values read from the