/* Accessibility Widget */ .a11y-toggle { position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:99999; width:52px; height:52px; border-radius:50%; background:#1565e8; border:3px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,.25); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:box-shadow .2s; } .a11y-toggle:hover { box-shadow:0 4px 20px rgba(0,0,0,.35); } .a11y-toggle svg { width:28px; height:28px; fill:#fff; } .a11y-panel { position:fixed; top:50%; right:66px; transform:translateY(-50%); z-index:99998; width:380px; max-width:calc(100vw - 32px); background:#fff; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.18); padding:0; display:none; animation:a11yFadeIn .2s ease; } .a11y-panel.open { display:block; } @keyframes a11yFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } .a11y-panel-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 12px; border-bottom:1px solid #eee; } .a11y-panel-header h3 { margin:0; font-size:1.1rem; font-weight:700; color:#222; } .a11y-panel-close { background:none; border:none; font-size:1.4rem; color:#999; cursor:pointer; padding:0; line-height:1; } .a11y-panel-close:hover { color:#333; } .a11y-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:18px 22px; } .a11y-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#f4f7fd; border:2px solid transparent; border-radius:12px; padding:18px 10px; cursor:pointer; transition:border-color .15s, background .15s; text-align:center; } .a11y-option:hover { background:#e8eefb; } .a11y-option.active { border-color:#1565e8; background:#e0eaff; } .a11y-option-icon { font-size:1.6rem; color:#222; line-height:1; } .a11y-option-label { font-size:.82rem; color:#444; font-weight:500; } .a11y-reset { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:14px; border:none; border-top:1px solid #eee; background:none; font-size:.88rem; color:#666; cursor:pointer; border-radius:0 0 16px 16px; transition:background .15s; } .a11y-reset:hover { background:#f5f5f5; color:#333; } /* Accessibility states applied to */ html.a11y-high-contrast { filter:contrast(1.4); } html.a11y-highlight-links a { outline:2px solid #1565e8 !important; outline-offset:2px; } html.a11y-large-font { font-size:125% !important; } html.a11y-line-spacing p, html.a11y-line-spacing li, html.a11y-line-spacing td, html.a11y-line-spacing span, html.a11y-line-spacing div { line-height:2 !important; } html.a11y-letter-spacing p, html.a11y-letter-spacing li, html.a11y-letter-spacing td, html.a11y-letter-spacing span, html.a11y-letter-spacing div, html.a11y-letter-spacing a, html.a11y-letter-spacing h1, html.a11y-letter-spacing h2, html.a11y-letter-spacing h3, html.a11y-letter-spacing h4, html.a11y-letter-spacing h5, html.a11y-letter-spacing h6 { letter-spacing:.08em !important; } html.a11y-big-cursor, html.a11y-big-cursor * { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 0l18 14h-11l6 14-4 2-6-14-3 10z' fill='%23000' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 4 0, auto !important; } @media (max-width:480px) { .a11y-panel { right:8px; width:calc(100vw - 16px); } .a11y-toggle { width:46px; height:46px; } }