/* ========================================================================== Comfort & Access — screen / display controls -------------------------------------------------------------------------- Launcher is a "Display & Comfort" BUTTON injected into the footer (among the legal links) — not a floating icon. It opens the controls as a centered modal dialog with a backdrop. A separate back-to-top button lives bottom- right. Everything here is injected by assets/js/a11y.js — no per-page markup beyond a footer for the button to land in. Because the launcher is in the footer and the panel is centered, nothing ever collides with the Teddy chat FAB (bottom-right). Colors use the page's design tokens when present (--green-*, --gray-*, --orange-*) and fall back to hardcoded hex, so this file works on any page regardless of which CSS variables that page happens to define. Modes are driven by data-* attributes on , set pre-paint by the inline boot script in each page's and toggled live by the panel: data-textsize = lg | xl (browser-zoom-style scaling) data-contrast = high (enhanced contrast) data-readable = on (looser line / letter spacing) data-decor = off (hide decorative flourishes) data-motion = reduced (manual reduce-motion, mirrors the prefers-reduced-motion media query) ========================================================================== */ /* ---- Footer launcher button (sits among the footer links) ---- Inherits the footer's text color so it blends with the legal links; hover lifts to the brand color. Themes with a dark footer should set their own hover color (e.g. #fff). */ .access-footer-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .18s ease; } .access-footer-btn svg { width: 15px; height: 15px; flex: none; } .access-footer-btn:hover { color: var(--green-700, #486E21); } .access-footer-sep { margin: 0 8px; opacity: .5; } /* ---- Backdrop + centered modal panel ---- */ .access-backdrop { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .22s ease; } .access-backdrop.is-visible { opacity: 1; } .access-backdrop[hidden] { display: none; } .access-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9001; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border: 1px solid var(--gray-200, #EEEEEE); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, .12)); padding: 18px 18px 16px; color: var(--gray-800, #424242); font-family: inherit; transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1); } .access-panel[hidden] { display: none; } .access-panel.is-closed { opacity: 0; transform: translate(-50%, -46%) scale(.97); pointer-events: none; } .access-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .access-panel-head h2 { font-size: 17px; line-height: 1.2; margin: 0; font-weight: 700; color: var(--green-600, #3A581A); display: flex; align-items: center; gap: 8px; } .access-panel-head h2 svg { width: 18px; height: 18px; color: var(--green-700, #486E21); } .access-panel-close { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-500, #9E9E9E); background: none; border: none; cursor: pointer; flex: none; } .access-panel-close:hover { background: var(--gray-100, #F5F5F5); color: var(--gray-900, #212121); } .access-panel-close svg { width: 18px; height: 18px; } .access-panel-sub { font-size: 12.5px; color: var(--gray-600, #757575); margin: 0 0 14px; } .access-group { margin-bottom: 14px; } .access-group-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600, #757575); margin-bottom: 7px; } /* Segmented text-size control */ .access-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--green-50, #F1F6E5); padding: 4px; border-radius: var(--radius-sm, 8px); } .access-seg button { border: none; background: transparent; cursor: pointer; border-radius: 8px; padding: 8px 4px; font-weight: 700; font-family: inherit; color: var(--gray-700, #616161); line-height: 1; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .access-seg button[aria-pressed="true"] { background: #fff; color: var(--green-700, #486E21); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06)); } /* Toggle rows */ .access-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 0; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; } .access-toggle + .access-toggle { border-top: 1px solid var(--gray-200, #EEEEEE); } .access-toggle .at-label { display: flex; align-items: center; gap: 10px; } .access-toggle .at-label svg { width: 18px; height: 18px; color: var(--green-700, #486E21); flex: none; } .access-toggle .at-text { display: flex; flex-direction: column; } .access-toggle .at-text strong { font-size: 14px; font-weight: 700; color: var(--gray-900, #212121); } .access-toggle .at-text span { font-size: 11.5px; color: var(--gray-600, #757575); } .access-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--gray-300, #E0E0E0); transition: background .2s ease; } .access-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06)); transition: transform .2s cubic-bezier(.22, 1, .36, 1); } .access-toggle[aria-pressed="true"] .access-switch { background: var(--green-600, #3A581A); } .access-toggle[aria-pressed="true"] .access-switch::after { transform: translateX(18px); } .access-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-200, #EEEEEE); } .access-reset { font-size: 13px; font-weight: 700; color: var(--green-700, #486E21); display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; } .access-reset:hover { color: var(--orange-600, #E86A0A); } .access-reset svg { width: 14px; height: 14px; } .access-foot a.access-statement { font-size: 12px; color: var(--gray-600, #757575); text-decoration: underline; } .access-foot a.access-statement:hover { color: var(--green-700, #486E21); } /* ---- Back-to-top (bottom-right; clears the chat FAB until scrolled) ---- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 8900; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--green-700, #486E21); background: #fff; border: 1px solid var(--gray-200, #EEEEEE); box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .10)); cursor: pointer; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1), color .2s ease, background .2s ease; } .to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .to-top:hover { color: #fff; background: var(--green-600, #3A581A); transform: translateY(-3px); } .to-top svg { width: 22px; height: 22px; } /* The back-to-top button shares the bottom-right corner with the Teddy chat FAB. It only appears after the user scrolls 600px, and the chat widget sits above it (higher z-index), so on long pages the user lifts it just above the bear. If a build wants them fully separated, nudge .to-top { right: 84px }. */ @media (max-width: 640px) { .to-top { width: 44px; height: 44px; right: 14px; bottom: 14px; } } /* ========================================================================== DISPLAY MODES — driven by data-* on ========================================================================== */ /* ---- Text size (browser-zoom style; scales all type + layout) ---- */ html[data-textsize="lg"] body { zoom: 1.12; } html[data-textsize="xl"] body { zoom: 1.25; } /* ---- High contrast (enhanced contrast: darker text, borders, underlines) ---- */ html[data-contrast="high"] { /* Darken the *text* grays only — leave light-fill tokens (gray-100/200) alone so pale backgrounds don't turn dark under dark text. */ --gray-700: #2b2b2b; --gray-600: #333333; --gray-500: #454545; } html[data-contrast="high"] body { color: #111; background: #fff; } html[data-contrast="high"] h1, html[data-contrast="high"] h2, html[data-contrast="high"] h3, html[data-contrast="high"] h4 { color: #000; } html[data-contrast="high"] p, html[data-contrast="high"] li, html[data-contrast="high"] blockquote { color: #1a1a1a; } /* Underline in-content links (skip buttons / pill CTAs / the panel's own controls) */ html[data-contrast="high"] main a:not(.btn):not(.nf-btn):not(.access-statement):not([class*="card"]) { text-decoration: underline; text-underline-offset: 2px; } /* Add visible borders to common card-ish surfaces + the panel. Builds can append their own card classes to this list. */ html[data-contrast="high"] .access-panel, html[data-contrast="high"] .service-card, html[data-contrast="high"] .doctor-card, html[data-contrast="high"] .insurance-card, html[data-contrast="high"] .hero-float-card, html[data-contrast="high"] .float-card, html[data-contrast="high"] .callout { border: 1.5px solid #333 !important; } html[data-contrast="high"] header { border-bottom: 1.5px solid #333; } html[data-contrast="high"] .btn, html[data-contrast="high"] .nf-btn { border-width: 2px; } /* ---- Readable text (more breathing room) ---- */ html[data-readable="on"] body { line-height: 1.85; letter-spacing: .015em; word-spacing: .06em; } html[data-readable="on"] p, html[data-readable="on"] li, html[data-readable="on"] blockquote { line-height: 1.9; max-width: 72ch; } html[data-readable="on"] h1, html[data-readable="on"] h2, html[data-readable="on"] h3 { line-height: 1.3; } /* ---- Hide decorations (calm / distraction-free) ---- Hides decorative flourishes only. Builds can add their own decorative selectors here (floating shapes, parallax scenes, sparkle layers, etc.). */ html[data-decor="off"] .cursor-glow, html[data-decor="off"] .hero-float-card, html[data-decor="off"] .float-card, html[data-decor="off"] .float-shape, html[data-decor="off"] .hero-magic, html[data-decor="off"] .sparkle-layer { display: none !important; } /* ========================================================================== MOTION OFF — manual "Reduce motion" toggle. Mirrors the page's prefers-reduced-motion media query for users whose OS isn't set but who still want calm. (data-motion="reduced" on ) ========================================================================== */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html[data-motion="reduced"] .cursor-glow, html[data-motion="reduced"] .sparkle-layer { display: none !important; } /* Reveal anything that animates in on scroll so it never gets stuck hidden. */ html[data-motion="reduced"] .fade-up, html[data-motion="reduced"] .reveal { opacity: 1 !important; transform: none !important; } /* ========================================================================== SYSTEM CONTRAST / FORCED COLORS ========================================================================== */ @media (prefers-contrast: more) { body { color: #111; } main a:not(.btn):not(.nf-btn):not([class*="card"]) { text-decoration: underline; } } @media (forced-colors: active) { .access-panel, .to-top { border: 1px solid CanvasText !important; } .access-switch { border: 1px solid CanvasText; } .access-toggle[aria-pressed="true"] .access-switch { background: Highlight; } .to-top svg { forced-color-adjust: auto; } } /* ---- Hide the controls when printing ---- */ @media print { .access-footer-btn, .access-footer-sep, .access-backdrop, .access-panel, .to-top { display: none !important; } .fade-up, .reveal { opacity: 1 !important; transform: none !important; } }