/*
* Lymonah accessibility widget.
*
* Preferences live as data-a11y-* attributes on , written by the inline
* head script (before first paint) and by widget.js (on change). Token
* overrides are written as :root:root[...] so they outrank the tenant's inline
* :root:root theme block; everything else is keyed on html[...].
*
* The widget's own chrome uses px units and a fixed black/white palette so it
* stays legible under every mode it can switch on.
*/
/* ---- Text size ---- */
html[data-a11y-text='1'] { font-size: 115%; }
html[data-a11y-text='2'] { font-size: 130%; }
html[data-a11y-text='3'] { font-size: 150%; }
/* ---- Line and letter spacing ---- */
html[data-a11y-spacing='on'] body {
line-height: 1.8;
letter-spacing: 0.05em;
word-spacing: 0.12em;
}
html[data-a11y-spacing='on'] body :is(p, li, dd, td, th, label, blockquote) {
line-height: 1.9;
}
/* ---- Readable font ---- */
:root:root[data-a11y-font='readable'],
:root:root[data-a11y-font='readable'] [data-section] {
--font-sans: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
--font-heading: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
--font-accent: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}
html[data-a11y-font='readable'] body,
html[data-a11y-font='readable'] body :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, li, span, strong, em):not(#lym-a11y *) {
font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif !important;
font-style: normal !important;
}
/* ---- High contrast ---- */
:root:root[data-a11y-contrast='light'] {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--popover: #ffffff;
--popover-foreground: #000000;
--primary: #000000;
--primary-foreground: #ffffff;
--secondary: #ffffff;
--secondary-foreground: #000000;
--heading: #000000;
--muted: #f2f2f2;
--muted-foreground: #000000;
--accent: #f2f2f2;
--accent-foreground: #000000;
--border: #000000;
--input: #000000;
--ring: #000000;
}
:root:root[data-a11y-contrast='dark'] {
--background: #000000;
--foreground: #ffffff;
--card: #000000;
--card-foreground: #ffffff;
--popover: #000000;
--popover-foreground: #ffffff;
--primary: #ffff00;
--primary-foreground: #000000;
--secondary: #000000;
--secondary-foreground: #ffffff;
--heading: #ffffff;
--muted: #1a1a1a;
--muted-foreground: #ffffff;
--accent: #1a1a1a;
--accent-foreground: #ffffff;
--border: #ffffff;
--input: #ffffff;
--ring: #ffff00;
}
/* Page-wide flattening: every non-media element gets the two-colour palette so
block-level inline backgrounds (hero sections, cards, footers) cannot keep a
low-contrast pairing alive. The widget's own subtree is excluded. */
html[data-a11y-contrast] body :where(*):not(img, video, iframe, canvas, svg, svg *, picture, source, #lym-a11y, #lym-a11y *) {
background-color: var(--background) !important;
background-image: none !important;
color: var(--foreground) !important;
border-color: var(--foreground);
text-shadow: none !important;
box-shadow: none !important;
}
html[data-a11y-contrast] body :where(a[href]):not(#lym-a11y *) {
text-decoration: underline;
}
html[data-a11y-contrast] body :where(button, [role='button'], input, select, textarea, a.btn, [class*='button']):not(#lym-a11y *) {
border: 2px solid var(--foreground) !important;
}
html[data-a11y-contrast='dark'] body :where(img, video, iframe, canvas):not(#lym-a11y *) {
filter: brightness(0.9);
}
/* ---- Highlight links ---- */
html[data-a11y-links='on'] body :is(a[href], button, [role='button'], [role='link'], summary):not(#lym-a11y *) {
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
outline: 2px solid currentColor !important;
outline-offset: 2px;
}
/* ---- Pause animations (mirror of the prefers-reduced-motion block in app.css) ---- */
html[data-a11y-motion='off'] [data-anim],
html[data-a11y-motion='off'] [data-anim-child] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
transition: none !important;
}
html[data-a11y-motion='off'] [data-anim-preview] {
animation: none !important;
}
html[data-a11y-motion='off'] [data-hover-card],
html[data-a11y-motion='off'] [data-hover-button],
html[data-a11y-motion='off'] [data-hover-image] img,
html[data-a11y-motion='off'] img[data-hover-image] {
transition: none !important;
}
html[data-a11y-motion='off'] [data-hover-card]:hover,
html[data-a11y-motion='off'] [data-hover-button]:hover,
html[data-a11y-motion='off'] [data-hover-image]:hover img,
html[data-a11y-motion='off'] img[data-hover-image]:hover {
transform: none !important;
}
html[data-a11y-motion='off'] body *:not(.lym-a11y-panel):not(.lym-a11y-panel *) {
animation-play-state: paused !important;
animation-duration: 0.001s !important;
transition-duration: 0.001s !important;
scroll-behavior: auto !important;
}
/* ---- Large cursor ---- */
@media (hover: hover) {
html[data-a11y-cursor='large'],
html[data-a11y-cursor='large'] body,
html[data-a11y-cursor='large'] body * {
cursor: url("data:image/svg+xml;utf8,") 4 3, auto !important;
}
html[data-a11y-cursor='large'] body :is(a[href], button, [role='button'], [role='link'], summary, label, select, input[type='checkbox'], input[type='radio']) {
cursor: url("data:image/svg+xml;utf8,") 14 3, pointer !important;
}
}
/* ============================================================
Widget chrome
============================================================ */
.lym-a11y-launcher {
position: fixed;
bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
/* inset-inline-start is logical on purpose - the launcher belongs on the
reading-start side - but the inset added to it must be physical, and
max() picks whichever side the notch is on without branching on
direction. Mirrors the whatsapp-button entry in available-apps.json. */
inset-inline-start: calc(1.5rem + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
z-index: 60;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid #ffffff;
border-radius: 9999px;
background: #111111;
color: #ffffff;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
cursor: pointer;
font: inherit;
line-height: 0;
}
.lym-a11y-launcher[data-position='end'] {
inset-inline-start: auto;
inset-inline-end: calc(1.5rem + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
}
.lym-a11y-launcher svg {
width: 26px;
height: 26px;
fill: currentColor;
}
.lym-a11y-launcher:hover,
.lym-a11y-launcher[aria-expanded='true'] {
background: #000000;
}
.lym-a11y-launcher:focus-visible,
.lym-a11y-panel :is(button, a):focus-visible {
outline: 3px solid #ffbf00;
outline-offset: 2px;
}
@media (min-width: 640px) {
.lym-a11y-launcher {
bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
inset-inline-start: calc(2rem + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
width: 48px;
height: 48px;
}
.lym-a11y-launcher[data-position='end'] {
inset-inline-start: auto;
inset-inline-end: calc(2rem + max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
}
}
.lym-a11y-panel {
position: fixed;
bottom: calc(4.5rem + 52px + env(safe-area-inset-bottom, 0px));
inset-inline-start: 1rem;
inset-inline-end: 1rem;
z-index: 61;
max-height: calc(100vh - 6rem - 60px);
overflow-y: auto;
box-sizing: border-box;
width: auto;
padding: 14px;
border: 2px solid #111111;
border-radius: 16px;
background: #ffffff;
color: #111111;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 15px;
line-height: 1.4;
letter-spacing: normal;
word-spacing: normal;
}
.lym-a11y-panel[hidden] {
display: none;
}
@media (min-width: 640px) {
.lym-a11y-panel {
bottom: calc(6.25rem + 60px + env(safe-area-inset-bottom, 0px));
inset-inline-start: 2rem;
inset-inline-end: auto;
width: 340px;
}
.lym-a11y-panel[data-position='end'] {
inset-inline-start: auto;
inset-inline-end: 2rem;
}
}
.lym-a11y-panel * {
box-sizing: border-box;
font-family: inherit;
letter-spacing: normal;
word-spacing: normal;
}
.lym-a11y-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.lym-a11y-title {
margin: 0;
font-size: 17px;
font-weight: 700;
color: #111111;
}
.lym-a11y-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #cccccc;
border-radius: 9999px;
background: #ffffff;
color: #111111;
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.lym-a11y-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.lym-a11y-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
min-height: 64px;
padding: 10px;
border: 2px solid #d4d4d4;
border-radius: 12px;
background: #ffffff;
color: #111111;
cursor: pointer;
text-align: start;
font-size: 14px;
font-weight: 600;
transition: border-color 0.15s, background 0.15s;
}
.lym-a11y-option:hover {
border-color: #111111;
}
.lym-a11y-option[aria-pressed='true'],
.lym-a11y-option[data-active='true'] {
border-color: #111111;
background: #111111;
color: #ffffff;
}
.lym-a11y-option svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lym-a11y-option .lym-a11y-level {
display: flex;
gap: 3px;
margin-inline-start: auto;
}
.lym-a11y-option .lym-a11y-level i {
display: block;
width: 9px;
height: 4px;
border-radius: 2px;
background: currentColor;
opacity: 0.25;
}
.lym-a11y-option .lym-a11y-level i[data-on='true'] {
opacity: 1;
}
.lym-a11y-option .lym-a11y-row {
display: flex;
align-items: center;
width: 100%;
gap: 8px;
}
.lym-a11y-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
}
.lym-a11y-reset {
padding: 8px 14px;
border: 1px solid #111111;
border-radius: 9999px;
background: #ffffff;
color: #111111;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
.lym-a11y-reset:hover {
background: #111111;
color: #ffffff;
}
.lym-a11y-statement {
font-size: 13px;
color: #111111;
text-decoration: underline;
}