/* * accessibility-widget.css — Heyday Marketing * ───────────────────────────────────────────────────────────────── * 1. Widget UI (card-grid layout) * 2. Page-level modifications applied as classes on * ───────────────────────────────────────────────────────────────── */ /* ── Visibility utility ────────────────────────────────────────── */ [x-cloak] { display: none !important; } /* ── Reduced-motion ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .a11y-wrap *, .a11y-wrap *::before, .a11y-wrap *::after { transition: none !important; animation: none !important; } } /* ── Panel slide-up ────────────────────────────────────────────── */ @keyframes a11y-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ───────────────────────────────────────────────────────────────── WRAPPER ───────────────────────────────────────────────────────────────── */ .a11y-wrap { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 9998; display: flex; flex-direction: column; align-items: flex-start; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; } /* ───────────────────────────────────────────────────────────────── PANEL ───────────────────────────────────────────────────────────────── */ .a11y-panel { width: 300px; max-height: 80vh; overflow-y: auto; background: #f2f2f2; border-radius: 20px; border: 1px solid #e0e0e0; box-shadow: 0 16px 56px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); margin-bottom: 10px; animation: a11y-in .16s ease-out; scrollbar-width: thin; scrollbar-color: #ccc transparent; } .a11y-panel::-webkit-scrollbar { width: 4px; } .a11y-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } /* ── Header ────────────────────────────────────────────────────── */ .a11y-panel-head { background: #8cb87a; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 20px 20px 0 0; position: sticky; top: 0; z-index: 1; } .a11y-panel-title { color: #fff; font-weight: 700; font-size: 15px; margin: 0; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; } .a11y-panel-title svg { flex-shrink: 0; } /* ── Header action buttons (hide + reset + close) ──────────────── */ .a11y-head-actions { display: flex; align-items: center; gap: 2px; } .a11y-head-btn { background: transparent; border: none; padding: 6px; border-radius: 8px; cursor: pointer; color: rgba(255,255,255,.75); display: flex; align-items: center; line-height: 1; transition: color .15s, background .15s; } .a11y-head-btn:hover { color: #fff; background: rgba(255,255,255,.18); } .a11y-head-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .a11y-head-sep { width: 1px; height: 18px; background: rgba(255,255,255,.3); margin: 0 4px; } /* ── Body ──────────────────────────────────────────────────────── */ .a11y-panel-body { padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 10px; } /* ── Section block ─────────────────────────────────────────────── */ .a11y-section { background: #fff; border-radius: 14px; padding: 13px 13px 11px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .a11y-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #888; margin: 0 0 10px; display: block; } /* ───────────────────────────────────────────────────────────────── CARD GRID — 2 × N ───────────────────────────────────────────────────────────────── */ .a11y-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 10px 9px; background: #f5f5f5; border: 1.5px solid transparent; border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: 600; color: #444; cursor: pointer; text-align: left; line-height: 1.2; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } .a11y-card:hover { background: #edf7ee; border-color: #a5d6a7; color: #2e7d32; } .a11y-card:focus-visible { outline: 2px solid #4CAF50; outline-offset: 2px; } .a11y-card[aria-pressed="true"] { background: #e8f5e9; border-color: #4CAF50; color: #2e7d32; box-shadow: inset 0 0 0 1px rgba(76,175,80,.25); } .a11y-card-icon { width: 36px; height: 36px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .a11y-card[aria-pressed="true"] .a11y-card-icon { background: #4CAF50; color: #fff; } .a11y-card-label { padding: 0 2px; } /* ───────────────────────────────────────────────────────────────── RESET BUTTON ───────────────────────────────────────────────────────────────── */ .a11y-reset { width: 100%; padding: 8px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 12px; font-family: inherit; font-size: 12px; font-weight: 600; color: #999; cursor: pointer; transition: background .15s, border-color .15s, color .15s; margin-top: 2px; } .a11y-reset:hover { background: #fafafa; border-color: #bbb; color: #555; } .a11y-reset:focus-visible { outline: 2px solid #4CAF50; outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────── TRIGGER FAB ───────────────────────────────────────────────────────────────── */ .a11y-fab { width: 56px; height: 56px; border-radius: 50%; background: #bcda85; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10); transition: background .15s, transform .15s; position: relative; flex-shrink: 0; } .a11y-fab:hover { background: #a8c96e; transform: scale(1.07); } .a11y-fab:active { transform: scale(.93); } .a11y-fab:focus-visible { outline: 2px solid #4CAF50; outline-offset: 3px; } .a11y-fab-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; background: #4CAF50; border-radius: 50%; border: 2px solid #fff; } /* Screen-reader-only live region */ .a11y-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ───────────────────────────────────────────────────────────────── DARK MODE ───────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { .a11y-panel { background: #1a1a1a; border-color: #333; } .a11y-section { background: #242424; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .a11y-section-title { color: #666; } .a11y-card { background: #2a2a2a; color: #bbb; } .a11y-card:hover { background: #1b3a1d; border-color: #4CAF50; color: #81c784; } .a11y-card[aria-pressed="true"] { background: #1b3a1d; border-color: #4CAF50; color: #81c784; } .a11y-card-icon { background: #333; } .a11y-reset { background: #242424; border-color: #333; color: #666; } .a11y-reset:hover { background: #2a2a2a; border-color: #555; color: #aaa; } } /* ── Mobile ────────────────────────────────────────────────────── */ @media (max-width: 479px) { .a11y-wrap { bottom: 5rem; left: 1rem; } .a11y-panel { width: calc(100vw - 2rem); } .a11y-fab { width: 48px; height: 48px; } .a11y-fab svg { width: 22px; height: 22px; } } /* ═════════════════════════════════════════════════════════════════ PAGE-LEVEL MODIFICATIONS — applied as classes on ═════════════════════════════════════════════════════════════════ */ /* ── Bigger text ───────────────────────────────────────────────── */ html.a11y-bigger-text { font-size: 120% !important; } /* ── Line height ───────────────────────────────────────────────── */ html.a11y-line-height * { line-height: 2 !important; } /* ── Text align left ───────────────────────────────────────────── */ html.a11y-text-align p, html.a11y-text-align li, html.a11y-text-align h1, html.a11y-text-align h2, html.a11y-text-align h3, html.a11y-text-align h4 { text-align: left !important; } /* ── Readable font (dyslexia-friendly) ─────────────────────────── */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/OpenDyslexic-Regular.otf') format('opentype'); font-display: swap; } html.a11y-readable-font, html.a11y-readable-font * { font-family: 'OpenDyslexic', Arial, sans-serif !important; } /* ── High contrast ─────────────────────────────────────────────── */ html.a11y-contrast { filter: contrast(1.5) saturate(1.2); } /* ── Grayscale ─────────────────────────────────────────────────── */ html.a11y-grayscale { filter: grayscale(1); } /* ── Hide images ───────────────────────────────────────────────── */ html.a11y-hide-images img, html.a11y-hide-images video, html.a11y-hide-images [style*="background-image"] { visibility: hidden !important; opacity: 0 !important; } /* ── Pause animations ──────────────────────────────────────────── */ html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* ── Highlight links ───────────────────────────────────────────── */ html.a11y-highlight-links a { background: rgba(76,175,80,.12) !important; color: #1b5e20 !important; text-decoration: underline !important; border-radius: 3px !important; padding: 0 2px !important; outline: 1.5px solid #4CAF50 !important; } /* ── Reading mask ──────────────────────────────────────────────── */ #a11y-reading-mask-el { position: fixed; left: 0; top: 0; width: 100%; height: 40px; background: rgba(76,175,80,.12); border-top: 2px solid rgba(76,175,80,.5); border-bottom: 2px solid rgba(76,175,80,.5); pointer-events: none; z-index: 99999; } /* ── Outline focus ─────────────────────────────────────────────── */ html.a11y-outline-focus *:focus, html.a11y-outline-focus *:focus-visible { outline: 3px solid #4CAF50 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(76,175,80,.25) !important; } /* ── Page structure (landmarks outline) ────────────────────────── */ html.a11y-page-structure header, html.a11y-page-structure nav, html.a11y-page-structure main, html.a11y-page-structure section, html.a11y-page-structure article, html.a11y-page-structure aside, html.a11y-page-structure footer { outline: 2px dashed rgba(76,175,80,.6) !important; outline-offset: 2px !important; }