/* Melhorias de UX e Performance */
.touch-manipulation {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Loading skeleton para produtos - MUITO MAIS VISÍVEL */
.product-skeleton {
background: linear-gradient(
90deg,
rgba(59, 130, 246, 0.1) 0%,
rgba(59, 130, 246, 0.3) 25%,
rgba(147, 197, 253, 0.4) 50%,
rgba(59, 130, 246, 0.3) 75%,
rgba(59, 130, 246, 0.1) 100%
);
background-size: 200% 100%;
animation: loading-skeleton 1.2s ease-in-out infinite;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}
@keyframes loading-skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Animação de entrada para produtos */
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Animação de fade-in para produtos carregados */
.product-card-enter {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Efeito de pulso no botão ao adicionar ao carrinho */
@keyframes pulse-success {
0%, 100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
}
}
.button-pulse {
animation: pulse-success 0.6s ease-out;
}
/* Animação do badge do carrinho */
@keyframes bounce-in {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
@keyframes fade-in {
from {
background-color: rgba(34, 34, 34, 0.8);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
@keyframes fade-out {
from {
background-color: rgba(87, 86, 86, 0.8);
}
to {
background-color: rgba(0, 0, 0, 0.8);
}
}
@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;
}
/* Fundo global do banner em todo o site */
.banner-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://i.imgur.com/JcXjF9i.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.1;        /* igual ao index.html */
z-index: -1;         /* igual ao index.html, atrás do conteúdo e acima do body */
pointer-events: none;
}
.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%;
}
}
/* navbar */
.custom-navbar {
background-color: #14141c;
padding-top: 2.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
padding-bottom: 2.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
}
/* Estilos personalizados para a notificação */
body {
font-family: 'Inter', sans-serif;
}
#sales-notification {
/* Posicionamento e transições */
position: fixed;
bottom: 5rem;
left: 1rem;
right: 1rem;
z-index: 1000;
opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
/* Garante que a barra de tempo não saia das bordas arredondadas */
overflow: hidden;
max-width: 350px;
margin: 0 auto;
}
@media (min-width: 640px) {
#sales-notification {
bottom: 2rem;
left: 2rem;
right: auto;
max-width: 350px;
margin: 0;
}
}
#sales-notification.show {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
/* Animação da barra de tempo */
@keyframes countdown {
from { width: 100%; }
to { width: 0%; }
}
/* Aplica a animação na barra de tempo quando a notificação está visível */
#sales-notification.show #timer-bar {
animation: countdown 5s linear forwards;
}
/* Estilo para o texto (ainda menor) */
#notification-text {
font-size: 0.75rem; /* ~12px mobile */
line-height: 1rem; /* Ajuste de altura da linha */
}
@media (min-width: 640px) {
#notification-text {
font-size: 0.65rem; /* ~10.5px desktop */
line-height: 0.9rem;
}
}
/* Ícone de presente em SVG (micro) */
.gift-icon {
width: 1rem; /* 12px */
height: 1rem; /* 12px */
color: white;
}
/* --- Estilos do Botão WhatsApp --- */
#whatsapp-button {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* --- Estilos do Modal WhatsApp --- */
#whatsapp-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1010;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
#whatsapp-modal-overlay.show {
opacity: 1;
visibility: visible;
}
#whatsapp-modal-content {
position: relative; /* Necessário para posicionar o botão de fechar */
background-color: white;
padding: 2rem;
border-radius: 0.75rem;
width: 90%;
max-width: 400px;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
}
#whatsapp-modal-overlay.show #whatsapp-modal-content {
transform: scale(1);
}
/* --- Animações --- */
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes progress {
from { width: 0%; }
to { width: 100%; }
}
/* --- Estilo Principal do Componente --- */
.banner-container {
font-family: 'Inter', sans-serif;
background-size: auto, cover;
padding: 0.5rem 0; /* Reduzido para mobile */
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 640px) {
.banner-container {
padding: 2rem 0;
}
}
.banner-card {
width: 100%;
max-width: 92rem; /* 1440px - Aumentado para ocupar mais espaço lateral */
position: relative;
/* Mesmo estilo do card de "Entrega Imediata" */
background: rgba(17, 24, 39, 0.1); /* Fundo com transparência semelhante ao feature-card */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(12px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 1rem; /* 16px mobile - reduzido */
overflow: hidden; /* Garante que a barra de progresso não saia das bordas */
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
@media (min-width: 640px) {
.banner-card {
border-radius: 1.5rem; /* 24px desktop */
padding: 2.5rem; /* 40px desktop */
}
}
/* --- Estrutura do Slider --- */
.slider-wrapper {
display: grid;
}
.banner-slide {
grid-area: 1 / 1 / 2 / 2; /* Coloca todos os slides na mesma célula do grid */
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.banner-slide.active {
opacity: 1;
visibility: visible;
}
/* Animações de entrada para os elementos do slide ativo */
.banner-slide.active .slide-text {
animation: slideInLeft 0.8s ease-out forwards;
}
.banner-slide.active .slide-image-wrapper {
animation: slideInRight 0.8s ease-out forwards;
}
.promo-image {
border-radius: 0.75rem; /* 12px mobile - menor */
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
transform: perspective(1000px) rotateY(0) rotateX(0) scale(0.9); /* Menor no mobile */
transition: transform 0.4s ease;
max-height: 200px; /* Limita altura no mobile */
object-fit: contain;
}
@media (min-width: 640px) {
.promo-image {
border-radius: 1rem;
max-height: none;
transform: perspective(1000px) rotateY(0) rotateX(0) scale(1);
}
}
@media (min-width: 1024px) {
.promo-image {
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1.05);
}
}
.promo-image:hover {
transform: perspective(1000px) rotateY(0) rotateX(0) scale(1.02);
}
@media (min-width: 1024px) {
.promo-image:hover {
transform: perspective(1000px) rotateY(0) rotateX(0) scale(1);
}
}
.btn-catalog {
background: linear-gradient(90deg, #3b82f6, #1d4ed8); /* Gradiente azul */
transition: all 0.3s ease;
}
.btn-catalog:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); /* Sombra azul */
}
/* Barra de Progresso */
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: rgba(255, 255, 255, 0);
width: 100%;
}
.progress-bar-inner {
height: 100%;
background: linear-gradient(90deg, #60a5fa, #2563eb); /* Gradiente azul */
border-radius: 0 2px 2px 0;
animation: progress 5s linear forwards;
}
/* perguntas frequentes */
/* Estilo para a transição suave do ícone do acordeão */
.faq-question svg {
transition: transform 0.3s ease-in-out;
}
.faq-question.open svg {
transform: rotate(180deg);
}
/* Estilo para a transição suave da imagem */
#faq-image {
transition: opacity 0.3s ease-in-out;
}
/* ========== CSS: Mensagem de Boas-Vindas (Overlay) ========== */
#custom-overlay-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 2rem;
opacity: 0;
animation: overlayEntrance 0.5s ease forwards;
}
#custom-overlay-wrapper h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
}
#custom-overlay-wrapper h1 strong {
color: #2563eb;
}
#custom-overlay-wrapper p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 0;
margin-bottom: 2rem;
}
.custom-overlay-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.custom-overlay-btn {
padding: 0.8rem 1.5rem;
border-radius: 999px;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.custom-overlay-btn.primary {
background-color: #2563eb;
color: white;
}
.custom-overlay-btn.primary:hover {
filter: brightness(1.2);
transform: translateY(-2px);
}
.custom-overlay-btn.secondary {
background-color: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.custom-overlay-btn.secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
color: white;
}
@keyframes overlayEntrance {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes overlayExit {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
/* ========== CSS: Pop-ups de Vendas ========== */
.sales-popup {
position: fixed;
bottom: 10px; /* Mobile: mais no cantinho */
left: 6px; /* Mobile: mais no cantinho */
z-index: 9998; /* Abaixo do botão Discord */
background-color: rgba(18, 18, 18, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
padding: 4px 6px; /* Mobile: ainda menor */
border-radius: 5px; /* Mobile: menor */
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
gap: 4px; /* Mobile: menor */
opacity: 0;
transform: translateY(20px);
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 130px; /* Mobile: ainda menor */
cursor: pointer;
}
/* Esconder popup e botão Discord na página de produto e checkout */
body.product-page .sales-popup,
body.product-page #discord-button,
body.checkout-page .sales-popup,
body.checkout-page #discord-button {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
@media (min-width: 640px) {
.sales-popup {
bottom: 25px; /* Alinhado com o botão Discord */
left: 25px;
padding: 15px 20px;
gap: 15px;
max-width: 350px;
border-radius: 12px;
}
/* Botão Discord alinhado na mesma linha do popup no desktop */
#discord-button {
bottom: 25px !important; /* Mesma altura do popup */
right: 25px !important;
}
}
.sales-popup.show {
opacity: 1;
transform: translateY(0);
visibility: visible;
/* Efeito neon fixo igual aos produtos - sempre visível quando mostrado */
box-shadow: 0 0 15px rgba(37, 99, 235, 0.5),
0 0 30px rgba(37, 99, 235, 0.3),
0 5px 25px rgba(0, 0, 0, 0.6);
}
/* Efeito zoom e neon mais forte no hover - apenas desktop */
@media (min-width: 640px) {
.sales-popup.show:hover {
transform: translateY(0) scale(1.15) !important;
box-shadow: 0 0 30px rgba(37, 99, 235, 0.8),
0 0 50px rgba(37, 99, 235, 0.5),
0 0 70px rgba(37, 99, 235, 0.3),
0 5px 25px rgba(0, 0, 0, 0.6) !important;
}
}
.sales-popup .popup-icon {
font-size: 0.65rem; /* Mobile: ainda menor */
color: #2563EB;
width: 10px; /* Mobile: ainda menor */
height: 10px; /* Mobile: ainda menor */
flex-shrink: 0;
}
@media (min-width: 640px) {
.sales-popup .popup-icon {
font-size: 1.5rem;
width: 24px;
height: 24px;
}
}
.sales-popup .popup-icon svg {
fill: currentColor;
width: 100%;
height: 100%;
}
.sales-popup p {
margin: 0;
color: #b3b3b3 !important;
font-size: 0.5rem; /* Mobile: ainda menor */
line-height: 1.05; /* Mobile: mais compacto */
}
@media (min-width: 640px) {
.sales-popup p {
font-size: 0.9rem;
line-height: 1.4;
}
}
.sales-popup p strong {
color: #ffffff !important;
font-weight: 600;
}
/* Botão Discord e mensagem na mesma linha no mobile */
@media (max-width: 639px) {
#discord-button {
bottom: 16px !important; /* Mesma altura da mensagem */
right: 12px !important;
left: auto !important;
padding: 10px !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10000 !important;
position: fixed !important;
}
#discord-button svg {
width: 20px !important;
height: 20px !important;
}
/* Mensagem maior e na mesma linha do botão Discord */
.sales-popup {
max-width: calc(100vw - 80px) !important; /* Deixa espaço para o botão */
right: auto !important;
left: 12px !important;
bottom: 16px !important; /* Mesma altura do botão Discord */
padding: 10px 12px !important; /* Maior */
gap: 10px !important; /* Maior */
border-radius: 8px !important;
}
.sales-popup .popup-icon {
width: 18px !important; /* Maior */
height: 18px !important; /* Maior */
font-size: 1rem !important; /* Maior */
}
.sales-popup p {
font-size: 0.75rem !important; /* Maior */
line-height: 1.3 !important;
}
.sales-popup.show {
max-width: calc(100vw - 80px) !important;
}
}
/* Efeitos neon fortes - aplicados globalmente */
.btn-catalog {
box-shadow:
0 0 10px rgba(59, 130, 246, 0.8),
0 0 20px rgba(59, 130, 246, 0.6),
0 0 30px rgba(59, 130, 246, 0.4),
0 4px 12px rgba(37, 99, 235, 0.4) !important;
animation: neon-button-pulse-catalog 2s ease-in-out infinite alternate !important;
border: 2px solid rgba(59, 130, 246, 0.8) !important;
transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.btn-catalog:hover,
.btn-catalog:active {
transform: scale(1.08) !important; /* Um pouco maior */
box-shadow:
0 0 15px rgba(59, 130, 246, 1),
0 0 30px rgba(59, 130, 246, 0.8),
0 0 45px rgba(59, 130, 246, 0.6),
0 6px 18px rgba(37, 99, 235, 0.6) !important;
border-color: rgba(59, 130, 246, 1) !important;
}
@keyframes neon-button-pulse-catalog {
from {
box-shadow:
0 0 10px rgba(59, 130, 246, 0.8),
0 0 20px rgba(59, 130, 246, 0.6),
0 0 30px rgba(59, 130, 246, 0.4),
0 4px 12px rgba(37, 99, 235, 0.4);
}
to {
box-shadow:
0 0 15px rgba(59, 130, 246, 1),
0 0 30px rgba(59, 130, 246, 0.8),
0 0 45px rgba(59, 130, 246, 0.6),
0 4px 12px rgba(37, 99, 235, 0.4);
}
}
#discord-button {
box-shadow:
0 0 15px rgba(99, 102, 241, 0.8),
0 0 30px rgba(99, 102, 241, 0.6),
0 0 45px rgba(99, 102, 241, 0.4),
0 4px 12px rgba(79, 70, 229, 0.4) !important;
animation: neon-discord-pulse-global 2s ease-in-out infinite alternate !important;
border: 2px solid rgba(99, 102, 241, 0.8) !important;
transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
#discord-button:hover,
#discord-button:active {
transform: scale(1.1) !important; /* Um pouco maior */
box-shadow:
0 0 20px rgba(99, 102, 241, 1),
0 0 40px rgba(99, 102, 241, 0.8),
0 0 60px rgba(99, 102, 241, 0.6),
0 6px 18px rgba(79, 70, 229, 0.6) !important;
border-color: rgba(99, 102, 241, 1) !important;
}
@keyframes neon-discord-pulse-global {
from {
box-shadow:
0 0 15px rgba(99, 102, 241, 0.8),
0 0 30px rgba(99, 102, 241, 0.6),
0 0 45px rgba(99, 102, 241, 0.4),
0 4px 12px rgba(79, 70, 229, 0.4);
}
to {
box-shadow:
0 0 20px rgba(99, 102, 241, 1),
0 0 40px rgba(99, 102, 241, 0.8),
0 0 60px rgba(99, 102, 241, 0.6),
0 4px 12px rgba(79, 70, 229, 0.4);
}
}
a[href="/login"] {
box-shadow:
0 0 15px rgba(59, 130, 246, 0.8),
0 0 30px rgba(59, 130, 246, 0.6),
0 0 45px rgba(59, 130, 246, 0.4),
0 4px 12px rgba(37, 99, 235, 0.4) !important;
animation: neon-entrar-pulse-global 2s ease-in-out infinite alternate !important;
border: 2px solid rgba(59, 130, 246, 0.8) !important;
transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
a[href="/login"]:hover,
a[href="/login"]:active {
transform: scale(1.08) !important; /* Um pouco maior */
box-shadow:
0 0 20px rgba(59, 130, 246, 1),
0 0 40px rgba(59, 130, 246, 0.8),
0 0 60px rgba(59, 130, 246, 0.6),
0 6px 18px rgba(37, 99, 235, 0.6) !important;
border-color: rgba(59, 130, 246, 1) !important;
}
@keyframes neon-entrar-pulse-global {
from {
box-shadow:
0 0 15px rgba(59, 130, 246, 0.8),
0 0 30px rgba(59, 130, 246, 0.6),
0 0 45px rgba(59, 130, 246, 0.4),
0 4px 12px rgba(37, 99, 235, 0.4);
}
to {
box-shadow:
0 0 20px rgba(59, 130, 246, 1),
0 0 40px rgba(59, 130, 246, 0.8),
0 0 60px rgba(59, 130, 246, 0.6),
0 4px 12px rgba(37, 99, 235, 0.4);
}
}
/* Fundo preto translúcido (~40%) para os feature cards globais */
.feature-card {
position: relative;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.7);
}