/* ==========================================================================
ADEQUAÇÃO AO LAYOUT DE REFERÊNCIA (kenlo.com.br)
O que foi medido no site de referência, e não descrito de memória:
| traço | kenlo | Weny antes |
|----------------------|------------------------------------|-----------------------|
| H1 | 86px / lh 0.88 / ls -0.045em | 56px / lh 1.1 / -0.02 |
| H2 | 63px / lh 0.95 / ls -0.035em | 40px / lh 1.15/ -0.02 |
| olho de seção | `——— ● RÓTULO` monoespaçado | pílula com borda |
| alinhamento | à ESQUERDA | centralizado |
| corpo do cabeçalho | duas colunas | 600px centralizado |
| botão | raio 999px (pílula) | raio 12px |
| anotação técnica | JetBrains Mono, maiúscula, tracking| não existia |
A assinatura do layout é a tipografia display: corpo enorme, entrelinha
MENOR que 1 e tracking negativo forte. É isso que faz o título "colar" e
virar bloco gráfico em vez de parágrafo grande.
O tipo de letra do corpo continua Inter (identidade da Weny). A referência
usa Plus Jakarta Sans; trocar a fonte da marca é decisão de marca, não de
layout — as MÉTRICAS dela é que foram adotadas aqui.
========================================================================== */
/* --------------------------------------------------------------------------
1. Tipografia display
-------------------------------------------------------------------------- */
.hero h1 {
font-size: clamp(2.6rem, 6.2vw, 5.25rem);
font-weight: 700;
line-height: 0.93;
letter-spacing: -0.042em;
/* 16ch usava só 57% da medida útil e espremia a chamada em três linhas num
container de 1296px. */
max-width: 21ch;
margin-left: 0;
margin-right: 0;
margin-bottom: 24px;
}
/* --------------------------------------------------------------------------
2. Cabeçalho de seção — o padrão de fato da referência
Medido no site, não descrito de memória:
[03] MAIS INTELIGÊNCIA, RECEITA E AUTOMAÇÃO ————————————————————
Como uma A LYA entra onde existe repetição,
imobiliária Kenlo demora e perda de contexto. O
usa a LYA. corretor ganha tempo…
Três coisas ao mesmo tempo, e é a combinação que dá o desenho:
1. índice `[NN]` monoespaçado + rótulo em maiúscula + RÉGUA até a borda;
2. título display à ESQUERDA, corpo à DIREITA — duas colunas de papéis
diferentes, não um parágrafo picado em duas colunas;
3. o título ocupa poucas palavras por linha (medida curta), o que é o
que faz o bloco parecer um cartaz.
O `[NN]` sai de um contador CSS: numerar doze seções à mão quebraria na
primeira seção inserida no meio.
-------------------------------------------------------------------------- */
body { counter-reset: secao; }
.section { counter-increment: secao; }
.section-header {
display: grid;
/* `auto-fit` em vez de duas colunas fixas: nas páginas secundárias o
cabeçalho vive num container de ~776px, e ali duas colunas espremem o
título display. O mínimo de 460px faz a grade cair sozinha para uma
coluna onde as duas não cabem com folga — decisão pelo CONTAINER, não
pela viewport, que é o que a media query não enxerga. */
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
column-gap: 64px;
row-gap: 20px;
align-items: start;
text-align: left;
margin-bottom: 56px;
}
/* Duas colunas IGUAIS deixavam o título com 540px, e chamadas como "Do modelo
ao disparo, com o resultado chegando em tempo real." quebravam em cinco
linhas. O título é a peça que precisa de largura; o corpo é apoio.
A proporção assimétrica entra por CONTAINER QUERY, não por media query: nas
páginas secundárias o cabeçalho vive num bloco de 640px enquanto a janela
continua larga, e uma media query espremeria as duas colunas lá. O
`:has(> .section-header)` limita a criação do contexto de contenção aos
containers que de fato têm cabeçalho.
O `auto-fit` acima permanece como base: navegador sem suporte a container
query fica com as duas colunas iguais, que é o comportamento anterior. */
.container:has(> .section-header) {
container-type: inline-size;
}
@container (min-width: 900px) {
.section-header {
grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
}
}
.section-label {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--neutral-200);
margin: 0 0 26px;
}
.section-label::before {
content: '[' counter(secao, decimal-leading-zero) ']';
color: var(--neutral-100);
letter-spacing: 0.08em;
flex-shrink: 0;
}
/* A régua ocupa o que sobra e vai até a borda do container. */
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--neutral-30);
}
.section-header h2 {
grid-column: 1;
/* 3,5rem (56px) numa coluna de 540px picava as chamadas da Weny em CINCO
linhas — e a referência trabalha entre duas e quatro. As frases daqui são
mais longas que as dela ("A conversa vira oportunidade e anda sozinha no
funil." tem 53 caracteres contra 37), então o corpo do tipo cede um pouco
para preservar o RITMO, que é o que se lê como o layout da referência. */
font-size: clamp(1.75rem, 3.5vw, 2.95rem) !important;
font-weight: 700;
line-height: 0.99;
letter-spacing: -0.035em;
/* Solto: quem limita a medida agora é a COLUNA da grade, não este teto. Com
17ch ele passava a ser o gargalo e cortava o título antes da coluna. */
max-width: none;
/* Distribui as palavras entre as linhas em vez de encher cada uma até
estourar — evita a última linha com uma palavra só ("com", "e"), que é o
que fazia a chamada longa parecer picada. */
text-wrap: balance;
margin: 0 !important;
color: var(--neutral-900);
}
.section-header p {
grid-column: -2;
margin: 0;
max-width: 46ch;
text-align: left;
font-size: 1.06rem;
line-height: 1.6;
/* Alinha a primeira linha do corpo com a primeira linha do título. */
padding-top: 6px;
}
/* Cabeçalho sem título (só rótulo + texto): o corpo ocupa as duas colunas. */
.section-header:not(:has(h2)) p {
grid-column: 1 / -1;
max-width: 62ch;
}
@media (max-width: 900px) {
.section-header {
grid-template-columns: 1fr;
row-gap: 18px;
}
.section-header h2 { max-width: none; }
.section-header p { grid-column: 1; padding-top: 0; }
}
/* --------------------------------------------------------------------------
3. Hero alinhado à esquerda
A referência abre com o bloco de texto à esquerda e a arte ocupando o
restante. O quadro do produto (`.hero-images`) continua ocupando a largura
inteira — só o texto muda de eixo.
-------------------------------------------------------------------------- */
.hero > .container {
text-align: left;
}
.hero p {
margin-left: 0;
margin-right: 0;
max-width: 68ch;
font-size: 1.02rem;
}
.hero-buttons,
.hero-integrations {
justify-content: flex-start;
}
.hero-images {
text-align: left;
}
/* --------------------------------------------------------------------------
4. Botões em pílula
-------------------------------------------------------------------------- */
.btn,
.btn-sm {
border-radius: 999px;
}
/* --------------------------------------------------------------------------
5. Margem direita do hero
Ficou vazia de propósito. Duas tentativas de ocupá-la — a nota monoespaçada
de status e o índice de produtos — foram rejeitadas na revisão, e a leitura
é que o problema é o LUGAR: uma coluna de texto solta ao lado da chamada
compete com ela em vez de apoiá-la. Na referência esse espaço é ocupado por
arte (as bolhas), não por texto — que é o que os orbes fazem aqui.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.section-header::after { margin-top: 26px; }
.hero h1 { max-width: none; }
}
/* --------------------------------------------------------------------------
6. Grade de produtos em treliça, com índice monoespaçado
Na referência os cards não flutuam separados por espaço: eles dividem uma
MOLDURA única, separados por filetes de 1px, e cada um traz `[01]`, `[02]`…
monoespaçado no topo. É o mesmo vocabulário do `[NN]` do cabeçalho — o que
dá unidade à página.
O filete sai de `inset box-shadow` (direita + baixo) em vez de `border`:
com border, célula vizinha soma 2px e a linha fica grossa; e a moldura com
`overflow: hidden` apara os filetes que sobram na borda externa, sem
precisar de regra `:nth-child` por número de colunas.
-------------------------------------------------------------------------- */
.addons-grid {
gap: 0 !important;
border: 1px solid var(--neutral-30);
border-radius: 18px;
overflow: hidden;
counter-reset: addon;
background: var(--neutral-0);
}
.addon-card {
border: 0 !important;
border-radius: 0 !important;
box-shadow: inset -1px -1px 0 var(--neutral-30) !important;
counter-increment: addon;
position: relative;
padding: 26px 24px 24px !important;
transition: background 0.2s !important;
}
.addon-card:hover {
transform: none !important;
background: color-mix(in srgb, var(--neutral-900) 3%, transparent);
}
.addon-card::before {
content: '[' counter(addon, decimal-leading-zero) ']';
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--neutral-100);
display: block;
margin-bottom: 14px;
}
/* --------------------------------------------------------------------------
7. Seta nos botões
Todo botão da referência termina em `→`. Só entra em quem NÃO é o CTA
principal com fundo cheio — lá a seta competia com o próprio rótulo.
-------------------------------------------------------------------------- */
.btn-outline::after,
.btn-dark::after {
content: '→';
font-size: 1.05em;
line-height: 1;
transition: transform 0.2s;
}
.btn-outline:hover::after,
.btn-dark:hover::after {
transform: translateX(3px);
}
/* --------------------------------------------------------------------------
8. Header e container no padrão da referência
Medido no kenlo.com.br:
header → fixed, 72px, z-index 100, TRANSPARENTE no topo da página;
ao rolar ganha `rgba(255,255,255,.96)`, `blur(16px)` e um
filete de 1px embaixo. Continua barra de LARGURA INTEIRA.
inner → max-width 1360px, padding 0 32px
nav → 14px/500, cinza médio, cada item numa pílula de 999px (8px 16px)
CTA → pílula escura #1a1a1a, texto branco, 14px/600, com "→"
conteúdo→ começa em x=72 numa viewport de 1440 (22 elementos concordam),
ou seja 1296px de medida útil — contra 1152px daqui.
O header daqui virava uma ILHA flutuante ao rolar (720px, raio 100px,
centralizada). É justamente o oposto da referência, então `header.scrolled`
é desfeito item a item — não basta redefinir o fundo.
-------------------------------------------------------------------------- */
.container {
max-width: 1360px;
padding: 0 32px;
}
/* Escala de empilhamento do topo da página, em uma tabela só — foi a falta
dela que fez o quadro do produto passar por cima do header:
202 quadros do produto (`.hero-images`, `.flow-images`, já existiam)
203 header no topo — acima do conteúdo…
204 réguas verticais — …e ABAIXO das réguas, que devem cruzar a
barra transparente
300 header ao rolar — acima de tudo, virando superfície
Eu tinha posto o header em 100/200, os dois abaixo dos 202 dos quadros. O
valor original do arquivo (`header.scrolled { z-index: 300 }`) já estava
certo e foi justamente o que meu ajuste rebaixou. */
header {
z-index: 203;
transition: background 0.3s ease, border-color 0.3s ease,
backdrop-filter 0.3s ease;
}
/* Transparente ENQUANTO está no topo, nos dois temas.
`header:not(.scrolled)` e não `header`: o `theme.css` pinta o header de
`rgba(10,10,10,.85)` por `:root[data-theme='dark'] header` — especificidade
(0,2,1), que ganha de um `header` solto. Daí o fundo preto no topo mesmo
com a regra transparente escrita aqui. */
header:not(.scrolled),
:root[data-theme='dark'] header:not(.scrolled),
:root[data-theme='light'] header:not(.scrolled),
:root:not([data-theme='light']) header:not(.scrolled),
:root:not([data-theme='dark']) header:not(.scrolled) {
background: transparent;
backdrop-filter: none;
/* Fundo transparente, mas o filete de baixo FICA: é ele que marca a altura
da barra enquanto ela não tem superfície própria — e fecha a moldura com
as réguas verticais, que aqui passam por cima do header. Mesma cor delas
(ver `--regua`): filete e régua se encontram no canto, e com tons
diferentes a emenda aparecia. */
border-bottom-color: var(--regua);
box-shadow: none;
}
header.scrolled {
/* Desfaz a ilha: posição, largura, centralização e raio. */
top: 0;
left: 0;
right: 0;
transform: none;
width: auto;
max-width: none;
border-radius: 0;
border: 0;
border-bottom: 1px solid var(--regua);
/* Quase tudo é BLUR, pouca tinta: o fundo a 96% virava uma barra chapada
sobre a página. Aqui o conteúdo continua aparecendo por trás, desfocado,
que é o efeito de vidro da referência. */
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(18px);
box-shadow: none;
}
:root[data-theme='dark'] header.scrolled,
:root:not([data-theme='light']) header.scrolled {
background: rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme='dark']) header.scrolled {
background: rgba(255, 255, 255, 0.7);
}
}
.header-inner,
header.scrolled .header-inner {
height: 72px;
}
/* A logo encolhia junto com a ilha; na referência a barra tem altura fixa. */
header.scrolled .logo img {
height: 32px;
}
/* O menu ia para o CENTRO ao rolar. A causa: `header .header-inner > nav`
tem `margin-left: auto` (é o que o empurra para a direita), e a regra que
eu havia escrito aqui zerava essa margem quando `.scrolled` entrava — sem
ela o `space-between` do `.header-inner` redistribuía os itens e o menu
caía para o meio. Medido: margem de 744px no topo, 0 ao rolar, menu saindo
de x=958 para x=586. A margem automática precisa sobreviver ao scroll; o
que a regra tinha de desfazer era só o afastamento de 24px da ilha. */
header.scrolled nav {
margin-left: auto;
}
@media (min-width: 901px) {
nav ul {
gap: 2px;
}
nav a {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
color: var(--neutral-200);
transition: background 0.2s, color 0.2s;
}
nav a:hover {
background: color-mix(in srgb, var(--neutral-900) 6%, transparent);
color: var(--neutral-900);
}
}
/* CTA do header: pílula escura com seta, como na referência. O verde da
marca segue no CTA do hero e nos pontos de status — aqui ele competia com
a própria barra. */
.nav-cta,
nav a.nav-cta {
background: var(--neutral-900) !important;
color: var(--neutral-0) !important;
border-radius: 999px;
padding: 9px 18px;
font-size: 14px;
font-weight: 600;
gap: 6px;
}
.nav-cta:hover,
nav a.nav-cta:hover {
background: var(--neutral-700) !important;
}
.nav-cta::after {
content: '→';
font-size: 1.05em;
line-height: 1;
transition: transform 0.2s;
}
.nav-cta:hover::after {
transform: translateX(3px);
}
.theme-toggle {
border-radius: 999px !important;
}
/* --------------------------------------------------------------------------
9. Faixas de fundo e pontos acompanhando o container novo
Tudo aqui era calculado sobre 1200px. Com o container em 1360px, cada faixa
ficou 80px larga demais e passou a correr POR BAIXO do conteúdo — é o
"fundo estranho" que aparecia em Insights e nas outras seções hachuradas.
Vale para as verticais fixas, para a faixa hachurada das margens e para os
pontos de interseção das réguas horizontais — todos precisam cair na MESMA
borda do container, senão um marca 1200 e o outro 1360.
-------------------------------------------------------------------------- */
/* Faixa hachurada nas margens da seção: mesma medida do container. */
.section-pattern::before,
.section-pattern::after {
width: calc((100vw - 1360px) / 2);
}
/* Verticais que atravessam a página, na borda do container.
Elas correm de y=0 e a ordem com o header MUDA conforme o scroll:
- no topo, o header é transparente e as réguas passam POR CIMA dele
(z 204 contra 203), de modo que a linha atravessa a barra sem
interrupção;
- ao rolar, o header vira vidro e sobe para z 300, cobrindo as réguas —
que é o que faz a barra parecer uma superfície e não um recorte.
As réguas têm `pointer-events: none`, então estar acima do header não
atrapalha clique nenhum na logo ou no menu. E, na horizontal, elas caem em
40px e 1400px, fora da logo (72..201), do menu (958..1318) e do botão de
tema (1330..1368) — não cruzam conteúdo do header em nenhum dos estados. */
.page-lines {
top: 0;
z-index: 204;
}
header.scrolled {
z-index: 300;
}
.page-lines::before {
left: calc((100vw - 1360px) / 2);
}
.page-lines::after {
right: calc((100vw - 1360px) / 2);
}
.section-line::before,
.section-line-bottom::before {
left: calc((100vw - 1360px) / 2 - 5px);
}
.section-line::after,
.section-line-bottom::after {
right: calc((100vw - 1360px) / 2 - 5px);
}
/* Os quadros dos produtos foram dimensionados contra os 1152px de conteúdo
antigos (93,75% dele). Mantida a MESMA proporção sobre os 1296px novos,
para não ficarem estreitos no meio de uma página mais larga — e para o
olho de seção continuar rente à borda do quadro. */
/* O quadro NÃO deve encostar nas bordas da página: são os ~110px de margem
de cada lado que dão lugar aos painéis flutuantes. Com o quadro em 1288px
(quase os 1440 da tela) os painéis não tinham para onde ir e acabavam
grudados na borda, parecendo adesivos soltos em vez de chamadas presas à
tela do produto. */
.hero-images,
.flow-images,
.flow-images:has(.mock),
.campanha-wrap,
.crm-wrap {
max-width: 1220px;
}
/* Sem transbordo: o quadro preenche o wrapper e para nele. */
.hero-img-central:has(.mock),
.browser-frame:has(.mock-flow) {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Com o quadro rente ao wrapper, o rótulo não precisa mais compensar o
transbordo de -2% que existia antes. */
.hero-images:has(.mock) p.mock-eyebrow.mock-eyebrow {
margin-left: 0;
}
/* --------------------------------------------------------------------------
10. Painéis flutuantes do hero, com o container mais largo
Os painéis pendurados nas laterais do quadro do hero são posicionados em %
do wrapper. Com o wrapper 12,5% mais largo (container novo), a mesma % virou
MAIS pixels: o painel de SLA passou a começar em x=-72 e o de contato a
terminar em x=1488 — os dois fora da tela numa viewport de 1440.
Aqui o deslocamento deixa de ser proporcional ao wrapper e passa a ser
medido a partir da BORDA DA TELA: `(100vw - wrapper)/2` é a folga de cada
lado, e os 16px são a margem que sobra. Assim o painel encosta na margem em
qualquer largura, em vez de escapar quando o container cresce.
-------------------------------------------------------------------------- */
/* 1281px é onde os flutuantes ainda aparecem (abaixo disso o CSS existente os
esconde). Começar em 1300px deixava a faixa 1281–1299 com a regra antiga em
%, que ali estoura a tela. */
/* Os painéis pendem da BORDA DO QUADRO, com uma fatia para dentro dele — é o
que faz parecerem presos à tela. `-38%` da própria largura para fora, o
resto sobreposto. Sem `calc` contra a viewport: aquilo os prendia à borda
da TELA, e quanto maior o monitor mais longe do quadro eles iam parar. */
@media (min-width: 1281px) {
.hero-images:has(.mock) .hero-img-left {
left: -4%;
}
.hero-images:has(.mock) .hero-img-right,
/* Este ficou de fora do ajuste anterior e era o único elemento que a régua
vertical ainda cruzava: pendurado a -11% ele ia de x=1208 até 1464, ou
seja atravessava a linha da direita (1400) e ainda saía da tela de 1440. */
.hero-images:has(.mock) .hero-img-right-bottom {
right: -4%;
}
.flow-images:has(.mock) .flow-img-l1,
.flow-images:has(.mock) .flow-img-l2 {
left: -3%;
}
.flow-images:has(.mock) .flow-img-r1,
.flow-images:has(.mock) .flow-img-r2,
.flow-images:has(.mock) .flow-img-r3 {
right: -3%;
}
}
/* --------------------------------------------------------------------------
11. Rolagem horizontal na animação de entrada da seção de Engajamento
Vários enfeites saem da caixa de propósito: `.engage-left` entra com
`translateX(-40px)`, o chat do WhatsApp do Weny Flow fica pendurado à
esquerda, os painéis do hero nas laterais. Em telas estreitas o que sobra
vira barra de rolagem horizontal na PÁGINA — atrapalha em qualquer largura
e já existia antes do container novo (a -16px em vez de -8px).
O corte fica na `.section`, que é de largura inteira: recortar ali equivale
a recortar na borda da tela, e os quadros que transbordam o container de
propósito (`width: 122%`) continuam visíveis, porque não passam da seção.
`clip` e não `hidden`: `hidden` cria um contêiner de rolagem e quebraria
qualquer `position: sticky` dentro dele; `clip` só recorta.
-------------------------------------------------------------------------- */
.section {
overflow-x: clip;
}
/* --------------------------------------------------------------------------
12. Quadros e enfeites acertados para o container novo
Dois desencontros que o container mais largo revelou:
a) o olho de seção do CRM e de Campanhas ficou em x=113 enquanto o quadro
deles ficou em x=180. O wrapper cresceu para 1215, mas o `.browser-frame`
lá dentro continuava preso no `max-width: 1080px` antigo e se
recentralizava — o rótulo passou a apontar para um quadro mais estreito.
Aqui o quadro volta a preencher o wrapper, que é o que mantém rótulo e
moldura na mesma borda esquerda.
b) o chat do WhatsApp do Weny Flow ficava pendurado a `left: -14%` do
wrapper e, com o recorte da seção, passava a ser cortado em x=-49.
Mesma solução dos painéis do hero: distância medida a partir da BORDA DA
TELA, com 16px de margem, em vez de proporcional ao wrapper.
-------------------------------------------------------------------------- */
.crm-wrap .browser-frame,
.campanha-wrap .browser-frame {
max-width: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1281px) {
.flow-images:has(.mock) .mock-whats {
left: -4%;
}
}
/* --------------------------------------------------------------------------
13. Fundo do hero: malha de pontos + quatro orbes com gradiente
Medido na referência (kenlo.com.br), não estimado:
.dot-grid radial-gradient(circle, #d8d8d8 1px, transparent 1px)
background-size: 28px 28px; opacity: .5
.orb--a1 915×667 em (241,-227) rgba(248, 46, 82,.10) 20s
.orb--a2 740×555 em (-185,335) rgba(162, 86,188,.10) 26s
.orb--a3 962×416 em (746,-84) rgba(41,142,230,.12) 22s
.orb--a4 495×371 em (876,444) rgba(213,125,255,.09) 30s
Os TAMANHOS foram reduzidos e as posições redistribuídas: o hero da
referência tem ~900px de altura e o daqui tem 1729px (leva o quadro do
produto dentro). Com os 900px originais os quatro orbes se amontoavam no
terço de cima e liam como uma lavagem de cor sobre a seção inteira, em vez
de acentos.
todos: border-radius 50%, filter blur(90px), opacity .95,
animação ease-in-out infinite, uma trajetória por orbe
O que muda aqui: as CORES. Tamanho, desfoque, opacidade, posição e tempo
são os da referência; os matizes vêm da paleta da própria plataforma —
lima da marca, azul do Atendimento (#0369a1), índigo do Weny Flow
(#4F46E5) e a fúcsia do node Weny Intent. Copiar o vermelho e o roxo do
kenlo poria a paleta de outra empresa no topo da página.
Durações diferentes e primas entre si (20/26/22/30s) de propósito: com
tempos iguais os quatro voltariam à posição inicial juntos e o movimento
viraria um pulso perceptível.
-------------------------------------------------------------------------- */
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* O conteúdo do hero fica ACIMA do fundo. */
.hero > .container {
position: relative;
z-index: 1;
}
.dot-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(
circle,
var(--neutral-40) 1px,
transparent 1px
);
background-size: 28px 28px;
opacity: 0.5;
/* Some na base: sem isso a malha bate de frente com a seção seguinte, em
vez de dissolver no fundo da página. */
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Halo por GRADIENTE de seis paradas + um blur pequeno, e não por
`filter: blur(90px)` sobre preenchimento sólido.
Medido nesta página, no tema escuro, em 2s de requestAnimationFrame:
com os orbes como estavam ............. 15 fps
orbes escondidos ...................... 56 fps
orbes visíveis com `filter: none` ..... 60 fps
orbes com blur e animação DESLIGADA ... 17 fps
A última linha é a que fecha o diagnóstico: o custo é o BLUR, não o
movimento. Quatro superfícies de ~1000px com desfoque de 90px são
recompostas a cada quadro, e a promoção a camada própria não salva.
A primeira tentativa de trocar por gradiente ficou ruim porque tinha só
TRÊS paradas — a queda era quase linear e fazia banda visível. Aqui são
DEZ, seguindo uma queda tipo gaussiana, que é o que o blur produzia.
E o `filter` sai por completo, porque qualquer raio ainda custa quadros
nestas superfícies de ~1000px (medido: 28px → 40fps, 16px → 47, 8px → 53,
nenhum → 60). Sem ele a página volta aos 60.
Tamanho: o que importa não é copiar os pixels da referência, é a COBERTURA.
Numa tela de 1440×900 o orbe a1 dela sozinho ocupa 915px (63% da largura) e
sangra 227px acima do topo — os quatro juntos cobrem a primeira tela
inteira, e é isso que produz a lavagem de cor em vez de manchas soltas.
Aqui o hero tem 1729px de altura (leva o quadro do produto dentro), então
os valores sobem na mesma proporção: o maior chega a 1450px e todos sangram
para fora das bordas. Orbe que cabe inteiro dentro do hero vira mancha; o
que sangra vira fundo. */
.orb {
position: absolute;
border-radius: 50%;
opacity: 0.95;
transform: translateZ(0);
will-change: transform;
}
.orb-1 {
width: 1450px;
height: 1060px;
left: 60px;
top: -420px;
/* Rosa no lugar do lima. É também o matiz do orbe equivalente na referência
(rgba(248,46,82,.10) no a1). Alfa menor que o do lima: rosa saturado pesa
mais que verde claro na mesma opacidade — a 0,17 ele virava um filtro
sobre o título. */
background: radial-gradient(
closest-side,
rgba(248, 46, 82, 0.3) 0%,
rgba(248, 46, 82, 0.288) 12%,
rgba(248, 46, 82, 0.264) 24%,
rgba(248, 46, 82, 0.225) 36%,
rgba(248, 46, 82, 0.177) 48%,
rgba(248, 46, 82, 0.126) 60%,
rgba(248, 46, 82, 0.078) 72%,
rgba(248, 46, 82, 0.039) 84%,
rgba(248, 46, 82, 0.015) 93%,
rgba(248, 46, 82, 0) 100%
);
animation: orb-drift-1 20s ease-in-out infinite;
}
.orb-2 {
width: 1200px;
height: 900px;
left: -360px;
top: 620px;
background: radial-gradient(
closest-side,
rgba(79, 70, 229, 0.26) 0%,
rgba(79, 70, 229, 0.2496) 12%,
rgba(79, 70, 229, 0.2288) 24%,
rgba(79, 70, 229, 0.195) 36%,
rgba(79, 70, 229, 0.1534) 48%,
rgba(79, 70, 229, 0.1092) 60%,
rgba(79, 70, 229, 0.0676) 72%,
rgba(79, 70, 229, 0.0338) 84%,
rgba(79, 70, 229, 0.013) 93%,
rgba(79, 70, 229, 0) 100%
);
animation: orb-drift-2 26s ease-in-out infinite;
}
.orb-3 {
width: 1520px;
height: 700px;
left: 520px;
top: -180px;
background: radial-gradient(
closest-side,
rgba(3, 105, 161, 0.3) 0%,
rgba(3, 105, 161, 0.288) 12%,
rgba(3, 105, 161, 0.264) 24%,
rgba(3, 105, 161, 0.225) 36%,
rgba(3, 105, 161, 0.177) 48%,
rgba(3, 105, 161, 0.126) 60%,
rgba(3, 105, 161, 0.078) 72%,
rgba(3, 105, 161, 0.039) 84%,
rgba(3, 105, 161, 0.015) 93%,
rgba(3, 105, 161, 0) 100%
);
animation: orb-drift-3 22s ease-in-out infinite;
}
.orb-4 {
width: 880px;
height: 660px;
left: 760px;
top: 960px;
background: radial-gradient(
closest-side,
rgba(217, 70, 239, 0.24) 0%,
rgba(217, 70, 239, 0.2304) 12%,
rgba(217, 70, 239, 0.2112) 24%,
rgba(217, 70, 239, 0.18) 36%,
rgba(217, 70, 239, 0.1416) 48%,
rgba(217, 70, 239, 0.1008) 60%,
rgba(217, 70, 239, 0.0624) 72%,
rgba(217, 70, 239, 0.0312) 84%,
rgba(217, 70, 239, 0.012) 93%,
rgba(217, 70, 239, 0) 100%
);
animation: orb-drift-4 30s ease-in-out infinite;
}
@keyframes orb-drift-1 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-60px, 40px, 0) scale(1.08); }
}
@keyframes orb-drift-2 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(70px, -50px, 0) scale(0.94); }
}
@keyframes orb-drift-3 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-80px, 55px, 0) scale(1.06); }
}
@keyframes orb-drift-4 {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(50px, -60px, 0) scale(1.1); }
}
/* No escuro a malha precisa clarear em vez de escurecer, e os orbes ganham
um pouco de força — sobre preto a mesma opacidade some. */
:root[data-theme='dark'] .orb,
:root:not([data-theme='light']) .orb {
opacity: 1;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme='dark']) .orb {
opacity: 0.95;
}
}
@media (prefers-reduced-motion: reduce) {
.orb { animation: none; }
}
@media (max-width: 900px) {
.orb-3, .orb-4 { display: none; }
}
/* --------------------------------------------------------------------------
14. Faixa de confiança (marquee)
Medido na seção equivalente do kenlo.com.br:
seção padding 32px 0, fundo transparente, altura ~125px
rótulo 13px, peso 400, cor #595959, alinhado à esquerda
itens JetBrains Mono 14px, peso 400, cor #b8b8b8
trilha `v4scroll` 36s linear infinite
Duas decisões de conteúdo, e vale explicar:
1. O rótulo da referência é "A plataforma de confiança de mais de N
imobiliárias em todo o Brasil", com o N vindo de uma API de métricas.
Aqui ele NÃO tem número: afirmar quantidade de clientes sem o dado real
é inventar prova social. O texto ficou no que a própria página sustenta.
Quando houver o número, ele entra na mesma frase.
2. Os itens da esteira são só o que já está afirmado na página — canais,
produtos e o selo Meta. Nada aqui depende de dado que eu não tenha.
O laço é contínuo porque a trilha carrega a lista DUAS vezes e desloca
-50%: ao chegar lá, a segunda cópia está exatamente onde a primeira
começou, então o corte é invisível. Com uma cópia só, a esteira esvaziaria
antes de voltar.
-------------------------------------------------------------------------- */
.trust-band {
padding: 34px 0;
overflow: hidden;
/* Filete em cima e embaixo: é o que fecha a faixa e a faz ler como tarja,
e não como um respiro entre o hero e a seção seguinte. */
border-top: 1px solid var(--regua);
border-bottom: 1px solid var(--regua);
}
/* A esteira roda DENTRO do container, não na largura da tela.
Com ela em largura inteira, as réguas verticais (`fixed`, z-index 5)
cruzavam os itens em movimento. Subir a faixa de z-index resolvia no papel,
mas mal: a régua continuava passando por cima nos vãos, e o texto atravessava
uma linha que deveria delimitá-lo. Contida no container ela simplesmente
nunca alcança as réguas — some o conflito de empilhamento em vez de
arbitrá-lo.
(E o `elementFromPoint` que eu tinha usado para "confirmar" o z-index não
provava nada: `.page-lines` tem `pointer-events: none`, então o teste de
acerto o ignora e devolveria o item embaixo de qualquer jeito.) */
.trust-label {
font-size: 0.95rem;
color: var(--neutral-200);
/* Medida larga de propósito: a frase cabe em UMA linha, como na referência.
A 46ch ela quebrava em três e a faixa passava de 125px para 161px, virando
um bloco em vez de uma tarja. */
max-width: 80ch;
margin: 0 0 30px;
line-height: 1.5;
}
.marquee {
position: relative;
overflow: hidden;
/* Sem a máscara os itens surgem e somem de supetão na borda da tela. */
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 4%,
#000 96%,
transparent
);
mask-image: linear-gradient(
to right,
transparent,
#000 4%,
#000 96%,
transparent
);
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll 36s linear infinite;
}
.marquee-group {
display: flex;
align-items: center;
flex-shrink: 0;
}
.marquee-group span {
display: inline-flex;
align-items: center;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--neutral-100);
white-space: nowrap;
padding: 0 26px;
}
/* Separador entre itens, sem elemento a mais no HTML. */
.marquee-group span::after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--neutral-40);
margin-left: 26px;
flex-shrink: 0;
}
@keyframes marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.marquee:hover .marquee-track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
@media (max-width: 768px) {
.trust-band { padding: 26px 0; }
.marquee-group span { font-size: 12.5px; padding: 0 16px; }
.marquee-group span::after { margin-left: 16px; }
}
/* --------------------------------------------------------------------------
15. Destaque do título e CTA do hero
O lima saiu das duas peças que mais pesam no topo:
- a palavra em destaque do H1 vira um gradiente rosa → violeta, os mesmos
matizes dos orbes do fundo (o rosa que substituiu o lima e a fúcsia do
orbe 4). É também o recurso que a referência usa na chamada dela, onde
"8 mil" ganha gradiente enquanto o resto fica preto;
- o CTA passa a inverter com o tema, como o botão do header: preto com
texto branco no claro, branco com texto preto no escuro. Sai do
`var(--neutral-900)`/`var(--neutral-0)`, que já trocam de lado sozinhos
— nenhuma regra por tema é necessária.
`color` é declarado ANTES do recorte do gradiente: se `background-clip:
text` não for suportado, o texto cai na cor sólida em vez de sumir.
-------------------------------------------------------------------------- */
/* `:not(.gold-text)` porque o gradiente rosa→violeta é o destaque DA INDEX,
e este arquivo vale para as oito páginas. A growth marca o destaque do H1
dela com `.gold-text`, que é lima por definição — sem a exclusão, "cresci-
mento real" saía rosa e fúcsia no meio de uma página lima e charcoal. */
.hero h1 span:not(.gold-text) {
color: #f82e52;
background: linear-gradient(96deg, #f82e52 0%, #d946ef 55%, #8b5cf6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
.hero h1 span:not(.gold-text) {
background: none;
-webkit-text-fill-color: currentColor;
}
}
/* CTA do hero: classe PRÓPRIA, porque nenhuma das duas famílias existentes
faz o que se quer aqui.
- `.btn-primary` é o botão lima, e `theme.css` fixa
`color: var(--on-primary) !important` nele para o texto continuar escuro
sobre o lima nos dois temas. Com o fundo trocado para preto, o botão saía
preto sobre preto no tema claro — e o `!important` vencia qualquer `color`
escrito aqui.
- `.btn-dark` está na lista dos "painéis escuros de propósito nos dois
temas" (`background: var(--surface-inverse)`), ou seja NÃO inverte: no
tema escuro continuava escuro.
`.btn-invert` sai de `--neutral-900`/`--neutral-0`, que trocam de lado
sozinhos com o tema: preto com texto branco no claro, branco com texto
preto no escuro. Sem `!important` novo, porque a classe não pertence a
nenhuma das listas acima. */
.btn-invert {
background: var(--neutral-900);
color: var(--neutral-0);
box-shadow: none;
}
.btn-invert:hover {
background: var(--neutral-700);
box-shadow: none;
}
.btn-invert::after {
content: '→';
font-size: 1.05em;
line-height: 1;
transition: transform 0.2s;
}
.btn-invert:hover::after {
transform: translateX(3px);
}
/* --------------------------------------------------------------------------
16. Rótulo de seção sem o ponto herdado das páginas secundárias
A index escreve `Texto`; growth, log,
jus e automais escrevem ``.
Aquele ponto era o marcador da PÍLULA que a seção 2 deste arquivo desfaz —
sem a pílula ele fica solto entre o `[NN]` e o texto, e só naquelas quatro
páginas. Some, e os oito arquivos passam a desenhar o mesmo rótulo.
-------------------------------------------------------------------------- */
.section-label .dot {
display: none;
}
/* --------------------------------------------------------------------------
17. "Growth" no menu — o item que não é mais um produto
Weny Growth é a agência, não um módulo do app. No menu ela precisa ler como
uma frente à parte sem virar um segundo CTA: o `.nav-cta` lima continua
sendo o único botão cheio da barra, e este item fica em contorno lima com o
texto na cor da marca — presente, e ainda assim subordinado ao "Entrar".
Está aqui e não no