/* SABER+ — Estilos de acessibilidade (aplicados via classe no ) */ /* Foco visível em qualquer elemento interativo */ :focus-visible { outline: 3px solid #ffcc00 !important; outline-offset: 3px !important; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 14px; z-index: 10000; text-decoration: none; } .skip-link:focus { top: 0; } /* =========== ALTO CONTRASTE =========== */ html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast .card, html.a11y-contrast .host-pin, html.a11y-contrast .pergunta, html.a11y-contrast .q-card, html.a11y-contrast .stat-card, html.a11y-contrast .quiz-card, html.a11y-contrast .ranking, html.a11y-contrast .stat-bar { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.a11y-contrast .ipt, html.a11y-contrast .sel, html.a11y-contrast .txt, html.a11y-contrast select, html.a11y-contrast input, html.a11y-contrast textarea { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.a11y-contrast .btn { background: #ffcc00 !important; color: #000 !important; border: 2px solid #fff !important; } html.a11y-contrast .btn-sec { background: #000 !important; color: #ffcc00 !important; border: 2px solid #ffcc00 !important; } html.a11y-contrast .btn-dng { background: #ff4444 !important; color: #000 !important; } html.a11y-contrast a, html.a11y-contrast .link { color: #ffcc00 !important; } html.a11y-contrast .lbl, html.a11y-contrast .lbl2, html.a11y-contrast .meta { color: #fff !important; } html.a11y-contrast .alt-btn.a0, html.a11y-contrast .alt-btn.a1, html.a11y-contrast .alt-btn.a2, html.a11y-contrast .alt-btn.a3 { background: #000 !important; color: #fff !important; border: 3px solid #fff !important; } /* =========== FONTE GRANDE =========== */ html.a11y-big { font-size: 120% !important; } html.a11y-bigger { font-size: 145% !important; } /* =========== OPENDYSLEXIC =========== */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/otf/OpenDyslexic-Regular.otf') format('opentype'); font-display: swap; } html.a11y-dyslexic body, html.a11y-dyslexic .ipt, html.a11y-dyslexic .sel, html.a11y-dyslexic .txt, html.a11y-dyslexic .pergunta, html.a11y-dyslexic .alt-btn, html.a11y-dyslexic input, html.a11y-dyslexic textarea, html.a11y-dyslexic select { font-family: 'OpenDyslexic', -apple-system, sans-serif !important; letter-spacing: 0.03em; line-height: 1.7; } /* =========== MODO SEM COR (daltonismo) =========== */ html.a11y-nocolor .alt-btn { background: #4a5568 !important; } html.a11y-nocolor .alt-btn .shape { font-size: 28px !important; } html.a11y-nocolor .alt-btn.a0 { border-left: 10px solid #fff !important; } html.a11y-nocolor .alt-btn.a1 { border-left: 10px dashed #fff !important; } html.a11y-nocolor .alt-btn.a2 { border-left: 10px dotted #fff !important; } html.a11y-nocolor .alt-btn.a3 { border-left: 10px double #fff !important; } /* =========== REDUZIR MOVIMENTO =========== */ html.a11y-reducemotion *, html.a11y-reducemotion *::before, html.a11y-reducemotion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* =========== FLASH (alunos surdos) =========== */ @keyframes ifquiz-flash-green { 0%,100%{background:inherit} 50%{background:#16a34a} } @keyframes ifquiz-flash-red { 0%,100%{background:inherit} 50%{background:#dc2626} } body.ifquiz-flash-correct { animation: ifquiz-flash-green .5s ease 2; } body.ifquiz-flash-wrong { animation: ifquiz-flash-red .5s ease 2; } /* =========== PAINEL DE ACESSIBILIDADE =========== */ .a11y-fab { position: fixed; bottom: 20px; right: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 50%; background: #7c3aed; color: white; font-size: 24px; border: 3px solid white; box-shadow: 0 4px 16px rgba(0,0,0,.3); cursor: pointer; display: flex; align-items: center; justify-content: center; } .a11y-fab:hover { background: #6d28d9; transform: scale(1.05); } .a11y-panel { position: fixed; bottom: 82px; right: 20px; z-index: 9999; background: white; color: #111; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 18px; min-width: 280px; max-width: 95vw; display: none; } .a11y-panel.open { display: block; } .a11y-panel h4 { margin: 0 0 12px; font-size: 16px; color: #7c3aed; } .a11y-panel .a11y-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; } .a11y-panel .a11y-row:last-child { border-bottom: none; } .a11y-panel button.a11y-btn { padding: 6px 12px; border: 1px solid #7c3aed; background: white; color: #7c3aed; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; min-width: 60px; } .a11y-panel button.a11y-btn.on { background: #7c3aed; color: white; } /* Lightbox para zoom de imagens */ .img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 9997; display: none; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; } .img-lightbox.open { display: flex; } .img-lightbox img { max-width: 95%; max-height: 95%; border-radius: 8px; } img[data-zoomable] { cursor: zoom-in; }