/* Beacon accessibility layer. Loads after the theme token sheet so every rule here refines the same variables the theme already declares — nothing is re-stated, nothing is filtered over the top of the page. Feature rules are gated on body classes (admin toggles) and data attributes (visitor preferences), so switching a feature off removes it. */ /* ---- skip link ------------------------------------------------------- */ .skip-link, .skip-link.screen-reader-text { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 14px 22px; background: var(--accent, #2c2352); color: var(--btn-ink, #fff); font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif); font-weight: 700; text-decoration: none; border-radius: 0 0 12px 0; } .skip-link:focus, .skip-link:focus-visible, .skip-link.screen-reader-text:focus { left: 0; width: auto; height: auto; clip: auto; clip-path: none; font-size: 1rem; line-height: normal; background: var(--accent, #2c2352); color: var(--btn-ink, #fff); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .6); outline: 3px solid var(--text, #fff); outline-offset: -3px; } /* Landing on a container that was never focusable must not draw a stray ring. */ :is(main, #wp--skip-link--target, #beacon-main):focus { outline: none; } /* ---- enhanced focus ring --------------------------------------------- */ .a11y-focus :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus, #4A2FA8); outline-offset: 3px; border-radius: 3px; } /* Browsers that never resolve :focus-visible still get a visible ring. */ .a11y-focus :is(a, button, summary, input, select, textarea, [tabindex]):focus:not(:focus-visible) { outline: 2px solid var(--focus, #4A2FA8); outline-offset: 2px; } .a11y-focus :is(.btn, .wp-block-button__link, .icon-btn, .tier, .mt, .lang-pill, .foot-social a):focus-visible { box-shadow: 0 0 0 6px var(--focus-halo, rgba(228, 87, 31, .3)); } /* ---- prose link underlines ------------------------------------------- */ /* Buttons, nav rows and cards are targets in their own right; only running text needs the underline to distinguish a link from emphasis. */ /* The exclusions were a list of class names, which meant every new button anywhere had to remember to add itself to a stylesheet it knows nothing about. A link that is drawn as a button says so with data-button and is skipped wherever it appears. */ .a11y-underline :is(p, li, dd, dt, blockquote, figcaption, address, td, th) a:not(.btn):not(.wp-block-button__link):not(.mlink):not(.tier):not(.mt):not([data-button]), html[data-a11y-underline="on"] :is(p, li, dd, dt, blockquote, figcaption, address, td, th) a:not(.btn):not(.wp-block-button__link):not(.mlink):not(.tier):not(.mt):not([data-button]) { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: .08em; text-underline-offset: .18em; } /* The visitor asked for every link to be marked, chrome included — except buttons, which are already unambiguous and read as damaged when underlined. */ html[data-a11y-underline="on"] .entry-content a:not(.btn):not(.wp-block-button__link):not(.brand):not([data-button]), html[data-a11y-underline="on"] .tpl-prose a:not(.btn):not(.wp-block-button__link):not([data-button]), html[data-a11y-underline="on"] footer a:not(.brand):not(.btn):not([data-button]) { text-decoration-line: underline; text-decoration-color: currentColor; } /* ---- muted-text contrast guard --------------------------------------- */ /* The muted token is a mix of text into background; mixing further toward the text color raises it past 4.5:1 in every scheme without inventing a color. */ body.a11y-contrast-guard { --muted: color-mix(in srgb, var(--text) 72%, var(--bg)); } /* The trust line sits on the hero scrim, which is dark in both schemes; plain white is the neutral maximum there and carries no brand value. */ body.a11y-contrast-guard .hero .trust, body.a11y-contrast-guard .page-hero .trust { color: #FFFFFF; } /* The accent is tuned for dark surfaces; as text on paper it measures about 2:1. Darkening the same token keeps the brand hue and clears the threshold. Every place the palette uses the accent AS TEXT belongs in this list. */ html[data-theme="light"] body.a11y-contrast-guard :is(.eyebrow, .amber, .marquee span b, .marquee p strong) { color: color-mix(in srgb, var(--accent) 60%, #000); } /* Over photography the accent still sits on the dark scrim it was designed for. */ html[data-theme="light"] body.a11y-contrast-guard :is(.hero, .page-hero, .band) :is(.eyebrow, .amber) { color: var(--accent); } /* Half-opacity display text loses half its contrast with it. */ body.a11y-contrast-guard .marquee :is(span, p) { opacity: .85; } /* ---- target size ----------------------------------------------------- */ /* WCAG 2.2 2.5.8 asks for 24px minimum; discrete controls get the comfortable 44px instead. Inline links in prose are exempt by the spec and stay put. */ .a11y-targets :is(.icon-btn, .bf-sigclear, .lang-pill, .mt, .tier, .beacon-a11y-btn) { min-height: 44px; min-width: 44px; } .a11y-targets :is(.mobile-menu a, .foot-social a, .bf-pdf) { min-height: 44px; display: inline-flex; align-items: center; } .a11y-targets :is(.bf input, .bf select, .bf textarea) { min-height: 44px; } .a11y-targets .bf-check input[type="checkbox"], .a11y-targets .bf-radios input[type="radio"] { width: 22px; height: 22px; } /* ---- visitor preference: text size ----------------------------------- */ html[data-a11y-text="112"] { font-size: 112%; } html[data-a11y-text="125"] { font-size: 125%; } /* Fixed-height chrome would clip its own labels once the type grows. */ html[data-a11y-text="112"] .nav .bar, html[data-a11y-text="125"] .nav .bar { height: auto; min-height: var(--nav-h, 74px); flex-wrap: wrap; } html[data-a11y-text="125"] :is(.chip, .eyebrow) { white-space: normal; } /* ---- visitor preference: readable font ------------------------------- */ /* System stack only. If the visitor installed a reading font we use it; we never download one, so the preference costs no bandwidth and no privacy. */ html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] :is(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label, legend, .dsp) { font-family: "OpenDyslexic", "Open Dyslexic", "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .01em; word-spacing: .06em; } html[data-a11y-font="readable"] :is(p, li, dd) { line-height: 1.75; } /* ---- visitor preference: reduce motion ------------------------------- */ html[data-a11y-motion="reduce"] { scroll-behavior: auto; } html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ---- visitor preference: high contrast ------------------------------- */ /* A real scheme, not a filter: the token layer is re-declared so every consumer inherits the stronger palette. Measured against the surfaces they sit on, body text reaches 21:1 and muted text 16.8:1 (dark) / 17.4:1 (light); the accent clears 13:1 (dark) and 11.5:1 (light). */ html[data-a11y-contrast="on"] { --bg: #000000; --bg-2: #000000; --surface: #0B0B0B; --surface-2: #161616; --line: #9A9A9A; --text: #FFFFFF; --muted: #EDEDED; --glass: #000000; --bar: #000000; --accent: #FFC24D; --accent-2: #FFC24D; --btn-ink: #000000; --focus: #FFFFFF; --focus-halo: rgba(255, 255, 255, .45); --shadow: 0 0 0 1px #9A9A9A; --hero-scrim: none; } html[data-theme="light"][data-a11y-contrast="on"] { --bg: #FFFFFF; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2F2; --line: #3A3A3A; --text: #000000; --muted: #1A1A1A; --glass: #FFFFFF; --bar: #2C2352; --accent: #2C2352; --accent-2: #2C2352; --btn-ink: #FFFFFF; --focus: #000000; --focus-halo: rgba(0, 0, 0, .4); --shadow: 0 0 0 1px #3A3A3A; --hero-scrim: none; } /* Texture, blur and gradients all lower effective contrast — off in this mode. */ html[data-a11y-contrast="on"] body::before, html[data-a11y-contrast="on"] .hero .glow, html[data-a11y-contrast="on"] .hero .bg, html[data-a11y-contrast="on"] .page-hero .bg { display: none !important; } html[data-a11y-contrast="on"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; } html[data-a11y-contrast="on"] :is(.nav, .nav.scrolled, .nav.scrolled::before, .statusbar) { background: var(--bar) !important; border-bottom: 1px solid var(--line); } html[data-a11y-contrast="on"] :is(.nav .links a, .nav .brand, .nav .brand small, .statusbar, .statusbar .k) { color: #FFFFFF !important; opacity: 1; } html[data-a11y-contrast="on"] .icon-btn { color: #FFFFFF; border-color: #FFFFFF; background: transparent; } /* Text over photography can never be measured, so this mode drops the image and puts those sections on the scheme's own background instead of guessing a scrim that still has to work for both schemes. */ html[data-a11y-contrast="on"] :is(.hero, .page-hero, .band) { background: var(--bg) !important; background-image: none !important; color: var(--text) !important; } html[data-a11y-contrast="on"] :is(.hero, .page-hero, .band) .scrim { display: none !important; } /* Every text descendant, not a curated list — the theme colours inside the trust line white, and any element missed here goes invisible. */ html[data-a11y-contrast="on"] :is(.hero, .page-hero, .band) :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, b, strong, em, i, small, time, cite, blockquote, figcaption, .sub, .lead, .trust, .eyebrow, .chip) { color: var(--text) !important; } /* With the photograph gone the section no longer needs a full-viewport stage. */ html[data-a11y-contrast="on"] :is(.hero, .page-hero) { min-height: 0 !important; padding-block: clamp(48px, 9vh, 104px); } html[data-a11y-contrast="on"] :is(.hero, .page-hero, .band) .amber { color: var(--text) !important; text-decoration: underline; text-underline-offset: .12em; } html[data-a11y-contrast="on"] :is(.btn, .btn-give, .wp-block-button__link, .wp-block-button.btn-give > .wp-block-button__link) { background: var(--accent) !important; background-image: none !important; color: var(--btn-ink) !important; border: 2px solid var(--accent) !important; box-shadow: none !important; } html[data-a11y-contrast="on"] .marquee :is(span, p) { opacity: 1; } html[data-a11y-contrast="on"] :is(.card, .step, .pcard, .figure, .team-card, .rescard, .stat, .chip, .mega, .quiz, .bf) { background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--text) !important; } html[data-a11y-contrast="on"] :is(.bf input, .bf select, .bf textarea) { background: var(--surface) !important; color: var(--text) !important; border: 2px solid var(--line) !important; } /* Colour alone must not be the link cue once the palette is flattened. */ html[data-a11y-contrast="on"] :is(p, li, dd, blockquote) a { text-decoration: underline; text-decoration-thickness: .1em; } /* ---- visitor preference panel ---------------------------------------- */ .beacon-a11y { position: fixed; bottom: 20px; z-index: 900; font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif); } .beacon-a11y--bottom-right { right: 20px; } .beacon-a11y--bottom-left { left: 20px; } .beacon-a11y-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px 11px 14px; min-height: 46px; border: 1px solid var(--line, rgba(0, 0, 0, .18)); border-radius: 100px; background: var(--surface, #fff); color: var(--text, #17122B); font: inherit; font-weight: 650; font-size: .92rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .16), 0 18px 40px -20px rgba(0, 0, 0, .5); transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .16s ease; } .beacon-a11y-btn:hover { transform: translateY(-2px); border-color: var(--accent, #6D56D4); } .beacon-a11y-btn svg { flex: none; color: var(--accent, #6D56D4); } html[data-a11y-contrast="on"] .beacon-a11y-btn svg { color: currentColor; } .beacon-a11y-panel { position: absolute; bottom: calc(100% + 12px); width: min(23rem, calc(100vw - 40px)); max-height: min(44rem, calc(100vh - 120px)); overflow-y: auto; padding: 20px; border: 1px solid var(--line, rgba(0, 0, 0, .18)); border-radius: var(--radius, 18px); background: var(--surface, #fff); color: var(--text, #17122B); box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 40px 80px -30px rgba(0, 0, 0, .6); } .beacon-a11y--bottom-right .beacon-a11y-panel { right: 0; } .beacon-a11y--bottom-left .beacon-a11y-panel { left: 0; } .beacon-a11y-panel[hidden] { display: none; } .beacon-a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .beacon-a11y-head h2 { margin: 0; font-family: var(--font-display, ui-sans-serif, system-ui, sans-serif); font-size: 1.06rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--text, #17122B); } .beacon-a11y-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line, rgba(0, 0, 0, .18)); border-radius: 9px; background: transparent; color: inherit; cursor: pointer; } .beacon-a11y-x:hover { border-color: var(--accent, #6D56D4); } .beacon-a11y-note { margin: 8px 0 16px; font-size: .8rem; line-height: 1.5; color: var(--muted, #5B6778); } .beacon-a11y-group { margin: 0 0 14px; padding: 0; border: 0; } .beacon-a11y-group legend { padding: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #5B6778); } .beacon-a11y-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .beacon-a11y-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; min-height: 44px; border: 1px solid var(--line, rgba(0, 0, 0, .18)); border-radius: 11px; cursor: pointer; text-align: center; line-height: 1.25; } .beacon-a11y-step span { font-size: .82rem; font-weight: 600; } .beacon-a11y-step b { font-size: .7rem; font-weight: 600; color: var(--muted, #5B6778); font-variant-numeric: tabular-nums; } .beacon-a11y-step input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .beacon-a11y-step:has(input:checked) { border-color: var(--accent, #6D56D4); box-shadow: inset 0 0 0 1px var(--accent, #6D56D4); } .beacon-a11y-step:has(input:checked) b { color: var(--text, #17122B); } .beacon-a11y-step:has(input:focus-visible) { outline: 3px solid var(--focus, #4A2FA8); outline-offset: 2px; } .beacon-a11y-switch { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line, rgba(0, 0, 0, .12)); cursor: pointer; } .beacon-a11y-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .beacon-a11y-track { flex: none; position: relative; width: 40px; height: 24px; margin-top: 2px; border-radius: 100px; border: 1px solid var(--line, rgba(0, 0, 0, .25)); background: var(--surface-2, rgba(0, 0, 0, .08)); transition: background .16s ease, border-color .16s ease; } .beacon-a11y-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted, #5B6778); transition: transform .16s cubic-bezier(.2, .8, .2, 1), background .16s ease; } .beacon-a11y-switch input:checked ~ .beacon-a11y-track { background: var(--accent, #6D56D4); border-color: var(--accent, #6D56D4); } .beacon-a11y-switch input:checked ~ .beacon-a11y-track::after { transform: translateX(16px); background: var(--btn-ink, #fff); } .beacon-a11y-switch input:focus-visible ~ .beacon-a11y-track { outline: 3px solid var(--focus, #4A2FA8); outline-offset: 2px; } .beacon-a11y-copy { display: block; } .beacon-a11y-copy b { display: block; font-size: .9rem; font-weight: 650; line-height: 1.35; } .beacon-a11y-copy span { display: block; margin-top: 1px; font-size: .78rem; line-height: 1.45; color: var(--muted, #5B6778); } .beacon-a11y-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line, rgba(0, 0, 0, .12)); } .beacon-a11y-reset { width: 100%; min-height: 42px; padding: 10px 14px; border: 1px solid var(--line, rgba(0, 0, 0, .2)); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; } .beacon-a11y-reset:hover { border-color: var(--accent, #6D56D4); } .beacon-a11y-status { margin: 10px 0 0; min-height: 1em; font-size: .78rem; color: var(--muted, #5B6778); } /* A preference tool is not part of the document — it never prints. */ @media print { .beacon-a11y { display: none !important; } } .beacon-a11y-statement{font-size:.85rem;text-decoration:underline;text-underline-offset:.16em}