/* O CONVITE (cadastro) E A CORTINA da Vessel Universe — o que sobrou da folha antiga (`estilo.css`) quando a página ganhou o visual novo aprovado pelo dono (28/09/2026). O resto da página tem o CSS dentro do próprio index.html; aqui mora só o que o `pagina.mjs` abre e fecha. ⚠️ `.botao` e `.apoio` desta folha vivem SÓ sob `#convite`: a página nova tem o próprio `.botao` (cor por `currentColor`), e o de cá (cor por `--cor-botao`) não pode vazar para fora do cartão. */ :root{ --espresso:#29211C; --olive:#667355; --mushroom:#F2EFE6; --warm-off-white:#B7AA9A; --olive-noir:#20261C; --olive-deep:#2A3023; --champagne:#C3A36A; --cta-ivory:#F4F0E7; --curva:cubic-bezier(.16,1,.3,1); --fonte:'Avenir Next',Montserrat,'Segoe UI',sans-serif; } /* ── A cortina de carregamento ─────────────────────────────────────────── As fontes chegam da rede; sem isto a página pisca com a fonte do sistema e salta pra Montserrat bem no título grande. A cortina cobre o salto. ⚠️ Chão de ~1,4s (pagina.mjs): o dono já reclamou que "não colou o círculo" — ele saía em 120ms, cedo demais pro olho notar que existiu. Teto de ~3s: rede ruim não pode deixar a página coberta pra sempre. */ #cortina{position:fixed;inset:0;z-index:100;background:var(--cta-ivory); display:flex;align-items:center;justify-content:center; transition:opacity .9s var(--curva),visibility .9s} #cortina.saiu{opacity:0;visibility:hidden} .anel{width:34px;height:34px;position:relative} .anel::before,.anel::after{content:"";position:absolute;inset:0; border-radius:50%;border:1px solid rgba(41,33,28,.14)} .anel::after{border-color:transparent;border-top-color:var(--champagne); animation:girar 1s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .anel::after{animation-duration:2.4s} } /* ---------- o botão e o texto de apoio, SÓ dentro do cartão ---------- */ #convite .botao{ --cor-botao:var(--cta-ivory);--cor-botao-inversa:var(--espresso); display:inline-block;min-height:0;gap:0;padding:.95em 2.1em;border:1px solid var(--cor-botao); background:none;color:var(--cor-botao);font-family:inherit; font-size:clamp(.6rem,.85vw,.7rem);font-weight:500;letter-spacing:.08em; line-height:1;text-transform:uppercase;text-decoration:none;cursor:pointer; position:relative;overflow:hidden;z-index:0;transition:color .3s; } #convite .botao::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--cor-botao); transform:translateY(101%);transition:transform .5s var(--curva); } #convite .botao:hover,#convite .botao:focus-visible{color:var(--cor-botao-inversa)} #convite .botao:hover::before,#convite .botao:focus-visible::before{transform:translateY(0)} #convite .apoio{font-size:.9rem;line-height:1.4;max-width:none;opacity:.82;margin:14px 0 0} /* ══════════════════════════════════════════════════════════════════════════ O CONVITE — o cadastro e os dois caminhos, no MESMO cartão (Task 12) ══════════════════════════════════════════════════════════════════════════ ⚠️ INSISTENTE por pedido do dono (ver o comentário grande em index.html e pagina.mjs): quem não se cadastrou vê este cartão TODA VEZ que abre a página — não é "fecha uma vez, nunca mais vê". "Ver a página primeiro" só fecha PARA ESTA visita. Mesmo vocabulário visual de universovessel/index.html (#convite): cartão escuro fixo, campo com sublinhado que acende em champagne no foco, botão com borda de 1px e preenchimento subindo no hover — a régua desta página. */ #convite{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,32px); background:rgba(32,38,28,.78); -webkit-backdrop-filter:blur(7px) saturate(.9); backdrop-filter:blur(7px) saturate(.9); opacity:0; visibility:hidden; transition:opacity .7s var(--curva), visibility .7s; /* ⚠️ `overflow-x:hidden` NÃO É ENFEITE (defeito já pago nesta página). Em CSS, quando um eixo deixa de ser `visible`, o OUTRO vira `auto` sozinho — e o campo-armadilha do formulário mora a 9999px à esquerda. Com os dois eixos roláveis, esses 9999px viravam área de rolagem: no celular de 375px o cartão nascia empurrado pra fora da tela, cortado na direita. */ overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } #convite.aberto{opacity:1; visibility:visible} #convite[hidden]{display:none} .convite-cartao{ position:relative; width:100%; max-width:432px; min-width:0; margin:auto; background:var(--olive-noir); color:var(--cta-ivory); border:1px solid rgba(244,240,231,.16); padding:clamp(30px,5.5vw,44px) clamp(24px,5vw,40px) clamp(26px,4.5vw,36px); /* Sobe 18px ao entrar — nada aparece por opacidade sozinha nesta página. */ transform:translateY(18px); opacity:0; transition:transform 1s var(--curva) .1s, opacity .9s var(--curva) .1s; } #convite.aberto .convite-cartao{transform:none; opacity:1} /* No celular o foco vai para o CARTÃO (não para o campo, senão o teclado sobe): o contorno de foco da página nova desenharia uma moldura em volta dele. */ #convite .convite-cartao:focus{outline:none} /* O fio champagne no canto do cartão — a mesma assinatura do fio do rótulo. */ .convite-cartao::before{ content:""; position:absolute; top:-1px; left:-1px; width:64px; height:2px; background:var(--champagne); } .convite-cartao > img{width:104px; margin-bottom:26px} .convite-fechar{ position:absolute; top:10px; right:10px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--cta-ivory); opacity:.45; cursor:pointer; padding:0; transition:opacity .25s var(--curva); } .convite-fechar:hover,.convite-fechar:focus-visible{opacity:1} .convite-rotulo{ font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin:0; } /* ---------- o formulário ---------- */ .convite-cartao form{margin-top:30px} .convite-cartao .campo{display:block; margin-bottom:20px} .convite-cartao .campo span{ display:block; font-size:.58rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin-bottom:8px; } .convite-cartao .campo input{ width:100%; background:none; border:none; border-bottom:1px solid rgba(244,240,231,.32); color:var(--cta-ivory); font-family:inherit; font-size:1rem; font-weight:400; padding:8px 0; border-radius:0; } .convite-cartao .campo input:focus{outline:none; border-bottom-color:var(--champagne)} /* O campo de WhatsApp em três pedaços — código do país como RÓTULO (ninguém digita duas vezes), DDD separado (a parte que mais se erra), e o DDD SOME fora do Brasil (conserto de 11/09/2026, mesmo desenho de regras-da-lista.mjs). */ .convite-cartao .fone{display:flex; align-items:flex-end; gap:10px} .convite-cartao .fone .mais{ font-size:1rem; padding:8px 0; opacity:.66; border-bottom:1px solid rgba(244,240,231,.32); } .convite-cartao .fone .pais{flex:0 0 38px} .convite-cartao .fone .ddd[hidden]{display:none} .convite-cartao .fone input{width:100%} .convite-cartao .fone .ddd{flex:0 0 54px} /* `min-width:0` não é enfeite: sem ele o input do número se recusa a encolher abaixo do próprio conteúdo e estoura a caixa no celular de 375px. */ .convite-cartao .fone .numero{flex:1 1 auto; min-width:0} /* A cor do `.botao` no cartão escuro (marfim) já vem em `#convite .botao`, no topo. */ #convite .convite-enviar{width:100%; display:flex; align-items:center; justify-content:center; margin-top:26px} #erro-convite{margin:14px 0 0; font-size:.8rem; color:#E7B4A4} .convite-depois{ display:block; width:100%; margin-top:18px; padding:6px 0; background:none; border:none; color:inherit; font:inherit; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.5; cursor:pointer; transition:opacity .25s var(--curva); } .convite-depois:hover,.convite-depois:focus-visible{opacity:.9} /* ---------- os dois caminhos (estado 2) e o agradecimento (estado 3) ---------- */ .obrigado{margin:0; font-size:1.05rem; line-height:1.5} /* O botão do WhatsApp, embaixo do recado de agradecimento. ⚠️ `display:inline-block` e não `block`: `.botao` é desenhado para caber no próprio texto (caixa alta, entreletra larga), e esticado na largura do cartão ele vira uma barra — o oposto da régua da página, que não tem botão de cor cheia nem caixa larga. `margin-top` de 24px é o mesmo respiro que separa os dois cartões da escolha, logo acima. */ #convite .convite-zap{display:inline-block; margin-top:24px} /* Os dois caminhos, dentro do próprio cartão — a régua do `.botao` (borda de 1px, zero preenchimento parado, preenchimento subindo no hover) aplicada num cartão inteiro em vez de um rótulo curto, porque aqui cada caminho carrega rótulo + frase, não só uma palavra. */ .convite-caminhos{display:flex; flex-direction:column; gap:14px; margin-top:28px} .convite-caminho{ position:relative; overflow:hidden; z-index:0; display:block; width:100%; text-align:left; border:1px solid rgba(244,240,231,.32); background:none; color:inherit; font-family:inherit; cursor:pointer; padding:18px 20px; transition:color .3s, border-color .3s; } .convite-caminho::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--cta-ivory); transform:translateY(101%); transition:transform .5s var(--curva); } .convite-caminho:hover,.convite-caminho:focus-visible{color:var(--espresso); border-color:var(--cta-ivory)} .convite-caminho:hover::before,.convite-caminho:focus-visible::before{transform:translateY(0)} .convite-caminho-rotulo{ display:block; font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; } .convite-caminho-apoio{ display:block; font-size:.82rem; opacity:.78; line-height:1.4; margin-top:6px; } .convite-caminho:hover .convite-caminho-apoio, .convite-caminho:focus-visible .convite-caminho-apoio{opacity:.9} /* ---------- as preferências da visita (estado 3) ---------- */ /* Mesmo vocabulário do cadastro logo acima: campo sem caixa, só o sublinhado que acende em champagne no foco. O que muda aqui é que existem escolhas (select), marcações (checkbox/radio) e um recado livre (textarea) — e os três NÃO herdam o desenho do `input` sozinhos. */ /* ⚠️ `hidden` SOZINHO NÃO ESCONDE NADA AQUI, e isso é uma armadilha do próprio CSS: o `display:none` que o atributo carrega vem da folha do NAVEGADOR, e QUALQUER regra de folha nossa que diga `display` ganha dele. `.convite-cartao .campo{display:block}` é exatamente uma dessas — e por causa dela o campo "quantas pessoas vêm com você" nascia À MOSTRA, mesmo escrito `hidden` no HTML. Medido no navegador, a 375px, em 17/09/2026. A regra abaixo devolve ao atributo o poder que ele deveria ter, dentro do cartão. `!important` aqui não é jeitinho: é o único peso que vence uma folha de navegador substituída por uma regra nossa mais específica, e é o mesmo remendo que `.fone .ddd[hidden]` já fazia sozinho, uma linha por vez. */ #convite [hidden]{display:none !important} .detalhes-politica{ margin:10px 0 0; font-size:.72rem; letter-spacing:.04em; opacity:.62; } /* Dia e hora lado a lado: são uma pergunta só. No celular, um embaixo do outro. */ .detalhes-dupla{display:flex; gap:16px; margin-top:4px} .detalhes-dupla .campo{flex:1 1 0; min-width:0} @media (max-width:420px){ .detalhes-dupla{display:block} } .convite-cartao .campo select, .convite-cartao .campo textarea{ width:100%; background:none; border:none; border-bottom:1px solid rgba(244,240,231,.32); color:var(--cta-ivory); font-family:inherit; /* ⚠️ 1rem = 16px, e é o MÍNIMO: abaixo disso o iOS dá zoom ao focar e a página salta na cara de quem está respondendo. */ font-size:1rem; font-weight:400; padding:8px 0; border-radius:0; } .convite-cartao .campo select:focus, .convite-cartao .campo textarea:focus{outline:none; border-bottom-color:var(--champagne)} .convite-cartao .campo textarea{resize:vertical; min-height:64px; line-height:1.5} /* ⚠️ A LISTA ABERTA DO `select` É DESENHADA PELO SISTEMA, não por esta folha: sem uma cor de fundo própria, ela sai marfim-sobre-marfim em parte dos navegadores e as opções ficam ilegíveis. */ .convite-cartao .campo select option{background:var(--olive-noir); color:var(--cta-ivory)} /* ⚠️ `color-scheme:dark` no campo de data NÃO É ENFEITE: sem ele o navegador desenha o ícone do calendário em preto sobre o cartão escuro, e ele simplesmente some — o campo fica parecendo quebrado. */ .convite-cartao .campo input[type="date"]{color-scheme:dark} /* Marcação (checkbox e radio): o `.campo input` acima deixa todo input com 100% de largura e sublinhado — o que numa caixinha de marcar vira uma barra atravessada. Aqui ela volta a ser uma caixinha. */ .detalhes-marca{display:flex; align-items:center; gap:10px; cursor:pointer; /* 40px de alvo para o dedo: a caixinha tem 17px, o rótulo inteiro é clicável por ser um `