/** * Página genérica — Política de Privacidade, termos e afins. * * O `page.php` sempre emitiu `.artigo` / `.artigo__titulo` / `.corpo`, mas quem * desenhava essas classes era `assets/editorial-especial/`, removido em * 13/08/2026 junto com o template do longform. Desde então a página subia com * reset e nada mais: título do tamanho do corpo (o `base.css` zera `font-size` * dos `h*`), texto de borda a borda e tabela sem grade. * * Esta folha é o mínimo para o conteúdo do editor ficar legível. Não há PSD: * tudo sai dos tokens em `generico/css/tokens.css`, derivados da * /noticia-interna. * * Entra depois de `fontes · tokens · base · topo · rodape`. */ /* --------------------------------------------------- fundo próprio da página */ /* * O branco pedido. Vai no `main` e não no `body`: o topo e o rodapé * compartilhados dependem do creme de `--cor-fundo`, e pintar o `body` de * branco deixaria a barra do menu sem separação da página. Mesma solução da * /noticia-interna. */ main { background: var(--g-fundo); } /* ------------------------------------------------------------------ artigo */ .artigo { width: min(100% - 2 * var(--gutter), var(--g-largura-artigo)); margin-inline: auto; padding-block: var(--espaco-6) var(--espaco-7); font-size: var(--g-texto-corpo); line-height: var(--g-lh-corpo); color: var(--g-cor-corpo); } .artigo__titulo { font-size: var(--g-texto-titulo); font-weight: 800; line-height: 1.17; letter-spacing: -0.01em; color: var(--g-cor-titulo); text-wrap: balance; } /* ------------------------------------------------------------- texto corrido */ .corpo { margin-top: var(--espaco-5); } /* O `base.css` zera toda margem; o ritmo vertical volta por aqui, num lugar só. */ .corpo > * + * { margin-top: var(--espaco-3); } .corpo p { text-wrap: pretty; } /* * Sem `text-align: justify` (que a matéria usa): documento jurídico tem muita * sigla e número, e o justificado abre rios brancos entre palavras curtas. */ /* * O `h1` entra na lista de propósito. O texto da política foi colado no editor * com os títulos numerados ("1. QUEM SOMOS…") como H1 — são 18 deles, e sem * esta regra saem do tamanho do corpo, porque o `base.css` zera `font-size` dos * `h*`. Aqui eles ganham o degrau de H2, que é o papel que exercem. * * Isso é remendo visual, não conserto: a hierarquia continua com 19 `h1` na * página (o do template mais os 18 do texto). A correção é trocar o bloco para * Título 2 no admin — ver `docs/pendencias.md`. */ .corpo :is(h1, h2, h3, h4) { margin-top: var(--espaco-5); font-weight: 800; line-height: 1.2; color: var(--g-cor-titulo); } .corpo :is(h1, h2) { font-size: var(--g-texto-h2); } .corpo :is(h3, h4) { font-size: var(--g-texto-h3); } .corpo :is(ul, ol) { padding-inline-start: var(--espaco-4); } .corpo li + li { margin-top: var(--espaco-2); } .corpo strong, .corpo b { font-weight: 700; } .corpo a { color: var(--g-cor-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } /* Alvo de toque: link solto no meio do parágrafo não dá para engordar sem quebrar a entrelinha, mas link em linha própria sim. */ .corpo p > a:only-child { display: inline-block; min-height: 44px; padding-block: 0.6rem; } /* ----------------------------------------------------------------- tabelas */ /* * A política inteira é feita de tabelas de três colunas (finalidade · dados · * base legal). Sem grade elas viram um bloco só de texto. * * Quebra dentro da célula em vez de `display: block` + `overflow-x: auto` na * tabela: o `display: block` apaga o papel de tabela para o leitor de tela, e a * regra de "sem scroll horizontal" se resolve deixando a célula quebrar a * palavra longa (URL, número de lei) por conta própria. * * `break-word` e não `anywhere`, com `hyphens` junto: a 390px a coluna fica com * ~14 caracteres e o `anywhere` partia "Compartilhamento" no meio, sem hífen. * O par quebra só quando a palavra não cabe sozinha, e aí com hífen — o * `lang="pt-BR"` do `` dá ao navegador o dicionário certo. */ .corpo table { width: 100%; border-collapse: collapse; font-size: var(--g-texto-legenda); line-height: 1.45; } .corpo :is(th, td) { padding: var(--espaco-2); border: 1px solid var(--cor-borda); text-align: start; vertical-align: top; overflow-wrap: break-word; hyphens: auto; } .corpo th { background: var(--g-cor-tabela-cabecalho); font-weight: 700; color: var(--g-cor-titulo); } /* Primeira linha em negrito serve de cabeçalho mesmo sem `` — é como o editor colou o conteúdo. */ .corpo thead td { background: var(--g-cor-tabela-cabecalho); font-weight: 700; } /* -------------------------------------------------------------- responsivo */ @media (width < 48rem) { .artigo { padding-block: var(--espaco-5) var(--espaco-6); } .corpo :is(th, td) { padding: var(--espaco-1) var(--espaco-2); } }