/* ============================================================ Brandstart accessibility preferences - self-hosted a11y.css (pairs with a11y.js). No third-party overlay service. Preference classes applied to by a11y.js: .a11y-text-112 / .a11y-text-125 larger base text (112.5% / 125%) .a11y-contrast high contrast: near-black on white .a11y-readable system sans for body + headings .a11y-reduce-motion kills transitions/animations, forces .reveal visible, poster hero .a11y-focus strong visible focus outlines ============================================================ */ /* ---------- 1. Floating button (bottom-LEFT; the sticky quote pill lives bottom-right, so the two never collide) ---------- */ .bsa11y-btn{ position:fixed; left:24px; bottom:24px; z-index:80; width:52px; height:52px; border-radius:50%; background:#0A0A0A; border:2px solid #fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 14px 34px -10px rgba(0,0,0,.55); transition:transform .2s ease, background .2s ease; } .bsa11y-btn:hover{transform:scale(1.06)} .bsa11y-btn svg{width:32px; height:32px; display:block} .bsa11y-btn:focus-visible{ outline:3px solid transparent; box-shadow:0 0 0 3px #fff, 0 0 0 6px #C8102E; } /* ---------- 2. Panel ---------- */ /* Deliberately sized in px so the panel stays compact and usable while the text-size preference scales the page around it. */ .bsa11y-panel{ position:fixed; left:24px; bottom:90px; z-index:81; width:min(340px, calc(100vw - 32px)); max-height:min(600px, calc(100dvh - 130px)); overflow:auto; overscroll-behavior:contain; background:#fff; color:#0A0A0A; border:1px solid rgba(10,10,10,.16); border-radius:12px; box-shadow:0 32px 72px -18px rgba(0,0,0,.5); font-family:'Inter', system-ui, sans-serif; font-size:15px; line-height:1.45; padding:18px 20px 16px; } .bsa11y-panel[hidden]{display:none} .bsa11y-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid rgba(10,10,10,.12); } .bsa11y-kicker{ font:600 11px/1 'Inter', system-ui, sans-serif; letter-spacing:.24em; text-transform:uppercase; color:#C8102E; margin:0; } .bsa11y-close{ background:none; border:0; cursor:pointer; color:#0A0A0A; width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; padding:0; } .bsa11y-close:hover{background:rgba(10,10,10,.08)} .bsa11y-close svg{width:14px; height:14px; display:block} /* rows */ .bsa11y-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(10,10,10,.08); } .bsa11y-lab{font-weight:600; font-size:14px; color:#0A0A0A} /* text-size segmented control */ .bsa11y-seg{display:flex; border:2px solid #0A0A0A; border-radius:6px; overflow:hidden} .bsa11y-seg button{ background:#fff; color:#0A0A0A; border:0; cursor:pointer; min-width:40px; padding:6px 10px; font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif; font-weight:700; display:flex; align-items:baseline; justify-content:center; line-height:1; } .bsa11y-seg button + button{border-left:2px solid #0A0A0A} .bsa11y-seg button[aria-pressed="true"]{background:#0A0A0A; color:#fff} .bsa11y-seg .s1{font-size:13px} .bsa11y-seg .s2{font-size:16px} .bsa11y-seg .s3{font-size:19px} /* toggle rows (whole row is the button = big hit target) */ .bsa11y-toggle{ width:100%; background:none; border:0; cursor:pointer; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(10,10,10,.08); font:inherit; color:#0A0A0A; } .bsa11y-toggle:hover .bsa11y-sw{border-color:#C8102E} .bsa11y-sw{ flex:none; position:relative; width:46px; height:26px; border-radius:13px; background:#fff; border:2px solid #5F5757; transition:background .2s ease, border-color .2s ease; } .bsa11y-sw::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#5F5757; transition:transform .2s ease, background .2s ease; } .bsa11y-toggle[aria-pressed="true"] .bsa11y-sw{background:#C8102E; border-color:#C8102E} .bsa11y-toggle[aria-pressed="true"] .bsa11y-sw::after{background:#fff; transform:translateX(20px)} /* reset + note */ .bsa11y-reset{ width:100%; margin-top:14px; background:#fff; color:#0A0A0A; border:2px solid #0A0A0A; border-radius:6px; cursor:pointer; font:700 14px/1 'Plus Jakarta Sans','Inter',system-ui,sans-serif; padding:11px 14px; transition:background .2s ease, color .2s ease; } .bsa11y-reset:hover{background:#0A0A0A; color:#fff} .bsa11y-note{margin:10px 0 0; font-size:12px; color:#5F5757; text-align:center} /* keyboard focus inside the widget is always visible, independent of the sitewide focus preference */ .bsa11y-panel button:focus-visible, .bsa11y-close:focus-visible{ outline:3px solid transparent; box-shadow:0 0 0 2px #fff, 0 0 0 5px #C8102E; border-radius:6px; } @media (max-width:560px){ .bsa11y-btn{left:16px; bottom:16px; width:48px; height:48px} .bsa11y-panel{left:16px; bottom:76px} } @media (prefers-reduced-motion:reduce){ .bsa11y-btn, .bsa11y-sw, .bsa11y-sw::after, .bsa11y-reset{transition:none} .bsa11y-btn:hover{transform:none} } /* ============================================================ 3. Preference effects ============================================================ */ /* ----- Text size: 3 steps via root font size (site type is rem/clamp based) ----- */ html.a11y-text-112{font-size:112.5%} html.a11y-text-125{font-size:125%} /* ----- Readable font: system sans for body + headings ----- */ html.a11y-readable body, html.a11y-readable :is(h1,h2,h3,h4,h5,h6,p,a,li,dt,dd,blockquote,figcaption, label,legend,address,button,input,select,textarea,span,em,i,strong,b,small, time,th,td,summary,div){ font-family:-apple-system,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif !important; } /* ----- Reduce motion: mimic prefers-reduced-motion sitewide ----- */ html.a11y-reduce-motion{scroll-behavior:auto !important} html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* reveal system: content always visible */ html.a11y-reduce-motion .reveal{opacity:1 !important; transform:none !important} /* hero: hide the animated iframe, keep the still poster */ html.a11y-reduce-motion .hero-frame iframe{display:none !important} html.a11y-reduce-motion .hero-poster{opacity:1 !important; pointer-events:auto !important} /* ----- Highlight focus: strong two-ring outline that stays visible on white, cherry and black bands ----- */ html.a11y-focus :is(a,button,input,select,textarea,summary,iframe,[tabindex]):focus{ outline:3px solid transparent !important; /* keeps a rect in forced-colors mode */ outline-offset:2px; box-shadow:0 0 0 3px #fff, 0 0 0 7px #C8102E !important; border-radius:4px; } /* ----- High contrast: near-black text on white; cherry/black bands flatten to white with black text and keep structure via borders ----- */ html.a11y-contrast body{background:#fff} html.a11y-contrast body, html.a11y-contrast body *{color:#0A0A0A !important} /* flatten dark and cherry band backgrounds */ html.a11y-contrast :is(.band.dark,.page-hero,.close,footer.site, .founder-card,.mast .menu-links,.stats-strip){ background:#fff !important; background-image:none !important; } /* keep the page structure readable: strong separators where bands were dark */ html.a11y-contrast :is(.band.dark,.page-hero,.close,footer.site){ border-top:3px solid #0A0A0A; border-bottom:3px solid #0A0A0A; } html.a11y-contrast .founder-card{border:2px solid #0A0A0A} @media (max-width:820px){ /* slide-out drawer needs an edge once its dark background is flattened */ html.a11y-contrast .mast .menu-links{border-left:2px solid #0A0A0A} html.a11y-contrast .mast .menu-links a{color:#0A0A0A !important} } /* site rules that set light text with !important on dark/cherry bands (e.g. .page-hero .folio{color:#FFD9D2 !important} pink tokens) */ html.a11y-contrast :is(.page-hero,.band.dark,.close,footer.site,.founder-card) :is(.pk-keep,.folio,.idx,.lab,.role,.cat,.num,.k,.n,.l,.dir,.deliv,.svc,.svc-tag){ color:#0A0A0A !important; } /* gradient-clipped headline text would otherwise turn invisible */ html.a11y-contrast .grad{ background:none !important; -webkit-text-fill-color:#0A0A0A !important; color:#0A0A0A !important; } /* links become underlined so colour is not the only cue */ html.a11y-contrast a:not(.btn-primary):not(.cta):not(.sticky-cta):not(.bs-logo){ text-decoration:underline; } /* buttons: solid black with white text (AAA) */ html.a11y-contrast :is(.btn-primary,.mast .cta,.sticky-cta,form.enq button){ background:#0A0A0A !important; background-image:none !important; box-shadow:none !important; border:2px solid #0A0A0A !important; } html.a11y-contrast a.btn-primary, html.a11y-contrast button.btn-primary, html.a11y-contrast .mast a.cta, html.a11y-contrast a.sticky-cta, html.a11y-contrast form.enq button, html.a11y-contrast :is(.btn-primary,.mast .cta,.sticky-cta,form.enq button) :is(span,b,strong,em){ color:#fff !important; } html.a11y-contrast .btn-ghost{border-bottom:2px solid #0A0A0A !important} /* enquiry form fields on formerly-dark closing band */ html.a11y-contrast form.enq{background:#fff !important; border:2px solid #0A0A0A !important; backdrop-filter:none !important} html.a11y-contrast form.enq :is(input,select,textarea){ background:#fff !important; border:2px solid #0A0A0A !important; color:#0A0A0A !important; } html.a11y-contrast form.enq :is(input,textarea)::placeholder{color:#3D3D3D !important} /* burger lines stay visible over white drawer */ html.a11y-contrast .burger span{background:#0A0A0A !important} /* widget switches inside high-contrast mode keep a black on-state so state is never conveyed by cherry alone */ html.a11y-contrast .bsa11y-toggle[aria-pressed="true"] .bsa11y-sw{ background:#0A0A0A; border-color:#0A0A0A; }