/* Sistema visual do marketplace. * * Herdado de tku.com.br/loja: mesma paleta tricolor, mesmas fontes, mesmos * componentes de produto. A loja estatica e o marketplace tem que parecer o mesmo * produto — quem sai de uma e cai no outro nao pode achar que trocou de empresa. * * A tricolor vermelho/amarelo/azul e o fio condutor da marca; aqui ela aparece como * faixa no topo e como acento, nunca como fundo. */ :root{ --vermelho:#E3350D; --amarelo:#FFCB05; --azul:#2A75BB; --azul-esc:#003A70; --tinta:#12203A; --tinta-2:#5B6780; --linha:#E4E8EF; --papel:#F5F7FA; --branco:#fff; --verde:#12A150; --alerta:#B8860B; --display:"Outfit",system-ui,-apple-system,sans-serif; --body:"Inter",system-ui,-apple-system,sans-serif; --maxw:1280px; --sombra:0 1px 2px rgba(18,32,58,.06), 0 10px 26px -16px rgba(18,32,58,.28); } *{box-sizing:border-box} body{ margin:0;background:var(--papel);color:var(--tinta); font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--display);margin:0} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .tri{height:4px;background:linear-gradient(90deg, var(--vermelho) 0 33.33%, var(--amarelo) 33.33% 66.66%, var(--azul) 66.66%)} /* ── aviso do topo ─────────────────────────────────────────────────────────── */ .aviso{background:var(--azul-esc);color:#fff;font-size:12.5px} .aviso .wrap{display:flex;gap:10px;justify-content:center;padding:9px 20px;align-items:center} .aviso b{color:var(--amarelo)} /* ── cabecalho ─────────────────────────────────────────────────────────────── */ header{background:var(--branco);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--linha)} .topo{display:flex;align-items:center;gap:18px;padding:14px 0} /* So o logo. As regras de `b` e `span` sairam junto com o wordmark — CSS de elemento que nao existe mais e pegadinha para quem vier depois. */ .marca{display:flex;align-items:center;flex:none} .marca img{height:44px;width:44px;display:block} @media (max-width:560px){.marca img{height:38px;width:38px}} .busca{flex:1;display:flex;border:2px solid var(--linha);border-radius:10px;overflow:hidden; background:var(--papel);transition:border-color .16s;max-width:560px} .busca:focus-within{border-color:var(--azul)} .busca input{flex:1;border:0;background:none;padding:10px 14px;font:inherit;font-size:14.5px; color:var(--tinta);outline:none} .busca button{border:0;background:var(--azul);color:#fff;padding:0 18px;cursor:pointer; font-family:var(--display);font-weight:600;font-size:14px} /* `flex-wrap` em vez de `flex:none`: com sete itens num laptop de 1100px o ultimo saia pela borda em silencio — quebrar linha e feio por um instante, perder o link de "Entrar" e feio para sempre. */ .menu{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:14px;font-weight:500} .menu a{color:var(--tinta-2);padding:6px 0;border-bottom:2px solid transparent} .menu a:hover,.menu a.ativo{color:var(--tinta);border-bottom-color:var(--vermelho)} /* `.menu a` (0,1,1) vencia `.carrinho-bolha` (0,1,0) e pintava o texto de cinza escuro sobre o azul escuro do botao — ilegivel. Na loja original o carrinho ficava fora do `.menu`; aqui esta dentro, entao o seletor precisa do mesmo peso. */ .menu a.carrinho-bolha,.carrinho-bolha{position:relative;display:inline-flex; align-items:center;gap:7px;background:var(--azul-esc);color:#fff;padding:8px 14px; border-radius:9px;border-bottom:2px solid transparent; font-family:var(--display);font-weight:600;font-size:13.5px} .menu a.carrinho-bolha:hover{color:#fff;border-bottom-color:transparent;opacity:.92} .carrinho-bolha .n{background:var(--amarelo);color:var(--tinta);border-radius:20px; padding:1px 7px;font-size:12px;font-weight:800} /* ── menu da conta ─────────────────────────────────────────────────────────── */ /* `
` em vez de JavaScript: abre sem script, fecha com Esc, entra na ordem de tabulação e é anunciado como botão expansível pelo leitor de tela — tudo de graça. O unico JS e o que fecha ao clicar fora, que nao tem equivalente em CSS. */ .menu-conta{position:relative} .menu-conta > summary{list-style:none;cursor:pointer;color:var(--tinta-2);padding:6px 0; border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px} .menu-conta > summary::-webkit-details-marker{display:none} /* A setinha diz que ali tem mais coisa. Sem ela o nome continua parecendo um link para o perfil, que e exatamente o engano que este menu veio desfazer. */ .menu-conta > summary::after{content:"▾";font-size:11px;opacity:.7} .menu-conta > summary:hover,.menu-conta > summary.ativo{color:var(--tinta); border-bottom-color:var(--vermelho)} .menu-conta[open] > summary{color:var(--tinta)} .menu-conta > summary .n{background:var(--azul);color:#fff;border-radius:20px; padding:0 6px;font-size:11.5px;font-weight:800} .menu-conta-itens{position:absolute;right:0;top:calc(100% + 10px);z-index:60; min-width:212px;background:var(--branco);border:1px solid var(--linha); border-radius:12px;padding:6px;display:flex;flex-direction:column; box-shadow:0 12px 30px rgba(0,0,0,.13)} .menu-conta-itens a{padding:8px 10px;border-radius:8px;border-bottom:none; color:var(--tinta);font-size:14px;display:flex;align-items:center;gap:7px} .menu-conta-itens a:hover{background:#F1F4F8;border-bottom-color:transparent} .menu-conta-itens a .n{background:var(--azul);color:#fff;border-radius:20px; padding:0 6px;font-size:11.5px;font-weight:800} .menu-conta-itens hr{border:none;border-top:1px solid var(--linha);margin:5px 8px} .menu-conta-itens a.sair{color:var(--vermelho)} /* ── secoes ────────────────────────────────────────────────────────────────── */ main{padding:26px 0 60px} section{margin-bottom:38px} .sec-topo{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap} .risco{width:42px;height:4px;border-radius:2px;background:var(--vermelho);margin-bottom:10px} h1{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.015em} .sub{color:var(--tinta-2);font-size:14.5px;margin:4px 0 0} /* ── grade de produtos ─────────────────────────────────────────────────────── */ .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px} /* Item de grade nao encolhe abaixo do min-content do que tem dentro. Sem isto, uma tabela larga numa celula estica a coluna, a pagina fica mais larga que a tela e **todo o resto** acompanha — foi assim que a arte da carta saiu cortada pela borda no celular. */ .grade > *,.lado-a-lado > *{min-width:0} .prod{background:var(--branco);border:1px solid var(--linha);border-radius:13px;overflow:hidden; display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s} .prod:hover{transform:translateY(-3px);box-shadow:var(--sombra)} .prod-img{position:relative;display:block;background:linear-gradient(170deg,#EEF2F8,#DDE4EF); padding:16px 16px 10px} .prod-img img{width:100%;display:block;border-radius:6px;aspect-ratio:63/88;object-fit:cover} .cond{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;padding:3px 7px; border-radius:5px;background:var(--verde);color:#fff;letter-spacing:.04em} .cond.SP{background:var(--azul)} .cond.MP{background:var(--alerta)} .cond.HP,.cond.D{background:var(--vermelho)} .prod-body{padding:0 14px 14px;display:flex;flex-direction:column;flex:1} .prod-ed{font-size:11px;font-weight:700;color:var(--tinta-2);letter-spacing:.05em} .prod-nome{font-size:14.5px;font-weight:700;margin:3px 0 9px;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em} .prod-preco{margin-top:auto} .prod-preco strong{font-family:var(--display);font-size:17px;font-weight:800;display:block} .prod-preco span{font-size:11.5px;color:var(--tinta-2)} .prod-btn{margin-top:11px;width:100%;border:0;background:var(--azul);color:#fff;font:inherit; font-weight:600;font-size:13.5px;padding:9px;border-radius:8px;cursor:pointer; font-family:var(--display);transition:background .15s} .prod-btn:hover{background:var(--azul-esc)} .prod-btn:disabled{background:var(--linha);color:var(--tinta-2);cursor:default} .prod-btn.ghost{background:none;border:1.5px solid var(--linha);color:var(--tinta)} .prod-btn.ghost:hover{border-color:var(--azul);color:var(--azul);background:none} .prod-vend{font-size:11px;color:var(--tinta-2);margin-top:6px} .prod-vend b{color:var(--tinta)} .prod-vend a:hover b{color:var(--azul)} /* A nota e informacao densa: precisa caber ao lado do nome sem virar um bloco. */ .nota{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:700; color:#7A5B00;background:#FFF4CC;border-radius:20px;padding:1px 7px;white-space:nowrap} /* Poucas avaliacoes: a media aparece, mas com a ressalva colada nela. Esconder seria pior — quem tem tres notas boas merece mostra-las. */ .nota .poucas{opacity:.7;font-weight:400} /* ── botoes ────────────────────────────────────────────────────────────────── */ .btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:14.5px; padding:11px 22px;border-radius:9px;background:var(--azul);color:#fff;border:0;cursor:pointer; transition:transform .16s,box-shadow .16s} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(42,117,187,.9)} .btn.sol{background:var(--amarelo);color:var(--tinta)} .btn.linha{background:none;border:2px solid var(--linha);color:var(--tinta)} .btn.linha:hover{border-color:var(--azul);color:var(--azul);box-shadow:none} .btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none} /* ── cartoes e listas ──────────────────────────────────────────────────────── */ .cartao{background:var(--branco);border:1px solid var(--linha);border-radius:13px;padding:18px} .cartao + .cartao{margin-top:14px} .cartao h3{font-size:16px;font-weight:700;margin-bottom:10px} .tabela{width:100%;border-collapse:collapse;font-size:14px} .tabela th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--tinta-2);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--linha)} .tabela td{padding:10px;border-bottom:1px solid var(--linha);vertical-align:middle} .tabela tr:last-child td{border-bottom:0} /* No celular a tabela e o que empurra a pagina para o lado: o carrinho vazava 33px e a conta 11px, e a tela inteira balancava na horizontal. Menos respiro por celula e quebra dentro da palavra (e-mail, nome comprido) resolvem sem redesenhar nada. Tabela que precisa mesmo de largura vive dentro de `.rolagem`, que rola sozinha. */ @media (max-width:430px){ .tabela{font-size:13px} .tabela td,.tabela th{padding:7px 5px} .tabela td{overflow-wrap:anywhere} } .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .selo{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px} .selo.ok{background:#E4F4EA;color:var(--verde)} .selo.aguarda{background:#FFF4CC;color:#7A5B00} .selo.ruim{background:#FBEAE6;color:var(--vermelho)} .selo.neutro{background:var(--papel);color:var(--tinta-2)} .vazio{background:var(--branco);border:1px dashed var(--linha);border-radius:13px; padding:40px 20px;text-align:center;color:var(--tinta-2)} .vazio b{display:block;color:var(--tinta);font-family:var(--display);font-size:17px;margin-bottom:6px} /* Tres pesos, e a diferenca entre eles e o que a pessoa precisa fazer: * `info` conta, `atencao` avisa de algo que vai acontecer, `alerta` diz que a acao * nao deu certo e esta parada esperando. `alerta` e o unico com barra lateral — e o * unico que nao pode ser lido de passagem. `erro` e o `alerta` sem a barra, para * quando ele aparece dentro de uma lista de linhas que ja tem hierarquia propria. */ .aviso-caixa{border-radius:10px;padding:13px 16px;font-size:14px;margin-bottom:16px} .aviso-caixa.info{background:#EAF2FB;color:var(--azul-esc)} .aviso-caixa.atencao{background:#FFF4CC;color:#7A5B00} .aviso-caixa.erro{background:#FBEAE6;color:var(--vermelho)} .aviso-caixa.alerta{background:#FBEAE6;color:#8C2408; border-left:4px solid var(--vermelho);border-radius:4px 10px 10px 4px} .aviso-caixa.alerta b{color:var(--vermelho)} .aviso-caixa.alerta a{text-decoration:underline} /* ── rodape ────────────────────────────────────────────────────────────────── */ footer{background:var(--tinta);color:#fff;padding:30px 0;margin-top:40px} .frod{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13.5px; color:rgba(255,255,255,.7)} .frod .dir{margin-left:auto} .frod a:hover{color:#fff} :focus-visible{outline:3px solid var(--azul);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ── tabela que nao estoura ────────────────────────────────────────────────── */ /* Tabela larga (a colecao tem oito colunas, com formulario dentro) empurra a pagina inteira para o lado no celular: o texto sai da tela e o scroll horizontal passa a valer para tudo. Rolar dentro da propria tabela resolve sem esconder coluna nenhuma. */ .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch} .rolagem > .tabela{min-width:560px} /* ── linha de acao: explicacao + botao ─────────────────────────────────────── */ /* No desktop o texto fica ao lado do botao. No celular ele nao cabe: com `flex:1` sobrando 60px, a frase quebra **uma palavra por linha** e a tela parece defeituosa. Empilhar e o unico jeito de continuar legivel. */ .acao{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .acao > .diz{flex:1;min-width:220px;font-size:13px;color:var(--tinta-2)} /* ── barra inferior do celular ─────────────────────────────────────────────── */ /* Escondida no desktop; no celular ela substitui o menu do topo. */ .barra-baixo{display:none} @media (max-width:820px){ .topo{flex-wrap:wrap;gap:10px;padding:10px 0} .busca{order:3;max-width:none;flex-basis:100%} .menu{font-size:13px;gap:12px} /* Duas colunas fixas, nao `auto-fill`. Com `minmax(150px,1fr)` numa tela de 390px so cabe uma coluna, e a carta ocupa a tela inteira — ver uma carta por vez transforma navegar em rolar. Duas e o que toda loja de carta faz. */ .grade{grid-template-columns:repeat(2,1fr);gap:12px} } @media (max-width:560px){ .wrap{padding:0 14px} main{padding:18px 0 90px} /* espaco para a barra de baixo nao cobrir */ section{margin-bottom:28px} /* O topo tinha aviso + faixa + marca + menu + busca: 320px de cabecalho antes de qualquer conteudo, mais de um terco da tela de um celular. */ .aviso{font-size:11.5px} .aviso .wrap{padding:6px 14px} .aviso .detalhe{display:none} .marca b{font-size:17px} .marca span span{display:none} /* O menu do topo some: sete itens em linha nao cabem em 390px, e o ultimo ("Entrar") ficava cortado pela borda. Vai para a barra de baixo. */ header .menu{display:none} .barra-baixo{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70; background:var(--branco);border-top:1px solid var(--linha); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -2px 14px -8px rgba(18,32,58,.4); } .barra-baixo a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; padding:5px 2px;font-size:10.5px;font-weight:600;color:var(--tinta-2); text-align:center;line-height:1.2; } .barra-baixo a.ativo{color:var(--azul)} .barra-baixo .icone{font-size:19px;line-height:1} .barra-baixo .bolha{position:relative} .barra-baixo .bolha .n{ position:absolute;top:-4px;right:-9px;background:var(--vermelho);color:#fff; border-radius:20px;padding:0 5px;font-size:10px;font-weight:800;line-height:1.5; } .acao{flex-direction:column;align-items:stretch} .acao > .diz{min-width:0} .acao .btn,.acao button{width:100%} .grade{gap:10px} .prod-img{padding:10px 10px 6px} .prod-body{padding:0 10px 12px} .prod-nome{font-size:13px;margin:2px 0 7px} .prod-preco strong{font-size:15.5px} .prod-btn{padding:8px;font-size:12.5px} .cartao{padding:14px} .btn{padding:10px 16px;font-size:14px} /* Duas colunas viram uma: `1fr 320px` de resumo ao lado nao cabe. */ .lado-a-lado{grid-template-columns:1fr!important} .frod{gap:8px} .frod .dir{margin-left:0} } /* Telas bem estreitas continuam com duas colunas — uma carta por linha nao ajuda ninguem a comparar preco, que e o que se faz numa vitrine. */ @media (max-width:360px){ .grade{gap:8px} .prod-nome{font-size:12.5px} } /* ── abas de secao ────────────────────────────────────────────────────────── Links, nao botoes com JavaScript: cada aba e uma pagina de verdade, com URL propria, botao de voltar funcionando e possibilidade de compartilhar. Aba que troca conteudo por script perde as tres coisas. */ .abas{display:flex;gap:4px;margin:18px 0 20px;border-bottom:2px solid var(--linha); overflow-x:auto;scrollbar-width:none} .abas::-webkit-scrollbar{display:none} .aba{padding:10px 16px;font-family:var(--display);font-weight:700;font-size:14.5px; color:var(--tinta-2);text-decoration:none;white-space:nowrap; border-bottom:3px solid transparent;margin-bottom:-2px} .aba:hover{color:var(--tinta)} .aba.ativa{color:var(--azul);border-bottom-color:var(--azul)} /* ── cadastre-se no header ─────────────────────────────────────────────────── Precisa do peso de `.menu a` (0,1,1) para vencer a cor cinza do link comum — o mesmo motivo do `.carrinho-bolha` acima. Sem os dois seletores o texto sai cinza escuro sobre o vermelho e fica ilegivel. Aparece so para quem esta deslogado: ai o menu tem seis itens, e o setimo ainda cabe nos 1100px que o teste de layout protege. */ .menu a.assine,.assine{background:var(--vermelho);color:#fff;padding:8px 14px; border-radius:9px;border-bottom:2px solid transparent;font-family:var(--display); font-weight:600;font-size:13.5px} .menu a.assine:hover{color:#fff;border-bottom-color:transparent;opacity:.92} /* ── Painel do vendedor: para onde postar ─────────────────────────────────── */ /* `user-select: text` explicito porque este bloco existe para ser copiado e colado numa etiqueta — e o resto do painel e area de clique. */ .entrega{margin-top:12px;padding:11px 13px;background:var(--papel);border-radius:10px; display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:start; user-select:text} .entrega .rot{grid-column:1;font-size:10.5px;font-weight:700;color:var(--tinta-2); text-transform:uppercase;letter-spacing:.05em} .entrega b{grid-column:1;font-size:14.5px;line-height:1.3} .entrega .end{grid-column:1;font-size:13px;line-height:1.45} .entrega .copiar{grid-column:2;grid-row:1/3;align-self:center;border:1px solid var(--linha); background:var(--branco);border-radius:8px;padding:6px 11px;font:inherit;font-size:12px; font-weight:600;cursor:pointer;color:var(--azul)} .entrega .copiar:hover{border-color:var(--azul)} /* ── Troca: para onde cada lado envia ─────────────────────────────────────── */ .ends{display:grid;grid-template-columns:1fr 1fr;gap:14px} .end-bloco{display:flex;flex-direction:column;gap:6px;align-items:flex-start; padding:11px 13px;background:var(--papel);border-radius:10px} .end-bloco .rot{font-size:10.5px;font-weight:700;color:var(--tinta-2); text-transform:uppercase;letter-spacing:.05em} .end-txt{margin:0;font-size:13.5px;line-height:1.5;user-select:text} .end-vazio{margin:0;font-size:12.5px;line-height:1.45;color:var(--tinta-2)} .end-bloco textarea{width:100%;padding:8px;border:1px solid var(--linha);border-radius:8px; font:inherit;font-size:13px;resize:vertical} .end-bloco .copiar{border:1px solid var(--linha);background:var(--branco);border-radius:8px; padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer; color:var(--azul)} .end-bloco .copiar:hover{border-color:var(--azul)} @media (max-width:620px){.ends{grid-template-columns:1fr}} /* ── Sugestao de preco no anuncio ──────────────────────────────────────────── */ .sugere{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.5; color:var(--tinta-2)} /* Botao com cara de link: a acao e "aceitar o numero", nao "enviar o formulario", e dois botoes de peso igual lado a lado fazem a pessoa parar para escolher. */ .lk-btn{border:0;background:none;padding:0;font:inherit;font-size:12px;font-weight:700; color:var(--azul);cursor:pointer;text-decoration:underline} /* ── Placar da troca (tela de decidir) ─────────────────────────────────────── */ /* As classes sao as mesmas de trocar_propor.html, que tem CSS proprio inline. Aqui moram na folha global porque esta tela nao tem bloco