/* ========================================================= TEMA: DEFINYA-BRICK ESTILO: ANIME MMORPG / DARK FANTASY / MARKETPLACE GAMER --------------------------------------------------------- IMPORTANTE: Este arquivo só afeta a loja com slug: definya-brick porque o body do sistema carrega assim: Caminho no servidor: /assets/css/themes/definya-brick.css ========================================================= */ /* ========================================================= 1. VARIÁVEIS DO TEMA ========================================================= */ body.loja-definya-brick { --primary: #37e8ff; --primary-dark: #0477ff; --secondary: #9b5cff; --accent: #facc15; --danger: #ff3864; --bg: #060816; --bg-2: #0b1027; --surface: rgba(11, 16, 39, 0.88); --surface-2: rgba(18, 25, 56, 0.94); --text: #ffffff; --muted: #b9c7ff; --line: rgba(55, 232, 255, 0.25); --glow-blue: 0 0 18px rgba(55, 232, 255, 0.45), 0 0 42px rgba(4, 119, 255, 0.22); --glow-purple: 0 0 18px rgba(155, 92, 255, 0.45), 0 0 42px rgba(155, 92, 255, 0.18); --glow-gold: 0 0 16px rgba(250, 204, 21, 0.38); background: radial-gradient(circle at 14% 12%, rgba(55, 232, 255, 0.18), transparent 28%), radial-gradient(circle at 86% 8%, rgba(155, 92, 255, 0.20), transparent 30%), radial-gradient(circle at 50% 100%, rgba(250, 204, 21, 0.08), transparent 38%), linear-gradient(180deg, #050612 0%, #0a0f24 42%, #050612 100%); color: var(--text); position: relative; overflow-x: hidden; } /* Camada de estrelas e magia no fundo */ body.loja-definya-brick::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px), radial-gradient(circle, rgba(55,232,255,.45) 1px, transparent 1.5px), linear-gradient(115deg, transparent 0%, rgba(55,232,255,.05) 48%, transparent 58%); background-size: 90px 90px, 150px 150px, 100% 100%; background-position: 0 0, 35px 45px, center; opacity: .45; animation: definyaStars 18s linear infinite; } body.loja-definya-brick::after { content: ""; position: fixed; inset: auto -15% -35% -15%; height: 460px; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(55,232,255,.18), transparent 62%); filter: blur(20px); } @keyframes definyaStars { from { background-position: 0 0, 35px 45px, center; } to { background-position: 90px 90px, 185px 195px, center; } } /* ========================================================= 2. HEADER MMORPG ========================================================= */ body.loja-definya-brick .site-header { background: rgba(4, 6, 18, 0.94); border-bottom: 1px solid rgba(55,232,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.55), var(--glow-blue); backdrop-filter: blur(14px); } body.loja-definya-brick .header-top { padding: 16px 0; background: linear-gradient(135deg, rgba(55,232,255,.18), transparent 28%), linear-gradient(270deg, rgba(155,92,255,.20), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-bottom: 1px solid rgba(55,232,255,.18); } body.loja-definya-brick .header-top-inner { display: grid; grid-template-columns: auto minmax(260px, 1fr) auto; align-items: center; gap: 24px; } body.loja-definya-brick .brand-area { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 280px; } body.loja-definya-brick .brand-logo, body.loja-definya-brick .brand-logo-fallback { width: 82px; height: 82px; padding: 6px; border-radius: 24px; object-fit: contain; background: linear-gradient(145deg, rgba(55,232,255,.18), rgba(155,92,255,.12)), rgba(3, 6, 18, .95); border: 2px solid rgba(55,232,255,.72); box-shadow: var(--glow-blue), inset 0 0 20px rgba(255,255,255,.06); } body.loja-definya-brick .brand-mini { color: var(--accent) !important; font-size: 12px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; text-shadow: var(--glow-gold); } body.loja-definya-brick .brand-name { display: block; color: #ffffff !important; font-size: 23px; line-height: 1.05; font-weight: 950; text-shadow: 0 0 18px rgba(55,232,255,.45); } body.loja-definya-brick .brand-subtitle { color: #cdd7ff !important; font-size: 12px; font-weight: 800; } /* ========================================================= 3. BUSCA ========================================================= */ body.loja-definya-brick .header-search { width: 100%; max-width: 620px; margin: 0 auto; display: flex; overflow: hidden; border-radius: 999px; background: rgba(3, 8, 24, .92); border: 1px solid rgba(55,232,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), var(--glow-blue); } body.loja-definya-brick .header-search input { flex: 1; min-width: 0; height: 54px; border: 0; padding: 0 22px; background: transparent; color: #ffffff; font-weight: 850; outline: none; } body.loja-definya-brick .header-search input::placeholder { color: rgba(205,215,255,.72); } body.loja-definya-brick .header-search button { height: 54px; border: 0; padding: 0 30px; background: linear-gradient(135deg, #37e8ff, #0477ff 58%, #9b5cff); color: #ffffff; font-weight: 950; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 0 0 20px rgba(255,255,255,.20); } body.loja-definya-brick .header-search button:hover { filter: brightness(1.15); } /* ========================================================= 4. BOTÕES DO HEADER ========================================================= */ body.loja-definya-brick .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } body.loja-definya-brick .header-actions a { min-height: 48px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; font-weight: 950; transition: .25s ease; color: #ffffff; } body.loja-definya-brick .header-link { background: rgba(255,255,255,.06); border: 1px solid rgba(55,232,255,.35); } body.loja-definya-brick .header-cart-btn { background: linear-gradient(135deg, #9b5cff, #0477ff); border: 1px solid rgba(255,255,255,.18); box-shadow: var(--glow-purple); } body.loja-definya-brick .header-whatsapp-btn { background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 10px 28px rgba(37,211,102,.28); } body.loja-definya-brick .header-actions a:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.10); } /* ========================================================= 5. MENU ABAIXO DO HEADER ========================================================= */ body.loja-definya-brick .header-bottom { background: rgba(2, 5, 18, .94); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(55,232,255,.18); } body.loja-definya-brick .header-bottom-inner { min-height: 48px; } body.loja-definya-brick .header-nav a { color: #dbe7ff; font-weight: 950; text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; position: relative; } body.loja-definya-brick .header-nav a:hover { color: #37e8ff; text-shadow: var(--glow-blue); } body.loja-definya-brick .header-highlight { color: #fef3c7; font-weight: 900; text-shadow: var(--glow-gold); } /* ========================================================= 6. HERO EXCLUSIVA DO DEFINYA-BRICK Esta seção aparece no pages/loja.php quando slug = definya-brick ========================================================= */ body.loja-definya-brick .definya-hero { margin: 28px 0 28px; padding: 34px; border-radius: 30px; position: relative; overflow: hidden; border: 1px solid rgba(55,232,255,.30); background: radial-gradient(circle at 14% 20%, rgba(55,232,255,.20), transparent 32%), radial-gradient(circle at 86% 20%, rgba(155,92,255,.24), transparent 34%), linear-gradient(135deg, rgba(10,16,43,.96), rgba(3,6,18,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.55), var(--glow-blue); } body.loja-definya-brick .definya-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 46%, transparent 56%), radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px); background-size: 100% 100%, 70px 70px; opacity: .42; pointer-events: none; } body.loja-definya-brick .definya-hero-content { position: relative; z-index: 1; max-width: 860px; } body.loja-definya-brick .definya-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: #07111f; background: linear-gradient(135deg, #facc15, #fff1a6); font-weight: 950; text-transform: uppercase; letter-spacing: .08em; box-shadow: var(--glow-gold); } body.loja-definya-brick .definya-hero h1 { margin: 18px 0 12px; color: #ffffff; font-size: clamp(34px, 5vw, 68px); line-height: .95; font-weight: 1000; letter-spacing: -.04em; text-transform: uppercase; text-shadow: 0 0 25px rgba(55,232,255,.50), 0 0 42px rgba(155,92,255,.26); } body.loja-definya-brick .definya-hero p { margin: 0 0 22px; color: #dbe7ff; font-size: 17px; line-height: 1.65; font-weight: 750; max-width: 720px; } body.loja-definya-brick .definya-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } body.loja-definya-brick .definya-hero-actions a { min-height: 52px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 950; transition: .25s ease; } body.loja-definya-brick .definya-btn-primary { color: #ffffff; background: linear-gradient(135deg, #37e8ff, #0477ff 55%, #9b5cff); box-shadow: var(--glow-blue); } body.loja-definya-brick .definya-btn-secondary { color: #fef3c7; border: 1px solid rgba(250,204,21,.44); background: rgba(255,255,255,.06); } body.loja-definya-brick .definya-hero-actions a:hover { transform: translateY(-2px); filter: brightness(1.12); } body.loja-definya-brick .definya-stats { position: relative; z-index: 1; margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.loja-definya-brick .definya-stat { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.055); border: 1px solid rgba(55,232,255,.18); box-shadow: inset 0 0 20px rgba(255,255,255,.03); } body.loja-definya-brick .definya-stat strong { display: block; color: #37e8ff; font-size: 24px; font-weight: 1000; text-shadow: var(--glow-blue); } body.loja-definya-brick .definya-stat span { color: #cdd7ff; font-weight: 800; font-size: 13px; } /* ========================================================= 7. CARDS / PRODUTOS ========================================================= */ body.loja-definya-brick .section-card, body.loja-definya-brick .produto-card, body.loja-definya-brick .relacionado-card, body.loja-definya-brick .checkout-formulario, body.loja-definya-brick .checkout-resumo, body.loja-definya-brick .carrinho-box, body.loja-definya-brick .produto-detalhe { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), rgba(8, 13, 34, .92); color: #ffffff; border: 1px solid rgba(55,232,255,.24); box-shadow: 0 20px 52px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.035); backdrop-filter: blur(10px); } body.loja-definya-brick .produto-card, body.loja-definya-brick .relacionado-card { position: relative; overflow: hidden; } body.loja-definya-brick .produto-card::before, body.loja-definya-brick .relacionado-card::before { content: "ÉPICO"; position: absolute; top: 12px; left: 12px; z-index: 2; padding: 7px 10px; border-radius: 999px; background: linear-gradient(135deg, #9b5cff, #37e8ff); color: #ffffff; font-size: 11px; font-weight: 950; letter-spacing: .08em; box-shadow: var(--glow-purple); } body.loja-definya-brick .produto-card:hover, body.loja-definya-brick .relacionado-card:hover { border-color: rgba(55,232,255,.78); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.50), var(--glow-blue); } body.loja-definya-brick .produto-thumb, body.loja-definya-brick .produto-galeria-completa, body.loja-definya-brick .imagem-principal-area { background: radial-gradient(circle at center, rgba(55,232,255,.14), transparent 55%), rgba(4, 7, 20, .78); } body.loja-definya-brick .produto-thumb img, body.loja-definya-brick .produto-imagem-principal, body.loja-definya-brick .relacionado-imagem { filter: drop-shadow(0 16px 24px rgba(0,0,0,.42)); } body.loja-definya-brick .produto-card h3, body.loja-definya-brick .relacionado-card h3, body.loja-definya-brick .produto-info h1, body.loja-definya-brick .loja-toolbar h2, body.loja-definya-brick .secao-topo h2, body.loja-definya-brick .relacionados h2 { color: #ffffff; text-shadow: 0 0 16px rgba(55,232,255,.26); } body.loja-definya-brick .produto-card a, body.loja-definya-brick .relacionado-card a { color: inherit; } body.loja-definya-brick .produto-card p, body.loja-definya-brick .produto-descricao, body.loja-definya-brick .produto-descricao-completa, body.loja-definya-brick .loja-toolbar p, body.loja-definya-brick .secao-topo p { color: #cdd7ff; } /* Preço com aparência de moeda rara */ body.loja-definya-brick .produto-preco, body.loja-definya-brick .relacionado-preco { color: #facc15; font-weight: 1000; text-shadow: var(--glow-gold); } /* ========================================================= 8. BOTÕES DE VENDA ========================================================= */ body.loja-definya-brick .btn-principal, body.loja-definya-brick .btn-ver-produto, body.loja-definya-brick .btn-card-loja, body.loja-definya-brick .btn-carrinho { background: linear-gradient(135deg, #37e8ff, #0477ff 55%, #9b5cff); color: #ffffff; font-weight: 950; border: 0; box-shadow: var(--glow-blue); } body.loja-definya-brick .btn-comprar { background: linear-gradient(135deg, #facc15, #ff9f1c, #ff3864); color: #160b00; font-weight: 1000; border: 0; box-shadow: var(--glow-gold); } body.loja-definya-brick .btn-ir-carrinho, body.loja-definya-brick .voltar-loja { background: rgba(255,255,255,.06); color: #dbe7ff; border: 1px solid rgba(55,232,255,.28); } body.loja-definya-brick .btn-principal:hover, body.loja-definya-brick .btn-ver-produto:hover, body.loja-definya-brick .btn-carrinho:hover, body.loja-definya-brick .btn-comprar:hover, body.loja-definya-brick .btn-ir-carrinho:hover, body.loja-definya-brick .voltar-loja:hover { transform: translateY(-2px); filter: brightness(1.12); } /* ========================================================= 9. PROMOÇÕES / ESTEIRA ========================================================= */ body.loja-definya-brick .promocoes-esteira-wrap { border-radius: 26px; padding: 22px; background: rgba(8, 13, 34, .58); border: 1px solid rgba(55,232,255,.18); box-shadow: 0 20px 50px rgba(0,0,0,.35); } body.loja-definya-brick .promo-card { background: rgba(5, 9, 25, .94); border: 1px solid rgba(155,92,255,.28); box-shadow: var(--glow-purple); } body.loja-definya-brick .promo-card-body span { color: #facc15; font-weight: 950; } body.loja-definya-brick .promo-card-body h3 { color: #ffffff; } body.loja-definya-brick .promo-card-body p { color: #cdd7ff; } /* ========================================================= 10. INPUTS / CHECKOUT / FORMULÁRIOS ========================================================= */ body.loja-definya-brick input, body.loja-definya-brick select, body.loja-definya-brick textarea { background: rgba(3, 8, 24, .92); color: #ffffff; border: 1px solid rgba(55,232,255,.32); } body.loja-definya-brick input:focus, body.loja-definya-brick select:focus, body.loja-definya-brick textarea:focus { border-color: #37e8ff; outline: none; box-shadow: 0 0 0 3px rgba(55,232,255,.14), var(--glow-blue); } /* ========================================================= 11. CHIPS / BADGES ========================================================= */ body.loja-definya-brick .loja-chip, body.loja-definya-brick .produto-badge, body.loja-definya-brick .tag { background: rgba(55,232,255,.10); color: #dbe7ff; border: 1px solid rgba(55,232,255,.32); box-shadow: inset 0 0 18px rgba(55,232,255,.08); } /* ========================================================= 12. PRODUTO.PHP — DESCRIÇÃO / GALERIA ========================================================= */ body.loja-definya-brick .bloco-descricao, body.loja-definya-brick .produto-descricao-completa { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(5, 9, 25, .90) !important; color: #dbe7ff !important; border: 1px solid rgba(55,232,255,.25) !important; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 35px rgba(0,0,0,.35); } body.loja-definya-brick .bloco-descricao { padding: 0; } body.loja-definya-brick .bloco-descricao h2 { color: #ffffff !important; margin-bottom: 14px; text-shadow: 0 0 18px rgba(55,232,255,.35); } body.loja-definya-brick .produto-descricao-completa { padding: 22px 18px; line-height: 1.75; font-size: 15px; } body.loja-definya-brick .produto-info { color: #ffffff; } body.loja-definya-brick .produto-info h1 { color: #ffffff !important; } body.loja-definya-brick .produto-info label { color: #fef3c7; font-weight: 900; } body.loja-definya-brick .produto-acoes { color: #ffffff; } body.loja-definya-brick #qtd { background: rgba(3, 8, 24, .92) !important; color: #ffffff !important; border: 1px solid rgba(55,232,255,.35) !important; } body.loja-definya-brick .miniatura { border: 1px solid rgba(55,232,255,.28); background: rgba(3, 8, 24, .86); } body.loja-definya-brick .miniatura.ativa, body.loja-definya-brick .miniatura:hover { border-color: #37e8ff; box-shadow: var(--glow-blue); } /* ========================================================= 13. FOOTER ========================================================= */ body.loja-definya-brick footer, body.loja-definya-brick .site-footer { background: rgba(3, 6, 18, .96); color: #cdd7ff; border-top: 1px solid rgba(55,232,255,.20); box-shadow: 0 -18px 50px rgba(0,0,0,.42); } body.loja-definya-brick .footer-col h3, body.loja-definya-brick .footer-col h4 { color: #37e8ff; text-shadow: var(--glow-blue); } /* ========================================================= 14. RESPONSIVO ========================================================= */ @media (max-width: 1024px) { body.loja-definya-brick .header-top-inner { grid-template-columns: 1fr; gap: 16px; } body.loja-definya-brick .brand-area { min-width: 0; justify-content: center; } body.loja-definya-brick .header-search { max-width: 100%; } body.loja-definya-brick .header-actions { justify-content: center; flex-wrap: wrap; } body.loja-definya-brick .definya-stats { grid-template-columns: 1fr; } } @media (max-width: 640px) { body.loja-definya-brick .header-top { padding: 12px 0; } body.loja-definya-brick .brand-area { justify-content: flex-start; } body.loja-definya-brick .brand-logo, body.loja-definya-brick .brand-logo-fallback { width: 64px; height: 64px; border-radius: 18px; } body.loja-definya-brick .brand-name { font-size: 18px; } body.loja-definya-brick .header-search { border-radius: 18px; flex-direction: column; } body.loja-definya-brick .header-search input, body.loja-definya-brick .header-search button { width: 100%; height: 48px; } body.loja-definya-brick .header-actions { display: grid; grid-template-columns: 1fr; width: 100%; } body.loja-definya-brick .header-actions a { width: 100%; } body.loja-definya-brick .header-bottom { overflow-x: auto; white-space: nowrap; } body.loja-definya-brick .definya-hero { padding: 24px 18px; border-radius: 22px; } body.loja-definya-brick .definya-hero h1 { font-size: 34px; } }