/* DVZ FFDROP - identidade visual (12/09/2026) Preto profundo #050507 | Vermelho #E3171E | Vermelho claro #FF3B44 | Branco | Cinza #120B0C Ganchos: classes estaveis (.product_card, .product_info, .home, search_pc, search_mobile), atributos (alt, aria-label, href) e tags. Classes sc-* mudam a cada build: nao usar. */ :root { --cd-preto: #050507; --cd-cinza: #120B0C; --cd-azul: #E3171E; --cd-roxo: #FF3B44; --cd-branco: #FFFFFF; --cd-borda: #2A1417; --cd-texto-2: #B9AEB0; --cd-grad: linear-gradient(90deg, var(--cd-azul), var(--cd-roxo)); } /* ---------- Fundo ---------- A arte de fundo (fundo-contadrop-desktop/mobile, escolhida pelo servidor por aparelho) entra pelo proprio "banner" do tema, que e um fundo fixo atras dos produtos - mesma estrutura do contadrop.online. O body fica preto liso: uma imagem so, sem peso dobrado. */ /* ARMADILHA: o banner fixo do tema tem z-index -1. Se o BODY tiver fundo proprio, ele pinta por cima e a arte some. So o leva a cor; o body fica transparente. */ html { background: var(--cd-preto); } body { background: transparent !important; overflow-x: hidden; } /* o fundo ja e escuro no centro; o container da loja fica translucido para nao apagar a arte */ #__ecommerce_v1 { background: transparent !important; } /* ---------- Barra superior ---------- */ #__ecommerce_v1 > div[style*="background"] { background: rgba(17, 19, 26, 0.92) !important; border-bottom: 1px solid var(--cd-borda); } #__ecommerce_v1 > div[style*="background"] div[style*="color"] { color: var(--cd-branco) !important; font-size: 12px; letter-spacing: .3px; font-weight: 600; padding: 6px 12px; text-align: center; } /* ---------- Cabecalho ---------- */ header { background: rgba(5, 5, 7, 0.82) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(227,23,30,.0), var(--cd-azul), var(--cd-roxo), rgba(255,59,68,.0)) 1; position: sticky; top: 0; z-index: 50; } header a[aria-label*="in"] > div { display: flex; align-items: center; gap: 12px; line-height: 1; } header a[aria-label*="in"] > div > img { width: 48px; height: 48px; min-width: 48px; object-fit: contain; background: transparent; border-radius: 50%; display: block; filter: drop-shadow(0 0 10px rgba(227,23,30,.35)); } header a[aria-label*="in"] > div > span { color: var(--cd-branco); font-weight: 800; font-size: 1.1rem; letter-spacing: .2px; display: flex; flex-direction: column; gap: 3px; transition: color .2s ease; } header a[aria-label*="in"] > div > span > small { font-size: .68rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; background: var(--cd-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } header a[aria-label*="in"]:hover > div > span { color: #ffd6d8; } /* busca */ header .search_pc > div, header .search_mobile > div { background: rgba(17,19,26,.9) !important; border: 1px solid var(--cd-borda) !important; border-radius: 999px !important; transition: border-color .2s ease, box-shadow .2s ease; } header .search_pc > div:hover, header .search_pc > div:focus-within { border-color: var(--cd-azul) !important; box-shadow: 0 0 0 3px rgba(227,23,30,.18); } header .search_pc span, header .search_mobile span { color: var(--cd-texto-2); } /* carrinho */ header a[href*="/cart"] { border: 1px solid var(--cd-borda) !important; border-radius: 999px !important; background: rgba(17,19,26,.9) !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } header a[href*="/cart"]:hover { border-color: var(--cd-roxo) !important; box-shadow: 0 0 18px rgba(255,59,68,.25); transform: translateY(-1px); } /* "Entrar" continua escondido: a loja vende sem cadastro (decisao do Biel, 08/09/2026) */ header a[href*="/login"] { display: none !important; } @media (max-width: 600px) { header a[aria-label*="in"] > div > img { width: 36px; height: 36px; min-width: 36px; } header a[aria-label*="in"] > div > span { font-size: .92rem; } header a[aria-label*="in"] > div > span > small { font-size: .58rem; letter-spacing: 1px; } } /* ---------- Banner: igual ao tema original (plano de fundo fixo atras dos produtos) ---------- O tema ja posiciona o banner como fundo fixo de 700px; so garantimos que preenche sem esticar. */ img[alt="banner"] { width: 100%; object-fit: cover; object-position: center top; display: block; opacity: 1 !important; /* o tema deixava em 0.5: a arte de fundo ja e escura no centro */ } @media (max-width: 700px) { img[alt="banner"] { object-position: center 20%; } } /* ---------- Titulos das secoes de produto ---------- */ h1[style*="font-size:14px"], h1[style*="font-size: 14px"] { font-size: 1.05rem !important; line-height: 1.2 !important; font-weight: 800 !important; color: var(--cd-branco) !important; padding-left: 14px; position: relative; } h1[style*="font-size:14px"]::before, h1[style*="font-size: 14px"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 18px; border-radius: 3px; background: var(--cd-grad); } /* ---------- Cards de produto ---------- */ .product_card { background: var(--cd-cinza) !important; border: 1px solid var(--cd-borda) !important; border-radius: 14px !important; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } .product_card:hover { transform: translateY(-4px); border-color: rgba(227,23,30,.7) !important; box-shadow: 0 16px 40px rgba(227,23,30,.16), 0 0 0 1px rgba(255,59,68,.25) !important; } /* print da conta inteira: nunca cortar */ .product_card img { object-fit: contain !important; background: #0B0708; } .product_info span { color: var(--cd-branco) !important; } .product_card button { background: var(--cd-grad) !important; color: var(--cd-branco) !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; transition: filter .2s ease, transform .2s ease !important; } .product_card button:hover { filter: brightness(1.12); transform: translateY(-1px); } /* ---------- Rodape ---------- */ footer { background: rgba(5,5,7,.9) !important; border-top: 1px solid var(--cd-borda); margin-top: 26px; } footer img[alt="icon do site"] { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; } footer h1 { color: var(--cd-branco) !important; } footer p { color: var(--cd-texto-2) !important; } footer a { color: var(--cd-texto-2); transition: color .2s ease; } footer a:hover { color: var(--cd-azul); } /* selo "Powered by" da plataforma antiga: some */ #powered-contadrop { display: none !important; } .cd-rodape-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; } .cd-rodape-links a { font-size: 12px; text-decoration: none; } .cd-rodape-social { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--cd-texto-2); } .cd-rodape-social a { text-decoration: none; } .cd-rodape-pend { font-size: 11px; color: #6b7080; margin-top: 8px; } /* ---------- Acessibilidade / foco ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--cd-azul); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ================= Rodada V2 (15/09/2026) — pedido do Biel via pacote do Codex ================= So CSS/JS por cima do bundle: nada de filtro, gaveta de carrinho ou texto novo na home (a home fica igual ao contadrop.online por decisao dele em 12/09). */ /* logo horizontal no cabecalho (o js.html troca o src depois da hidratacao) */ header a[aria-label*="in"] > div > img.cd-logo-h { width: auto; height: 44px; min-width: 0; border-radius: 0; filter: drop-shadow(0 0 8px rgba(227,23,30,.35)); } /* com a logo escrita, o nome em texto sai e fica so o subtitulo */ header a[aria-label*="in"] > div:has(> img.cd-logo-h) > span { font-size: 0; gap: 0; } header a[aria-label*="in"] > div:has(> img.cd-logo-h) > span > small { font-size: .62rem; } @media (max-width: 600px) { header a[aria-label*="in"] > div > img.cd-logo-h { height: 34px; } header a[aria-label*="in"] > div:has(> img.cd-logo-h) > span > small { font-size: .52rem; } } /* carrinho: o texto vinha preto em cima de fundo escuro (contraste zero) */ header a[href*="/cart"], header a[href*="/cart"] span { color: var(--cd-branco) !important; } header a[href*="/cart"] svg { fill: var(--cd-branco) !important; } header a[href*="/cart"] { border-color: rgba(227,23,30,.55) !important; font-weight: 700; } header a[href*="/cart"]:focus-visible { outline: 2px solid var(--cd-azul); outline-offset: 2px; } /* grade: 4 colunas no desktop (era 5, com foto pequena e titulo cortado) */ @media (min-width: 1100px) { div:has(> .product_card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; } } @media (min-width: 760px) and (max-width: 1099px) { div:has(> .product_card) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* titulo: ate 3 linhas, altura reservada (nao pula entre cards) */ .product_info > span { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: calc(1.3em * 3); } /* selo de desconto: sai o verde, entra vermelho discreto */ .product_card div:has(> svg > path[d^="M216.49"]) { background: rgba(227,23,30,.16) !important; color: #ff8a8f !important; border: 1px solid rgba(227,23,30,.35); border-radius: 999px !important; font-weight: 700; } .product_card div:has(> svg > path[d^="M216.49"]) svg { fill: #ff8a8f !important; } /* raio "Entrega Automatica" repetido em todo card: nao informa nada, sai */ .product_card [data-tooltip="Entrega Automática"] { display: none !important; } /* preco atual maior */ .product_card div:has(+ div [data-tooltip="Entrega Automática"]) { font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -.01em; } /* segunda acao (sacola) como acao secundaria: contorno neutro, nao outro botao vermelho */ .product_card button + div { background: rgba(255,255,255,.04) !important; border: 1px solid var(--cd-borda) !important; border-radius: 10px !important; transition: border-color .2s ease, background .2s ease; } .product_card button + div:hover { border-color: var(--cd-azul) !important; background: rgba(227,23,30,.12) !important; } /* ajustes depois do print: preco maior encostava no "A vista no PIX"; logo um pouco maior no desktop */ .product_card div:has(+ div [data-tooltip="Entrega Automática"]) { line-height: 1.15 !important; } .product_card .product_info p { margin-top: 4px !important; } @media (min-width: 601px) { header a[aria-label*="in"] > div > img.cd-logo-h { height: 52px; } } @media (max-width: 600px) { header a[aria-label*="in"] > div:has(> img.cd-logo-h) > span { display: none; } }