/* ============================================================ SwasthPath — Accessibility Widget Styles ============================================================ */ /* Floating button */ #a11y-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 9998; width: 56px; height: 56px; border-radius: 50%; background: #2563eb; color: #fff; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 26px; line-height: 1; transition: transform .2s; } #a11y-toggle:hover, #a11y-toggle:focus { transform: scale(1.08); outline: 3px solid #fbbf24; outline-offset: 2px; } /* Panel */ #a11y-panel { position: fixed; bottom: 90px; left: 20px; z-index: 9999; width: 300px; max-width: calc(100vw - 40px); background: #fff; color: #111; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 18px; font-family: system-ui, -apple-system, sans-serif; display: none; } #a11y-panel.open { display: block; } #a11y-panel h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; } #a11y-panel .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; } #a11y-panel .a11y-row:last-child { border-bottom: none; } #a11y-panel button.a11y-btn { background: #f3f4f6; border: 2px solid transparent; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; font-weight: 600; } #a11y-panel button.a11y-btn.active { background: #2563eb; color: #fff; border-color: #1d4ed8; } #a11y-panel button.a11y-btn:focus { outline: 3px solid #fbbf24; outline-offset: 2px; } #a11y-reset { width: 100%; margin-top: 10px; padding: 10px; background: #ef4444; color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; } /* === Modes applied to === */ /* Larger text */ html.a11y-text-lg { font-size: 112.5%; } html.a11y-text-xl { font-size: 125%; } html.a11y-text-xxl { font-size: 140%; } /* High contrast */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #ffeb3b !important; } html.a11y-contrast button, html.a11y-contrast .btn { background: #ffeb3b !important; color: #000 !important; border: 2px solid #fff !important; } html.a11y-contrast img { filter: grayscale(.2) contrast(1.2); } /* Color-blind safe (replaces red/green ambiguity with blue/orange) */ html.a11y-cb { filter: url(#a11y-cb-filter); } /* Dyslexia-friendly font */ html.a11y-dyslexia, html.a11y-dyslexia * { font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif !important; letter-spacing: .04em !important; word-spacing: .12em !important; line-height: 1.7 !important; } /* Reduce motion */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } } /* Focus visible — global */ :focus-visible { outline: 3px solid #2563eb !important; outline-offset: 2px !important; border-radius: 4px; } html.a11y-contrast :focus-visible { outline-color: #fbbf24 !important; } /* Skip link (for keyboard users) */ .a11y-skip { position: absolute; top: -40px; left: 8px; z-index: 10000; background: #2563eb; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none; } .a11y-skip:focus { top: 0; } /* Search highlight */ mark { background: #fef08a; padding: 0 2px; border-radius: 2px; } html.a11y-contrast mark { background: #fbbf24; color: #000; }