/*! * Hórus — Camada global de acessibilidade * horus-a11y.css — Sprint 13 / Fase 1 (fundação) + Fase 2 (UI no login) * * Fase 2 (seções 5–10): chamada textual + painel de acessibilidade; escala * de fonte pontual no login; contraste reforçado por reforço de tokens (sem * repaint); reforço aditivo do modo enhanced. * `data-a11y-cores` ("default" | "inclusive") é contrato GLOBAL (do init.js). * Seção 9c: tokens --horus-a11y-ui-* de SINAIS FUNCIONAIS/INTERATIVOS — * "default" reproduz exatamente a aparência atual; "inclusive" assume a * paleta-piloto (azul seguro p/ daltonismo). Não toca a identidade LIVTI * (logo, CTA laranja). Independe de "enabled". * Salvo a nova chamada textual e o anel de foco, o modo * 100% / standard / normal / auto / cores=default preserva a aparência atual. * * Contrato de atributos (definidos por horus-a11y-init.js no elemento ): * data-a11y = "standard" | "enhanced" * data-a11y-contraste = "normal" | "high" * data-a11y-fonte = "100" | "112" | "125" * data-a11y-motion = "auto" | "reduce" * data-a11y-cores = "default" | "inclusive" * * Objetivos desta fase: * 1. tokens canônicos básicos da camada (prefixo --horus-a11y-*); * 2. foco visível global, consistente e seguro (apenas :focus-visible); * 3. ganchos preparados para enhanced / high contrast / font scale / * reduced motion, SEM redesenhar o login padrão; * 4. respeitar prefers-reduced-motion do sistema e permitir que * data-a11y-motion="reduce" force comportamento equivalente. * * O modo PADRÃO (data-a11y="standard", sem preferências) deve permanecer * visualmente praticamente idêntico ao login atual — a única mudança * intencional é o anel de foco de teclado (:focus-visible), que é um dos * objetivos declarados da fundação. * * NÃO faz: replace global de HEX, repaint da paleta LIVTI, dimensão mínima * em massa (a, button, input, *), override destrutivo de animação/transição. */ /* ============================================================ 1. Tokens canônicos da camada ============================================================ */ :root { /* Foco de teclado — usado por :focus-visible (seção 3). */ --horus-a11y-focus-color: #1d4ed8; --horus-a11y-focus-color-offset: #ffffff; --horus-a11y-focus-width: 3px; --horus-a11y-focus-offset: 2px; /* Escala de fonte — contrato para evolução (seção 2). Base = 1 (100%). */ --horus-a11y-font-scale: 1; /* Reservados para as próximas fases (contraste reforçado / enhanced). Declarados aqui só para existirem como contrato; NÃO são consumidos por regra visual nesta fase. */ --horus-a11y-outline-strong: #0b1229; --horus-a11y-space-scale: 1; } /* ------------------------------------------------------------ MODO DE CORES GLOBAL (data-a11y-cores) — CONTRATO, sem efeito visual ainda ------------------------------------------------------------ Correção arquitetural (Sprint 13 / Fase 2, 2026-08-31): acessibilidade é TRANSVERSAL ao Hórus. Os estados Estável/Alerta/Crítico pertencem ao MÓDULO de Observabilidade, não ao núcleo global — por isso a prévia de status foi removida do login e os tokens --horus-a11y-status-* foram descontinuados aqui. `colorMode` ("default" | "inclusive") e o atributo html[data-a11y-cores="default"|"inclusive"] continuam sendo o contrato GLOBAL (definido por horus-a11y-init.js). A opção "Inclusiva" passará a remapear, MÓDULO A MÓDULO, tokens do DESIGN SYSTEM do Hórus — por ex.: primary, accent, success, warning, danger, info, focus, link, text, border. Nada disso é implementado nesta movimentação; nenhuma regra visual depende de data-a11y-cores por enquanto. A identidade LIVTI (laranja institucional) NÃO muda só por "Inclusiva" — identidade de marca ≠ semântica de estado. ------------------------------------------------------------ */ /* html[data-a11y-cores="inclusive"] { --horus-ds-...: ...; } <- futuro, por módulo */ /* ============================================================ 2. Escala de fonte (contrato + aplicação segura) ------------------------------------------------------------ Mapeia data-a11y-fonte -> --horus-a11y-font-scale. A aplicação em html{font-size} abaixo é SEGURA para o login atual porque login.css não usa rem/em (auditado na Fase 1): o efeito visual no login é praticamente nulo. O contrato fica pronto para telas futuras baseadas em rem, sem quebrar o layout atual. ============================================================ */ html[data-a11y-fonte="112"] { --horus-a11y-font-scale: 1.12; } html[data-a11y-fonte="125"] { --horus-a11y-font-scale: 1.25; } html { font-size: calc(100% * var(--horus-a11y-font-scale, 1)); } /* ============================================================ 3. Foco visível global (apenas teclado, via :focus-visible) ------------------------------------------------------------ Especificidade baixa e deliberada: adiciona um anel claro sem remover indicadores de foco existentes que já sejam bons (as regras :focus do login continuam valendo). ============================================================ */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"]):focus-visible { outline: var(--horus-a11y-focus-width) solid var(--horus-a11y-focus-color); outline-offset: var(--horus-a11y-focus-offset); /* Halo neutro para garantir contraste do anel sobre qualquer fundo. box-shadow separado do outline; não interfere em bordas de input. */ box-shadow: 0 0 0 calc(var(--horus-a11y-focus-width) + 1px) var(--horus-a11y-focus-color-offset); } /* Enhanced: anel mais espesso e mais afastado (sem mudar layout). */ html[data-a11y="enhanced"] { --horus-a11y-focus-width: 4px; --horus-a11y-focus-offset: 3px; } /* Contraste reforçado: anel mais forte e escuro. */ html[data-a11y-contraste="high"] { --horus-a11y-focus-color: #0b1229; --horus-a11y-focus-color-offset: #ffd400; --horus-a11y-focus-width: 4px; } /* Modo de cores forçadas do SO / navegador: deixa o sistema mandar no anel. */ @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline-color: Highlight; box-shadow: none; } } /* ============================================================ 4. Redução de movimento ------------------------------------------------------------ NÃO é o kill global "* { animation:none!important }". Escopo restrito à árvore de componentes do login (containers e overlays que realmente animam). Usa 1ms em vez de "none" para que eventos animationend/transitionend ainda disparem. Vale tanto para a preferência do SISTEMA quanto para o override manual data-a11y-motion="reduce". ============================================================ */ @media (prefers-reduced-motion: reduce) { :where(.login-container, .processing-overlay, .processing-box, .progress, .force-overlay, .force-card, .terms-card), :where(.login-container, .processing-overlay, .processing-box, .progress, .force-overlay, .force-card, .terms-card) :where(*), :where(body.route-leave) :where(.login-container) { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } } html[data-a11y-motion="reduce"] :where(.login-container, .processing-overlay, .processing-box, .progress, .force-overlay, .force-card, .terms-card), html[data-a11y-motion="reduce"] :where(.login-container, .processing-overlay, .processing-box, .progress, .force-overlay, .force-card, .terms-card) :where(*), html[data-a11y-motion="reduce"] body.route-leave :where(.login-container) { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } /* ============================================================ 5. FASE 2 — Escala de fonte aplicada ao login (pontual e segura) ------------------------------------------------------------ Só entra em vigor com data-a11y-fonte="112" ou "125" (a "100" NÃO altera nada — os valores de login.css permanecem). Cada elemento recebe font-size = base_px * --horus-a11y-font-scale. Bases medidas em login.css; valores conferidos a 125% (input 48px, botão 48px: cabem 20px / 18.75px sem quebra). Se algum elemento quebrar na validação visual, ajustar AQUI, pontualmente. ============================================================ */ html[data-a11y-fonte="112"] .login-container h2, html[data-a11y-fonte="125"] .login-container h2 { font-size: calc(22px * var(--horus-a11y-font-scale)); } html[data-a11y-fonte="112"] .login-container > .form-group input, html[data-a11y-fonte="125"] .login-container > .form-group input { font-size: calc(16px * var(--horus-a11y-font-scale)); } html[data-a11y-fonte="112"] .login-container > .form-group input::placeholder, html[data-a11y-fonte="125"] .login-container > .form-group input::placeholder { font-size: calc(16px * var(--horus-a11y-font-scale)); } html[data-a11y-fonte="112"] .login-container > #btn-login, html[data-a11y-fonte="125"] .login-container > #btn-login { font-size: calc(15px * var(--horus-a11y-font-scale)); } html[data-a11y-fonte="112"] .login-container .forgot-link a, html[data-a11y-fonte="125"] .login-container .forgot-link a { font-size: calc(13px * var(--horus-a11y-font-scale)); } html[data-a11y-fonte="112"] .login-container .mensagem, html[data-a11y-fonte="125"] .login-container .mensagem { font-size: calc(13px * var(--horus-a11y-font-scale)); } /* ============================================================ 6. FASE 2 — Contraste reforçado (reforço de tokens, NÃO repaint) ------------------------------------------------------------ Redefine tokens já consumidos por login.css sob o escopo do atributo (reversível ao voltar para "normal"). Não substitui HEX fixo em massa, não toca a paleta da Observabilidade. ============================================================ */ html[data-a11y-contraste="high"] { --livti-muted: #475569; /* era #667085 — texto secundário mais escuro */ --livti-border: #94a3b8; /* era #d8dee8 — bordas de input mais visíveis */ } html[data-a11y-contraste="high"] .login-container { border-color: #0b1229; } html[data-a11y-contraste="high"] h2 { color: #0b1229; } html[data-a11y-contraste="high"] .login-container .forgot-link a { color: #b45309; /* laranja mais escuro: melhor contraste no branco */ text-decoration: underline; } /* ============================================================ 7. FASE 2 — Visualização acessível (enhanced): reforço aditivo ------------------------------------------------------------ Sem mudança de layout. Anel de foco já engrossa na seção 3. ============================================================ */ html[data-a11y="enhanced"] .login-container .forgot-link a { text-decoration: underline; /* link sempre sublinhado, não só no hover */ } html[data-a11y="enhanced"] .login-container { border-color: #94a3b8; /* card mais definido */ } html[data-a11y="enhanced"] .login-container > .form-group input { border-color: #94a3b8; } /* ============================================================ 8. FASE 2 — Chamada textual "Precisa de recursos de acessibilidade?" ------------------------------------------------------------ Ação SECUNDÁRIA e discreta, com aparência de link auxiliar (não é CTA). Vive DENTRO do .login-container (flex column), como último item (order alto), centralizada abaixo do formulário. NÃO usa position:fixed. Abre o mesmo #a11y-overlay (dialog). ============================================================ */ .a11y-trigger { order: 20; /* depois de #btn-login(6), .mensagem(7), #login-error(8) */ align-self: center; /* .login-container é align-items:stretch */ max-width: 100%; margin-top: 16px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: #64748b; font: 500 0.8rem/1.35 'Rubik', system-ui, sans-serif; text-align: center; cursor: pointer; transition: color .14s ease; } .a11y-trigger:hover { color: #334155; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 480px) { .a11y-trigger { font-size: 0.78rem; margin-top: 14px; } } /* Escala de fonte também alcança a chamada (texto auxiliar). */ html[data-a11y-fonte="112"] .login-container .a11y-trigger, html[data-a11y-fonte="125"] .login-container .a11y-trigger { font-size: calc(12.8px * var(--horus-a11y-font-scale)); } /* Reforço em enhanced / alto contraste: mais legível, sempre sublinhada. */ html[data-a11y="enhanced"] .a11y-trigger { color: #334155; text-decoration: underline; text-underline-offset: 2px; } html[data-a11y-contraste="high"] .a11y-trigger { color: #0b1229; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ 9. FASE 2 — Painel de acessibilidade (overlay + card) ============================================================ */ .a11y-overlay { position: fixed; inset: 0; z-index: 9998; /* abaixo dos modais obrigatórios de senha/termo (9999) */ display: grid; place-items: center; padding: 16px; background: rgba(10, 16, 30, 0.5); backdrop-filter: blur(3px); } .a11y-overlay[hidden] { display: none; } .a11y-panel { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.1rem 1.15rem 1.2rem; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28); font-family: 'Rubik', system-ui, sans-serif; animation: a11y-pop .16s ease-out; } @keyframes a11y-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .a11y-title { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.2px; color: #0f172a; } .a11y-close { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #475569; font-size: 1rem; line-height: 1; cursor: pointer; } .a11y-close:hover { background: rgba(15, 23, 42, 0.06); } .a11y-intro { margin: 0.5rem 0 0.9rem; font-size: 0.82rem; line-height: 1.5; color: #64748b; } .a11y-field { margin-top: 0.85rem; } .a11y-field-label { display: block; margin-bottom: 0.4rem; font-size: 0.82rem; font-weight: 700; color: #334155; } /* Texto auxiliar discreto abaixo de um grupo de opções (ex.: "Paleta de cores"). */ .a11y-field-help { margin: 0.4rem 0 0; font-size: 0.76rem; line-height: 1.45; color: #64748b; } html[data-a11y-contraste="high"] .a11y-field-help { color: #334155; } .a11y-seg { display: flex; gap: 0.4rem; } .a11y-opt { flex: 1 1 0; min-height: 2.25rem; padding: 0.4rem 0.5rem; border: 1px solid #cbd5e1; border-radius: 9px; background: #ffffff; color: #334155; font: 600 0.82rem/1.2 'Rubik', system-ui, sans-serif; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .a11y-opt:hover { border-color: #94a3b8; background: #f8fafc; } .a11y-opt[aria-pressed="true"] { background: var(--horus-a11y-ui-selected); border-color: var(--horus-a11y-ui-selected-border); color: var(--horus-a11y-ui-selected-text); font-weight: 800; /* estado não depende só de cor: peso + aria-pressed */ } .a11y-opt[aria-pressed="true"]:hover { background: var(--horus-a11y-ui-selected-hover); border-color: var(--horus-a11y-ui-selected-hover); } .a11y-panel-actions { margin-top: 1.15rem; display: flex; justify-content: flex-end; } .a11y-reset { padding: 0.5rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #0f172a; font: 700 0.82rem/1 'Rubik', system-ui, sans-serif; cursor: pointer; } .a11y-reset:hover { background: #f1f5f9; } @media (max-width: 480px) { .a11y-panel { width: 100%; max-width: calc(100vw - 24px); } .a11y-seg { flex-wrap: wrap; } .a11y-opt { flex-basis: calc(50% - 0.2rem); } } /* Contraste reforçado: painel com bordas/limites mais fortes. */ html[data-a11y-contraste="high"] .a11y-panel { border-color: #0b1229; } html[data-a11y-contraste="high"] .a11y-opt { border-color: #64748b; color: #0b1229; } html[data-a11y-contraste="high"] .a11y-opt[aria-pressed="true"] { background: #0b1229; border-color: #0b1229; color: #fff; } html[data-a11y-contraste="high"] .a11y-intro { color: #334155; } /* 9b. (REMOVIDO em 2026-08-31 — correcao arquitetural) A previa "Cores de status" (Estavel/Alerta/Critico) e todas as regras .a11y-color-preview, .a11y-color-preview-item, .a11y-color-dot e suas variantes foram removidas, junto com os tokens --horus-a11y-status-*: esses estados pertencem ao modulo de Observabilidade, nao ao nucleo global de acessibilidade. O grupo virou "Paleta de cores" com apenas um texto auxiliar (.a11y-field-help, na secao 9). */ /* ============================================================ 9c. FASE 2 — Paleta de cores GLOBAL: tokens de SINAIS FUNCIONAIS ------------------------------------------------------------ Contrato global (não é "cor de status", não tem relação com Observabilidade / Estável-Alerta-Crítico / monitoramento / saúde). Objetivo: deficiência de visão de cores (daltonismo). Base normativa: ISO/IEC 40500:2012 (= WCAG 2.0) — 1.4.1 (informação não só por cor), 1.4.3 (texto >= 4.5:1), 1.4.11 (não-textual >= 3:1); ISO 9241-112:2017 (discriminabilidade; não codificar só por cor; contraste de luminância); ISO 9241-303 (cor de displays). Par de matizes robusto em protan/deutan/tritan: AZUL x LARANJA — os sinais funcionais vão para azul e o CTA institucional permanece laranja. MODELO: os SELETORES abaixo consomem os tokens --horus-a11y-ui-*. Em data-a11y-cores="default" os tokens reproduzem EXATAMENTE a aparência funcional atual (nenhuma mudança visual). Em data-a11y-cores="inclusive" os tokens assumem a paleta-piloto aprovada. Reversível, sem reload, sem replace global de HEX. Independe de data-a11y="enhanced". PRESERVADO em qualquer modo: logo, CTA #btn-login (gradiente laranja), --livti-orange/--livti-orange-2, fundo/superfícies/card, texto estrutural, caret-color, cores decorativas. Contrastes da paleta inclusiva sobre branco: #005A8D ~6.9:1 (texto e preenchimento — AAA p/ texto branco sobre ele) #00446B ~10:1 (hover do realce) #0072B2 ~4.9:1 (borda de input em foco — >= 3:1 não-textual) #56B4E9 ~2.3:1 sozinho em branco -> usado só como HALO/realce, sempre acompanhado da borda #0072B2 (que satisfaz 1.4.11) e, no anel de teclado, do outline #005A8D. ============================================================ */ :root { /* DEFAULT = aparência funcional atual (nenhuma mudança visual) */ --horus-a11y-ui-selected: #0f172a; /* fill do item selecionado no painel */ --horus-a11y-ui-selected-hover: #0f172a; /* hoje não há mudança no hover do selecionado */ --horus-a11y-ui-selected-border: #0f172a; --horus-a11y-ui-selected-text: #ffffff; --horus-a11y-ui-link: #ec720e; /* "Esqueceu sua senha?" (login.css) */ --horus-a11y-ui-focus-border: var(--livti-orange); /* borda do input em foco hoje (#e68200) */ --horus-a11y-ui-focus-ring: rgba(230, 130, 0, 0.14); /* halo do input em foco hoje */ } html[data-a11y-cores="inclusive"] { --horus-a11y-ui-selected: #005A8D; --horus-a11y-ui-selected-hover: #00446B; --horus-a11y-ui-selected-border: #00446B; --horus-a11y-ui-selected-text: #FFFFFF; --horus-a11y-ui-link: #005A8D; --horus-a11y-ui-focus-border: #0072B2; --horus-a11y-ui-focus-ring: rgba(86, 180, 233, 0.55); /* #56B4E9 */ /* anel de foco de teclado (:focus-visible, seção 3): outline azul forte (#005A8D >= 4.9:1) + halo #56B4E9 abaixo. Não depende de "enhanced". */ --horus-a11y-focus-color: #005A8D; } /* --- Consumo dos tokens (valem em AMBOS os modos) --- */ /* 1. "Esqueceu sua senha?" — link funcional */ .login-container .forgot-link a { color: var(--horus-a11y-ui-link); } /* garante prioridade sobre contraste/enhanced quando Inclusiva ativa + sublinha */ html[data-a11y-cores="inclusive"] .login-container .forgot-link a, html[data-a11y-cores="inclusive"] .a11y-trigger { color: var(--horus-a11y-ui-link); text-decoration: underline; text-underline-offset: 2px; } /* 2. Borda + halo do input EM FOCO (só muda em Inclusiva; default = login.css) */ html[data-a11y-cores="inclusive"] .login-container > .form-group input:focus, html[data-a11y-cores="inclusive"] .fc-input:focus { border-color: var(--horus-a11y-ui-focus-border); box-shadow: 0 0 0 4px var(--horus-a11y-ui-focus-ring); } /* 3. Hover/foco dos controles do painel em Inclusiva */ html[data-a11y-cores="inclusive"] .a11y-opt:hover { border-color: var(--horus-a11y-ui-focus-border); } /* 4. Halo #56B4E9 no anel de foco de teclado, em Inclusiva (o outline forte vem de --horus-a11y-focus-color = #005A8D) */ html[data-a11y-cores="inclusive"] :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"]):focus-visible { box-shadow: 0 0 0 5px var(--horus-a11y-ui-focus-ring); } /* Item SELECIONADO do painel: já consome os tokens na seção 9 (.a11y-opt[aria-pressed="true"] + :hover). Nada a repetir aqui. */ /* NÃO alterados de propósito: #btn-login (CTA laranja), .fc-btn.primary, logo, --livti-orange/--livti-orange-2, background, card, caret-color. */ /* ============================================================ 10. FASE 2 — Redução de movimento para os elementos da UI a11y ------------------------------------------------------------ Mesma abordagem escopada da seção 4 (1ms, não "none"; sem "* !important"). ============================================================ */ @media (prefers-reduced-motion: reduce) { :where(.a11y-trigger, .a11y-overlay, .a11y-panel, .a11y-opt, .a11y-close, .a11y-reset), :where(.a11y-overlay, .a11y-panel) :where(*) { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } } html[data-a11y-motion="reduce"] :where(.a11y-trigger, .a11y-overlay, .a11y-panel, .a11y-opt, .a11y-close, .a11y-reset), html[data-a11y-motion="reduce"] :where(.a11y-overlay, .a11y-panel) :where(*) { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }