/* * Identidade visual "Feirão CVC" — Fase 7 do plano de implementação. * Carregado DEPOIS de vitrine.css (herda .card-oferta/.caderno/.hero/etc, * sobrescreve só o necessário) e só na página da live (vitrine_live.ejs) — * zero efeito em Ofertas/CVC Me Leva. * * Paleta abaixo foi EXTRAÍDA por amostragem de pixel direto dos arquivos * reais (Python/PIL, `im.getpixel((x,y))`), não estimada por inspeção * visual — conferida em 3 arquivos independentes, valores idênticos: * docs/materiais/KVs/KV01_FEIRAO CVC_INFLUS_V01 copy (2).png * docs/materiais/PEÇAS COM OFERTA/META/Base_Feirao_1080x1080.jpg * docs/materiais/KV - ÚLTIMOS DIAS/COM OFERTA/1200x628.jpg * Amarelo de fundo: rgb(255,230,0) = #FFE600. Amarelo escuro (bolinha do * halftone, amostrado dentro de um ponto do padrão): rgb(255,195,0) = * #FFC300. Azul: rgb(10,0,180) = #0A00B4 (variação de ±3 nos 3 arquivos, * ruído de compressão JPEG nos 2 últimos — o PNG, sem perdas, deu o valor * exato). `--fl-azul-escuro` é o único token NÃO extraído (derivado, * escurecido a olho pra hover/rodapé) — não achei um tom mais escuro de * verdade nos materiais revisados. * * Ainda assim, isso são só os materiais de campanha (peças prontas), não * o guia de marca oficial da CVC — confirmar com o time de Marketing se * esses valores são realmente os hex oficiais antes de travar isso como * "identidade definitiva" em produção. * * Fonte: os materiais usam CVC Sans (fonte comercial da CVC, sem * confirmação de licença de uso web) — nunca embarcada aqui. Site rodou * com "Arial Black" (efeito caixa-alta/condensada por nome de família, * sem precisar de font-weight) e, antes dela, CVC Sans via CDN interno; * trocado pra Nunito 25/09 (peso 900 explícito — Nunito não tem uma * variante "Black" na família, ver var(--fl-fonte-black) abaixo), Google * Fonts carregado no de cada página (vitrine.ejs/vitrine_live.ejs/ * cadernos.ejs). */ .feirao-live { --fl-amarelo: #ffe600; --fl-amarelo-escuro: #ffc300; --fl-azul: #0a00b4; --fl-azul-escuro: #060072; --fl-branco: #ffffff; /* 25/09 — trocado de "Arial Black" pra Nunito peso 900 (mesma troca de fonte do resto do site, ver var(--font) em vitrine.css); "Arial Black" é black só pelo NOME da família (não precisa de font-weight), Nunito precisa do peso explícito — ver font-weight:900 em cada regra abaixo que usa essa variável. */ --fl-fonte-black: "Nunito", "Segoe UI", Arial, sans-serif; /* Fundo da página (25/09) — era amarelo com halftone (mesmo efeito visual dos materiais de campanha); pedido explícito pra virar branco, principalmente visível na área vazia ao lado/abaixo dos cards quando tem poucas ofertas numa seção. */ background-color: var(--fl-branco); } .feirao-live .hero-logo img { filter: brightness(0) invert(1); } /* Sem banner configurado (nenhuma imagem no slider) — fundo azul sólido com o título em caixa alta, no lugar do card cinza genérico. */ .feirao-live .hero:not(.tem-imagem) { background: var(--fl-azul); } .feirao-live .hero:not(.tem-imagem) h1 { font-family: var(--fl-fonte-black); font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; color: var(--fl-branco); } /* ---------- Cabeçalho de seção ("momento" da live) ---------- */ .feirao-live .caderno-head { background: var(--fl-azul); position: relative; overflow: hidden; } /* Halftone azul-sobre-azul no cabeçalho, mesmo recurso visual das peças de preço dos materiais (ver PEÇAS COM OFERTA/META/Base_Feirao_*.jpg). */ .feirao-live .caderno-head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px); background-size: 10px 10px; pointer-events: none; } .feirao-live .caderno-head h2 { font-family: var(--fl-fonte-black); font-weight: 900; text-transform: uppercase; letter-spacing: -0.3px; position: relative; } .feirao-live .caderno-influ { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fl-amarelo); margin: 4px 0; position: relative; } .feirao-live .caderno-influ b { color: #fff; } .feirao-live .caderno-influ-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fl-amarelo); } /* Sem peça pronta (nenhum banner_imagem_url cadastrado pra essa seção) — pedido 26/09 ("tem que mudar a cor e colocar uma borda amarela embaixo", com print: texto do influenciador em amarelo quase invisível sobre fundo branco) — nesse caso o cabeçalho NÃO deveria imitar a peça de campanha (fundo azul sólido + halftone, pensado pra ficar por baixo de uma imagem), e sim o visual clássico já usado em Ofertas/CVC Me Leva: fundo claro, título em azul, contador cinza, barra amarela embaixo — mesma referência visual passada pelo usuário ("deveria ficar assim"). `!important` no background porque a cor de fundo vem inline do servidor (views/partials/live_secoes.ejs, secaoEstilo), que sempre vence uma regra de stylesheet sem isso. */ .feirao-live .caderno-live .caderno-head:not(.com-banner) { background: #fff !important; border: 1px solid var(--cvc-border, #e2e8f0); border-bottom: 4px solid var(--fl-amarelo-escuro); } .feirao-live .caderno-live .caderno-head:not(.com-banner)::before { display: none; } .feirao-live .caderno-live .caderno-head:not(.com-banner) h2 { color: var(--fl-azul); } .feirao-live .caderno-live .caderno-head:not(.com-banner) .caderno-count { color: #64748b; } .feirao-live .caderno-live .caderno-head:not(.com-banner) .caderno-influ { color: var(--fl-azul); } .feirao-live .caderno-live .caderno-head:not(.com-banner) .caderno-influ b { color: var(--fl-azul-escuro); } .feirao-live .caderno-live .caderno-head:not(.com-banner) .caderno-influ-foto { border-color: var(--fl-amarelo-escuro); } /* ---------- Layout lado a lado (25/09, "a sessão tem que ficar ao lado, um pouco maior do que está o card e não ficar em cima") ---------- .caderno-head vira uma coluna fixa à esquerda (estilo cartaz, texto colado embaixo), .cards-slider-wrap ocupa o resto da largura ao lado. `align-items: stretch` (padrão do flex) já faz a coluna acompanhar a altura da fileira de cards; `min-height` garante que ela fique um pouco MAIOR mesmo quando a fileira é baixa (poucos bullets, sem preço parcelado etc). */ .feirao-live .caderno-live { display: flex; align-items: stretch; gap: 20px; border-bottom: none; /* Espaçamento entre seções (25/09, /admin/config-campos "Layout da seção") — era 0 fixo (zerado de propósito na Fase do layout lado a lado, pra tirar a borda/margem que .caderno genérico tinha por padrão), ficava sem respiro nenhum entre um "momento" e o próximo. */ margin-bottom: var(--secao-espacamento, 0px); padding-bottom: 0; } .feirao-live .caderno-live:last-child { margin-bottom: 0; } .feirao-live .caderno-live .caderno-head { flex: 0 0 260px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; border-radius: 12px; padding: 20px; margin-bottom: 0; /* Altura mínima configurável (25/09, /admin/config-campos "Layout da seção") — 0 = sem mínimo, só o align-items:stretch do .caderno-live decide (acompanha a fileira de cards ao lado). --secao-altura vem inline no
, setado por views/partials/live_secoes.ejs. */ min-height: var(--secao-altura, 0px); } /* Imagem da seção (uploaded pelo admin) geralmente é peça pronta paisagem com texto desenhado dentro (tipo os banners "FEIRÃO CVC" dos materiais), não uma foto qualquer — `background-size: cover` (padrão herdado de vitrine.css .caderno-head.com-banner, pensado pra faixa larga e baixa) corta os 2 lados igual quando o container é uma coluna estreita e alta (260px), cortando o texto desenhado na imagem ao meio. `contain` mostra a imagem inteira (sem cortar nada), com a cor de fundo/gradiente preenchendo a sobra — a segunda posição/tamanho de cada propriedade abaixo é a camada da imagem (1ª camada é o gradiente escurecedor, que continua cobrindo a caixa inteira). */ /* Destaque de "#" na URL (27/09) — mesmo pisca-pisca amarelo já usado no card de oferta (destaque-hash-pisca, ver acima), aplicado no cabeçalho da seção quando o hash aponta pra ela direto (link/QR code compartilhado). */ .feirao-live .caderno-live.destaque-hash .caderno-head { animation: destaque-hash-pisca 0.6s steps(1, end) 5; } .feirao-live .caderno-live .caderno-head.com-banner { background-size: 100% 100%, contain; background-repeat: no-repeat, no-repeat; background-position: center, center; } /* Texto (título/influenciador) sempre existe no HTML agora (ver views/partials/live_secoes.ejs) — no desktop com banner, a peça pronta já tem esse texto desenhado dentro, então esconde o duplicado. */ .feirao-live .caderno-live .caderno-head.com-banner .caderno-head-texto { display: none; } .feirao-live .caderno-live .caderno-head h2 { font-size: 1.7rem; line-height: 1.15; margin-bottom: 6px; } .feirao-live .caderno-live .cards-slider-wrap { flex: 1 1 auto; min-width: 0; /* flex-item precisa disso pro overflow-x:auto funcionar dentro do flex, senão não encolhe */ } @media (max-width: 900px) { /* Coluna lateral não cabe do lado de um card em tela estreita — volta a empilhar (cabeçalho em cima, cards embaixo), igual Ofertas/CVC Me Leva sempre fizeram. */ .feirao-live .caderno-live { flex-direction: column; } .feirao-live .caderno-live .caderno-head { flex-basis: auto; min-height: var(--secao-altura-mobile, 0px); justify-content: flex-start; } /* Pedido 25/09 ("SEÇÃO sem foto" no mobile, card mantém a foto) — a peça pronta é pensada pra coluna larga/alta do desktop; empilhada e esticada na largura do celular ela distorce (background-size: 100% 100% força o esticamento pra preencher a caixa). Some com a imagem, sobra só a cor de fundo + o texto (que volta a aparecer, escondido só no desktop-com-banner logo acima). Bug real achado 26/09 (print: só "Daniel Mohamed ·" em amarelo bem fraco visível, título sumido, vazio enorme em branco) — sem a foto, sobrava a `background-color` que veio junto no style inline (a cor configurada em /admin/config-campos, não necessariamente azul-marinho — pode ser clara), só que o texto continuava nas cores pensadas pra ler sobre foto/fundo escuro (título branco, influenciador amarelo) — invisível ou quase em cima de fundo claro. `min-height` também ficava o valor pensado pra coluna ALTA do desktop, sobrando espaço vazio enorme numa caixa agora sem imagem pra preencher. Mobile sem foto agora sempre usa o MESMO tema claro do cabeçalho sem peça pronta (bloco logo acima), com altura natural do conteúdo. */ .feirao-live .caderno-live .caderno-head.com-banner { background-image: none !important; background-color: #fff !important; min-height: 0; border: 1px solid var(--cvc-border, #e2e8f0); border-bottom: 4px solid var(--fl-amarelo-escuro); } .feirao-live .caderno-live .caderno-head.com-banner::before { display: none; } .feirao-live .caderno-live .caderno-head.com-banner .caderno-head-texto { display: block; } .feirao-live .caderno-live .caderno-head.com-banner h2 { color: var(--fl-azul); } .feirao-live .caderno-live .caderno-head.com-banner .caderno-count { color: #64748b; } .feirao-live .caderno-live .caderno-head.com-banner .caderno-influ { color: var(--fl-azul); } .feirao-live .caderno-live .caderno-head.com-banner .caderno-influ b { color: var(--fl-azul-escuro); } .feirao-live .caderno-live .caderno-head.com-banner .caderno-influ-foto { border-color: var(--fl-amarelo-escuro); } } /* ---------- Acesso rápido às seções (25/09) ---------- Fileira de pílulas, 1 por seção no ar, rolagem horizontal em telas estreitas (não quebra linha — em vez de crescer em altura, desliza). Sem JS: cada é só uma âncora (#secao-N) + scroll-behavior:smooth já configurado em vitrine.css. */ .feirao-live .live-nav-secoes { display: flex; gap: 8px; overflow-x: auto; /* Sem padding lateral própria — .layout (vitrine.css) já dá 24px dos 2 lados; pílulas ficam alinhadas com os cards embaixo. */ padding: 4px 0 16px; /* Barra de rolagem escondida (26/09, "mostrar sem barra lateral") — mesmo tratamento já dado ao .cards-grid; a rolagem em si (arraste/ trackpad) continua funcionando normal, só a barra visível some. */ scrollbar-width: none; } .feirao-live .live-nav-secoes::-webkit-scrollbar { display: none; } .feirao-live .live-nav-secoes a { flex: none; display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--fl-branco); border: 2px solid var(--fl-azul); color: var(--fl-azul); font-family: var(--fl-fonte-black); font-weight: 900; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.2px; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .feirao-live .live-nav-secoes a:hover, .feirao-live .live-nav-secoes a:focus-visible { background: var(--fl-azul); color: var(--fl-branco); } /* ---------- Card de oferta ---------- */ .feirao-live .card-oferta { border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(18, 18, 110, 0.18); } /* Destaque de "#oferta-N" na URL (26/09, pedido: link direto pra uma promoção precisa marcar ela — link vindo de anúncio/DM/etc; cor trocada de rosa pra amarelo piscando, pedido explícito). Pisca de verdade (outline liga/desliga), não só pulsa — mais chamativo que o .destaque marcado pelo admin (borda amarela sólida, permanente); esse aqui é só enquanto a URL apontar pra essa oferta. */ .feirao-live .card-oferta.destaque-hash { animation: destaque-hash-pisca 0.6s steps(1, end) 5; } @keyframes destaque-hash-pisca { 0%, 100% { outline: 4px solid var(--fl-amarelo); outline-offset: 3px; box-shadow: 0 0 24px 4px rgba(255, 230, 0, 0.7), 0 4px 16px rgba(18, 18, 110, 0.18); } 50% { outline: 4px solid transparent; outline-offset: 3px; box-shadow: 0 4px 16px rgba(18, 18, 110, 0.18); } } .feirao-live .card-oferta h3 { font-family: var(--fl-fonte-black); font-weight: 900; text-transform: uppercase; letter-spacing: -0.2px; color: var(--fl-azul); } .feirao-live .card-body { background: var(--fl-branco); } /* Bloco de preço — era halftone amarelo (mesmo padrão visual da peça "A partir de 10x sem juros" dos materiais), tirado por pedido explícito (print mostrando o amarelo atrás dos 2 botões de CTA, ficava poluído). Bug real achado 27/09 (print: botões em alturas diferentes entre cards vizinhos) — essa regra sobrescrevia margin-top:auto da base (.card-footer, vitrine.css) por um valor fixo de 8px, sem querer cancelando o "gruda no rodapé" que a base já fazia. .card-footer é filho direto de .card-body (flex:1) — auto aqui é o que realmente empurra os botões pro fim do card. */ .feirao-live .card-footer { border-radius: 8px; padding: 10px 12px; margin-top: auto; } .feirao-live .preco-valor, .feirao-live .preco-parcela { font-family: var(--fl-fonte-black); font-weight: 900; color: var(--fl-azul); } .feirao-live .preco-prefixo, .feirao-live .preco-porpessoa, .feirao-live .preco-total { color: var(--fl-azul-escuro); } .feirao-live .badge-desconto { background: var(--fl-azul) !important; color: var(--fl-branco) !important; } .feirao-live .badge-cupom { background: var(--fl-amarelo) !important; color: var(--fl-azul-escuro) !important; font-weight: 700; } /* ---------- 2 CTAs sempre presentes (25/09) ---------- "Compre no Site" (amarelo, pílula — padrão "COMPRE AGORA" dos banners de site nos materiais, mesmo amarelo/azul do card já herdado de vitrine.css .card-cta, só reforça peso/caixa alta) + "Fale com a Loja" (verde WhatsApp, link direto pro Atlas — nunca passa pelo modal de origem/UTM/lead do botão amarelo). */ /* margin-top:auto tirado daqui (26/09, alvo errado — quem precisa dele é .card-footer, o pai direto que fica dentro do .card-body flex:1; ver correção 27/09 logo acima nessa mesma seção "Bloco de preço"). Aqui dentro do footer só precisa de espaço curto entre o preço e os botões. */ .card-cta-grupo { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .feirao-live .card-cta.card-cta-site { color: var(--fl-azul); font-family: var(--fl-fonte-black); font-weight: 900; text-transform: uppercase; letter-spacing: 0.3px; } .feirao-live .card-cta-loja { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 999px; /* Verde WhatsApp "claro" (#25d366) com texto branco só passava 1.98:1 de contraste (achado no relatório Lighthouse de acessibilidade, "as cores de primeiro e segundo plano não têm uma taxa de contraste suficiente") — WCAG AA pede 4.5:1 pra texto normal. Trocado pro verde escuro oficial do WhatsApp (#075E54, cor do cabeçalho do app deles), que dá 7.66:1 — continua reconhecível como "botão do WhatsApp", só não é mais o tom claro. */ background: #075E54; color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; transition: background-color 0.15s ease; } .feirao-live .card-cta-loja:hover { background: #054c44; } .feirao-live .icone-whatsapp { flex: none; } /* ---------- Rodapé ---------- */ .feirao-live .site-footer { background: var(--fl-azul-escuro); } .feirao-live .site-footer .footer-topo img { filter: brightness(0) invert(1); } /* Cores de texto herdadas de vitrine.css (var(--ink-muted)/var(--ink)) foram pensadas pro rodapé branco padrão — em cima do azul escuro daqui ficam quase ilegíveis (cinza-azulado em cima de azul). */ .feirao-live .site-footer .footer-topo p, .feirao-live .site-footer .footer-termos p, .feirao-live .site-footer .footer-termos-titulo { color: var(--fl-branco); } .feirao-live .site-footer .footer-termos { border-top-color: rgba(255, 255, 255, 0.2); } .feirao-live .site-footer .footer-termos a { color: var(--fl-amarelo); } /* ---------- Modal de origem — mesma identidade (fundo amarelo halftone, botão de confirmação azul) ---------- */ .feirao-live .live-modal-caixa { background: var(--fl-branco); border-top: 6px solid var(--fl-azul); } .feirao-live .live-modal-caixa h2 { font-family: var(--fl-fonte-black); font-weight: 900; text-transform: uppercase; color: var(--fl-azul); } .feirao-live .live-modal-item b { color: var(--fl-azul); } .feirao-live .live-modal-item:hover, .feirao-live .live-modal-item.ativo { background: var(--fl-amarelo); } @media (max-width: 720px) { .feirao-live .caderno-head h2 { font-size: 20px; } }