/* Widget de Acessibilidade / Accessibility Widget — MasterStudy Brasil
Classes aplicadas em pelo accessibility.js controlam os efeitos globais. */
/* ---------- Botão flutuante ---------- */
.a11y-toggle {
position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 400;
width: 54px; height: 54px; border-radius: 50%;
background: var(--color-primary-dark); color: #fff; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px rgba(1, 55, 89, 0.4);
transition: transform .2s ease;
}
.a11y-toggle:hover { transform: scale(1.08); }
.a11y-toggle svg { width: 28px; height: 28px; }
/* ---------- Painel ---------- */
.a11y-panel {
position: fixed; left: var(--space-4); bottom: calc(var(--space-4) + 66px); z-index: 400;
width: min(360px, calc(100vw - 2 * var(--space-4)));
max-height: min(640px, calc(100vh - 140px));
overflow-y: auto;
background: #fff; color: var(--color-text);
border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.25);
display: none;
font-size: 0.92rem;
}
.a11y-panel.is-open { display: block; }
.a11y-panel__header {
position: sticky; top: 0; z-index: 1;
background: var(--color-primary-dark); color: #fff;
padding: var(--space-3) var(--space-4);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
border-radius: 18px 18px 0 0;
}
.a11y-panel__title { font-weight: 800; font-size: 1rem; margin: 0; }
.a11y-panel__lang { display: flex; gap: 4px; }
.a11y-panel__lang button {
background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3);
border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 800; cursor: pointer;
}
.a11y-panel__lang button.is-active { background: #fff; color: var(--color-primary-dark); }
.a11y-panel__close {
background: none; border: none; color: #fff; cursor: pointer; padding: 4px; line-height: 0;
}
.a11y-panel__close svg { width: 20px; height: 20px; }
.a11y-panel__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.a11y-panel__reset {
width: 100%; margin-bottom: var(--space-3);
background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 10px;
padding: var(--space-2); font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.a11y-panel__reset:hover { background: var(--color-primary-light); }
.a11y-group { margin-bottom: var(--space-4); }
.a11y-group__title {
font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--color-text-muted); margin: 0 0 var(--space-2);
}
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.a11y-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1px solid var(--color-border); border-radius: 12px; background: #fff;
padding: var(--space-2); cursor: pointer; text-align: center; font-size: 0.76rem; font-weight: 700;
color: var(--color-text); transition: border-color .15s ease, background-color .15s ease;
min-height: 64px;
}
.a11y-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.a11y-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.a11y-btn.is-active {
border-color: var(--color-primary); background: var(--color-primary); color: #fff;
}
.a11y-stepper { display: flex; align-items: center; gap: var(--space-2); }
.a11y-stepper button {
width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-border);
background: #fff; cursor: pointer; font-weight: 800; font-size: 1rem;
}
.a11y-stepper button:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.a11y-stepper__label { flex-grow: 1; text-align: center; font-size: 0.82rem; color: var(--color-text-muted); }
.a11y-note {
font-size: 0.72rem; color: var(--color-text-muted); margin-top: var(--space-1); line-height: 1.4;
}
/* ================= Efeitos globais aplicados via classe em ================= */
html.a11y-font-lg body { font-size: calc(var(--font-size-base) * 1.15); }
html.a11y-font-xl body { font-size: calc(var(--font-size-base) * 1.3); }
html.a11y-font-xxl body { font-size: calc(var(--font-size-base) * 1.5); }
html.a11y-spacing-lg body { letter-spacing: 0.04em; word-spacing: 0.08em; }
html.a11y-spacing-xl body { letter-spacing: 0.08em; word-spacing: 0.16em; }
html.a11y-lh-lg body { line-height: 2; }
html.a11y-lh-xl body { line-height: 2.4; }
html.a11y-hide-images img,
html.a11y-hide-images svg image,
html.a11y-hide-images .hero__photo { visibility: hidden !important; }
html.a11y-bg-dark body { background: #16181c !important; color: #f0f0f0 !important; }
html.a11y-bg-dark .site-header,
html.a11y-bg-dark .section,
html.a11y-bg-dark .track-card,
html.a11y-bg-dark .course-card,
html.a11y-bg-dark .credibility__item { background: #1f2227 !important; color: #f0f0f0 !important; }
html.a11y-bg-beige body { background: #f7f0dd !important; }
html.a11y-bg-beige .track-card,
html.a11y-bg-beige .course-card,
html.a11y-bg-beige .credibility__item { background: #fbf6e8 !important; }
html.a11y-text-black body, html.a11y-text-black body * { color: #000 !important; }
html.a11y-text-yellow body, html.a11y-text-yellow body * { color: #ffd400 !important; }
/* Aplicado no header/main/footer (não em body) para não criar um novo
containing block sobre os elementos position:fixed do próprio widget
(o botão de acessibilidade "fugia" para o fim da página com filter em body). */
html.a11y-mono .site-header, html.a11y-mono #main, html.a11y-mono .site-footer { filter: grayscale(1); }
html.a11y-low-sat .site-header, html.a11y-low-sat #main, html.a11y-low-sat .site-footer { filter: saturate(0.45); }
html.a11y-high-sat .site-header, html.a11y-high-sat #main, html.a11y-high-sat .site-footer { filter: saturate(1.8); }
html.a11y-invert .site-header, html.a11y-invert #main, html.a11y-invert .site-footer { filter: invert(1) hue-rotate(180deg); }
html.a11y-highlight-links a { outline: 2px solid var(--color-accent) !important; background: var(--color-accent-light) !important; }
html.a11y-highlight-focus a:focus,
html.a11y-highlight-focus button:focus,
html.a11y-highlight-focus input:focus,
html.a11y-highlight-focus textarea:focus,
html.a11y-highlight-focus select:focus,
html.a11y-highlight-focus [tabindex]:focus {
outline: 3px solid #ff9800 !important; outline-offset: 3px !important;
box-shadow: 0 0 0 6px rgba(255, 152, 0, 0.25) !important;
}
@keyframes a11y-focus-demo {
0%, 100% { outline-color: transparent; }
50% { outline-color: #ff9800; }
}
.a11y-focus-demo-ping {
outline: 4px solid #ff9800 !important; outline-offset: 4px !important;
animation: a11y-focus-demo 0.6s ease-in-out 2;
}
html.a11y-dyslexia body, html.a11y-dyslexia body * { font-family: 'OpenDyslexic', var(--font-base) !important; }
html.a11y-pause-animations *, html.a11y-pause-animations *::before, html.a11y-pause-animations *::after {
animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-big-cursor, html.a11y-big-cursor * {
cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important;
}
html.a11y-big-cursor-dark, html.a11y-big-cursor-dark * {
cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important;
}
/* Modo leitura: mantém todo o texto visível, remove ruído visual (fotos, cards
decorativos, gradientes, sticky bars) e amplia a legibilidade do corpo do texto. */
html.a11y-reading-mode body { background: #fdfdfb !important; }
html.a11y-reading-mode .hero__visual,
html.a11y-reading-mode .hero::before,
html.a11y-reading-mode .credibility,
html.a11y-reading-mode .whatsapp-float,
html.a11y-reading-mode .track-jump,
html.a11y-reading-mode .section--alt::before { display: none !important; }
html.a11y-reading-mode .section--alt { background: #fdfdfb !important; }
html.a11y-reading-mode #main {
max-width: 760px; margin: 0 auto; float: none;
}
html.a11y-reading-mode #main p,
html.a11y-reading-mode #main li { font-size: 1.15rem; line-height: 1.9; color: #1a1a1a !important; }
html.a11y-reading-mode #main .track-card,
html.a11y-reading-mode #main .course-card {
box-shadow: none !important; border: 1px solid var(--color-border) !important;
background: #fff !important; transform: none !important;
}
html.a11y-reading-mode .site-header { position: static; }
/* Barra de leitura (segue o cursor) */
#a11y-reading-bar {
position: fixed; left: 0; width: 100%; height: 36px; z-index: 350; pointer-events: none;
background: rgba(255, 235, 59, 0.35); border-top: 2px solid #ffb300; border-bottom: 2px solid #ffb300;
display: none;
}
html.a11y-reading-bar-on #a11y-reading-bar { display: block; }
/* Máscara de leitura (escurece tudo exceto uma faixa central) */
#a11y-reading-mask {
position: fixed; inset: 0; z-index: 340; pointer-events: none; display: none;
background:
linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) top / 100% var(--mask-top, 40%) no-repeat,
linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) bottom / 100% calc(100% - var(--mask-top, 40%) - 140px) no-repeat;
}
html.a11y-reading-mask-on #a11y-reading-mask { display: block; }
/* Heading bar: sumário flutuante de headings da página */
.a11y-headingbar {
position: fixed; top: 70px; right: var(--space-3); z-index: 380;
width: 260px; max-height: 70vh; overflow-y: auto;
background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
box-shadow: var(--shadow-elevated); padding: var(--space-3); display: none;
}
.a11y-headingbar.is-open { display: block; }
.a11y-headingbar h4 { margin: 0 0 var(--space-2); font-size: 0.85rem; }
.a11y-headingbar ul { list-style: none; margin: 0; padding: 0; }
.a11y-headingbar li { margin-bottom: var(--space-1); }
.a11y-headingbar a { font-size: 0.82rem; }
/* Tooltip de descrição de imagem */
.a11y-img-desc-badge {
position: absolute; background: var(--color-primary-dark); color: #fff; font-size: 0.72rem;
padding: 4px 8px; border-radius: 8px; z-index: 500; max-width: 240px; box-shadow: var(--shadow-elevated);
}
.a11y-toast {
position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px);
background: var(--color-primary-dark); color: #fff; padding: 10px 18px; border-radius: 999px;
font-size: 0.85rem; font-weight: 700; box-shadow: var(--shadow-elevated); z-index: 500;
opacity: 0; transition: opacity .3s ease, transform .3s ease; max-width: 90vw; text-align: center;
}
.a11y-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) {
.a11y-panel { left: var(--space-2); right: var(--space-2); width: auto; }
.a11y-toggle { left: var(--space-2); }
}