/* ===================================================== LittleBot Accessibility — Full CSS - Brand colors at :root (easy theming from PHP vars) - Circles indicators (hollow -> filled) - Font Awesome icons (no SVG dependency) - Side mirroring via .a11y2-side-right on ===================================================== */ :root{ --a11y2-accent: var(--a11y2-button, #2e726d); --a11y2-primary: var(--a11y2-focus, #A15E10); --a11y2-ink:#223127; --a11y2-muted:#4D5B52; --a11y2-border:#D9E0DA; --a11y2-surface:#FFFFFF; --a11y2-tile:#F8F9F7; --a11y2-shadow:0 10px 22px rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.10); } /* Filters apply to site content, not the widget */ body.a11y2-contrast-high > :not(#a11y2-root){ filter:contrast(1.5) brightness(1.08) } body.a11y2-contrast-desat > :not(#a11y2-root){ filter:grayscale(100%) } body.a11y2-contrast-invert> :not(#a11y2-root){ filter:invert(100%) hue-rotate(180deg) } body.a11y2-color-shift > :not(#a11y2-root){ filter:hue-rotate(25deg) saturate(.9) } body.a11y2-hide-images > :not(#a11y2-root) img{ visibility:hidden !important } body.a11y2-pause > :not(#a11y2-root) *, body.a11y2-pause > :not(#a11y2-root) *::before, body.a11y2-pause > :not(#a11y2-root) *::after{ animation-play-state:paused !important; transition:none !important } /* Launcher buttons */ @keyframes a11y2-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} } @media (prefers-reduced-motion: no-preference){ #a11y2-root .a11y2-launcher, #a11y2-root .a11y2-read, #a11y2-root .a11y2-translate { animation:a11y2-bob 3.6s ease-in-out infinite } } #a11y2-root .a11y2-launcher:hover, #a11y2-root .a11y2-read:hover, #a11y2-root .a11y2-translate:hover{ transform:translateY(-1px) } #a11y2-root .a11y2-launcher:active, #a11y2-root .a11y2-read:active, #a11y2-root .a11y2-translate:active{ transform:translateY(0) } #a11y2-root .a11y2-launcher, #a11y2-root .a11y2-read, #a11y2-root .a11y2-translate{ position:fixed; width:56px; height:56px; background:var(--a11y2-accent); color:#fff; border:1px solid var(--a11y2-accent); border-radius: var(--a11y2-launcher-radius, 14px); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.14); z-index:99999 !important; -webkit-tap-highlight-color: transparent; line-height:0; } /* Side mirroring: default left, toggle right via .a11y2-side-right on */ #a11y2-root .a11y2-launcher, #a11y2-root .a11y2-read, #a11y2-root .a11y2-translate{ left:15px !important; right:auto; } .a11y2-side-right #a11y2-root .a11y2-launcher, .a11y2-side-right #a11y2-root .a11y2-read, .a11y2-side-right #a11y2-root .a11y2-translate{ right:15px; left:auto; } /* Stacking positions (same values mirrored by side class) */ #a11y2-root .a11y2-launcher{ bottom:calc(55px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-read{ bottom:calc(17px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-translate{ bottom:calc(179px + env(safe-area-inset-bottom)) } /* Icon sizing (Font Awesome) */ #a11y2-root .a11y2-launcher i{font-size:26px} #a11y2-root .a11y2-read i{font-size:24px} #a11y2-root .a11y2-translate i{font-size:22px} #a11y2-root .a11y2-launcher:focus-visible, #a11y2-root .a11y2-panel button:focus-visible, #a11y2-root .a11y2-read:focus-visible, #a11y2-root .a11y2-translate:focus-visible, #a11y2-root .a11y2-read-btn:focus-visible{ outline:3px solid var(--a11y2-primary); outline-offset:2px; } /* Hover tooltips for pointer devices */ @media (hover: hover){ #a11y2-root .a11y2-launcher::after, #a11y2-root .a11y2-read::after, #a11y2-root .a11y2-translate::after{ content:attr(title); position:absolute; bottom:50%; transform:translateY(50%); background:#2f3342; color:#fff; padding:8px 12px; border-radius:10px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.22); font-size:13px; opacity:0; visibility:hidden; transition:.15s; left:calc(100% + 10px); } .a11y2-side-right #a11y2-root .a11y2-launcher::after, .a11y2-side-right #a11y2-root .a11y2-read::after, .a11y2-side-right #a11y2-root .a11y2-translate::after{ right:calc(100% + 10px); left:auto; } #a11y2-root .a11y2-launcher::before, #a11y2-root .a11y2-read::before, #a11y2-root .a11y2-translate::before{ content:""; position:absolute; bottom:50%; transform:translateY(50%); border:6px solid transparent; border-right-color:#2f3342; opacity:0; visibility:hidden; transition:.15s; left:calc(100% + 4px); } .a11y2-side-right #a11y2-root .a11y2-launcher::before, .a11y2-side-right #a11y2-root .a11y2-read::before, .a11y2-side-right #a11y2-root .a11y2-translate::before{ border-right-color:transparent; border-left-color:#2f3342; right:calc(100% + 4px); left:auto; } #a11y2-root .a11y2-launcher:hover::after, #a11y2-root .a11y2-launcher:focus-visible::after, #a11y2-root .a11y2-launcher:hover::before, #a11y2-root .a11y2-launcher:focus-visible::before, #a11y2-root .a11y2-read:hover::after, #a11y2-root .a11y2-read:focus-visible::after, #a11y2-root .a11y2-read:hover::before, #a11y2-root .a11y2-read:focus-visible::before, #a11y2-root .a11y2-translate:hover::after, #a11y2-root .a11y2-translate:focus-visible::after, #a11y2-root .a11y2-translate:hover::before, #a11y2-root .a11y2-translate:focus-visible::before{ opacity:1; visibility:visible; } } /* Overlay + panel */ #a11y2-root .a11y2-overlay[hidden]{display:none!important} #a11y2-root .a11y2-overlay{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:9998} #a11y2-root .a11y2-panel{ right:max(12px, env(safe-area-inset-right)); left:auto; bottom:calc(96px + env(safe-area-inset-bottom)); width:min(420px, calc(100vw - 24px)); max-height:calc(100vh - 160px); overflow:auto; background:var(--a11y2-surface); color:var(--a11y2-ink); border-radius:16px; box-shadow:var(--a11y2-shadow); padding:16px; border:1px solid var(--a11y2-border); z-index:9999; } select#ally2-voice { padding: 0.5em; } @media (max-width:768px){ #a11y2-root .a11y2-panel{ left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); width:auto } #a11y2-root .a11y2-read i{font-size:19px} #a11y2-root .a11y2-launcher{ bottom:calc(30px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-read{ bottom:calc(75px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-translate{ bottom:calc(120px + env(safe-area-inset-bottom)) } .ally2-lbl { display: none; } } /* Header */ #a11y2-root .a11y2-head{display:flex;align-items:center;gap:8px} #a11y2-root .a11y2-title{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--a11y2-primary);flex:1} #a11y2-root .a11y2-close{ background:#fff;color:#333;border:1px solid var(--a11y2-border); border-radius:12px;width:44px;height:44px;cursor:pointer;font-size:24px;line-height:1 } /* Tiles */ #a11y2-root .a11y2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px} #a11y2-root .a11y2-tile{ position:relative;background:var(--a11y2-tile); color:var(--a11y2-ink); border:1px solid var(--a11y2-border); border-radius:12px; padding:12px 10px; min-height:72px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; } @media (max-width:540px){ #a11y2-root .a11y2-grid{ grid-template-columns:repeat(2,1fr) } #a11y2-root .a11y2-tile{ min-height:58px; padding:8px } } @media (max-width:360px){ #a11y2-root .a11y2-grid{ grid-template-columns:1fr } } /* Circle indicators (hollow -> filled) */ #a11y2-root .a11y2-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--a11y2-primary)} #a11y2-root .a11y2-dots{position:absolute;right:10px;top:10px;display:flex;gap:6px} #a11y2-root .a11y2-dot{ width:10px;height:10px;border-radius:50%; background:transparent; border:2px solid #b9c2ba; box-sizing:border-box; } #a11y2-root .a11y2-dot.on{background:var(--a11y2-primary); border-color:var(--a11y2-primary)} #a11y2-root .a11y2-actions{display:flex;justify-content:flex-end;margin-top:10px} #a11y2-root .a11y2-reset{background:#fff;color:#333;border:1px solid var(--a11y2-border);border-radius:10px;padding:8px 12px;cursor:pointer} /* Feedback link */ #a11y2-root .a11y2-feedback-link{ display:block; margin-top:12px; text-decoration:none; font-weight:700; color:var(--a11y2-primary) } #a11y2-root .a11y2-feedback-link:focus-visible, #a11y2-root .a11y2-feedback-link:hover{ text-decoration:underline } /* Site focus & highlights */ .a11y2-focus :where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus, .a11y2-focus :where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{ outline:3px solid var(--a11y2-primary)!important; outline-offset:2px!important; } .a11y2-hl-1 h1, .a11y2-hl-1 h2, .a11y2-hl-1 h3, .a11y2-hl-1 h4, .a11y2-hl-1 h5, .a11y2-hl-1 h6{background:#FFF3BF} .a11y2-hl-2 a{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 2px } .a11y2-hl-3 button, .a11y2-hl-3 [role="button"], .a11y2-hl-3 .wp-block-button__link{ box-shadow:0 0 0 3px #FFCF66 } .a11y2-hl-4 a, .a11y2-hl-4 h1, .a11y2-hl-4 h2, .a11y2-hl-4 h3, .a11y2-hl-4 h4, .a11y2-hl-4 h5, .a11y2-hl-4 h6, .a11y2-hl-4 button, .a11y2-hl-4 [role="button"], .a11y2-hl-4 .wp-block-button__link{ outline:2px dashed #C23; outline-offset:2px } /* Text & spacing scales */ .a11y2-text-1{ font-size:112.5% } .a11y2-text-2{ font-size:125% } .a11y2-text-3{ font-size:137.5% } .a11y2-space-1{ line-height:1.6; letter-spacing:.1px; word-spacing:.2px } .a11y2-space-2{ line-height:1.75; letter-spacing:.2px; word-spacing:.4px } /* Font toggles (keep FA/Dashicons intact) */ .a11y2-font-serif :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,dd,dt,a,small,strong,em,code,pre,label,th,td,figcaption,button,input,textarea,select){ font-family: Georgia, "Times New Roman", serif !important; } .a11y2-font-dys :where(h1,h2,h3,h4,h5,h6,p,li,blockquote,dd,dt,a,small,strong,em,code,pre,label,th,td,figcaption,button,input,textarea,select){ font-family: "Atkinson Hyperlegible", "OpenDyslexic", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; } .a11y2-font-serif i[class^="fa"], .a11y2-font-serif i[class*=" fa-"], .a11y2-font-dys i[class^="fa"], .a11y2-font-dys i[class*=" fa-"]{ font-family: var(--fa-style-family,"Font Awesome 6 Free"), "Font Awesome 5 Free", "FontAwesome" !important; font-weight: var(--fa-style, 900); } .a11y2-font-serif .dashicons, .a11y2-font-dys .dashicons{ font-family: "dashicons" !important } /* Reading helpers */ .a11y2-guide{ position:fixed; left:0; width:100%; height:2rem; background:rgba(255,193,7,.28); pointer-events:none; z-index:9997 } .a11y2-window{ position:fixed; inset:0; pointer-events:none; z-index:9997; background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) calc(50% - 80px), rgba(0,0,0,0) calc(50% - 80px), rgba(0,0,0,0) calc(50% + 80px), rgba(0,0,0,.45) calc(50% + 80px), rgba(0,0,0,.45) 100%) } /* SR-only */ .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0 } /* Reader controls */ #a11y2-root .a11y2-read-controls{ position:fixed; bottom:calc(96px + env(safe-area-inset-bottom)); display:flex; gap:10px; z-index:9999; background:#fff; border:1px solid var(--a11y2-border); padding:8px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.14); left:110px; right:auto; } .a11y2-side-right #a11y2-root .a11y2-read-controls{ right:110px; left:auto; } #a11y2-root .a11y2-read-btn{ padding:8px 12px; border:1px solid var(--a11y2-primary); background:#fff; color:var(--a11y2-primary); border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:600; line-height:1; } #a11y2-root .a11y2-read-btn i{ font-size:14px } /* Popovers */ #a11y2-root .a11y2-read-opts, #a11y2-root .a11y2-translate-opts{ position:fixed; background:#fff; color:var(--a11y2-ink); border:1px solid var(--a11y2-border); border-radius:12px; box-shadow:var(--a11y2-shadow); padding:12px; z-index:10000; width:min(600px, calc(100vw - 140px)); max-width:calc(100vw - 140px); left:110px; right:auto; } .a11y2-side-right #a11y2-root .a11y2-read-opts, .a11y2-side-right #a11y2-root .a11y2-translate-opts{ right:110px; left:auto; } #a11y2-root .a11y2-read-opts{ bottom:calc(166px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-translate-opts{ bottom:calc(208px + env(safe-area-inset-bottom)) } #a11y2-root .a11y2-read-opts select, #a11y2-root .a11y2-translate-opts select{ width:100%; max-width:100%; } #a11y2-root .a11y2-disclaimer{ font-size:.8125rem; opacity:.9; white-space:normal; word-break:normal; hyphens:none; text-align:left; margin-top:4px; } #a11y2-root .a11y2-translate-opts .a11y2-disclaimer{ grid-column:1 / -1; } #a11y2-root .a11y2-read-tip{ position:fixed; z-index:10000; background:#fff; color:var(--a11y2-ink); border-radius:12px; padding:10px 12px; box-shadow:var(--a11y2-shadow); font-size:.875rem; line-height:1.35; left:96px; right:auto; bottom:154px; } .a11y2-side-right #a11y2-root .a11y2-read-tip{ right:96px; left:auto; } #a11y2-root .a11y2-read-opts-row{ display:grid; grid-template-columns: 110px 1fr auto; align-items:center; gap:8px; margin-bottom:8px; } #a11y2-root .a11y2-read-opts-actions{ display:flex; justify-content:flex-end; gap:8px } #a11y2-root .a11y2-read-opts .a11y2-read-test, #a11y2-root .a11y2-read-opts .a11y2-read-reset{ padding:8px 12px; border-radius:10px; cursor:pointer; border:1px solid var(--a11y2-primary); background:#fff; color:var(--a11y2-primary); font-weight:700; } /* Popover close (×) */ #a11y2-root .a11y2-pop-close{ position:absolute; top: -40px; right:0; width:32px; height:32px; border-radius:8px; border:1px solid var(--a11y2-border); background:#fff; cursor:pointer; font-size:20px; line-height:1; } /* Hide Google banner/UI clutter */ #goog-gt-tt, .goog-te-banner-frame, .goog-te-gadget-icon, .goog-te-spinner-pos { display:none !important } body { top: 0 !important } .goog-logo-link { display:none !important } .goog-te-gadget { color: transparent !important } #goog-gt-tt, .goog-te-banner-frame { display:none !important; } html.translated-ltr body, html.translated-rtl body, body { top: 0 !important; } body { position: static !important; } /* Mobile adjustments */ @media (max-width:640px){ #a11y2-root .a11y2-launcher, #a11y2-root .a11y2-read, #a11y2-root .a11y2-translate{ width:40px !important; height:40px !important; border-radius: var(--a11y2-launcher-radius, 10px) !important; } /* positions keep their stacking math via bottom calcs */ } /* Touch devices: hide hover tooltips */ @media (hover: none){ #a11y2-root .a11y2-launcher::after, #a11y2-root .a11y2-read::after, #a11y2-root .a11y2-translate::after, #a11y2-root .a11y2-launcher::before, #a11y2-root .a11y2-read::before, #a11y2-root .a11y2-translate::before{ display:none !important } }