/* ============================================================= DCC-i Portal — Accessibility Preferences Panel File: css/dcci-accessibility.css Structure ────────────────────────────────────────────────────────────── 1. Trigger button (in utility bar) 2. Panel shell + positioning 3. Panel header + intro 4. Control groups 5. Segmented controls (radio: text size, contrast) 6. Toggle switches (checkbox: font, spacing, motion, etc.) 7. Reset button + footer 8. Responsive (mobile) 9. STATE CLASSES — applied to for early-paint a. Text size b. High contrast c. Readable font d. Text spacing e. Reduce motion f. Simplified view g. Highlight links Notes ────────────────────────────────────────────────────────────── - State classes are on , not , so the early-apply inline script (which runs before exists) can set them without a FOUC. - All variables inherited from dcci-portal.css :root block. - Panel is position: fixed — immune to the utility bar's overflow: hidden. No structural changes to existing CSS needed. ============================================================= */ /* ── 1. Trigger button ──────────────────────────────────────── */ /* Sits in .dcci-utility-bar__right, between .dcci-util-sep and .dcci-search-form. Ghost pill matching the existing account trigger aesthetic — same height, same border, same font. */ .dcci-a11y-trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--dcci-border); border-radius: 999px; padding: 5px 11px; cursor: pointer; font-family: var(--dcci-header-font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--dcci-white-hi); white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; flex-shrink: 0; } .dcci-a11y-trigger:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); } .dcci-a11y-trigger:focus-visible { outline: 2px solid var(--dcci-pink); outline-offset: 2px; } /* Active (open) state — subtle pink tint matching site accent */ .dcci-a11y-trigger[aria-expanded="true"] { background: rgba(255, 90, 165, 0.14); border-color: rgba(255, 90, 165, 0.45); color: var(--dcci-pink); } .dcci-a11y-trigger__icon { flex-shrink: 0; opacity: 0.85; transition: opacity 0.15s ease; } .dcci-a11y-trigger[aria-expanded="true"] .dcci-a11y-trigger__icon { opacity: 1; } /* Label text — hidden on mobile (icon-only), shown on desktop */ .dcci-a11y-trigger__label { /* visible by default — hidden via media query below */ } /* ── 2. Panel shell ─────────────────────────────────────────── */ /* Fixed positioning: escapes the utility bar's overflow:hidden entirely. Aligned to the right edge of the utility bar inner padding (28px from viewport right). Drops 2px below the bar so it visually separates from it. Uses visibility + opacity (not display) so the open/close CSS transition runs cleanly. */ .dcci-a11y-panel { position: fixed; top: 52px; /* utility bar height (50px) + 2px gap */ right: 28px; /* matches .dcci-utility-bar__inner padding */ z-index: 800; /* above utility bar (200), below any modals (9999) */ width: 316px; max-height: calc(100vh - 72px); overflow-y: auto; overflow-x: hidden; /* Dark surface — slightly lighter than utility bar for depth */ background: #1e1136; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 16px 48px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 90, 165, 0.07); /* Hidden by default */ opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; /* delay visibility so transition completes */ } /* Open state — toggled by JS */ .dcci-a11y-panel.dcci-a11y-panel--open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; /* no delay on open */ } /* Honour prefers-reduced-motion for the panel itself */ @media (prefers-reduced-motion: reduce) { .dcci-a11y-panel { transition: visibility 0s linear 0s; } .dcci-a11y-panel.dcci-a11y-panel--open { transition: none; } } /* ── 3. Panel header + intro ────────────────────────────────── */ .dcci-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .dcci-a11y-panel__title { font-family: var(--dcci-header-font); font-size: 12.5px; font-weight: 700; color: var(--dcci-white-hi); letter-spacing: 0.02em; margin: 0; line-height: 1.2; } .dcci-a11y-panel__close { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; cursor: pointer; color: var(--dcci-white-mid); flex-shrink: 0; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .dcci-a11y-panel__close:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); color: var(--dcci-white-hi); } .dcci-a11y-panel__close:focus-visible { outline: 2px solid var(--dcci-pink); outline-offset: 2px; } .dcci-a11y-panel__intro { font-family: var(--dcci-header-font); font-size: 11.5px; font-weight: 400; color: var(--dcci-white-mid); line-height: 1.6; margin: 0; padding: 11px 18px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* ── 4. Control groups ──────────────────────────────────────── */ .dcci-a11y-body { padding: 4px 0 2px; } .dcci-a11y-group { padding: 12px 18px; } /* Thin rule between groups — very subtle */ .dcci-a11y-group + .dcci-a11y-group { border-top: 1px solid rgba(255, 255, 255, 0.045); } /* Group label — uppercase micro-text, same treatment as section labels elsewhere in the portal */ .dcci-a11y-group__label { font-family: var(--dcci-header-font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dcci-white-mid); margin-bottom: 10px; } /* ── 5. Segmented control (radio group) ─────────────────────── */ /* Used for: Text size (Normal / Large / Extra large) Contrast (Default / High contrast) Each wraps a hidden radio input + a visible .seg-btn span. The checked state is handled purely via CSS :checked + adjacent sibling. */ .dcci-a11y-segmented { display: flex; gap: 4px; } .dcci-a11y-segmented label { flex: 1; position: relative; cursor: pointer; display: block; } /* Visually hidden radio — still keyboard-focusable */ .dcci-a11y-segmented input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; } .dcci-a11y-seg-btn { display: flex; align-items: center; justify-content: center; padding: 6px 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; font-family: var(--dcci-header-font); font-size: 11px; font-weight: 600; color: var(--dcci-white-mid); text-align: center; white-space: nowrap; user-select: none; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } /* Selected state */ .dcci-a11y-segmented input[type="radio"]:checked + .dcci-a11y-seg-btn { background: var(--dcci-pink); border-color: var(--dcci-pink); color: #ffffff; box-shadow: 0 1px 8px rgba(255, 90, 165, 0.38); } /* Hover — only on unselected */ .dcci-a11y-segmented label:hover input:not(:checked) + .dcci-a11y-seg-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: var(--dcci-white-hi); } /* Keyboard focus — ring on the visible seg-btn */ .dcci-a11y-segmented input[type="radio"]:focus-visible + .dcci-a11y-seg-btn { outline: 2px solid var(--dcci-pink); outline-offset: 2px; } /* ── Contrast option colours — unselected hints ─────────────── */ /* Each contrast button gets a subtle colour hint even when unselected so users can see at a glance what each option does. Selected state still uses the pink active treatment from above, but we override it per-option so the active colour matches the mode. */ /* Light — warm off-white background hint */ input[name="a11y-contrast"][value="light"] + .dcci-a11y-seg-btn { background: rgba(245, 245, 245, 0.15); color: #f5f5f5; } input[name="a11y-contrast"][value="light"]:checked + .dcci-a11y-seg-btn { background: #f5f5f5; border-color: #f5f5f5; color: #0d0d0d; box-shadow: 0 1px 8px rgba(245, 245, 245, 0.4); } /* Dark — near-black background hint */ input[name="a11y-contrast"][value="high"] + .dcci-a11y-seg-btn { background: rgba(10, 5, 20, 0.5); color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.2); } input[name="a11y-contrast"][value="high"]:checked + .dcci-a11y-seg-btn { background: #0a0514; border-color: #ffffff; color: #ffffff; box-shadow: 0 1px 8px rgba(255, 255, 255, 0.2); } /* Dyslexia — warm cream hint */ input[name="a11y-contrast"][value="dyslexia"] + .dcci-a11y-seg-btn { background: rgba(253, 246, 227, 0.15); color: #fdf6e3; } input[name="a11y-contrast"][value="dyslexia"]:checked + .dcci-a11y-seg-btn { background: #fdf6e3; border-color: #fdf6e3; color: #1a1a2e; box-shadow: 0 1px 8px rgba(253, 246, 227, 0.4); } /* Yellow — yellow on near-black */ input[name="a11y-contrast"][value="yellow"] + .dcci-a11y-seg-btn { background: rgba(26, 26, 0, 0.6); color: #ffff00; border-color: rgba(255, 255, 0, 0.3); } input[name="a11y-contrast"][value="yellow"]:checked + .dcci-a11y-seg-btn { background: #1a1a00; border-color: #ffff00; color: #ffff00; box-shadow: 0 1px 8px rgba(255, 255, 0, 0.3); } /* ── 6. Toggle switches ─────────────────────────────────────── */ /* DOM order inside each : 1. input[type="checkbox"] (hidden, immediately before track) 2. .dcci-a11y-toggle__track > .dcci-a11y-toggle__thumb 3. .dcci-a11y-toggle__text The :checked + .track adjacency selector requires input → track to be immediate siblings. Visually, text appears LEFT and track appears RIGHT — achieved with flex order properties rather than changing DOM order (keeping DOM order correct for the sibling selector). */ .dcci-a11y-toggle { position: relative; /* contain the absolute-positioned input */ display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; } /* Thin separator between toggle rows */ .dcci-a11y-toggle + .dcci-a11y-toggle { border-top: 1px solid rgba(255, 255, 255, 0.04); } /* Hidden but focusable input */ .dcci-a11y-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Toggle track — the pill background */ .dcci-a11y-toggle__track { order: 2; /* visually right */ position: relative; flex-shrink: 0; width: 36px; height: 20px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease; } /* Toggle thumb — the sliding dot */ .dcci-a11y-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: rgba(255, 255, 255, 0.45); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, background 0.2s ease; } /* Toggle label text */ .dcci-a11y-toggle__text { order: 1; /* visually left */ flex: 1; font-family: var(--dcci-header-font); font-size: 12.5px; font-weight: 600; color: var(--dcci-white-hi); user-select: none; line-height: 1.3; } /* Checked states — input → track adjacency */ .dcci-a11y-toggle__input:checked + .dcci-a11y-toggle__track { background: var(--dcci-pink); border-color: var(--dcci-pink); } .dcci-a11y-toggle__input:checked + .dcci-a11y-toggle__track .dcci-a11y-toggle__thumb { transform: translateX(16px); background: #ffffff; } /* Focus ring on track when input is keyboard-focused */ .dcci-a11y-toggle__input:focus-visible + .dcci-a11y-toggle__track { outline: 2px solid var(--dcci-pink); outline-offset: 2px; } /* Hover — dim/lift the track slightly */ .dcci-a11y-toggle:hover .dcci-a11y-toggle__track { border-color: rgba(255, 255, 255, 0.28); } .dcci-a11y-toggle:hover .dcci-a11y-toggle__input:not(:checked) + .dcci-a11y-toggle__track { background: rgba(255, 255, 255, 0.15); } /* ── 7. Reset button + footer ───────────────────────────────── */ .dcci-a11y-footer { padding: 10px 18px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 4px; } .dcci-a11y-reset { display: block; width: 100%; padding: 8px 14px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 8px; font-family: var(--dcci-header-font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--dcci-white-mid); cursor: pointer; text-align: center; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .dcci-a11y-reset:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: var(--dcci-white-hi); } .dcci-a11y-reset:focus-visible { outline: 2px solid var(--dcci-pink); outline-offset: 2px; } /* ── 8. Responsive — mobile ─────────────────────────────────── */ @media (max-width: 640px) { /* Icon-only trigger on mobile */ .dcci-a11y-trigger__label { display: none; } .dcci-a11y-trigger { padding: 5px 8px; } /* Full-width panel, flush to viewport edges */ .dcci-a11y-panel { top: 50px; /* mobile utility bar is 48px + 2px gap */ right: 0; left: 0; width: auto; border-radius: 0 0 14px 14px; border-left: none; border-right: none; max-height: calc(100vh - 70px); } } @media (max-width: 400px) { .dcci-a11y-panel { top: 48px; } } /* ════════════════════════════════════════════════════════════════ STATE CLASSES Applied to (not ) — the early-apply inline script runs before is parsed, so it sets classes on . All selectors below target html.accessibility-* to match. ════════════════════════════════════════════════════════════════ */ /* ── a. Text size ────────────────────────────────────────────── */ /* Universal approach — every element on the page scales. Nav, footer, testimonials, sign-in links, partner text, buttons, form fields, LearnDash chrome — nothing is exempt. Mechanism: 1. html font-size sets the rem base for the whole document. 2. * { font-size: 1rem !important } forces every px-locked element to adopt that scaled base. Because 1rem now equals the enlarged html base, all text lands at the target size. 3. Heading rules have higher specificity than * so they override it and restore proportional hierarchy (h1 > h2 > h3 etc.). Note: CSS * does NOT match ::before / ::after pseudo-elements, so icon fonts (dashicons, Font Awesome) are unaffected and continue to render at their own sizes. */ html.accessibility-text-large { font-size: 131.25%; /* ~21px — RNIB large print minimum (16pt) */ } html.accessibility-text-xl { font-size: 175%; /* 28px — RNIB typical request range (21pt) */ } /* ·· Universal override — catches every px-locked element ······ */ html.accessibility-text-large *, html.accessibility-text-xl * { font-size: 1rem !important; } /* ·· Restore heading hierarchy ································· */ /* Element selectors (h1 etc.) have higher specificity than *, so these !important rules beat the universal override above. Values in rem so they scale with the html base automatically: Large: h1≈37px h2≈31px h3≈26px h4-h6≈21px XL: h1≈49px h2≈42px h3≈35px h4-h6≈28px */ html.accessibility-text-large h1, html.accessibility-text-xl h1 { font-size: 1.75rem !important; } html.accessibility-text-large h2, html.accessibility-text-xl h2 { font-size: 1.5rem !important; } html.accessibility-text-large h3, html.accessibility-text-xl h3 { font-size: 1.25rem !important; } html.accessibility-text-large h4, html.accessibility-text-large h5, html.accessibility-text-large h6, html.accessibility-text-xl h4, html.accessibility-text-xl h5, html.accessibility-text-xl h6 { font-size: 1rem !important; } /* ·· Accessibility panel — grow to fit its own scaled text ····· */ /* The panel is anchored right: 28px so it expands leftward. Width and segment control min-width are the only things that need to change — the panel's own text is also caught by the universal * rule above, so its labels/buttons scale too. */ html.accessibility-text-large .dcci-a11y-panel { width: 400px !important; } html.accessibility-text-xl .dcci-a11y-panel { width: 480px !important; } /* Segment control — allow buttons to wrap onto two lines. Targets .dcci-a11y-segmented (the actual class, not .dcci-a11y-segment) */ html.accessibility-text-large .dcci-a11y-segmented, html.accessibility-text-xl .dcci-a11y-segmented { flex-wrap: wrap !important; gap: 4px !important; } html.accessibility-text-large .dcci-a11y-segmented label, html.accessibility-text-xl .dcci-a11y-segmented label { flex: 1 1 auto !important; } html.accessibility-text-large .dcci-a11y-seg-btn, html.accessibility-text-xl .dcci-a11y-seg-btn { white-space: normal !important; text-align: center !important; } /* ── b. High contrast — Dark mode ────────────────────────────── */ /* Strengthened dark high contrast. Targets 7:1+ (WCAG AAA) across the whole page using a universal * approach so nothing is missed. Palette: Background: #0a0514 (near-black, avoids harsh pure black) Text: #ffffff (pure white — 18.5:1 on background) Links: #ff8fd0 (bright pink — 7.2:1 on #0a0514) Borders: rgba(255,255,255,0.55) */ /* Strip all blur — blur always degrades perceived contrast */ html.accessibility-high-contrast *, html.accessibility-high-contrast *::before, html.accessibility-high-contrast *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Universal background + text override */ /* background shorthand (not just background-color) is needed to beat portal elements that set gradients via the background shorthand. background-image: none strips any remaining gradient declarations. */ html.accessibility-high-contrast *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { background: #0a0514 !important; background-image: none !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.55) !important; box-shadow: none !important; } /* Photographic images and media — preserve */ html.accessibility-high-contrast img, html.accessibility-high-contrast video, html.accessibility-high-contrast canvas, html.accessibility-high-contrast iframe { background-color: transparent !important; } /* SVG icons — currentColor technique. Setting color on the svg element cascades into fill via currentColor, so every shape inherits the contrast-mode text colour regardless of its class name, inline fill= attribute, or nesting depth. SVG images loaded via are unaffected (caught by img rule above). */ html.accessibility-high-contrast svg { color: #ffffff !important; } html.accessibility-high-contrast svg *, html.accessibility-high-contrast svg *[fill]:not([fill="none"]) { fill: currentColor !important; stroke: none !important; } /* Links — bright pink, 7.2:1 on #0a0514, always underlined */ html.accessibility-high-contrast a { color: #ff8fd0 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Buttons — readable as interactive elements */ /* Using `background` shorthand (not just background-color) to beat portal button styles that set gradients via the background shorthand. Broad selector list catches all DCC-i button variants. */ html.accessibility-high-contrast button:not(.dcci-a11y-rg-swatch), html.accessibility-high-contrast [role="button"], html.accessibility-high-contrast input[type="submit"], html.accessibility-high-contrast input[type="button"], html.accessibility-high-contrast a[class*="btn"], html.accessibility-high-contrast [class*="dcci-btn"], html.accessibility-high-contrast [class*="dcci-pill"], html.accessibility-high-contrast [class*="ld-btn"], html.accessibility-high-contrast .wp-block-button__link, html.accessibility-high-contrast .woocommerce-button { background: #0a0514 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #ffffff !important; box-shadow: none !important; } /* Focus — thick visible outline */ html.accessibility-high-contrast *:focus { outline: 3px solid #ff8fd0 !important; outline-offset: 3px !important; } /* Strip gradient pseudo-elements */ html.accessibility-high-contrast *::before, html.accessibility-high-contrast *::after { background: transparent !important; background-image: none !important; } /* ── c. High contrast — Light mode ───────────────────────────── */ /* Full light mode for users with dyslexia, photosensitivity, or who find the portal's deep purple theme hard to read. Targets 7:1 (WCAG AAA) for body copy. Palette: Background: #f5f5f5 (off-white — avoids stark pure white which can worsen dyslexia symptoms) Text: #0d0d0d (near-black — 18:1 on #f5f5f5, per GOV.UK guidance: not pure #000000) Links: #9b007a (deep magenta — 7.1:1 on #f5f5f5) Borders: rgba(0, 0, 0, 0.30) */ /* Strip all blur */ html.accessibility-contrast-light *, html.accessibility-contrast-light *::before, html.accessibility-contrast-light *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Universal light override */ /* background shorthand overrides any gradient set via background shorthand. background-image: none strips remaining gradient declarations. This catches every element regardless of class name or inline style specificity — the only reliable guarantee for full-page contrast modes. */ html.accessibility-contrast-light *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { background: #f5f5f5 !important; background-image: none !important; color: #0d0d0d !important; border-color: rgba(0, 0, 0, 0.30) !important; box-shadow: none !important; text-shadow: none !important; } /* Photographic images and media — preserve */ html.accessibility-contrast-light img, html.accessibility-contrast-light video, html.accessibility-contrast-light canvas, html.accessibility-contrast-light iframe { background-color: transparent !important; } /* SVG icons — currentColor technique. color: #0d0d0d cascades into SVG fill via currentColor. Works on any SVG regardless of class name, inline fill= attribute, or how deeply the shapes are nested. */ html.accessibility-contrast-light svg { color: #0d0d0d !important; } html.accessibility-contrast-light svg *, html.accessibility-contrast-light svg *[fill]:not([fill="none"]) { fill: currentColor !important; stroke: none !important; } /* Links — deep magenta, 7.1:1 on #f5f5f5, always underlined */ html.accessibility-contrast-light a { color: #9b007a !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Buttons — strip brand colour, use dark border + dark text */ /* The DCC-i pink (#e91e63) gives only 4.22:1 with white text — fails WCAG AA. Stripping to off-white + dark border guarantees 18:1 and keeps buttons clearly identifiable by shape and border alone. `background` shorthand overrides gradient-based button styles. */ html.accessibility-contrast-light button:not(.dcci-a11y-rg-swatch), html.accessibility-contrast-light [role="button"], html.accessibility-contrast-light input[type="submit"], html.accessibility-contrast-light input[type="button"], html.accessibility-contrast-light a[class*="btn"], html.accessibility-contrast-light [class*="dcci-btn"], html.accessibility-contrast-light [class*="dcci-pill"], html.accessibility-contrast-light [class*="ld-btn"], html.accessibility-contrast-light .wp-block-button__link, html.accessibility-contrast-light .woocommerce-button { background: #f5f5f5 !important; background-image: none !important; color: #0d0d0d !important; border: 2px solid #0d0d0d !important; box-shadow: none !important; } /* Focus */ html.accessibility-contrast-light *:focus { outline: 3px solid #9b007a !important; outline-offset: 3px !important; } /* Strip gradient pseudo-elements */ html.accessibility-contrast-light *::before, html.accessibility-contrast-light *::after { background: transparent !important; background-image: none !important; } /* ── d. Dyslexia-friendly mode ───────────────────────────────── */ /* Designed around British Dyslexia Association guidance: - Avoid white backgrounds (causes glare and visual stress) - Use cream/warm off-white instead - Dark (not pure black) text — navy reduces harshness - Avoid high contrast extremes that worsen visual stress - Atkinson Hyperlegible font applied automatically (via JS) Palette — all ratios verified against WCAG AA (4.5:1 minimum): Background: #fdf6e3 warm cream Text: #1a1a2e dark navy — 13.2:1 ✓ (AAA) Links: #1a3a6b deep blue — 8.4:1 ✓ (AAA) Borders: rgba(26, 26, 46, 0.25) */ /* Strip blur */ html.accessibility-contrast-dyslexia *, html.accessibility-contrast-dyslexia *::before, html.accessibility-contrast-dyslexia *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Universal cream override */ html.accessibility-contrast-dyslexia *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { background: #fdf6e3 !important; background-image: none !important; color: #1a1a2e !important; border-color: rgba(26, 26, 46, 0.25) !important; box-shadow: none !important; text-shadow: none !important; } /* Images and media — preserve */ html.accessibility-contrast-dyslexia img, html.accessibility-contrast-dyslexia video, html.accessibility-contrast-dyslexia canvas, html.accessibility-contrast-dyslexia iframe { background-color: transparent !important; } /* SVG icons — navy via currentColor */ html.accessibility-contrast-dyslexia svg { color: #1a1a2e !important; } html.accessibility-contrast-dyslexia svg *, html.accessibility-contrast-dyslexia svg *[fill]:not([fill="none"]) { fill: currentColor !important; stroke: none !important; } /* Links — deep blue, clearly distinguishable from body text */ html.accessibility-contrast-dyslexia a { color: #1a3a6b !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Buttons */ html.accessibility-contrast-dyslexia button:not(.dcci-a11y-rg-swatch), html.accessibility-contrast-dyslexia [role="button"], html.accessibility-contrast-dyslexia input[type="submit"], html.accessibility-contrast-dyslexia input[type="button"], html.accessibility-contrast-dyslexia a[class*="btn"], html.accessibility-contrast-dyslexia [class*="dcci-btn"], html.accessibility-contrast-dyslexia [class*="dcci-pill"], html.accessibility-contrast-dyslexia [class*="ld-btn"], html.accessibility-contrast-dyslexia .wp-block-button__link, html.accessibility-contrast-dyslexia .woocommerce-button { background: #fdf6e3 !important; background-image: none !important; color: #1a1a2e !important; border: 2px solid #1a1a2e !important; box-shadow: none !important; } /* Focus */ html.accessibility-contrast-dyslexia *:focus { outline: 3px solid #1a3a6b !important; outline-offset: 3px !important; } /* Strip gradient pseudo-elements */ html.accessibility-contrast-dyslexia *::before, html.accessibility-contrast-dyslexia *::after { background: transparent !important; background-image: none !important; } /* Atkinson Hyperlegible is applied here in CSS too, as a fallback in case the JS hasn't yet toggled the readable font class. The JS also sets accessibility-readable-font on the html element whenever dyslexia mode is active, so both mechanisms fire. */ html.accessibility-contrast-dyslexia *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { font-family: 'Atkinson Hyperlegible', 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif !important; } /* ── e. Yellow mode ──────────────────────────────────────────── */ /* Yellow on black — specifically for Age-Related Macular Degeneration (AMD), glaucoma, and cataracts. Research (Shima et al., 2013) found 71.67% of AMD patients preferred yellow backgrounds, significantly more than people with normal vision. Contrast ratio of 19.55:1 — second highest possible after black/white. Palette: Background: #1a1a00 near-black with warm tint (avoids harsh pure black) Text: #ffff00 pure yellow — 19.55:1 on #1a1a00 ✓ (AAA) Links: #ffe066 slightly muted yellow — distinguishable from body text Borders: rgba(255, 255, 0, 0.45) */ /* Strip blur */ html.accessibility-contrast-yellow *, html.accessibility-contrast-yellow *::before, html.accessibility-contrast-yellow *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Universal yellow override */ html.accessibility-contrast-yellow *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { background: #1a1a00 !important; background-image: none !important; color: #ffff00 !important; border-color: rgba(255, 255, 0, 0.45) !important; box-shadow: none !important; text-shadow: none !important; } /* Images and media — preserve */ html.accessibility-contrast-yellow img, html.accessibility-contrast-yellow video, html.accessibility-contrast-yellow canvas, html.accessibility-contrast-yellow iframe { background-color: transparent !important; } /* SVG icons — yellow via currentColor */ html.accessibility-contrast-yellow svg { color: #ffff00 !important; } html.accessibility-contrast-yellow svg *, html.accessibility-contrast-yellow svg *[fill]:not([fill="none"]) { fill: currentColor !important; stroke: none !important; } /* Links — muted yellow, distinguishable from body text, underlined */ html.accessibility-contrast-yellow a { color: #ffe066 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* Buttons */ html.accessibility-contrast-yellow button:not(.dcci-a11y-rg-swatch), html.accessibility-contrast-yellow [role="button"], html.accessibility-contrast-yellow input[type="submit"], html.accessibility-contrast-yellow input[type="button"], html.accessibility-contrast-yellow a[class*="btn"], html.accessibility-contrast-yellow [class*="dcci-btn"], html.accessibility-contrast-yellow [class*="dcci-pill"], html.accessibility-contrast-yellow [class*="ld-btn"], html.accessibility-contrast-yellow .wp-block-button__link, html.accessibility-contrast-yellow .woocommerce-button { background: #1a1a00 !important; background-image: none !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; box-shadow: none !important; } /* Focus */ html.accessibility-contrast-yellow *:focus { outline: 3px solid #ffff00 !important; outline-offset: 3px !important; } /* Strip gradient pseudo-elements */ html.accessibility-contrast-yellow *::before, html.accessibility-contrast-yellow *::after { background: transparent !important; background-image: none !important; } /* ── f. Readable font (Atkinson Hyperlegible) ────────────────── */ /* Switched for body copy and content areas only. Headings and UI chrome keep Montserrat (portal identity). Atkinson Hyperlegible is loaded via Google Fonts (see enqueue.php). */ /* Universal * approach — same pattern as text size and contrast modes. Catches every element regardless of class name or px-locking, including card content, nav, footer, buttons, and form fields. The accessibility panel itself is excluded to keep its chrome intact. */ html.accessibility-readable-font *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { font-family: 'Atkinson Hyperlegible', 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif !important; } /* ── d. Text spacing ─────────────────────────────────────────── */ /* WCAG 1.4.12 Text Spacing levels — slightly more generous than minimum to be a meaningful user improvement. Applied to reading content only, not UI chrome. */ html.accessibility-text-spacing body *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { line-height: 1.85 !important; letter-spacing: 0.022em !important; word-spacing: 0.06em !important; } /* Force line-height on elements most likely to have it set via font shorthand */ html.accessibility-text-spacing p, html.accessibility-text-spacing li, html.accessibility-text-spacing td, html.accessibility-text-spacing th, html.accessibility-text-spacing h1, html.accessibility-text-spacing h2, html.accessibility-text-spacing h3, html.accessibility-text-spacing h4, html.accessibility-text-spacing h5, html.accessibility-text-spacing h6, html.accessibility-text-spacing a, html.accessibility-text-spacing span, html.accessibility-text-spacing div, html.accessibility-text-spacing button, html.accessibility-text-spacing label { line-height: 1.85 !important; } /* Extra paragraph breathing room */ html.accessibility-text-spacing p, html.accessibility-text-spacing li { margin-bottom: 1.5em !important; } /* Card/tile containers — allow height to expand with increased line-height. Fixed and minimum heights prevent the spacing from being visible even when the text properties are correctly applied. Setting height: auto lets the container grow to fit the spaced-out content naturally. */ html.accessibility-text-spacing [class*="dcci-card"], html.accessibility-text-spacing [class*="dcci-tile"], html.accessibility-text-spacing [class*="dcci-spotlight"], html.accessibility-text-spacing [class*="dcci-hub"], html.accessibility-text-spacing [class*="dcci-resource"], html.accessibility-text-spacing [class*="ld-item"], html.accessibility-text-spacing [class*="ld-course"], html.accessibility-text-spacing .wpProQuiz_listItem { height: auto !important; min-height: 0 !important; max-height: none !important; } /* ── e. Reduce motion ────────────────────────────────────────── */ /* Collapses all transitions and animations to effectively instant. Using 0.001ms rather than 0 to avoid occasional browser quirks with transition: none and event firing. */ html.accessibility-reduce-motion *, html.accessibility-reduce-motion *::before, html.accessibility-reduce-motion *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* The accessibility panel itself should still be visible instantly */ html.accessibility-reduce-motion .dcci-a11y-panel { transition: none !important; } /* Explicitly kill homepage sparkles — they loop */ html.accessibility-reduce-motion .dcci-cb-sparkle { animation: none !important; opacity: 0 !important; } /* ── f. Simplified view ──────────────────────────────────────── */ /* Tier 1: pure decoration removed entirely. Tier 2: complex backgrounds flattened to dominant solid colour. Tier 3: cognitive load reduction — whitespace, hierarchy, focus. Tier 4 (structure, branding, content imagery): untouched. */ /* Tier 1 — sparkles, grain textures, decorative pseudo-elements */ html.accessibility-simplified .dcci-cb-sparkle { display: none !important; } html.accessibility-simplified .dcci-utility-bar::after { display: none !important; } html.accessibility-simplified .dcci-context-band::before, html.accessibility-simplified .dcci-context-band::after { opacity: 0 !important; pointer-events: none !important; } /* Strip all box-shadow and text-shadow decorative effects */ html.accessibility-simplified *:not(.dcci-a11y-panel):not(.dcci-a11y-trigger) { box-shadow: none !important; text-shadow: none !important; } /* Remove blur/glass */ html.accessibility-simplified * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Tier 2 — complex background art → solid base colour */ /* Override the CSS variable — elements using var(--dcci-bg-art) get none */ html.accessibility-simplified { --dcci-bg-art: none; } /* Explicitly flatten the portal page background */ html.accessibility-simplified .dcci-portal-bg, html.accessibility-simplified [class*="dcci-portal-bg"] { background-image: none !important; background: var(--dcci-purple, #3e1e67) !important; } /* Flatten the utility bar — solid deep purple, no gradient */ html.accessibility-simplified .dcci-utility-bar { background: var(--dcci-deep, #1d1130) !important; } /* Flatten primary nav */ html.accessibility-simplified .dcci-primary-nav { background: var(--dcci-mid, #2e1456) !important; } html.accessibility-simplified .dcci-primary-nav::before { display: none !important; } /* Flatten LearnDash content backgrounds where heavily styled */ html.accessibility-simplified .learndash-wrapper [class*="ld-item-list-item"], html.accessibility-simplified .learndash-wrapper .ld-course-list-item { background: rgba(255, 255, 255, 0.06) !important; } /* Tier 3 — cognitive load reduction ─────────────────────────── */ /* Research basis: - 80% of people with ADHD struggle with cluttered layouts and unclear heading hierarchy (Accessibly, 2025) - Predictable structure and clear visual hierarchy reduce the cognitive effort needed to scan and navigate (St Andrews, 2025) - Decorative background images compete with text for attention and should be suppressed in simplified mode (GOV.UK guidance) */ /* ── Decorative elements — site-wide pattern selectors ─────── */ /* All decorative blobs, morphs, hero visuals, glows and rings across every page template follow the dcci-*-blob / dcci-*-morph / dcci-*-visual naming convention and are marked aria-hidden="true" in the HTML. Using attribute substring selectors catches them all site-wide without needing to enumerate every class name. Specific one-off classes that don't match the pattern are listed individually below. */ /* Pattern-based: any dcci element whose class contains these keywords */ html.accessibility-simplified [class*="-blob"], html.accessibility-simplified [class*="-morph"], html.accessibility-simplified [class*="-shapes"], html.accessibility-simplified [class*="-glow"], html.accessibility-simplified [class*="hero-visual"], html.accessibility-simplified [class*="hero-ring"], html.accessibility-simplified [class*="hero-img"], html.accessibility-simplified [class*="char-blob"], html.accessibility-simplified [class*="logo-placeholder"], html.accessibility-simplified [class*="card__icon-blob"], html.accessibility-simplified [class*="card-blob"] { display: none !important; } /* Specific decorative elements not caught by the pattern */ html.accessibility-simplified .dcci-home-hero__image, html.accessibility-simplified .dcci-spotlight-visual, html.accessibility-simplified .dcci-cb-sparkle, html.accessibility-simplified .dcci-eh-hero-logo, html.accessibility-simplified .dcci-ph-hero__img-wrap, html.accessibility-simplified .dcci-course-hero-image, html.accessibility-simplified .dcci-learner-hero-img { display: none !important; } /* Strengthen heading hierarchy — bolder weights make the page structure scannable without needing to read every word */ html.accessibility-simplified h1 { font-weight: 800 !important; } html.accessibility-simplified h2 { font-weight: 700 !important; border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important; padding-bottom: 0.4em !important; margin-bottom: 1.2em !important; } html.accessibility-simplified h3, html.accessibility-simplified h4 { font-weight: 700 !important; } /* Increase paragraph spacing for easier chunking */ html.accessibility-simplified p { margin-bottom: 1.2em !important; } /* Ensure all interactive elements have a clearly visible border so they're identifiable as clickable without relying on colour */ html.accessibility-simplified button:not(.dcci-a11y-reset):not(.dcci-a11y-panel *), html.accessibility-simplified [class*="dcci-btn"], html.accessibility-simplified a[class*="btn"] { border: 2px solid currentColor !important; outline-offset: 3px !important; } /* ── Fix: access section — dark text on dark background ─────── */ /* .dcci-access-heading uses color: #3e1e67 (dark plum) .dcci-access-sub uses color: #3e1e67 + opacity: 0.55 Both are designed for a light background but the section sits on the dark portal background in simplified view. Force white + remove the opacity so they're fully readable. */ html.accessibility-simplified .dcci-access-eyebrow, html.accessibility-simplified .dcci-access-heading, html.accessibility-simplified .dcci-access-sub { color: #ffffff !important; opacity: 1 !important; } /* The sign-in link below the cards */ html.accessibility-simplified .dcci-access-signin, html.accessibility-simplified .dcci-access-inner > a { color: #ffffff !important; opacity: 1 !important; } /* ── g. Highlight links ──────────────────────────────────────── */ /* Applies a consistent pink + underline treatment to all non-button, non-nav, non-brand anchor elements. Excluded: nav links, the logo, button-style links, the panel itself. */ html.accessibility-highlight-links a:not([class*="dcci-btn"]):not([class*="wp-block-button"]):not(.dcci-primary-nav__link):not(.dcci-portal-brand):not(.dcci-website-link):not(.dcci-a11y-trigger) { color: #ff5aa5 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } html.accessibility-highlight-links a:not([class*="dcci-btn"]):not([class*="wp-block-button"]):not(.dcci-primary-nav__link):not(.dcci-portal-brand):not(.dcci-website-link):hover { color: #ffffff !important; text-decoration-color: rgba(255, 90, 165, 0.55) !important; } /* ── h. Bold text ────────────────────────────────────────────── */ /* Increases font weight across all content to improve readability for ADHD and dyslexia. Bolder strokes increase letter definition and reduce visual crowding. Excluded: the accessibility panel chrome itself. */ html.accessibility-bold-text *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { font-weight: 700 !important; } /* ── i. Letter spacing ───────────────────────────────────────── */ /* BDA (British Dyslexia Association) guidance recommends increased letter spacing as a distinct aid from line height / word spacing. 0.08em is the WCAG 1.4.12 Text Spacing requirement level — we apply it universally to all content rather than body copy only. Excluded: the accessibility panel chrome. */ html.accessibility-letter-spacing *:not(.dcci-a11y-panel):not(.dcci-a11y-panel *):not(.dcci-reading-guide):not(.dcci-a11y-rg-swatch) { letter-spacing: 0.08em !important; } /* ── j. Reading guide ────────────────────────────────────────── */ /* A semi-transparent horizontal band that follows the mouse cursor. Colour is controlled via CSS custom properties set by JS so the user's chosen colour persists without needing separate classes. Default colour (yellow) is set on :root; JS overrides on html when a swatch is selected. */ :root { --rg-bg: rgba(255, 255, 150, 0.35); --rg-border: rgba(180, 160, 0, 0.45); } .dcci-reading-guide { display: none; position: fixed; left: 0; right: 0; height: 3em; background: var(--rg-bg) !important; border-top: 2px solid var(--rg-border) !important; border-bottom: 2px solid var(--rg-border) !important; pointer-events: none; z-index: 99998; border-radius: 2px; will-change: top; } html.accessibility-reading-guide .dcci-reading-guide { display: block; } /* ── Reading guide colour swatches ──────────────────────────── */ .dcci-a11y-rg-colours { display: none; gap: 8px; padding: 8px 18px 4px; flex-wrap: wrap; } html.accessibility-reading-guide .dcci-a11y-rg-colours { display: flex; } .dcci-a11y-rg-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); cursor: pointer; padding: 0; transition: border-color 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .dcci-a11y-rg-swatch:hover { transform: scale(1.15); border-color: rgba(255, 255, 255, 0.6); } .dcci-a11y-rg-swatch--active { border-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); } .dcci-a11y-rg-swatch--yellow { background: #e8e84a !important; } .dcci-a11y-rg-swatch--blue { background: #7ab8f5 !important; } .dcci-a11y-rg-swatch--pink { background: #f5a0d0 !important; } .dcci-a11y-rg-swatch--green { background: #7adba0 !important; } .dcci-a11y-rg-swatch--purple { background: #b090f5 !important; } .dcci-a11y-rg-swatch--peach { background: #f5b87a !important; } /* ── k. Read aloud ───────────────────────────────────────────── */ /* When read aloud is active, clickable text elements get a pointer cursor and a subtle speaking-icon indicator so users know the mode is on. The accessibility panel itself is excluded. */ html.accessibility-read-aloud body p, html.accessibility-read-aloud body h1, html.accessibility-read-aloud body h2, html.accessibility-read-aloud body h3, html.accessibility-read-aloud body h4, html.accessibility-read-aloud body h5, html.accessibility-read-aloud body h6, html.accessibility-read-aloud body li, html.accessibility-read-aloud body td, html.accessibility-read-aloud body th, html.accessibility-read-aloud body blockquote, html.accessibility-read-aloud body figcaption { cursor: pointer !important; } html.accessibility-read-aloud body p:hover, html.accessibility-read-aloud body h1:hover, html.accessibility-read-aloud body h2:hover, html.accessibility-read-aloud body h3:hover, html.accessibility-read-aloud body h4:hover, html.accessibility-read-aloud body h5:hover, html.accessibility-read-aloud body h6:hover, html.accessibility-read-aloud body li:hover, html.accessibility-read-aloud body blockquote:hover { outline: 2px dashed rgba(233, 30, 99, 0.5) !important; outline-offset: 3px !important; border-radius: 3px; } /* ── Floating accessibility trigger ─────────────────────────── */ /* Fixed to the bottom-left of the viewport — always visible regardless of scroll position. Larger than the utility bar version to meet WCAG 2.5.5 AAA 44x44px target size. z-index sits below the panel (99999) but above all content. */ .dcci-a11y-trigger--float { position: fixed; bottom: 24px; left: 24px; z-index: 99990; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #3e1e67; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 0 20px; height: 56px; cursor: pointer; font-family: var(--dcci-header-font, 'Montserrat', sans-serif); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: #ffffff; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .dcci-a11y-trigger--float .dcci-a11y-trigger__label { display: inline !important; } .dcci-a11y-trigger--float:hover { background: #5a2d8f; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); transform: translateY(-1px); } .dcci-a11y-trigger--float:focus-visible { outline: 3px solid #e91e63; outline-offset: 3px; } .dcci-a11y-trigger--float[aria-expanded="true"] { background: #e91e63; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 4px 16px rgba(233, 30, 99, 0.4); } /* Keep visible in all contrast modes */ html.accessibility-high-contrast .dcci-a11y-trigger--float, html.accessibility-contrast-light .dcci-a11y-trigger--float, html.accessibility-contrast-dyslexia .dcci-a11y-trigger--float, html.accessibility-contrast-yellow .dcci-a11y-trigger--float { background: #3e1e67 !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; } html.accessibility-high-contrast .dcci-a11y-trigger--float:hover, html.accessibility-contrast-light .dcci-a11y-trigger--float:hover, html.accessibility-contrast-dyslexia .dcci-a11y-trigger--float:hover, html.accessibility-contrast-yellow .dcci-a11y-trigger--float:hover { background: #5a2d8f !important; } /* ── Float trigger — nuclear override ───────────────────────── */ /* The universal contrast and simplified view rules can catch the float trigger via * selectors. This block ensures it is always visible regardless of any active mode. */ .dcci-a11y-trigger--float, html .dcci-a11y-trigger--float, html body .dcci-a11y-trigger--float { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; bottom: 24px !important; left: 24px !important; z-index: 99990 !important; background: #3e1e67 !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,0.3) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important; border-radius: 999px !important; padding: 12px 18px !important; min-width: 44px !important; min-height: 44px !important; font-size: 13px !important; font-weight: 700 !important; } html body .dcci-a11y-trigger--float[aria-expanded="true"] { background: #e91e63 !important; } html body .dcci-a11y-trigger--float:hover { background: #5a2d8f !important; transform: translateY(-1px) !important; } /* ── Float trigger — position fix ───────────────────────────── */ html body .dcci-a11y-trigger--float { left: auto !important; right: 24px !important; bottom: 98px !important; z-index: 999999 !important; width: auto !important; height: 56px !important; padding: 0 20px !important; font-size: 14px !important; } html body .dcci-a11y-trigger--float .dcci-a11y-trigger__label { display: inline !important; }