/* ContaDrop Store - identidade visual (12/09/2026) Preto profundo #050507 | Azul eletrico #1E6BFF | Roxo neon #8B3DFF | Branco | Cinza #11131A 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: #11131A; --cd-azul: #1E6BFF; --cd-roxo: #8B3DFF; --cd-branco: #FFFFFF; --cd-borda: #1F2233; --cd-texto-2: #A7ACBD; --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(30,107,255,.0), var(--cd-azul), var(--cd-roxo), rgba(139,61,255,.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(30,107,255,.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: #cfe0ff; } /* 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(30,107,255,.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(139,61,255,.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(30,107,255,.7) !important; box-shadow: 0 16px 40px rgba(30,107,255,.16), 0 0 0 1px rgba(139,61,255,.25) !important; } /* print da conta inteira: nunca cortar */ .product_card img { object-fit: contain !important; background: #0B0C12; } .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; } }