. No Hello Elementor sao estas as classes. Se o tema for outro e ainda sobrar uma faixa, e aqui que se acrescenta o nome dele. */ body .site-main, body .page-content, body #content { padding: 0 !important; margin: 0 !important; } /* O wrapper tambem estica. Ele nao tem padding proprio, mas se algum ancestral limitar a altura, e daqui que o bloco de dentro tira a dele. */ #rn-site-wrapper { min-height: 100svh; } #rn-site-wrapper .rn-obrigado { position: relative; display: flex; align-items: center; justify-content: center; /* A TELA TODA, e nao mais `calc(100vh - header)`: sem header nao ha o que descontar. O clamp com teto de 820px tambem saiu — ele existia para o bloco nao esticar demais num monitor alto, mas aqui esticar e o ponto: a pagina e uma tela so, com o conteudo no meio dela. >>> AS DUAS LINHAS, NESTA ORDEM, SAO DE PROPOSITO. <<< No celular o `100vh` conta a tela COM a barra do navegador recolhida — ou seja, ele mede mais do que se ve, e o conteudo centralizado nasce empurrado para baixo do corte. O `100svh` (small viewport height) mede a tela com a barra aberta, que e o que a pessoa realmente ve ao abrir. A primeira linha fica como reserva para navegador que nao conhece svh: ele ignora a segunda e usa a primeira. */ min-height: 100vh; min-height: 100svh; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; isolation: isolate; text-align: center; } /* O HALO AZUL, subindo do pe. Sem ele esta pagina e um retangulo preto vazio — nao ha foto, nao ha faixa alternada, nao ha card. O halo e o unico elemento que diz que aqui ainda e o mesmo site. E o MESMO desenho do rodape (#rn-footer::before, no BLOCO 1), e nao uma invencao desta pagina: mesma origem (50% 100%), mesma cor, mesma dissolucao aos 58%. So a intensidade cai — .20 la, .14 aqui — porque no rodape ele divide espaco com quatro colunas de conteudo e aqui fica sozinho, onde o mesmo valor pesaria demais. >>> ESTE AZUL NAO E VEU. <<< Os veus azuis do site sairam todos, porque caiam sobre FOTO e tingiam o assunto. Aqui nao ha foto: ele e luz de fundo, como no rodape. */ #rn-site-wrapper .rn-obrigado::before { content: ''; position: absolute; z-index: -1; bottom: -55%; left: 50%; transform: translateX(-50%); width: 120vw; height: 100vh; pointer-events: none; background: radial-gradient(circle at 50% 100%, rgba(47, 111, 178, .14), transparent 58%); } /* A coluna de leitura. 40rem e mais estreito que os 46rem do hero das paginas internas de proposito: la o texto e um paragrafo de apresentacao, aqui sao tres frases curtas, e uma linha longa demais faz o olho procurar o comeco da seguinte — num texto centralizado isso e pior ainda, porque nem a margem esquerda serve de guia. */ #rn-site-wrapper .rn-obrigado__body { max-width: 40rem; margin-inline: auto; } /* --- O SELO --------------------------------------------------------------- Circulo vazado com o "certo" dentro. A borda usa o --rn-accent-line e o simbolo o --rn-accent: e o azul de TEXTO nos dois casos, nunca o da logo. Um traco de 2px e um aro de 1px sobre preto sao exatamente o caso em que o azul escuro desaparece — a regra que vale no site inteiro. O `flex` centra o SVG no circulo sem depender de line-height, que num simbolo sem linha de base seria chute. ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-obrigado__selo { display: inline-flex; align-items: center; justify-content: center; width: clamp(3.4rem, 8vw, 4.4rem); height: clamp(3.4rem, 8vw, 4.4rem); margin-bottom: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--rn-accent-line); border-radius: 50%; background: var(--rn-accent-dim); color: var(--rn-accent); } /* O SVG herda a cor pelo `currentColor` la no HTML. A largura em % do circulo mantem a proporcao do simbolo quando o clamp acima muda de tamanho — em px, o "certo" ficaria gordo no celular e magro no desktop. */ #rn-site-wrapper .rn-obrigado__selo svg { width: 48%; height: 48%; } /* --- TEXTO --------------------------------------------------------------- A .rn-eyebrow do global e `inline-flex` com um traco no ::before, e por padrao ela alinha a esquerda. Centralizada, o traco e o texto precisam do justify-content — e o mesmo ajuste que o rodape faz na etiqueta do CTA. ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-obrigado .rn-eyebrow { justify-content: center; } /* O .rn-lead do global alinha a esquerda e tem max-width proprio. Aqui ele precisa centralizar, e o `margin-inline: auto` so surte efeito porque a largura maxima continua valendo — sem ela o paragrafo ocuparia o bloco inteiro e "centralizar" nao mudaria nada. Mesmo caso da abertura e do fecho da pagina de Solucoes. */ #rn-site-wrapper .rn-obrigado__txt { margin-top: 1.4rem; margin-inline: auto; max-width: 34ch; font-size: clamp(1rem, 1.35vw, 1.12rem); color: #C3C9D1; /* mais claro que o --rn-muted: esta e a frase principal da pagina */ } /* --- A TRAVA DO `hidden` -------------------------------------------------- O `hidden` do HTML vale como um `display: none` vindo do navegador, e a folha do navegador perde para QUALQUER regra de autor que declare `display`. Uma linha inocente como `.minha-classe { display: block }` basta para um elemento escondido reaparecer. >>> ESTA PAGINA JA FOI MORDIDA POR ISSO. <<< Havia aqui um botao "Cancelar o redirecionamento" que nascia com `hidden` e levava a classe .rn-btn — e a .rn-btn e `display: inline-flex` com especificidade de ID, no BLOCO 1. Resultado: quem estivesse sem JS via um botao para cancelar um relogio que nunca tinha comecado. O botao acabou saindo por outro motivo (era ruido numa tela que precisa ser simples), mas a armadilha continua valendo para o proximo elemento que alguem esconder aqui. Hoje o unico `hidden` da pagina e o paragrafo do aviso, que sozinho nao precisaria desta regra — nenhuma regra da ao

