@keyframes fade-in {
from {
background-color: rgba(0, 0, 0, 0);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
@keyframes fade-out {
from {
background-color: rgba(0, 0, 0, 0.8);
}
to {
background-color: rgba(0, 0, 0, 0);
}
}
@keyframes spin-hover {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes spin-hover-once {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes pulse-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
@keyframes glow-effect {
0% {
box-shadow: 0 0 5px rgba(50, 188, 173, 0.4);
}
50% {
box-shadow: 0 0 15px rgba(50, 188, 173, 0.7);
}
100% {
box-shadow: 0 0 5px rgba(50, 188, 173, 0.4);
}
}
@keyframes glow-effect-primary {
0% {
box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.4);
}
50% {
box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.7);
}
100% {
box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.4);
}
}
.pix-button {
transition: all 0.3s ease;
}
.pix-button:hover {
transform: translateY(-2px);
/* Removido apenas o efeito de brilho no fundo */
}
.pix-button:hover .pix-icon {
animation: spin-hover-once 1.2s ease-in-out;
}
.pix-button:active {
transform: translateY(1px);
}
.flash-button {
transition: all 0.3s ease;
}
.flash-button:hover {
animation: glow-effect-primary 1.5s infinite;
transform: translateY(-2px);
background-color: rgba(var(--primary-rgb), 0.3);
}
.flash-button:hover .flash-icon {
animation: spin-hover-once 1.2s ease-in-out;
}
.flash-button:active {
transform: translateY(1px);
}
@keyframes slide-in {
from {
transform: translateX(500px);
}
to {
transform: translateX(0px);
}
}
@keyframes slide-out {
from {
transform: translateX(0px);
}
to {
transform: translateX(500px);
}
}
@layer base {
}
#cart-drawer[data-state="open"] {
animation: fade-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
#cart-drawer[data-state="open"] > div {
animation: slide-in 0.4s forwards;
}
#cart-drawer[data-state="closed"] > div {
animation: slide-out 0.4s forwards;
}
.dialog[data-state="open"] {
animation: fade-in 0.4s forwards;
}
.dialog[data-state="closed"] {
animation: fade-out 0.4s forwards;
}
.dialog[data-state="open"] > div {
animation: dialog-in 0.2s forwards;
}
.dialog[data-state="closed"] > div {
animation: dialog-out 0.2s forwards;
}
@keyframes dialog-in {
from {
opacity: 0;
scale: 50%;
}
to {
opacity: 1;
scale: 100%;
}
}
@keyframes dialog-out {
from {
opacity: 1;
scale: 100%;
}
to {
opacity: 0;
scale: 50%;
}
}
#category-section,
#category #products-list {
scroll-margin-top: 100px;
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
opacity: 0;
transform: translateY(20px);
}
#category-section.visible,
#category #products-list.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes loading {
0% {
left: -50%;
}
to {
left: 100%;
}
}
/* Animações customizadas para produtos */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-2px);
}
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
}
/* Classes de animação para produtos */
.product-card-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-hover:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.product-image-hover {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-image-hover:hover {
transform: scale(1.05);
}
.product-button-hover {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-button-hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.7s ease-out;
}
.product-button-hover:hover::before {
left: 100%;
}
.product-button-hover:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.product-icon-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-icon-hover:hover {
transform: scale(1.1) rotate(5deg);
animation: pulse-glow 1.5s ease-in-out infinite;
}
/* Animações para o botão do WhatsApp */
@keyframes whatsapp-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) scale(1);
}
40% {
transform: translateY(-8px) scale(1.05);
}
60% {
transform: translateY(-4px) scale(1.02);
}
}
@keyframes whatsapp-pulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
@keyframes whatsapp-shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px);
}
20%, 40%, 60%, 80% {
transform: translateX(2px);
}
}
@keyframes whatsapp-glow {
0%, 100% {
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.4);
}
50% {
box-shadow: 0 25px 50px rgba(34, 197, 94, 0.8), 0 0 40px rgba(34, 197, 94, 0.6);
}
}
.whatsapp-button {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.whatsapp-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease-out;
}
.whatsapp-button:hover::before {
left: 100%;
}
.whatsapp-button:hover {
animation: whatsapp-heartbeat 1.2s ease-in-out infinite, whatsapp-pulse 2s ease-in-out infinite, whatsapp-glow 1.5s ease-in-out infinite, whatsapp-text-pulse 1s ease-in-out infinite;
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.4);
}
.whatsapp-button:active {
transform: translateY(0) scale(0.98);
animation: whatsapp-shake 0.5s ease-in-out;
}
.whatsapp-icon {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.whatsapp-button:hover .whatsapp-icon {
animation: whatsapp-icon-bounce 0.8s ease-in-out infinite;
}
@keyframes whatsapp-icon-bounce {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(15deg);
}
}
@keyframes whatsapp-icon-pulse {
0%, 100% {
transform: scale(1.2) rotate(10deg);
}
50% {
transform: scale(1.3) rotate(12deg);
}
}
.whatsapp-button:hover {
animation: whatsapp-simple-pulse 1s ease-in-out infinite !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 15px 30px rgba(34, 197, 94, 0.5) !important;
background-color: #16a34a !important;
}
@keyframes whatsapp-simple-pulse {
0%, 100% {
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 15px 30px rgba(34, 197, 94, 0.5) !important;
background-color: #16a34a !important;
}
50% {
transform: translateY(-4px) scale(1.08) !important;
box-shadow: 0 20px 40px rgba(34, 197, 94, 0.7) !important;
background-color: #15803d !important;
}
}
@keyframes whatsapp-text-pulse {
0%, 100% {
font-weight: 600;
letter-spacing: 0;
}
50% {
font-weight: 700;
letter-spacing: 0.5px;
}
}
@keyframes whatsapp-heartbeat {
0%, 100% {
transform: translateY(-4px) scale(1.05);
}
25% {
transform: translateY(-6px) scale(1.08);
}
50% {
transform: translateY(-4px) scale(1.05);
}
75% {
transform: translateY(-7px) scale(1.09);
}
}
@keyframes whatsapp-icon-spin {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.3) rotate(15deg);
}
100% {
transform: scale(1.2) rotate(10deg);
}
}
/* ===== ANIMAÇÕES PARA BARRA DE PESQUISA ===== */
/* Animação de entrada do dropdown de pesquisa */
@keyframes search-dropdown-in {
from {
opacity: 0;
transform: translateY(-15px) scale(0.9);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes search-dropdown-out {
from {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
to {
opacity: 0;
transform: translateY(-15px) scale(0.9);
filter: blur(4px);
}
}
/* Animação de pulso suave para o ícone de pesquisa */
@keyframes search-icon-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
/* Animação de rotação suave para o ícone de pesquisa */
@keyframes search-icon-rotate {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.1);
}
}
/* Animação de brilho pulsante para o input */
@keyframes search-input-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
}
}
/* Animação de onda expandida */
@keyframes search-wave {
0% {
transform: scaleX(0) scaleY(0.5);
opacity: 1;
}
100% {
transform: scaleX(1) scaleY(1);
opacity: 0;
}
}
/* Animação de shimmer no input */
@keyframes search-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Animação de bounce para o container */
@keyframes search-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
/* Animação de escala suave */
@keyframes search-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
/* Estilos para o container da pesquisa */
.search-container {
position: relative;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.search-container:hover {
transform: translateY(-2px) scale(1.01);
animation: search-bounce 2s ease-in-out infinite;
}
/* Estilos para o input de pesquisa */
.search-input {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
will-change: transform, box-shadow, border-color;
}
.search-input::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
.search-input:focus::before {
left: 100%;
}
.search-input:focus {
transform: scale(1.03);
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.1),
0 8px 25px rgba(59, 130, 246, 0.15),
0 0 0 1px rgba(59, 130, 246, 0.2);
border-color: rgb(59, 130, 246);
animation: search-input-glow 2s ease-in-out infinite;
}
.search-input:hover {
border-color: rgb(99, 102, 241);
box-shadow:
0 4px 15px rgba(99, 102, 241, 0.1),
0 0 0 1px rgba(99, 102, 241, 0.2);
transform: scale(1.01);
}
.search-input:focus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgb(59, 130, 246), transparent);
transform: translate(-50%, -50%) scaleX(0);
animation: search-wave 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 2;
}
/* Estilos para o ícone de pesquisa */
.search-icon {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
will-change: transform, color;
}
.search-input:focus + .search-icon {
color: rgb(59, 130, 246);
animation: search-icon-pulse 2s ease-in-out infinite;
transform: scale(1.1);
}
.search-container:hover .search-icon {
transform: scale(1.15) rotate(5deg);
color: rgb(99, 102, 241);
animation: search-icon-pulse 1.5s ease-in-out infinite;
}
/* Animação de loading para o ícone de pesquisa */
.search-icon.loading {
animation: search-icon-rotate 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
color: rgb(59, 130, 246);
}
/* Estilos para o dropdown de pesquisa */
.search-dropdown {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: top;
will-change: transform, opacity, filter;
}
.search-dropdown.show {
animation: search-dropdown-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.search-dropdown.hide {
animation: search-dropdown-out 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Botão de pesquisa mobile */
.search-mobile-button {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
will-change: transform, box-shadow;
}
.search-mobile-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
.search-mobile-button:hover::before {
left: 100%;
}
.search-mobile-button:hover {
transform: translateY(-3px) scale(1.08);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(59, 130, 246, 0.2);
animation: search-scale 2s ease-in-out infinite;
}
.search-mobile-button:hover .search-icon {
animation: search-icon-pulse 1.5s ease-in-out infinite;
transform: scale(1.2) rotate(10deg);
color: rgb(59, 130, 246);
}
.search-mobile-button:active {
transform: translateY(-1px) scale(1.02);
animation: search-bounce 0.5s ease-in-out;
}
/* Efeito de shimmer no placeholder */
.search-input::placeholder {
transition: all 0.3s ease;
opacity: 0.7;
}
.search-input:focus::placeholder {
opacity: 0.4;
transform: translateX(5px);
}
/* Efeito de partículas no container quando ativo */
.search-container:has(.search-input:focus)::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: search-particles 2s ease-in-out infinite;
z-index: 0;
}
@keyframes search-particles {
0%, 100% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
/* Responsividade para dispositivos móveis */
@media (max-width: 640px) {
.search-container:hover {
transform: translateY(-1px) scale(1.005);
animation: none;
}
.search-input:focus {
transform: scale(1.02);
animation: search-input-glow 1.5s ease-in-out infinite;
}
.search-mobile-button:hover {
transform: translateY(-2px) scale(1.05);
animation: search-scale 1.5s ease-in-out infinite;
}
}
/* Efeito de loading com shimmer */
.search-input.loading {
background: linear-gradient(90deg,
transparent 0%,
rgba(59, 130, 246, 0.1) 50%,
transparent 100%);
background-size: 200% 100%;
animation: search-shimmer 1.5s ease-in-out infinite;
}
/* Melhorias de acessibilidade */
.search-input:focus-visible {
outline: 2px solid rgb(59, 130, 246);
outline-offset: 2px;
}
/* Efeito de sucesso quando pesquisa é concluída */
.search-input.success {
border-color: rgb(34, 197, 94);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
animation: search-success 0.6s ease-out;
}
@keyframes search-success {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* ===== ANIMAÇÕES PARA ITENS DO DROPDOWN ===== */
/* Animação de entrada dos itens do dropdown */
@keyframes search-item-in {
from {
opacity: 0;
transform: translateX(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
/* Animação de hover para itens do dropdown */
@keyframes search-item-hover {
0% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
100% {
transform: translateX(0);
}
}
/* Animação de seleção para itens do dropdown */
@keyframes search-item-select {
0% {
transform: scale(1);
background-color: transparent;
}
50% {
transform: scale(1.02);
background-color: rgba(59, 130, 246, 0.1);
}
100% {
transform: scale(1);
background-color: rgba(59, 130, 246, 0.05);
}
}
/* Estilos para itens do dropdown */
.search-dropdown-item {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: search-item-in 0.3s ease-out forwards;
opacity: 0;
transform: translateX(-20px) scale(0.95);
will-change: transform, background-color;
}
.search-dropdown-item:nth-child(1) { animation-delay: 0.1s; }
.search-dropdown-item:nth-child(2) { animation-delay: 0.15s; }
.search-dropdown-item:nth-child(3) { animation-delay: 0.2s; }
.search-dropdown-item:nth-child(4) { animation-delay: 0.25s; }
.search-dropdown-item:nth-child(5) { animation-delay: 0.3s; }
.search-dropdown-item:nth-child(6) { animation-delay: 0.35s; }
.search-dropdown-item:nth-child(7) { animation-delay: 0.4s; }
.search-dropdown-item:nth-child(8) { animation-delay: 0.45s; }
.search-dropdown-item:hover {
transform: translateX(8px) scale(1.02);
background-color: rgba(59, 130, 246, 0.08);
animation: search-item-hover 0.6s ease-in-out infinite;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.search-dropdown-item:active {
animation: search-item-select 0.2s ease-out forwards;
}
/* Efeito de shimmer nos itens do dropdown */
.search-dropdown-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease-out;
z-index: 1;
}
.search-dropdown-item:hover::before {
left: 100%;
}
/* Animação de loading para o dropdown */
.search-dropdown.loading {
position: relative;
overflow: hidden;
}
.search-dropdown.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
animation: search-shimmer 1.5s ease-in-out infinite;
z-index: 10;
}