/* ============================================================ Accessibility widget — floating button + preferences panel. Original component, built on the site's existing design tokens. Two layers live in this file: 1. The widget's own chrome (#a11y-root and everything inside it). 2. The adaptations the widget applies to the page, all scoped to a class on so nothing changes until the user opts in. #a11y-root is excluded from every adaptation so the panel always stays legible and operable, whatever the user has switched on. ============================================================ */ :root{ /* How far the floating controls sit above the bottom edge. JS raises this when a bottom-fixed bar (mobile CTA, cookie banner) is on screen. */ --a11y-bottom:24px; --a11y-brand:var(--dark); --a11y-accent:var(--bronze-ink); } /* ---------- Floating button ---------- */ #a11y-root{ direction:rtl; } #a11y-fab{ position:fixed; bottom:var(--a11y-bottom); left:24px; z-index:9998; width:52px; height:52px; border-radius:50%; border:none; padding:0; background:var(--a11y-brand); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(13,36,41,0.28); transition:background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), bottom .25s var(--ease); } #a11y-fab:hover{ background:#123137; box-shadow:0 10px 26px rgba(13,36,41,0.36); } #a11y-fab:active{ transform:scale(0.96); } #a11y-fab:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; } #a11y-fab svg{ width:28px; height:28px; display:block; } @media (max-width:767px){ #a11y-fab{ left:16px; } } /* The WhatsApp button already owns the bottom-left corner on desktop: lift it above the accessibility button instead of overlapping it. */ @media (min-width:768px){ .wa-float{ bottom:calc(var(--a11y-bottom) + 68px); } } /* ---------- Panel ---------- */ #a11y-panel{ position:fixed; z-index:9999; bottom:calc(var(--a11y-bottom) + 64px); left:24px; width:min(380px, calc(100vw - 32px)); max-height:calc(100vh - 120px); display:flex; flex-direction:column; background:#fff; color:var(--ink-on-light); border:1px solid #E3E8E7; border-radius:18px; box-shadow:0 18px 50px rgba(13,36,41,0.22), 0 2px 8px rgba(13,36,41,0.08); font-family:'Heebo','Segoe UI',Arial,sans-serif; overflow:hidden; } #a11y-panel[hidden]{ display:none; } #a11y-panel.a11y-opening{ animation:a11yPanelIn .22s var(--ease) both; } @keyframes a11yPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } @media (max-width:767px){ /* Bottom sheet, never wider than the screen */ #a11y-panel{ left:0; right:0; bottom:0; width:auto; max-height:min(82vh, calc(100vh - 64px)); border-radius:18px 18px 0 0; border-bottom:none; } #a11y-panel.a11y-opening{ animation:a11ySheetIn .24s var(--ease) both; } @keyframes a11ySheetIn{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } } } /* ---------- Panel header ---------- */ .a11y-head{ position:relative; padding:18px 20px 14px; border-bottom:1px solid #EDF1F0; background:#fff; flex:none; } .a11y-head h2{ margin:0; font-size:19px; font-weight:700; line-height:1.3; color:var(--ink-on-light); padding-inline-end:38px; } .a11y-head p{ margin:6px 0 0; font-size:13.5px; font-weight:400; line-height:1.5; color:#5C6B68; } .a11y-close{ position:absolute; top:14px; inset-inline-end:14px; width:32px; height:32px; border-radius:8px; border:1px solid #E3E8E7; background:#fff; color:#3A4A47; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease), border-color .15s var(--ease); } .a11y-close:hover{ background:#F3F6F5; border-color:#CBD5D3; } .a11y-close:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; } .a11y-close svg{ width:15px; height:15px; } /* ---------- Scrolling body ---------- */ .a11y-body{ overflow-y:auto; padding:6px 16px 4px; -webkit-overflow-scrolling:touch; } .a11y-group{ padding:12px 0 6px; border-bottom:1px solid #F1F4F3; } .a11y-group:last-child{ border-bottom:none; } .a11y-group h3{ margin:0 0 10px; padding:0 4px; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#586865; } .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } /* ---------- Option card ---------- */ .a11y-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px 12px 11px; min-height:84px; background:#fff; border:1.5px solid #E3E8E7; border-radius:12px; font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink-on-light); text-align:start; cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); } .a11y-opt:hover{ background:#F7FAF9; border-color:#CBD5D3; } .a11y-opt:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; } .a11y-opt .a11y-ic{ width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:#F1F5F4; color:#445653; transition:background .15s var(--ease), color .15s var(--ease); } .a11y-opt .a11y-ic svg{ width:17px; height:17px; } .a11y-opt .a11y-lbl{ display:block; } .a11y-opt .a11y-val{ font-size:11.5px; font-weight:600; color:#4C5A57; background:#F1F5F4; border-radius:5px; padding:1px 7px; } /* Active state: brand border, tinted fill, a check mark — not colour alone */ .a11y-opt[aria-pressed="true"]{ background:#F3EFE5; border-color:var(--bronze); box-shadow:inset 0 0 0 1px var(--bronze); } .a11y-opt[aria-pressed="true"] .a11y-ic{ background:var(--bronze); color:#fff; } .a11y-opt[aria-pressed="true"] .a11y-val{ background:#E4D8BE; color:#5A4E33; } .a11y-opt[aria-pressed="true"]::after{ content:"✓"; position:absolute; top:8px; inset-inline-end:10px; font-size:13px; font-weight:900; color:var(--bronze-ink); } .a11y-opt{ position:relative; } /* ---------- Footer ---------- */ .a11y-foot{ flex:none; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid #EDF1F0; background:#FBFCFC; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .a11y-reset{ flex:1 1 auto; padding:11px 18px; border-radius:9px; border:none; cursor:pointer; background:var(--a11y-brand); color:#fff; font-family:inherit; font-size:14.5px; font-weight:700; transition:background .15s var(--ease); } .a11y-reset:hover{ background:#123137; } .a11y-reset:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; } .a11y-statement{ font-size:13.5px; font-weight:600; color:var(--bronze-ink); text-decoration:underline; text-underline-offset:3px; } .a11y-statement:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; } .a11y-note{ flex:1 1 100%; margin:0; font-size:11.5px; line-height:1.5; color:#55645F; } /* Screen-reader-only live region */ .a11y-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================ Page adaptations — each gated on a class on . #a11y-root is excluded throughout. ============================================================ */ /* ---------- Line height ---------- */ html.a11y-lh-medium :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,dd,dt,figcaption,label,.sub-title):not(#a11y-root *){ line-height:1.9; } html.a11y-lh-large :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,dd,dt,figcaption,label,.sub-title):not(#a11y-root *){ line-height:2.3; } /* ---------- Letter spacing ---------- */ html.a11y-ls-medium :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,label,.sub-title,a):not(#a11y-root *){ letter-spacing:.05em; } html.a11y-ls-large :is(p,li,h1,h2,h3,h4,h5,h6,blockquote,figcaption,label,.sub-title,a):not(#a11y-root *){ letter-spacing:.12em; } /* ---------- Text alignment ---------- Prose only. Navigation, buttons, tables, the marquee and icon rows keep their own alignment, because there it carries meaning or layout. */ html.a11y-align-right :is(p,li,h1,h2,h3,h4,h5,h6,blockquote):not(#a11y-root *):not(nav *):not(.btn):not(.marquee *):not(table *){ text-align:right; } html.a11y-align-center :is(p,li,h1,h2,h3,h4,h5,h6,blockquote):not(#a11y-root *):not(nav *):not(.btn):not(.marquee *):not(table *){ text-align:center; } html.a11y-align-left :is(p,li,h1,h2,h3,h4,h5,h6,blockquote):not(#a11y-root *):not(nav *):not(.btn):not(.marquee *):not(table *){ text-align:left; } /* ---------- Readable font ---------- */ html.a11y-readable-font body :not(#a11y-root):not(#a11y-root *){ font-family:Arial, Helvetica, "Segoe UI", sans-serif; } /* ---------- High contrast ---------- The site drives nearly all of its colour through custom properties, so deepening the tokens raises contrast everywhere at once — including the inline styles that reference var(--muted-on-light) — without a filter that would wash text out. */ html.a11y-contrast-high{ --muted-on-light:#1B2B28; --ink-on-light:#000000; --muted-on-dark:#FFFFFF; --bronze-ink:#4C4128; --gold-light:#F7E9C8; --line-on-light:rgba(13,36,41,0.32); --line-on-dark:rgba(219,194,146,0.75); } html.a11y-contrast-high :is(.hero,.services,.why,.contact,.banks,.page-header) :is(p,li,h2,h3,h4,span):not(#a11y-root *){ color:#fff; } html.a11y-contrast-high .btn-primary{ color:#000; } /* ---------- Inverted contrast ---------- A dark scheme built from real colours. No invert() filter, so photos, video, logos and illustrations keep their true colours. */ html.a11y-contrast-invert body{ background:#0B1416; color:#EDF3F2; } html.a11y-contrast-invert :is(.about,.insight,.testimonials,.reviews,.numbers,.testi-intro,.marquee-strip,.banks,.press-card,.press-feature,.article-teaser,.reco-card,.article-toc,.card-on-cream,.card-on-white,.quote-card,.insight-box,.bank-slot,.review-card,.svc-grid-card .body):not(#a11y-root *){ background-color:#111D20 !important; border-color:#2C3C3F !important; } html.a11y-contrast-invert :is(section,main,footer,header):not(#a11y-root *){ background-color:#0B1416; } html.a11y-contrast-invert :is(p,li,h1,h2,h3,h4,h5,h6,span,strong,em,blockquote,label,td,th,figcaption,.sub-title,.review-text,.review-name,.credit):not(#a11y-root *){ color:#EDF3F2 !important; } html.a11y-contrast-invert a:not(.btn):not(#a11y-root *){ color:#E8D3A4 !important; } html.a11y-contrast-invert :is(.article-callout,.story-quote){ background-color:#16262A !important; } html.a11y-contrast-invert :is(input,textarea):not(#a11y-root *){ background:#16262A !important; color:#EDF3F2 !important; border-color:#33474B !important; } html.a11y-contrast-invert .btn-primary{ background:var(--grad); color:#14211F !important; } /* ---------- Grayscale ---------- Applied to the page regions only; the widget keeps its colour so its active states stay distinguishable. */ html.a11y-grayscale :is(header,main,footer,.wa-float,.mobile-cta-bar){ filter:grayscale(1); } /* ---------- Light background ---------- Turns the dark bands light with dark text, keeping section borders. */ html.a11y-light-bg :is(.hero,.services,.why,.contact,.banks,.page-header,.about-photo .container,footer,header):not(#a11y-root *){ background-color:#FBFBF8 !important; background-image:none !important; } html.a11y-light-bg :is(.hero-overlay,.page-header-overlay,.about-overlay,.svc-scrim,.scrim,.banks-bg-video,.hero-bg,.page-header-bg,.about-bg,.hero-wave-canvas,.contact-mark){ display:none !important; } html.a11y-light-bg :is(.hero,.services,.why,.contact,.banks,.page-header,footer,header) :is(p,li,h1,h2,h3,h4,h5,h6,span,a,label,.credit,.sub-title):not(#a11y-root *){ color:#14211F !important; } html.a11y-light-bg :is(.hero,.services,.why,.contact,.banks,.page-header,footer,header){ border-color:rgba(13,36,41,0.18) !important; } html.a11y-light-bg :is(.card-on-dark,.reason,.svc-grid-card .body){ background-color:#F1F2EC !important; border-color:rgba(13,36,41,0.18) !important; } html.a11y-light-bg :is(input,textarea):not(#a11y-root *){ background:#fff !important; color:#14211F !important; } html.a11y-light-bg .btn-primary{ color:#14211F !important; } /* ---------- Highlight links ---------- Text links only: buttons, the logo, image cards and icon-only links are left alone so the underline stays meaningful. */ html.a11y-highlight-links a:not(.btn):not(.logo):not(.svc-grid-card):not(.article-teaser):not(.press-card):not(.press-feature):not(.wa-float):not(.social-links a):not(.mobile-cta-bar a):not(#a11y-root *){ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; outline:1px dashed currentColor; outline-offset:2px; } /* ---------- Large cursor ---------- Self-contained SVG data URI — no external service — and only where a real pointer exists, so touch devices are unaffected. */ @media (pointer:fine){ html.a11y-large-cursor, html.a11y-large-cursor body, html.a11y-large-cursor :is(a,button,input,textarea,select,label,summary){ cursor:url('data:image/svg+xml;utf8,') 8 4, auto; } } /* ---------- Focus highlight ---------- */ html.a11y-focus-highlight :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:4px solid #1264C4 !important; outline-offset:3px !important; border-radius:3px; } html.a11y-focus-highlight :is(a,button,input,textarea,select,summary,[tabindex]):focus{ outline:4px solid #1264C4; outline-offset:3px; } /* ---------- Reduce motion ---------- Covers the site's decorative motion: reveals, the marquee, the hero canvas, smooth scrolling and hover transforms. Functional transitions (the panel itself) live under #a11y-root and are left alone. */ html.a11y-reduce-motion{ scroll-behavior:auto !important; } html.a11y-reduce-motion *:not(#a11y-root):not(#a11y-root *){ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.a11y-reduce-motion .marquee-track{ animation:none !important; transform:none !important; } html.a11y-reduce-motion .hero-wave-canvas{ display:none !important; } html.a11y-reduce-motion :is(.reveal-up,.reveal-down,.reveal-pop){ opacity:1 !important; transform:none !important; } html.a11y-reduce-motion :is(.btn:hover,.article-teaser:hover,.bank-slot:hover,.press-card:hover){ transform:none !important; } /* ---------- Text scale ---------- The scale itself is applied per element in JS (the site's type is in px, so a root font-size change would not reach it). This only relaxes the fixed heights that would otherwise clip the enlarged text. */ html[class*="a11y-text-"] :is(.btn,.nav-cta){ white-space:normal; height:auto; } html[class*="a11y-text-"] :is(.bank-slot,.svc-card,.reason){ height:auto; } html.a11y-text-150 .hero{ min-height:0; }