/* === Sunnyaid Accessibility Widget === */ #saw-root { position: fixed; bottom: 24px; right: 24px; z-index: 999999; font-family: 'Atkinson Hyperlegible Next', -apple-system, sans-serif; } #saw-toggle { width: 56px; height: 56px; border-radius: 50%; background: #1F4D3D; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(31,77,61,0.35); transition: transform 0.2s, box-shadow 0.2s; } #saw-toggle:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(31,77,61,0.42); } #saw-toggle:focus-visible { outline: 3px solid #E8714A; outline-offset: 3px; } #saw-panel { position: absolute; bottom: 68px; right: 0; width: 300px; max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 16px 48px -8px rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.06); } #saw-panel[hidden] { display: none; } #saw-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: #1F4D3D; color: #fff; border-radius: 18px 18px 0 0; font-weight: 700; font-size: 15px; } #saw-close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; } #saw-close:hover { background: rgba(255,255,255,0.25); } #saw-panel-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; } .saw-group { display: flex; flex-direction: column; gap: 8px; } .saw-group-label { font-size: 12px; font-weight: 600; color: #3D3530; } .saw-row { display: flex; gap: 6px; } .saw-btn { flex: 1; padding: 8px 6px; border: 1.5px solid #E0DAD0; border-radius: 10px; background: #fff; font-weight: 700; font-size: 13px; color: #1F4D3D; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .saw-btn:hover { border-color: #1F4D3D; background: #F3E0C7; } .saw-toggle-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid #E0DAD0; border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 600; color: #3D3530; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; } .saw-toggle-btn:hover { border-color: #1F4D3D; } .saw-toggle-btn.active { background: #1F4D3D; border-color: #1F4D3D; color: #fff; } .saw-toggle-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } #saw-reset-all { margin-top: 4px; padding: 10px; border: none; border-radius: 10px; background: #FBF6EE; color: #6B6056; font-size: 13px; font-weight: 600; cursor: pointer; } #saw-reset-all:hover { background: #F3E0C7; } /* === Applied states (added to ) === */ html.saw-high-contrast { filter: contrast(1.25) saturate(1.1); } html.saw-high-contrast body { background: #fff !important; color: #000 !important; } html.saw-dyslexia-font body, html.saw-dyslexia-font * { font-family: 'Comic Sans MS', 'Comic Sans', 'Atkinson Hyperlegible Next', sans-serif !important; letter-spacing: 0.02em !important; } html.saw-reduce-motion *, html.saw-reduce-motion *::before, html.saw-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.saw-underline-links a { text-decoration: underline !important; } html.saw-big-cursor, html.saw-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l18 9-7 2-2 7-9-18z' fill='%231F4D3D' stroke='white' stroke-width='1'/%3E%3C/svg%3E") 0 0, auto !important; } html[data-saw-text-scale] body { font-size: calc(1rem * var(--saw-text-scale, 1)) !important; } html[data-saw-line-spacing] body, html[data-saw-line-spacing] p, html[data-saw-line-spacing] li { line-height: var(--saw-line-spacing, 1.65) !important; } @media (max-width: 480px) { #saw-root { bottom: 16px; right: 16px; } #saw-panel { width: calc(100vw - 32px); right: -8px; } }