/* * Tema "neon" — preto com vermelho, para as paginas publicas do site * (tudo que usa templates/layout.php fora do /admin). * * Carregado DEPOIS de tailwind.css e styles.css em layout.php, e ativado * pela classe .theme-neon no . Por que uma folha separada em vez de * trocar as classes nos templates ou o palette do tailwind.config.js: * * - as paginas publicas usam um conjunto pequeno e repetitivo de utilities * (bg-white, border-slate-200, text-slate-500, bg-green-600...), entao * redefinir essas poucas aqui repinta o site inteiro sem mexer em dezenas * de templates; * - nao cria nenhuma classe nova, entao NAO precisa de `npm run build:css` * (o bundle do Tailwind e estatico neste projeto, nao e JIT); * - o admin-v2 tem layout e bundle proprios (/public/admin-v2/css/app.css), * e o daqui e condicional a !$isAdminArea — o painel nao e afetado; * - reverter e remover um e uma classe, sem git revert. * * Especificidade: as utilities do Tailwind sao seletores de 1 classe; tudo * aqui e' prefixado por `.theme-neon`, o que ja ganha por especificidade sem * precisar de !important (as excecoes estao comentadas caso a caso). */ .theme-neon { /* Superficies: preto levemente azulado, nao #000 puro - preto absoluto achata as sombras e some com a profundidade entre os cards. */ --nx-bg: #07070b; --nx-bg-soft: #0c0c12; --nx-surface: #12121b; --nx-surface-2: #181824; --nx-surface-3: #1f1f2d; --nx-text: #f3f4f8; --nx-text-muted: #a2a8b8; --nx-text-faint: #6e7484; --nx-border: rgba(255, 255, 255, 0.09); --nx-border-strong: rgba(255, 255, 255, 0.16); --nx-red: #ff2d46; --nx-red-soft: #ff6173; --nx-red-deep: #b00019; --nx-red-ink: #2a0209; --nx-glow: rgba(255, 45, 70, 0.42); --nx-glow-soft: rgba(255, 45, 70, 0.16); --nx-gradient: linear-gradient(135deg, #ff2d46 0%, #c40021 55%, #7d0012 100%); --nx-ease: cubic-bezier(0.22, 0.85, 0.3, 1); background-color: var(--nx-bg); color: var(--nx-text); /* A utility bg-[#f7f8f6] no tem a mesma especificidade que .theme-neon (1 classe cada) e vence por vir depois no cascade - este e' o unico ponto onde o !important e inevitavel sem editar o template. */ background-color: var(--nx-bg) !important; /* Rodape colado no fim da janela. No tema claro isso passava despercebido, mas no escuro uma pagina curta (ex.: /contato) deixava o rodape boiando no meio da tela com um bloco preto morto embaixo. */ display: flex; flex-direction: column; min-height: 100vh; } .theme-neon > footer { margin-top: auto; } /* --------------------------------------------------------------------- Fundo: brilhos vermelhos fixos + malha sutil. Em ::before pra rolar por baixo do conteudo sem custar repaint (fixed + pointer-events:none). --------------------------------------------------------------------- */ .theme-neon::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 40rem at 15% -10%, rgba(255, 45, 70, 0.16), transparent 60%), radial-gradient(45rem 35rem at 95% 8%, rgba(160, 0, 40, 0.14), transparent 62%), radial-gradient(50rem 40rem at 50% 105%, rgba(255, 45, 70, 0.09), transparent 65%), linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 64px 100%; } .theme-neon > * { position: relative; z-index: 1; /* O virou flex container (rodape colado embaixo, acima) e item de flex tem min-width:auto, ou seja, nao encolhe abaixo da largura do proprio conteudo. Preventivo: hoje nenhuma pagina estoura, mas sem isso um grid ou tabela larga passaria a esticar a pagina inteira em vez de gerar scroll so no proprio bloco. */ min-width: 0; } /* --------------------------------------------------------------------- Superficies --------------------------------------------------------------------- */ .theme-neon .bg-white { background-color: var(--nx-surface); border-color: var(--nx-border); } .theme-neon .bg-slate-50 { background-color: var(--nx-surface-2); } .theme-neon .bg-slate-100 { background-color: var(--nx-surface-2); } .theme-neon .bg-slate-200 { background-color: var(--nx-surface-3); } .theme-neon .bg-slate-950 { background-color: var(--nx-surface-3); } /* bg-slate-950 era "o botao preto" do tema claro (newsletter, acoes secundarias). Num fundo preto ele vira um retangulo apagado, entao quando e' de fato um botao/link de acao recebe o acento vermelho. */ .theme-neon button.bg-slate-950, .theme-neon a.bg-slate-950, .theme-neon input[type="submit"].bg-slate-950 { background: var(--nx-gradient); color: #fff; box-shadow: 0 6px 22px -6px var(--nx-glow); transition: box-shadow 0.3s var(--nx-ease), transform 0.2s var(--nx-ease), background 0.3s var(--nx-ease); } .theme-neon button.bg-slate-950:hover, .theme-neon a.bg-slate-950:hover, .theme-neon input[type="submit"].bg-slate-950:hover { background: linear-gradient(135deg, #ff4459, #d90025 55%, #930016); box-shadow: 0 12px 30px -6px var(--nx-glow); transform: translateY(-1px); } /* Selo do topo na pagina de produto (templates/store/show.php), o unico lugar que usa a paleta lime direto. */ .theme-neon .bg-lime-400 { background: var(--nx-gradient); } .theme-neon .text-lime-950 { color: #fff; } .theme-neon .hover\:bg-slate-50:hover { background-color: var(--nx-surface-3); } .theme-neon .hover\:bg-slate-800:hover { background-color: var(--nx-surface-3); } /* --------------------------------------------------------------------- Texto. slate-950 era "o mais escuro" no tema claro: no escuro ele vira o mais claro, entao a escala inteira inverte. --------------------------------------------------------------------- */ .theme-neon .text-slate-950, .theme-neon .text-black { color: var(--nx-text); } .theme-neon .text-slate-700, .theme-neon .text-slate-600 { color: var(--nx-text-muted); } .theme-neon .text-slate-500, .theme-neon .text-slate-400 { color: var(--nx-text-faint); } .theme-neon .text-white { color: var(--nx-text); } .theme-neon .hover\:text-slate-950:hover { color: var(--nx-red-soft); } /* --------------------------------------------------------------------- Bordas e divisores --------------------------------------------------------------------- */ .theme-neon .border-slate-200, .theme-neon .border-slate-300, .theme-neon .border-black\/5 { border-color: var(--nx-border); } .theme-neon .divide-slate-200 > * + * { border-color: var(--nx-border); } .theme-neon .ring-black\/5 { --tw-ring-color: var(--nx-border); } /* Sombras pretas somem no escuro; viram brilho vermelho. */ .theme-neon .shadow, .theme-neon .shadow-sm, .theme-neon .shadow-lg { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--nx-border); } /* --------------------------------------------------------------------- Acento: o verde da marca vira vermelho. Mantem o papel semantico (acao principal, preco, link de destaque), so muda a cor. --------------------------------------------------------------------- */ .theme-neon .text-green-700, .theme-neon .text-green-600 { color: var(--nx-red-soft); } .theme-neon .hover\:text-green-900:hover { color: #fff; text-shadow: 0 0 14px var(--nx-glow); } .theme-neon .border-green-200, .theme-neon .border-green-600 { border-color: rgba(255, 45, 70, 0.4); } .theme-neon .bg-green-50 { background-color: rgba(255, 45, 70, 0.09); } .theme-neon .bg-green-600 { background: var(--nx-gradient); color: #fff; box-shadow: 0 6px 22px -6px var(--nx-glow); } .theme-neon .hover\:bg-green-700:hover { background: linear-gradient(135deg, #ff4459 0%, #d90025 55%, #930016 100%); box-shadow: 0 10px 30px -6px var(--nx-glow); } .theme-neon .focus\:border-green-500:focus { border-color: var(--nx-red); box-shadow: 0 0 0 3px var(--nx-glow-soft); } /* --------------------------------------------------------------------- Estados de sistema. O acento agora e vermelho, entao erro nao pode se distinguir so pela cor: ganha barra lateral solida e fundo mais denso. Aviso continua ambar, que segue legivel contra o vermelho. --------------------------------------------------------------------- */ .theme-neon .bg-red-50 { background-color: rgba(120, 0, 20, 0.28); border-left: 3px solid #ff3b52; } .theme-neon .border-red-200 { border-color: rgba(255, 59, 82, 0.45); } .theme-neon .text-red-700, .theme-neon .text-red-600 { color: #ff9aa6; } .theme-neon .bg-amber-50 { background-color: rgba(120, 78, 0, 0.26); } .theme-neon .border-amber-200 { border-color: rgba(245, 180, 60, 0.4); } .theme-neon .text-amber-700 { color: #f7ce7a; } /* --------------------------------------------------------------------- Header: fixo no topo, vidro fosco e um fio vermelho embaixo. --------------------------------------------------------------------- */ .theme-neon > header { position: sticky; top: 0; z-index: 40; background: rgba(7, 7, 11, 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--nx-red), transparent) 1; box-shadow: 0 1px 30px -10px var(--nx-glow); } /* O logo e arte escura sobre fundo transparente - sumiria no preto. */ .theme-neon > header .brand-mark img { filter: brightness(0) invert(1); transition: filter 0.3s var(--nx-ease); } .theme-neon > header .brand-mark:hover img { filter: brightness(0) invert(1) drop-shadow(0 0 10px var(--nx-glow)); } /* Sublinhado que cresce da esquerda nos links da navegacao. */ .theme-neon > header nav > a, .theme-neon > header nav [data-dropdown-toggle] { position: relative; transition: color 0.25s var(--nx-ease); } .theme-neon > header nav > a::after, .theme-neon > header nav [data-dropdown-toggle]::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--nx-red), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--nx-ease); } .theme-neon > header nav > a:hover::after, .theme-neon > header nav [data-dropdown-toggle]:hover::after { transform: scaleX(1); } .theme-neon [data-dropdown-menu] { background: rgba(18, 18, 27, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--nx-border-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--nx-glow-soft); } /* --------------------------------------------------------------------- Cards: vidro escuro que sobe e acende no hover. --------------------------------------------------------------------- */ .theme-neon .course-card { background: linear-gradient(160deg, var(--nx-surface-2), var(--nx-surface)); border: 1px solid var(--nx-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: transform 0.35s var(--nx-ease), box-shadow 0.35s var(--nx-ease), border-color 0.35s var(--nx-ease); } .theme-neon .course-card:hover { transform: translateY(-6px); border-color: rgba(255, 45, 70, 0.45); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65), 0 0 34px -10px var(--nx-glow); } /* Boa parte das artes de produto tem fundo branco e, num card preto, o corte entre imagem e card fica duro. Esta camada escurece as bordas e derrete a base da imagem no card - trata a arte existente sem precisar reexportar nenhum PNG. */ .theme-neon .course-card > a > div:first-child { position: relative; } .theme-neon .course-card > a > div:first-child::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, rgba(18, 18, 27, 0.55) 88%, var(--nx-surface) 100%); box-shadow: inset 0 0 70px 12px rgba(7, 7, 11, 0.45); transition: opacity 0.35s var(--nx-ease); } .theme-neon .course-card:hover > a > div:first-child::after { opacity: 0.65; } /* Mesmo tratamento pros "cards" montados so com utilities. */ .theme-neon .bg-white.shadow, .theme-neon .bg-white.shadow-sm, .theme-neon .bg-white.shadow-lg { background: linear-gradient(160deg, var(--nx-surface-2), var(--nx-surface)); transition: transform 0.35s var(--nx-ease), box-shadow 0.35s var(--nx-ease), border-color 0.35s var(--nx-ease); } /* --------------------------------------------------------------------- Botao de compra (.buy-button, definido em styles.css com verde fixo) --------------------------------------------------------------------- */ .theme-neon .buy-button { position: relative; overflow: hidden; background: var(--nx-gradient); box-shadow: 0 8px 26px -8px var(--nx-glow); } /* Brilho que atravessa o botao no hover. */ .theme-neon .buy-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.32) 50%, transparent 80%); transform: translateX(-120%); transition: transform 0.7s var(--nx-ease); } .theme-neon .buy-button:hover::after, .theme-neon .buy-button.is-hovered::after { transform: translateX(120%); } .theme-neon .buy-button:hover, .theme-neon .buy-button.is-hovered { background: linear-gradient(135deg, #ff4459, #d90025 55%, #930016); box-shadow: 0 14px 34px -8px var(--nx-glow); transform: translateY(-2px); } /* --------------------------------------------------------------------- Formularios --------------------------------------------------------------------- */ .theme-neon input:not([type="checkbox"]):not([type="radio"]), .theme-neon select, .theme-neon textarea { background-color: var(--nx-surface-2); border-color: var(--nx-border-strong); color: var(--nx-text); transition: border-color 0.25s var(--nx-ease), box-shadow 0.25s var(--nx-ease), background-color 0.25s var(--nx-ease); } .theme-neon input::placeholder, .theme-neon textarea::placeholder { color: var(--nx-text-faint); } .theme-neon input:focus, .theme-neon select:focus, .theme-neon textarea:focus { border-color: var(--nx-red); background-color: var(--nx-surface-3); box-shadow: 0 0 0 3px var(--nx-glow-soft); outline: none; } .theme-neon input[type="checkbox"], .theme-neon input[type="radio"] { accent-color: var(--nx-red); } /* --------------------------------------------------------------------- Detalhes herdados de styles.css que ficariam claros demais --------------------------------------------------------------------- */ .theme-neon .badge.green { background: var(--nx-gradient); color: #fff; } .theme-neon .badge.gold { background: linear-gradient(135deg, #f7ce7a, #c98f21); color: var(--nx-red-ink); } .theme-neon .star.is-empty { color: #2e2e3c; } .theme-neon .star-rating { background: linear-gradient(90deg, #ffb800 var(--rating), #2e2e3c var(--rating)); } .theme-neon .payment-chip { background: var(--nx-surface-3); box-shadow: inset 0 0 0 1px var(--nx-border-strong); color: var(--nx-text-muted); } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .theme-neon > footer { background: linear-gradient(180deg, transparent, rgba(255, 45, 70, 0.05)), var(--nx-bg-soft); border-top: 1px solid var(--nx-border); position: relative; } .theme-neon > footer::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: min(38rem, 70%); height: 1px; background: linear-gradient(90deg, transparent, var(--nx-red), transparent); } /* --------------------------------------------------------------------- Transicoes de entrada. .nx-reveal e aplicado por public/js/theme-neon.js (IntersectionObserver); sem JS nada fica escondido, porque o estado inicial so e aplicado depois que a classe .nx-js entra no . --------------------------------------------------------------------- */ @keyframes nx-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .theme-neon > header { animation: nx-fade-up 0.5s var(--nx-ease) both; } .nx-js .theme-neon .nx-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--nx-ease), transform 0.6s var(--nx-ease); transition-delay: var(--nx-delay, 0ms); } .nx-js .theme-neon .nx-reveal.is-visible { opacity: 1; transform: none; } /* Acessibilidade: quem pediu menos movimento no sistema nao recebe nenhuma das animacoes acima. */ @media (prefers-reduced-motion: reduce) { .theme-neon *, .theme-neon *::before, .theme-neon *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .nx-js .theme-neon .nx-reveal { opacity: 1; transform: none; } }