/* ============================================================ VITRINE — pacotes em cards com arte, legendas das colunas e modalidades de comentário. Carrega DEPOIS de app.css e sobrescreve o que existia lá para .packs/.pack. Mobile-first: a grade de 2 colunas cabe em 390px. ============================================================ */ /* Paleta das duas origens. O Brasil puxa verde, o mundo puxa azul — a cor sozinha já separa as colunas antes de o cliente ler qualquer coisa. Agora ela entra CHAPADA e em doses pequenas (filete, rótulo, borda) em vez de pintar o card inteiro de degradê: o card é branco, como o resto da loja, e quem tem que saltar é o preço. */ .packs{ --br-fg:#0E7A3C; --br-bg:rgba(22,163,74,.10); --br-ln:#16A34A; --in-fg:#1D3FA8; --in-bg:rgba(47,107,240,.10); --in-ln:#2F6BF0; } /* --- Abas de origem: REMOVIDAS --- O toggle .natseg e a legenda .natone saíram junto com o markup. Brasil e Mundial agora aparecem JUNTOS na mesma lista, uma linha por (quantidade × origem), com a pastilha .nat dizendo de onde vem. Sem aba, sem clique extra, tudo visível de uma vez. */ /* --- Lista de pacotes (radio-list) ------------------------------------- UMA COLUNA de linhas selecionáveis, cada pacote numa LINHA só: bolinha + quantidade + unidade à esquerda, preço em pílula e etiqueta de desconto à direita. Nada empilhado. Por que não duas colunas lado a lado: para caber tudo numa linha, um pacote precisa de ~220px; em 460px de tela duas colunas dão ~190px cada e o conteúdo voltaria a empilhar, esticando o card para 120px+ de altura. Em coluna única sobra largura, a linha fica em ~60px e os 6 pacotes cabem numa tela. Brasil e Mundial ficam na MESMA lista (até 12 linhas), cada linha com a pastilha .nat da origem — a comparação é ler duas linhas, não trocar aba. */ .packs{display:grid;grid-template-columns:1fr;gap:4px;margin-top:0} /* Até 12 linhas (6 quantidades × 2 origens) precisam caber sem empurrar o formulário para fora da tela: a linha é a MENOR possível. ORÇAMENTO DE LARGURA em 390px (contado, não estimado): 390 − 24 (.card margin 12+12) − 24 (.svcform padding 12+12) − 24 (.field padding 12+12) = 318px de .pack 318 − 3 (as duas bordas de 1.5px, box-sizing:border-box) − 18 (padding 9+9 da própria .pack) = 297px de conteúdo 297 − 18 (bolinha .mark) − 15 (3 gaps de 5) = 264px para o texto O pior caso do catálogo NÃO é um serviço comum: é o TikTok "Espectadores na Live", com "217.545.811 espectadores" + "mundiais 🌎" + "R$ 220.809,90" — ~276px nos corpos anteriores, ou seja, 12px A MAIS que os 264 disponíveis, e o preço era comido pelo overflow:hidden da .pack. Por isso duas travas, nesta ordem: 1. os corpos caíram ~5% (.q 11px, .nat 9.5px, .p 10.5px), o que já faz o pior caso fechar em ~262px; 2. a .q pode encolher e cortar com reticências (flex:0 1 auto + min-width:0). Se um dia aparecer nome de unidade ainda maior, quem perde letra é "espectadores", nunca o PREÇO — que é o que decide a compra. ALTURA: 11,5 × 1.15 ≈ 13px de linha + 8px de padding = 21px de conteúdo, e o min-height de 30px é quem manda (a regra do cliente é menos rolagem, então a fonte encolhe antes da altura crescer). */ .packs[data-layout="cards"] .pack{position:relative; display:flex;flex-direction:row;align-items:center;gap:5px;text-align:left; min-height:30px;padding:4px 9px;background:#fff; border:1.5px solid var(--field);border-radius:14px; overflow:hidden;cursor:pointer;font-family:inherit; box-shadow:0 1px 5px rgba(11,36,82,.05); transition:border-color .15s ease,background-color .15s ease, box-shadow .18s ease,opacity .18s ease} .packs[data-layout="cards"] .pack > *{position:relative;z-index:1} /* Bolinha do radio: o alvo visual de que ali se escolhe uma opção entre várias. */ .packs[data-layout="cards"] .pack .mark{flex:0 0 18px;width:18px;height:18px; border-radius:50%;display:flex;align-items:center;justify-content:center; border:2px solid var(--field);background:#fff;color:transparent; font-size:11px;font-weight:800;line-height:1; transition:background-color .15s ease,border-color .15s ease,color .15s ease} /* Quantidade + UNIDADE ("100 seguidores"): o JS já emite as duas palavras juntas, então o nowrap aqui é obrigatório — sem ele "seguidores" cairia para a segunda linha e a caixa dobraria de altura. */ .packs[data-layout="cards"] .pack .q{flex:0 1 auto;min-width:0; font-size:11px;font-weight:800; color:var(--navy);line-height:1.15;letter-spacing:-.4px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* Origem POR EXTENSO ("brasileiros 🇧🇷" / "mundiais 🌎"), logo depois da quantidade. Deixou de ser pastilha: o texto por extenso não cabe dentro de uma pílula em 267px de faixa útil, e o fundo colorido comia ~12px de padding sem informar nada que a cor da letra já não diga. */ .packs[data-layout="cards"] .pack .nat{flex:0 0 auto;font-size:9.5px;font-weight:800; line-height:1.2;padding:0;background:none;border-radius:0;white-space:nowrap} .packs[data-layout="cards"] .pack .nat[data-nat="br"]{color:var(--br-fg)} .packs[data-layout="cards"] .pack .nat[data-nat="intl"]{color:var(--in-fg)} /* O selo "Mais vendido" (.badge) SAIU: era autoelogio e roubava largura da linha. Idem a etiqueta de desconto (.save) mais abaixo. */ /* Legenda opcional do admin: só existe no DOM quando ele preencheu. */ .packs[data-layout="cards"] .pack .cap{flex:0 1 auto;min-width:0; font-size:10px;font-weight:600;color:var(--muted2);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Preço grudado na direita: é onde a decisão acontece. O preço agora VESTE A COR DA ORIGEM (item 10) — verde para brasileiro, azul para mundial, exatamente os mesmos --br-fg/--in-fg dos rótulos. A pílula azul marinho saiu: com a origem por extenso ao lado, o fundo cheio brigava com a cor da própria linha e ainda gastava 16px de padding que a faixa não tem. Contraste sobre o branco da linha: #0E7A3C = 5,43:1 e #1D3FA8 = 9,02:1 — ambos passam em AA (4.5:1) mesmo sendo texto pequeno. */ .packs[data-layout="cards"] .pack .prow{flex:0 0 auto;margin-left:auto; display:flex;align-items:center;gap:5px} .packs[data-layout="cards"] .pack .p{padding:0;border-radius:0;background:none; font-size:10.5px;font-weight:800;color:var(--navy); line-height:1.15;letter-spacing:-.3px;white-space:nowrap} .packs[data-layout="cards"] .pack .p[data-nat="br"]{color:var(--br-fg)} .packs[data-layout="cards"] .pack .p[data-nat="intl"]{color:var(--in-fg)} .packs[data-layout="cards"] .pack:hover{border-color:rgba(7,58,121,.45); box-shadow:0 3px 10px rgba(11,36,82,.08)} /* --- Escolhido --------------------------------------------------------- Borda azul, fundo azul suave e a bolinha preenchida; as outras linhas esmaecem para a escolha não deixar dúvida. */ .packs[data-layout="cards"] .pack.on{border-color:var(--primary);background:var(--primary-soft); box-shadow:0 0 0 2px rgba(7,58,121,.16)} .packs[data-layout="cards"] .pack.on .mark{border-color:var(--primary); background:var(--primary);color:#fff} .packs[data-layout="cards"] .pack.on .q{color:var(--primary)} /* Escolhida, a linha ganha fundo var(--primary-soft) #E9F0F9. As cores da origem continuam legíveis ali: verde 4,72:1 e azul 7,84:1 (AA passa). Por isso o preço NÃO muda de cor ao ser escolhido — trocá-lo por azul faria o pacote brasileiro perder a marca verde justamente quando ele está em foco. */ .packs.picked[data-layout="cards"] .pack:not(.on){opacity:.55} .packs.picked[data-layout="cards"] .pack:not(.on):hover{opacity:1} /* Com arte do admin: a imagem vira o fundo da linha e o texto passa a branco. */ .packs[data-layout="cards"] .pack.hasart{background-size:cover;background-position:center; background-repeat:no-repeat;border-color:transparent} .packs[data-layout="cards"] .pack.hasart::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.38) 100%)} .packs[data-layout="cards"] .pack.hasart .q{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)} /* O limite inicial é só de densidade: a contagem deixa claro que há mais opções e o botão torna todas acessíveis sem reordená-las. */ .packs-more{display:block;width:100%;margin:9px 0 2px;padding:10px 12px; border:1.5px solid var(--primary);border-radius:12px;background:var(--primary-soft2); color:var(--primary);font:800 12px/1.2 var(--font);cursor:pointer} .packs-more:hover,.packs-more:focus-visible{background:var(--primary-soft)} .packs[data-layout="cards"] .pack.hasart .cap{color:rgba(255,255,255,.90); text-shadow:0 1px 3px rgba(0,0,0,.55)} /* Com arte, o fundo é imagem escurecida: verde e azul não têm contraste garantido contra foto nenhuma, então preço e origem voltam ao branco com sombra — a mesma saída já usada na .q logo acima. */ .packs[data-layout="cards"] .pack.hasart .p, .packs[data-layout="cards"] .pack.hasart .p[data-nat="br"], .packs[data-layout="cards"] .pack.hasart .p[data-nat="intl"], .packs[data-layout="cards"] .pack.hasart .nat, .packs[data-layout="cards"] .pack.hasart .nat[data-nat="br"], .packs[data-layout="cards"] .pack.hasart .nat[data-nat="intl"]{ color:#fff;background:none;text-shadow:0 1px 4px rgba(0,0,0,.55)} .packs[data-layout="cards"] .pack.hasart.on{border-color:var(--primary)} @media (prefers-reduced-motion:reduce){ .packs[data-layout="cards"] .pack{transition:none} } /* --- Fallback "prova de múltipla escolha" ------------------------------ Mesmo HTML, outra roupa: uma opção por linha, bolinha + quantidade + preço. Liga trocando PACKS_LAYOUT para 'lista' no topo de js/loja.js (ou aplicando a classe .simple no container). */ .packs[data-layout="lista"], .packs.simple{display:grid;grid-template-columns:1fr;gap:8px} .packs[data-layout="lista"] .pack, .packs.simple .pack{position:relative;display:flex;flex-direction:row;align-items:center; gap:10px;text-align:left;min-height:64px;padding:12px 14px; border:1.5px solid var(--field);border-radius:14px;background:#fff;background-image:none!important; cursor:pointer;font-family:inherit;transition:border-color .15s,background-color .15s} .packs[data-layout="lista"] .pack::before, .packs.simple .pack::before{content:none} /* Aqui a marca vira a bolinha do "radio": vazia quando solta, ✓ quando escolhida. */ .packs[data-layout="lista"] .pack .mark, .packs.simple .pack .mark{display:flex;align-items:center;justify-content:center; width:22px;height:22px;flex:0 0 22px;border-radius:50%; border:2px solid var(--field);background:#fff;color:transparent; font-size:13px;font-weight:800;line-height:1} .packs[data-layout="lista"] .pack.on .mark, .packs.simple .pack.on .mark{border-color:var(--primary);background:var(--primary);color:#fff} .packs[data-layout="lista"] .pack .q, .packs.simple .pack .q{font-size:15px;font-weight:800;color:var(--navy);line-height:1.2} /* A origem (BR/Mundial) ocupa o lugar do antigo .n, e o .prow empurra o preço para a direita: é o MESMO markup do modo "cards", só com outra roupa. */ .packs[data-layout="lista"] .pack .nat, .packs.simple .pack .nat{font-size:11px;font-weight:800;line-height:1.2; padding:2px 7px;border-radius:99px;white-space:nowrap} .packs[data-layout="lista"] .pack .nat[data-nat="br"], .packs.simple .pack .nat[data-nat="br"]{color:var(--br-fg);background:var(--br-bg)} .packs[data-layout="lista"] .pack .nat[data-nat="intl"], .packs.simple .pack .nat[data-nat="intl"]{color:var(--in-fg);background:var(--in-bg)} .packs[data-layout="lista"] .pack .prow, .packs.simple .pack .prow{margin-left:auto} .packs[data-layout="lista"] .pack .p, .packs.simple .pack .p{font-size:16px;font-weight:800;color:var(--primary);line-height:1.2} .packs[data-layout="lista"] .pack .cap, .packs.simple .pack .cap{flex:1 0 100%;font-size:11px;font-weight:600;color:var(--muted2);line-height:1.3} .packs[data-layout="lista"] .pack.on, .packs.simple .pack.on{border-color:var(--primary);background:var(--primary-soft)} .packs[data-layout="lista"] .pack[disabled], .packs.simple .pack[disabled]{opacity:.4;cursor:not-allowed;background:var(--field-bg)} .packs[data-layout="lista"] .pack[disabled] .p, .packs.simple .pack[disabled] .p{color:var(--muted)} /* --- Modalidades de comentário ---------------------------------------- 3 botões grandes, sempre à vista (nunca dropdown), com a explicação de uma linha embaixo do título. Empilhados: cabem no dedo e o texto não quebra em 390px. */ .kinds{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0 0} .kind{display:flex;flex-direction:column;align-items:flex-start;gap:1px; min-height:44px;padding:7px 11px;text-align:left; border:2px solid var(--field);border-radius:14px;background:#fff;cursor:pointer; font-family:inherit;transition:border-color .15s,background-color .15s} .kind .kt{font-size:14px;font-weight:800;color:var(--navy);line-height:1.2} .kind .kh{font-size:11.5px;font-weight:600;color:var(--muted2);line-height:1.3} .kind:hover{border-color:rgba(7,58,121,.55)} .kind.on{border-color:var(--primary);background:var(--primary-soft)} .kind.on .kt{color:var(--primary)} /* Telas bem estreitas: o preço e a quantidade são intocáveis; o que encolhe (e, no limite, some) é o acessório — o preço da outra origem e a legenda do admin. Assim a linha continua sendo UMA linha em 320px. */ @media (max-width:369px){ .packs[data-layout="cards"] .pack{gap:4px;padding:4px 8px;min-height:30px} .packs[data-layout="cards"] .pack .q{font-size:10.5px} .packs[data-layout="cards"] .pack .nat{font-size:9px} .packs[data-layout="cards"] .pack .p{font-size:10px} .packs[data-layout="cards"] .pack .cap{display:none} } /* --- Resumo do pedido + barra fixa de pagamento ------------------------ O botão de pagar fica no fim do passo 4; com o formulário aberto ele sai da tela justamente na hora em que o cliente decidiu. A barra grudada no rodapé repete o resumo e o total, e só aparece DEPOIS que um pacote foi escolhido (antes disso não há total nenhum a mostrar). */ .ordersum{display:block;margin-top:10px;padding:8px 10px;border-radius:11px; background:var(--primary-soft);color:var(--ink2); font-size:11.5px;font-weight:700;line-height:1.35;text-align:center} .ordersum b{color:var(--primary);font-weight:800} .ordersum .dot{color:var(--muted);margin:0 1px} .ordersum[hidden]{display:none} .paybar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50; width:min(460px,100%); padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97); border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(11,36,82,.12); transition:transform .24s ease,opacity .2s ease} @supports (backdrop-filter:blur(8px)){ .paybar{background:rgba(255,255,255,.90);backdrop-filter:blur(8px)} } .paybar[hidden]{display:none} .paybar.off{transform:translate(-50%,110%);opacity:0;pointer-events:none} .paybar .sum{margin-bottom:7px;text-align:center; font-size:11px;font-weight:700;color:var(--ink3);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .paybar .sum b{color:var(--primary);font-weight:800} .paybar .sum .dot{color:var(--muted);margin:0 1px} .paybar .btn{padding:12px 18px} /* Espaço para a barra não cobrir o rodapé da página. */ body.paybar-on{padding-bottom:96px} @media (prefers-reduced-motion:reduce){ .paybar{transition:none} }