/* CMS-only additions to the .wtm-lp design system. * * lp.css is a byte-identical mirror of the inline stylesheet in * sell-saas-in-brazil.html and is guarded by src/lib/lp-css.test.ts — nothing * may be added to it. Anything the CMS needs and the reference page does not * have lives here. * * Every selector is prefixed `.wtm-lp ` for the same reason the rest of the * system is: the site chrome (shared.css) uses generic names like .btn, * .section and .lead, and an unscoped rule here would silently restyle the nav, * the footer and the lead modal on every page of the site. */ /* ── Blog prose ───────────────────────────────────────────────────────────── */ /* The rich_text block emits ordinary markup; give it a readable measure and the vertical rhythm of the reference page rather than browser defaults. */ .wtm-lp .cms-prose { max-width: 68ch; margin-inline: auto; } .wtm-lp .cms-prose > * + * { margin-top: 1.1em; } .wtm-lp .cms-prose h2 { margin-top: 1.8em; font-size: clamp(24px, 3vw, 34px); } .wtm-lp .cms-prose h3 { margin-top: 1.5em; font-size: clamp(20px, 2.4vw, 26px); } .wtm-lp .cms-prose ol { padding-left: 1.35em; } .wtm-lp .cms-prose li + li { margin-top: 0.4em; } /* Lista solta num bloco de texto: mesmo tick do checklist dos cards. A bolinha crua do navegador é o que fazia uma seção de três pontos parecer um rascunho colado — o resto da página é do design system e a lista não era. `ol` fica de fora: numeração é semântica, e trocá-la por tick perde a ordem. */ .wtm-lp .cms-prose ul { list-style: none; padding-left: 0; margin: 1em 0; display: grid; gap: 10px; } .wtm-lp .cms-prose ul > li { position: relative; padding-left: 26px; } .wtm-lp .cms-prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--teal-soft); border-bottom: 2px solid var(--teal-soft); transform: rotate(-45deg); } .wtm-lp :is(.section--light, .section--paper) .cms-prose ul > li::before { border-color: var(--teal, #0b6c8a); } .wtm-lp .cms-prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; } .wtm-lp .cms-prose blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--violet); color: var(--muted); font-style: italic; } .wtm-lp .cms-prose code { padding: 2px 6px; border-radius: 6px; background: rgba(134, 62, 243, 0.08); font-size: 0.92em; } /* ── Figures ──────────────────────────────────────────────────────────────── */ .wtm-lp figure.cms-figure { margin: 0; } .wtm-lp figure.cms-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-card); } .wtm-lp figure.cms-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; text-align: center; } /* ── custom_html escape hatch ─────────────────────────────────────────────── */ /* Author-supplied markup is sanitised server-side, but it arrives without any design-system classes. These defaults keep it recognisably WTM instead of browser-default. */ .wtm-lp .cms-custom { max-width: 68ch; margin-inline: auto; } .wtm-lp .cms-custom table { width: 100%; border-collapse: collapse; font-size: 15px; } .wtm-lp .cms-custom th, .wtm-lp .cms-custom td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .wtm-lp .cms-custom th { color: var(--slate); font-weight: 600; } .wtm-lp .cms-custom img { max-width: 100%; height: auto; border-radius: var(--r-card); } /* ── FAQ ──────────────────────────────────────────────────────────────────── */ /* Rendered as
so the answer is in the HTML for crawlers and answer engines even while collapsed — the whole point of the block for GEO. */ .wtm-lp .cms-faq details { padding: 16px 0; border-bottom: 1px solid var(--line); } .wtm-lp .cms-faq summary { cursor: pointer; color: var(--slate); font-family: var(--serif); font-size: clamp(17px, 2vw, 20px); font-weight: 600; list-style: none; } .wtm-lp .cms-faq summary::-webkit-details-marker { display: none; } .wtm-lp .cms-faq summary::after { content: "+"; float: right; color: var(--violet); font-size: 1.2em; line-height: 1; } .wtm-lp .cms-faq details[open] summary::after { content: "−"; } .wtm-lp .cms-faq details > *:not(summary) { margin-top: 10px; } /* ── Blog listing ─────────────────────────────────────────────────────────── */ .wtm-lp .cms-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } .wtm-lp .cms-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .wtm-lp .cms-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11, 26, 34, 0.08); } .wtm-lp .cms-card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; } .wtm-lp .cms-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; } .wtm-lp .cms-card-meta { color: var(--muted); font-size: 13px; } .wtm-lp .cms-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; } /* Same breakpoints the reference page uses (docs/design.md §5), so a CMS page reflows at exactly the same widths as a hand-authored one. */ @media (max-width: 980px) { .wtm-lp .cms-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .wtm-lp .cms-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Correções de contraste e ritmo nas seções escuras do CMS. Vão aqui, e não em lp.css, porque aquele arquivo é espelho byte-a-byte do bloco inline da página de referência e tem teste de drift. --------------------------------------------------------------------------- */ /* `bg: "brand"` gera a classe `wtm-dark`, e lp.css pinta de branco apenas `h2` e `h3` — o `h1` ficou de fora e herdava `.wtm-lp h1{color:var(--slate)}`, que é escuro. Resultado: TODA hero com fundo de marca saía com o título quase invisível sobre o gradiente. Não era percepção: a regra global vence a herança de cor do container. */ .wtm-lp .wtm-dark h1 { color: #fff; } /* O mesmo esquecimento atinge o texto de apoio e as legendas: o container define `color: var(--paper)`, mas qualquer elemento com cor própria a ignora. */ .wtm-lp .wtm-dark .sub, .wtm-lp .wtm-dark .lead { color: rgba(236, 236, 238, 0.82); } .wtm-lp .wtm-dark .eyebrow { color: rgba(236, 236, 238, 0.7); } /* Os dois CTAs do hero tinham ALTURAS diferentes — o primeiro recebe `.btn--lg` (18px/34px) e o segundo ficava em `.btn` (14px/24px). A intenção é hierarquia, mas altura desigual lado a lado lê como defeito, não como ênfase. A distinção passa a ser só de cor e peso; o tamanho é o mesmo. */ .wtm-lp .hero-cta .btn { padding: 18px 34px; font-size: 17px; } /* Espaço para respirar entre o texto e os botões. Sem isto os CTAs encostam na linha de apoio e o bloco inteiro parece comprimido. */ .wtm-lp .hero-cta { margin-top: clamp(24px, 3vw, 36px); gap: 14px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- Cards de grade em seção CLARA. `.icard` foi desenhado para fundo escuro: usa `--glass` (vidro sobre escuro), `--line-dark`, `h3` branco e parágrafo em rgba(236,236,238,.66). Numa `section--light`/`--paper` o vidro fica quase transparente e o texto claro desaparece — foi o que apareceu como "Market focus" e "Local fit" ilegíveis. O card ao lado parecia correto por estar sob o CURSOR: o `:hover` pinta um fundo teal sólido, o que confunde ainda mais o diagnóstico, porque um dos três sempre parece certo. O agente pode legitimamente colocar uma grade em seção clara, então a correção é dar ao card a variante que faltava — não proibir a combinação. --------------------------------------------------------------------------- */ .wtm-lp .section--light .icard, .wtm-lp .section--paper .icard { background: #fff; border-color: rgba(16, 41, 56, 0.12); box-shadow: 0 18px 40px -32px rgba(16, 41, 56, 0.45); /* Cor no CARD, não só no h3/p: um `span` ou `li` dentro dele herdaria o branco do tema escuro e sumiria — o mesmo defeito, um elemento adiante. */ color: var(--slate); } .wtm-lp .section--light .icard h3, .wtm-lp .section--paper .icard h3 { color: var(--slate); } .wtm-lp .section--light .icard p, .wtm-lp .section--paper .icard p { color: rgba(16, 41, 56, 0.72); } /* O hover continua existindo, mas sem trocar para o esquema escuro: virar teal sólido no claro faz o card parecer "selecionado", e foi exatamente essa leitura que gerou a suspeita de estado ativo onde só havia cursor. */ .wtm-lp .section--light .icard:hover, .wtm-lp .section--paper .icard:hover { background: #fff; border-color: rgba(16, 41, 56, 0.28); box-shadow: 0 26px 54px -32px rgba(16, 41, 56, 0.5); color: var(--slate); } .wtm-lp .section--light .icard:hover h3, .wtm-lp .section--paper .icard:hover h3 { color: var(--slate); } /* --------------------------------------------------------------------------- Legibilidade em superfície ESCURA, para qualquer bloco. O agente pode trocar o fundo de uma seção (`bg: dark` / `brand`), e até aqui isso produzia texto preto sobre fundo escuro: cada bloco declarava cor pensando num único fundo, e a troca não levava as cores junto. Foi assim com o `h1` do hero, com os cards `.icard`, e com os rótulos das etapas. Corrigir bloco a bloco não resolveria: o próximo bloco criado repetiria a premissa. Estas regras valem para TODO conteúdo do CMS dentro de uma superfície escura, e por isso são a última linha de defesa — não substituem o CSS de cada bloco, cobrem o que ele esqueceu. Escopo em `.cms-page` NÃO seria suficiente: o preview e a página publicada compartilham o `.wtm-lp`, e é nele que a cascata precisa entrar. --------------------------------------------------------------------------- */ .wtm-lp .wtm-dark h1, .wtm-lp .wtm-dark h2, .wtm-lp .wtm-dark h3, .wtm-lp .wtm-dark h4, .wtm-lp .section--dark h1, .wtm-lp .section--dark h2, .wtm-lp .section--dark h3, .wtm-lp .section--dark h4 { color: #fff; } .wtm-lp .wtm-dark p, .wtm-lp .wtm-dark li, .wtm-lp .wtm-dark dd, .wtm-lp .wtm-dark summary, .wtm-lp .section--dark p, .wtm-lp .section--dark li, .wtm-lp .section--dark dd, .wtm-lp .section--dark summary { color: rgba(236, 236, 238, 0.82); } /* Cards e caixas dentro de superfície escura: o vidro claro some no escuro e a borda clara vira um retângulo brilhante. */ .wtm-lp .wtm-dark .icard, .wtm-lp .section--dark .icard { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 255, 255, 0.14); } /* --------------------------------------------------------------------------- Espaçamento por vocabulário. O agente precisava de uma forma de dar "espaço de respiro" sem escrever CSS. Três valores fechados em vez de números livres: com número livre ele produziria 13px num sistema de escala, e a página sairia fora do ritmo do resto do site. --------------------------------------------------------------------------- */ .wtm-lp .cms-space-compact { padding-top: clamp(28px, 3vw, 44px); padding-bottom: clamp(28px, 3vw, 44px); } .wtm-lp .cms-space-roomy { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(72px, 8vw, 128px); } /* Respiro INTERNO: entre o texto de apoio e o que vem depois dele. Foi a falta disso que deixou os boxes colados na linha de descrição. */ .wtm-lp .cms-space-roomy > .wrap > * + *, .wtm-lp .cms-space-comfortable > .wrap > * + * { margin-top: clamp(20px, 2.4vw, 34px); } /* --------------------------------------------------------------------------- Ritmo INTERNO das seções, governado pelo mesmo `spacing` do bloco. O caso que expôs isso: em `lane_split`, a descrição da trilha é um `

` logo depois de `.path`, e não havia margem nenhuma entre os dois — o texto encostava nos boxes. Vale para toda lane_split, não só para a página onde apareceu. Uma prop só, e não uma segunda para "espaço interno": duas alavancas para a mesma intenção deixariam o modelo escolher a errada metade das vezes, e a pessoa sem saber qual pedir. `spacing` passa a significar o respiro da seção — por fora E por dentro. --------------------------------------------------------------------------- */ .wtm-lp .path + .small, .wtm-lp .lane .path + p { margin-top: 18px; } .wtm-lp .cms-space-comfortable .path + .small, .wtm-lp .cms-space-comfortable .lane .path + p { margin-top: 26px; } .wtm-lp .cms-space-roomy .path + .small, .wtm-lp .cms-space-roomy .lane .path + p { margin-top: 38px; } .wtm-lp .cms-space-compact .path + .small, .wtm-lp .cms-space-compact .lane .path + p { margin-top: 10px; } /* Distância entre as trilhas, pela mesma alavanca. */ .wtm-lp .cms-space-roomy .lane { margin-top: 46px; } .wtm-lp .cms-space-compact .lane { margin-top: 16px; } /* E o mesmo ritmo entre o cabeçalho da seção e o conteúdo dela, que é onde a falta de respiro aparece primeiro. */ .wtm-lp .cms-space-roomy .s-head, .wtm-lp .cms-space-roomy .cms-head { margin-bottom: clamp(36px, 4vw, 60px); } .wtm-lp .cms-space-compact .s-head, .wtm-lp .cms-space-compact .cms-head { margin-bottom: 18px; } /* --------------------------------------------------------------------------- Superfície do MIOLO (`inner_surface`). `bg` pinta a seção inteira. Quando o pedido é "escureça só a grade", a única saída era escurecer tudo — a seção inteira virava escura e o cabeçalho ia junto, que não era o que se pediu. A classe fica na SEÇÃO e o alvo é o contêiner interno. Duas razões: os 20 componentes já passam pelo `sectionClass`, então um bloco novo herda isto sem ninguém lembrar de ligá-lo; e a lista de alvos abaixo é o que define o que conta como "miolo" — um lugar só para revisar, em vez de vinte. ⚠️ O tratamento de texto claro precisa vir JUNTO. Pintar o painel de escuro sem isso reproduz o defeito que já custou uma rodada: título escuro sobre fundo escuro, ilegível, e sem nenhum erro em lugar nenhum. --------------------------------------------------------------------------- */ .wtm-lp .cms-inner-dark .impact-grid, .wtm-lp .cms-inner-dark .split, .wtm-lp .cms-inner-dark .stat-band, .wtm-lp .cms-inner-dark .cms-stats, .wtm-lp .cms-inner-dark .case, .wtm-lp .cms-inner-brand .impact-grid, .wtm-lp .cms-inner-brand .split, .wtm-lp .cms-inner-brand .stat-band, .wtm-lp .cms-inner-brand .cms-stats, .wtm-lp .cms-inner-brand .case { border-radius: 18px; padding: clamp(20px, 3vw, 36px); } .wtm-lp .cms-inner-dark .impact-grid, .wtm-lp .cms-inner-dark .split, .wtm-lp .cms-inner-dark .stat-band, .wtm-lp .cms-inner-dark .cms-stats, .wtm-lp .cms-inner-dark .case { background: #0e0f13; } .wtm-lp .cms-inner-brand .impact-grid, .wtm-lp .cms-inner-brand .split, .wtm-lp .cms-inner-brand .stat-band, .wtm-lp .cms-inner-brand .cms-stats, .wtm-lp .cms-inner-brand .case { background: linear-gradient(160deg, #10131a, #171b24); } /* O texto lá dentro, pelo mesmo motivo do bloco de contraste acima. */ .wtm-lp .cms-inner-dark .impact-grid :is(h1, h2, h3, h4), .wtm-lp .cms-inner-dark .split :is(h1, h2, h3, h4), .wtm-lp .cms-inner-dark .stat-band :is(h1, h2, h3, h4), .wtm-lp .cms-inner-dark .case :is(h1, h2, h3, h4), .wtm-lp .cms-inner-brand .impact-grid :is(h1, h2, h3, h4), .wtm-lp .cms-inner-brand .split :is(h1, h2, h3, h4), .wtm-lp .cms-inner-brand .stat-band :is(h1, h2, h3, h4), .wtm-lp .cms-inner-brand .case :is(h1, h2, h3, h4) { color: #fff; } .wtm-lp .cms-inner-dark .impact-grid :is(p, li, dd, summary, .stat-label, .stat-note), .wtm-lp .cms-inner-dark .split :is(p, li, dd, summary, .lane-title), .wtm-lp .cms-inner-dark .stat-band :is(p, li, .stat-label, .stat-note), .wtm-lp .cms-inner-dark .case :is(p, li, dd, summary), .wtm-lp .cms-inner-brand .impact-grid :is(p, li, dd, summary, .stat-label, .stat-note), .wtm-lp .cms-inner-brand .split :is(p, li, dd, summary, .lane-title), .wtm-lp .cms-inner-brand .stat-band :is(p, li, .stat-label, .stat-note), .wtm-lp .cms-inner-brand .case :is(p, li, dd, summary) { color: rgba(236, 236, 238, 0.82); } /* Cards dentro do painel escuro — o vidro claro do `.icard` desaparece nele. */ .wtm-lp .cms-inner-dark .icard, .wtm-lp .cms-inner-brand .icard { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 255, 255, 0.14); } /* Miolo CLARO dentro de seção escura: o caminho inverso, e o `.icard` volta ao desenho de superfície clara — senão fica vidro branco sobre branco. */ .wtm-lp .cms-inner-light .impact-grid, .wtm-lp .cms-inner-light .split, .wtm-lp .cms-inner-light .stat-band, .wtm-lp .cms-inner-light .case, .wtm-lp .cms-inner-paper .impact-grid, .wtm-lp .cms-inner-paper .split, .wtm-lp .cms-inner-paper .stat-band, .wtm-lp .cms-inner-paper .case { border-radius: 18px; padding: clamp(20px, 3vw, 36px); color: var(--slate, #2b2f38); } .wtm-lp .cms-inner-light .impact-grid, .wtm-lp .cms-inner-light .split, .wtm-lp .cms-inner-light .stat-band, .wtm-lp .cms-inner-light .case { background: #fff; } .wtm-lp .cms-inner-paper .impact-grid, .wtm-lp .cms-inner-paper .split, .wtm-lp .cms-inner-paper .stat-band, .wtm-lp .cms-inner-paper .case { background: #f6f7f9; } .wtm-lp .cms-inner-light :is(.impact-grid, .split, .stat-band, .case) :is(h1, h2, h3, h4), .wtm-lp .cms-inner-paper :is(.impact-grid, .split, .stat-band, .case) :is(h1, h2, h3, h4) { color: var(--slate, #2b2f38); } .wtm-lp .cms-inner-light :is(.impact-grid, .split, .stat-band, .case) :is(p, li, dd, summary), .wtm-lp .cms-inner-paper :is(.impact-grid, .split, .stat-band, .case) :is(p, li, dd, summary) { color: rgba(43, 47, 56, 0.78); } .wtm-lp .cms-inner-light .icard, .wtm-lp .cms-inner-paper .icard { background: #fff; border-color: rgba(16, 19, 26, 0.1); color: var(--slate); } /* --------------------------------------------------------------------------- Imagem de fundo de seção (`bg_image`) e o véu que a torna utilizável. A URL vai no atributo `style` porque é dado. O que é desenho fica aqui. ⚠️ O véu não é enfeite. Texto sobre foto é legível em metade das imagens e ilegível na outra, e qual das duas só se descobre depois de publicar. Um pseudo-elemento cobre a imagem com uma camada de contraste previsível — o mesmo princípio de `bg` carregar as cores de texto junto. `position: relative` + `z-index` no conteúdo: sem isso o véu cobriria também o texto que ele deveria proteger. --------------------------------------------------------------------------- */ .wtm-lp .cms-has-bg-image { position: relative; background-repeat: no-repeat; } .wtm-lp .cms-has-bg-image > * { position: relative; z-index: 1; } .wtm-lp .cms-has-bg-image::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .wtm-lp .cms-veil-light::before { background: rgba(255, 255, 255, 0.72); } .wtm-lp .cms-veil-dark::before { background: rgba(8, 10, 14, 0.62); } .wtm-lp .cms-veil-strong::before { background: rgba(8, 10, 14, 0.82); } /* Sobre véu escuro o texto é claro, e sobre véu claro é escuro. Deixar isso para o `bg` da seção não funciona: a imagem cobre o fundo, então a cor do texto passa a depender do VÉU, não mais dele. */ .wtm-lp .cms-veil-dark :is(h1, h2, h3, h4), .wtm-lp .cms-veil-strong :is(h1, h2, h3, h4) { color: #fff; } .wtm-lp .cms-veil-dark :is(p, li, dd, summary, .sub, .lead), .wtm-lp .cms-veil-strong :is(p, li, dd, summary, .sub, .lead) { color: rgba(236, 236, 238, 0.86); } .wtm-lp .cms-veil-light :is(h1, h2, h3, h4) { color: var(--slate, #2b2f38); } .wtm-lp .cms-veil-light :is(p, li, dd, summary, .sub, .lead) { color: rgba(43, 47, 56, 0.8); } /* --------------------------------------------------------------------------- A segunda barra de rolagem. `lp.css` declara `overflow-x: hidden` no `.wtm-lp`. `hidden` num eixo faz o OUTRO eixo computar `auto` — então o `

` virava uma caixa de rolagem própria, dentro da rolagem da janela. Duas barras, e nenhuma delas percorrendo o que a pessoa espera. Só aparecia quando algo de fato transbordava a caixa, e o que transbordava era a própria animação de entrada: `.reveal` começa deslocado para baixo, e esse deslocamento passa 26px do fim do `
`. Como o deslocamento depende de quais seções já entraram na tela, a barra ia e vinha — o que explica ela parecer aleatória. `clip` recorta na horizontal exatamente como `hidden`, mas é o único valor que NÃO cria contêiner de rolagem: o eixo vertical continua `visible`. Verificado no ar antes de escrever isto — `overflow-y` computado passou de `auto` para `visible`. Vai AQUI e não no lp.css porque aquele arquivo é espelho congelado da página de referência, com teste de drift. As 24 páginas escritas à mão não carregam este arquivo e seguem byte-idênticas. --------------------------------------------------------------------------- */ .wtm-lp { overflow-x: clip; } /* --------------------------------------------------------------------------- Alinhamento da seção — `align` do envelope --------------------------------------------------------------------------- Existia só como prop de alguns blocos e, no `hero`, nem existia: o layout escuro e CENTRALIZADO do Figma virava uma página alinhada à esquerda sem que nada acusasse erro. Agora é vocabulário do envelope, como `spacing` e `inner_surface`, e uma classe na seção alcança o conteúdo inteiro — em vez de cada um dos 20 componentes aprender a repassar a prop. `center` também centraliza a coluna de texto e a fileira de botões: alinhar o texto ao centro e deixar o parágrafo ocupando toda a largura produz linhas longas centralizadas, que é pior do que não centralizar nada. --------------------------------------------------------------------------- */ .wtm-lp .cms-align-left { text-align: left; } .wtm-lp .cms-align-center { text-align: center; } .wtm-lp .cms-align-center .wrap > p, .wtm-lp .cms-align-center .wrap > .sub, .wtm-lp .cms-align-center .wrap > .lead { margin-inline: auto; max-width: 62ch; } .wtm-lp .cms-align-center .hero-cta, .wtm-lp .cms-align-center .cta-row { justify-content: center; } /* --------------------------------------------------------------------------- FAQ — abrir e fechar com movimento --------------------------------------------------------------------------- `
` abre com um salto: o conteúdo aparece inteiro no mesmo quadro, e ao lado do resto da página — que tem `.reveal`, transições de hover e o brilho seguindo o cursor — a sanfona era a única coisa que se mexia sem animar. Feito só com CSS, via `::details-content` e `interpolate-size`, porque animar `
` com JS exige medir a altura, travar o fechamento até o fim da transição e desfazer tudo isso quando alguém usa "localizar na página" — que abre a sanfona por conta própria. Onde `interpolate-size` não existe, `height: auto` simplesmente não anima e o comportamento volta a ser o de hoje: abre na hora, sem quebrar nada. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .wtm-lp .cms-faq details { interpolate-size: allow-keywords; } .wtm-lp .cms-faq details::details-content { height: 0; overflow: hidden; opacity: 0; transition: height 0.32s var(--ease, ease), content-visibility 0.32s allow-discrete, opacity 0.28s ease; } .wtm-lp .cms-faq details[open]::details-content { height: auto; opacity: 1; } } /* O sinal de + gira para virar −, em vez de trocar de caractere secamente. */ .wtm-lp .cms-faq summary::after { display: inline-block; transition: transform 0.28s var(--ease, ease); } .wtm-lp .cms-faq details[open] summary::after { /* Continua sendo "−" pelo conteúdo; a rotação é o que dá o movimento. */ transform: rotate(180deg); } /* --------------------------------------------------------------------------- Faixa de números — `.cms-stats` --------------------------------------------------------------------------- O bloco usava `.stat-band` do lp.css, que é uma grade de DUAS colunas desiguais (.9fr 1.1fr) feita para "um número grande de um lado, uma tabela do outro". Com N números iguais dentro, o resultado era dois números espremidos à esquerda e metade da faixa vazia. A referência mostra os números lado a lado, em colunas iguais, dentro de um painel de vidro — a mesma receita de `.split`, que é o painel do design system. Reusar a receita em vez de copiar os valores é o que mantém os dois iguais quando o design system mudar. --------------------------------------------------------------------------- */ .wtm-lp .cms-stats { position: relative; border-radius: 24px; padding: clamp(28px, 3vw, 46px); overflow: hidden; background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-dark); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08); display: grid; /* `auto-fit` em vez de um número fixo: o bloco aceita de 1 a 4 números, e uma grade de 4 colunas com 2 itens é exatamente o defeito que estamos saindo. */ grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; } /* A borda em gradiente do design system, como em `.split`. */ .wtm-lp .cms-stats::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient( 120deg, rgba(11, 108, 138, 0.6), transparent 40%, transparent 60%, rgba(134, 62, 243, 0.6) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .wtm-lp .cms-stats .stat { text-align: left; } /* `.stat-big` do lp.css chega em clamp(56px,11vw,108px) — dimensionado para UM número ocupando meia faixa. Numa fileira de três, 108px estoura a coluna e quebra no meio do algarismo. */ .wtm-lp .cms-stats .stat-big { font-size: clamp(38px, 5vw, 64px); line-height: 1; margin: 0; } .wtm-lp .cms-stats .stat-label { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-soft, rgba(236, 236, 238, 0.72)); } .wtm-lp .cms-stats .stat-note { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: rgba(236, 236, 238, 0.66); max-width: 42ch; } /* Sobre fundo claro o vidro some e o texto claro desaparece — a mesma armadilha que os cards da grade já tiveram. */ .wtm-lp .section--light .cms-stats, .wtm-lp .section--paper .cms-stats { background: #fff; border-color: rgba(16, 41, 56, 0.12); box-shadow: 0 18px 40px -32px rgba(16, 41, 56, 0.45); color: var(--slate); } .wtm-lp .section--light .cms-stats .stat-big, .wtm-lp .section--paper .cms-stats .stat-big { color: var(--slate); } .wtm-lp .section--light .cms-stats .stat-label, .wtm-lp .section--paper .cms-stats .stat-label { color: var(--violet); } .wtm-lp .section--light .cms-stats .stat-note, .wtm-lp .section--paper .cms-stats .stat-note { color: rgba(16, 41, 56, 0.72); } /* --------------------------------------------------------------------------- Fechamento — `.final-cta` sem caixa --------------------------------------------------------------------------- `.final-cta` do lp.css é a coluna centralizada com o brilho âmbar atrás do botão. Ele foi escrito para fechar uma página que já vinha com título e texto ACIMA dele, então não traz tipografia própria: aqui o bloco inteiro vive dentro da coluna, e o título e o apoio precisam do tratamento que a `.final-card` dava. --------------------------------------------------------------------------- */ .wtm-lp .cms-final { text-align: center; margin-top: 0; } .wtm-lp .cms-final h2 { font-size: clamp(30px, 5.2vw, 54px); max-width: 18ch; margin: 14px auto 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; } .wtm-lp .cms-final p.lead { margin: 18px auto 8px; max-width: 52ch; font-size: 17px; } /* O brilho fica atrás do BOTÃO, que é o último item da coluna — no lp.css ele é posicionado no centro do contêiner, e com o texto dentro isso o jogaria para o meio do parágrafo. */ .wtm-lp .cms-final::before { top: auto; bottom: 0; transform: translate(-50%, 30%); } /* --------------------------------------------------------------------------- Quadrado do ícone em seção CLARA --------------------------------------------------------------------------- `.icard .ic` do lp.css é `linear-gradient(150deg, rgba(226,145,74,.34), rgba(134,62,243,.22))` — âmbar sobre violeta. Sobre o vidro escuro isso lê como um brilho quente; sobre o card BRANCO da variante clara, o âmbar a 34% vira salmão, uma cor que não existe na paleta do design system. A variante clara usa a mesma dupla teal/violeta que o resto do sistema usa sobre papel — a borda do painel, o `.pill`, o `--violet-tint`. --------------------------------------------------------------------------- */ .wtm-lp .section--light .icard .ic, .wtm-lp .section--paper .icard .ic { background: linear-gradient(150deg, rgba(11, 108, 138, 0.14), rgba(134, 62, 243, 0.16)); border: 1px solid rgba(134, 62, 243, 0.18); color: var(--violet); } /* --------------------------------------------------------------------------- Seções vizinhas do MESMO tom não somam o espaçamento --------------------------------------------------------------------------- Cada seção traz `padding: var(--sp) 0`. Duas claras em sequência produzem o dobro do respiro no meio, e como não há troca de cor para explicar o vão, ele lê como espaço sobrando — foi o "espaços exagerados" entre a introdução e a grade de cards. Onde a cor MUDA o espaço duplo é o que separa as faixas, e por isso a regra vale só entre vizinhas do mesmo tom. ⚠️ E só quando a segunda pede `spacing=compact`. A primeira versão comprimia QUALQUER par de vizinhas do mesmo tom, e isso nasceu para emendar um caso específico — o hero partido em duas seções. Numa página escura inteira o efeito foi outro: todas as faixas coladas, sem respiro nenhum entre elas. A compressão é uma exceção declarada pelo bloco, não uma consequência da cor. --------------------------------------------------------------------------- */ .wtm-lp :is(.section--light, .section--paper) + :is(.section--light, .section--paper).cms-space-compact { padding-top: clamp(18px, 2vw, 34px); } .wtm-lp .wtm-dark + .wtm-dark.cms-space-compact { padding-top: clamp(18px, 2vw, 34px); } /* O FECHAMENTO da anterior, não só a abertura da seguinte. --------------------------------------------------------------------------- A regra acima reduzia só o `padding-top` de quem vem depois, e o vão continuou grande: medido na página, o hero fechava com 72px e o vídeo abria com 18 — 90px onde a referência tem cerca de 40. Um vão é feito por DOIS paddings, e cortar um deles corta metade do problema. `:has()` porque a informação está no vizinho seguinte, e não há classe no elemento que diga "sou seguido por alguém do meu tom". */ .wtm-lp :is(.section--light, .section--paper):has(+ :is(.section--light, .section--paper).cms-space-compact) { padding-bottom: clamp(18px, 2vw, 34px); } .wtm-lp .wtm-dark:has(+ .wtm-dark.cms-space-compact) { padding-bottom: clamp(18px, 2vw, 34px); } /* --------------------------------------------------------------------------- Iluminação vinda do layout — `--cms-glow` --------------------------------------------------------------------------- O `.wtm-dark` do lp.css traz uma receita FIXA de brilhos: violeta no alto à direita, teal embaixo à esquerda. É a iluminação das páginas escritas à mão, e serve de padrão — mas cada layout do Figma tem a sua, com outras posições, outros tamanhos e outras cores. A camada de tokens extraída do frame define `--cms-glow` com os gradientes daquele layout, já em porcentagem da própria seção. Aqui a seção escura passa a preferi-la, caindo no padrão quando a página não tem camada. O gradiente diagonal de base continua vindo dos tokens (`--d-base` e companhia), que a camada também rebinda — por isso ele fica FORA da variável: assim um layout que só muda a cor do fundo não precisa reescrever os brilhos. --------------------------------------------------------------------------- */ .wtm-lp .wtm-dark { background: var( --cms-glow, radial-gradient(120% 90% at 82% -10%, rgba(134, 62, 243, 0.2), transparent 55%), radial-gradient(110% 90% at -10% 115%, rgba(11, 108, 138, 0.26), transparent 58%) ), linear-gradient(165deg, var(--d-base) 0%, var(--d-deep) 60%, var(--d-deepest) 100%); } /* --------------------------------------------------------------------------- Vídeo — `.cms-video` --------------------------------------------------------------------------- Proporção reservada ANTES de a capa carregar: sem `aspect-ratio`, o bloco tem altura zero até a imagem chegar e o resto da página salta para baixo quando ela chega — o mesmo motivo pelo qual `media` exige largura e altura. O painel usa a receita de vidro do `.split`, que é como o design system delimita uma área de conteúdo dentro de uma faixa escura. --------------------------------------------------------------------------- */ .wtm-lp .cms-video { position: relative; margin: clamp(28px, 3vw, 44px) auto 0; max-width: 900px; aspect-ratio: 16 / 9; border-radius: var(--r-card, 16px); overflow: hidden; background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-dark); } .wtm-lp .cms-video iframe, .wtm-lp .cms-video img { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } .wtm-lp .cms-video-play { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; position: relative; } /* O botão herda a mesma transição do resto do site (`--ease`): o movimento é do design system, não deste bloco. */ .wtm-lp .cms-video-btn { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--violet); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .wtm-lp .cms-video-play:hover .cms-video-btn, .wtm-lp .cms-video-play:focus-visible .cms-video-btn { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9); } .wtm-lp .cms-video-caption { margin-top: 14px; text-align: center; font-size: 13.5px; color: rgba(236, 236, 238, 0.6); } .wtm-lp .section--light .cms-video-caption, .wtm-lp .section--paper .cms-video-caption { color: rgba(16, 41, 56, 0.6); } /* --------------------------------------------------------------------------- Nota de fonte da faixa de números --------------------------------------------------------------------------- No layout ela aparece UMA vez, embaixo, atribuindo os três números juntos. `items[].note` é a legenda de um número só; usá-la para a fonte repetiria a mesma atribuição três vezes. --------------------------------------------------------------------------- */ .wtm-lp .cms-stats-source { margin-top: clamp(18px, 2vw, 26px); font-size: 13px; color: rgba(236, 236, 238, 0.5); } .wtm-lp .section--light .cms-stats-source, .wtm-lp .section--paper .cms-stats-source { color: rgba(16, 41, 56, 0.55); } /* A moldura sem vídeo: mesmo desenho, sem cursor de clique. O placeholder do Figma é assim, e é o que a página mostra até alguém ligar o vídeo. */ .wtm-lp .cms-video-empty { display: block; width: 100%; height: 100%; position: relative; } .wtm-lp .cms-video-empty .cms-video-btn { opacity: 0.55; } /* --------------------------------------------------------------------------- Centralizar centraliza a CAIXA, não só o texto --------------------------------------------------------------------------- Medido na página real: numa seção `cms-align-center`, o título ficava com o centro em 365px e o parágrafo em 325 — 40px à esquerda. O texto estava centralizado dentro de uma caixa de 575px que, com `margin: 0`, ficava presa à borda esquerda de um contêiner de 655px. A regra anterior só alcançava filhos DIRETOS do `.wrap`, e o `rich_text` renderiza os parágrafos dentro de `.cms-prose`. Aqui vale para qualquer bloco de texto com largura limitada, em qualquer profundidade — que é o que "centralizado" significa para quem olha. --------------------------------------------------------------------------- */ .wtm-lp .cms-align-center .wrap :is(p, ul, ol, blockquote, dl, figure) { margin-inline: auto; } /* --------------------------------------------------------------------------- Faixas escuras seguidas são UMA faixa --------------------------------------------------------------------------- Uma faixa do Figma às vezes vira dois blocos — o hero e o vídeo, por exemplo, porque nenhum bloco de abertura tem slot de player. Cada seção pintava a própria iluminação, e o brilho recomeçando criava uma emenda visível bem no meio do que o layout mostra como uma coisa só. A continuação herda o fim do gradiente da anterior (`--d-deepest`), então as duas leem como uma superfície contínua. Só a primeira carrega os brilhos. --------------------------------------------------------------------------- */ .wtm-lp .wtm-dark + .wtm-dark { background: var(--d-deepest); } /* --------------------------------------------------------------------------- Ícone dos cards em seção clara --------------------------------------------------------------------------- No Figma o quadrado é um teal bem claro com o glifo em teal. A variante anterior misturava teal e violeta no fundo e pintava o glifo de violeta — perto do arquivo, lia como outro sistema de cor. O respiro embaixo também faltava: no layout há um vão claro entre o ícone e o título, e sem ele o cartão fica apertado. --------------------------------------------------------------------------- */ .wtm-lp .section--light .icard .ic, .wtm-lp .section--paper .icard .ic { background: var(--teal-tint, rgba(11, 108, 138, 0.1)); border: 1px solid rgba(11, 108, 138, 0.16); color: var(--teal, #0b6c8a); margin-bottom: 18px; } /* --------------------------------------------------------------------------- Rótulo de seção — sem o ponto, e centralizado quando a seção é --------------------------------------------------------------------------- `.eyebrow` do lp.css traz um ponto violeta antes do texto. É a assinatura das páginas escritas à mão, e os layouts do Figma não a têm: lá o rótulo é só texto em maiúsculas, espaçado, em teal. O ponto também quebrava a centralização. `.eyebrow` é `inline-flex`, então a caixa acompanha o conteúdo — mas o `margin-inline: auto` que centraliza os parágrafos não alcança um `inline-flex` dentro de um container em que o `text-align` já foi resolvido pelo pai. Com o ponto fora e o alinhamento herdado, o rótulo cai no eixo do título. --------------------------------------------------------------------------- */ .wtm-lp .eyebrow::before { content: none; } .wtm-lp .cms-align-center .eyebrow { display: block; text-align: center; } /* --------------------------------------------------------------------------- Cabeça de seção centralizada --------------------------------------------------------------------------- `.s-head` do lp.css tem `max-width: 780px` e nenhuma margem lateral — nas páginas escritas à mão as faixas são alinhadas à esquerda, então ele encosta ali e está certo. Numa faixa `align=center` isso produz um desencontro difícil de enxergar como causa: o rótulo e o título da CABEÇA centralizam dentro de 780px encostados à esquerda, enquanto o corpo — que vive fora do `.s-head` — centraliza no `wrap` inteiro. O texto parece centralizado e mesmo assim não bate com o que está embaixo dele. --------------------------------------------------------------------------- */ .wtm-lp .cms-align-center :is(.s-head, .cms-head) { margin-inline: auto; } /* --------------------------------------------------------------------------- Respiro entre o ícone e o texto do card --------------------------------------------------------------------------- A regra existia só para as faixas CLARAS, e o defeito não era da cor: era do card. Nas escuras o ícone continuava colado ao título, que é onde ele mais aparece — a maioria dos cards de ícone da página está em faixa escura. --------------------------------------------------------------------------- */ .wtm-lp .icard .ic, .wtm-lp .cms-grid .icard .ic { margin-bottom: 18px; } /* --------------------------------------------------------------------------- Botões do fechamento: lado a lado, do mesmo tamanho --------------------------------------------------------------------------- `.final-cta` do lp.css é uma COLUNA, e faz sentido no uso original: um botão só, embaixo de um parágrafo centralizado. Com dois, ela empilha um botão grande sobre um pequeno — tamanhos diferentes, um sobre o outro, no ponto da página que mais precisa parecer resolvido. Os botões vão para uma linha e passam a ter a MESMA caixa. `flex-wrap` mantém o empilhamento no celular, onde ele é o certo. --------------------------------------------------------------------------- */ .wtm-lp .cms-final .hero-cta, .wtm-lp .cms-final > .btn + .btn { margin-top: 0; } .wtm-lp .cms-final { gap: 18px; } .wtm-lp .cms-final .cms-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; } /* Mesma altura e mesma largura mínima: dois botões de tamanhos diferentes lado a lado leem como um principal e um acidente. */ .wtm-lp .cms-cta-row .btn { min-width: 190px; justify-content: center; padding-block: 14px; } @media (max-width: 520px) { .wtm-lp .cms-cta-row .btn { width: 100%; } } /* --------------------------------------------------------------------------- O número da faixa de estatísticas encolhe conforme o texto cresce --------------------------------------------------------------------------- `clamp(56px, 11vw, 108px)` é o tamanho de "2027" — quatro caracteres. Em "5% to 10%" ele quebra em duas linhas gigantes e come a coluna inteira, enquanto o rótulo abaixo fica minúsculo: o contraste de tamanho passa a ser ruído, e não hierarquia. O componente mede o texto e classifica; o CSS não tem como contar caracteres. --------------------------------------------------------------------------- */ .wtm-lp .stat-big[data-len="medio"] { font-size: clamp(38px, 6.5vw, 64px); } .wtm-lp .stat-big[data-len="longo"] { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; } /* --------------------------------------------------------------------------- TEXTO CLARO EM SEÇÃO CLARA — a variante que faltava, para TODOS os módulos. `lp.css` inteiro foi escrito para faixa escura: 63 seletores declaram cor quase-branca sem nenhum escopo de tema. Enquanto as páginas eram escritas à mão isso nunca apareceu, porque quem escrevia sabia em que faixa o módulo ia cair. O CMS quebrou essa premissa: o agente escolhe `bg` por seção, e a escolha é legítima — uma grade em `paper` é uma decisão de design correta. O sintoma era brutal e silencioso: título de card branco sobre papel, texto invisível, página publicada com um terço do conteúdo ilegível. Já tinha sido corrigido UMA VEZ para `.icard`, um módulo por vez, depois de alguém ver quebrado. `.lane-title` e `.node .chip` quebraram do mesmo jeito na página seguinte — porque a correção anterior tratou o caso, não a causa. Aqui está a causa tratada: a lista abaixo foi levantada MECANICAMENTE de `lp.css` (todo seletor com cor de luminosidade > 150 fora de escopo escuro), e `lp-css-light-variants.test.ts` falha o build se um seletor novo aparecer lá sem contraparte aqui. Sem esse teste, isto volta na terceira página. Três grupos, e a distinção importa: - texto que herda o fundo da seção → recebe cor de tinta - superfície de VIDRO (branco translúcido, desenhada para escuro) → recebe superfície clara, senão some no papel - painel ESCURO auto-contido (`.gap-wrap`, `.nflx`, `.ckt-water`, `.vs-foot`, `.ckt-foot`) e acento COLORIDO (`.btn`, `.ic`) → ficam de fora de propósito: lá o texto branco está certo, e "corrigir" criaria o bug inverso. --------------------------------------------------------------------------- */ /* Títulos e números: peso cheio. */ .wtm-lp :is(.section--light, .section--paper, .cms-inner-light, .cms-inner-paper) :is( .pillar h3, .coreq h2, .prob-head h2, .realq .to, .reassure b, .stat-big, .itable td:first-child, .backnote .bn-h, .final-card h2 ) { color: var(--slate); } /* Apoio: tinta suave, não preto. Achatar tudo na mesma cor destruiria a hierarquia que o módulo tinha no escuro — o problema é contraste, não é a diferença entre título e apoio. */ .wtm-lp :is(.section--light, .section--paper, .cms-inner-light, .cms-inner-paper) :is( .pillar p, .lane-title, .lane-foot, .hero .sub, .cta-note, .prob-lead, .realq .from, .realq .small, .reassure p, .stat-cap, .stat-from, .stat-from b, .urg-foot, .itable td, .itable th, .backnote p, .coreq .may span, .final-card p, .assure p span, .ckt-row p ) { color: rgba(16, 41, 56, 0.72); } /* Superfícies de vidro: no escuro elas separam do fundo; no claro ficam invisíveis e o card deixa de existir como objeto. ⚠️ A cor do texto vem JUNTO, na mesma regra, e isso não é organização — é correção. Na primeira tentativa eu troquei só a superfície e deixei o texto branco que o módulo declara: o chip do `lane_split` passou de branco sobre papel para branco sobre BRANCO, e a medição no preview deu contraste zero. Quem acrescentar um módulo a esta lista herda as duas metades de graça. */ .wtm-lp :is(.section--light, .section--paper, .cms-inner-light, .cms-inner-paper) :is(.node .chip, .itable, .pillar, .reassure, .ckt-row, .assure, .gap-pill) { background: #fff; border-color: rgba(16, 41, 56, 0.12); color: var(--slate); } /* O cabeçalho da tabela é teal translúcido: sobre papel vira quase branco e leva o texto branco junto. No claro ele precisa do teal cheio. */ .wtm-lp :is(.section--light, .section--paper, .cms-inner-light, .cms-inner-paper) .itable thead th { background: var(--slate); color: #fff; } /* Hover herdado do escuro pinta violeta translúcido — some no claro. */ .wtm-lp :is(.section--light, .section--paper, .cms-inner-light, .cms-inner-paper) :is(.pillar:hover, .ckt-row:hover, .itable tbody tr:hover) { background: rgba(16, 41, 56, 0.04); } /* --------------------------------------------------------------------------- Um card é uma composição FECHADA — o `align` da seção não entra nele. Medido: numa seção `align: center`, o texto do `.icard` centralizava e o ícone continuava à esquerda, 86px fora do eixo do próprio card. Nenhum dos dois estava errado sozinho; juntos são o defeito. No Figma o card é alinhado à esquerda inteiro — ícone, rótulo, título e corpo no mesmo eixo. A regra é essa: `align` governa o CABEÇALHO da seção (rótulo, título, lead), que é o que "centralizar a seção" significa para quem olha. O interior de um card, de uma trilha ou de uma tabela tem eixo próprio, e herdá-lo do pai produz exatamente o desencontro medido. --------------------------------------------------------------------------- */ .wtm-lp .cms-align-center :is(.icard, .pillar, .lane, .ckt-row, .case, .itable, .node), .wtm-lp .cms-align-center :is(.icard, .pillar, .lane, .ckt-row, .case, .itable, .node) :is(p, ul, ol, li, h3, h4, .small) { text-align: left; } /* O `margin-inline: auto` que centraliza parágrafos da seção não pode alcançar o parágrafo de dentro do card: ele centralizaria a CAIXA do texto num card cujo título começa na borda esquerda. */ .wtm-lp .cms-align-center :is(.icard, .pillar, .lane, .ckt-row, .case, .itable, .node) :is(p, ul, ol, blockquote, dl, figure) { margin-inline: 0; } /* --------------------------------------------------------------------------- Mesmo fundo = MESMO campo = UM vão, não dois. Medido na página real: o hero terminava e a faixa seguinte recomeçava com padding cheio dos dois lados — 120,72px + 120,72px = 241px de vazio entre o último botão do hero e o rótulo da faixa seguinte. Numa tela de 1440 isso é quase meia dobra de nada, e é o que faz a abertura ser lida como DUAS coisas empilhadas em vez de uma. A cor já era contínua (o gradiente da primeira termina em `--d-deepest`, exatamente o que a continuação recebe). O que partia a dobra era o vão. A continuação zera o próprio topo e o vão passa a ser o rodapé da anterior — um só, e proporcional ao `spacing` que quem compôs escolheu. Não é compressão: uma faixa `roomy` seguida de outra continua com 120px entre elas, que é um respiro de seção de verdade. ⚠️ Vale para os TRÊS pares (escuro, claro e papel). Uma versão anterior disto tratou só o escuro e comprimia por tom, o que achatou uma página inteira de faixas escuras — daí a regra ser por ADJACÊNCIA do mesmo fundo, e o zero ficar no topo da continuação, nunca no rodapé de ambas. --------------------------------------------------------------------------- */ /* Metade de cada lado, e não zero em cima. A primeira versão desta regra zerava o `padding-top` da continuação e deixava o vão inteiro na anterior. O total ficava certo (121px em vez de 241px), mas a EMENDA de tom cai exatamente na borda entre as duas — então o vazio todo ficava do lado de cima da linha e a faixa seguinte começava com o rótulo colado no topo. Foi o "falta de espaço interno superior". Um vão é feito por dois paddings. Dividido ao meio, a linha de tom cai no MEIO do respiro, que é o que ela deveria fazer desde o começo. */ .wtm-lp .section { --cms-band-gap: clamp(80px, 11vw, 150px); } .wtm-lp .cms-space-compact { --cms-band-gap: clamp(28px, 3vw, 44px); } .wtm-lp .cms-space-roomy { --cms-band-gap: clamp(72px, 8vw, 128px); } .wtm-lp .wtm-dark + .wtm-dark, .wtm-lp .section--light + .section--light, .wtm-lp .section--paper + .section--paper { padding-top: calc(var(--cms-band-gap) / 2); } .wtm-lp .wtm-dark:has(+ .wtm-dark), .wtm-lp .section--light:has(+ .section--light), .wtm-lp .section--paper:has(+ .section--paper) { padding-bottom: calc(var(--cms-band-gap) / 2); } /* --------------------------------------------------------------------------- Primeira dobra em DUAS colunas — o painel de prova ao lado do texto. É a maior perda de fidelidade que o catálogo tinha. Os layouts do Figma abrem com texto à esquerda e, à direita, um card de vidro com linhas curtas de prova. O `hero` só sabia ser uma coluna, então a abertura da página saía como uma faixa de texto seguida de outra faixa de texto — o "partida em duas". Nenhuma revisão resolvia, porque o vocabulário não tinha como dizer aquilo: o agente fazia a única coisa que o bloco permitia. Empilha no celular sem media query própria: `auto-fit` com um mínimo já quebra em uma coluna quando não cabem duas. --------------------------------------------------------------------------- */ .wtm-lp .cms-hero-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(32px, 4vw, 64px); align-items: center; } .wtm-lp .cms-hero-aside { border-radius: 18px; padding: clamp(20px, 2vw, 28px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -42px rgba(0, 0, 0, 0.85); } .wtm-lp .cms-hero-aside-title { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--teal-soft); margin-bottom: 16px; } .wtm-lp .cms-hero-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .wtm-lp .cms-hero-aside li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .wtm-lp .cms-hero-aside .ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(226, 145, 74, 0.34), rgba(134, 62, 243, 0.22)); color: #fff; } .wtm-lp .cms-hero-aside .ic svg { width: 19px; height: 19px; stroke-width: 1.7; } /* O texto ocupa a linha inteira e empurra o valor para a direita: é o que faz as quatro linhas lerem como uma tabela de prova, e não como quatro frases. */ .wtm-lp .cms-hero-aside-text { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; } .wtm-lp .cms-hero-aside-label { font-size: 14px; font-weight: 500; } .wtm-lp .cms-hero-aside-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--violet-soft); white-space: nowrap; } /* Variante clara — o vidro branco desapareceria sobre papel, e o teste de variantes exige superfície e cor na mesma regra. */ .wtm-lp :is(.section--light, .section--paper) .cms-hero-aside { background: #fff; border-color: rgba(16, 41, 56, 0.12); color: var(--slate); box-shadow: 0 18px 40px -32px rgba(16, 41, 56, 0.45); } .wtm-lp :is(.section--light, .section--paper) .cms-hero-aside li { background: rgba(16, 41, 56, 0.03); border-color: rgba(16, 41, 56, 0.1); } .wtm-lp :is(.section--light, .section--paper) .cms-hero-aside-title { color: var(--teal, #0b6c8a); } /* Um card é composição fechada: o `align` da seção não entra nele. */ .wtm-lp .cms-align-center .cms-hero-aside, .wtm-lp .cms-align-center .cms-hero-aside :is(p, ul, li, span) { text-align: left; } /* --------------------------------------------------------------------------- O reforço no fim da seção, e as duas variações de card. Levantado cruzando as 43 faixas descritas nos layouts do Figma com o que o catálogo sabia emitir. Três padrões apareciam repetidamente e nenhum tinha slot — então o agente fazia a única coisa possível: emitir uma FAIXA A MAIS para dizer o que o layout diz dentro de uma, ou achatar tudo em parágrafo. É a mesma causa da primeira dobra partida, repetida seis vezes. Quando o catálogo não expressa, a degradação é silenciosa e parece amadorismo. --------------------------------------------------------------------------- */ /* `.callout` do lp.css só tem tratamento dentro de seção escura. Como rodapé de seção ele vale em qualquer fundo, então a base neutra vem daqui. */ .wtm-lp .cms-footnote { margin-top: clamp(32px, 4vw, 52px); margin-inline: auto; max-width: 78ch; text-align: center; border-radius: 18px; padding: clamp(20px, 2.4vw, 30px); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; } .wtm-lp :is(.section--light, .section--paper) .cms-footnote { background: #fff; border: 1px solid rgba(16, 41, 56, 0.12); color: var(--slate); } /* O card DESTACADO no meio dos brancos — três layouts pedem exatamente isso. O tom sai do design system, não do agente: `accent` é booleano justamente para que a próxima página não traga um roxo que não existe na marca. */ .wtm-lp .icard.cms-card-accent { background: linear-gradient(168deg, rgba(134, 62, 243, 0.22), rgba(134, 62, 243, 0.08)); border-color: rgba(134, 62, 243, 0.42); } .wtm-lp :is(.section--light, .section--paper) .icard.cms-card-accent { background: linear-gradient(168deg, rgba(134, 62, 243, 0.12), rgba(134, 62, 243, 0.04)); border-color: rgba(134, 62, 243, 0.28); color: var(--slate); } /* Checklist dentro do card. Sem isto uma lista virava frase corrida, e a comparação que o layout faz item a item desaparecia no parágrafo. */ .wtm-lp .icard .cms-card-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; } .wtm-lp .icard .cms-card-list li { position: relative; padding-left: 22px; line-height: 1.45; color: rgba(236, 236, 238, 0.78); } .wtm-lp .icard .cms-card-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 7px; border-left: 2px solid var(--teal-soft); border-bottom: 2px solid var(--teal-soft); transform: rotate(-45deg); } .wtm-lp :is(.section--light, .section--paper) .icard .cms-card-list li { color: rgba(16, 41, 56, 0.78); } .wtm-lp :is(.section--light, .section--paper) .icard .cms-card-list li::before { border-color: var(--teal, #0b6c8a); } /* --------------------------------------------------------------------------- A primeira dobra é uma DOBRA — ela ocupa a janela. Sem altura mínima, o hero terminava acima do fim da tela e a faixa seguinte aparecia por baixo já no primeiro quadro. O efeito é o oposto do que uma abertura faz: em vez de dar um motivo para rolar, ela entrega o próximo assunto de graça e a página perde o momento de maior atenção. `svh` e não `vh`: no celular a barra do navegador some ao rolar, e `100vh` mede a tela SEM a barra — a dobra nasce alta demais e corta o CTA. `svh` é a altura menor, que é a que existe quando a pessoa chega. Mínimo, não fixo: um hero com painel de prova ao lado pode passar disso, e travar a altura cortaria o conteúdo. --------------------------------------------------------------------------- */ .wtm-lp { /* Altura do menu no topo, medida: 65px com o padding de repouso. Ele ocupa espaço no fluxo, então uma dobra de `100svh` inteira nasce 65px MAIS ALTA que a área visível — a próxima seção espia por baixo e o conteúdo, embora centralizado dentro da faixa, fica abaixo do centro do que a pessoa vê. Encolhe uns 10px quando a barra ganha `.scrolled`; a diferença não importa, porque a essa altura a pessoa já saiu da primeira dobra. */ --cms-nav-h: 65px; } .wtm-lp header.section:first-child { min-height: calc(100svh - var(--cms-nav-h)); display: grid; align-content: center; } /* ⚠️ NÃO declare largura no `.wrap` daqui. O `.wrap` do lp.css é `width: min(var(--maxw), calc(100% - var(--pad) * 2))` — é ESSA conta que cria a margem lateral da página inteira. Eu escrevi `width: 100%` para o `.wrap` crescer dentro de um `display: flex`, e o resultado foi a primeira dobra sangrando até a borda da janela: medido, 1494 de largura numa janela de 1509, com o texto colado no canto. `grid` + `align-content: center` centraliza verticalmente sem tocar na largura: o item mantém a própria conta e o `margin-inline: auto` faz o resto. */ /* --------------------------------------------------------------------------- Piso no vão entre faixas do mesmo fundo. A divisão pela metade acertou o caso comum, mas quando uma das vizinhas pede `spacing=compact` cada metade vira 14px e as duas faixas encostam — foi o "espaço superior e inferior interno muito pequeno". Um vão de seção tem um mínimo abaixo do qual ele deixa de ser vão. --------------------------------------------------------------------------- */ .wtm-lp .wtm-dark + .wtm-dark, .wtm-lp .section--light + .section--light, .wtm-lp .section--paper + .section--paper { padding-top: max(calc(var(--cms-band-gap) / 2), 34px); } .wtm-lp .wtm-dark:has(+ .wtm-dark), .wtm-lp .section--light:has(+ .section--light), .wtm-lp .section--paper:has(+ .section--paper) { padding-bottom: max(calc(var(--cms-band-gap) / 2), 34px); } /* --------------------------------------------------------------------------- O painel do `lane_split` em seção clara. O layout do Figma mostra este módulo como um painel com faixa clara em cima e área ESCURA embaixo — o contraste entre as duas trilhas é o que faz a comparação funcionar. Renderizado todo branco sobre papel, ele vira uma caixa clara dentro de outra caixa clara e a leitura se perde. O painel recebe a superfície escura mesmo em seção clara: é o que a referência mostra, e é onde este módulo funciona. --------------------------------------------------------------------------- */ .wtm-lp :is(.section--light, .section--paper) .split { background: linear-gradient(168deg, var(--d-base, #16465d), var(--d-deepest, #0b2734)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: clamp(22px, 3vw, 40px); color: var(--paper, #e9e9ec); } .wtm-lp :is(.section--light, .section--paper) .split :is(.lane-title, .lane-foot, .small), .wtm-lp :is(.section--light, .section--paper) .split .lane p { color: rgba(236, 236, 238, 0.78); } .wtm-lp :is(.section--light, .section--paper) .split .node .chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #fff; } /* --------------------------------------------------------------------------- A tipografia da primeira dobra, igual à do site. O hero do CMS é `header.section`, NÃO `.hero` — então nenhuma das regras que o lp.css escreve para `.hero h1` e `.hero .sub` o alcançava. O resultado: título no tamanho genérico de h1 e subtítulo no tamanho de PARÁGRAFO, sem respiro nenhum entre os três elementos, porque as margens também moram naquelas regras. Os valores saíram de medir a `/mor` a 1440px, que é o padrão apontado: h1 57,6px · entrelinha 1,06 sub 18,88px · entrelinha 1,6 · cor 88% · 22px acima rótulo → 18px até o título Contra o CMS, que tinha h1 48px e sub 16px em entrelinha 1,5: o subtítulo era 15% menor e lia como corpo de texto, não como apoio da manchete. --------------------------------------------------------------------------- */ .wtm-lp header.section .eyebrow { margin-bottom: 18px; } .wtm-lp header.section h1 { /* 4vw dá 57,6px a 1440 — o mesmo da referência —, e continua escalando. */ font-size: clamp(34px, 4vw, 58px); line-height: 1.06; letter-spacing: -0.02em; margin: 0; } .wtm-lp header.section .sub { /* 1,32vw dá 19,0px a 1440. O teto existe para o subtítulo não competir com a manchete em telas muito largas. */ font-size: clamp(17px, 1.32vw, 20px); line-height: 1.6; color: rgba(236, 236, 238, 0.88); max-width: 60ch; margin: 22px 0 0; } /* Centralizada, a caixa do subtítulo precisa se centralizar também — senão ela fica presa à esquerda dentro de um contêiner centralizado. */ .wtm-lp header.section.cms-align-center .sub { margin-inline: auto; } .wtm-lp header.section .hero-cta { margin-top: 32px; } /* Em faixa clara o mesmo apoio precisa de tinta, não de branco a 88%. */ .wtm-lp header.section:is(.section--light, .section--paper) .sub { color: rgba(16, 41, 56, 0.78); } /* =========================================================================== O TEMPLATE DE POST — do frame POST BLOG, agora com Auto Layout. TODO número aqui saiu da árvore do arquivo, lida pela rota `frame-facts`. Depois que a designer ativou o Auto Layout, o arquivo passou a carregar o FLUXO — direção, gap, padding, quem estica e quem encolhe — e o mapeamento para CSS virou mecânico: layoutMode → flex-direction, itemSpacing → gap, layoutSizing FILL/HUG → flex-grow / conteúdo. O sistema visual é mais simples do que eu havia suposto: FUNDO PRETO EM TUDO, e a separação vem de BORDA branca a 16%, não de superfícies mais claras. Cards, pílulas, avatar, bio e FAQ usam a mesma borda; só o card de destaque tem preenchimento — ciano a 10%. Grade: 1920 com padding lateral de 320 = 1280 de conteúdo. Corpo: índice 300 + vão 204 + texto 776. =========================================================================== */ .wtm-lp .cms-article { /* Nomeadas pelo PAPEL: o dia em que o Figma mudar o tom, muda aqui. */ --art-bg: #000000; --art-line: rgba(255, 255, 255, 0.16); --art-strong: #eaf2f5; --art-body: #c3d2d8; --art-muted: #93a9b3; --art-accent: #5fc2de; --art-radius: 12px; background: var(--art-bg); color: var(--art-body); } .wtm-lp .cms-article .wrap { width: min(1280px, calc(100% - 48px)); margin-inline: auto; } /* ---- abertura ---------------------------------------------------------- padding do frame: 144 topo, 320 lados, 64 base. */ .wtm-lp .cms-article-head { /* A folga até a régua é maior que a de dentro da abertura: no Figma a linha respira dos dois lados. 96 embaixo aqui, 96 em cima do conteúdo. */ padding: 144px 0 96px; background: var(--art-bg); /* A régua atravessa a tela INTEIRA. Eu a tinha contido na largura do `wrap`; no desenho ela vai de borda a borda, e contida ela lia como se fosse mais um elemento do conteúdo em vez da divisão entre duas faixas. */ border-bottom: 1px solid var(--art-line); } .wtm-lp .cms-article-head__grid { display: grid; /* Container HORIZONTAL, gap 64. */ gap: 64px; align-items: center; } @media (min-width: 1080px) { /* As duas colunas têm a MESMA largura: 608 + 64 + 608 = 1280. Eu tinha usado `1fr 608px`, que dava ao texto uma coluna maior do que o desenho. */ .wtm-lp .cms-article-head__grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Sem capa o título não ocupa a linha inteira: uma manchete de 1280px passa de 120 caracteres por linha e perde a força que o desenho lhe dá em 608. */ .wtm-lp .cms-article-head__grid:not(.cms-article-head__grid--split) .cms-article-head__text { max-width: 760px; } .wtm-lp .cms-article-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } .wtm-lp .cms-article-pills span { /* 125x37, raio 8, fundo preto com a borda padrão. */ display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--art-line); border-radius: 8px; background: var(--art-bg); color: var(--art-strong); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .wtm-lp .cms-article-head h1 { margin: 0; /* 46/55.2 = 1.2 de entrelinha. */ font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; font-weight: 600; color: var(--art-strong); } .wtm-lp .cms-article-byline { display: flex; align-items: center; gap: 14px; margin-top: 25px; } .wtm-lp .cms-article-byline__mark { /* 56x56, raio 28: círculo preto com a borda padrão. */ width: 56px; height: 56px; flex: 0 0 56px; border: 1px solid var(--art-line); border-radius: 50%; display: grid; place-items: center; background: var(--art-bg); color: var(--art-strong); font-size: 20px; font-weight: 600; } .wtm-lp .cms-article-byline__name { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 600; color: var(--art-strong); } .wtm-lp .cms-article-byline__meta { margin: 0; font-size: 13.5px; line-height: 1.65; font-weight: 300; color: var(--art-muted); } .wtm-lp .cms-article-cover { margin: 0; border-radius: var(--art-radius); overflow: hidden; } .wtm-lp .cms-article-cover img { display: block; width: 100%; height: auto; /* 608x342 = 16:9. Fixo para a abertura não mudar de altura a cada post. */ aspect-ratio: 16 / 9; object-fit: cover; } /* ---- índice + corpo ---------------------------------------------------- */ .wtm-lp .cms-article-main { width: min(1280px, calc(100% - 48px)); margin-inline: auto; padding-top: 96px; padding-bottom: 120px; } @media (min-width: 1080px) { .wtm-lp .cms-article-main--with-toc { display: grid; /* 300 + 204 + 776 = 1280, a soma exata do frame. O vão é elástico porque a soma só cabe a partir de ~1330px: com 204 fixo quem cedia era o CORPO, e a medida de linha do desenho ia junto. */ grid-template-columns: 300px minmax(0, 776px); gap: clamp(48px, 12vw, 204px); /* ⚠️ SEM `align-items: start`. Com ele o