/* ============================================================ lqdm-a11y.css — accessibility layer for shop.liquidium.com Built 2026-07-04. Three concerns, one sheet: 1. Skip-link (WCAG 2.4.1 bypass blocks) — injected by lqdm-a11y.js. 2. Sitewide :focus-visible ring (WCAG 2.4.7) — the site had NO focus style at all, so keyboard users saw nothing. This helps EVERY keyboard user, independent of the widget. 3. The accessibility preferences widget (Israeli Reg. 35 / IS 5568): a floating control the user drives — a comfort tool, NOT an overlay. It only toggles a11y-* classes on ; it never rewrites content, alt text, or ARIA (that is done in the HTML itself). Brand: lqdm v1.1 cold-metal — radius 0, ink-on-lab-white, mono/lowercase. Colours reuse the existing tokens in lqdm-tokens.css; dark mode reuses the site's own .night palette so contrast modes never break the layout. ============================================================ */ /* ---------- 1. SKIP LINK ---------------------------------- */ .lqdm-skip-link{ position:fixed; top:0; inset-inline-start:0; z-index:100000; transform:translateY(-120%); background:var(--fg,#0E0F11); color:var(--bg,#F1F2F3); font-family:var(--mono,sans-serif); font-size:13px; letter-spacing:0.04em; padding:12px 20px; text-decoration:none; border-radius:0; transition:transform .18s var(--ease,ease); } .lqdm-skip-link:focus{ transform:translateY(0); outline:2px solid var(--bg,#F1F2F3); outline-offset:-4px; } /* ---------- 2. SITEWIDE VISIBLE FOCUS (WCAG 2.4.7) -------- */ /* Two-tone ring stays visible on light ground, dark heroes, and photos. */ :focus-visible{ outline:2px solid var(--fg,#0E0F11); outline-offset:3px; border-radius:0; } /* On dark surfaces (home hero nav, night mode, dark contrast) flip the ring to a light tone so it never disappears into the ink. */ .on-dark :focus-visible, .night :focus-visible, [data-mode="night"] :focus-visible, html.a11y-contrast-dark :focus-visible{ outline-color:var(--on-dark,#C9CCCF); } /* Keep mouse users clean — only show the ring for keyboard/AT focus. */ :focus:not(:focus-visible){ outline:none; } /* ============================================================ 3. THE WIDGET ============================================================ */ /* ---- floating trigger button ---- 2026-07-04 (Guy): moved from inline-start to inline-END — bottom-RIGHT in English, bottom-LEFT in Hebrew — so it sits at the reading-end corner, away from start-aligned content (footer address, scroll cue). Legal: the Israeli regulations prescribe NO position for the widget, only that it is findable, keyboard-operable and non-obstructing. */ #lqdm-a11y-trigger{ position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:99990; width:52px; height:52px; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; background:var(--fg,#0E0F11); color:var(--bg,#F1F2F3); border:1px solid var(--fg,#0E0F11); border-radius:0; cursor:pointer; box-shadow:0 4px 18px rgba(14,15,17,0.22); transition:background .2s var(--ease,ease), color .2s var(--ease,ease), transform .2s var(--ease,ease); } #lqdm-a11y-trigger:hover{ background:var(--bg,#F1F2F3); color:var(--fg,#0E0F11); } #lqdm-a11y-trigger:active{ transform:translateY(1px); } #lqdm-a11y-trigger svg{ width:30px; height:30px; display:block; } @media (max-width:768px){ #lqdm-a11y-trigger{ width:46px; height:46px; inset-block-end:16px; inset-inline-end:12px; } #lqdm-a11y-trigger svg{ width:26px; height:26px; } } /* pages with their own fixed bottom-end element (product's .sticky-bag buy button, bottom:24px right:24px) — lqdm-a11y.js detects it and lifts the trigger above so the two never stack. */ #lqdm-a11y-trigger.a11y-lifted{ inset-block-end:96px; } @media print{ #lqdm-a11y-trigger, #lqdm-a11y-panel, #lqdm-a11y-backdrop{ display:none !important; } } /* ---- backdrop ---- */ #lqdm-a11y-backdrop{ position:fixed; inset:0; z-index:99991; background:rgba(14,15,17,0.34); opacity:0; visibility:hidden; transition:opacity .22s var(--ease,ease), visibility 0s linear .22s; } #lqdm-a11y-backdrop.open{ opacity:1; visibility:visible; transition:opacity .22s var(--ease,ease); } /* ---- panel (sheet) ---- */ /* panel anchors to the inline-END edge, same corner as the trigger: LTR → right edge, slides in from the right; RTL → left edge, from the left. */ #lqdm-a11y-panel{ position:fixed; inset-block:0; inset-inline-end:0; z-index:99992; width:340px; max-width:88vw; height:100%; background:var(--bg,#F1F2F3); color:var(--fg,#0E0F11); border-inline-start:1px solid var(--hairline,rgba(14,15,17,0.12)); box-shadow:-4px 0 28px rgba(14,15,17,0.16); display:flex; flex-direction:column; transform:translateX(102%); visibility:hidden; transition:transform .26s var(--ease,cubic-bezier(0.22,1,0.36,1)), visibility 0s linear .26s; font-family:var(--sans,sans-serif); } html[dir="rtl"] #lqdm-a11y-panel{ box-shadow:4px 0 28px rgba(14,15,17,0.16); transform:translateX(-102%); } #lqdm-a11y-panel.open{ transform:translateX(0); visibility:visible; transition:transform .26s var(--ease,cubic-bezier(0.22,1,0.36,1)); } #lqdm-a11y-panel .a11y-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; border-bottom:1px solid var(--hairline,rgba(14,15,17,0.12)); } #lqdm-a11y-panel .a11y-title{ font-family:var(--display,sans-serif); font-size:19px; font-weight:600; letter-spacing:-0.01em; margin:0; text-transform:lowercase; } #lqdm-a11y-panel .a11y-close{ width:38px; height:38px; border:1px solid var(--hairline,rgba(14,15,17,0.12)); background:transparent; color:var(--fg,#0E0F11); font-size:22px; line-height:1; cursor:pointer; border-radius:0; } #lqdm-a11y-panel .a11y-close:hover{ background:var(--fg,#0E0F11); color:var(--bg,#F1F2F3); } #lqdm-a11y-panel .a11y-body{ padding:16px 18px 22px; overflow-y:auto; flex:1; } #lqdm-a11y-panel .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } /* toggle card */ .a11y-tog{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:88px; padding:12px 8px; text-align:center; background:transparent; color:var(--fg,#0E0F11); border:1px solid var(--hairline,rgba(14,15,17,0.12)); border-radius:0; cursor:pointer; font-family:var(--mono,sans-serif); font-size:12px; letter-spacing:0.01em; line-height:1.3; transition:background .15s var(--ease,ease), border-color .15s var(--ease,ease); } .a11y-tog .a11y-ico{ font-size:22px; line-height:1; } .a11y-tog .a11y-val{ font-size:10px; color:var(--muted,#8B8E92); letter-spacing:0.08em; text-transform:uppercase; min-height:12px; } .a11y-tog:hover{ border-color:var(--fg,#0E0F11); } .a11y-tog[aria-pressed="true"], .a11y-tog.is-active{ background:var(--fg,#0E0F11); color:var(--bg,#F1F2F3); border-color:var(--fg,#0E0F11); } .a11y-tog[aria-pressed="true"] .a11y-val, .a11y-tog.is-active .a11y-val{ color:var(--bg,#F1F2F3); } .a11y-foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline,rgba(14,15,17,0.12)); } .a11y-reset{ width:100%; padding:12px; margin-bottom:12px; background:transparent; color:var(--fg,#0E0F11); border:1px solid var(--fg,#0E0F11); border-radius:0; cursor:pointer; font-family:var(--mono,sans-serif); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; } .a11y-reset:hover{ background:var(--fg,#0E0F11); color:var(--bg,#F1F2F3); } .a11y-statement-link{ display:block; text-align:center; font-family:var(--mono,sans-serif); font-size:11px; letter-spacing:0.06em; color:var(--muted,#8B8E92); text-decoration:underline; } .a11y-statement-link:hover{ color:var(--fg,#0E0F11); } .a11y-note{ margin-top:10px; font-family:var(--sans,sans-serif); font-size:10px; line-height:1.5; color:var(--muted,#8B8E92); text-align:center; } /* live-region for state announcements (visually hidden) */ .a11y-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================ a11y-* PREFERENCE CLASSES on (driven by the widget). Kept token-based / non-filter so they never break fixed positioning or the sticky nav (a full-page CSS filter would). ============================================================ */ /* --- text size (root scale; also nudges common block text) --- */ html.a11y-text-115{ font-size:115%; } html.a11y-text-130{ font-size:130%; } html.a11y-text-150{ font-size:150%; } /* --- line spacing --- */ html.a11y-lines-wide p, html.a11y-lines-wide li, html.a11y-lines-wide dd, html.a11y-lines-wide a, html.a11y-lines-wide span{ line-height:1.7 !important; } html.a11y-lines-wider p, html.a11y-lines-wider li, html.a11y-lines-wider dd, html.a11y-lines-wider a, html.a11y-lines-wider span{ line-height:2.1 !important; letter-spacing:0.01em; } /* --- highlight links (WCAG 1.4.1 don't-rely-on-colour aid) --- */ html.a11y-links a:not(.lqdm-skip-link):not(#lqdm-a11y-trigger){ text-decoration:underline !important; text-underline-offset:3px; outline:1px dotted currentColor; outline-offset:2px; } /* --- highlight headings --- */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6{ outline:1px dashed var(--muted,#8B8E92); outline-offset:3px; } /* --- readable font (OS stack, no webfont per FTC/overlay guidance) --- */ html.a11y-readable, html.a11y-readable *:not(.a11y-ico){ font-family:"Segoe UI",Arial,"Helvetica Neue",Helvetica,"Noto Sans Hebrew",sans-serif !important; letter-spacing:normal !important; } /* --- big cursor --- */ html.a11y-cursor-big, html.a11y-cursor-big *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 40 L18 30 L25 44 L31 41 L24 28 L38 28 Z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } /* --- stop animations (user-driven reduced motion) --- */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } /* --- high contrast (max black/white; overrides tokens) --- */ html.a11y-contrast-high{ --bg:#ffffff; --bg-warm:#ffffff; --fg:#000000; --muted:#000000; --hairline:#000000; --hairline-dark:#000000; --steel:#000000; --aluminum:#000000; --on-dark:#ffffff; --accent:#000000; --accent-soft:#000000; } html.a11y-contrast-high body{ background:#fff !important; color:#000 !important; } html.a11y-contrast-high html::before, html.a11y-contrast-high body::after{ display:none !important; } /* the metal-gradient headings clip a low-contrast grey gradient — force solid ink */ html.a11y-contrast-high .shop-title, html.a11y-contrast-high .section-title, html.a11y-contrast-high .page-title, html.a11y-contrast-high .build-title, html.a11y-contrast-high .bento-title, html.a11y-contrast-high .cover-title, html.a11y-contrast-high .venue-title, html.a11y-contrast-high .do-card-name, html.a11y-contrast-high .detail-name, html.a11y-contrast-high .booking-title, html.a11y-contrast-high .buy-title{ background:none !important; -webkit-text-fill-color:#000 !important; color:#000 !important; animation:none !important; } html.a11y-contrast-high a{ color:#000 !important; } /* --- dark / inverted contrast (reuses the site's own night palette) --- */ html.a11y-contrast-dark{ --bg:var(--steel-night,#141517); --bg-warm:var(--steel-night,#141517); --fg:var(--aluminum,#C9CCCF); --muted:var(--steel,#8B8E92); --hairline:rgba(201,204,207,0.16); --on-dark:var(--aluminum,#C9CCCF); --bg-rk-lit:#1C1E20; --bg-rk-mid:#181A1C; --bg-rk-shade:#141517; --bg-rk-deep:#0F1012; --bg-rk-bloom:rgba(255,255,255,0.06); } html.a11y-contrast-dark body{ background:var(--steel-night,#141517) !important; color:var(--aluminum,#C9CCCF) !important; } /* the widget panel itself always stays legible regardless of the mode above */ html.a11y-contrast-high #lqdm-a11y-panel{ background:#fff; color:#000; } html.a11y-contrast-high #lqdm-a11y-panel .a11y-tog{ border-color:#000; } /* ============================================================ AUDIT-DRIVEN SHARED FIXES (2026-07-04) — safe, single-source. From the WCAG 2.1 AA / IS 5568 audit of shop.liquidium.com. ============================================================ */ /* S7 — honour the OS "reduce motion" request sitewide. The metalSheen keyframe was already guarded, but the 0.3s chrome transitions were not (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* Several pages set outline:none on their inputs (newsletter, gift-card, coffee, gift-card-status), which would swallow the global focus ring. Force a visible keyboard focus ring on form controls regardless — beats page-level :focus rules without touching each page (WCAG 2.4.7). */ input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--fg,#0E0F11) !important; outline-offset:2px !important; } /* The fixed trigger occupies the bottom inline-start corner. Give every footer button-height clearance so its last row (address / legal links) never sits under the button when the page is scrolled to the end (measured overlapping the "Ha'Taasia, TLV" address 2026-07-04). Works in LTR and RTL alike. .footer-tail = the lqdm-footer.js-injected bottom block, which lives OUTSIDE any