/* ============================================================ A11Y — Conforto de leitura (Doc. Mestre §8.7) Controles cognitivos/sensoriais aplicados via classes/atributos no . Discreto, "natural" — nunca "modo especial". ============================================================ */ /* ── Tamanho de fonte (3 níveis) ── Reescala a raiz; como o app usa rem/var em px, escalamos o root font-size com clamp suave. Mantemos md ≈ comportamento atual. BUGFIX: o app usa tamanhos majoritariamente em px fixo, então font-size no :root nao tinha efeito visual. `zoom` (padronizado Chrome/Safari/Firefox 126+) escala TUDO, incluindo px, rem e layout. */ :root[data-fs="sm"] { zoom: 93.75%; font-size: 93.75%; } /* ~15px base */ :root[data-fs="md"] { zoom: 100%; font-size: 100%; } /* padrão */ :root[data-fs="lg"] { zoom: 112.5%; font-size: 112.5%; } /* ~18px base */ /* ── Espaçamento de linha (3 níveis) ── Atua no corpo de leitura. Evitamos mexer em títulos/labels compactos. */ :root[data-ls="sm"] body { line-height: 1.45; } :root[data-ls="md"] body { line-height: 1.55; } :root[data-ls="lg"] body { line-height: 1.85; } :root[data-ls="lg"] p, :root[data-ls="lg"] li, :root[data-ls="lg"] .reader-article, :root[data-ls="lg"] .msg-bubble { line-height: 1.95; } :root[data-ls="sm"] p, :root[data-ls="sm"] li, :root[data-ls="sm"] .reader-article, :root[data-ls="sm"] .msg-bubble { line-height: 1.5; } /* ── Modo foco ── Reduz estímulos: esconde decoração não essencial e suaviza contrastes decorativos. Aplica-se a TODAS as páginas (landing + app). */ :root.nr-focus .nr-hero-bg, :root.nr-focus .nr-mesh, :root.nr-focus .nr-preview-blob, :root.nr-focus .nr-fab, :root.nr-focus .nr-badges, :root.nr-focus .nr-reveal[data-d]::before { display: none !important; } /* Suaviza fundos/sombras decorativas para baixar a "temperatura" visual. */ :root.nr-focus .greet-card { background: var(--surface) !important; border-color: var(--line) !important; } :root.nr-focus .qa, :root.nr-focus .subj, :root.nr-focus .nr-card, :root.nr-focus .card { box-shadow: none !important; } /* No painel do aluno: o modo foco enxuga a home, deixando só o essencial (próximo passo + continue + matérias). Os atalhos rápidos e a saudação ornamentada saem de cena. */ :root.nr-focus #sub-home .qa-grid { display: none !important; } :root.nr-focus #sub-home .greet-stats { display: none !important; } /* Reduz brilho de gradientes de marca em foco. */ :root.nr-focus .rec-card { background: var(--surface) !important; } /* ── Botão discreto + menu (ao lado do tema) ── */ .a11y-wrap { position: relative; display: inline-flex; } .a11y-btn svg { width: 19px; height: 19px; } .a11y-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; width: 270px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 18px); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 4px; animation: a11yPop var(--t-fast, 160ms) var(--ease, ease); } @keyframes a11yPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .a11y-pop { animation: none; } } .a11y-pop-head { font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); padding: 6px 8px 4px; } .a11y-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border-radius: 12px; text-align: left; transition: background var(--t-fast, 160ms); } .a11y-row:hover { background: var(--surface-2); } .a11y-row-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); } .a11y-row-ic svg { width: 16px; height: 16px; } .a11y-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .a11y-row-t { font-size: 13.5px; font-weight: 600; color: var(--ink-0); } .a11y-row-s { font-size: 11.5px; color: var(--ink-3); } /* Switch visual */ .a11y-switch { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background var(--t-fast, 160ms); } .a11y-switch > i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast, 160ms); } .a11y-row.is-on .a11y-switch { background: var(--brand); } .a11y-row.is-on .a11y-switch > i { transform: translateX(16px); } /* Steppers (fonte / espaçamento) */ .a11y-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 12px; } .a11y-step:hover { background: var(--surface-2); } .a11y-step-t { font-size: 13px; font-weight: 500; color: var(--ink-1); } .a11y-step-ctrl { display: flex; align-items: center; gap: 6px; } .a11y-step-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-0); font-size: 17px; line-height: 1; display: grid; place-items: center; transition: background var(--t-fast, 160ms), border-color var(--t-fast, 160ms); } .a11y-step-btn:hover { background: var(--surface-2); border-color: var(--ink-4); } .a11y-step-out { min-width: 56px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); } .a11y-reset { margin-top: 4px; padding: 8px; border-radius: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); transition: background var(--t-fast, 160ms), color var(--t-fast, 160ms); } .a11y-reset:hover { background: var(--surface-2); color: var(--ink-1); } @media (max-width: 480px) { .a11y-pop { width: min(270px, calc(100vw - 24px)); } } /* ── MODO DE ALTA ACESSIBILIDADE ── Combinado (fonte ampliada via data-fs=lg + espaçamento via data-ls=lg, forçados pelo a11y.js) + reforços de contraste e alvos maiores abaixo. Mantém a identidade: nada de preto puro nem amarelo de alto contraste — apenas os tons mais escuros/fortes da própria paleta. */ :root.nr-high-a11y { --ink: #221c14; --ink-2: #463c2f; --ink-3: #5d5242; --line: #c9bda6; --line-soft: #d8cdb8; --focus-ring: 0 0 0 4px rgba(70, 96, 58, .55); } :root[data-theme="dark"].nr-high-a11y { --ink: #f7f3ea; --ink-2: #ded6c6; --ink-3: #c4baa6; --line: #6b6151; --line-soft: #57503f; } /* Links de conteúdo sempre sublinhados (não dependem só da cor). */ .nr-high-a11y main p a, .nr-high-a11y main li a, .nr-high-a11y .reader-article a { text-decoration: underline; text-underline-offset: 2px; } /* Alvos de toque confortáveis (WCAG 2.5.8). */ .nr-high-a11y .btn, .nr-high-a11y .app-side a, .nr-high-a11y .a11y-row, .nr-high-a11y .qa, .nr-high-a11y .recent-row { min-height: 44px; } /* Foco sempre visível, mais espesso. */ .nr-high-a11y :focus-visible { outline: 3px solid var(--brand-strong) !important; outline-offset: 2px; } /* Pesos levemente reforçados para legibilidade. */ .nr-high-a11y body { font-weight: 450; } .nr-high-a11y .muted, .nr-high-a11y small { color: var(--ink-2); }