um display proprio. Ela fica porque custa uma linha, e porque e o que toda folha de reset moderna faz com [hidden], exatamente pelo mesmo motivo. ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-obrigado [hidden] { display: none !important; } /* --- O AVISO DA CONTAGEM -------------------------------------------------- Menor e mais apagado que o texto acima, e de proposito: ele e um aviso de sistema, nao conteudo. Quem chegou aqui veio ler o agradecimento. ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-obrigado__aviso { margin-top: clamp(1.8rem, 3.5vw, 2.4rem); font-size: .85rem; line-height: 1.6; color: var(--rn-muted); } /* O numero da contagem. Ele muda a cada segundo, e por isso ganha peso e a cor de destaque: assim o olho volta nele sem precisar reler a frase. >>> O `font-variant-numeric: tabular-nums` NAO E CAPRICHO. <<< Sem ele, os digitos tem larguras diferentes e a frase inteira DANCA a cada segundo, empurrando a palavra "segundos" para os lados. Com ele, todo digito ocupa a mesma caixa e so o numero muda. */ #rn-site-wrapper .rn-obrigado__contagem { font-weight: 700; color: var(--rn-accent); font-variant-numeric: tabular-nums; } /* O botao, centrado. O .rn-btn-row do global e um flex alinhado a esquerda com margin-top de 2.4rem — aqui ele centraliza e ganha um pouco menos de respiro, porque acima dele fica o aviso e nao um paragrafo. A classe continua no plural (__acoes) de proposito: se um dia entrar um segundo destino — "ver as soluções", "falar no WhatsApp" —, ele cabe aqui sem renomear nada. */ #rn-site-wrapper .rn-obrigado__acoes { justify-content: center; margin-top: clamp(1.6rem, 3vw, 2rem); } /* No celular o botao ocupa a largura toda. Um botao centralizado e estreito no meio de uma tela vazia parece perdido; ocupando a linha, ele vira o fim natural da leitura. O `flex-direction: column` esta aqui para o dia em que houver um segundo botao: sem ele, dois botoes de largura total lado a lado nao caberiam. */ @media (max-width: 479px) { #rn-site-wrapper .rn-obrigado__acoes { flex-direction: column; } #rn-site-wrapper .rn-obrigado__acoes .rn-btn { width: 100%; } }/* End custom CSS */