/* ===== 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/parceria.css ===== */ /* ============================================================ O LOCKUP DA PARCERIA · as duas marcas lado a lado Esta é a peça que só existe nesta página, e ela abre a dobra: a primeira coisa que alguém de Brasília precisa entender é que o treino é das duas assessorias. TRÊS REGRAS ENTRAM AQUI: 1. O contrato do logo da BORA continua valendo: ícone OU escrita, nunca os dois. No branco vai a escrita preta, no preto a escrita branca. 2. A MARCA DA TIME É DELES, e não se reescreve: entra o vetor oficial, extraído do PDF de variações que ele mandou em 22/09. No fundo claro, a de preto com o vermelho; no fundo escuro, a branca (a variação que eles próprios desenharam para campo vermelho, sem o retângulo de fundo). 3. NENHUMA DAS DUAS É MAIOR. A BORA é uma escrita horizontal (900x230, proporção 3,9) e a TIME é um bloco quase quadrado com a faixa embaixo (585x314, proporção 1,86). Igualar a ALTURA faria a TIME dominar; igualar a LARGURA faria a BORA dominar. O que se iguala é o PESO ÓPTICO: a escrita da BORA fica um pouco mais alta, e as duas medem quase a mesma área de tinta. As duas alturas abaixo saíram de medir e olhar, não de estimar. O separador é o filete neon da casa, o mesmo gesto do .rotulo (que já usa o traço neon como marcador). Ele é decorativo, nunca carrega informação, e por isso é aria-hidden no fragmento. ============================================================ */ .parceria{display:flex;align-items:center; gap:clamp(.7rem,1.6vw,1.15rem); margin-bottom:clamp(1.1rem,3.2vh,2rem)} /* a escrita da BORA: mesma régua de altura que ela tinha sozinha no hero de Miami (1,35rem a 1,9rem). Ela apresenta, não disputa a dobra com o botão. */ .parceria__bora{height:clamp(1.35rem,1.9vw,1.9rem);width:auto} /* a TIME entra 1,45x a altura da BORA porque a marca dela tem a faixa "ASSESSORIA ESPORTIVA" embaixo, que é metade da altura do arquivo e é letra miúda: na mesma altura da BORA, o nome TIME ficaria visivelmente menor que a palavra BORA ao lado. */ .parceria__time{height:clamp(1.95rem,2.75vw,2.75rem);width:auto} /* o filete: risco vertical neon, da altura do x das duas marcas */ .parceria__filete{flex:none;width:var(--traco-alt); height:clamp(1.5rem,2.1vw,2.1rem); background:var(--cor-grafico);border-radius:var(--raio-xs)} /* no chão preto do rodapé o filete continua neon (é a tinta da marca sobre campo escuro, que é onde o neon do contrato vive), e as marcas trocam de versão no HTML, não aqui. */ .parceria--escuro{margin-bottom:0} /* ===== estilo/s1.css ===== */ /* ============================================================ S1 · HERO (chão branco) ============================================================ */ .hero{background:var(--cor-fundo);color:var(--cor-texto); padding-block:clamp(2.4rem,6vh,4.4rem) clamp(3rem,8vh,5.6rem); overflow:clip} /* duas colunas iguais. MEDIDO em 25/08 (1440x900): a caixa da foto era 1,20 e sobravam 390px de branco parado ao lado do formulário. Tentei dar 1.08fr para a foto e foi PIOR: a coluna de texto caiu para 482px, a manchete quebrou em três linhas e o botão de envio desceu de 855 para 890. O vão se resolve na PROPORÇÃO DA CAIXA (1,05), não em roubar largura da coluna que carrega o formulário. */ .hero__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.4rem);align-items:center; min-height:min(68svh,38rem)} /* a marca no alto da página: escrita preta sobre o branco, no mesmo eixo x da manchete (a calha do palco). Altura pequena, porque ela apresenta e não disputa a dobra com o botão. O respiro embaixo dela encolheu de 3rem para 2rem em 25/08: numa página de captura a coluna carrega o formulário inteiro, e cada pixel gasto aqui em cima empurra o botão de envio para fora da primeira tela (medido: ele estava em y=855 numa dobra de 900). */ .hero__marca{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:flex-start; gap:var(--esp-sm)} /* a manchete não usa o --txt-hero cheio nem o --txt-2xl: aqui ela divide a dobra com a foto. A régua desta página é o teto de 2.9rem, medido para o par fechar em DUAS linhas dentro da coluna de 558px. */ .hero__titulo{font-size:clamp(1.9rem,1.25rem + 2.2vw,2.9rem); margin-block:var(--esp-2xs) 0} .hero__sub{margin:0;max-width:34rem;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 coluna da direita ============ Ela já foi três coisas. Caixa única de foto com grafismo tonal atrás (.hero__foto e .hero__grafismo, até 25/08); esteira de duas colunas passeando (26/08); e agora, a pedido dele, CAIXA ÚNICA DE NOVO, com as mesmas sete fotos se revezando dentro dela. As regras moram em estilo/retrato.css. O grafismo tonal do raio NÃO voltou junto com a caixa, e isso é decisão desta rodada: ele pediu menos, não mais ("aquela forma tá demais"). Devolver a textura atrás da foto no mesmo movimento em que se tira o passeio seria trocar um excesso por outro. O que ficou de herança das três: a coluna continua sendo metade da calha, e continua sendo a coluna de TEXTO que manda na altura da linha. A caixa acompanha por `align-self:stretch`, em vez de impor a própria altura ao hero. */ /* ===== estilo/retrato.css ===== */ /* ============================================================ O RETRATO DO HERO (27/08/2026) · uma foto só, que se reveza Substitui a esteira de 26/08 (duas colunas de fotos passeando em sentidos opostos), a pedido dele depois de ver o link: "só tem que ser uma foto só ali na primeira seção, que vai trocando com o tempo, não daquela forma, aquela forma tá demais". A DIFERENÇA NÃO É DE VELOCIDADE, É DE NATUREZA. A esteira nunca parava: em qualquer instante havia pixel andando na dobra, ao lado de um formulário que pede atenção parada. Aqui a caixa fica QUIETA entre uma troca e outra, e a troca é uma dissolvência que começa e termina. Medido nesta rodada: a dobra passou de movimento contínuo para 1,1s de transição a cada 5s, ou seja 82% do tempo parada. O MOVIMENTO É DE COMPOSITOR e só, igual à esteira era: `opacity` numa foto absoluta, nada de `top`, `margin` ou `background-position`. Nenhum quadro força layout. ============================================================ */ /* A ALTURA VEM DA COLUNA DE TEXTO, e essa mecânica é herança da esteira porque o defeito que ela consertava não mudou: quem carrega o formulário é a coluna de texto, então é ela que define a altura da linha. Com altura fixa (a caixa 1,05 de 25/08) sobravam 156px de branco parado ao lado do formulário; com `height:100%` num item de grid com `align-items:center` o valor resolve para `auto` e a página estica. O que vale: `align-self:stretch` (a altura vem da LINHA) mais as fotos em `position:absolute` (fora do fluxo, não medem nada, então quem manda na altura continua sendo o texto) e `overflow:hidden`. */ .retrato{position:relative;align-self:stretch; min-height:clamp(26rem,58svh,34rem); border-radius:var(--raio-lg); overflow:hidden; background:var(--cor-superficie-alt)} /* `object-position` em 38% e não no centro: as sete são fotos de prova, gravadas em pé e enquadradas no corpo inteiro, então o assunto (rosto e peito) mora no terço de cima. No 1440 a caixa é retrato e cabe quase tudo; no tablet e no celular ela é mais larga que alta e o `cover` corta pelo alto e por baixo, e é ali que centralizar decepava cabeça. */ .retrato__foto{position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:50% 38%; opacity:0;z-index:1; transition:opacity 1.1s ease-in-out} /* A DISSOLVÊNCIA, e o porquê de serem DUAS classes e não uma. Com uma só, as duas fotos passariam pelo meio da transição em opacidade parcial ao mesmo tempo, e por um instante o fundo da caixa apareceria através das duas. Então a que SAI não desbota: ela continua opaca, só desce de camada, e espera coberta. Quem se move é apenas a que ENTRA, por cima. Quando ela chega em 1, a de baixo é apagada sem ninguém ver. `--is-saindo` precisa vir DEPOIS de `--is-visivel` na folha: as duas têm a mesma especificidade, e é a ordem que decide que a foto que acabou de perder a visibilidade siga opaca durante a troca. */ .retrato__foto.is-visivel{opacity:1;z-index:2} .retrato__foto.is-saindo{opacity:1;z-index:1} /* Estado degradado, e aqui ele é o mesmo em três situações diferentes: sem javascript, com `prefers-reduced-motion`, ou com a segunda foto ainda no ar. Nos três a caixa mostra a primeira foto inteira e parada. Quem pediu menos movimento recebe um retrato, não um vazio, e ninguém vê caixa cinza. */ @media (prefers-reduced-motion:reduce){ .retrato__foto{transition:none} } /* a caixa de pendência é item do grid do hero: sem isto ela viraria uma terceira coluna espremida ao lado do retrato. Ela só existe no fonte; no modo apresentação a linha inteira sai. */ .retrato__pendencia{margin:var(--esp-sm) auto 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)} /* ===== 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:start; gap:var(--esp-sm) clamp(1.1rem,2.4vw,2rem)} .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 ============ */ .captura{margin:var(--esp-sm) 0 0;width:100%;max-width:30rem} .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/s2.css ===== */ /* ============================================================ S2 · PRA QUEM É (chão FOTO, com véu escuro) Rev. 19/08, pedido dele olhando o link: "coloca essa foto de fundo, deixa o título e o subtítulo centralizado, e as box você pode colocar como se fosse vidro. E essa foto de fundo deixa ela com um overlay um pouco escuro." O contexto muda de .contexto-preto para .contexto-foto, que é o do contrato para texto sobre imagem. Ele exige scrim tokenizado, e o véu chapado entra POR CIMA da foto e POR BAIXO do scrim. ============================================================ */ .quem{position:relative;overflow:clip;isolation:isolate; color:var(--cor-sobre-foto); padding-block:var(--esp-secao)} /* a cena: a foto cobre a seção inteira, borda a borda */ .quem__cena{position:absolute;inset:0;z-index:0} .quem__cena img{width:100%;height:100%;object-fit:cover;object-position:50% 46%} /* o véu escuro chapado (o "overlay um pouco escuro" que ele pediu) e, por cima dele, o scrim tokenizado da casa. Duas camadas com funções diferentes: o véu baixa a cena inteira, o scrim garante a base do texto sem apagar o céu. */ .quem::before{content:"";position:absolute;inset:0;z-index:1; background:var(--bora-preto);opacity:.62;pointer-events:none} .quem::after{content:"";position:absolute;inset:0;z-index:2; background:var(--scrim-forte);pointer-events:none} .quem__conteudo{position:relative;z-index:3; display:flex;flex-direction:column;align-items:center;text-align:center} /* título e subtítulo centralizados */ .quem__titulo{margin:0;max-width:22ch; font-size:var(--txt-2xl);line-height:var(--display-lh); letter-spacing:var(--display-ls);font-weight:var(--peso-bold); color:var(--cor-sobre-foto);text-wrap:balance} /* neon como texto só existe sobre campo escuro; aqui ele vive sobre a foto já rebaixada pelo véu, que é a mesma condição do preto */ .quem__acende{color:var(--cor-destaque)} .quem__sub{margin:var(--esp-sm) 0 0;max-width:56ch; font-size:var(--txt-md);line-height:var(--lh-media); color:var(--cor-sobre-foto-sutil);text-wrap:pretty} /* ============ as quatro caixas, em vidro ============ vidro fosco é o tratamento sancionado para UI pequena sobre foto: desfoque no fundo mais um véu escuro por baixo do texto. O desfoque sozinho não garante contraste (a foto tem céu claro no topo), então o véu é obrigatório e o vidro é o acabamento. */ .quem__caixas{list-style:none;margin:clamp(1.8rem,4.5vh,2.8rem) 0 0;padding:0;width:100%; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.4vw,1.1rem);text-align:left} .caixa{display:flex;flex-direction:column;gap:var(--esp-2xs); background:var(--cor-superficie-sutil); border:1px solid var(--cor-borda); border-radius:var(--card-raio); padding:clamp(1.1rem,2.2vw,1.6rem); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)} .caixa__eco{font-size:var(--txt-xs);font-weight:var(--peso-bold); letter-spacing:var(--ls-kicker);text-transform:uppercase; color:var(--cor-destaque)} .caixa__texto{font-size:var(--txt-md);line-height:1.24; letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold); color:var(--cor-sobre-foto);text-wrap:pretty} .quem__virada{margin:clamp(1.8rem,4.5vh,2.8rem) 0 0;max-width:34rem; font-size:var(--txt-xl);line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold); color:var(--cor-sobre-foto);text-wrap:balance} .quem__acao{margin:var(--esp-md) 0 0} /* ===== estilo/s3.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É (chão preto, borda a borda, raio 0) ============================================================ */ .rodape{position:relative;overflow:clip; background:var(--bora-preto);color:var(--branco-72); padding-block:clamp(2.8rem,7vh,4.6rem) 0} .rodape__grade{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(1.8rem,4vw,3.6rem);align-items:start} .rodape__marca{display:flex;flex-direction:column;align-items:flex-start; gap:var(--esp-2xs)} .rodape__logo{margin:0;line-height:0} /* contrato do logo: no rodapé vai a ESCRITA, e ela faz a vez do nome. O ícone não aparece em lugar nenhum desta seção. */ .rodape__logo img{height:clamp(1.25rem,1.7vw,1.7rem);width:auto} .rodape__assinatura{margin:var(--esp-2xs) 0 0;font-size:var(--txt-base); line-height:var(--lh-media);color:var(--bora-branco)} .rodape__dados{margin:clamp(1.2rem,3vh,2rem) 0 0;font-size:var(--txt-xs); color:var(--branco-72)} .rodape__titulo{margin:0 0 var(--esp-2xs);font-size:var(--txt-xs); font-weight:var(--peso-bold);letter-spacing:var(--ls-kicker); text-transform:uppercase;color:var(--bora-branco)} .rodape__lista{font-style:normal;display:flex;flex-direction:column; gap:var(--esp-3xs);font-size:var(--txt-sm)} /* links: o sublinhado é o decorativo que acende em neon; a informação continua branca (neon nunca vira texto no escuro de leitura corrida) */ /* alvo de toque: MEDIDO em 19/08 no 390 e no 360, estes dois links tinham 21px de altura, menos da metade do mínimo de 44px. Eles eram a única coisa da página fora da régua de toque. O alvo cresce sem mexer no espaçamento visual, porque o texto continua no mesmo lugar dentro da caixa maior. */ .rodape a{display:inline-flex;align-items:center;min-height:var(--botao-alt-min); color:var(--bora-branco);text-decoration:underline; text-underline-offset:.24em;text-decoration-thickness:1px; text-decoration-color:var(--branco-16); transition:text-decoration-color var(--dur-padrao) var(--ease-enfase)} .rodape a:hover{text-decoration-color:var(--bora-verde)} .rodape a:focus-visible{outline:var(--foco-anel) solid var(--bora-verde); outline-offset:var(--foco-offset);border-radius:var(--raio-xs)} .rodape__pendencia{margin:var(--esp-sm) 0 0;font-size:var(--txt-xs); line-height:var(--lh-media);color:var(--bora-preto); 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);max-width:24rem} /* A PALAVRA GIGANTE: textura, não informação. Aqui ela entra CHAPADA na alfa tokenizada --branco-08 (1,16:1 medido sobre o preto), e não com o degradê cromático do rodapé da página de vendas. Lá o degradê existia para igualar o tratamento ao eco gigante da S8; esta página não tem esse eco, então uma solução só basta e ela é a mais simples. */ .rodape__gigante{ position:relative;overflow:clip;height:clamp(4.3rem,15.5vw,16.7rem); max-width:var(--cont-padrao); margin:clamp(2.4rem,7vw,6rem) auto 0; padding-inline:var(--margem-palco); pointer-events:none;user-select:none;-webkit-user-select:none} .rodape__gigante span{position:absolute;left:var(--margem-palco);top:0;display:block; font-size:clamp(7rem,25vw,27rem);line-height:.8;font-weight:var(--peso-extrabold); letter-spacing:var(--display-ls);color:var(--branco-08);white-space:nowrap} /* ===== 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} .obrigado__marca{margin-bottom:clamp(2rem,6vh,3.4rem)} /* a altura das duas marcas é do lockup (parceria.css), e não daqui: esta folha entra DEPOIS dele, e uma regra genérica em `img` tem especificidade maior que `.parceria__time`. Medido em 22/09: com ela, a marca da TIME caía de 40px para 27px só nesta página, e o lockup perdia o equilíbrio de peso que o hero tem. */ .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 é