/* ============================================================ Instatok · Accessibility widget · a11y-v2 ------------------------------------------------------------ Two layers: A) GLOBAL EFFECT CLASSES — applied on by a11y.js. Generic, reusable. The CONTRAST palettes are token-driven: a site only needs to expose its colour tokens; map them in a small per-client block (see contrast-template.css). Everything else is universal. B) WIDGET UI — self-scoped under .a11y*, hard-coded palette so it stays stable regardless of the page state. Theme via --aw-brand. ============================================================ */ /* ------------------------------------------------------------ A) GLOBAL EFFECT CLASSES ------------------------------------------------------------ */ /* 1. Font scaling. Contract: the site uses rem for text and does NOT pin body font-size in px. Root scales by --a11y-scale (1 → 2). */ :root { --a11y-scale: 1; } html { font-size: calc(100% * var(--a11y-scale, 1)); } /* 2. Text spacing — WCAG 2.2 SC 1.4.12 metrics (user can read with no loss of content). Scoped to content landmarks, not the widget. */ html.a11y-textspacing :is(main, header, footer, [role="main"], .legal-main) :is(p, li, dd, blockquote, figcaption) { line-height: 1.6 !important; letter-spacing: 0.06em !important; word-spacing: 0.16em !important; } html.a11y-textspacing :is(main, header, footer, [role="main"], .legal-main) p { margin-bottom: 1.6em !important; } /* 3. Dyslexia helper — legible font + comfortable spacing on content. */ html.a11y-dyslexia :is(main, header, footer, [role="main"], .legal-main), html.a11y-dyslexia :is(main, header, footer, [role="main"], .legal-main) :is(h1,h2,h3,h4,p,li,a,span,button,label,input,textarea,select) { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, system-ui, sans-serif !important; letter-spacing: 0.03em !important; } html.a11y-dyslexia :is(main, header, footer, [role="main"], .legal-main) :is(p, li) { line-height: 1.7 !important; } /* 4. Emphasise links + headings (content only, never the widget). */ html.a11y-emphasize :is(main, header, footer, [role="main"], .legal-main) a { text-decoration: underline !important; text-underline-offset: 2px; } html.a11y-emphasize :is(main, header, footer, [role="main"], .legal-main) :is(h1,h2,h3,h4) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* 5. Big cursor — large arrow for normal areas, large hand for clickables. */ html.a11y-big-cursor, html.a11y-big-cursor *:where(:not(a):not(button):not(summary):not(label):not([role="button"])) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%202%20L4%2019%20L8.7%2014.4%20L11.6%2021%20L14.4%2019.8%20L11.5%2013.3%20L18%2013.3%20Z'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1.3'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto; } html.a11y-big-cursor :is(a, button, summary, label, [role="button"], .btn) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10%209V4.5a1.5%201.5%200%200%201%203%200V9h.6V6.5a1.5%201.5%200%200%201%203%200V10h.6V8a1.5%201.5%200%200%201%203%200v6.5a6%206%200%200%201-6%206h-1.6a6%206%200%200%201-5.2-3L8.3%2013a1.5%201.5%200%200%201%202.5-1.6L12%2013'%20fill='%23000'%20stroke='%23fff'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer; } /* 6. Reduce motion — kill animations/transitions site-wide. */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* 7. Reading guide — pointer-following horizontal ruler. */ .a11y-guide { position: fixed; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 90; border-top: 3px solid var(--aw-brand, #1b53a8); box-shadow: 0 0 0 9999px rgba(10, 20, 40, .04); } html.a11y-reduce-motion .a11y-guide { transition: none; } /* 8. CONTRAST — generic fallbacks. Sites SHOULD add a per-client block mapping their own tokens (see contrast-template.css) for full coverage; these rules keep things readable even without it. */ html.a11y-contrast-light { background: #fff; } html.a11y-contrast-light :is(main, header, footer, [role="main"], .legal-main) { background: #fff !important; color: #000 !important; } html.a11y-contrast-light :is(main, header, footer) :is(h1,h2,h3,h4,h5,p,li,a,span,strong,em,label,dt,dd):not(.btn):not(button) { color: #000 !important; -webkit-text-fill-color: #000 !important; } html.a11y-contrast-light :is(main, header, footer) a:not(.btn) { color: #0a3f8f !important; -webkit-text-fill-color: #0a3f8f !important; text-decoration: underline !important; } /* Buttons keep a readable high-contrast treatment (text-fill set so links don't bleed through) */ html.a11y-contrast-light :is(main, header, footer) :is(a.btn, button:not(.a11y *)) { background: #0a3f8f !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: #0a3f8f !important; } html.a11y-contrast-dark { background: #000; } html.a11y-contrast-dark :is(main, header, footer, [role="main"], .legal-main) { background: #000 !important; color: #fff !important; } html.a11y-contrast-dark :is(main, header, footer) :is(h1,h2,h3,h4,h5,p,li,span,strong,em,label,dt,dd):not(.btn):not(button) { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.a11y-contrast-dark :is(main, header, footer) a:not(.btn) { color: #ffe600 !important; -webkit-text-fill-color: #ffe600 !important; text-decoration: underline !important; } html.a11y-contrast-dark :is(main, header, footer) :is(a.btn, button:not(.a11y *)) { background: #ffe600 !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border-color: #ffe600 !important; } /* ------------------------------------------------------------ B) WIDGET UI — scoped under .a11y*, theme via --aw-brand / --aw-grad ------------------------------------------------------------ */ .a11y, .a11y * { box-sizing: border-box; } .a11y { --aw-brand: #1b53a8; --aw-grad: linear-gradient(135deg, #1b53a8, #3a8a2e); --aw-on: #3a8a2e; /* switch "on" colour */ --aw-fg: #1a2533; --aw-muted: #51606e; --aw-border: #e2e9f0; --aw-bg-soft: #f4f8fc; font-family: "Manrope", system-ui, sans-serif; } /* Trigger */ .a11y__trigger { position: fixed; z-index: 96; bottom: 16px; width: 56px; height: 56px; display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer; background: var(--aw-grad); color: #fff; box-shadow: 0 10px 24px -6px rgba(27,83,168,.5), 0 4px 10px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .2s ease; } .a11y--right .a11y__trigger { right: 16px; } .a11y--left .a11y__trigger { left: 16px; } .a11y__trigger:hover { transform: translateY(-2px); } .a11y__trigger:active { transform: scale(.95); } .a11y__trigger:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--aw-brand); } .a11y__trigger svg { width: 30px; height: 30px; } /* On mobile, move to bottom-LEFT to avoid common call/WhatsApp FABs */ @media (max-width: 820px) { .a11y__trigger { left: 16px; right: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* Backdrop */ .a11y__backdrop { position: fixed; inset: 0; z-index: 115; background: rgba(10,20,40,.45); border: 0; padding: 0; cursor: pointer; opacity: 0; transition: opacity .2s ease; } .a11y__backdrop[hidden] { display: none; } /* Panel */ .a11y__panel { position: fixed; z-index: 120; bottom: 84px; width: min(360px, calc(100vw - 32px)); max-height: min(78vh, 640px); overflow: auto; background: #fff; color: var(--aw-fg); border: 1px solid var(--aw-border); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(10,30,70,.45); padding: 18px; transform-origin: bottom right; animation: aw-in .18s ease; } .a11y--right .a11y__panel { right: 16px; } .a11y--left .a11y__panel { left: 16px; transform-origin: bottom left; } .a11y__panel[hidden] { display: none; } @keyframes aw-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; } } html.a11y-reduce-motion .a11y__panel, html.a11y-reduce-motion .a11y__backdrop { animation: none; transition: none; } @media (max-width: 820px) { .a11y__panel { left: 16px; right: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* Header */ .a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .a11y__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--aw-fg); } .a11y__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--aw-border); border-radius: 10px; background: #fff; color: var(--aw-muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .a11y__close:hover { background: #fdecec; color: #c62828; } .a11y__close:focus-visible { outline: 3px solid var(--aw-brand); outline-offset: 2px; } .a11y__close svg { width: 20px; height: 20px; } /* Groups */ .a11y__group { margin-top: 14px; } .a11y__group:first-of-type { margin-top: 0; } .a11y__label { display: block; font-size: 14px; font-weight: 600; color: var(--aw-muted); margin-bottom: 8px; } /* Font-size stepper */ .a11y__stepper { display: flex; align-items: center; gap: 8px; } .a11y__step { width: 56px; min-height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--aw-border); border-radius: 10px; background: var(--aw-bg-soft); color: var(--aw-fg); cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; } .a11y__step:hover { border-color: var(--aw-brand); } .a11y__step:focus-visible { outline: 3px solid var(--aw-brand); outline-offset: 2px; } .a11y__step:disabled { opacity: .4; cursor: not-allowed; } .a11y__step svg { width: 20px; height: 20px; } .a11y__readout { flex: 1; text-align: center; font-weight: 800; font-size: 17px; color: var(--aw-fg); } /* Segmented (contrast) */ .a11y__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .a11y__segbtn { min-height: 48px; border: 1px solid var(--aw-border); border-radius: 10px; background: var(--aw-bg-soft); color: var(--aw-fg); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease; } .a11y__segbtn:hover { border-color: var(--aw-brand); } .a11y__segbtn[aria-pressed="true"] { background: var(--aw-grad); color: #fff; border-color: transparent; } .a11y__segbtn:focus-visible { outline: 3px solid var(--aw-brand); outline-offset: 2px; } /* Toggles */ .a11y__toggles { display: grid; gap: 8px; } .a11y__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--aw-border); border-radius: 12px; background: #fff; color: var(--aw-fg); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; transition: border-color .15s ease, background .15s ease; } .a11y__toggle:hover { border-color: var(--aw-brand); } .a11y__toggle:focus-visible { outline: 3px solid var(--aw-brand); outline-offset: 2px; } .a11y__toggle[aria-pressed="true"] { background: var(--aw-bg-soft); border-color: var(--aw-brand); } .a11y__switch { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #cfd8e3; transition: background .18s ease; } .a11y__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; } .a11y__toggle[aria-pressed="true"] .a11y__switch { background: var(--aw-on); } .a11y__toggle[aria-pressed="true"] .a11y__switch::after { transform: translateX(20px); } html.a11y-reduce-motion .a11y__switch, html.a11y-reduce-motion .a11y__switch::after { transition: none; } /* Reset */ .a11y__reset { margin-top: 14px; width: 100%; min-height: 48px; border: 1px solid var(--aw-border); border-radius: 12px; background: #fff; color: var(--aw-brand); cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease; } .a11y__reset:hover { background: var(--aw-bg-soft); } .a11y__reset:focus-visible { outline: 3px solid var(--aw-brand); outline-offset: 2px; } .a11y__reset svg { width: 18px; height: 18px; } /* Screen-reader-only live region */ .a11y__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The widget must stay immune to the page-level contrast classes. */ html.a11y-contrast-light .a11y, html.a11y-contrast-dark .a11y { color: var(--aw-fg); } html.a11y-contrast-light .a11y *, html.a11y-contrast-dark .a11y * { -webkit-text-fill-color: currentColor; }