/* ===================================================================== FiveStar Accessibility Helper — Front-end styles Toolbar UI + the state classes toggled on by frontend.js ===================================================================== */ /* -------------------- Trigger button -------------------- */ #fsa-toggle-btn { position: fixed; z-index: 999999; width: 56px; height: 56px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); background: var(--fsa-bg-color, #ffffff); color: var(--fsa-icon-color, #1a3c6e); transition: transform 0.15s ease; } #fsa-toggle-btn:hover, #fsa-toggle-btn:focus { transform: scale(1.06); } #fsa-toggle-btn:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; } #fsa-toggle-btn svg { width: 30px; height: 30px; fill: currentColor; } /* Positioning variants */ .fsa-pos-bottom-right #fsa-toggle-btn { right: 20px; bottom: 20px; } .fsa-pos-bottom-left #fsa-toggle-btn { left: 20px; bottom: 20px; } .fsa-pos-top-right #fsa-toggle-btn { right: 20px; top: 20px; } .fsa-pos-top-left #fsa-toggle-btn { left: 20px; top: 20px; } .fsa-pos-bottom-right #fsa-panel { right: 20px; bottom: 86px; } .fsa-pos-bottom-left #fsa-panel { left: 20px; bottom: 86px; } .fsa-pos-top-right #fsa-panel { right: 20px; top: 86px; } .fsa-pos-top-left #fsa-panel { left: 20px; top: 86px; } /* -------------------- Panel -------------------- */ #fsa-panel { position: fixed; z-index: 999999; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow-y: auto; background: #ffffff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); padding: 16px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.4; display: none; } #fsa-panel.fsa-open { display: block; } #fsa-panel * { box-sizing: border-box; } .fsa-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e2e2; } .fsa-panel-header h2 { font-size: 17px; margin: 0; font-weight: 700; color: #1a1a1a; } #fsa-close-btn { background: transparent; border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #444; } #fsa-close-btn:hover, #fsa-close-btn:focus { background: #f0f0f0; } #fsa-close-btn:focus-visible { outline: 2px solid #1a73e8; } #fsa-close-btn svg { width: 18px; height: 18px; fill: currentColor; } /* -------------------- Generic control row -------------------- */ .fsa-control-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #f0f0f0; } .fsa-control-row:last-child { border-bottom: none; } .fsa-control-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #1a1a1a; } .fsa-control-label svg { width: 18px; height: 18px; flex-shrink: 0; fill: #1a3c6e; } /* Font size stepper */ .fsa-font-stepper { display: flex; align-items: center; gap: 6px; } .fsa-step-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #c9c9c9; background: #fafafa; font-size: 14px; font-weight: 700; cursor: pointer; color: #1a1a1a; } .fsa-step-btn:hover { background: #eef2fb; } .fsa-step-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; } .fsa-font-value { min-width: 34px; text-align: center; font-size: 13px; color: #555; } /* Toggle switch */ .fsa-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .fsa-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .fsa-switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: #c9c9c9; border-radius: 24px; transition: background-color 0.15s ease; } .fsa-switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #ffffff; border-radius: 50%; transition: transform 0.15s ease; } .fsa-switch input:checked + .fsa-switch-slider { background-color: #1a3c6e; } .fsa-switch input:checked + .fsa-switch-slider::before { transform: translateX(18px); } .fsa-switch input:focus-visible + .fsa-switch-slider { outline: 2px solid #1a73e8; outline-offset: 2px; } /* Read Page Aloud row — stacked layout (label row + voice/media controls) */ .fsa-control-row--stacked { flex-direction: column; align-items: stretch; gap: 10px; } .fsa-read-aloud-controls { display: flex; flex-direction: column; gap: 8px; } .fsa-read-aloud-hint { margin: 0; font-size: 12px; color: #666; line-height: 1.4; } .fsa-voice-select { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid #c9c9c9; background: #fafafa; color: #1a1a1a; font-size: 13px; } .fsa-voice-select:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; } .fsa-media-btns { display: flex; gap: 8px; } .fsa-media-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 6px; border: 1px solid #c9c9c9; background: #fafafa; color: #1a1a1a; cursor: pointer; font-size: 12px; font-weight: 600; } .fsa-media-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .fsa-media-btn:hover { background: #eef2fb; } .fsa-media-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; } .fsa-media-btn[aria-pressed="true"] { background: #1a3c6e; color: #ffffff; border-color: #1a3c6e; } .fsa-media-btn:disabled { opacity: 0.5; cursor: not-allowed; } .fsa-read-aloud-unsupported { margin: 0; font-size: 12px; color: #777; } /* Reset button */ #fsa-reset-btn { width: 100%; margin-top: 14px; padding: 10px; border-radius: 8px; border: 1px solid #1a3c6e; background: #ffffff; color: #1a3c6e; font-weight: 700; font-size: 14px; cursor: pointer; } #fsa-reset-btn:hover { background: #eef2fb; } #fsa-reset-btn:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; } /* Statement link */ .fsa-statement-link { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #1a3c6e; text-decoration: underline; } /* Visually-hidden helper for SR-only text */ .fsa-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; } /* ===================================================================== STATE CLASSES — toggled on . Written to affect the whole site without depending on theme markup. ===================================================================== */ /* ---- Font size scaling ---- */ html.fsa-font-1 { font-size: 100% !important; } html.fsa-font-2 { font-size: 112% !important; } html.fsa-font-3 { font-size: 125% !important; } html.fsa-font-4 { font-size: 138% !important; } html.fsa-font-5 { font-size: 150% !important; } /* ---- High contrast mode ---- Strong, predictable palette: yellow text on black for body copy, keeps the toolbar panel itself legible too. */ html.fsa-contrast body, html.fsa-contrast body * { background-color: #000000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } html.fsa-contrast a, html.fsa-contrast a * { color: #00ffff !important; } html.fsa-contrast img, html.fsa-contrast svg, html.fsa-contrast video, html.fsa-contrast iframe { filter: grayscale(100%) contrast(120%); } /* Keep our own panel readable & on-brand even in high-contrast mode */ html.fsa-contrast #fsa-panel, html.fsa-contrast #fsa-panel * { background-color: #ffffff !important; color: #1a1a1a !important; } html.fsa-contrast #fsa-panel .fsa-switch-slider { background-color: #c9c9c9 !important; } html.fsa-contrast #fsa-panel input:checked + .fsa-switch-slider { background-color: #1a3c6e !important; } /* ---- Invert colours ---- */ html.fsa-invert { filter: invert(100%) hue-rotate(180deg); } /* Re-invert media so photos/video don't look like negatives, and re-invert our own toolbar so it stays readable */ html.fsa-invert img, html.fsa-invert video, html.fsa-invert iframe, html.fsa-invert #fsa-root { filter: invert(100%) hue-rotate(180deg); } /* ---- Grayscale ---- */ html.fsa-grayscale { filter: grayscale(100%); } html.fsa-grayscale.fsa-invert { filter: invert(100%) hue-rotate(180deg) grayscale(100%); } html.fsa-grayscale.fsa-invert img, html.fsa-grayscale.fsa-invert video, html.fsa-grayscale.fsa-invert iframe, html.fsa-grayscale.fsa-invert #fsa-root { filter: invert(100%) hue-rotate(180deg) grayscale(0%); } /* ---- Readable font ---- Swaps body copy to a simple, well-spaced sans-serif and loosens tracking — helps users with dyslexia/low vision (WCAG 2.1 SC 1.4.8 style guidance). */ html.fsa-readable-font body, html.fsa-readable-font p, html.fsa-readable-font li, html.fsa-readable-font span, html.fsa-readable-font div, html.fsa-readable-font h1, html.fsa-readable-font h2, html.fsa-readable-font h3, html.fsa-readable-font h4, html.fsa-readable-font h5, html.fsa-readable-font h6, html.fsa-readable-font a, html.fsa-readable-font button, html.fsa-readable-font label, html.fsa-readable-font input, html.fsa-readable-font textarea { font-family: Arial, "Segoe UI", Verdana, sans-serif !important; letter-spacing: 0.4px !important; word-spacing: 1px !important; line-height: 1.6 !important; } /* ---- Underline links (WCAG 2.1 SC 1.4.1 — don't rely on colour alone) ---- */ html.fsa-underline-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; } /* ---- Pause animations (WCAG 2.1 SC 2.2.2) ---- */ html.fsa-pause-animations *, html.fsa-pause-animations *::before, html.fsa-pause-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* ---- Big cursor ---- */ html.fsa-big-cursor, html.fsa-big-cursor * { cursor: url('../icons/cursor-big.svg') 4 4, auto !important; } html.fsa-big-cursor a, html.fsa-big-cursor button, html.fsa-big-cursor [role="button"], html.fsa-big-cursor input, html.fsa-big-cursor select, html.fsa-big-cursor textarea { cursor: url('../icons/cursor-pointer-big.svg') 4 4, pointer !important; } /* Reduced motion respect: if a user already asked the OS for less motion, don't fight them even before they touch our toggle. */ @media (prefers-reduced-motion: reduce) { html body * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (max-width: 480px) { #fsa-panel { width: calc(100vw - 24px); } }