/* ========================================================================= GTB Accessibility — a11y.css Uses the theme's design tokens (var(--lb-*)) with safe fallbacks so it still looks right if the theme isn't active. ========================================================================= */ /* ---- Skip to content -------------------------------------------------- */ .gtb-skip-link{ position:absolute; left:-9999px; top:0; z-index:100001; background:var(--lb-primary-dark,#699A2F); color:#fff; font-family:var(--lb-font-body,'Open Sans',system-ui,sans-serif); font-weight:700; padding:.7em 1.2em; border-radius:0 0 10px 0; text-decoration:none; } .gtb-skip-link:focus{ left:0; outline:3px solid #fff; outline-offset:-6px; } /* ---- Visible keyboard focus (only when enabled via body class) --------- */ body.gtb-enforce-focus a:focus-visible, body.gtb-enforce-focus button:focus-visible, body.gtb-enforce-focus input:focus-visible, body.gtb-enforce-focus select:focus-visible, body.gtb-enforce-focus textarea:focus-visible, body.gtb-enforce-focus [tabindex]:focus-visible{ outline:3px solid var(--lb-primary,#84BD3F) !important; outline-offset:2px !important; border-radius:3px; } /* ========================================================================= Visitor preference modes (classes toggled on ) ========================================================================= */ /* Text size — scales rem/em based sizing across the theme + Bootstrap */ html.a11y-text-lg{ font-size:115% !important; } html.a11y-text-xl{ font-size:130% !important; } /* High contrast — strong black / white / yellow scheme */ html.a11y-contrast body{ background:#000 !important; color:#fff !important; } html.a11y-contrast body::before{ display:none !important; } /* kill decorative grid */ html.a11y-contrast .lb-hero__band, html.a11y-contrast .lb-hero__grid, html.a11y-contrast .lb-hero{ background:#000 !important; } html.a11y-contrast .lb-header, html.a11y-contrast .lb-footer, html.a11y-contrast .lb-section--muted, html.a11y-contrast .lb-card, html.a11y-contrast .lb-chip, html.a11y-contrast .lb-review, html.a11y-contrast .lb-form, html.a11y-contrast .lb-page-hero, html.a11y-contrast .accordion-item, html.a11y-contrast .accordion-button, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea{ background:#000 !important; color:#fff !important; border-color:#fff !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast label, html.a11y-contrast .text-muted-2{ color:#fff !important; } html.a11y-contrast a{ color:#ffff00 !important; text-decoration:underline !important; } html.a11y-contrast .btn, html.a11y-contrast .btn-primary{ background:#ffff00 !important; color:#000 !important; border:2px solid #000 !important; box-shadow:none !important; } html.a11y-contrast .lb-eyebrow, html.a11y-contrast .lb-hero__hl, html.a11y-contrast .lb-float__val--accent{ color:#ffff00 !important; } /* Readable font — legible family + generous spacing */ html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4, html.a11y-readable h5, html.a11y-readable p, html.a11y-readable a, html.a11y-readable li, html.a11y-readable span, html.a11y-readable label, html.a11y-readable input, html.a11y-readable button, html.a11y-readable textarea, html.a11y-readable select{ font-family:Verdana, Tahoma, Arial, sans-serif !important; letter-spacing:.02em !important; } html.a11y-readable p, html.a11y-readable li{ line-height:1.9 !important; word-spacing:.08em; } /* Highlight links */ html.a11y-highlight-links a{ text-decoration:underline !important; text-underline-offset:2px; background:rgba(132,189,63,.14); box-shadow:0 0 0 2px rgba(132,189,63,.5); border-radius:2px; } /* Reduce motion (forced regardless of OS setting) */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } /* ========================================================================= The toolbar (built by a11y.js) ========================================================================= */ .gtb-a11y{ --g:var(--lb-primary,#84BD3F); --gd:var(--lb-primary-dark,#699A2F); --ink:var(--lb-ink,#232B22); --line:var(--lb-line,#E2E0D5); --soft:var(--lb-accent-soft,#EAF3DB); font-family:var(--lb-font-body,'Open Sans',system-ui,sans-serif); } .gtb-a11y__btn{ position:fixed; bottom:20px; z-index:100000; width:56px; height:56px; border-radius:50%; cursor:pointer; border:none; background:var(--g); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(35,43,34,.28); transition:transform .15s ease, background .15s ease; } .gtb-a11y__btn:hover{ background:var(--gd); transform:translateY(-2px); } .gtb-a11y__btn svg{ width:30px; height:30px; } .gtb-a11y--right .gtb-a11y__btn{ right:20px; } .gtb-a11y--left .gtb-a11y__btn{ left:20px; } .gtb-a11y__panel{ position:fixed; bottom:88px; z-index:100000; width:300px; max-width:calc(100vw - 32px); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px rgba(35,43,34,.25); padding:18px; display:none; } .gtb-a11y__panel[data-open="true"]{ display:block; } .gtb-a11y--right .gtb-a11y__panel{ right:20px; } .gtb-a11y--left .gtb-a11y__panel{ left:20px; } .gtb-a11y__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .gtb-a11y__title{ font-family:var(--lb-font-heading,'Poppins',sans-serif); font-weight:700; font-size:1.05rem; margin:0; color:var(--ink); } .gtb-a11y__close{ background:none; border:none; cursor:pointer; color:var(--ink); padding:6px; border-radius:8px; line-height:0; } .gtb-a11y__close:hover{ background:var(--soft); } .gtb-a11y__close svg{ width:20px; height:20px; } .gtb-a11y__label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gd); margin:14px 0 6px; } /* Segmented text-size control */ .gtb-a11y__seg{ display:flex; gap:6px; } .gtb-a11y__seg button{ flex:1; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 0; font-family:var(--lb-font-heading,'Poppins',sans-serif); font-weight:600; } .gtb-a11y__seg button[aria-pressed="true"]{ background:var(--g); color:#fff; border-color:var(--g); } .gtb-a11y__seg .s1{ font-size:.85rem; } .gtb-a11y__seg .s2{ font-size:1rem; } .gtb-a11y__seg .s3{ font-size:1.2rem; } /* Toggle rows */ .gtb-a11y__toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-top:8px; font-size:.92rem; font-weight:600; text-align:left; } .gtb-a11y__toggle:hover{ border-color:var(--g); } .gtb-a11y__toggle[aria-pressed="true"]{ background:var(--soft); border-color:var(--g); } .gtb-a11y__switch{ position:relative; flex:0 0 auto; width:38px; height:22px; border-radius:999px; background:var(--line); transition:background .15s ease; } .gtb-a11y__switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s ease; box-shadow:0 1px 3px rgba(0,0,0,.25); } .gtb-a11y__toggle[aria-pressed="true"] .gtb-a11y__switch{ background:var(--g); } .gtb-a11y__toggle[aria-pressed="true"] .gtb-a11y__switch::after{ transform:translateX(16px); } .gtb-a11y__reset{ width:100%; margin-top:14px; cursor:pointer; background:none; border:1px solid var(--line); border-radius:10px; padding:10px; font-weight:600; color:var(--gd); } .gtb-a11y__reset:hover{ background:var(--soft); border-color:var(--g); } .gtb-a11y__btn:focus-visible, .gtb-a11y__close:focus-visible, .gtb-a11y__seg button:focus-visible, .gtb-a11y__toggle:focus-visible, .gtb-a11y__reset:focus-visible{ outline:3px solid var(--gd); outline-offset:2px; } @media (max-width:480px){ .gtb-a11y__panel{ left:16px !important; right:16px !important; width:auto; bottom:84px; } } /* Respect reduced motion for the toolbar's own transitions */ @media (prefers-reduced-motion:reduce){ .gtb-a11y__btn, .gtb-a11y__switch, .gtb-a11y__switch::after{ transition:none !important; } } /* ========================================================================= Keep the toolbar itself legible & on-brand regardless of active mode (the contrast/readable rules above must not restyle our own UI). ========================================================================= */ html.a11y-contrast .gtb-a11y__panel, html.a11y-readable .gtb-a11y__panel{ background:#fff !important; color:var(--lb-ink,#232B22) !important; border-color:var(--lb-line,#E2E0D5) !important; } html.a11y-contrast .gtb-a11y__title, html.a11y-contrast .gtb-a11y__close, html.a11y-contrast .gtb-a11y__toggle, html.a11y-contrast .gtb-a11y__toggle span, html.a11y-contrast .gtb-a11y__seg button, html.a11y-contrast .gtb-a11y__reset{ color:var(--lb-ink,#232B22) !important; } html.a11y-contrast .gtb-a11y__label{ color:var(--lb-primary-dark,#699A2F) !important; } html.a11y-contrast .gtb-a11y__toggle, html.a11y-contrast .gtb-a11y__seg button, html.a11y-contrast .gtb-a11y__reset{ background:#fff !important; border-color:var(--lb-line,#E2E0D5) !important; } html.a11y-contrast .gtb-a11y__toggle[aria-pressed="true"]{ background:var(--lb-accent-soft,#EAF3DB) !important; border-color:var(--lb-primary,#84BD3F) !important; } html.a11y-contrast .gtb-a11y__seg button[aria-pressed="true"]{ background:var(--lb-primary,#84BD3F) !important; color:#fff !important; border-color:var(--lb-primary,#84BD3F) !important; } html.a11y-contrast .gtb-a11y__reset{ color:var(--lb-primary-dark,#699A2F) !important; } html.a11y-contrast .gtb-a11y__btn{ background:var(--lb-primary,#84BD3F) !important; color:#fff !important; } html.a11y-readable .gtb-a11y, html.a11y-readable .gtb-a11y *{ font-family:var(--lb-font-body,'Open Sans',system-ui,sans-serif) !important; letter-spacing:normal !important; } /* ========================================================================= v1.1 — Colour vision, Read-aloud, Language select ========================================================================= */ /* Colour-vision filters — applied to page blocks but NOT the toolbar, so fixed positioning of the toolbar is never affected. */ html.a11y-cvd-prot body > *:not(.gtb-a11y):not(script):not(svg){ filter:url('#gtb-prot'); } html.a11y-cvd-deut body > *:not(.gtb-a11y):not(script):not(svg){ filter:url('#gtb-deut'); } html.a11y-cvd-trit body > *:not(.gtb-a11y):not(script):not(svg){ filter:url('#gtb-trit'); } html.a11y-cvd-gray body > *:not(.gtb-a11y):not(script):not(svg){ filter:grayscale(1); } /* Read-aloud button row */ .gtb-a11y__voice{ display:flex; gap:8px; } .gtb-a11y__vbtn{ flex:1; cursor:pointer; background:#fff; color:var(--gd); border:1px solid var(--line); border-radius:10px; padding:10px 0; display:flex; align-items:center; justify-content:center; } .gtb-a11y__vbtn:hover{ background:var(--soft); border-color:var(--g); } .gtb-a11y__vbtn svg{ width:18px; height:18px; } .gtb-a11y__vbtn:focus-visible{ outline:3px solid var(--gd); outline-offset:2px; } /* Native select controls (colour vision, language) */ .gtb-a11y__select{ width:100%; cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-family:var(--lb-font-body,'Open Sans',system-ui,sans-serif); font-size:.92rem; font-weight:600; appearance:auto; } .gtb-a11y__select:hover{ border-color:var(--g); } .gtb-a11y__select:focus-visible{ outline:3px solid var(--gd); outline-offset:2px; } /* Keep these controls legible under high-contrast mode too */ html.a11y-contrast .gtb-a11y__select, html.a11y-contrast .gtb-a11y__vbtn{ background:#fff !important; color:var(--lb-ink,#232B22) !important; border-color:var(--lb-line,#E2E0D5) !important; } html.a11y-contrast .gtb-a11y__vbtn{ color:var(--lb-primary-dark,#699A2F) !important; } /* Tidy up Google's translation banner (we drive it from our own select) */ .goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-te-balloon-frame{ display:none !important; } body{ top:0 !important; } #google_translate_element{ position:absolute !important; left:-9999px !important; height:0 !important; overflow:hidden; } .goog-text-highlight{ background:none !important; box-shadow:none !important; }