/* ========================================================================== Goggles On Access — accessibility widget (v2) PER-CLIENT BRANDING: change only the --goa-* values below to reskin. Defaults ship the standard Goggles On Access look (white panel, blue accent). Example reskin (Reilly Recovery): --goa-accent: #2b3d33; --goa-accent-contrast: #d4a574; --goa-link: #7a4a24; ========================================================================== */ :root { /* Reilly Recovery reskin: deep green chrome, copper highlights. White on the green (11.6:1) instead of the v1 copper pairing (5.2:1). */ --goa-accent: #2b3d33; /* header, active pills, toggle button */ --goa-accent-contrast: #ffffff; /* text/icon color on the accent */ --goa-surface: #ffffff; /* panel body */ --goa-surface-alt: #f3f4f6; /* badges, hover fills */ --goa-border: #d1d5db; --goa-text: #111827; --goa-text-muted: #6b7280; --goa-link: #7a4a24; /* highlight-links / highlight-titles color */ --goa-guide: #8a5429; /* reading guide bar */ --goa-mask: rgba(0, 0, 0, 0.55); /* reading mask dim */ } /* -------------------------------------------------------------------------- ZOOM ROOT On a WordPress block theme the whole site is wrapped in .wp-site-blocks. Visual transforms apply to it, while the widget (appended to , outside it) stays fixed and untouched. If a client theme lacks .wp-site-blocks, add its content wrapper selector to the lists below. -------------------------------------------------------------------------- */ /* Text size */ html[data-a11y-size='1'] .wp-site-blocks { zoom: 1.1; } html[data-a11y-size='2'] .wp-site-blocks { zoom: 1.2; } html[data-a11y-size='3'] .wp-site-blocks { zoom: 1.35; } /* Spacing: letter, word, and line spacing scale together */ html[data-a11y-spacing='1'] .wp-site-blocks *:not(svg):not(path) { letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.6 !important; } html[data-a11y-spacing='2'] .wp-site-blocks *:not(svg):not(path) { letter-spacing: 0.1em !important; word-spacing: 0.2em !important; line-height: 1.9 !important; } html[data-a11y-spacing='3'] .wp-site-blocks *:not(svg):not(path) { letter-spacing: 0.16em !important; word-spacing: 0.3em !important; line-height: 2.2 !important; } /* Font */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff'); font-display: swap; } html[data-a11y-font='dyslexic'] .wp-site-blocks *:not(svg):not(path) { font-family: 'OpenDyslexic', sans-serif !important; } html[data-a11y-font='legible'] .wp-site-blocks *:not(svg):not(path) { font-family: Arial, Helvetica, sans-serif !important; } /* Contrast + Saturation compose into one filter via custom properties. The filter only attaches when data-a11y-fx='on' (set by the widget when either control is non-default) so no stacking context appears at defaults. */ html[data-a11y-contrast='high'] { --goa-f-contrast: 1.5; } html[data-a11y-contrast='inverted'] { --goa-f-invert: 1; --goa-f-hue: 180deg; } html[data-a11y-saturation='low'] { --goa-f-saturate: 0.4; } html[data-a11y-saturation='high'] { --goa-f-saturate: 1.75; } html[data-a11y-saturation='grayscale'] { --goa-f-saturate: 0; } html[data-a11y-fx='on'] .wp-site-blocks { filter: contrast(var(--goa-f-contrast, 1)) saturate(var(--goa-f-saturate, 1)) invert(var(--goa-f-invert, 0)) hue-rotate(var(--goa-f-hue, 0deg)) !important; } /* Highlight links */ html[data-a11y-links='highlight'] .wp-site-blocks a { outline: 2px solid var(--goa-link) !important; outline-offset: 2px !important; color: var(--goa-link) !important; border-radius: 2px; text-decoration: underline !important; } /* Highlight titles */ html[data-a11y-titles='highlight'] .wp-site-blocks :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid var(--goa-link) !important; outline-offset: 3px !important; border-radius: 2px; } /* Big cursor */ .goa-big-cursor, .goa-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M4 2l16 10-7 1-4 7z'/%3E%3C/svg%3E") 4 4, auto !important; } /* Pause motion: freeze animations mid-frame, kill transitions and smooth scrolling. Playing videos are paused by the widget script. */ html[data-a11y-motion='paused'] .wp-site-blocks *, html[data-a11y-motion='paused'] .wp-site-blocks *::before, html[data-a11y-motion='paused'] .wp-site-blocks *::after { animation-play-state: paused !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Hide images: media elements go invisible but keep their layout box so the page does not reflow underneath the reader. */ html[data-a11y-images='hidden'] .wp-site-blocks :is(img, picture, video, figure, [role='img']) { visibility: hidden !important; } html[data-a11y-images='hidden'] .wp-site-blocks * { background-image: none !important; } /* -------------------------------------------------------------------------- READING OVERLAYS — appended to , outside .wp-site-blocks, so site filters never affect them. Pointer events pass straight through. -------------------------------------------------------------------------- */ .goa-reading-guide { position: fixed; left: 0; width: 100%; height: 8px; border-radius: 4px; background: var(--goa-guide); opacity: 0.85; pointer-events: none; z-index: 2147482996; } .goa-reading-mask { position: fixed; left: 0; width: 100%; background: var(--goa-mask); pointer-events: none; z-index: 2147482995; } .goa-reading-mask-top { top: 0; } .goa-reading-mask-bottom { bottom: 0; top: 60%; } /* ========================================================================== WIDGET CHROME — button + panel. Namespaced .goa-* so it never inherits or collides with theme styles. Everything is self-contained (no Tailwind). ========================================================================== */ .goa-root, .goa-root * { box-sizing: border-box; } .goa-root { position: fixed; bottom: 1.5rem; right: 0; z-index: 2147483000; /* above cookie bars, sticky headers, etc. */ display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .goa-toggle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 12px 0 0 12px; background: var(--goa-accent); color: var(--goa-accent-contrast); box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.25); cursor: pointer; transition: filter 0.15s ease; } .goa-toggle:hover { filter: brightness(1.1); } .goa-toggle:focus-visible { outline: 3px solid var(--goa-text); outline-offset: 2px; } .goa-panel { margin-right: 3.5rem; width: 400px; max-width: calc(100vw - 1.5rem); max-height: min(680px, calc(100svh - 120px)); display: flex; flex-direction: column; overflow: hidden; background: var(--goa-surface); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 12px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28); } .goa-panel[hidden] { display: none; } /* Small screens: the side tab column is too expensive, tuck the panel in */ @media (max-width: 480px) { .goa-panel { margin-right: 0.75rem; } } .goa-panel-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; background: var(--goa-accent); color: var(--goa-accent-contrast); } .goa-panel-head .goa-head-icon { display: flex; } .goa-panel-head h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 700; color: inherit; } .goa-reset { border: 0; background: none; padding: 0.35rem 0.5rem; font-size: 0.85rem; font-weight: 600; color: inherit; cursor: pointer; border-radius: 6px; } .goa-reset:hover { background: rgba(255, 255, 255, 0.15); } .goa-close { border: 0; background: none; padding: 0.45rem; color: inherit; cursor: pointer; border-radius: 6px; display: flex; } .goa-close:hover { background: rgba(255, 255, 255, 0.15); } .goa-body { padding: 0.75rem 1.1rem 1rem; overflow-y: auto; flex: 1; } .goa-section { margin: 0.9rem 0 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--goa-text-muted); } .goa-section:first-child { margin-top: 0.35rem; } .goa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .goa-pill { min-height: 44px; padding: 0.6rem 0.75rem; border: 1px solid var(--goa-border); border-radius: 8px; background: var(--goa-surface); color: var(--goa-text); font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; overflow-wrap: break-word; transition: border-color 0.15s ease, background 0.15s ease; } .goa-pill:hover { border-color: var(--goa-accent); } .goa-pill[aria-pressed='true'] { background: var(--goa-accent); border-color: var(--goa-accent); color: var(--goa-accent-contrast); } .goa-adjust-list { display: flex; flex-direction: column; gap: 0.5rem; } .goa-adjust { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 48px; padding: 0.65rem 1rem; border: 1px solid var(--goa-border); border-radius: 8px; background: var(--goa-surface); cursor: pointer; transition: border-color 0.15s ease; } .goa-adjust:hover { border-color: var(--goa-accent); } .goa-adjust-label { font-size: 0.95rem; font-weight: 500; color: var(--goa-text); } .goa-badge { flex-shrink: 0; padding: 0.25rem 0.7rem; border-radius: 6px; background: var(--goa-surface-alt); font-size: 0.8rem; font-weight: 600; color: var(--goa-text); white-space: nowrap; } .goa-adjust-active .goa-badge { background: var(--goa-accent); color: var(--goa-accent-contrast); } .goa-foot { padding: 0.7rem 1.1rem 0.9rem; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; } .goa-disclaimer { margin: 0; font-size: 0.75rem; color: var(--goa-text-muted); } .goa-promo { display: inline-block; margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--goa-link); text-decoration: none; } .goa-promo:hover { text-decoration: underline; } .goa-pill:focus-visible, .goa-adjust:focus-visible, .goa-reset:focus-visible, .goa-close:focus-visible, .goa-promo:focus-visible { outline: 2px solid var(--goa-text); outline-offset: 2px; }