/* ============================================================================ AccessAbility — shared accessibility suite (styles) Self-contained, no external deps. Used by every page in this site so the Listen reader, the comfort-toggle widget, the reading guide, and hands-free Voice commands stay identical site-wide. Colors come from each page's design tokens (--ink, --paper-2, --lime, …) so it inherits the brand automatically. Linked in (render-blocking) so saved comfort prefs apply before paint. ========================================================================== */ /* Boldonse — bold, playful display face for the background symbols. Self-hosted (woff2, latin subset) so the site stays self-contained; SIL OFL. */ @font-face { font-family: "Boldonse"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/boldonse.woff2") format("woff2"); } /* ---- comfort-toggle effects (driven by data-a11y-* on ) ---- */ html[data-a11y-text="lg"] { font-size: 118%; } html[data-a11y-contrast="high"] { --ink: #000; --muted: #15120d; --paper: #fff; --paper-2: #fff; --rule: #6b665c; --rule-2: #2c2820; --mark: #6b665c; } html[data-a11y-contrast="high"] body { background: #fff; } /* lighten hard-coded container fills too (cards, media, toggles) */ html[data-a11y-contrast="high"] .media, html[data-a11y-contrast="high"] .aa-toggle { background: #fff; } html[data-a11y-contrast="high"] .aa-toggle[aria-pressed="true"] { background: var(--lime); } html[data-a11y-contrast="high"] .kris-texture, html[data-a11y-contrast="high"] .aa-bg { display: none; } /* drop decorative drift for max clarity */ html[data-a11y-spacing="readable"] p, html[data-a11y-spacing="readable"] li, html[data-a11y-spacing="readable"] figcaption { letter-spacing: .03em; word-spacing: .08em; line-height: 1.9; } 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; } html[data-a11y-underline] a { text-decoration: underline; text-underline-offset: 2px; } html[data-a11y-font="readable"] body, html[data-a11y-font="readable"] button, html[data-a11y-font="readable"] select { font-family: Verdana, Tahoma, "DejaVu Sans", "Segoe UI", sans-serif !important; } html[data-a11y-cursor="big"], html[data-a11y-cursor="big"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M7 4 L7 32 L14 25 L19 37 L25 34 L20 23 L31 23 Z' fill='white' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 7 4, auto; } /* reading guide bar that follows the cursor */ #aa-guide { position: fixed; left: 0; right: 0; height: 42px; pointer-events: none; z-index: 49; display: none; background: rgba(137,206,64,.16); border-top: 1px solid rgba(137,206,64,.45); border-bottom: 1px solid rgba(137,206,64,.45); } html[data-a11y-guide="1"] #aa-guide { display: block; } /* ---- floating control buttons ---- */ .aa-fab { position: fixed; z-index: 51; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: .65rem 1.05rem; font: 700 .8rem/1 ui-sans-serif, system-ui, sans-serif; box-shadow: 0 8px 24px -12px rgba(21,18,13,.35); cursor: pointer; } .aa-fab:focus-visible { outline: 3px solid var(--lime-deep, #4e7a1e); outline-offset: 2px; } #aa-listen { left: 1rem; bottom: 1rem; z-index: 50; } #aa-a11y-btn { left: 1rem; bottom: 4.25rem; } #aa-voice-btn { right: 1rem; bottom: 1rem; } #aa-voice-btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime-deep); } #aa-voice-btn .aa-mic { position: relative; display: inline-flex; } #aa-voice-btn[aria-pressed="true"] .aa-mic::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid var(--lime-deep); animation: aa-pulse 1.3s ease-out infinite; } @keyframes aa-pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #aa-voice-btn[aria-pressed="true"] .aa-mic::after { animation: none; } } /* voice caption / heard-text bubble + command help */ #aa-voice-caption { position: fixed; right: 1rem; bottom: 4rem; z-index: 52; max-width: min(340px, calc(100vw - 2rem)); display: none; background: var(--ink); color: var(--paper, #fff); border-radius: .8rem; padding: .6rem .85rem; font: 600 .82rem/1.35 ui-sans-serif, system-ui, sans-serif; box-shadow: 0 18px 50px -20px rgba(21,18,13,.6); } #aa-voice-caption[data-show="1"] { display: block; } #aa-voice-caption .aa-vc-heard { opacity: .7; font-weight: 500; } #aa-voice-caption ul { margin: .4rem 0 0; padding-left: 1.1rem; } #aa-voice-caption li { margin: .12rem 0; } /* ---- comfort-toggle panel ---- */ #aa-a11y-panel { position: fixed; left: 1rem; bottom: 7.7rem; z-index: 52; width: min(330px, calc(100vw - 2rem)); max-height: min(70vh, 32rem); overflow-y: auto; background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 1rem; box-shadow: 0 24px 60px -24px rgba(21,18,13,.5); padding: 1rem 1.1rem; display: none; } #aa-a11y-panel[data-open="1"] { display: block; } #aa-a11y-panel h2 { margin: 0 0 .5rem; font-size: .95rem; color: var(--ink); } .aa-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--rule); } .aa-row:first-of-type { border-top: 0; } .aa-lab { font-size: .86rem; color: var(--ink); font-weight: 600; } .aa-toggle { width: 44px; height: 25px; border-radius: 999px; border: 1px solid var(--rule-2); background: #e9e3d6; position: relative; cursor: pointer; flex: none; } .aa-toggle[aria-pressed="true"] { background: var(--lime); border-color: var(--lime-deep); } .aa-toggle b { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; } .aa-toggle[aria-pressed="true"] b { left: 21px; } #aa-lang { border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: .5rem; padding: .35rem .55rem; font: 600 .82rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .aa-toggle b { transition: none; } } /* visually-hidden live region for screen-reader announcements */ .aa-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- ElevenLabs voice select (matches the language select) ---- */ #aa-voice-select { border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: .5rem; padding: .35rem .55rem; font: 600 .82rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; max-width: 11rem; } .aa-panel-actions { display: flex; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rule); } .aa-panel-actions button { flex: 1; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); border-radius: .55rem; padding: .5rem; font: 700 .76rem/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; } .aa-panel-actions button:hover { border-color: var(--lime-deep); color: var(--lime-deep); } /* ---- modals: command palette + keyboard shortcuts ---- */ .aa-modal { position: fixed; inset: 0; z-index: 60; display: grid; } .aa-modal[hidden] { display: none; } .aa-modal::before { content: ""; position: absolute; inset: 0; background: rgba(21,18,13,.5); } #aa-cmdk { align-items: start; justify-items: center; padding-top: 12vh; } .aa-cmdk-box { position: relative; width: min(560px, calc(100vw - 2rem)); background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 1rem; box-shadow: 0 30px 80px -30px rgba(21,18,13,.6); overflow: hidden; } #aa-cmdk-input { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); padding: 1rem 1.1rem; font: 600 1rem/1.2 ui-sans-serif, system-ui, sans-serif; outline: none; } #aa-cmdk-list { list-style: none; margin: 0; padding: .4rem; max-height: 52vh; overflow-y: auto; } .aa-cmdk-group { padding: .55rem .7rem .2rem; font: 700 .66rem/1 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .aa-cmdk-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .7rem; border-radius: .6rem; cursor: pointer; color: var(--ink); font-weight: 600; } .aa-cmdk-row .h { color: var(--muted); font-size: .78rem; font-weight: 600; } .aa-cmdk-row[aria-selected="true"], .aa-cmdk-row:hover { background: var(--lime); color: var(--ink); } .aa-cmdk-row[aria-selected="true"] .h { color: rgba(21,18,13,.7); } .aa-cmdk-empty { padding: 1.2rem .8rem; color: var(--muted); } .aa-cmdk-foot { padding: .5rem .85rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .74rem; display: flex; gap: 1rem; flex-wrap: wrap; } #aa-keys { place-items: center; } .aa-keys-box { position: relative; width: min(440px, calc(100vw - 2rem)); background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 1rem; box-shadow: 0 30px 80px -30px rgba(21,18,13,.6); padding: 1.4rem 1.6rem; } .aa-keys-box h2 { margin: 0 0 1rem; font-size: 1.1rem; color: var(--ink); } .aa-keys-box dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin: 0; align-items: center; } .aa-keys-box dt { display: flex; gap: .3rem; } .aa-keys-box dd { margin: 0; color: var(--muted); } .aa-kbd { display: inline-block; min-width: 1.4rem; text-align: center; padding: .16rem .42rem; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: .35rem; background: var(--paper); font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); } .aa-keys-close { position: absolute; top: .6rem; right: .8rem; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); } .aa-keys-close:hover { color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .aa-cmdk-box, .aa-keys-box { animation: aa-pop .16s ease-out; } @keyframes aa-pop { from { transform: translateY(-8px); opacity: 0; } } } /* ---- brand logo (header + footer) ---- */ .brand-logo { height: 4rem; width: auto; display: block; } .foot-logo { height: 4.8rem; width: auto; display: block; margin-bottom: 1rem; } @media (max-width: 760px) { .brand-logo { height: 3rem; } } /* ---- responsive primary nav + hamburger menu ---- */ .nav-extra { display: none; } /* extra links live in the footer on desktop; shown in the mobile drawer */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .55rem .35rem; margin-left: auto; color: var(--ink); } .nav-toggle:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 2px; border-radius: 6px; } .nav-toggle span { display: block; width: 26px; height: 2.5px; background: currentColor; border-radius: 2px; margin: 5.5px 0; transition: transform .22s ease, opacity .22s ease; } header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 920px) { .top { position: relative; flex-wrap: wrap; } .nav-toggle { display: block; } .nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: 0 28px 44px -28px rgba(21, 18, 13, .45); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .26s ease; } header.nav-open .nav { max-height: 84vh; overflow-y: auto; visibility: visible; padding-bottom: .6rem; } .nav .nav-links { flex-direction: column; align-items: stretch; gap: 0; } .nav .nav-links a, .nav .phone, .nav .nav-extra { display: block; padding: .9rem clamp(1.25rem, 5vw, 2rem); border-top: 1px solid var(--rule); } .nav .nav-links a::after { display: none; } .nav .btn { margin: .8rem clamp(1.25rem, 5vw, 2rem) .3rem; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .nav, .nav-toggle span { transition: none !important; } } /* ---- page-background character drift (Kris's hero pattern, extended) ---- A fixed, full-viewport layer of drifting letters/digits/symbols that lives BEHIND the centered content frame, so the motif fills the page background (most visible in the margins beside the column). Decorative + aria-hidden; all motion gated on prefers-reduced-motion. */ .aa-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aa-bgc { position: absolute; font-family: "Boldonse", ui-sans-serif, system-ui, sans-serif; font-weight: 400; line-height: 1; color: var(--lime-deep); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); will-change: transform; } html[data-a11y-contrast="high"] .aa-bg { display: none; } /* keep high-contrast clean */ @media (prefers-reduced-motion: no-preference) { .aa-bgc { animation: aa-drift var(--d, 16s) ease-in-out var(--dl, 0s) infinite alternate; } @keyframes aa-drift { from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0); } to { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) * -1)) translateY(-9px); } } } /* ============================================================================ Layout containment + control ergonomics Appended last, and aa-suite.css is the final stylesheet on all 11 pages, so these win over both styles.css and the per-page inline