/* ========================================================================== Professional Movers Buffalo NY - Custom Accessibility Widget (self-hosted, no third party) Floating button + panel, plus the effect classes it toggles on . ========================================================================== */ /* ---------- Floating toggle button ---------- */ .bv-a11y__toggle { position: fixed; bottom: 22px; left: 22px; z-index: 100050; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 50% !important; background: #0076a8; color: #fff; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; padding: 0; } .bv-a11y__toggle:hover, .bv-a11y__toggle:focus { background: #005f85; outline: 3px solid #f5a623; } .bv-a11y__toggle svg { width: 30px; height: 30px; fill: #fff; } /* ---------- Panel ---------- */ .bv-a11y__panel { position: fixed; bottom: 90px; left: 22px; z-index: 100050; width: 340px; max-width: calc(100vw - 44px); max-height: calc(100vh - 120px); overflow-y: auto; background: #ffffff; color: #1c2b4a; border: 1px solid #cfd6e4; border-radius: 10px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30); font-family: 'Open Sans', Arial, sans-serif; } .bv-a11y__panel[hidden] { display: none; } .bv-a11y__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #0076a8; color: #fff; border-radius: 10px 10px 0 0 !important; position: sticky; top: 0; } .bv-a11y__title { margin: 0; font-size: 18px; font-weight: 700; color: #fff; } .bv-a11y__close { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .bv-a11y__close:hover, .bv-a11y__close:focus { color: #f5a623; outline: 2px solid #f5a623; } .bv-a11y__body { padding: 12px 14px 16px; } .bv-a11y__group-label { margin: 14px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5a6b8c; } .bv-a11y__group-label:first-child { margin-top: 2px; } .bv-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bv-a11y__grid--mt { margin-top: 8px; } .bv-a11y__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 64px; padding: 8px 6px; border: 2px solid #d3dae8; border-radius: 8px !important; background: #f7f9fc; color: #1c2b4a; font-size: 12.5px; font-weight: 600; cursor: pointer; line-height: 1.2; } .bv-a11y__opt:hover { border-color: #0076a8; } .bv-a11y__opt:focus { outline: 3px solid #f5a623; outline-offset: 1px; } .bv-a11y__opt[aria-pressed="true"] { background: #0076a8; border-color: #0076a8; color: #fff; } .bv-a11y__opt .bv-ico { font-size: 18px; line-height: 1; } /* Text-size stepper */ .bv-a11y__stepper { display: flex; align-items: center; justify-content: space-between; border: 2px solid #d3dae8; border-radius: 8px !important; padding: 6px 10px; background: #f7f9fc; } .bv-a11y__stepper span { font-size: 13px; font-weight: 700; } .bv-a11y__step-btns { display: flex; gap: 6px; } .bv-a11y__step { width: 34px; height: 34px; border: 2px solid #0076a8; border-radius: 6px !important; background: #fff; color: #0076a8; font-size: 18px; font-weight: 700; cursor: pointer; } .bv-a11y__step:hover { background: #0076a8; color: #fff; } .bv-a11y__step:focus { outline: 3px solid #f5a623; } .bv-a11y__reset { display: block; width: 100%; margin-top: 16px; padding: 11px; border: 0; border-radius: 8px !important; background: #e74c3c; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } .bv-a11y__reset:hover { background: #c0392b; } .bv-a11y__reset:focus { outline: 3px solid #f5a623; } .bv-a11y__foot { margin-top: 12px; font-size: 11px; color: #5a6b8c; text-align: center; } .bv-a11y__foot a { color: #0076a8; } @media (max-width: 600px) { .bv-a11y__panel { left: 10px; bottom: 84px; max-width: calc(100vw - 20px); } .bv-a11y__toggle { left: 14px; bottom: 14px; } } /* ========================================================================== Effect classes applied to (documentElement) ========================================================================== */ /* Color / contrast modes (single-select via data-bv-color) */ html[data-bv-color="invert"] { filter: invert(1) hue-rotate(180deg); background: #fff; } /* counter-invert the widget itself (applied to the fixed elements directly so positioning isn't re-anchored) */ html[data-bv-color="invert"] .bv-a11y__toggle, html[data-bv-color="invert"] .bv-a11y__panel { filter: invert(1) hue-rotate(180deg); } html[data-bv-color="grayscale"] { filter: grayscale(1); } html[data-bv-color="high-saturation"] { filter: saturate(1.8); } html[data-bv-color="low-saturation"] { filter: saturate(0.4); } /* Generic dark mode (template-agnostic: targets structural + text tags) */ html[data-bv-color="dark"] body, html[data-bv-color="dark"] section, html[data-bv-color="dark"] header, html[data-bv-color="dark"] footer, html[data-bv-color="dark"] #main-content, html[data-bv-color="dark"] .container, html[data-bv-color="dark"] .block, html[data-bv-color="dark"] .legal-page, html[data-bv-color="dark"] .faq-section, html[data-bv-color="dark"] .faq-item, html[data-bv-color="dark"] .bv-card { background-color: #0a0a0a !important; } html[data-bv-color="dark"] body, html[data-bv-color="dark"] p, html[data-bv-color="dark"] li, html[data-bv-color="dark"] span, html[data-bv-color="dark"] h1, html[data-bv-color="dark"] h2, html[data-bv-color="dark"] h3, html[data-bv-color="dark"] h4, html[data-bv-color="dark"] h5, html[data-bv-color="dark"] h6, html[data-bv-color="dark"] strong, html[data-bv-color="dark"] .faq-a { color: #f5f5f5 !important; } html[data-bv-color="dark"] a, html[data-bv-color="dark"] .faq-item > summary { color: #ffe600 !important; } /* Readable / dyslexia fonts (scoped to content, leaves widget intact) */ html.bv-readable-font #main-content *, html.bv-readable-font .templatemo-footer * { font-family: Arial, Helvetica, Verdana, sans-serif !important; } html.bv-dyslexia-font #main-content *, html.bv-dyslexia-font .templatemo-footer * { font-family: 'Comic Sans MS', 'Segoe Print', 'Open Sans', sans-serif !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } /* Spacing */ html.bv-letter-spacing #main-content * { letter-spacing: 0.12em !important; } html.bv-line-height #main-content p, html.bv-line-height #main-content li, html.bv-line-height #main-content .faq-a, html.bv-line-height #main-content blockquote { line-height: 2.1 !important; } html.bv-align-left #main-content p, html.bv-align-left #main-content li, html.bv-align-left #main-content h1, html.bv-align-left #main-content h2, html.bv-align-left #main-content h3 { text-align: left !important; } /* Highlight links / titles */ html.bv-highlight-links a { text-decoration: underline !important; background: #ffe600 !important; color: #000 !important; box-shadow: 0 0 0 2px #ffe600; } html.bv-highlight-links .bv-a11y a { background: none !important; box-shadow: none !important; } html.bv-highlight-titles #main-content :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #0076a8 !important; outline-offset: 3px; background: #eef3ff !important; } /* Enhanced focus */ html.bv-highlight-focus a:focus, html.bv-highlight-focus button:focus, html.bv-highlight-focus input:focus, html.bv-highlight-focus textarea:focus, html.bv-highlight-focus select:focus, html.bv-highlight-focus [tabindex]:focus { outline: 4px solid #e74c3c !important; outline-offset: 3px !important; } /* Hide images (decorative-load reduction / focus aid) */ html.bv-hide-images #main-content img, html.bv-hide-images #main-content picture, html.bv-hide-images #main-content video { visibility: hidden !important; } /* Big cursor */ html.bv-big-cursor, html.bv-big-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='M6 2l30 18-13 3 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; } /* Pause animations */ html.bv-pause-animations *, html.bv-pause-animations *::before, html.bv-pause-animations *::after { animation-play-state: paused !important; animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Reading guide (line follows the cursor) */ .bv-reading-guide-line { position: fixed; left: 0; width: 100%; height: 4px; background: #0076a8; box-shadow: 0 0 6px 2px rgba(0, 51, 204, 0.5); z-index: 100040; pointer-events: none; display: none; } html.bv-reading-guide .bv-reading-guide-line { display: block; } /* Reading mask (dims everything except a horizontal band) */ .bv-reading-mask-top, .bv-reading-mask-bottom { position: fixed; left: 0; width: 100%; background: rgba(0, 0, 0, 0.78); z-index: 100039; pointer-events: none; display: none; } html.bv-reading-mask .bv-reading-mask-top, html.bv-reading-mask .bv-reading-mask-bottom { display: block; }