/* ============================================================================ Chocolatte - accessibility toolbar Native build, modelled on the Enable (enable.co.il) format: a side trigger, a tile grid of 18 tools each with a Shift+key shortcut, and a footer row of quick links. No third-party script, no licence, no external request. Palette is the site's own warm one (ochre / kraft / brown), so the widget reads as part of Chocolatte rather than a bolted-on vendor bar. LAYERS (site map): nav 40 · [widget 130/140] · lightbox 150 · preloader 200 · skip-link 300. The widget sits above the WhatsApp FAB and below the lightbox and the preloader on purpose. NOTE ON FILTERS: the colour filters are applied to , never to . A filter on would make it the containing block for every position:fixed child, which would break the sticky nav and both FABs. On the root element the initial containing block still applies, so fixed stays fixed. ========================================================================== */ :root{ --a11y-bg:#FAF8F5; --a11y-panel:#F5EDDF; --a11y-line:rgba(138,90,29,.20); --a11y-ink:#3a2317; --a11y-ink-soft:#6b5443; --a11y-accent:#AD712E; --a11y-accent-deep:#8a5a1d; --a11y-tile:#FFFDFA; --a11y-ease:cubic-bezier(.22,.61,.36,1); } /* ===== 1. TRIGGER (the "little person") =================================== */ /* Bottom-LEFT, deliberately: on Hebrew (RTL) sites the accessibility control conventionally lives on the left and the commercial button (here the floating WhatsApp) takes the dominant right corner - the pattern FOX and Castro use. Neither IS 5568 nor WCAG dictates a corner; what they ask for is that it sit in the SAME place on every page, which it does. */ /* 40px, not 56. There is no legal minimum in Israel - reg. 35 points at IS 5568, which tracks WCAG 2.0/2.1 AA, and neither version has a target-size criterion at all. The nearest real floors are WCAG 2.2's 24x24 (AA, not yet binding here) and 44x44 (AAA). Cardinal's paid vendor widget runs 35x35. 40 sits between the two, well clear of every floor, and reads as furniture rather than a CTA. bottom:32 (not 24) puts this 40px disc on the SAME CENTRE LINE as the 56px WhatsApp button opposite it - matched edges would have looked misaligned. */ .a11y-fab{ position:fixed; left:24px; bottom:32px; z-index:130; width:40px; height:40px; border-radius:50%; padding:0; display:grid; place-items:center; cursor:pointer; /* quiet by design: a cream disc with a hairline, not a second filled CTA. Filled ochre made it a visual twin of the WhatsApp button on the opposite corner, and a visitor could not tell the two apart at a glance. The fill is the kraft tint, NOT --a11y-bg: --a11y-bg is #FAF8F5, the exact background of every inner page, so the disc dissolved into it. The ring is full-strength ochre for the same reason - at 38% opacity it measured 2.3:1 against the page and missed WCAG 1.4.11 (3:1 for a control's boundary); solid it measures 5.6:1. */ background:var(--a11y-panel); color:var(--a11y-accent-deep); border:1px solid var(--a11y-accent-deep); box-shadow:0 12px 28px -10px rgba(58,35,23,.42); transition:transform .25s var(--a11y-ease), background .25s var(--a11y-ease), color .25s var(--a11y-ease), border-color .25s var(--a11y-ease); } .a11y-fab:hover{ background:var(--a11y-accent); color:#fbf3e7; border-color:var(--a11y-accent); transform:translateY(-3px); } .a11y-fab:focus-visible{ outline:3px solid var(--a11y-accent-deep); outline-offset:3px; } .a11y-fab svg{ width:22px; height:22px; display:block; } /* The disc shrank; the TOUCH TARGET must not. This grows the hit area to 48x48 without drawing anything - the visitors who reach for this control are exactly the ones least able to hit a 40px circle. */ .a11y-fab::before{ content:''; position:absolute; inset:-4px; border-radius:50%; } /* the ESC hint chip, mirroring Enable's - only while the panel is open */ .a11y-esc{ position:fixed; left:72px; bottom:37px; z-index:130; font:600 12px/1 'Rubik',Arial,sans-serif; letter-spacing:.08em; padding:8px 11px; border-radius:4px; background:#fff; color:var(--a11y-ink); border:1px solid var(--a11y-line); box-shadow:0 6px 18px -8px rgba(58,35,23,.4); opacity:0; visibility:hidden; transition:opacity .2s var(--a11y-ease), visibility .2s; pointer-events:none; } .a11y-open .a11y-esc{ opacity:1; visibility:visible; } /* ===== 2. PANEL ========================================================== */ .a11y-panel{ position:fixed; left:24px; bottom:88px; z-index:140; width:min(370px, calc(100vw - 32px)); /* 6 rows of tiles + head + foot come to ~667px; give it room so the last row (the cursors) is not clipped on a standard 900px-tall desktop viewport. The dvh line repeats the vh one for browsers that understand it: on a phone 100vh is the LARGE viewport - the height with the browser's address bar hidden - so a panel sized in vh can be taller than what the visitor can actually see, and its top edge ends up above the screen. dvh tracks the real, visible height. */ max-height:min(720px, calc(100vh - 132px)); max-height:min(720px, calc(100dvh - 132px)); display:flex; flex-direction:column; background:var(--a11y-bg); color:var(--a11y-ink); border:1px solid var(--a11y-line); border-radius:6px; box-shadow:0 26px 60px -18px rgba(58,35,23,.5); font-family:'Rubik',Arial,sans-serif; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .28s var(--a11y-ease), transform .28s var(--a11y-ease), visibility .28s; } .a11y-open .a11y-panel{ opacity:1; visibility:visible; transform:none; } .a11y-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 13px; border-bottom:1px solid var(--a11y-line); background:var(--a11y-panel); border-radius:6px 6px 0 0; flex:0 0 auto; } .a11y-head h2{ margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--a11y-ink); } .a11y-close{ width:32px; height:32px; flex:0 0 auto; border:1px solid var(--a11y-line); border-radius:4px; background:#fff; color:var(--a11y-ink-soft); font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s var(--a11y-ease), color .2s var(--a11y-ease); } .a11y-close:hover{ background:var(--a11y-ink); color:#fbf3e7; } .a11y-close:focus-visible{ outline:3px solid var(--a11y-accent-deep); outline-offset:2px; } /* tile grid - 3 across, the Enable rhythm */ .a11y-grid{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; } .a11y-grid li{ margin:0; padding:0; } .a11y-tile{ position:relative; width:100%; min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px 6px 9px; cursor:pointer; background:var(--a11y-tile); color:var(--a11y-ink); border:1px solid var(--a11y-line); border-radius:5px; font-family:inherit; transition:border-color .2s var(--a11y-ease), background .2s var(--a11y-ease), transform .2s var(--a11y-ease); } .a11y-tile:hover{ background:#fff; border-color:var(--a11y-accent); transform:translateY(-2px); } .a11y-tile:focus-visible{ outline:3px solid var(--a11y-accent-deep); outline-offset:2px; } .a11y-tile svg{ width:24px; height:24px; flex:0 0 auto; color:var(--a11y-accent-deep); } .a11y-lbl{ font-size:11.5px; line-height:1.25; font-weight:500; text-align:center; color:var(--a11y-ink); } /* the Shift+key badge, top corner - flips with direction */ .a11y-key{ position:absolute; top:4px; inset-inline-start:5px; font-size:8.5px; font-weight:600; letter-spacing:.03em; color:var(--a11y-ink-soft); opacity:.75; direction:ltr; unicode-bidi:isolate; } /* active tool: ochre frame + tick, the Enable affordance in our palette */ .a11y-tile[aria-pressed="true"]{ background:#fff; border-color:var(--a11y-accent); border-width:2px; padding:11px 5px 8px; } .a11y-tile[aria-pressed="true"]::after{ content:''; position:absolute; top:-7px; inset-inline-end:-7px; width:18px; height:18px; border-radius:50%; background:var(--a11y-accent) center/10px 10px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); box-shadow:0 0 0 2px var(--a11y-bg); } /* stepper tools show their level instead of a tick */ .a11y-tile[data-level]::after{ content:attr(data-level); position:absolute; top:-7px; inset-inline-end:-7px; width:18px; height:18px; border-radius:50%; background:var(--a11y-accent); color:#fff; font-size:9.5px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--a11y-bg); background-image:none; } /* footer quick links */ .a11y-foot{ display:flex; align-items:stretch; border-top:1px solid var(--a11y-line); background:var(--a11y-panel); border-radius:0 0 6px 6px; flex:0 0 auto; } .a11y-foot > *{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 6px; font-family:inherit; font-size:11px; font-weight:500; color:var(--a11y-ink); text-decoration:none; text-align:center; background:none; border:0; border-inline-end:1px solid var(--a11y-line); cursor:pointer; transition:background .2s var(--a11y-ease); } .a11y-foot > *:last-child{ border-inline-end:0; } .a11y-foot > *:hover{ background:#fff; } .a11y-foot > *:focus-visible{ outline:3px solid var(--a11y-accent-deep); outline-offset:-3px; } .a11y-foot kbd{ font:600 8.5px/1 'Rubik',Arial,sans-serif; letter-spacing:.03em; color:var(--a11y-ink-soft); opacity:.8; direction:ltr; unicode-bidi:isolate; } .a11y-foot svg{ width:17px; height:17px; color:var(--a11y-accent-deep); } /* mobile: sheet-ish, and clear of the WhatsApp FAB (opposite corner) */ @media (max-width:600px){ /* bottom:22 centres the 40px disc on the 52px WhatsApp button at bottom:16 */ .a11y-fab{ left:16px; bottom:22px; width:40px; height:40px; } .a11y-fab svg{ width:22px; height:22px; } .a11y-esc{ left:64px; bottom:27px; } .a11y-panel{ right:12px; left:12px; bottom:70px; width:auto; /* capped at 70% of the REAL visible height, so the page stays visible behind it and the panel can never run off the top of the screen */ max-height:calc(100vh - 108px); max-height:min(70dvh, calc(100dvh - 92px)); } .a11y-lbl{ font-size:11px; } } /* very short viewports: let the grid scroll rather than overflow the screen */ @media (max-height:620px){ .a11y-panel{ max-height:calc(100vh - 96px); } } /* ===== 3. THE TOOLS ====================================================== */ /* -- 3a. colour filters (on , see header note) -- */ html.a11y-mono{ filter:grayscale(1); } html.a11y-sepia{ filter:sepia(.62) saturate(1.15) contrast(.96); } html.a11y-invert{ filter:invert(1) hue-rotate(180deg); } /* keep the widget itself true under invert - double inversion cancels out. Under mono/sepia it rides along on purpose: a monochrome page whose own controls stayed colourful looks broken, and the widget is legible either way. */ html.a11y-invert .a11y-fab, html.a11y-invert .a11y-panel, html.a11y-invert .a11y-esc{ filter:invert(1) hue-rotate(180deg); } /* -- 3b + 3c. high contrast and black-on-yellow. Token overrides rather than a filter, so the result is exact and reversible. IMPORTANT on specificity: the blanket "strip every background" rule below is (0,3,2), which outranks any tidy `html.a11y-contrast .nav` (0,2,1) even with !important - specificity is compared before source order. So the surfaces that MUST stay opaque (the nav band, the footer, the floating WhatsApp button) are carved OUT of the blanket with :not(), never fought with a competing rule. Getting this wrong left the nav transparent over the hero photo and turned the WhatsApp FAB into an invisible white disc. */ /* strip decorative paint. Background IMAGES go too: black text over the hero photo is unreadable, and removing decoration is what a contrast mode is for. Real content is untouched. */ html.a11y-contrast body *:not(.a11y-widget):not(.a11y-widget *):not(.nav):not(.footer):not(img):not(svg):not(path), html.a11y-blackyellow body *:not(.a11y-widget):not(.a11y-widget *):not(.nav):not(.footer):not(img):not(svg):not(path){ background-color:transparent !important; background-image:none !important; box-shadow:none !important; } html.a11y-contrast body::before, html.a11y-blackyellow body::before{ display:none !important; } /* --- high contrast: black on white --- */ html.a11y-contrast body{ background:#fff !important; color:#000 !important; } html.a11y-contrast body *:not(.a11y-widget):not(.a11y-widget *){ color:#000 !important; text-shadow:none !important; border-color:#000 !important; } html.a11y-contrast .nav, html.a11y-contrast .footer{ background:#fff !important; border-bottom:1px solid #000 !important; } html.a11y-contrast .footer{ border-top:1px solid #000 !important; border-bottom:0 !important; } html.a11y-contrast a:not(.a11y-widget *){ color:#00299c !important; text-decoration:underline !important; } /* --- black on yellow --- */ html.a11y-blackyellow body{ background:#000 !important; color:#ff0 !important; } html.a11y-blackyellow body *:not(.a11y-widget):not(.a11y-widget *){ color:#ff0 !important; border-color:#ff0 !important; text-shadow:none !important; } html.a11y-blackyellow .nav, html.a11y-blackyellow .footer{ background:#000 !important; border-bottom:1px solid #ff0 !important; } html.a11y-blackyellow .footer{ border-top:1px solid #ff0 !important; border-bottom:0 !important; } html.a11y-blackyellow a:not(.a11y-widget *){ color:#4df !important; text-decoration:underline !important; } /* --- the widget honours its own contrast modes --- It is carved out of the blanket rules above so that it stays usable, but "usable" cannot mean "ignores the mode the visitor just asked for". A brown ochre disc floating on a black-and-yellow page is exactly the kind of detail that tells a low-vision user the control was an afterthought. */ /* the trigger now carries an ochre hairline - it has to flip with the mode too, or a brown ring is left sitting on a black disc */ html.a11y-contrast .a11y-fab{ background:#000 !important; color:#fff !important; border-color:#fff !important; } html.a11y-contrast .a11y-fab:hover{ background:#333 !important; } html.a11y-contrast .a11y-esc{ background:#fff !important; color:#000 !important; border-color:#000 !important; } html.a11y-blackyellow .a11y-esc{ background:#000 !important; color:#ff0 !important; border-color:#ff0 !important; } html.a11y-contrast .a11y-panel{ background:#fff !important; color:#000 !important; border-color:#000 !important; } html.a11y-contrast .a11y-head, html.a11y-contrast .a11y-foot{ background:#fff !important; border-color:#000 !important; } html.a11y-contrast .a11y-head h2, html.a11y-contrast .a11y-lbl, html.a11y-contrast .a11y-key, html.a11y-contrast .a11y-foot, html.a11y-contrast .a11y-foot *{ color:#000 !important; } html.a11y-contrast .a11y-tile{ background:#fff !important; border-color:#000 !important; } html.a11y-contrast .a11y-tile svg, html.a11y-contrast .a11y-foot svg{ color:#000 !important; } html.a11y-contrast .a11y-tile[aria-pressed="true"]{ background:#000 !important; } html.a11y-contrast .a11y-tile[aria-pressed="true"] :is(svg,.a11y-lbl,.a11y-key){ color:#fff !important; } html.a11y-blackyellow .a11y-fab{ background:#ff0 !important; color:#000 !important; border-color:#000 !important; } html.a11y-blackyellow .a11y-fab:hover{ background:#dd0 !important; } html.a11y-blackyellow .a11y-panel{ background:#000 !important; color:#ff0 !important; border-color:#ff0 !important; } html.a11y-blackyellow .a11y-head, html.a11y-blackyellow .a11y-foot{ background:#000 !important; border-color:#ff0 !important; } html.a11y-blackyellow .a11y-head h2, html.a11y-blackyellow .a11y-lbl, html.a11y-blackyellow .a11y-key, html.a11y-blackyellow .a11y-foot, html.a11y-blackyellow .a11y-foot *{ color:#ff0 !important; } html.a11y-blackyellow .a11y-tile{ background:#000 !important; border-color:#ff0 !important; } html.a11y-blackyellow .a11y-tile svg, html.a11y-blackyellow .a11y-foot svg{ color:#ff0 !important; } html.a11y-blackyellow .a11y-close{ background:#000 !important; color:#ff0 !important; border-color:#ff0 !important; } html.a11y-blackyellow .a11y-tile[aria-pressed="true"]{ background:#ff0 !important; } html.a11y-blackyellow .a11y-tile[aria-pressed="true"] :is(svg,.a11y-lbl,.a11y-key){ color:#000 !important; } /* -- 3d. readable font -- */ html.a11y-readable body *:not(.a11y-widget):not(.a11y-widget *){ font-family:Arial,'Helvetica Neue',Helvetica,sans-serif !important; letter-spacing:normal !important; font-variant-ligatures:none !important; } /* -- 3e. highlight links / headings -- */ html.a11y-hl-links a:not(.a11y-widget *){ outline:2px solid #b8002e !important; outline-offset:2px; text-decoration:underline !important; text-underline-offset:3px; background:#fff6d5 !important; color:#111 !important; } html.a11y-hl-titles :is(h1,h2,h3,h4,h5,h6):not(.a11y-widget *){ outline:2px dashed #005e8a !important; outline-offset:4px; background:#e8f4ff !important; } /* -- 3f. cursors (data-URI SVG, so nothing extra is fetched) -- */ html.a11y-cursor-white, html.a11y-cursor-white *:not(.a11y-widget):not(.a11y-widget *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1.2 3.2 6.3-2.6 1.4L10.4 14 5 18z' fill='%23fff' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 4 2, auto !important; } html.a11y-cursor-black, html.a11y-cursor-black *:not(.a11y-widget):not(.a11y-widget *){ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1.2 3.2 6.3-2.6 1.4L10.4 14 5 18z' fill='%23000' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E") 4 2, auto !important; } /* -- 3g. stop motion. Mirrors what the hero's own pause control does, so the two never fight: both end up freezing the same animations. -- */ html.a11y-nomotion *:not(.a11y-widget):not(.a11y-widget *){ animation-play-state:paused !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.a11y-nomotion video{ /* paused from JS too - this only stops the visual drift */ } /* -- 3h. keyboard-navigation mode: a loud, always-on focus ring -- */ html.a11y-keynav :is(a,button,input,select,textarea,summary,[tabindex]):focus{ outline:3px solid #b8002e !important; outline-offset:3px !important; background:#fff6d5 !important; color:#111 !important; } html.a11y-keynav .a11y-widget :focus{ background:none !important; color:inherit !important; } /* -- 3i. hover descriptions (alt / title / aria-label) -- */ .a11y-tip{ position:fixed; z-index:145; max-width:300px; padding:7px 11px; border-radius:4px; background:#241510; color:#fdf6ea; font:500 13px/1.45 'Rubik',Arial,sans-serif; box-shadow:0 10px 26px -10px rgba(0,0,0,.6); pointer-events:none; opacity:0; transition:opacity .15s var(--a11y-ease); } .a11y-tip.on{ opacity:1; } /* -- 3j. permanent descriptions printed under every described element -- */ .a11y-desc{ display:block; margin:6px auto 0; max-width:92%; padding:5px 9px; border-radius:3px; background:#241510; color:#fdf6ea; font:500 12px/1.4 'Rubik',Arial,sans-serif; text-align:center; direction:rtl; } /* ===== 4. RESPECT THE OS ================================================= */ @media (prefers-reduced-motion:reduce){ .a11y-fab, .a11y-panel, .a11y-tile, .a11y-esc, .a11y-tip{ transition:none !important; } .a11y-fab:hover, .a11y-tile:hover{ transform:none; } } /* printing: the widget is furniture, never ink */ @media print{ .a11y-widget{ display:none !important; } }