/* ═══════════════════════════════════════════════════════ ROGUE XPRESS — TEMAS POR PRODUTO Cada página de produto declara data-tema="" no . Aqui só sobrescrevemos as variáveis que base.css/product.css e checkout.css já usam — nenhum seletor de componente é tocado, então o layout continua idêntico e só a identidade muda. A cor de cada tema vem do próprio produto (embalagem, material ou o universo em que ele é usado), não de gosto pessoal. --logo-hue gira o matiz da logo para acompanhar o tema. Como a logo é bicolor (navy + dourado), o giro preserva a relação entre as duas cores em vez de achatar tudo numa cor só. ═══════════════════════════════════════════════════════ */ /* Aplica o giro de matiz na logo, no header, no menu e no rodapé */ .site-header__logo img, .side-menu__header img, .site-footer__logo img, .ck-logo-img { filter: hue-rotate(var(--logo-hue, 0deg)) saturate(var(--logo-sat, 1)) grayscale(var(--logo-gray, 0)); transition: filter 0.3s; } /* Ícones que antes tinham o dourado escrito dentro do SVG agora usam currentColor — a cor vem daqui e acompanha o tema da página. */ .trust-item svg { color: var(--gold); } .hero__bullets svg { color: var(--gold-light); } /* ── NEUTRO — preto e branco ── É o tema das páginas compartilhadas (home, conta, rastreio, políticas). Como cada produto tem a sua cor, a home precisa ser neutra: senão o cliente sai de uma página vermelha para uma dourada e o site parece de outra loja. Preto e branco não briga com cor nenhuma. */ [data-tema="neutro"] { --gold: #1F1F1F; --gold-light: #454545; --gold-dark: #000000; --gold-soft: #F4F4F4; --navy: #121212; --navy-dark: #000000; --navy-light: #2E2E2E; --logo-gray: 1; } /* O acento também é usado como TEXTO sobre fundo escuro (olho do hero, palavra destacada no título, chip ativo). No tema neutro o acento é quase preto, então nesses pontos ele vira branco para continuar legível. */ [data-tema="neutro"] .hero__eyebrow, [data-tema="neutro"] .hero__title em, [data-tema="neutro"] .cat-chip--active small, [data-tema="neutro"] .section--navy .gold, [data-tema="neutro"] .final-cta .gold { color: #FFFFFF; } /* Botão fantasma do hero: a borda clara é o que o desenha */ [data-tema="neutro"] .hero__cta--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; } /* O quadradinho dos bullets fica branco sobre o hero escuro — o check dentro dele é azul-escuro e só é legível sobre fundo claro. */ [data-tema="neutro"] .hero__bullets svg { color: #FFFFFF; } /* Selo de desconto e etiqueta do card: no neutro, preto com texto branco */ [data-tema="neutro"] .product-card__off { background: #121212; } /* ── MÁQUINA DE SOLDA — dourado industrial (identidade da casa) ── */ [data-tema="maquina-de-solda"] { --logo-hue: 0deg; } /* ── DRONE DE CORRIDA — vermelho de pista ── */ [data-tema="drone-de-corrida"] { --gold: #D22B2B; --gold-light: #E84A4A; --gold-dark: #A11B1B; --gold-soft: #FDECEC; --navy: #1A1A1F; --navy-dark: #0D0D10; --navy-light: #33333D; --logo-hue: 315deg; --logo-sat: 1.15; } /* ── KIT 4 CALÇAS — verde militar de trabalho ── */ [data-tema="kit-4-calcas"] { --gold: #6B7A3A; --gold-light: #87994B; --gold-dark: #4F5A2A; --gold-soft: #F3F5EA; --navy: #2E3324; --navy-dark: #1D2017; --navy-light: #4A5139; --logo-hue: 55deg; --logo-sat: 0.85; } /* ── LAVADORA DE ALTA PRESSÃO — turquesa de água ── */ [data-tema="lavadora-alta-pressao"] { --gold: #0E8C99; --gold-light: #16A9B8; --gold-dark: #0A6670; --gold-soft: #E6F6F8; --navy: #10303A; --navy-dark: #0A2028; --navy-light: #1C4A58; --logo-hue: 150deg; --logo-sat: 1.05; } /* ── JAQUETA TÉRMICA — bronze sobre preto ── */ [data-tema="jaqueta-termica"] { --gold: #A8763F; --gold-light: #C48F52; --gold-dark: #7C552B; --gold-soft: #F7F0E8; --navy: #17161A; --navy-dark: #0C0B0E; --navy-light: #2E2C33; --logo-hue: 348deg; --logo-sat: 0.9; } /* ── KIT 3 CAMISAS — azul social ── */ [data-tema="kit-3-camisas"] { --gold: #2B5BA8; --gold-light: #3D74C9; --gold-dark: #1E4179; --gold-soft: #EAF1FB; --navy: #11213D; --navy-dark: #0A1528; --navy-light: #1E3868; --logo-hue: 178deg; --logo-sat: 1.1; } /* ── PISTOLA DE PINTURA — amarelo-limão da ferramenta ── */ [data-tema="pistola-pintura"] { --gold: #A8B517; --gold-light: #C5D423; --gold-dark: #7C860F; --gold-soft: #F7FAE3; --navy: #23261A; --navy-dark: #151710; --navy-light: #3D4230; --logo-hue: 25deg; --logo-sat: 1.2; } /* ── ESCOVA MODELADORA — rosé sobre preto ── */ [data-tema="escova-modeladora"] { --gold: #C08262; --gold-light: #D89C7C; --gold-dark: #966045; --gold-soft: #FBF1EC; --navy: #1C1719; --navy-dark: #100D0E; --navy-light: #352C30; --logo-hue: 340deg; --logo-sat: 0.75; } /* ── MALA DE CABINE — azul de aeroporto ── */ [data-tema="mala-cabine"] { --gold: #1F63C4; --gold-light: #3480E0; --gold-dark: #164791; --gold-soft: #E8F0FC; --navy: #14181F; --navy-dark: #0B0E13; --navy-light: #2A3340; --logo-hue: 186deg; --logo-sat: 1.15; } /* ── ESCOVA/JAQUETA/DRONE usam fundo escuro: a faixa promocional do topo precisa de contraste maior ── */ [data-tema="drone-de-corrida"] .top-banner, [data-tema="jaqueta-termica"] .top-banner, [data-tema="escova-modeladora"] .top-banner, [data-tema="mala-cabine"] .top-banner, [data-tema="pistola-pintura"] .top-banner { background: var(--navy-dark); }