/* ==========================================================================
CRIMSON SHOP — NEON BASE
Base visual "Dark Neon / Holográfico".
Este arquivo é carregado DEPOIS de styles.css e theme.css, então pode
sobrescrever estilos com a mesma especificidade. Ele cuida apenas de:
1. Tokens de cor, glows, gradiente holográfico e escala tipográfica
2. Fundo escuro profundo (glows de canto + grid sutil)
3. Canvas de partículas holográficas
4. Tipografia holográfica (.neon-title)
5. Utilitários compartilhados (.neon-glass, .neon-pill, .neon-chip, ...)
NÃO mexe nas classes já existentes (.product-card, .site-header,
.category-card, .button, ...) — o redesign delas fica nos arquivos
neon-header.css / neon-carousel.css / neon-cards.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
/* O seletor é `html:root` (e não `:root`) de propósito: neon-cards.css e
neon-carousel.css são carregados DEPOIS e redeclaram os mesmos tokens em
`:root`. Com `:root` a cascata daria a eles a palavra final; com
`html:root` a especificidade (0,1,1) vence e a paleta ônix/carmim
realmente manda em todo o site. */
html:root{
/* superfícies — PRETO ÔNIX (quase puro, sem tom azul) */
--neon-void:#050507; /* fundo mais profundo */
--neon-base:#090909; /* fundo principal */
--neon-surface:#0f0e0f; /* cards */
--neon-surface-2:#161415; /* cards hover / inputs (leve calor) */
--neon-line:#262225; /* bordas com tom quente */
/* neonSpectrum — o "roxo" virou CARMIM (o token continua com o nome
antigo porque styles.css / theme.css / app.js o referenciam) */
--neon-purple:#e01e4a; --neon-purple-bright:#ff5c7a;
--neon-purple-deep:#7a0f2a;
--neon-carmim:#e01e4a; --neon-carmim-bright:#ff5c7a;
--neon-ember:#ff8a3d; --neon-ember-bright:#ffb37a;
--neon-green:#22e39a; --neon-green-bright:#5cffbe;
--neon-pink:#ff2e88; --neon-pink-bright:#ff7ab5;
--neon-yellow:#ffd426; --neon-yellow-bright:#ffe97a;
--neon-cyan:#22d3ee; --neon-cyan-bright:#67e8f9;
--neon-red:#ff3b5c; --neon-red-bright:#ff8296;
/* glows (box-shadow prontos) */
--glow-purple:0 0 12px rgba(224,30,74,.55), 0 0 32px rgba(224,30,74,.28);
--glow-carmim:0 0 12px rgba(224,30,74,.55), 0 0 32px rgba(224,30,74,.28);
--glow-ember:0 0 12px rgba(255,138,61,.5), 0 0 30px rgba(255,138,61,.24);
--glow-green:0 0 12px rgba(34,227,154,.5), 0 0 28px rgba(34,227,154,.22);
--glow-pink:0 0 12px rgba(255,46,136,.5), 0 0 28px rgba(255,46,136,.22);
--glow-yellow:0 0 12px rgba(255,212,38,.5), 0 0 28px rgba(255,212,38,.2);
--glow-cyan:0 0 12px rgba(34,211,238,.5), 0 0 28px rgba(34,211,238,.22);
--glow-red:0 0 12px rgba(255,59,92,.5), 0 0 28px rgba(255,59,92,.22);
/* gradiente holográfico — CARMIM / EMBER (sem roxo em nenhum tom) */
--holo-gradient:linear-gradient(120deg,#ff2d55 0%,#ff6b35 16%,#ffd23f 32%,#ff2d55 50%,#b3123f 68%,#ff8a3d 84%,#ff2d55 100%);
--holo-size:220% 220%;
--radius-card:18px;
--radius-pill:999px;
--ease-neon:cubic-bezier(.22,1,.36,1);
--dur-neon:.34s;
/* --- extensões (aditivas, não alteram tokens existentes) --- */
--neon-ink:#f5f1f2; /* texto principal sobre fundo escuro */
--neon-ink-soft:#cdc6c8; /* texto secundário (contraste ~10:1) */
--neon-text-muted:#a19a9c; /* texto de apoio (contraste ~7,8:1) */
--neon-text-dim:#8a8385; /* texto decorativo (contraste ~5,3:1) */
--neon-hairline:rgba(255,255,255,.08);
--neon-glass-bg:rgba(9,8,9,.68);
--neon-grid-size:64px;
--neon-grid-opacity:.025;
--neon-particle-opacity:.9;
/* famílias */
--neon-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--neon-serif:Cardinal,Georgia,"Times New Roman",serif;
/* escala tipográfica fluida */
--neon-fs-display:clamp(2.6rem,1.55rem + 4.6vw,4.6rem);
--neon-fs-h1:clamp(2rem,1.35rem + 2.9vw,3.4rem);
--neon-fs-h2:clamp(1.45rem,1.12rem + 1.5vw,2.25rem);
--neon-fs-h3:clamp(1.1rem,.98rem + .6vw,1.4rem);
--neon-fs-lead:clamp(.98rem,.92rem + .35vw,1.15rem);
--neon-fs-body:clamp(.92rem,.88rem + .2vw,1rem);
--neon-fs-small:clamp(.78rem,.75rem + .15vw,.86rem);
}
/* --------------------------------------------------------------------------
2. FUNDO COM PROFUNDIDADE
-------------------------------------------------------------------------- */
body{
position:relative;
isolation:isolate; /* contexto de empilhamento: glows ficam
atrás do conteúdo, acima do fundo */
background:var(--neon-base);
color:var(--neon-ink);
font-family:var(--neon-sans);
}
/* fundo de PEDRA ÔNIX: glows de brasa/carmim + reflexo diagonal sutil.
(carmim topo-esquerda, ember embaixo-direita, vinho centro-baixo) */
body::before{
content:"";
position:fixed;
inset:-14%;
z-index:-1;
pointer-events:none;
background:
/* reflexo diagonal da pedra polida */
linear-gradient(160deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 45%),
/* brilho quente no topo (pedra iluminada por dentro) */
radial-gradient(ellipse at 50% -20%,rgba(255,90,90,.07),rgba(255,90,90,0) 60%),
radial-gradient(42% 34% at 14% 6%, rgba(224,30,74,.16), rgba(224,30,74,0) 70%),
radial-gradient(40% 34% at 92% 94%, rgba(255,107,53,.12), rgba(255,107,53,0) 70%),
radial-gradient(46% 32% at 52% 106%,rgba(140,20,50,.14), rgba(140,20,50,0) 72%);
filter:blur(90px);
will-change:transform;
}
/* grid sutil de 1px, apagando nas bordas (tom quente, quase invisível) */
body::after{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background-image:
repeating-linear-gradient(90deg,rgba(255,150,120,var(--neon-grid-opacity)) 0 1px,rgba(255,150,120,0) 1px var(--neon-grid-size)),
repeating-linear-gradient(0deg,rgba(255,150,120,var(--neon-grid-opacity)) 0 1px,rgba(255,150,120,0) 1px var(--neon-grid-size));
-webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 34%,#000 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,0) 88%);
mask-image:radial-gradient(ellipse 78% 68% at 50% 34%,#000 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,0) 88%);
animation:neon-grid-breathe 26s ease-in-out infinite alternate;
}
@keyframes neon-grid-breathe{
from{opacity:.62}
to{opacity:1}
}
/* No tema claro o fundo neon é desligado (o seletor de tema continua valendo). */
body[data-theme="light"]::before,
body[data-theme="light"]::after{
display:none;
}
/* --------------------------------------------------------------------------
3. PARTÍCULAS HOLOGRÁFICAS
O canvas é criado por window.CrimsonNeonParticles.start() (ver motor no fim
do arquivo) e recebe a classe .neon-particles no .
-------------------------------------------------------------------------- */
body.neon-particles{
--neon-particle-opacity:.9;
}
.neon-particles-canvas{
position:fixed;
inset:0;
z-index:0;
width:100%;
height:100%;
pointer-events:none;
mix-blend-mode:screen;
opacity:var(--neon-particle-opacity,.9);
transition:opacity var(--dur-neon) var(--ease-neon);
}
/* mantém o conteúdo acima do canvas de partículas */
body.neon-particles > main,
body.neon-particles > .announcement,
body.neon-particles > .site-footer{
position:relative;
z-index:1;
}
/* --------------------------------------------------------------------------
4. TIPOGRAFIA
-------------------------------------------------------------------------- */
.neon-title,
.neon-section-title h2{
background:var(--holo-gradient);
background-size:var(--holo-size);
font-family:var(--neon-serif);
font-weight:400;
letter-spacing:-.02em;
animation:neon-holo 9s ease infinite;
color:var(--neon-purple-bright); /* cor de segurança: o texto nunca some */
}
/* texto recortado pelo gradiente apenas onde a técnica é suportada */
@supports (-webkit-background-clip:text) or (background-clip:text){
.neon-title,
.neon-section-title h2{
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
}
@keyframes neon-holo{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
/* escala fluida */
.neon-display{font-size:var(--neon-fs-display);line-height:1.03;letter-spacing:-.045em}
.neon-h1{font-size:var(--neon-fs-h1);line-height:1.08;letter-spacing:-.04em}
.neon-h2{font-size:var(--neon-fs-h2);line-height:1.14;letter-spacing:-.035em}
.neon-h3{font-size:var(--neon-fs-h3);line-height:1.25;letter-spacing:-.02em}
.neon-lead{font-size:var(--neon-fs-lead);line-height:1.62;color:var(--neon-ink-soft)}
.neon-body{font-size:var(--neon-fs-body);line-height:1.65}
.neon-small{font-size:var(--neon-fs-small);line-height:1.5}
.neon-muted{color:var(--neon-text-muted)}
.neon-dim{color:var(--neon-text-dim)}
.neon-eyebrow{
display:flex;
align-items:center;
gap:10px;
font-size:.72rem;
font-weight:700;
letter-spacing:.21em;
text-transform:uppercase;
color:var(--neon-text-muted);
}
.neon-float{animation:neon-float 4.5s var(--ease-neon) infinite}
@keyframes neon-float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
.neon-pulse{animation:neon-pulse 2.4s ease-in-out infinite}
@keyframes neon-pulse{
0%,100%{opacity:1;filter:brightness(1)}
50%{opacity:.62;filter:brightness(1.35)}
}
/* --------------------------------------------------------------------------
5. UTILITÁRIOS COMPARTILHADOS
-------------------------------------------------------------------------- */
/* --- glassmorphism --- */
.neon-glass{
background:rgba(9,9,9,.94); /* fallback quando não há backdrop-filter */
border:1px solid var(--neon-hairline);
border-radius:var(--radius-card);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
.neon-glass{
background:var(--neon-glass-bg);
-webkit-backdrop-filter:blur(18px) saturate(160%);
backdrop-filter:blur(18px) saturate(160%);
}
}
/* --- borda holográfica (anel de 1px com gradiente animado) --- */
:where(.neon-holo-border){
position:relative;
isolation:isolate;
}
.neon-holo-border::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
padding:1px;
border-radius:inherit;
background:var(--holo-gradient);
background-size:var(--holo-size);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask-composite:exclude;
pointer-events:none;
animation:neon-holo-border 9s ease infinite;
}
@keyframes neon-holo-border{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
/* --- pílula escura com borda neon --- */
.neon-pill{
display:inline-flex;
align-items:center;
gap:9px;
padding:9px 18px;
border:1px solid rgba(224,30,74,.42);
border-radius:var(--radius-pill);
background:rgba(15,14,15,.78);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
color:var(--neon-ink);
font-size:12px;
font-weight:600;
letter-spacing:.02em;
line-height:1.2;
cursor:pointer;
transition:box-shadow var(--dur-neon) var(--ease-neon),
border-color var(--dur-neon) var(--ease-neon),
background var(--dur-neon) var(--ease-neon),
color var(--dur-neon) var(--ease-neon),
transform var(--dur-neon) var(--ease-neon);
}
.neon-pill:hover{
border-color:var(--neon-purple-bright);
color:#fff;
box-shadow:var(--glow-purple);
transform:translateY(-1px);
}
.neon-pill:active{
transform:translateY(0) scale(.98);
}
.neon-pill:focus-visible{
outline:2px solid var(--neon-purple-bright);
outline-offset:3px;
}
/* --- glows prontos --- */
.neon-glow-purple{box-shadow:var(--glow-purple)}
.neon-glow-green{box-shadow:var(--glow-green)}
.neon-glow-pink{box-shadow:var(--glow-pink)}
.neon-glow-yellow{box-shadow:var(--glow-yellow)}
.neon-glow-cyan{box-shadow:var(--glow-cyan)}
.neon-glow-red{box-shadow:var(--glow-red)}
/* --- botão circular de ícone --- */
.neon-icon-btn{
width:40px;
height:40px;
display:inline-grid;
place-items:center;
padding:0;
border:1px solid var(--neon-line);
border-radius:50%;
background:rgba(22,20,21,.72);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
color:var(--neon-ink-soft);
cursor:pointer;
transition:box-shadow var(--dur-neon) var(--ease-neon),
border-color var(--dur-neon) var(--ease-neon),
background var(--dur-neon) var(--ease-neon),
color var(--dur-neon) var(--ease-neon),
transform var(--dur-neon) var(--ease-neon);
}
.neon-icon-btn:hover{
border-color:var(--neon-purple-bright);
background:rgba(52,20,26,.85);
color:#fff;
box-shadow:var(--glow-purple);
transform:translateY(-1px);
}
.neon-icon-btn:active{
transform:scale(.96);
}
.neon-icon-btn:focus-visible{
outline:2px solid var(--neon-purple-bright);
outline-offset:3px;
}
.neon-icon-btn svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round;
}
/* --- chip colorido (badges) --- */
.neon-chip{
--neon-chip:var(--neon-purple);
--neon-chip-bright:var(--neon-purple-bright);
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
border:1px solid color-mix(in srgb,var(--neon-chip) 45%,transparent);
border-radius:var(--radius-pill);
background:color-mix(in srgb,var(--neon-chip) 15%,rgba(9,9,9,.6));
color:var(--neon-chip-bright);
font-size:11px;
font-weight:700;
letter-spacing:.04em;
line-height:1.5;
white-space:nowrap;
}
.neon-chip-green{--neon-chip:var(--neon-green);--neon-chip-bright:var(--neon-green-bright)}
.neon-chip-pink{--neon-chip:var(--neon-pink);--neon-chip-bright:var(--neon-pink-bright)}
.neon-chip-yellow{--neon-chip:var(--neon-yellow);--neon-chip-bright:var(--neon-yellow-bright)}
.neon-chip-cyan{--neon-chip:var(--neon-cyan);--neon-chip-bright:var(--neon-cyan-bright)}
.neon-chip-red{--neon-chip:var(--neon-red);--neon-chip-bright:var(--neon-red-bright)}
/* --- título de seção: ícone + título + subtítulo + ação à direita ---
Uso esperado:
O layout flex só é ativado quando existe .neon-section-copy dentro, para
não conflitar com usos de .neon-section-title apenas como texto. */
.neon-section-title:has(> .neon-section-copy){
display:flex;
align-items:center;
gap:16px;
margin-bottom:22px;
}
.neon-section-icon{
width:44px;
height:44px;
flex:none;
display:grid;
place-items:center;
border:1px solid color-mix(in srgb,var(--neon-purple) 42%,transparent);
border-radius:13px;
background:color-mix(in srgb,var(--neon-purple) 16%,rgba(9,9,9,.72));
box-shadow:inset 0 0 18px rgba(224,30,74,.18);
color:var(--neon-purple-bright);
font-size:18px;
line-height:1;
}
.neon-section-copy{
flex:1 1 auto;
min-width:0;
}
.neon-section-copy h2{
margin:0;
font-size:var(--neon-fs-h2);
line-height:1.1;
}
.neon-section-copy p{
margin:5px 0 0;
color:var(--neon-text-muted);
font-size:13px;
line-height:1.55;
}
.neon-section-action{
margin-left:auto;
flex:none;
}
@media (max-width:720px){
.neon-section-title:has(> .neon-section-copy){
flex-wrap:wrap;
gap:12px;
}
.neon-section-icon{
width:38px;
height:38px;
font-size:16px;
}
.neon-section-copy p{
font-size:12px;
}
.neon-section-action{
margin-left:auto;
}
}
/* --------------------------------------------------------------------------
6. AJUSTES NO TEMA CLARO (o seletor de tema continua funcionando)
-------------------------------------------------------------------------- */
body[data-theme="light"] .neon-title,
body[data-theme="light"] .neon-section-title h2{
color:var(--theme-accent-dark);
}
body[data-theme="light"] .neon-glass{
background:rgba(255,255,255,.74);
border-color:var(--line);
}
body[data-theme="light"] .neon-pill{
background:rgba(255,255,255,.88);
border-color:color-mix(in srgb,var(--theme-accent) 42%,var(--line));
color:var(--ink);
}
body[data-theme="light"] .neon-pill:hover{
color:var(--theme-accent-dark);
}
body[data-theme="light"] .neon-icon-btn{
background:rgba(255,255,255,.88);
border-color:var(--line);
color:var(--ink);
}
body[data-theme="light"] .neon-chip{
background:color-mix(in srgb,var(--neon-chip) 12%,#fff);
color:color-mix(in srgb,var(--neon-chip-bright) 62%,#000);
}
body[data-theme="light"] .neon-section-icon{
background:color-mix(in srgb,var(--neon-purple) 12%,#fff);
box-shadow:inset 0 0 18px color-mix(in srgb,var(--neon-purple) 14%,transparent);
}
body[data-theme="light"] .neon-particles-canvas{
display:none;
}
/* --------------------------------------------------------------------------
7. ACESSIBILIDADE — prefers-reduced-motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.neon-title,
.neon-section-title h2,
.neon-holo-border::before{
animation:none;
background-position:0% 50%;
}
body::after{
animation:none;
}
.neon-float,
.neon-pulse{
animation:none;
}
.neon-pill,
.neon-icon-btn,
.neon-chip,
.neon-glass,
.neon-particles-canvas{
transition:none;
}
}
/* --------------------------------------------------------------------------
8. ALINHAMENTO DE PALETA — elementos que vivem em neon-cards.css /
neon-carousel.css
Aqueles dois arquivos são carregados DEPOIS deste e guardam ciano/roxo
"hardcoded" em alguns elementos de moldura (chrome) do site. Como aqui só
se pode mexer no neon-base.css, a correção é feita por duas vias:
8.1 — chrome simples: seletor com prefixo `body` (0,1,1 / 0,2,1), que
vence as regras de classe única dos outros arquivos;
8.2 — cards de produto: regras "moles" com `:where()`, cuja
especificidade é 0 — elas só valem se o arquivo dono do elemento
(neon-cards.css) não declarar a mesma propriedade. Ou seja: são um
FALLBACK de paleta, o dono do arquivo sempre tem a palavra final.
Apenas CORES mudam — nenhum layout é afetado. As cores de CATEGORIA
(--cat-color, vindas do JS) continuam livres: elas são a identidade de cada
categoria e não fazem parte da paleta do site.
-------------------------------------------------------------------------- */
/* --- 8.1 chrome do catálogo e do carrossel --- */
body .neon-outline-btn{
border-color:rgba(224,30,74,.45);
background:rgba(224,30,74,.08);
color:var(--neon-purple-bright);
text-shadow:0 0 10px rgba(224,30,74,.45);
}
body .neon-outline-btn:hover{
border-color:var(--neon-purple-bright);
background:rgba(224,30,74,.14);
box-shadow:0 0 20px rgba(224,30,74,.35);
}
body .section-heading .eyebrow{
color:var(--neon-purple-bright);
}
body .section-heading .eyebrow-line{
background:linear-gradient(90deg,var(--neon-purple),var(--neon-ember));
box-shadow:0 0 10px rgba(224,30,74,.55);
}
/* setas do carrossel: chrome do site (a cor vem de --neon-accent inline) */
body .neon-carousel-arrow{
--neon-accent:var(--neon-purple);
}
/* brilho do slide ativo: o anel é holográfico, o halo é do site */
body .neon-carousel .neon-slide.is-active{
box-shadow:
0 0 30px rgba(224,30,74,.42),
0 0 74px rgba(224,30,74,.20),
0 26px 54px rgba(0,0,0,.6);
}
/* o carrossel mantém um resto da cor da categoria, mas a base é carmim
(a paleta antiga trazia lavanda #a855f7 nalavando o slide inteiro) */
body .neon-carousel .neon-slide-media{
background:radial-gradient(130% 130% at 50% 0%,
color-mix(in srgb,var(--cat-color,var(--neon-purple)) 12%,color-mix(in srgb,var(--neon-purple) 16%,var(--neon-surface))),
var(--neon-surface));
}
body .neon-carousel .neon-slide-count{
background:var(--neon-purple);
color:#fff;
box-shadow:0 0 16px rgba(224,30,74,.5);
}
/* --- 8.2 selos (badges) dos cards --- */
body .neon-badge{
--badge-color:var(--neon-purple);
--badge-glow:224,30,74;
}
body .neon-badge--discount,
body .neon-badge--tone-hot{
--badge-color:var(--neon-pink);
--badge-glow:255,46,136;
}
body .neon-badge--tone-top{
--badge-color:var(--neon-yellow);
--badge-glow:255,212,38;
}
body .neon-badge--tone-novo{
--badge-color:var(--neon-purple-bright);
--badge-glow:255,92,122;
}
body .neon-badge--tone-destaque,
body .neon-badge--category{
--badge-color:var(--neon-ember-bright);
--badge-glow:255,138,61;
}
body .neon-badge--time{
--badge-color:var(--neon-green);
--badge-glow:34,227,154;
}
body .neon-badge--time.is-backorder{
--badge-color:var(--neon-yellow);
--badge-glow:255,212,38;
}
body .neon-badge--time.is-soldout{
--badge-color:var(--neon-red);
--badge-glow:255,59,92;
}
/* --- 8.3 cards de produto (prefixo `body`: vence a regra equivalente de neon-cards.css) --- */
body .product-grid .product-card.product-card:hover{
background:rgba(22,20,21,.94);
border-color:rgba(224,30,74,.55);
box-shadow:
0 22px 48px rgba(0,0,0,.55),
0 0 0 1px rgba(224,30,74,.45),
0 0 24px rgba(224,30,74,.32),
0 0 48px rgba(255,138,61,.16);
}
body .product-grid .product-media{
background:
radial-gradient(120% 92% at 50% 0%, rgba(224,30,74,.16), transparent 62%),
radial-gradient(96% 84% at 100% 100%, rgba(255,138,61,.12), transparent 58%),
var(--neon-base);
}
body .product-grid .product-card.product-card:hover .product-media{
box-shadow:inset 0 0 0 1px rgba(224,30,74,.45),0 0 22px rgba(224,30,74,.16);
}
body .product-grid .product-media .product-icon:not(.has-image){
border:1px solid rgba(224,30,74,.38);
background:linear-gradient(145deg,rgba(224,30,74,.18),rgba(255,138,61,.10));
color:var(--neon-purple-bright);
box-shadow:0 0 18px rgba(224,30,74,.22),inset 0 0 16px rgba(255,138,61,.12);
}
body .product-grid .product-media .product-icon:not(.has-image) .game-icon{
color:var(--neon-purple-bright);
}
body .product-grid .product-card.product-card .game-label{
color:var(--neon-purple-bright);
border-color:rgba(224,30,74,.40);
background:rgba(224,30,74,.10);
text-shadow:0 0 10px rgba(224,30,74,.45);
box-shadow:0 0 12px rgba(224,30,74,.16);
}
body .product-grid .product-card.product-card .product-price strong{
background-image:linear-gradient(96deg,var(--neon-purple) 0%,var(--neon-ember) 48%,var(--neon-yellow) 100%);
filter:drop-shadow(0 0 10px rgba(224,30,74,.28));
}
body .product-grid .product-card.product-card .add-button{
border:1px solid rgba(224,30,74,.34);
background:linear-gradient(180deg,rgba(224,30,74,.12),rgba(224,30,74,.03));
}
body .product-grid .product-card.product-card .add-button > span:last-child{
color:var(--neon-ember-bright);
}
body .product-grid .product-card.product-card.calculator-card{
background:linear-gradient(160deg,rgba(224,30,74,.14),rgba(15,14,15,.92) 62%);
border-color:rgba(224,30,74,.34);
}
body .product-grid .product-card.product-card.calculator-card:hover{
background:linear-gradient(160deg,rgba(224,30,74,.20),rgba(22,20,21,.96) 62%);
border-color:rgba(224,30,74,.6);
}
body .product-grid .product-card.product-card .robux-input-label input:focus{
box-shadow:0 0 0 3px rgba(224,30,74,.22);
}
body .product-grid .product-card.product-card .calculator-result{
border-color:rgba(224,30,74,.32);
background:rgba(224,30,74,.08);
}
body .product-grid .product-card.product-card .calculator-result strong{
color:var(--neon-purple-bright);
text-shadow:0 0 12px rgba(224,30,74,.45);
}
body .product-grid .product-card.product-card h3{
text-shadow:0 0 18px rgba(224,30,74,.16);
}
/* --------------------------------------------------------------------------
9. MOTOR DE PARTÍCULAS (JavaScript)
O arquivo é CSS puro, então o motor abaixo está pronto para ser copiado
para dentro de um
API: window.CrimsonNeonParticles.start(canvas?) e .stop()
- no máximo 60 partículas, requestAnimationFrame com deltaTime
- pausa quando document.hidden
- não desenha nada quando prefers-reduced-motion: reduce
Copie somente o código entre as marcas "".
-------------------------------------------------------------------------- */