@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
body {
overflow-x: hidden;
}
/* canvas removido para eliminar efeito de fundo intrusivo */
@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%;
}
}
/* ============================
LED Orange theme (tema LED laranja)
============================ */
:root {
/* Paleta base LED laranja */
--brand-gold: #ff7b00;
--brand-gold-dark: #e66d00;
--brand-gold-light: #ff9933;
--brand-gold-contrast: #111111;
/* Tokens opcionais (para bibliotecas que usam CSS vars em HSL) */
/* Atenção: Tailwind está configurado para usar rgb(var(--primary)) */
--primary: 255 123 0; /* #ff7b00 */
--primary-foreground: 255 255 255; /* Texto sobre fundo laranja */
--ring: 255 123 0;
}
/* Links principais */
a {
color: var(--brand-gold);
}
a:hover {
color: var(--brand-gold-dark);
}
/* Preços em destaque */
#product-pricing,
.price,
.product-price,
.price-value {
color: var(--brand-gold);
}
/* Botões de ação comuns (inclui o botão de #custom-fields) */
button,
.button,
.btn,
[type="submit"],
#custom-fields button {
background-color: var(--brand-gold);
border-color: var(--brand-gold-dark);
color: var(--brand-gold-contrast);
}
button:hover,
.button:hover,
.btn:hover,
[type="submit"]:hover,
#custom-fields button:hover {
background-color: var(--brand-gold-dark);
}
/* Destaques/Badges genéricos */
.badge,
.tag,
.highlight {
background-color: var(--brand-gold);
color: var(--brand-gold-contrast);
border-color: var(--brand-gold-dark);
}
/* Acessibilidade de foco */
button:focus-visible,
a:focus-visible,
#custom-fields button:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 2px;
}
/* Título mais forte para cards de produto */
.product-card-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
/* ============================
Botão metálico dourado
============================ */
.btn-metal-gold {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #e2c35b;
color: #1a1a1a;
background-image:
linear-gradient(180deg, #f5e6a8 0%, #e9cf73 22%, #c8a33a 50%, #a88614 70%, #e2c35b 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 8px 20px rgba(200, 163, 58, 0.25),
0 2px 6px rgba(0, 0, 0, 0.35);
transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
overflow: hidden; /* garante que o sheen não extrapole o botão */
}
.btn-metal-gold:hover {
filter: saturate(110%) brightness(1.02);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(0, 0, 0, 0.28),
0 10px 26px rgba(200, 163, 58, 0.3),
0 3px 8px rgba(0, 0, 0, 0.4);
}
.btn-metal-gold:active {
transform: translateY(1px);
box-shadow:
inset 0 2px 2px rgba(0, 0, 0, 0.25),
0 6px 16px rgba(200, 163, 58, 0.22),
0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Faixa de brilho que varre o botão (sheen) */
.btn-metal-gold::after {
content: "";
position: absolute;
inset: 0;
left: -60%;
width: 220%;
height: 140%;
top: -20%;
transform: translateX(-55%);
background: linear-gradient(
115deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.0) 42%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.0) 58%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
mix-blend-mode: screen;
will-change: transform, opacity;
animation: metal-sheen-scan 4.8s ease-in-out infinite;
}
@keyframes metal-sheen-scan {
0% { transform: translateX(-55%); opacity: 0; }
8% { opacity: 0.9; }
40% { transform: translateX(55%); opacity: 0; }
100% { transform: translateX(55%); opacity: 0; }
}
/* Respeitar usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
.btn-metal-gold::after { animation: none; opacity: 0; }
.btn-metal-gold { transition: none; }
}
/* Estilo para todos os textos não-brancos com efeito neon laranja */
:not(.text-white, [class*="text-slate-"], [class*="text-gray-"]) {
color: rgb(var(--primary));
text-shadow: 0 0 5px rgba(255, 123, 0, 0.7), 0 0 10px rgba(255, 123, 0, 0.5);
}
/* Adicionando brilho branco sutil aos textos brancos */
.text-white, .text-slate-200, .text-gray-300 {
color: rgb(var(--foreground));
text-shadow: 0 0 3px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
}
/* Brilho superior sutil (gloss) */
.btn-metal-gold::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.12) 14%,
rgba(255, 255, 255, 0.06) 26%,
rgba(0, 0, 0, 0) 46%
);
pointer-events: none;
mix-blend-mode: screen;
}
/* Borda LED laranja animada */
.category-title-rgb::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff7b00, #ff9933, #ffb366, #ff9933, #ff7b00, #e66d00);
background-size: 400% 400%;
animation: rgbAnimation 3s ease-in-out infinite;
border-radius: inherit;
z-index: -1;
}
/* Título com gradiente LED laranja reluzente */
.titulo-reluzente {
background: linear-gradient(45deg, #ff7b00, #ff9933, #ffb366, #ff9933, #ff7b00, #e66d00);
background-size: 300% 300%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: gradientAnimation 4s ease infinite;
text-shadow: 0 0 10px rgba(255, 123, 0, 0.7), 0 0 20px rgba(255, 123, 0, 0.5);
}
/* ============================
Botão neon com brilho
============================ */
.btn-neon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 191, 0, 0.55);
color: #ffffff;
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 191, 0, 0.12) 0%, rgba(0, 0, 0, 0.0) 65%),
linear-gradient(180deg, rgba(0, 0, 0, 0.0) 0%, rgba(255, 191, 0, 0.12) 100%);
box-shadow:
0 0 0 1px rgba(255, 191, 0, 0.28) inset,
0 10px 22px rgba(255, 191, 0, 0.14),
0 4px 10px rgba(0, 0, 0, 0.35),
0 0 25px rgba(255, 191, 0, 0.22);
text-shadow:
0 0 10px rgba(255, 191, 0, 0.4),
0 1px 2px rgba(0, 0, 0, 0.85);
transition: transform 120ms ease, box-shadow 220ms ease, filter 220ms ease, background 220ms ease;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.25);
}
.btn-neon:hover {
color: #ffffff;
filter: saturate(120%) brightness(1.05);
box-shadow:
0 0 0 1px rgba(255, 200, 0, 0.35) inset,
0 14px 30px rgba(255, 200, 0, 0.24),
0 6px 14px rgba(0, 0, 0, 0.45),
0 0 36px rgba(255, 200, 0, 0.32);
}
.btn-neon:active {
color: #ffffff;
transform: translateY(1px);
box-shadow:
0 0 0 1px rgba(255, 191, 0, 0.35) inset,
0 8px 18px rgba(255, 191, 0, 0.2),
0 3px 8px rgba(0, 0, 0, 0.45),
0 0 24px rgba(255, 191, 0, 0.24);
}
/* Varredura de brilho (mantém o efeito de shine passando) */
.btn-neon::after {
content: "";
position: absolute;
inset: 0;
left: -60%;
width: 220%;
height: 140%;
top: -20%;
transform: translateX(-55%);
background: linear-gradient(
115deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 200, 0, 0.0) 42%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 200, 0, 0.0) 58%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
mix-blend-mode: screen;
will-change: transform, opacity;
animation: metal-sheen-scan 4.8s ease-in-out infinite;
}
.btn-neon::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(from 180deg at 50% 50%, rgba(255, 200, 0, 0.0), rgba(255, 200, 0, 0.25), rgba(255, 200, 0, 0.0));
filter: blur(10px);
opacity: 0.65;
z-index: -1;
}
.btn-neon:focus-visible {
color: #ffffff;
outline: 2px solid rgba(255, 200, 0, 0.8);
outline-offset: 2px;
box-shadow:
0 0 0 2px rgba(255, 200, 0, 0.5) inset,
0 0 0 4px rgba(255, 200, 0, 0.2),
0 0 40px rgba(255, 200, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.btn-neon::after { animation: none; opacity: 0; }
.btn-neon { transition: none; }
}
/* ============================
Descrição do produto - Neon âmbar
============================ */
.product-description.neon-amber {
position: relative;
border-color: rgba(255, 191, 0, 0.35);
background: linear-gradient(180deg, rgba(255, 191, 0, 0.05), rgba(0, 0, 0, 0.0));
box-shadow:
0 0 0 1px rgba(255, 191, 0, 0.18) inset,
0 10px 30px rgba(255, 191, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.35);
}
.product-description.neon-amber::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: conic-gradient(from 180deg at 50% 50%, rgba(255, 200, 0, 0.0), rgba(255, 200, 0, 0.25), rgba(255, 200, 0, 0.0));
filter: blur(12px);
opacity: 0.45;
pointer-events: none;
z-index: -1;
}
.product-description.neon-amber h1,
.product-description.neon-amber h2,
.product-description.neon-amber h3,
.product-description.neon-amber h4,
.product-description.neon-amber h5,
.product-description.neon-amber h6 {
color: #ffffff;
text-shadow:
0 0 10px rgba(255, 191, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.85);
}
.product-description.neon-amber p,
.product-description.neon-amber li,
.product-description.neon-amber span,
.product-description.neon-amber strong,
.product-description.neon-amber em {
color: #f8fafc;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.product-description.neon-amber a {
color: #ffda6b;
text-decoration: underline;
text-underline-offset: 2px;
}
.product-description.neon-amber a:hover {
color: #ffd347;
}
.product-description.neon-amber ul,
.product-description.neon-amber ol {
padding-left: 1.25rem;
}
.product-description.neon-amber li::marker {
color: #ffbf00;
}
.product-description.neon-amber code,
.product-description.neon-amber pre {
background: rgba(255, 191, 0, 0.1);
border: 1px solid rgba(255, 191, 0, 0.25);
color: #fff8e1;
}
.product-description.neon-amber table {
width: 100%;
border-collapse: collapse;
}
.product-description.neon-amber th,
.product-description.neon-amber td {
border: 1px solid rgba(255, 191, 0, 0.25);
padding: 0.5rem 0.75rem;
}
.product-description.neon-amber th {
background: rgba(255, 191, 0, 0.12);
color: #ffffff;
}
.product-description.neon-amber blockquote {
border-left: 3px solid rgba(255, 191, 0, 0.45);
padding-left: 0.75rem;
color: #f9fafb;
}