/* === Accessibility Widget CSS === */ /* Floating toggle button */ .a11y-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .a11y-toggle { width: 52px; height: 52px; border-radius: 50%; background: #1F3A2E; /* forest */ color: #fff; border: 3px solid #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background-color 0.2s ease; } .a11y-toggle:hover { transform: scale(1.08); } .a11y-toggle:focus-visible { outline: 3px solid #ffd44d; outline-offset: 4px; } .a11y-toggle svg { width: 28px; height: 28px; fill: currentColor; } /* Panel */ .a11y-panel { position: absolute; bottom: 64px; right: 0; width: 320px; max-width: 90vw; background: #fff; color: #1a1a1a; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.1); padding: 0; overflow: hidden; } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #1F3A2E; /* forest */ color: #fff; } .a11y-panel__head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; } .a11y-close { background: transparent; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; } .a11y-close:hover { background: rgba(255,255,255,0.1); } .a11y-close:focus-visible { outline: 2px solid #ffd44d; outline-offset: 2px; } .a11y-panel__body { padding: 16px 20px 18px; } .a11y-group { border: 0; padding: 0; margin: 0 0 14px; } .a11y-group legend { font-size: 0.8125rem; font-weight: 600; color: #666; margin: 0 0 8px; padding: 0; } .a11y-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .a11y-size-btn { background: #f3f3f3; border: 1px solid #ddd; border-radius: 6px; padding: 8px 0; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: #1a1a1a; transition: all 0.15s ease; } .a11y-size-btn:hover { background: #e8e8e8; } .a11y-size-btn:focus-visible { outline: 2px solid #1F3A2E; outline-offset: 2px; } .a11y-size-btn.is-active { background: #1F3A2E; /* forest */ color: #fff; border-color: #1F3A2E; } .a11y-size-btn:nth-child(2) { font-size: 1rem; } .a11y-size-btn:nth-child(3) { font-size: 1.05rem; } .a11y-size-btn:nth-child(4) { font-size: 1.1rem; } .a11y-toggle-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; font-size: 0.9rem; } .a11y-toggle-row input { width: 18px; height: 18px; cursor: pointer; } .a11y-reset { width: 100%; margin-top: 10px; padding: 10px 16px; background: transparent; border: 1px solid #ccc; border-radius: 6px; font-size: 0.875rem; cursor: pointer; color: #444; font-weight: 500; } .a11y-reset:hover { background: #f3f3f3; color: #1a1a1a; } .a11y-reset:focus-visible { outline: 2px solid #1F3A2E; outline-offset: 2px; } .a11y-panel__footer { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #eee; font-size: 0.8125rem; text-align: center; } .a11y-panel__footer a { color: #1F3A2E; text-decoration: underline; } /* === Preferences applied to === */ html.a11y-text-smaller { font-size: 88%; } html.a11y-text-larger { font-size: 112%; } html.a11y-text-xlarge { font-size: 125%; } html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast * { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #ffd44d !important; } html.a11y-contrast .btn, html.a11y-contrast button { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; } html.a11y-contrast img:not(.brand__logo):not(.footer-shak img) { filter: grayscale(100%) contrast(1.2); } html.a11y-underline a { text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-dyslexia, html.a11y-dyslexia body { font-family: "Atkinson Hyperlegible", Verdana, Geneva, Tahoma, sans-serif !important; letter-spacing: 0.01em; line-height: 1.6; } /* Mobile: smaller widget */ @media (max-width: 480px) { .a11y-widget { bottom: 14px; right: 14px; } .a11y-toggle { width: 46px; height: 46px; } .a11y-panel { width: calc(100vw - 28px); right: 0; bottom: 56px; } }