/* ========================================================= CAU - Barra de Acessibilidade (Alto Contraste + A+/A-) ========================================================= */ .cau-a11y-widget { display: flex; justify-content: flex-start; width: 100%; font-family: 'Manrope', sans-serif; } .cau-a11y { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; } .cau-a11y__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 14px; margin: 0; border: 1px solid #d3dde8; border-radius: 8px; background-color: #ffffff; color: #164381; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .cau-a11y__btn:hover { border-color: #164381; color: #0f2f5c; } .cau-a11y__btn:focus-visible { outline: 2px solid #164381; outline-offset: 2px; } .cau-a11y__btn.is-active { background-color: #164381; border-color: #164381; color: #ffffff; } .cau-a11y__btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* Botões de fonte (A+ / A-) */ .cau-a11y__btn--font { font-weight: 700; } .cau-a11y__a { font-size: 1.1em; line-height: 1; } .cau-a11y__op { font-size: 0.75em; line-height: 1; margin-left: 1px; } /* Botão de contraste */ .cau-a11y__ico { width: 18px; height: 18px; display: block; flex: 0 0 auto; } .cau-a11y__label { white-space: nowrap; } /* Responsivo: em telas estreitas mostra só o ícone do contraste. */ @media (max-width: 480px) { .cau-a11y { gap: 6px; } .cau-a11y__btn { padding: 6px 11px; } .cau-a11y__btn--contrast .cau-a11y__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* ========================================================= Modo ALTO CONTRASTE (classe em ) Aplica-se a todo o site: Elementor, tema e widgets do plugin. ========================================================= */ html.cau-a11y-contrast, html.cau-a11y-contrast body { background: #000000 !important; } /* Regra base mantida com baixa especificidade (0,1,2) para que as regras de link/formulário/ativo abaixo consigam sobrepô-la. SVGs usam o atributo `fill` (não `color`/`background`), então não são afetados visualmente. */ html.cau-a11y-contrast body * { background-color: transparent !important; background-image: none !important; color: #ffffff !important; border-color: #6a6a6a !important; box-shadow: none !important; text-shadow: none !important; } html.cau-a11y-contrast a, html.cau-a11y-contrast a * { color: #ffff00 !important; } html.cau-a11y-contrast a:hover, html.cau-a11y-contrast a:focus, html.cau-a11y-contrast a:hover * { color: #00ffff !important; text-decoration: underline !important; } html.cau-a11y-contrast input, html.cau-a11y-contrast textarea, html.cau-a11y-contrast select, html.cau-a11y-contrast button { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; } html.cau-a11y-contrast ::placeholder { color: #cccccc !important; opacity: 1; } html.cau-a11y-contrast img, html.cau-a11y-contrast video { filter: grayscale(100%) contrast(120%) !important; } html.cau-a11y-contrast :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px !important; } /* Botão de acessibilidade ativo continua legível no contraste. */ html.cau-a11y-contrast .cau-a11y__btn.is-active { background-color: #ffff00 !important; border-color: #ffff00 !important; color: #000000 !important; }