/* ============================================ INTERACOES.CSS — efeitos de hover e reveal Reutilizável em qualquer template (papelaria, petshop, lanchonete, salão, barbearia etc.) COMO USAR: 1. Suba este arquivo na pasta do site, ex: /assets/interacoes.css 2. No , logo ANTES do , adicione: 3. Não precisa mexer em nenhum CSS existente. ============================================ */ /* Transição suave em qualquer botão, link de destaque ou imagem de card */ a, button, .btn, .btn-whatsapp, input[type="submit"], img, [class*="card"], [class*="produto"], [class*="servico"], [class*="item"], [class*="galeria"] img { transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, background .3s ease; } /* Botões: sobe levemente e ganha sombra ao passar o mouse */ button:hover, .btn:hover, .btn-whatsapp:hover, input[type="submit"]:hover, a.button:hover, a.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); } /* Cards/produtos/serviços: sobe e ganha sombra */ [class*="card"]:hover, [class*="produto"]:hover, [class*="servico"]:hover, [class*="item"]:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,0.14); } /* Imagens dentro de cards/galeria: zoom suave */ [class*="card"] img, [class*="produto"] img, [class*="servico"] img, [class*="item"] img, [class*="galeria"] img { overflow: hidden; transition: transform .6s ease; } [class*="card"]:hover img, [class*="produto"]:hover img, [class*="servico"]:hover img, [class*="item"]:hover img, [class*="galeria"]:hover img { transform: scale(1.06); } /* Links de texto: sublinhado animado (só aplica se o link já não tiver sublinhado nativo) */ a.link-anim { position: relative; text-decoration: none; } a.link-anim::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: currentColor; transition: width .3s ease; } a.link-anim:hover::after { width: 100%; } /* Botão flutuante do WhatsApp: pulso leve pra chamar atenção */ [class*="whatsapp"], [class*="whats-float"], [id*="whatsapp"] { transition: transform .3s ease; } [class*="whatsapp"]:hover, [class*="whats-float"]:hover, [id*="whatsapp"]:hover { transform: scale(1.08); } /* Reveal suave ao rolar a página (o JS adiciona a classe "visible") */ .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal-on-scroll.visible { opacity: 1; transform: none; } /* Respeita quem prefere menos animação */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }