/* ========================================================= accessibility.css Accessibility Widget styles. All selectors are namespaced (#a11y-* / .a11y-*) so they never clash with the host site's existing CSS. ========================================================= */ /* floating open button */ #a11y-btn{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:#0f3460;color:#fff;border:none;cursor:pointer;z-index:99998;box-shadow:0 4px 14px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:0} #a11y-btn svg{width:30px;height:30px;fill:#fff} #a11y-btn:focus{outline:3px solid #ffcc00;outline-offset:2px} /* overlay + side panel */ #a11y-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99998;display:none} #a11y-overlay.open{display:block} #a11y-panel{position:fixed;top:0;right:-360px;width:330px;height:100%;background:#fff;color:#1a1a1a;z-index:99999;box-shadow:-4px 0 24px rgba(0,0,0,.25);font-family:Arial,Helvetica,sans-serif;transition:right .28s ease;overflow-y:auto;box-sizing:border-box} #a11y-panel *{box-sizing:border-box} #a11y-panel.open{right:0} /* panel header */ #a11y-panel .a11y-head{background:#0f3460;color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;gap:10px} #a11y-panel .a11y-head .a11y-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:bold} #a11y-panel .a11y-head .a11y-title svg{width:24px;height:24px;fill:#fff} #a11y-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1} #a11y-close:hover{background:rgba(255,255,255,.3)} /* panel body */ #a11y-panel .a11y-body{padding:14px 18px 30px} #a11y-panel .a11y-fontbtns{display:flex;gap:8px;margin-bottom:14px} #a11y-panel .a11y-fontbtns button{flex:1;padding:10px 0;border:1px solid #0f3460;background:#eaf0f7;color:#0f3460;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer} #a11y-panel .a11y-fontbtns button:hover{background:#0f3460;color:#fff} #a11y-panel .a11y-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eee;gap:10px} #a11y-panel .a11y-row .lbl{display:flex;align-items:center;gap:8px;font-size:14px} #a11y-panel .a11y-row .lbl .ic{width:18px;text-align:center} #a11y-panel input[type=range]{width:120px;accent-color:#e53935;cursor:pointer} /* toggle switch */ #a11y-panel .sw{position:relative;width:46px;height:24px;flex:0 0 auto} #a11y-panel .sw input{opacity:0;width:0;height:0;position:absolute} #a11y-panel .sw label{position:absolute;inset:0;background:#c8ccd0;border-radius:24px;cursor:pointer;transition:.2s} #a11y-panel .sw label:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s} #a11y-panel .sw input:checked + label{background:#0b6e4f} #a11y-panel .sw input:checked + label:before{transform:translateX(22px)} #a11y-reset{margin-top:18px;width:100%;padding:11px;border:none;border-radius:8px;background:#0f3460;color:#fff;font-size:14px;font-weight:bold;cursor:pointer} #a11y-reset:hover{background:#b00020} /* effect classes - applied to only when a user turns an option ON */ html.a11y-contrast{filter:contrast(1.3)} html.a11y-contrast body{background:#000!important;color:#fff!important} html.a11y-contrast a{color:#ffea00!important} html.a11y-gray{filter:grayscale(1)} html.a11y-gray.a11y-contrast{filter:grayscale(1) contrast(1.3)} html.a11y-dyslexia body,html.a11y-dyslexia body *{font-family:"Comic Sans MS","Trebuchet MS",Verdana,sans-serif!important} html.a11y-focus a:hover,html.a11y-focus a:focus,html.a11y-focus button:focus{outline:3px solid #ffcc00!important;outline-offset:2px} html.a11y-hideimg img{display:none!important}