/* public/sites/site.css
Folha dos sites publicados. Vive em public/ (estático, servido por URL) em
vez de importada como módulo: é a mesma folha que a página pública carrega
via (app/%5Fsites/[host]/layout.tsx) e que o iframe do canvas do
editor carrega via canvas.styles (components/sites/EditorCanvas.tsx) — uma
origem só, alcançável dos dois jeitos.
TODO seletor vive sob .site-root — sem isso as classes vazam pro dashboard,
que compartilha o mesmo documento no preview. Nenhuma cor literal: tudo
deriva dos tokens que themeToCssVars injeta. */
.site-root {
/* Escala tipográfica derivada de --site-escala (0.9 | 1 | 1.15).
Ancorada em 16px literal, NÃO em 1rem: o dashboard roda html/body a
14px (app/globals.css, densidade de UI compacta) e a página pública
nasce dentro do mesmo (app/layout.tsx envolve app/%5Fsites).
1rem aqui já não é 16px — é 14px — e a escala inteira saía 12.5% menor
que o pretendido (compacto batia 10.7px, ilegível). rem é relativo à
RAIZ do documento, então setar font-size em .site-root não ajudaria:
só um valor em px quebra a dependência do 14px do app interno. */
--s-base: calc(16px * var(--site-escala, 1));
--s-display-1: calc(var(--s-base) * 2.75);
--s-display-2: calc(var(--s-base) * 1.9);
--s-display-3: calc(var(--s-base) * 1.25);
--s-corpo: calc(var(--s-base) * 1.05);
--s-mini: calc(var(--s-base) * 0.85);
/* Ritmo: boutique respira. Seção tem o dobro do padding de um site comum. */
--s-secao-y: calc(var(--s-base) * 5);
--s-gap: calc(var(--s-base) * 1.5);
--s-largura: 1120px;
/* Cantos generosos — a assinatura mais visível da direção. */
--s-raio: 20px;
--s-raio-sm: 14px;
/* Superfície secundária: a cor primária diluída, sem precisar de um token
novo. color-mix mantém a coerência com qualquer paleta escolhida. */
--s-superficie: color-mix(in srgb, var(--site-primaria) 7%, var(--site-fundo));
--s-borda: color-mix(in srgb, var(--site-primaria) 16%, var(--site-fundo));
/* Superfície de campo/card. `.site-bloco` redefine logo abaixo, ancorando
em `--s-bloco-fundo` para acompanhar a alternância par/ímpar das faixas —
e é essa versão que vale numa página de blocos.
Este valor aqui é o que sustenta a página de CANVAS, que não tem
`.site-bloco` em lugar nenhum: sem ele, `background: var(--s-card-fundo)`
nos campos do formulário resolvia para nada, a declaração virava inválida
e o fundo caía no `transparent` inicial — campo sem caixa visível em toda
LP feita no GrapesJS. */
--s-card-fundo: color-mix(in srgb, var(--site-primaria) 12%, var(--site-fundo));
background: var(--site-fundo);
color: var(--site-texto);
font-family: var(--site-fonte-corpo), system-ui, sans-serif;
font-size: var(--s-corpo);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
.site-root h1,
.site-root h2,
.site-root h3 {
font-family: var(--site-fonte-display), Georgia, serif;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 calc(var(--s-base) * 0.75);
text-wrap: balance;
}
.site-root h1 { font-size: var(--s-display-1); }
.site-root h2 { font-size: var(--s-display-2); }
.site-root h3 { font-size: var(--s-display-3); }
.site-root p { margin: 0 0 var(--s-base); }
.site-root img { max-width: 100%; height: auto; display: block; }
/* Mesma contenção da regra do `img` acima, para as duas caixas que a folha
deixava de fora. O bloco `video` do núcleo do GrapesJS grava
`#id{width:615px;height:350px}` SEM media query (o dono diagrama no device
Desktop), e nada nesta folha continha isso: num celular de 360px o vídeo
estourava a viewport e dava scroll horizontal na LP INTEIRA — não só no
vídeo. A superfície primária destas páginas é o celular (tráfego de
anúncio), então isso é dano na tela que mais importa.
`max-width` resolve sem depender de especificidade: ele limita o valor
computado de QUALQUER `width`, venha de onde vier — inclusive do
`#id{width:615px}` (1,0,0), que nenhum seletor desta folha venceria.
Sem `height:auto` de propósito, ao contrário do `img`: iframe não tem
proporção intrínseca, então `auto` cairia nos 150px de default do navegador.
O vídeo do bloco nativo fica com a altura fixa que o dono escolheu, contido
na largura — desproporcional, mas dentro da tela. Nosso `ab-embed` casa este
seletor mas não sofre isso: ele carrega `aspect-ratio:16/9` inline no próprio
iframe, então a altura acompanha a largura sozinha.
Especificidade igual à do `img` — (0,1,1), sem o `:where()` da regra de cor
de link lá embaixo. O `:where()` existe para o TEMA (uma opinião de
aparência) perder para marcação com opinião própria; contenção de layout não
é opinião de aparência, e afrouxar aqui devolveria o scroll horizontal a
qualquer HTML colado com uma classe. Quem precisa escapar escapa como o
`.site-hero-img` já escapa da regra do `img`: com um seletor mais específico
dentro desta mesma folha. */
.site-root iframe,
.site-root video { max-width: 100%; }
/* Medida de leitura (62ch) só faz sentido pra prosa correndo a largura do
bloco. Precisa de mais especificidade que `.site-bloco > *` (que também
cabe num
, via seletor universal) — sem isso o parágrafo perdia a
medida e corria os 1120px inteiros do container (I1 da revisão). */
.site-root .site-bloco p { max-width: 62ch; }
/* Cada bloco é uma faixa de largura total; o conteúdo é que fica contido.
O padding horizontal da seção já entrega essa coluna centralizada — os
filhos não precisam de margin:auto próprio. Isso importa porque um
filho estreito (ex.:
de 42ch) com margin:auto centraliza a
PRÓPRIA caixa, não o conteúdo dentro da coluna: ao lado de um