/* ===== estilo/base.css ===== */ /* ============================================================ BASE · página experimental-recife (19/08/2026) A lei visual é o CONTRATO.md do design system (Pulso Neon, rev. 22/07). Aqui só entram tokens do índice fechado; o que é livre é layout, tratamento e assinatura. O que ele pediu por voz em 19/08: "a identidade visual da BORA e o site novo que a gente criou como referência ... na primeira sessão título, subtítulo, botão e uma foto do lado, numa box com bordas arredondadas, algo bem sutil ... a segunda sessão pode ser criativa, o fundo diferente do da primeira ... a terceira o CTA final como o do nosso site novo." Sequência de chãos (a lei desta página, medida no hero travado): BRANCO (hero) -> PRETO (pra quem é) -> BRANCO com a box NEON (CTA) -> PRETO (rodapé). O contraste é relacional: a S2 escura existe para o neon do fecho chegar como pico, e não como mais uma cor. ============================================================ */ @font-face{font-family:'Altone';font-weight:400;font-style:normal;font-display:swap; src:url("fontes/Altone-Regular.woff2") format("woff2")} @font-face{font-family:'Altone';font-weight:700;font-style:normal;font-display:swap; src:url("fontes/Altone-Bold.woff2") format("woff2")} @font-face{font-family:'Altone';font-weight:800;font-style:normal;font-display:swap; src:url("fontes/Altone-ExtraBold.woff2") format("woff2")} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--cor-fundo); color:var(--cor-texto); font-family:var(--fonte-texto); font-size:var(--txt-base); line-height:var(--lh-texto); -webkit-font-smoothing:antialiased} img{display:block;max-width:100%} /* o palco: a mesma calha da casa em todas as seções */ .palco{max-width:var(--cont-padrao);margin-inline:auto; padding-inline:var(--margem-palco)} /* ============ o rótulo da casa (eyebrow) ============ caixa alta, tracking de kicker, com o traço neon antes. No branco o texto do rótulo é PRETO (contrato, rev. 22/07: eyebrow no branco nunca é verde); o neon fica só no traço, que é decorativo e não carrega informação sozinho. */ .rotulo{display:inline-flex;align-items:center;gap:var(--esp-2xs); margin:0;font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-texto)} .rotulo::before{content:"";width:var(--traco-larg);height:var(--traco-alt); background:var(--cor-grafico);border-radius:var(--raio-xs);flex:none} /* ============ o botão da casa ============ pílula neon com rótulo preto, extrabold, caixa alta. É o mesmo componente das 7 CTAs da página de vendas: raio, peso, corpo, tracking, caixa e recuo idênticos. */ .btn{display:inline-flex;align-items:center;justify-content:center; min-height:var(--botao-alt-min); padding:var(--botao-pad-y) var(--botao-pad-x); border-radius:var(--botao-raio); background:var(--botao-primario-bg);color:var(--botao-primario-fg); font-family:var(--fonte-texto);font-weight:var(--botao-peso); font-size:var(--txt-sm);letter-spacing:var(--ls-caps); text-transform:uppercase;text-decoration:none;border:0;cursor:pointer; transition:background var(--dur-padrao) var(--ease-enfase), transform var(--dur-padrao) var(--ease-enfase)} .btn:hover{background:var(--botao-primario-bg-hover);transform:translateY(-2px)} .btn:focus-visible{outline:var(--foco-anel) solid var(--cor-foco); outline-offset:var(--foco-offset)} /* a linha miúda embaixo do botão (rev. 19/08, pedido dele: "embaixo de todos os botões, uma escrita bem pequenininha, tipo gratuito"). Ela herda a tinta sutil do contexto, então funciona no branco, no escuro e dentro do neon sem regra nova. */ .micro-cta{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm); color:var(--cor-texto-sutil)} /* o par fantasma + sólida: a manchete da casa. A linha de contexto entra em peso regular e tinta rebaixada, a de ênfase em bold e tinta cheia. Mesma régua do hero e do fecho da página de vendas. */ .manchete{margin:0;line-height:var(--display-lh); letter-spacing:var(--display-ls);font-weight:var(--titulo-peso-forte); color:var(--cor-texto);text-wrap:balance} .manchete .linha{display:block} .manchete .fantasma{font-weight:var(--titulo-peso-suave); color:var(--cor-texto-sutil)} /* piso permanente: quem navega por teclado enxerga onde está, e quem pediu menos movimento recebe a página parada e inteira */ :focus-visible{outline:var(--foco-anel) solid var(--cor-foco); outline-offset:var(--foco-offset)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} html{scroll-behavior:auto} } /* ===== estilo/hero.css ===== */ /* ============================================================ O HERO, que nesta página é a página (chão branco) Herdado do hero do treinão de Brasília, que ele aprovou olhando no mesmo dia (22/09): bloco único centrado, sem foto, par fantasma + sólida na manchete. Aqui ele carrega uma peça a mais, a escada de preço, que mora em `precos.css`. POR QUE A LARGURA TEM TETO, e é o número mais importante desta folha: linha de leitura longa demais cansa, e manchete larga demais quebra em lugar errado. 40rem (640px) é o limite em que o par fantasma + sólida fecha em três linhas no desktop, com o subhead em duas. E POR QUE O RESPIRO CRESCEU: sem a foto, o hero encolheu quase 300px de altura. Se ele só encolhesse, a dobra ficaria com a manchete colada no topo e o botão no meio da tela, com branco morto embaixo. O padding maior devolve ao bloco o lugar de dobra inteira. ============================================================ */ /* A PÁGINA INTEIRA CABE NUMA TELA, e por isso ela precisa OCUPAR a tela: medido em 22/09 no 1440x900, depois que o preço e o subtítulo saíram, o conteúdo fechou em 765px e sobravam 135px de branco DEPOIS da faixa preta do rodapé, que é o pior lugar possível para sobrar (parece que a página quebrou no fim). O corpo vira uma coluna de altura mínima igual à da janela e o hero estica; o rodapé fica colado no fim da tela quando a página é curta e empurrado para baixo quando ela cresce (no 390 ela passa de 800px). `svh` e não `vh`: no celular a barra do navegador entra na conta e o `vh` deixa a faixa preta meio escondida. */ body{min-height:100svh;display:flex;flex-direction:column} .hero{flex:1;background:var(--cor-fundo);color:var(--cor-texto); padding-block:clamp(2.4rem,6vh,4.4rem) clamp(3.4rem,9vh,6rem); overflow:clip} /* a coluna única, centrada */ .hero__grade{display:flex;flex-direction:column;align-items:center; gap:clamp(1.4rem,3.4vh,2.2rem)} /* a marca no alto da página: a escrita da BORA, sozinha (esta não é página de parceria), centrada na calha. Ela é `.palco` e mora FORA da grade, então não herda o `align-items:center` dela. */ .hero__marca{display:flex;justify-content:center; margin-bottom:clamp(1.1rem,3.2vh,2rem)} .hero__marca img{height:clamp(1.35rem,1.9vw,1.9rem);width:auto} .hero__texto{display:flex;flex-direction:column;align-items:center; text-align:center;gap:var(--esp-sm); width:100%;max-width:40rem} /* a manchete pode crescer um degrau em relação à versão com foto: a coluna passou de 501px para 640px, e o par fechava em três linhas curtas demais para o tamanho do bloco. */ .hero__titulo{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem); margin-block:var(--esp-2xs) 0} /* O QUE FICA CENTRADO DENTRO DO FORMULÁRIO, e o que não. O formulário inteiro alinhado ao centro deixaria o rótulo "NOME COMPLETO" no meio e o valor digitado começando na esquerda do campo, que é o defeito medido em 25/08 no celular. Então campo e rótulo continuam à esquerda, e voltam ao eixo do meio as três peças que não são campo: a chamada, o botão e a linha miúda. Sem isso o botão ficava pendurado na quina esquerda de uma dobra inteira centrada. */ .captura__chamada, .captura__acao, .captura .micro-cta{text-align:center} /* o eyebrow é inline-flex com o traço neon antes: centralizar o bloco não basta, ele precisa centralizar o próprio conteúdo. Vale nos três tamanhos desde que o hero passou a nascer centrado. */ .hero__texto .rotulo{justify-content:center} .hero__sub{margin:0;max-width:36rem;font-size:var(--txt-md); line-height:var(--lh-media);color:var(--cor-texto-sutil);text-wrap:pretty} .hero__acao{margin:var(--esp-2xs) 0 0} /* a caixa de pendência do fonte: ela só existe aqui e some inteira no modo apresentação. */ .hero__pendencia{margin:var(--esp-sm) auto 0;max-width:var(--cont-texto); font-size:var(--txt-xs);line-height:var(--lh-media);color:var(--cor-texto); background:var(--sys-aviso-fundo); border-left:var(--traco-alt) solid var(--sys-aviso); padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs)} /* ===== estilo/captura.css ===== */ /* ============================================================ OS FATOS DO EVENTO + O FORMULÁRIO DE CAPTURA As duas peças que esta página tem e a aula experimental não tinha: lá o dia, a hora e o lugar viviam dentro do modal, porque a pessoa escolhia entre nove horários. Aqui existe UM evento, com UMA data, e a escolha não existe: o que existe é informação a decorar e um formulário a preencher. ============================================================ */ /* ============ a caixa dos fatos ============ Em Indaiatuba é um retângulo de contorno neon com quatro itens soltos em linha. Contorno fechado em neon sobre o branco vira o objeto mais aceso da dobra e rouba a atenção do formulário, que é a ação. Aqui a tinta neon fica só no FILETE lateral (o mesmo gesto do .rotulo da casa, que já usa o traço neon como marcador), e a informação se organiza como o que ela é: termo e valor. */ .fatos{margin:var(--esp-xs) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,auto)); justify-content:center; gap:var(--esp-sm) clamp(1.1rem,2.4vw,2rem); text-align:left} .fatos__item{display:flex;flex-direction:column;gap:var(--esp-3xs); padding-left:var(--esp-xs); border-left:var(--traco-alt) solid var(--cor-grafico)} .fatos__rotulo{margin:0;font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-texto-sutil)} .fatos__valor{margin:0;font-size:var(--txt-base);line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold); color:var(--cor-texto)} /* o endereço e o "free to join" descem uma linha e uma régua: eles são a letra miúda do fato, não o fato */ .fatos__miudo{display:block;margin-top:var(--esp-3xs); font-size:var(--txt-sm);font-weight:var(--peso-regular); letter-spacing:normal;line-height:var(--lh-media); color:var(--cor-texto-sutil)} /* ============ o campo da casa ============ Copiado do modal da aula experimental sem uma vírgula de mudança, porque é o componente do contrato: campo em caixa está vetado, rótulo na margem, entrada na medida, filete atravessando. */ .campo{display:flex;flex-direction:column;gap:.2rem;margin:var(--esp-sm) 0 0} .campo__rotulo{font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-texto-sutil)} .campo__entrada{border:0;border-bottom:1px solid var(--cor-borda-forte); background:transparent;color:var(--cor-texto); font-family:var(--fonte-texto);font-size:var(--txt-base); min-height:var(--botao-alt-min); padding:var(--esp-2xs) 0;border-radius:0} .campo__entrada:focus{outline:0;border-bottom-width:var(--traco-alt); border-bottom-color:var(--cor-marca-texto)} .campo__entrada:focus-visible{outline:var(--foco-anel) solid var(--cor-foco); outline-offset:var(--foco-offset)} /* ============ o formulário ============ */ /* o formulário fica centrado no bloco, mas o CONTEÚDO dele continua alinhado à esquerda: rótulo e valor moram no mesmo eixo, senão o rótulo "NOME COMPLETO" fica no meio e o que a pessoa digita começa na esquerda do campo. É a mesma exceção que o celular já tinha. */ .captura{margin:var(--esp-sm) auto 0;width:100%;max-width:30rem; text-align:left} .captura__chamada{margin:0;font-size:var(--txt-base); font-weight:var(--peso-bold);color:var(--cor-texto)} .captura .campo{margin-top:var(--esp-xs)} .captura .campo__entrada{width:100%} /* e-mail e telefone dividem a linha. Ver o comentário no fragmento: os três empilhados jogavam o botão de envio para fora da dobra. No celular eles voltam a empilhar (bloco único do responsivo.css): campo de e-mail com 160px de largura não se digita. */ .captura__par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--esp-sm)} /* o placeholder é dica, nunca rótulo: tinta rebaixada para ele não se confundir com valor preenchido */ .captura .campo__entrada::placeholder{color:var(--cor-texto-fraco);opacity:1} /* campo reprovado na validação: o filete vira vermelho e engrossa. A cor não carrega a informação sozinha (a mensagem de erro em texto diz o que houve), ela só aponta onde. */ .captura .campo__entrada[aria-invalid="true"]{ border-bottom-color:var(--cor-erro); border-bottom-width:var(--traco-alt)} /* o respiro antes do botão é o --esp-sm, e não o --esp-md do resto da casa: medido em 25/08, com --esp-md o botão de envio caía em y=855 numa dobra de 900px, ou seja fora da primeira tela em 1440. */ .captura__acao{margin:var(--esp-sm) 0 0} .captura__erro{margin:var(--esp-sm) 0 0;font-size:var(--txt-sm); color:var(--cor-erro);font-weight:var(--peso-bold)} .captura__erro[hidden]{display:none} /* enquanto o envio está no ar o botão fica claramente ocupado, em vez de parecer que o clique não pegou. Foi o que ele sentiu em 20/08 na experimental ("demorou um pouco pra concluir"). */ .captura[data-enviando] .campo__entrada{opacity:.6;pointer-events:none} /* a armadilha de robô sai da tela sem sair do formulário: display:none em campo de isca é o primeiro sinal que robô procura */ .captura__isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* a legenda da pendência da foto: ela existe só no FONTE. No modo apresentação a linha inteira sai, e a box da foto volta a ser só a box da foto. */ .hero__legenda{margin:var(--esp-2xs) 0 0;font-size:var(--txt-xs); line-height:var(--lh-media);color:var(--cor-texto); background:var(--sys-aviso-fundo); border-left:var(--traco-alt) solid var(--sys-aviso); padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs)} /* ============================================================ A PERGUNTA DA PARCERIA · três opções, uma escolha Pedido dele em 22/09/2026: o formulário pergunta se a pessoa é atleta da BORA, da TIME ou de assessoria nenhuma. É a única pergunta desta página que não existia no molde de Miami, e é ela que diz, depois do evento, quem veio de cada lado. POR QUE PÍLULA E NÃO RADINHO REDONDO: as três opções precisam de alvo de toque de 44px no celular, e um círculo de 20px com o rótulo ao lado só chega lá se a linha inteira for clicável, o que é invisível para quem olha. A pílula É o alvo: o que se vê é o que se toca. O INPUT CONTINUA EXISTINDO, e é um radio de verdade: ele fica transparente por cima da pílula, em vez de `display:none`. Escondê- lo de verdade tiraria o campo do tab e da navegação por seta, que é como leitor de tela percorre um grupo de rádios. A COR DO ESCOLHIDO É PRETA, e não neon: o neon desta dobra é do botão de envio, que é a ação. Uma pílula neon acesa ao lado dele dividiria o único pico de cor da primeira tela em dois. ============================================================ */ /* o respiro vem daqui, do elemento de CIMA, nunca de margem no : margem em legend não empurra nada (medido em 09/2026: 44,8px de margem declarada e folga real de 0px). */ .escolha{margin:var(--esp-sm) 0 0;padding:0;border:0;min-width:0} .escolha__pergunta{padding:0; font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-texto-sutil)} .escolha__opcoes{display:flex;flex-wrap:wrap;gap:var(--esp-2xs); margin-top:var(--esp-2xs)} .opcao{position:relative;display:inline-flex;align-items:center; min-height:var(--botao-alt-min); padding:var(--esp-2xs) var(--esp-sm); border:1px solid var(--cor-borda-forte); border-radius:var(--raio-pill); cursor:pointer; transition:background var(--dur-padrao) var(--ease-enfase), border-color var(--dur-padrao) var(--ease-enfase), color var(--dur-padrao) var(--ease-enfase)} /* o radio de verdade, transparente por cima da pílula inteira */ .opcao__radio{position:absolute;inset:0;width:100%;height:100%; margin:0;opacity:0;cursor:pointer} .opcao__texto{font-size:var(--txt-sm);font-weight:var(--peso-bold); line-height:var(--lh-apertada);color:var(--cor-texto)} .opcao:hover{border-color:var(--cor-texto)} /* escolhida: campo preto, rótulo branco. Sem depender só da cor, a pílula também engorda a borda, o que continua visível em tela monocromática e para quem não distingue as duas tintas. */ .opcao:has(.opcao__radio:checked){ background:var(--bora-preto);border-color:var(--bora-preto)} .opcao:has(.opcao__radio:checked) .opcao__texto{color:var(--bora-branco)} /* navegação por teclado: o anel mora na pílula, não no input invisível (que tem 0 de opacidade e daria um anel fantasma) */ .opcao:has(.opcao__radio:focus-visible){ outline:var(--foco-anel) solid var(--cor-foco); outline-offset:var(--foco-offset)} /* grupo reprovado na validação: o mesmo filete vermelho dos campos de texto, aqui na borda das três pílulas. A cor não carrega a informação sozinha: a mensagem de erro em texto diz o que houve. */ .escolha[data-invalido] .opcao{border-color:var(--cor-erro)} /* ===== estilo/fecho.css ===== */ /* ============================================================ S3 · O CONVITE (box neon no branco) Idioma herdado do .fecho da página de vendas (r35). ============================================================ */ .fecho{background:var(--bora-branco); padding:clamp(2.2rem,5vh,3.4rem) clamp(.8rem,1.8vw,1.4rem) clamp(2.6rem,5.2vh,3.9rem)} /* a box: mesmo raio de canto dos objetos flutuantes da casa. É a única massa de cor cheia da página, e é ela que concentra a ousadia (a assinatura mora aqui, e por isso não se repete). */ .fecho__painel{position:relative;overflow:clip;isolation:isolate; background:var(--cor-fundo);color:var(--cor-texto); border-radius:clamp(1.6rem,1.2rem + 1.2vw,2.4rem); display:flex;flex-direction:column} /* o raio: sobre o neon a única tinta que lê é a preta (contrato, --pattern-op-lateral no contexto verde = 0.14). Ele sangra pela esquerda e se dissolve por máscara ANTES da coluna de leitura, que é a correção medida da r26 ("o grafismo está dificultando a leitura"): 0% da caixa da manchete, do apoio e da CTA. */ .fecho__raio{position:absolute;z-index:0;pointer-events:none; width:clamp(34rem,66vw,60rem);aspect-ratio:750/840; background:var(--bora-preto);opacity:var(--pattern-op-lateral); left:clamp(-26rem,-25vw,-14rem);top:56%;transform:translateY(-50%); -webkit-mask:url("marca/bora-pattern.svg") center/contain no-repeat; mask:url("marca/bora-pattern.svg") center/contain no-repeat} /* a dissolução só entra onde o navegador sabe INTERSECTAR duas máscaras. Sem isso as camadas somariam e o degradê viraria uma laje preta sobre o neon, que é o pior resultado possível. */ @supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){ /* onde a dissolução acaba, em vw e não em %: medido na r26, com o degradê em % da caixa do grafismo o defeito voltava em 1280 e 1024 sem ninguém ver. O max() é o piso do celular. */ .fecho__raio{ -webkit-mask-image:url("marca/bora-pattern.svg"), linear-gradient(90deg,var(--bora-preto) 0 max(calc(75vw - 555px),40%),transparent max(calc(75vw - 415px),56%)); mask-image:url("marca/bora-pattern.svg"), linear-gradient(90deg,var(--bora-preto) 0 max(calc(75vw - 555px),40%),transparent max(calc(75vw - 415px),56%)); -webkit-mask-size:contain,100% 100%; mask-size:contain,100% 100%; -webkit-mask-position:center,center; mask-position:center,center; -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat; -webkit-mask-composite:source-in; mask-composite:intersect} } .fecho__miolo{position:relative;z-index:1;flex:1; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:var(--esp-sm); padding:clamp(3rem,8vh,5rem) clamp(1.2rem,4vw,3rem); min-height:min(46svh,26rem)} /* dentro do neon o rótulo perde o traço: o neon do traço contra o campo neon mede 1,00:1 e sumiria. O texto preto basta. */ .fecho__rotulo{color:var(--cor-texto)} .fecho__rotulo::before{display:none} .fecho__titulo{font-size:clamp(2.05rem,1.15rem + 4.2vw,4.5rem)} .fecho__apoio{margin:0;max-width:40rem;font-size:var(--txt-md); line-height:var(--lh-media);color:var(--preto-72);text-wrap:pretty} /* os lugares: lista sem marcador, separada por filetes finos. Sem dia e sem horário, por decisão dele em 19/08. */ .fecho__lugares{list-style:none;margin:var(--esp-2xs) 0 0;padding:0; display:flex;flex-direction:column;align-items:center; gap:var(--esp-3xs);font-size:var(--txt-base); line-height:var(--lh-media);color:var(--cor-texto);font-weight:var(--peso-bold)} .fecho__lugares li{padding-top:var(--esp-3xs)} .fecho__lugares li + li{border-top:1px solid var(--preto-18); padding-top:var(--esp-2xs);margin-top:var(--esp-3xs)} .fecho__acao{margin:var(--esp-2xs) 0 0} /* a CTA invertida: campo preto, rótulo neon. É o que o design-system já prevê em .contexto-verde (--botao-primario-bg: preto, --botao-primario-fg: verde), então isto não é caso especial, é o contrato. */ .fecho__cta{background:var(--bora-preto);color:var(--bora-verde)} .fecho__cta:hover{background:var(--neutro-700);color:var(--bora-verde)} /* o anel de foco padrão é o verde-profundo, que dentro do campo neon quase some: aqui ele vira PRETO */ .fecho__cta:focus-visible{outline:var(--foco-anel) solid var(--bora-preto); outline-offset:var(--foco-offset)} .fecho__micro{color:var(--preto-72)} .fecho__assinatura{margin:var(--esp-2xs) 0 0;font-size:var(--txt-xs); letter-spacing:var(--ls-caps);color:var(--preto-72)} /* ===== estilo/rodape.css ===== */ /* ============================================================ RODAPÉ · uma faixa preta com o ícone, e nada mais Rev. 22/09/2026: "pode tirar o rodapé; se for deixar, só deixa preto com a logo da BORA ali embaixo, com o ícone da BORA". Saiu o rodapé de três colunas da casa (marca, contato, dados da empresa e a palavra BORA gigante). O que ficou é uma faixa: chão preto, ícone centrado, respiro generoso dos dois lados. A ALTURA É CURTA DE PROPÓSITO. Esta página tem uma dobra só; um rodapé alto no fim de uma página curta vira um segundo bloco, e o olho volta para ele em vez de parar no botão. Aqui ele é o ponto final da frase, não um parágrafo novo. ============================================================ */ .rodape{background:var(--bora-preto); display:flex;align-items:center;justify-content:center; padding-block:clamp(1.8rem,4.5vh,2.8rem)} /* o ícone em altura fixa por clamp: ele é a assinatura, não um elemento de leitura, e por isso não cresce com a tela. */ .rodape__icone{height:clamp(2.2rem,3.4vw,3rem);width:auto} /* a caixa de pendência do fonte: mora no rodapé porque é ali que o link da política vai morar quando existir. Some inteira no modo apresentação. */ .rodape__pendencia{margin:0 auto;max-width:var(--cont-texto); font-size:var(--txt-xs);line-height:var(--lh-media); color:var(--cor-sobre-foto); background:var(--branco-08); border-left:var(--traco-alt) solid var(--sys-aviso); padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs)} /* ===== estilo/obrigado.css ===== */ /* ============================================================ A PÁGINA DE OBRIGADO Chão branco, a box neon no meio, e nada mais. Ela reusa o .fecho inteiro da página de captura (mesma box, mesmo raio dissolvido, mesma pílula invertida): o que se herda aqui é o objeto, não uma cópia dele. ============================================================ */ .obrigado{display:flex;flex-direction:column; min-height:100svh; background:var(--cor-fundo);color:var(--cor-texto); padding-block:clamp(2.4rem,6vh,4.4rem) 0} /* A MARCA DA OBRIGADO, e o defeito que ela teve por algumas horas em 22/09: esta folha veio do bundle do treinão, onde a altura era governada pelo lockup das duas marcas (`parceria.css`). Aqui não existe lockup nenhum, então a regra de altura tinha sumido e a escrita da BORA subiu em tamanho natural, ocupando a largura inteira da tela. Ele viu e apontou: "a logo da página de obrigado não está configurada". A altura agora é a mesma do topo da página de captação, e a marca centraliza no eixo do resto. */ .obrigado__marca{margin-bottom:clamp(2rem,6vh,3.4rem); display:flex;justify-content:center} .obrigado__marca img{height:clamp(1.35rem,1.9vw,1.9rem);width:auto} .obrigado__topo{display:flex;flex-direction:column;align-items:center; text-align:center;gap:var(--esp-sm)} .obrigado__titulo{font-size:clamp(1.9rem,1.15rem + 2.8vw,3.2rem); margin-block:var(--esp-2xs) 0;max-width:20ch} .obrigado__apoio{margin:0;max-width:46rem;font-size:var(--txt-md); line-height:var(--lh-media);color:var(--cor-texto-sutil);text-wrap:pretty} /* ============ a barra de dois passos ============ Em SJC ela diz 84%, um número que não mede coisa nenhuma. Aqui ela mede o que existe: dois passos, o primeiro feito. O trilho é o cinza do sistema, o cheio é o neon, e a proporção é 1/2 de verdade, escrita no CSS como fração e não como pixel. */ .passos{display:flex;flex-direction:column;align-items:center; gap:var(--esp-3xs);width:min(100%,26rem);margin-top:var(--esp-2xs)} .passos__trilho{display:block;width:100%;height:var(--traco-alt); background:var(--preto-18);border-radius:var(--raio-pill);overflow:hidden} .passos__cheio{display:block;width:50%;height:100%; background:var(--cor-grafico);border-radius:var(--raio-pill)} .passos__conta{font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-texto-sutil)} /* a box neon: a mesma da página de captura, só com o respiro de cima ajustado porque aqui ela não vem depois de uma seção escura. Ela para na calha do palco em vez de sangrar até a borda da tela: medido em 25/08 no 1440, correndo solta ela ficava com 1.376px de largura e o botão sozinho no meio de um campo neon quase vazio. */ .obrigado__fecho{flex:1;display:flex;align-items:center; padding-block:clamp(2.4rem,6vh,3.8rem)} .obrigado__fecho .fecho__painel{width:100%; max-width:var(--cont-padrao);margin-inline:auto} /* o miolo respira menos que na página de captura: lá a box é o fim de uma página inteira e precisa de peso, aqui ela é a página */ .obrigado__fecho .fecho__miolo{min-height:min(34svh,19rem)} /* e a manchete da box desce da régua de fecho (até 4,5rem) para a de seção. Medido no 1440: em 4,5rem o h2 da box saía MAIOR que o h1 da página, que é a hierarquia invertida. */ .obrigado__fecho .fecho__titulo{font-size:clamp(1.7rem,1.05rem + 2.6vw,2.7rem)} /* ============ o botão do grupo ============ Pílula invertida do contrato (campo preto, rótulo neon), a mesma do fecho. O ícone do WhatsApp entra em currentColor e some do leitor de tela: o rótulo já diz o que é. */ .grupo__icone{width:1.15em;height:1.15em;flex:none;margin-right:.5em} /* enquanto o link do grupo não chegou, o botão existe em desenho mas não finge que funciona: ele é