/* * Accessibility toolbar (text size + high contrast) for quiz-taking * pages only - see templates/accessibility_toolbar_macro.pt for the * exact list of pages this is included on. * * TEXT SIZE MECHANISM: sets a CSS custom property, --gms-a11y-scale, * on (see accessibility_toolbar.js). Nothing here forces every * page's font-size rules to be rewritten in terms of that variable -- * instead we scale the whole page via a CSS zoom-equivalent transform * on the page's own root content wrapper, which works regardless of * how any individual page happens to size its text (rem, px, %, ...). * See accessibility_toolbar.js for exactly which element gets scaled. * * CONTRAST MECHANISM: a `gms-high-contrast` class toggled on ; * the rules below apply a strong, WCAG-AAA-friendly palette (see * gms-high-contrast rules at the bottom) as an override layer, not a * full theme rewrite - it forces background/text/link/border colors * high enough in contrast to read easily, without needing to know * every page's existing color choices in advance. */ #gms-a11y-toolbar { position: fixed; bottom: 20px; right: 20px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .gms-a11y-fab { width: 52px; height: 52px; border-radius: 50%; border: none; background: #1a6eb5; color: #fff; box-shadow: 0 4px 14px rgba(26, 110, 181, 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .gms-a11y-fab .material-symbols-outlined { font-size: 28px; } .gms-a11y-fab:hover, .gms-a11y-fab:focus-visible { background: #145a94; transform: scale(1.06); box-shadow: 0 6px 18px rgba(26, 110, 181, 0.5); outline: none; } .gms-a11y-fab:active { transform: scale(0.96); } .gms-a11y-fab[aria-expanded="true"] { background: #145a94; } .gms-a11y-panel { position: absolute; bottom: 62px; right: 0; width: 240px; background: #ffffff; border-radius: 12px; box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18); padding: 14px 16px 16px; border: 1px solid #e5e8ed; animation: gms-a11y-panel-in 0.15s ease; } @keyframes gms-a11y-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .gms-a11y-panel { animation: none; } .gms-a11y-fab { transition: none; } } .gms-a11y-panel-title { font-size: 13px; font-weight: 700; color: #1a2a4a; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; } .gms-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f3f6; } .gms-a11y-row:first-of-type { border-top: none; } .gms-a11y-label { font-size: 13.5px; font-weight: 600; color: #333; } .gms-a11y-btn-group { display: flex; border: 1px solid #dde2e8; border-radius: 8px; overflow: hidden; } .gms-a11y-btn-group button { width: 32px; height: 32px; border: none; background: #f7f8fa; color: #333; font-size: 14px; font-weight: 700; cursor: pointer; border-right: 1px solid #dde2e8; transition: background-color 0.12s ease, color 0.12s ease; } .gms-a11y-btn-group button:last-child { border-right: none; } .gms-a11y-btn-group button:hover, .gms-a11y-btn-group button:focus-visible { background: #e3edf9; color: #1a6eb5; outline: none; } #gms-a11y-font-reset { font-size: 12px; } .gms-a11y-toggle-btn { border: 1px solid #dde2e8; border-radius: 8px; background: #f7f8fa; color: #333; font-size: 12.5px; font-weight: 600; padding: 6px 10px; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; white-space: nowrap; } .gms-a11y-toggle-btn:hover, .gms-a11y-toggle-btn:focus-visible { background: #e3edf9; color: #1a6eb5; outline: none; } .gms-a11y-toggle-btn[aria-pressed="true"] { background: #1a6eb5; color: #fff; border-color: #1a6eb5; } @media (max-width: 480px) { #gms-a11y-toolbar { bottom: 12px; right: 12px; } .gms-a11y-panel { width: calc(100vw - 48px); max-width: 260px; } } /* ── High contrast mode ─────────────────────────────────────────── */ /* Toggled by adding "gms-high-contrast" to (see accessibility_toolbar.js). A deliberately strong, simple override: black-on-white body text/backgrounds and clearly-underlined, high- contrast links, satisfying WCAG 1.4.6 (7:1) for body text rather than only scraping past the AA 4.5:1 minimum - someone turning this on wants a genuinely high-contrast experience, not a marginal one. */ html.gms-high-contrast body, html.gms-high-contrast #content, html.gms-high-contrast .styled-form, html.gms-high-contrast .q-card, html.gms-high-contrast .questionStyle { background-color: #ffffff !important; color: #000000 !important; } html.gms-high-contrast a { color: #0000ee !important; text-decoration: underline !important; } html.gms-high-contrast a:visited { color: #551a8b !important; } html.gms-high-contrast button, html.gms-high-contrast input, html.gms-high-contrast select, html.gms-high-contrast textarea { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } html.gms-high-contrast .question-speaker, html.gms-high-contrast .gms-a11y-fab { background-color: #000000 !important; color: #ffffff !important; } html.gms-high-contrast *:focus-visible { outline: 3px solid #000000 !important; outline-offset: 2px !important; }