/* =========================================================================
Acumi website — accessibility widget
Loaded from so theme/effect rules apply before first paint.
Two parts:
1. WIDGET CHROME — the floating button + panel, namespaced under
.a11y-widget so it never collides with Tailwind.
2. GLOBAL EFFECTS — page-wide rules keyed off html[data-a11y-*] /
html.a11y-* flags set by accessibility-core.mjs.
Colour THEMES live in the "COLOUR THEMES" section at the bottom.
========================================================================= */
/* ----------------------------------------------------------------------- */
/* 1. WIDGET CHROME */
/* ----------------------------------------------------------------------- */
.a11y-widget {
--awa-surface: #ffffff;
--awa-surface-2: #f4f4fb;
--awa-text: #29275a;
--awa-text-2: #67658b;
--awa-muted: #8b89a7;
--awa-border: #e3e3ef;
--awa-border-strong: #b4b4c8;
--awa-action: #6e74e2;
--awa-action-soft: #e2e3f8;
--awa-focus: #1d1b2e;
--awa-switch-off: #d8d8e4;
--awa-shadow: rgba(41, 39, 90, 0.4);
font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Floating trigger button — bottom-RIGHT (cookie banner sits bottom-left). */
.a11y-fab {
position: fixed;
right: 28px;
bottom: 28px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--awa-action);
border: none;
cursor: pointer;
z-index: 2147482000; /* above content, below the cookie banner (…483000) */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 26px rgba(20, 19, 31, 0.30), 0 2px 6px rgba(20, 19, 31, 0.20);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.a11y-fab:hover { transform: translateY(-2px); }
.a11y-fab svg { width: 32px; height: 32px; fill: #fff; pointer-events: none; }
/* On the yellow FAB, the glyph needs to be dark for contrast. */
html[data-a11y-theme='black-yellow'] .a11y-fab svg { fill: #000; }
.a11y-fab:focus-visible {
outline: 3px solid var(--awa-focus);
outline-offset: 3px;
}
/* Backdrop (click-outside to close; transparent on desktop, dim on mobile). */
.a11y-backdrop {
position: fixed;
inset: 0;
z-index: 2147482500;
background: transparent;
display: none;
}
.a11y-widget[data-open='true'] .a11y-backdrop { display: block; }
/* Panel */
.a11y-panel {
position: fixed;
right: 28px;
bottom: 104px;
width: 380px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 132px);
overflow-y: auto;
background: var(--awa-surface);
color: var(--awa-text);
border: 1px solid var(--awa-border);
border-radius: 24px;
box-shadow: 0 30px 70px -18px var(--awa-shadow), 0 8px 24px rgba(41, 39, 90, 0.1);
padding: 26px 26px 22px;
z-index: 2147482600;
display: none;
}
.a11y-widget[data-open='true'] .a11y-panel { display: block; }
/* On narrow viewports, present as a centered sheet rather than a corner popover. */
@media (max-width: 520px) {
.a11y-backdrop { background: rgba(20, 19, 31, 0.45); }
.a11y-panel {
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
width: min(420px, calc(100vw - 24px));
max-height: calc(100vh - 48px);
}
}
.a11y-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
}
.a11y-panel__title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.a11y-close {
width: 32px; height: 32px; border-radius: 9px; border: none;
background: transparent; color: var(--awa-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.a11y-close:hover { background: var(--awa-surface-2); }
.a11y-close svg { width: 18px; height: 18px; stroke: currentColor; }
.a11y-group { margin-bottom: 22px; }
.a11y-group:last-of-type { margin-bottom: 6px; }
.a11y-label {
font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--awa-muted); margin: 0 0 11px;
}
/* Colour swatches (radio group) */
.a11y-swatches { display: flex; gap: 12px; }
.a11y-sw {
width: 64px; height: 58px; border-radius: 14px; cursor: pointer;
border: 1.5px solid var(--awa-border);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 20px; background: #fff;
}
.a11y-sw[aria-checked='true'] {
border-color: var(--awa-action);
box-shadow: 0 0 0 3px var(--awa-action-soft);
}
.a11y-sw:focus-visible { outline: 3px solid var(--awa-focus); outline-offset: 2px; }
.a11y-sw--default { background: #fff; color: #29275a; }
.a11y-sw--dark { background: #1d1b2e; color: #f4f4fb; }
.a11y-sw--contrast { background: #fff; color: #000; border-color: #111; }
.a11y-sw--black-yellow { background: #000; color: #ffd400; }
/* Font dropdown */
.a11y-select { position: relative; }
.a11y-select select {
width: 100%; appearance: none; -webkit-appearance: none;
background: var(--awa-surface); color: var(--awa-text);
border: 1.5px solid var(--awa-border-strong); border-radius: 13px;
padding: 13px 40px 13px 16px; font: inherit; font-size: 16px; cursor: pointer;
}
.a11y-select::after {
content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
border-right: 2px solid var(--awa-text-2); border-bottom: 2px solid var(--awa-text-2);
transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.a11y-select select:focus-visible { outline: 3px solid var(--awa-focus); outline-offset: 1px; }
/* Text-size buttons (radio group) */
.a11y-sizes { display: flex; gap: 12px; }
.a11y-size {
flex: 1; height: 62px; border-radius: 14px; cursor: pointer;
border: 1.5px solid var(--awa-border); background: var(--awa-surface); color: var(--awa-text);
display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.a11y-size[aria-checked='true'] {
border-color: var(--awa-action); background: var(--awa-action-soft);
box-shadow: 0 0 0 3px var(--awa-action-soft);
}
.a11y-size:focus-visible { outline: 3px solid var(--awa-focus); outline-offset: 2px; }
.a11y-size--1 { font-size: 16px; }
.a11y-size--2 { font-size: 20px; }
.a11y-size--3 { font-size: 25px; }
.a11y-size--4 { font-size: 31px; }
/* Toggles (switch) */
.a11y-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 13px 0; border-top: 1px solid var(--awa-border); cursor: pointer;
background: none; border-left: none; border-right: none; border-bottom: none;
width: 100%; text-align: left; color: var(--awa-text); font: inherit; font-size: 16.5px;
}
.a11y-toggle:first-of-type { border-top: none; }
.a11y-toggle:focus-visible { outline: 3px solid var(--awa-focus); outline-offset: 2px; border-radius: 8px; }
.a11y-switch {
width: 46px; height: 27px; border-radius: 999px; background: var(--awa-switch-off);
position: relative; flex: none; transition: background 0.2s;
}
.a11y-switch::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: left 0.2s;
}
.a11y-toggle[aria-checked='true'] .a11y-switch { background: var(--awa-action); }
.a11y-toggle[aria-checked='true'] .a11y-switch::after { left: 22px; }
.a11y-reset {
margin-top: 14px; background: none; border: none; cursor: pointer;
color: var(--awa-text-2); text-decoration: underline; text-underline-offset: 3px;
font: inherit; font-size: 14.5px; padding: 4px 0;
}
.a11y-reset:focus-visible { outline: 3px solid var(--awa-focus); outline-offset: 2px; border-radius: 6px; }
/* Panel open/close motion — suppressed for reduce-motion users. */
@media (prefers-reduced-motion: no-preference) {
.a11y-panel { animation: a11y-pop 0.16s ease-out; }
@keyframes a11y-pop {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* ----------------------------------------------------------------------- */
/* 2. GLOBAL EFFECTS (page-wide, gated on flags) */
/* ----------------------------------------------------------------------- */
/* Text size — scales the rem-based type system from the root. */
html[data-a11y-text='2'] { font-size: 112%; }
html[data-a11y-text='3'] { font-size: 125%; }
html[data-a11y-text='4'] { font-size: 140%; }
/* Font — swap the body + display faces for Atkinson Hyperlegible. */
html[data-a11y-font='hyperlegible'] body,
html[data-a11y-font='hyperlegible'] .font-sans,
html[data-a11y-font='hyperlegible'] .font-display {
font-family: 'Atkinson Hyperlegible', 'Hanken Grotesk', system-ui, sans-serif !important;
}
/* Wider character spacing. */
html.a11y-spacing body { letter-spacing: 0.06em; word-spacing: 0.1em; }
/* Reduce motion — neutralise animations, transitions, and smooth scroll. */
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;
}
html.a11y-reduce-motion { scroll-behavior: auto !important; }
/* Underline all links. */
html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 2px; }
/* Hide decorative elements (opt-in marked; never hides the widget itself). */
html.a11y-hide-decorative .a11y-decorative,
html.a11y-hide-decorative [data-a11y-decorative] { display: none !important; }
/* ----------------------------------------------------------------------- */
/* 3. COLOUR THEMES — override the brand-token utility classes per theme. */
/* Each theme: (a) retheme the widget panel via --awa-* vars so the */
/* control surface stays coherent, (b) remap the structural + accent */
/* brand tokens the site actually uses. Photographic ![]()
is untouched. */
/* ----------------------------------------------------------------------- */
/* ===== DARK =========================================================== */
html[data-a11y-theme='dark'] .a11y-widget {
--awa-surface: #1f1d2e; --awa-surface-2: #2a2740; --awa-text: #f4f4fb;
--awa-text-2: #c7c5de; --awa-muted: #9e9cbc; --awa-border: #3a3658;
--awa-border-strong: #4a4668; --awa-action: #a4a8ec; --awa-action-soft: #322f55;
--awa-focus: #ffd400; --awa-switch-off: #4a4668; --awa-shadow: rgba(0, 0, 0, 0.6);
}
html[data-a11y-theme='dark'] body { background-color: #15131f; }
html[data-a11y-theme='dark'] .bg-brand-bg,
html[data-a11y-theme='dark'] .bg-brand-surface { background-color: #1f1d2e !important; }
html[data-a11y-theme='dark'] .bg-brand-surface-variant,
html[data-a11y-theme='dark'] .bg-brand-blue-bg { background-color: #2a2740 !important; }
html[data-a11y-theme='dark'] .bg-brand-text { background-color: #0e0c16 !important; }
html[data-a11y-theme='dark'] .text-brand-text { color: #f4f4fb !important; }
html[data-a11y-theme='dark'] .text-brand-text-secondary { color: #c7c5de !important; }
html[data-a11y-theme='dark'] .text-brand-text-muted { color: #9e9cbc !important; }
html[data-a11y-theme='dark'] .text-brand-bg { color: #f4f4fb !important; }
html[data-a11y-theme='dark'] .border-brand-border,
html[data-a11y-theme='dark'] .border-brand-border-dark { border-color: #3a3658 !important; }
html[data-a11y-theme='dark'] .text-brand-blue,
html[data-a11y-theme='dark'] .text-brand-blue-dark { color: #a4a8ec !important; }
html[data-a11y-theme='dark'] .bg-brand-blue { background-color: #5457af !important; }
html[data-a11y-theme='dark'] .bg-brand-blue-dark { background-color: #3d3a78 !important; }
html[data-a11y-theme='dark'] .border-brand-blue { border-color: #a4a8ec !important; }
html[data-a11y-theme='dark'] .text-brand-green { color: #6fd3a0 !important; }
html[data-a11y-theme='dark'] .text-brand-red { color: #f29b9b !important; }
html[data-a11y-theme='dark'] .text-brand-orange,
html[data-a11y-theme='dark'] .text-brand-orange-dark { color: #ecb8c8 !important; }
html[data-a11y-theme='dark'] .text-brand-warning,
html[data-a11y-theme='dark'] .text-brand-warning-dark { color: #e0b877 !important; }
/* ===== HIGH CONTRAST (black on white) ================================= */
html[data-a11y-theme='contrast'] .a11y-widget {
--awa-surface: #fff; --awa-surface-2: #fff; --awa-text: #000;
--awa-text-2: #000; --awa-muted: #000; --awa-border: #000;
--awa-border-strong: #000; --awa-action: #0000cc; --awa-action-soft: #cfcffa;
--awa-focus: #0000cc; --awa-switch-off: #767676; --awa-shadow: rgba(0, 0, 0, 0.5);
}
html[data-a11y-theme='contrast'] body { background-color: #fff; }
html[data-a11y-theme='contrast'] .bg-brand-bg,
html[data-a11y-theme='contrast'] .bg-brand-surface,
html[data-a11y-theme='contrast'] .bg-brand-surface-variant,
html[data-a11y-theme='contrast'] .bg-brand-blue-bg { background-color: #fff !important; }
html[data-a11y-theme='contrast'] .bg-brand-text { background-color: #000 !important; }
html[data-a11y-theme='contrast'] .text-brand-text,
html[data-a11y-theme='contrast'] .text-brand-text-secondary,
html[data-a11y-theme='contrast'] .text-brand-text-muted { color: #000 !important; }
html[data-a11y-theme='contrast'] .text-brand-bg { color: #fff !important; }
html[data-a11y-theme='contrast'] .border-brand-border,
html[data-a11y-theme='contrast'] .border-brand-border-dark { border-color: #000 !important; }
html[data-a11y-theme='contrast'] .text-brand-blue,
html[data-a11y-theme='contrast'] .text-brand-blue-dark { color: #0000cc !important; }
html[data-a11y-theme='contrast'] .bg-brand-blue,
html[data-a11y-theme='contrast'] .bg-brand-blue-dark { background-color: #0000cc !important; }
html[data-a11y-theme='contrast'] .border-brand-blue { border-color: #0000cc !important; }
html[data-a11y-theme='contrast'] .text-brand-green,
html[data-a11y-theme='contrast'] .text-brand-success-dark { color: #006100 !important; }
html[data-a11y-theme='contrast'] .text-brand-red,
html[data-a11y-theme='contrast'] .text-brand-red-dark { color: #b00000 !important; }
html[data-a11y-theme='contrast'] .text-brand-orange,
html[data-a11y-theme='contrast'] .text-brand-orange-dark,
html[data-a11y-theme='contrast'] .text-brand-warning,
html[data-a11y-theme='contrast'] .text-brand-warning-dark { color: #6a3a00 !important; }
/* ===== BLACK & YELLOW (yellow on black, low-vision) ================== */
html[data-a11y-theme='black-yellow'] .a11y-widget {
--awa-surface: #000; --awa-surface-2: #1a1a00; --awa-text: #ffd400;
--awa-text-2: #ffd400; --awa-muted: #ffe680; --awa-border: #ffd400;
--awa-border-strong: #ffd400; --awa-action: #ffd400; --awa-action-soft: #3a3200;
--awa-focus: #fff; --awa-switch-off: #5a5000; --awa-shadow: rgba(0, 0, 0, 0.8);
}
html[data-a11y-theme='black-yellow'] body { background-color: #000; }
html[data-a11y-theme='black-yellow'] .bg-brand-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-surface,
html[data-a11y-theme='black-yellow'] .bg-brand-surface-variant,
html[data-a11y-theme='black-yellow'] .bg-brand-blue-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-text { background-color: #000 !important; }
html[data-a11y-theme='black-yellow'] .text-brand-text,
html[data-a11y-theme='black-yellow'] .text-brand-text-secondary,
html[data-a11y-theme='black-yellow'] .text-brand-text-muted,
html[data-a11y-theme='black-yellow'] .text-brand-bg,
html[data-a11y-theme='black-yellow'] .text-brand-blue,
html[data-a11y-theme='black-yellow'] .text-brand-blue-dark,
html[data-a11y-theme='black-yellow'] .text-brand-green,
html[data-a11y-theme='black-yellow'] .text-brand-red,
html[data-a11y-theme='black-yellow'] .text-brand-orange,
html[data-a11y-theme='black-yellow'] .text-brand-warning { color: #ffd400 !important; }
html[data-a11y-theme='black-yellow'] .border-brand-border,
html[data-a11y-theme='black-yellow'] .border-brand-border-dark,
html[data-a11y-theme='black-yellow'] .border-brand-blue { border-color: #ffd400 !important; }
/* Primary actions become black chips with a bold yellow border + text. */
html[data-a11y-theme='black-yellow'] .bg-brand-blue,
html[data-a11y-theme='black-yellow'] .bg-brand-blue-dark {
background-color: #000 !important; color: #ffd400 !important;
border: 2px solid #ffd400 !important;
}
/* In the heaviest themes, drop purely-decorative artwork to cut visual noise. */
html[data-a11y-theme='contrast'] .a11y-decorative,
html[data-a11y-theme='black-yellow'] .a11y-decorative { display: none !important; }
/* ----- Opacity-variant tokens (text-brand-text/70, bg-brand-surface/95, …) -----
Tailwind's `/NN` modifier mints a distinct class whose name contains a slash,
so a substring selector remaps every opacity step at once. In an accessibility
theme we deliberately collapse the faded hierarchy to full-contrast values —
legibility beats subtlety. Photographic ![]()
is never touched. */
html[data-a11y-theme='dark'] [class*='text-brand-text/'] { color: #f4f4fb !important; }
html[data-a11y-theme='dark'] [class*='text-brand-bg/'] { color: #d7d7ea !important; }
html[data-a11y-theme='dark'] [class*='bg-brand-surface/'],
html[data-a11y-theme='dark'] [class*='bg-brand-surface-variant/'] { background-color: #2a2740 !important; }
html[data-a11y-theme='dark'] [class*='bg-brand-bg/'] { background-color: #1f1d2e !important; }
html[data-a11y-theme='contrast'] [class*='text-brand-text/'] { color: #000 !important; }
html[data-a11y-theme='contrast'] [class*='text-brand-bg/'] { color: #fff !important; }
html[data-a11y-theme='contrast'] [class*='bg-brand-surface/'],
html[data-a11y-theme='contrast'] [class*='bg-brand-surface-variant/'],
html[data-a11y-theme='contrast'] [class*='bg-brand-bg/'] { background-color: #fff !important; }
html[data-a11y-theme='black-yellow'] [class*='text-brand-text/'],
html[data-a11y-theme='black-yellow'] [class*='text-brand-bg/'] { color: #ffd400 !important; }
html[data-a11y-theme='black-yellow'] [class*='bg-brand-surface/'],
html[data-a11y-theme='black-yellow'] [class*='bg-brand-surface-variant/'],
html[data-a11y-theme='black-yellow'] [class*='bg-brand-bg/'] { background-color: #000 !important; }
/* ----- Literal surface colours that don't theme on their own -----------
The site uses literal `bg-white` as a card idiom; remap it so cards aren't
bright-white islands on a dark page. Contrast theme keeps white (correct). */
html[data-a11y-theme='dark'] .bg-white { background-color: #26233a !important; }
html[data-a11y-theme='black-yellow'] .bg-white { background-color: #000 !important; }
/* ----- Header wordmark: render the dark logo image light in dark themes -
The lockup is a dark PNG; a filter recolours it without a second asset. */
html[data-a11y-theme='dark'] .site-logo,
html[data-a11y-theme='black-yellow'] .site-logo { filter: brightness(0) invert(1); }
html[data-a11y-theme='contrast'] .site-logo { filter: brightness(0); }
/* ----- Hide decorative icons -------------------------------------------
Targets: explicitly-tagged decoratives, ornamental quote glyphs, blurred
background blobs, and icon "chips" (a small rounded tile whose only content
is an SVG). Never hides the widget, nav, or any interactive icon. */
html.a11y-hide-decorative .a11y-decorative,
html.a11y-hide-decorative [data-a11y-decorative],
html.a11y-hide-decorative [aria-hidden='true'].select-none,
html.a11y-hide-decorative .blur-3xl,
/* Icon "chips": a pastel-tinted tile whose direct child is an SVG. Catches the
rounded-lg/xl/2xl/3xl/full variants without enumerating each. */
html.a11y-hide-decorative :is(
[class*='bg-brand-blue-bg'],
[class*='bg-brand-green-bg'],
[class*='bg-brand-orange-bg'],
[class*='bg-brand-red-bg'],
[class*='bg-brand-success-bg'],
[class*='bg-brand-warning-bg'],
[class*='bg-brand-surface-variant']
):has(> svg),
/* Any fixed-size, flex-centred tile whose ONLY child is an icon (catches chips
that use a non-pastel tint). Excludes links/buttons so nav/CTAs are untouched. */
html.a11y-hide-decorative [class*='justify-center'][class*='items-center']:has(> svg:only-child):not(a, button, .a11y-widget *) { display: none !important; }
/* ----- Pastel "-bg" tints (section bands + icon chips + pill badges) -----
These light pastels are used both for full-width section backgrounds and for
small accent chips. Remap the whole family so a pale band never strands its
(now light) heading text. Hue-tinted in dark; flattened in the heavy themes. */
html[data-a11y-theme='dark'] .bg-brand-green-bg,
html[data-a11y-theme='dark'] .bg-brand-success-bg { background-color: #16302a !important; }
html[data-a11y-theme='dark'] .bg-brand-orange-bg { background-color: #322031 !important; }
html[data-a11y-theme='dark'] .bg-brand-red-bg { background-color: #341f27 !important; }
html[data-a11y-theme='dark'] .bg-brand-warning-bg { background-color: #2f2a1c !important; }
html[data-a11y-theme='contrast'] .bg-brand-green-bg,
html[data-a11y-theme='contrast'] .bg-brand-success-bg,
html[data-a11y-theme='contrast'] .bg-brand-orange-bg,
html[data-a11y-theme='contrast'] .bg-brand-red-bg,
html[data-a11y-theme='contrast'] .bg-brand-warning-bg { background-color: #fff !important; }
html[data-a11y-theme='black-yellow'] .bg-brand-green-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-success-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-orange-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-red-bg,
html[data-a11y-theme='black-yellow'] .bg-brand-warning-bg { background-color: #000 !important; }