/* ============================================================== TOQUE.CSS — 90+ Futebol Clube Correção do highlight retangular de toque (WebView/Capacitor), compartilhada por TODAS as páginas institucionais (index, sobre, contato, cadastro, recuperar-senha, redefinir-senha, baixar-app, termos, privacidade, acessibilidade, cookies). Duas fontes do problema, corrigidas juntas: 1) -webkit-tap-highlight-color padrão do WebView — desenhado pela bounding box do elemento, ignora border-radius (por isso botão circular recebe destaque quadrado, e arredondado recebe destaque reto). 2) outline padrão de :focus — aparece quando o toque também dá foco ao elemento (comportamento comum em WebView/Chromium mobile). Mesmo efeito visual, fonte diferente. :focus-visible preserva o indicador de foco só pra quem navega por teclado/leitor de tela — não é um reset cego de acessibilidade. Como usar: adicionar 1 linha no de cada página institucional, depois do CSS próprio da página: ============================================================== */ * { -webkit-tap-highlight-color: transparent; } button, a, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:focus, a:focus, [role="button"]:focus { outline: none; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent, #05BD9E); outline-offset: 2px; border-radius: 8px; } /* ============================================================== FEEDBACK DE TOQUE — substitui o highlight nativo que acabamos de remover. Escala + opacidade em vez de um retângulo desenhado por cima: como é o próprio elemento que encolhe/esmaece, o efeito automaticamente respeita qualquer formato (círculo, arredondado, quadrado) — sem precisar de regra por componente. Baixa especificidade de propósito (seletor de tag, sem classe) — qualquer estilo :active/:hover já existente num componente específico continua ganhando no cascade, isso aqui é só o padrão pra quem ainda não tem nada próprio. ============================================================== */ button, a, [role="button"] { transition: transform 0.15s ease, opacity 0.15s ease; } button:active, a:active, [role="button"]:active { transform: scale(0.96); opacity: 0.85; }