@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 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%;
}
}
/* ======= TEMA GERAL — GAMER NEON ======= */
body {
background: radial-gradient(circle at top, #3b005c 0%, #0c0012 40%, #000000 100%);
color: #ffffff;
font-family: 'Poppins', sans-serif;
text-shadow: 0 0 6px rgba(255, 0, 255, 0.3);
}
/* ======= BOTÕES GAMER ======= */
.button, .btn {
background: linear-gradient(135deg, #a000ff, #ff0037);
border: none;
border-radius: 10px;
padding: 10px 18px;
box-shadow: 0 0 15px #a000ffaa, 0 0 15px #ff003788 inset;
transition: 0.2s ease;
}
.button:hover, .btn:hover {
transform: scale(1.04);
box-shadow: 0 0 20px #c700ffaa, 0 0 22px #ff0040cc inset;
}
/* ======= CARDS GAMER ILUMINADOS ======= */
.card, .product-card, .box, .content, .section {
background: rgba(10, 0, 15, 0.55);
border: 1px solid rgba(150, 0, 255, 0.4);
backdrop-filter: blur(8px);
border-radius: 14px;
box-shadow:
0 0 18px rgba(150, 0, 255, 0.25),
0 0 25px rgba(255, 0, 50, 0.15) inset;
transition: 0.3s ease;
}
.card:hover, .product-card:hover {
transform: translateY(-4px);
box-shadow:
0 0 25px #a000ffaa,
0 0 30px #ff0037aa inset;
}
/* ======= TÍTULOS COM GLITCH LEVE ======= */
h1, h2, h3 {
position: relative;
text-transform: uppercase;
}
h1::after, h2::after, h3::after {
content: attr(data-text);
position: absolute;
left: 2px;
top: 2px;
color: #ff0040;
opacity: 0.5;
z-index: -1;
text-shadow: -2px 0 #a000ff;
}
/* ======= NEVE LEVE ======= */
.snow {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
url('https://i.imgur.com/Mc0s4yJ.png'),
url('https://i.imgur.com/Mc0s4yJ.png');
background-size: 200px, 350px;
animation: snowFall 12s linear infinite;
opacity: 0.35;
}
@keyframes snowFall {
0% { background-position: 0 -100px, 0 -200px; }
100% { background-position: 0 700px, 0 900px; }
}
/* ======= DETALHES NATALINOS ESTILO GAMER ======= */
body::before {
content: "🎄";
position: fixed;
right: 20px;
bottom: 20px;
font-size: 40px;
filter: drop-shadow(0 0 10px #ff0037);
opacity: 0.50;
}
body::after {
content: "❄";
position: fixed;
left: 20px;
top: 20px;
font-size: 35px;
filter: drop-shadow(0 0 10px #a000ff);
opacity: 0.45;
}
.cyber-lines {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(150, 0, 255, 0.15) 0px,
rgba(150, 0, 255, 0.15) 2px,
transparent 2px,
transparent 6px
);
animation: cyberMove 6s linear infinite;
opacity: 0.25;
}
@keyframes cyberMove {
0% { background-position-y: 0; }
100% { background-position-y: 600px; }
}
}
.cyber-lines {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(150, 0, 255, 0.15) 0px,
rgba(150, 0, 255, 0.15) 2px,
transparent 2px,
transparent 6px
);
animation: cyberMove 6s linear infinite;
opacity: 0.25;
}
@keyframes cyberMove {
0% { background-position-y: 0; }
100% { background-position-y: 600px; }
/* ===== TEMA NATALINO CYBERPUNK ===== */
/* Fundo geral */
body {
background: linear-gradient(180deg, #000000 0%, #2b0a3d 100%);
color: #ffffff;
font-family: 'Poppins', sans-serif;
}
/* Cabeçalho com glow neon */
header, .header, .topbar {
background: #000000;
border-bottom: 2px solid #00eaff;
box-shadow: 0 0 15px #00eaff;
}
/* Títulos neon */
h1, h2, h3 {
color: #b200ff !important;
text-shadow: 0 0 10px #b200ff;
}
/* Texto normal */
p {
color: #e8e8e8;
}
/* Botões neon roxo */
button, .btn, .button {
background: #b200ff !important;
color: #ffffff !important;
border-radius: 6px;
border: none;
padding: 12px 18px;
box-shadow: 0 0 10px #b200ff;
transition: 0.3s ease;
}
button:hover, .btn:hover, .button:hover {
background: #ff007f !important;
box-shadow: 0 0 15px #ff007f;
transform: scale(1.05);
}
/* Cartões com efeito holográfico */
.card, .produto, .product-box {
background: rgba(20, 0, 30, 0.7);
border: 1px solid rgba(178, 0, 255, 0.6);
backdrop-filter: blur(5px);
box-shadow: 0 0 10px #b200ff;
}
/* Animação de luz natalina */
@keyframes neonPulse {
0% { box-shadow: 0 0 5px #ff0033; }
50% { box-shadow: 0 0 20px #ff0033; }
100% { box-shadow: 0 0 5px #ff0033; }
}
/* Borda natalina animada */
.christmas-border {
border: 2px solid #ff0033;
animation: neonPulse 2s infinite;
}
/* Ícones neon */
svg, .icon {
fill: #00eaff !important;
stroke: #00eaff !important;
}
/* Rodapé */
footer {
background: #000000;
border-top: 2px solid #ff0033;
box-shadow: 0 0 10px #ff0033;
color: #ffffff;
}
/* Snow cyberpunk (neve digital) */
.snow {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, #00eaff 2px, transparent 2px);
background-size: 3px 3px;
opacity: 0.15;
animation: snowFall 10s linear infinite;
}
@keyframes snowFall {
from { transform: translateY(-100px); }
to { transform: translateY(100px); }
}
}
/* ===== TEMA NATALINO CYBERPUNK (LEVE) ===== */
/* Fundo */
body {
background: linear-gradient(180deg, #000000, #2b0a3d);
color: #ffffff;
}
/* Títulos neon */
h1, h2, h3 {
color: #b200ff !important;
text-shadow: 0 0 8px #b200ff;
}
/* Botões */
button, .btn, .button {
background: #b200ff !important;
border-radius: 8px;
color: #fff !important;
box-shadow: 0 0 10px #b200ff;
transition: 0.2s;
}
button:hover, .btn:hover, .button:hover {
background: #ff007f !important;
box-shadow: 0 0 15px #ff007f;
transform: scale(1.03);
}
/* Cards */
.card, .produto, .product-card {
background: rgba(20, 0, 30, 0.7);
border: 1px solid rgba(178, 0, 255, 0.4);
backdrop-filter: blur(3px);
}
/* Rodapé */
footer {
background: #000;
border-top: 2px solid #ff0033;
}
.christmas-lights {
width: 100%;
height: 6px;
background: linear-gradient(90deg,
#ff0033,
#00eaff,
#ff007f,
#39ff14,
#ffd700,
#b200ff
);
background-size: 400% 100%;
animation: lightMove 3s linear infinite;
}
@keyframes lightMove {
0% { background-position: 0%; }
100% { background-position: 400%; }
}
@media (max-width: 768px) {
h1 {
font-size: 26px !important;
}
button, .btn {
padding: 10px 14px !important;
font-size: 14px !important;
}
.card, .produto {
padding: 10px;
}
}
}
}