/* ========================================================================== ACCESSIBILITY PANEL + PRIVACY NOTICE Aura Integra Behavioral Health, PLLC Built natively. No overlay vendor is loaded anywhere on this site: no UserWay, no accessiBe acsbJS, no EqualWeb, no AudioEye. Every control below is a class flipped on and a rule in this file. Why not an overlay widget: - The FTC fined accessiBe $1,000,000 in January 2025 for misrepresenting that its overlay makes a site WCAG compliant. Final order April 2025. - UsableNet's 2025 report found 28% of digital accessibility lawsuits targeted sites that already had an overlay installed. - UserWay's api.userway.org endpoint receives visitor interaction data. On a psychiatric and addiction practice site that is a third-party observing people reading about opioid treatment. Not acceptable here. The real accessibility work is in the markup and in style.css. This panel is an accommodation layer on top of a site that is already navigable. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TEXT SIZE Version A's type scale is rem-based and clamp()-driven, so moving the root font size moves the whole scale in proportion without breaking layout. -------------------------------------------------------------------------- */ html.a11y-text-1 { font-size: 112.5%; } html.a11y-text-2 { font-size: 125%; } html.a11y-text-3 { font-size: 140%; } /* Hero display type is already enormous; let it grow more slowly than body copy so a 140% setting does not push three words onto four lines. */ html.a11y-text-2 .hero__title, html.a11y-text-3 .hero__title { font-size: clamp(2.6rem, 8vw, 4.6rem); } /* -------------------------------------------------------------------------- 2. TEXT SPACING (letter + word spacing) Values meet WCAG 1.4.12 Text Spacing: 0.12em letter, 0.16em word. -------------------------------------------------------------------------- */ html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing a, html.a11y-spacing h1, html.a11y-spacing h2, html.a11y-spacing h3, html.a11y-spacing h4, html.a11y-spacing h5, html.a11y-spacing h6, html.a11y-spacing label, html.a11y-spacing button, html.a11y-spacing td, html.a11y-spacing th { letter-spacing: .12em !important; word-spacing: .16em !important; } /* -------------------------------------------------------------------------- 3. LINE HEIGHT -------------------------------------------------------------------------- */ html.a11y-lineheight body, html.a11y-lineheight p, html.a11y-lineheight li, html.a11y-lineheight dd, html.a11y-lineheight dt, html.a11y-lineheight td, html.a11y-lineheight th, html.a11y-lineheight label { line-height: 2 !important; } html.a11y-lineheight h1, html.a11y-lineheight h2, html.a11y-lineheight h3, html.a11y-lineheight h4 { line-height: 1.45 !important; } html.a11y-lineheight p { margin-bottom: 1.35em !important; } /* -------------------------------------------------------------------------- 4. HIGH CONTRAST Near-black on white, with the practice's teal kept only where it still clears AAA. Backgrounds, gradients and image overlays are flattened, because a decorative gold radial behind body copy is exactly the thing that makes a page unreadable for the people using this toggle. -------------------------------------------------------------------------- */ html.a11y-contrast body, html.a11y-contrast .act, html.a11y-contrast .sheet, html.a11y-contrast .pagewrap, html.a11y-contrast .p-card, html.a11y-contrast .p-panel, html.a11y-contrast .quiz-card, html.a11y-contrast .intro-card, html.a11y-contrast .result-card { background: #FFFFFF !important; color: #000000 !important; background-image: none !important; } html.a11y-contrast * { text-shadow: none !important; } html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast label, html.a11y-contrast dd, html.a11y-contrast dt, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6 { color: #000000 !important; } html.a11y-contrast a { color: #00363A !important; text-decoration: underline !important; } html.a11y-contrast .btn, html.a11y-contrast button { background: #00363A !important; color: #FFFFFF !important; border: 2px solid #000000 !important; } html.a11y-contrast .btn:hover, html.a11y-contrast button:hover { background: #000000 !important; } /* Teal sections invert rather than flatten, so structure is not lost */ html.a11y-contrast .act--contact, html.a11y-contrast .pagehero, html.a11y-contrast .foot, html.a11y-contrast .crisisbar { background: #000000 !important; color: #FFFFFF !important; background-image: none !important; } html.a11y-contrast .act--contact *, html.a11y-contrast .pagehero *, html.a11y-contrast .foot *, html.a11y-contrast .crisisbar * { color: #FFFFFF !important; } html.a11y-contrast .act--contact a, html.a11y-contrast .pagehero a, html.a11y-contrast .foot a, html.a11y-contrast .crisisbar a { color: #FFE79A !important; } html.a11y-contrast :focus-visible { outline: 3px solid #FFB000 !important; outline-offset: 2px; } /* -------------------------------------------------------------------------- 5. HIGHLIGHT LINKS -------------------------------------------------------------------------- */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; outline: 2px solid var(--gold, #C49A22); outline-offset: 2px; border-radius: 2px; } html.a11y-links a:hover { outline-color: var(--teal, #0A6B6F); } /* -------------------------------------------------------------------------- 6. PAUSE ANIMATIONS Also applied automatically when the OS reports prefers-reduced-motion. -------------------------------------------------------------------------- */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.a11y-nomotion video { display: none; } /* -------------------------------------------------------------------------- 7. HIDE IMAGES js/a11y.js swaps each image for a labelled box carrying its alt text, so the information in the image survives being hidden. Genuinely useful on a metered or slow connection, which is not a rare situation for the people this practice serves. -------------------------------------------------------------------------- */ .a11y-imgstub { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px dashed rgba(30, 42, 43, .38); border-radius: 8px; background: rgba(220, 232, 231, .5); color: var(--muted, #4A5A5B); font-family: var(--body, system-ui, sans-serif); font-size: .82rem; line-height: 1.4; max-width: 100%; } .a11y-imgstub::before { content: "Image"; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--teal, #0A6B6F); flex: none; } .a11y-imgstub--empty { font-style: italic; opacity: .8; } html.a11y-contrast .a11y-imgstub { background: #FFF !important; color: #000 !important; border-color: #000 !important; } /* -------------------------------------------------------------------------- 8. DYSLEXIA-FRIENDLY FONT A system stack, deliberately. No font is fetched from a CDN and no new webfont is added to the build. Comic Sans leads the stack because it is one of the faces the British Dyslexia Association's style guide actually recommends, for the same reason it is mocked: irregular letterforms are harder to confuse with one another. -------------------------------------------------------------------------- */ html.a11y-dyslexia, html.a11y-dyslexia body, html.a11y-dyslexia p, html.a11y-dyslexia li, html.a11y-dyslexia a, html.a11y-dyslexia h1, html.a11y-dyslexia h2, html.a11y-dyslexia h3, html.a11y-dyslexia h4, html.a11y-dyslexia h5, html.a11y-dyslexia h6, html.a11y-dyslexia button, html.a11y-dyslexia input, html.a11y-dyslexia textarea, html.a11y-dyslexia select, html.a11y-dyslexia label, html.a11y-dyslexia td, html.a11y-dyslexia th { font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", Verdana, Tahoma, sans-serif !important; letter-spacing: .02em; } html.a11y-dyslexia { font-synthesis: none; } /* -------------------------------------------------------------------------- 9. LARGER CURSOR An inline SVG data URI, so no asset request is made. -------------------------------------------------------------------------- */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L16.5 30.5 L22 43 L28.5 40 L23 27.5 L34 27 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor input[type="checkbox"], html.a11y-cursor input[type="radio"], html.a11y-cursor label, html.a11y-cursor summary, html.a11y-cursor .option { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 22 L18 8 A4 4 0 0 1 26 8 L26 21 L29 21 A5 5 0 0 1 34 26 L34 34 A7 7 0 0 1 27 41 L23 41 A9 9 0 0 1 14 32 L14 24 A3 3 0 0 1 18 22 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 18 6, pointer !important; } /* ========================================================================== 10. THE LAUNCHER BUTTON Bottom-LEFT. The crisis ribbon sits at the top of every page and the reach bar sits bottom-right on mobile, so this corner is free on both. ========================================================================== */ .a11y-fab { position: fixed; left: clamp(.75rem, 2vw, 1.25rem); bottom: clamp(.75rem, 2vw, 1.25rem); z-index: 940; /* under the crisis ribbon and any modal */ width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold, #C49A22); background: var(--teal, #0A6B6F); color: #FBF7EE; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 22px rgba(4, 41, 43, .3); transition: transform .18s ease, background .18s ease; } .a11y-fab:hover { background: var(--teal-deep, #08484B); transform: translateY(-2px); } .a11y-fab:focus-visible { outline: 3px solid var(--gold, #C49A22); outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; display: block; } /* Lift clear of the mobile reach bar only after that bar is visible. */ @media (max-width: 899px) { .reachbar.is-up ~ .a11y-fab { left: auto; right: clamp(.75rem, 2vw, 1.25rem); bottom: calc(clamp(.75rem, 2vw, 1.25rem) + 68px); } } /* ========================================================================== 11. THE PANEL ========================================================================== */ .a11y-panel { position: fixed; left: clamp(.75rem, 2vw, 1.25rem); bottom: calc(clamp(.75rem, 2vw, 1.25rem) + 64px); z-index: 950; width: min(23rem, calc(100vw - 1.5rem)); max-height: min(34rem, calc(100vh - 8rem)); overflow-y: auto; background: var(--cream, #FBF7EE); border: 1px solid var(--line, rgba(30, 42, 43, .14)); border-top: 3px solid var(--gold, #C49A22); border-radius: 14px; box-shadow: 0 18px 50px rgba(4, 41, 43, .26); padding: 1.1rem 1.1rem 1rem; font-family: var(--body, system-ui, sans-serif); color: var(--ink, #1E2A2B); } body.has-reachbar .a11y-panel { bottom: calc(clamp(.75rem, 2vw, 1.25rem) + 132px); } @media (min-width: 900px) { body.has-reachbar .a11y-panel { bottom: calc(clamp(.75rem, 2vw, 1.25rem) + 64px); } } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; } .a11y-panel__title { font-family: var(--display, Georgia, serif); font-size: 1.4rem; line-height: 1.1; margin: 0; color: var(--teal-ink, #04292B); } .a11y-panel__close { flex: none; background: none; border: 1px solid var(--line, rgba(30, 42, 43, .14)); border-radius: 8px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--muted, #4A5A5B); } .a11y-panel__close:hover { background: var(--cream-2, #F5EFE1); color: var(--ink, #1E2A2B); } .a11y-panel__close:focus-visible { outline: 2px solid var(--gold, #C49A22); outline-offset: 2px; } .a11y-panel__note { font-size: .8rem; line-height: 1.5; color: var(--muted, #4A5A5B); margin: 0 0 .9rem; } .a11y-group { margin-bottom: .9rem; } .a11y-group__label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--teal, #0A6B6F); margin: 0 0 .45rem; } /* text size stepper */ .a11y-steps { display: flex; gap: .35rem; } .a11y-step { flex: 1; padding: .5rem .2rem; border: 1px solid var(--line, rgba(30, 42, 43, .14)); background: #fff; border-radius: 8px; cursor: pointer; font-family: inherit; color: var(--ink, #1E2A2B); line-height: 1; } .a11y-step:hover { background: var(--teal-soft, #DCE8E7); } .a11y-step:focus-visible { outline: 2px solid var(--gold, #C49A22); outline-offset: 2px; } .a11y-step[aria-pressed="true"] { background: var(--teal, #0A6B6F); border-color: var(--teal, #0A6B6F); color: #FBF7EE; font-weight: 600; } .a11y-step--a { font-size: .8rem; } .a11y-step--b { font-size: .95rem; } .a11y-step--c { font-size: 1.1rem; } .a11y-step--d { font-size: 1.25rem; } /* toggle rows */ .a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .55rem .6rem; margin-bottom: .3rem; border: 1px solid transparent; border-radius: 9px; background: #fff; cursor: pointer; font-family: inherit; font-size: .9rem; text-align: left; color: var(--ink, #1E2A2B); } .a11y-toggle:hover { background: var(--teal-soft, #DCE8E7); } .a11y-toggle:focus-visible { outline: 2px solid var(--gold, #C49A22); outline-offset: 1px; } .a11y-toggle__sw { flex: none; width: 38px; height: 22px; border-radius: 999px; background: #C9D4D3; position: relative; transition: background .18s ease; } .a11y-toggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s ease; } .a11y-toggle[aria-pressed="true"] { border-color: rgba(10, 107, 111, .28); } .a11y-toggle[aria-pressed="true"] .a11y-toggle__sw { background: var(--teal, #0A6B6F); } .a11y-toggle[aria-pressed="true"] .a11y-toggle__sw::after { transform: translateX(16px); } .a11y-reset { width: 100%; margin-top: .35rem; padding: .6rem; border: 1px solid var(--teal, #0A6B6F); border-radius: 9px; background: transparent; color: var(--teal-deep, #08484B); font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; } .a11y-reset:hover { background: var(--teal, #0A6B6F); color: #FBF7EE; } .a11y-reset:focus-visible { outline: 2px solid var(--gold, #C49A22); outline-offset: 2px; } .a11y-panel__foot { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line, rgba(30, 42, 43, .14)); font-size: .76rem; line-height: 1.55; color: var(--muted, #4A5A5B); } .a11y-panel__foot a { color: var(--teal-deep, #08484B); } /* screen-reader-only live region */ .a11y-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 12. PRIVACY NOTICE Small, bottom of viewport, dismissible, first visit only. It does not block the page, and it never covers the crisis ribbon, which is why it is anchored to the bottom and the ribbon is anchored to the top. ========================================================================== */ .pnotice { position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); bottom: clamp(.6rem, 2vw, 1.1rem); z-index: 930; width: min(46rem, calc(100vw - 1.5rem)); background: var(--cream, #FBF7EE); border: 1px solid var(--line, rgba(30, 42, 43, .14)); border-left: 4px solid var(--teal, #0A6B6F); border-radius: 12px; box-shadow: 0 14px 40px rgba(4, 41, 43, .2); padding: .95rem 1.1rem; font-family: var(--body, system-ui, sans-serif); color: var(--ink, #1E2A2B); transition: transform .4s cubic-bezier(.2, .7, .3, 1); } .pnotice.is-in { transform: translateX(-50%) translateY(0); } .pnotice[hidden] { display: none; } /* leave room for the accessibility button on narrow screens */ @media (max-width: 620px) { .pnotice { bottom: calc(clamp(.6rem, 2vw, 1.1rem) + 60px); } body.has-reachbar .pnotice { bottom: calc(clamp(.6rem, 2vw, 1.1rem) + 128px); } } .pnotice__row { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .pnotice__body { flex: 1 1 22rem; min-width: 0; } .pnotice__text { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--muted, #4A5A5B); } .pnotice__text strong { color: var(--ink, #1E2A2B); } .pnotice__text a { color: var(--teal-deep, #08484B); } .pnotice__actions { display: flex; gap: .5rem; flex: none; align-items: center; } @media (max-width: 620px) { .pnotice__actions { width: 100%; } .pnotice__actions .pnotice__btn { flex: 1; } } .pnotice__btn { padding: .55rem 1rem; border-radius: 8px; font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--teal, #0A6B6F); background: transparent; color: var(--teal-deep, #08484B); white-space: nowrap; } .pnotice__btn:hover { background: var(--teal-soft, #DCE8E7); } .pnotice__btn:focus-visible { outline: 2px solid var(--gold, #C49A22); outline-offset: 2px; } .pnotice__btn--primary { background: var(--teal, #0A6B6F); border-color: var(--teal, #0A6B6F); color: #FBF7EE; } .pnotice__btn--primary:hover { background: var(--teal-deep, #08484B); } .pnotice__detail { margin: .85rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line, rgba(30, 42, 43, .14)); font-size: .83rem; line-height: 1.6; color: var(--muted, #4A5A5B); } .pnotice__detail[hidden] { display: none; } .pnotice__detail h3 { font-family: var(--display, Georgia, serif); font-size: 1.05rem; margin: 0 0 .4rem; color: var(--teal-ink, #04292B); } .pnotice__list { list-style: none; padding: 0; margin: 0 0 .7rem; } .pnotice__list li { padding: .5rem .65rem; background: #fff; border: 1px solid var(--line, rgba(30, 42, 43, .14)); border-radius: 8px; margin-bottom: .35rem; } .pnotice__list code { font-size: .8em; background: var(--teal-soft, #DCE8E7); padding: .1em .35em; border-radius: 4px; } .pnotice__none { font-style: italic; } html.a11y-contrast .a11y-panel, html.a11y-contrast .pnotice { background: #fff !important; color: #000 !important; } html.a11y-contrast .a11y-toggle, html.a11y-contrast .a11y-step, html.a11y-contrast .pnotice__list li { background: #fff !important; color: #000 !important; } @media print { .a11y-fab, .a11y-panel, .pnotice { display: none !important; } } /* --------------------------------------------------------------------- High-contrast fix: panel controls must stay legible on hover. The generic rule above paints every