/* ============================================================ loja.css — Identidade visual central · Jogos Secretos ------------------------------------------------------------ Fonte única de estilo da loja. Linkar no de cada página (via header.php ou direto), junto do import das fontes. Compatibilidade: mantém os NOMES de variáveis e classes já usados hoje (--dourado, --preto, .header-in, .nav, .logo, .conta, .cart...) para não quebrar header.php nem as páginas que ainda não foram migradas. Só afina valores e ADICIONA. Paleta e fontes seguem o guia oficial de marca: - Dourado principal #d4af37 · Dourado suave #a8842c - Fundo preto neutro · Texto off-white - Cormorant Garamond (títulos) + Inter (corpo) + Pinyon (assinatura) ============================================================ */ :root{ /* --- Cores (nomes antigos MANTIDOS + novos) --- */ --preto:#0d0d0d; /* fundo base (era #0d0b0f) */ --preto-2:#111111; /* segundo nível */ --card:#161616; /* fundo de card */ --card-2:#1c1c1c; /* card claro */ --dourado:#d4af37; /* dourado da marca (INALTERADO) */ --dourado-soft:#a8842c; /* dourado suave do guia */ --dourado-lite:#e8cf7a; /* dourado claro p/ brilho/gradiente */ --creme:#f2ede3; /* texto principal off-white */ --bege:#8f8579; /* texto secundário (era #a89f8c) */ --bronze:#8a7f63; /* neutro (INALTERADO — usado no header/footer) */ --linha:rgba(212,175,55,0.16); /* linha dourada sutil */ --linha-soft:rgba(255,255,255,0.06);/* divisória neutra */ /* --- Tipografia oficial --- */ --f-disp:"Cormorant Garamond",Georgia,'Times New Roman',serif; --f-body:"Inter",'Helvetica Neue',Arial,sans-serif; --f-script:"Pinyon Script",cursive; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--preto); color:var(--creme); font-family:var(--f-body); -webkit-font-smoothing:antialiased; line-height:1.6; min-height:100vh; overflow-x:hidden; } a{text-decoration:none;color:inherit} img{display:block;max-width:100%} /* utilitário legado: algumas páginas marcam trechos com .sans */ .sans{font-family:var(--f-body)} /* ============================================================ HEADER (classes usadas por header.php — NÃO renomear) ============================================================ */ header{ background:linear-gradient(180deg,rgba(13,13,13,0.94),rgba(13,13,13,0.7)); backdrop-filter:blur(14px); border-bottom:1px solid var(--linha-soft); padding:0 24px; position:sticky;top:0;z-index:50; } .header-in{ max-width:1200px;margin:0 auto;height:74px; display:flex;align-items:center;justify-content:space-between; } .logo{display:flex;align-items:center;gap:13px} .logo img.marca{height:44px;width:auto;filter:drop-shadow(0 0 10px rgba(212,175,55,0.25))} /* .mono legado (emoji) — se ainda existir em alguma página, some educadamente */ .logo .mono{display:none} .logo .nome{ font-family:var(--f-disp);font-weight:500; color:var(--creme);font-size:1.02rem;letter-spacing:.24em;text-transform:uppercase; } .nav{display:flex;gap:34px;align-items:center} .nav a{ font-family:var(--f-body);color:var(--bege); font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500; position:relative;padding:6px 0;transition:color .3s ease; } .nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--dourado);transition:width .35s ease} .nav a:hover{color:var(--creme)} .nav a:hover::after{width:100%} /* Carrinho e badge (mantém id/classe usados no header.php) */ .nav .cart{color:var(--dourado);font-size:1.05rem;position:relative} .nav .cart::after{display:none} /* o cart não ganha sublinhado */ .nav .cart:hover{color:var(--dourado-lite)} .cart-badge{ position:absolute;top:-6px;right:-9px;background:var(--dourado);color:var(--preto); font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px; display:flex;align-items:center;justify-content:center;font-family:var(--f-body); } /* Item "minha conta" (classes do header.php) */ .nav .conta{display:flex;align-items:center;gap:7px} .nav .conta::after{display:none} .nav .conta .ico{font-size:15px} .nav .conta .nome-cli{color:var(--creme);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav .conta:hover .nome-cli,.nav .conta:hover .ico{color:var(--dourado)} /* ============================================================ HERO ============================================================ */ .hero{position:relative;padding:96px 24px 118px;text-align:center;overflow:hidden} .hero::before{ /* luz de vela dourada que respira — assinatura da marca */ content:"";position:absolute;top:-6%;left:50%;transform:translateX(-50%); width:860px;height:600px;max-width:100%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(212,175,55,0.16) 0%,rgba(168,132,44,0.08) 38%,rgba(13,13,13,0) 70%); filter:blur(4px);animation:js-breathe 9s ease-in-out infinite; } @keyframes js-breathe{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}} .hero-in{position:relative;z-index:2;max-width:780px;margin:0 auto} .hero-sigil{height:118px;width:auto;margin:0 auto 30px;filter:drop-shadow(0 0 22px rgba(212,175,55,0.35))} .hero .faixa{ /* faixa "entrega discreta" — mantém a classe antiga */ display:inline-flex;align-items:center;gap:9px; font-family:var(--f-body);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500; color:var(--dourado-lite);border:1px solid var(--linha);padding:8px 18px;border-radius:999px; background:rgba(212,175,55,0.05);margin-bottom:26px; } .hero .faixa .ponto{width:5px;height:5px;border-radius:50%;background:var(--dourado);box-shadow:0 0 8px var(--dourado)} .hero h1{ font-family:var(--f-disp);font-weight:500; font-size:clamp(3rem,6.4vw,5rem);line-height:1.02;letter-spacing:.005em;color:var(--creme); } .hero h1 em{ font-style:italic;font-weight:500; background:linear-gradient(120deg,var(--dourado-lite),var(--dourado) 55%,var(--dourado-soft)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero p{margin:24px auto 0;max-width:500px;font-family:var(--f-body);font-size:1.02rem;color:var(--bege);font-weight:300;line-height:1.6} .hero-botoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px} /* Botões (nomes antigos: .btn-ouro / .btn-linha) */ .btn-ouro,.btn-linha{ font-family:var(--f-body);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; padding:15px 32px;border-radius:2px;cursor:pointer;border:1px solid transparent; transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease,background .3s ease; } .btn-ouro{background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206;box-shadow:0 8px 30px -8px rgba(212,175,55,0.5)} .btn-ouro:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(212,175,55,0.68)} .btn-linha{background:transparent;color:var(--creme);border-color:var(--linha)} .btn-linha:hover{border-color:var(--dourado);color:var(--dourado-lite);transform:translateY(-2px)} /* ============================================================ SEÇÃO + CATEGORIAS (classes antigas: .secao / .cats / .cat) ============================================================ */ .secao{max-width:1200px;margin:0 auto;padding:26px 24px 106px} .secao-titulo{text-align:center;margin-bottom:50px} .secao-titulo .kicker{font-family:var(--f-body);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dourado);font-weight:500;display:block;margin-bottom:12px} .secao-titulo h2{font-family:var(--f-disp);font-weight:500;font-style:italic;font-size:clamp(2rem,3.6vw,2.9rem);color:var(--creme)} /* .traco legado (linha sob o título) — o kicker substitui, mas mantém sem quebrar */ .secao-titulo .traco{width:44px;height:1px;background:var(--dourado);margin:14px auto 0;opacity:.5} .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cat{ position:relative;border-radius:14px;overflow:hidden;min-height:230px;display:block; background:radial-gradient(140% 90% at 50% 0%,rgba(212,175,55,0.05),transparent 60%),linear-gradient(160deg,var(--card-2),var(--preto-2)); border:1px solid var(--linha-soft); transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease; } .cat:hover{transform:translateY(-6px);border-color:var(--linha);box-shadow:0 26px 50px -22px rgba(0,0,0,0.85),0 0 0 1px rgba(212,175,55,0.12) inset} /* brilho que "revela" no hover */ .cat .glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 80% at 50% 120%,rgba(212,175,55,0.2),transparent 62%);transition:opacity .45s ease} .cat:hover .glow{opacity:1} /* .bg e .escuro legados: neutralizados (o novo card não usa imagem de fundo colorida) */ .cat .bg{display:none} .cat .escuro{display:none} .cat .info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;text-align:left;z-index:2} .cat .ico{font-size:30px;line-height:1;color:var(--dourado);margin-bottom:auto;transition:transform .4s ease} .cat:hover .ico{transform:scale(1.08)} .cat .titulo{font-family:var(--f-disp);font-weight:600;font-size:1.5rem;color:var(--creme);line-height:1.1} .cat .qtd{font-family:var(--f-body);font-size:.68rem;letter-spacing:.1em;color:var(--bege);margin-top:5px;text-transform:uppercase} /* estado "em breve" (classe antiga: .vazia) — escuro elegante, adeus roxo claro */ .cat.vazia{background:linear-gradient(160deg,#161616,#0e0e0e);cursor:default} .cat.vazia:hover{transform:translateY(-3px);box-shadow:none;border-color:var(--linha-soft)} .cat.vazia .info{opacity:1} .cat.vazia .ico,.cat.vazia .titulo{opacity:.42;color:var(--bege)} .cat.vazia .qtd{opacity:.5} .selo-breve{ position:absolute;top:16px;right:16px;z-index:3;font-family:var(--f-body); font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--dourado-lite); border:1px solid var(--linha);padding:5px 11px;border-radius:999px;background:rgba(212,175,55,0.06); } /* ============================================================ FOOTER ============================================================ */ footer{border-top:1px solid var(--linha-soft);padding:56px 24px 46px;margin-top:30px;text-align:center} footer .sig{height:64px;width:auto;margin:0 auto 14px;filter:drop-shadow(0 0 12px rgba(212,175,55,0.22));opacity:.92} /* .mono legado (emoji do footer) — escondido; usamos o logo real */ footer .mono{display:none} footer .tag{font-family:var(--f-script);font-size:1.9rem;color:var(--dourado-lite);line-height:1;margin-top:6px} footer .links{margin-top:24px;display:flex;gap:26px;justify-content:center} footer .links a{font-family:var(--f-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bege);font-weight:500;transition:color .3s} footer .links a:hover{color:var(--dourado)} /* ============================================================ PÁGINA DE CATEGORIA — cabeçalho + grade de produtos (classes de categoria.php: .topo-cat, .card, .qtd-box, etc.) ============================================================ */ .topo-cat{max-width:1200px;margin:0 auto;padding:40px 24px 20px} .topo-cat .bread{font-family:var(--f-body);color:var(--bege);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px} .topo-cat .bread a{color:var(--bege);transition:color .3s} .topo-cat .bread a:hover{color:var(--dourado)} .cat-cabeca{display:flex;align-items:center;gap:14px} .cat-cabeca .ico{font-size:30px;color:var(--dourado);line-height:1} .cat-cabeca h1{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--creme);line-height:1.05} .cat-cabeca .sub{font-family:var(--f-body);color:var(--bege);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:2px} .grade{max-width:1200px;margin:0 auto;padding:8px 24px 48px} .grade .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} /* Card de produto */ .card{ background:linear-gradient(160deg,var(--card),var(--preto-2)); border:1px solid var(--linha-soft);border-radius:14px;overflow:hidden; display:flex;flex-direction:column; transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .38s ease,box-shadow .38s ease; } .card:hover{transform:translateY(-5px);border-color:var(--linha);box-shadow:0 24px 46px -22px rgba(0,0,0,0.85),0 0 0 1px rgba(212,175,55,0.1) inset} .card.indisp{opacity:.86} .card.indisp:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--linha-soft)} .card .foto{width:100%;aspect-ratio:1/1;position:relative;cursor:pointer;background:#f7f4ee;overflow:hidden} .card .foto img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease} .card:hover .foto img{transform:scale(1.05)} .card .foto .ph{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; color:var(--dourado-lite);font-family:var(--f-disp);font-style:italic;font-size:1.15rem; text-align:center;padding:20px;position:absolute;inset:0;line-height:1.3; background: radial-gradient(120% 80% at 50% 0%,rgba(212,175,55,0.06),transparent 60%), linear-gradient(160deg,#181818,#0e0e0e) !important; } /* produto "em breve" sem foto: nome mais discreto */ .card.indisp .foto .ph{color:var(--bege);opacity:.7} /* selo "em breve" no card de produto (reusa a classe global .selo-breve) */ .card .foto .selo-breve{top:12px;right:12px} .card .corpo{padding:16px;display:flex;flex-direction:column;flex:1} .card .nome{ font-family:var(--f-disp);font-weight:600;color:var(--creme);font-size:1.12rem;line-height:1.2; min-height:2.4em;margin-bottom:10px;cursor:pointer;transition:color .3s; } .card .nome:hover{color:var(--dourado-lite)} .card.indisp .nome{color:var(--bege);font-weight:500} .card .preco{font-family:var(--f-disp);font-weight:600;color:var(--dourado);font-size:1.5rem;line-height:1} .card .parcela{font-family:var(--f-body);color:var(--bege);font-size:.7rem;margin-top:4px} .card .embreve{font-family:var(--f-disp);font-style:italic;color:var(--bege);font-size:1.05rem} .empurra{flex:1} /* Seletor de variação */ .var-bloco{margin-top:13px} .var-label{font-family:var(--f-body);color:var(--bege);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .var-opts{display:flex;gap:6px;flex-wrap:wrap} .var-opt{ font-family:var(--f-body);border:1px solid var(--linha-soft);color:var(--bege);font-size:.72rem; padding:5px 11px;border-radius:6px;cursor:pointer;transition:all .25s ease; } .var-opt:hover{border-color:var(--linha);color:var(--creme)} .var-opt.sel{border-color:var(--dourado);color:var(--dourado-lite);background:rgba(212,175,55,0.1)} /* Caixa de quantidade */ .qtd-box{display:flex;align-items:center;margin-top:13px;border:1px solid var(--linha-soft);border-radius:7px;overflow:hidden;width:fit-content} .qtd-box button{background:rgba(255,255,255,0.03);color:var(--dourado);border:none;width:32px;height:32px;font-size:17px;cursor:pointer;transition:background .25s} .qtd-box button:hover{background:rgba(212,175,55,0.12)} .qtd-box span{font-family:var(--f-body);color:var(--creme);font-size:.85rem;width:36px;text-align:center} /* Botão adicionar / indisponível */ .btn-add{ width:100%;margin-top:13px;padding:12px;border-radius:3px;border:1px solid transparent;cursor:pointer; font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206; box-shadow:0 6px 22px -10px rgba(212,175,55,0.6);transition:transform .25s ease,box-shadow .3s ease; } .btn-add:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(212,175,55,0.75)} .btn-indisp{ width:100%;margin-top:13px;padding:12px;border-radius:3px;cursor:not-allowed; font-family:var(--f-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; background:transparent;color:var(--bege);border:1px solid var(--linha-soft);opacity:.6; } /* Toast (feedback ao adicionar) */ .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%); background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206; padding:12px 24px;border-radius:8px;font-family:var(--f-body);font-size:.85rem;font-weight:600; z-index:200;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none; box-shadow:0 10px 34px -12px rgba(0,0,0,0.7); } .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)} .toast.erro{background:#c0392b;color:#fff} /* ============================================================ PÁGINA DE PRODUTO — galeria, infos, atacado, abas, ficha (classes de produto.php) ============================================================ */ .bread-prod{max-width:1200px;margin:0 auto;padding:22px 24px 0;font-family:var(--f-body);color:var(--bege);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} .bread-prod a{color:var(--bege);transition:color .3s} .bread-prod a:hover{color:var(--dourado)} .prod{max-width:1200px;margin:0 auto;padding:22px 24px 48px;display:grid;grid-template-columns:1fr 1fr;gap:48px} /* Galeria — trilho horizontal com scroll-snap (desliza no celular) */ .galeria-vitrine{position:relative;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--linha-soft)} .galeria-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .galeria-track::-webkit-scrollbar{display:none} .galeria-track .slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;background:#f7f4ee;display:flex;align-items:center;justify-content:center} .galeria-track .slide img{width:100%;height:100%;object-fit:contain} .galeria-track .slide-ph .ph{font-size:66px;color:var(--dourado)} /* contador "n / total" — só no celular (no desktop as miniaturas já indicam) */ .galeria-contador{display:none;position:absolute;bottom:12px;right:12px;background:rgba(13,13,13,.64);color:var(--dourado-lite);font-family:var(--f-body);font-size:.72rem;letter-spacing:.04em;padding:4px 11px;border-radius:999px;pointer-events:none} .galeria .minis{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .galeria .mini{width:66px;height:66px;background:#f7f4ee;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;flex-shrink:0;transition:border-color .25s} .galeria .mini:hover{border-color:var(--linha)} .galeria .mini.sel{border-color:var(--dourado)} .galeria .mini img{width:100%;height:100%;object-fit:contain} /* Infos */ .infos h1{font-family:var(--f-disp);font-weight:500;color:var(--creme);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;margin-bottom:8px} .infos .cod{font-family:var(--f-body);color:var(--bege);font-size:.72rem;letter-spacing:.06em;margin-bottom:20px} .infos .preco{font-family:var(--f-disp);font-weight:600;color:var(--dourado);font-size:2.4rem;line-height:1} .infos .parcela{font-family:var(--f-body);color:var(--bege);font-size:.82rem;margin-top:5px} .infos .embreve{font-family:var(--f-disp);font-style:italic;color:var(--bege);font-size:1.3rem;margin-top:6px} /* Atacado */ .atacado{margin-top:24px;background:rgba(212,175,55,0.05);border:1px solid var(--linha);border-radius:12px;padding:16px 18px} .atacado-titulo{font-family:var(--f-body);color:var(--dourado);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px} .atacado-faixa{display:flex;justify-content:space-between;font-family:var(--f-body);font-size:.85rem;color:var(--creme);padding:7px 0;border-bottom:1px solid rgba(212,175,55,0.1)} .atacado-faixa:last-child{border-bottom:none} .atacado-faixa .preco-f{color:var(--dourado-lite);font-weight:600} .atacado-faixa .desc-f{color:var(--dourado);font-size:.72rem} /* Variação (reusa .var-bloco/.var-opt do bloco de categoria, com tamanho maior aqui) */ .infos .var-bloco{margin-top:24px} .infos .var-label{font-size:.66rem} .infos .var-opt{font-size:.85rem;padding:8px 15px} /* Quantidade + adicionar (na página de produto são maiores) */ .compra{display:flex;gap:12px;margin-top:24px;align-items:stretch} .compra .qtd-box{margin-top:0} .compra .qtd-box button{width:40px;height:48px;font-size:19px} .compra .qtd-box span{font-size:.95rem;width:46px} .compra .btn-add{flex:1;margin-top:0;padding:14px;font-size:.78rem} .compra .btn-indisp{flex:1;margin-top:0;padding:14px;font-size:.78rem} /* Abas (Descrição / Ficha Técnica) */ .abas{margin-top:32px} .abas-cab{display:flex;gap:0;border-bottom:1px solid var(--linha)} .aba-btn{font-family:var(--f-disp);padding:12px 24px;color:var(--bege);font-size:1.05rem;border-bottom:2px solid transparent;cursor:pointer;transition:color .3s,border-color .3s} .aba-btn:hover{color:var(--creme)} .aba-btn.ativa{color:var(--dourado);border-bottom-color:var(--dourado)} .aba-conteudo{padding:24px 2px} .aba-conteudo .conteudo{font-family:var(--f-body);color:var(--bege);font-size:.92rem;line-height:1.75} .aba-conteudo .conteudo p{margin-bottom:11px} .aba-conteudo .conteudo strong{color:var(--creme)} /* Ficha técnica */ .ficha-tabela{width:100%;border-collapse:collapse} .ficha-tabela tr{border-bottom:1px solid var(--linha-soft)} .ficha-tabela tr.par{background:rgba(255,255,255,0.02)} .ficha-tabela td{padding:12px 0;font-family:var(--f-body);font-size:.88rem} .ficha-tabela td.f-nome{color:var(--bege);width:42%;padding-right:12px} .ficha-tabela td.f-valor{color:var(--creme);font-weight:600} /* Toast com botão "ver sacola" */ .toast2{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#181410;border:1px solid var(--dourado);border-radius:12px;padding:13px 16px;z-index:200;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;display:flex;align-items:center;gap:14px;box-shadow:0 10px 34px rgba(0,0,0,0.6)} .toast2.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} .toast2 .txt{font-family:var(--f-body);color:var(--creme);font-size:.85rem} .toast2 .ver{font-family:var(--f-body);background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206;border:none;padding:9px 15px;border-radius:6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} /* Aviso de estoque (destaque: maior, âmbar, fica mais tempo — JS controla o tempo) */ .toast.aviso,.toast2.aviso{ background:linear-gradient(160deg,#241c0e,#1b1408); border:1px solid var(--dourado); box-shadow:0 14px 44px rgba(0,0,0,0.75),0 0 0 1px rgba(212,175,55,0.25),0 0 26px rgba(212,175,55,0.18); padding:16px 20px;max-width:min(480px,92vw); } .toast.aviso{color:var(--creme);font-size:.92rem;line-height:1.45} .toast2.aviso .txt{font-size:.92rem;line-height:1.45} .toast.aviso::before,.toast2.aviso .txt::before{content:"⚠ ";color:var(--dourado-lite)} /* Aviso dentro da gaveta (quando o + estoura o estoque) */ .gaveta-aviso{ display:none;margin:0 0 12px;background:rgba(212,175,55,0.08); border:1px solid var(--dourado);border-radius:10px;padding:11px 14px; font-family:var(--f-body);color:var(--creme);font-size:.82rem;line-height:1.45; } .gaveta-aviso.show{display:block} .gaveta-aviso::before{content:"⚠ ";color:var(--dourado-lite)} /* ============================================================ PÁGINAS DE AUTENTICAÇÃO — login.php / cadastro.php (card centralizado, formulário, toggle PF/PJ, aviso atacado) ============================================================ */ .auth-wrap{min-height:calc(100vh - 74px);display:flex;align-items:center;justify-content:center;padding:56px 20px} .auth-card{width:100%;max-width:430px} .auth-card.pj{max-width:520px} /* Cabeçalho do card */ .auth-topo{text-align:center;margin-bottom:30px} .auth-topo .selo{height:60px;width:auto;margin:0 auto 18px;filter:drop-shadow(0 0 16px rgba(212,175,55,0.3))} .auth-topo h1{font-family:var(--f-disp);font-weight:500;font-size:2rem;color:var(--creme);line-height:1.1} .auth-topo p{font-family:var(--f-body);color:var(--bege);font-size:.82rem;margin-top:8px} /* Superfície do formulário */ .auth-box{ background:linear-gradient(160deg,var(--card),var(--preto-2)); border:1px solid var(--linha-soft);border-radius:16px;padding:30px 28px; box-shadow:0 26px 60px -30px rgba(0,0,0,0.8); } /* Campos */ .auth-campo{margin-bottom:18px} .auth-campo:last-of-type{margin-bottom:0} .auth-label{display:block;font-family:var(--f-body);color:var(--bege);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:8px} .auth-input,.auth-select{ width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--linha-soft);border-radius:8px; padding:13px 14px;font-family:var(--f-body);font-size:.92rem;color:var(--creme);transition:border-color .25s,background .25s; } .auth-input::placeholder{color:rgba(143,133,121,0.6)} .auth-input:focus,.auth-select:focus{outline:none;border-color:var(--dourado);background:rgba(212,175,55,0.04)} .auth-select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bege) 50%),linear-gradient(135deg,var(--bege) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .auth-input.erro-campo{border-color:#c0392b} /* Grade PF/PJ (2 colunas) */ .auth-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .auth-grid2 .full{grid-column:1/-1} /* Botão principal (reusa a base do .btn-ouro, largura total) */ .auth-btn{ width:100%;margin-top:24px;font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; padding:15px;border-radius:3px;cursor:pointer;border:1px solid transparent; background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206; box-shadow:0 8px 30px -8px rgba(212,175,55,0.5);transition:transform .25s ease,box-shadow .3s ease; } .auth-btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(212,175,55,0.68)} .auth-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} /* Botão Google (contorno) */ .auth-google{ width:100%;display:flex;align-items:center;justify-content:center;gap:10px; background:transparent;border:1px solid var(--linha);border-radius:3px;padding:13px;cursor:pointer; font-family:var(--f-body);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--creme); transition:border-color .3s,color .3s,transform .25s; } .auth-google:hover{border-color:var(--dourado);color:var(--dourado-lite);transform:translateY(-2px)} .auth-google svg{width:17px;height:17px} /* Divisor "ou" */ .auth-ou{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--bege);font-family:var(--f-body);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase} .auth-ou::before,.auth-ou::after{content:"";flex:1;height:1px;background:var(--linha-soft)} /* Toggle Pessoa Física / Jurídica */ .auth-toggle{display:flex;gap:0;border:1px solid var(--linha-soft);border-radius:9px;padding:4px;margin-bottom:24px;background:rgba(0,0,0,0.2)} .auth-toggle button{ flex:1;background:transparent;border:none;cursor:pointer;padding:11px;border-radius:6px; font-family:var(--f-body);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bege);transition:all .25s; } .auth-toggle button.ativo{background:linear-gradient(135deg,var(--dourado-lite),var(--dourado) 60%,var(--dourado-soft));color:#1a1206} /* Aviso de atacado (bloco dourado sutil) */ .auth-aviso{ margin-top:4px;margin-bottom:22px;background:rgba(212,175,55,0.05);border:1px solid var(--linha);border-radius:12px;padding:14px 16px; font-family:var(--f-body);font-size:.8rem;color:var(--creme);line-height:1.5; } .auth-aviso b{color:var(--dourado-lite)} /* Mensagem de erro / sucesso */ .auth-msg{border-radius:9px;padding:12px 15px;font-family:var(--f-body);font-size:.84rem;margin-bottom:20px;line-height:1.45} .auth-msg.erro{background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.4);color:#f0b5ae} .auth-msg.ok{background:rgba(212,175,55,0.08);border:1px solid var(--linha);color:var(--dourado-lite)} /* Feedback do CNPJ (verificação BrasilAPI) */ .auth-cnpj-status{font-family:var(--f-body);font-size:.74rem;margin-top:7px;min-height:1em} .auth-cnpj-status.carregando{color:var(--bege)} .auth-cnpj-status.ok{color:var(--dourado-lite)} .auth-cnpj-status.falhou{color:#e08b7f} /* Link inferior (esqueci senha / criar conta / já tenho conta) */ .auth-links{text-align:center;margin-top:24px;font-family:var(--f-body);font-size:.84rem;color:var(--bege)} .auth-links a{color:var(--dourado-lite);transition:color .3s} .auth-links a:hover{color:var(--dourado)} .auth-esqueci{display:block;text-align:right;margin-top:10px;font-family:var(--f-body);font-size:.74rem;color:var(--bege);transition:color .3s} .auth-esqueci:hover{color:var(--dourado-lite)} /* Termos/rodapé pequeno do card */ .auth-mini{text-align:center;margin-top:18px;font-family:var(--f-body);font-size:.68rem;color:var(--bege);line-height:1.5} .auth-mini a{color:var(--bege);text-decoration:underline;text-underline-offset:2px} .auth-mini a:hover{color:var(--dourado-lite)} @media (max-width:480px){ .auth-box{padding:24px 20px} .auth-grid2{grid-template-columns:1fr} .auth-topo h1{font-size:1.7rem} } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:980px){.grade .cards{grid-template-columns:repeat(3,1fr)}} @media (max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}} @media (max-width:820px){ .prod{grid-template-columns:1fr;gap:26px} /* galeria de ponta a ponta no celular (estilo Mercado Livre) */ .galeria{margin-left:-24px;margin-right:-24px} .galeria-vitrine{border-radius:0;border:none} .galeria-contador{display:block} .galeria .minis{display:none} } @media (max-width:760px){ .nav{gap:16px} .hero{padding:72px 20px 90px} .hero-sigil{height:96px} .grade .cards{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){.cats{grid-template-columns:1fr}} @media (max-width:440px){.grade .cards{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }