/* ===== 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/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 box da foto ============ raio grande (--raio-xl), sem sombra: o objeto se separa do branco pelo próprio recorte e pelo grafismo atrás, não por elevação genérica. A proporção 1.2 veio do corte do tratamento. */ .hero__foto{position:relative;margin:0;isolation:isolate} .hero__foto img{position:relative;z-index:1;width:100%;height:auto; aspect-ratio:1.05;object-fit:cover; border-radius:var(--raio-xl)} /* o grafismo: o raio da marca em tonal, sangrando pela direita por trás da box. Ele nunca passa por baixo de texto de leitura (CONTRATO) porque aqui não há texto do lado direito. TINTA: entra na alfa TONAL (0.12), não na lateral (0.50). A 0.50 ele virava um anel aceso em volta da foto e roubava a dobra, que é o oposto do "algo bem sutil" que ele pediu em 19/08. A 0.12 ele é textura: dá lugar à foto e mantém a assinatura da marca no branco. TAMANHO: menor que na aula experimental, e afundado mais para fora. Lá a foto era o único objeto da coluna e cobria o miolo do raio. Aqui a coluna direita é mais curta que a esquerda, então o raio sobrava por cima e por baixo da foto e virava um halo pálido ocupando o canto inteiro. */ .hero__grafismo{position:absolute;z-index:0;pointer-events:none; width:clamp(22rem,32vw,34rem);aspect-ratio:750/840; right:clamp(-22rem,-19vw,-11rem);top:50%;transform:translateY(-50%); background:var(--cor-grafico);opacity:var(--pattern-op-tonal); -webkit-mask:url("marca/bora-pattern.svg") center/contain no-repeat; mask:url("marca/bora-pattern.svg") center/contain no-repeat} /* sem variável local para a arte: o auditor de fidelidade trata toda variável fora do tokens.css como token fabricado, e a regra é boa demais para ser contornada por conveniência. */ /* ===== 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)} /* ===== 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)} .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 é