/* ================================================================ BOTOES.CSS Todo elemento CLICÁVEL do site que representa uma AÇÃO ou ESCOLHA está aqui: os botões de navegação (Continuar/Voltar/Pular), os "chips" de opção única (tamanho, período, faixa de valor...), os "cards" de cor, os botões do modal de idade, o link de editar e o botão verde do WhatsApp. O que NÃO está aqui: os botões do calendário (setas de mês, dias, "limpar data") — ficam em calendario.css, porque só existem dentro daquele componente e não fazem sentido reaproveitados em outro lugar. Cada bloco abaixo é independente dos outros — você pode copiar só o bloco ".chip" pra outro projeto, por exemplo, e ele funciona sozinho (contanto que as variáveis de cor de base.css existam). ================================================================ */ /* ---------------------------------------------------------------- CHIPS — botões-pílula de escolha única (tamanho, período, faixa) O comportamento de "só um pode estar selecionado por vez" NÃO é deste CSS — é lógica em js/opcoes.js. Aqui só existe a APARÊNCIA de selecionado (controlada pelo atributo aria-checked="true", que o JS liga e desliga). ---------------------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;} /* flex-wrap:wrap deixa os chips quebrarem pra próxima linha quando não cabem todos lado a lado na largura da tela */ .chip{ background:rgba(9,9,9,0.6);border:1px solid var(--line);border-radius:999px; /* border-radius:999px é um "truque" pra garantir cápsula/pílula perfeitamente arredondada não importa o tamanho do texto dentro */ padding:10px 12px;font-size:12px;letter-spacing:0.04em;cursor:pointer; transition:border-color .2s ease,background .2s ease,color .2s ease; } .chip:hover{border-color:rgba(92,255,110,0.55);} .chip[aria-checked="true"],.chip.selected{ /* [aria-checked="true"] é o seletor que "escuta" o estado que o JS define. .selected existe como alternativa manual (caso você queira forçar um chip como selecionado direto no HTML, sem JS, pra teste) */ border-color:var(--acid);background:var(--acid-dim);color:var(--acid); } /* ---------------------------------------------------------------- CARDS — opção de cor (SÓ PRETO / PRETO + VERMELHO) Mesmo princípio dos chips (seleção via aria-checked), mas em formato de cartão maior, com uma amostra de cor (.swatch) dentro. ---------------------------------------------------------------- */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;} /* grid de exatamente 2 colunas iguais — se você adicionar uma 3ª opção de cor no HTML, ela vai quebrar pra uma segunda linha sozinha (2 em cima, 1 embaixo), porque o grid tem só 2 colunas fixas. Pra virar 3 colunas, troque para "repeat(3,1fr)" aqui. */ .card{ background:#0e0e0e;border:1px solid var(--line);border-radius:4px; padding:16px 14px;cursor:pointer;text-align:center; display:flex;flex-direction:column;align-items:center;gap:10px; transition:border-color .2s ease,transform .2s ease; } .card:hover{border-color:rgba(92,255,110,0.55);} .card[aria-checked="true"]{border-color:var(--acid);} .swatch{width:100%;height:34px;border-radius:2px;border:1px solid #2a2a2a;} /* a amostra visual da cor em si — pra adicionar uma nova opção de cor, você define o gradiente/cor de fundo direto no atributo style do elemento .swatch no HTML (veja o exemplo de "Preto + vermelho") */ .card-label{font-size:11px;letter-spacing:0.14em;text-align:center;} .card[aria-checked="true"] .card-label{color:var(--acid);} /* ---------------------------------------------------------------- BARRA FIXA DE NAVEGAÇÃO (Voltar / Pular / Continuar) Fica grudada no rodapé da tela o tempo todo, por cima de qualquer conteúdo que role por trás dela. ---------------------------------------------------------------- */ .cta-bar{ position:fixed;left:0;right:0;bottom:0;z-index:30; /* z-index:30 é bem mais alto que as camadas de fundo (0-2) e que o progress-wrap — garante que a barra sempre fique por cima de tudo, exceto do modal de idade (z-index:60 em modal-idade.css) */ padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom)); /* env(safe-area-inset-bottom) evita que os botões fiquem escondidos atrás da barra de gestos do iPhone (a "pastilha" na parte de baixo) */ background:linear-gradient(to top, #050505 55%, rgba(5,5,5,0.85) 80%, transparent); /* gradiente que vai de opaco embaixo até transparente em cima: assim, se o texto da tela rolar até por trás dessa barra, ele "some" aos poucos em vez de ser cortado de forma abrupta e feia */ display:flex;gap:10px;justify-content:center; } .cta-inner{width:100%;max-width:560px;display:flex;align-items:center;gap:10px;} /* alinha os botões (voltar / pular / continuar) na mesma largura máxima usada pelo conteúdo das telas (.screen), pra tudo ficar visualmente alinhado */ .cta-btn{ /* o botão verde principal — "Continuar →", "Enviar meu orçamento →" etc. O TEXTO dele muda dinamicamente via JS (jornada.js), dependendo de em qual tela você está; o CSS aqui só define a aparência. */ flex:1;padding:16px;background:var(--acid);color:#050505;border:none;border-radius:3px; font-size:12.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer; transition:opacity .2s ease,transform .15s ease; } .cta-btn:active{transform:scale(0.985);} /* efeito de "afundar" ao tocar/clicar, dá feedback tátil visual */ .cta-btn:disabled{opacity:0.28;cursor:not-allowed;} /* hoje nenhum botão usa o atributo disabled de fato (a validação usa mensagem de erro em vez de desabilitar o botão) — mas o estilo já está pronto caso você decida trocar essa estratégia de validação */ .cta-btn.ghost{ /* variante "fantasma", usada no botão "Pular" da tela de vídeo: mais discreta, pra não competir visualmente com o botão principal */ flex:0 0 auto;background:rgba(9,9,9,0.6);color:var(--muted);border:1px solid var(--line); font-weight:600;padding:16px 18px;text-transform:none;letter-spacing:0.04em; } /* ---- botão de voltar (seta ← no canto) ---- */ .back-btn{ background:transparent;border:1px solid var(--line);border-radius:999px; width:34px;height:34px;display:none; /* escondido por padrão */ align-items:center;justify-content:center; color:var(--bone);cursor:pointer;font-size:15px;line-height:1; flex:0 0 auto; /* não estica nem encolhe dentro do .cta-inner — mantém sempre 34x34px */ transition:border-color .2s ease; } .back-btn:hover{border-color:var(--acid);} .back-btn.show{display:flex;} /* essa classe .show é adicionada pelo JS (jornada.js) só a partir da 2ª tela em diante — na intro não faz sentido ter botão de "voltar" */ /* ---------------------------------------------------------------- BOTÕES DO MODAL DE CONFIRMAÇÃO DE IDADE ---------------------------------------------------------------- */ .modal-btn{ width:100%;margin-top:12px;padding:14px;border-radius:3px;border:none;cursor:pointer; background:var(--acid);color:#050505;font-size:12px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase; } .modal-btn.ghost{ background:transparent;border:1px solid var(--line);color:var(--muted); font-weight:500;text-transform:none;letter-spacing:0.04em; } /* botão secundário "Ainda não tenho" — visualmente mais discreto que o principal "Tenho 18 anos ou mais", pra não sugerir que as duas opções têm o mesmo "peso" */ /* ---------------------------------------------------------------- LINK DE EDITAR E BOTÃO DO WHATSAPP (tela final) ---------------------------------------------------------------- */ .edit-link{ /* "← quero corrigir alguma coisa" — tecnicamente um