/* ═══════════════════════════════════════════════════════════════════════════════ Blocos de diagramação da notícia — Cosmonauta Geek, 14/09/2026. Até aqui o corpo da notícia (`noticias.texto`) já era HTML cru, impresso sem escape em noticias/noticia.php — só que a página estilizava exatamente TRÊS coisas dentro dele:

, e . Escrever um

ou uma citação dava um texto com a cara padrão do navegador: preto sobre fundo escuro, sem respiro. Ou seja: dava para escrever bonito, mas não para APARECER bonito. Esta folha é o vocabulário. Cada bloco tem um nome, e é o mesmo nome no editor do gerenciador, no prompt da IA e no pacote que chega pronto para publicar. A MESMA folha é usada pela prévia do gerenciador. É de propósito: prévia com estilo próprio é prévia que mente, e o dia em que as duas divergirem ninguém vai perceber — a prévia continua bonita. Paleta e medidas vêm da própria página de notícia (noticias/noticia.php): fundo var(--cg-card) · texto var(--cg-txt-2) · título var(--cg-txt-2) · apagado var(--cg-muted) linha var(--cg-linha-2) · cartão var(--cg-card) · link var(--cg-link) · acento var(--cg-azul) → var(--cg-ciano) coluna de leitura: 900px ═══════════════════════════════════════════════════════════════════════════════ */ .article-body { /* variáveis locais: quem quiser um tema por notícia troca só isto */ --n-fundo: var(--cg-card); --n-cartao: var(--cg-card); --n-linha: var(--cg-linha-2); --n-texto: var(--cg-txt-2); --n-forte: var(--cg-txt-2); --n-apagado: var(--cg-muted); --n-link: var(--cg-link); --n-a1: var(--cg-azul); --n-a2: var(--cg-ciano); } /* ── Abertura ─────────────────────────────────────────────────────────────── O primeiro parágrafo de uma notícia carrega o peso todo. Maior e mais claro, com um fio de acento à esquerda. */ .article-body .n-lead { font-size: 1.16em; line-height: 1.7; color: var(--n-forte); border-left: 3px solid var(--n-a2); padding-left: 18px; margin: 0 0 1.6em; } /* ── Seções ───────────────────────────────────────────────────────────────── h2 é a divisão de assunto; h3 é o subitem dentro dela. */ .article-body h2 { font-size: 1.45em; font-weight: 800; line-height: 1.25; color: var(--n-forte); margin: 2em 0 0.7em; padding-bottom: 0.4em; border-bottom: 1px solid var(--n-linha); } .article-body h2::before { /* o fio de acento no começo do título, curto, sem virar enfeite */ content: ''; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--n-a1), var(--n-a2)); vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } .article-body h3 { font-size: 1.12em; font-weight: 700; color: var(--n-forte); margin: 1.7em 0 0.5em; } /* ── Listas ─────────────────────────────────────────────────────────────── */ .article-body ul, .article-body ol { margin: 0 0 1.3em 1.3em; } .article-body li { margin-bottom: 0.5em; } .article-body ul { list-style: none; margin-left: 0; } .article-body ul > li { position: relative; padding-left: 20px; } .article-body ul > li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--n-a2); } /* ── Figura ───────────────────────────────────────────────────────────────── Imagem com legenda e crédito. O crédito importa: imagem de terceiro sem crédito é problema, e o lugar do crédito é COLADO na imagem, não no rodapé. */ .article-body figure { margin: 1.8em 0; } .article-body figure img { display: block; width: 100%; border-radius: 8px; margin: 0; } .article-body figcaption { font-size: 0.8em; line-height: 1.55; color: var(--n-apagado); padding: 9px 2px 0; border-top: 1px solid var(--n-linha); margin-top: 9px; } .article-body figcaption .n-credito { display: block; font-size: 0.92em; opacity: 0.75; margin-top: 3px; } /* Figura estreita, encostada num lado, com o texto correndo ao lado. No celular ela volta a ocupar a largura toda — texto de 15 caracteres por linha ao lado de uma imagem não é diagramação, é castigo. */ .article-body .n-figura--lado { max-width: 300px; } @media (min-width: 720px) { .article-body .n-figura--lado { float: right; margin: 0.4em 0 1.2em 24px; } .article-body .n-figura--lado.n-figura--esq { float: left; margin: 0.4em 24px 1.2em 0; } } /* ── Galeria ──────────────────────────────────────────────────────────────── 2, 3 ou 4 imagens lado a lado, com legenda comum embaixo. */ .article-body .n-galeria { margin: 1.8em 0; } .article-body .n-galeria-imgs { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); } .article-body .n-galeria--3 .n-galeria-imgs { grid-template-columns: repeat(3, 1fr); } .article-body .n-galeria--4 .n-galeria-imgs { grid-template-columns: repeat(4, 1fr); } .article-body .n-galeria img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; margin: 0; aspect-ratio: 3/4; } .article-body .n-galeria--larga img { aspect-ratio: 16/9; } .article-body .n-galeria figcaption { margin-top: 10px; } @media (max-width: 560px) { .article-body .n-galeria--3 .n-galeria-imgs, .article-body .n-galeria--4 .n-galeria-imgs { grid-template-columns: repeat(2, 1fr); } } /* ── Figura em pé ─────────────────────────────────────────────────────────── Arte-chave, pôster, capa de volume: imagem mais alta do que larga. A regra geral da figura é `width:100%`, e numa coluna de 820px uma imagem 2:3 vira 1.200px de altura — uma tela inteira de rolagem gasta numa imagem só. Aqui ela fica no meio da coluna, num tamanho que ainda se olha inteiro sem rolar. (Diferente de .n-figura--lado, que é a miniatura flutuando ao lado do texto.) */ .article-body .n-figura--retrato { max-width: 520px; margin-left: auto; margin-right: auto; } /* ── Vídeo ────────────────────────────────────────────────────────────────── Player do YouTube, para trailer e teaser oficial. O