título
excerpt
…
excerpt
; zerando aqui e controlando pelo irmão adjacente, o espaço
entre blocos passa a ser previsível e proporcional ao tipo (em). */
.post-body p,
.post-body ul,
.post-body ol,
.post-body dl,
.post-body blockquote,
.post-body figure,
.post-body pre,
.post-body table {
margin-bottom: 0;
}
.post-body > * + * {
margin-top: 1.4em;
}
/* Títulos internos precisam de mais ar ANTES que depois — é o que
agrupa o título com o parágrafo que ele abre. */
.post-body > h2 + *,
.post-body > h3 + *,
.post-body > h4 + * {
margin-top: 0.8em;
}
.post-body h2,
.post-body h3,
.post-body h4 {
color: var(--text-primary);
line-height: 1.25;
letter-spacing: -0.3px;
text-wrap: balance;
}
.post-body > h2 {
font-size: clamp(1.45rem, 4vw, 1.8rem);
margin-top: 2.2em;
margin-bottom: 0;
}
.post-body > h3 {
font-size: clamp(1.15rem, 3vw, 1.35rem);
margin-top: 1.9em;
margin-bottom: 0;
}
.post-body > h4 {
font-size: 1.05rem;
margin-top: 1.7em;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-green);
}
/* Primeiro elemento não precisa do respiro de topo — o cabeçalho do
post já deu o espaço. */
.post-body > :first-child {
margin-top: 0;
}
/* ── Parágrafo de abertura (class="post-lead", usado em todos os 30
artigos do seed) ── */
.post-body .post-lead {
font-size: 1.2rem;
line-height: 1.65;
color: var(--text-primary);
font-weight: 400;
}
/* ── Links dentro do texto ──
O global.css faz `a { color: inherit; text-decoration: none }`, o que
deixa link de artigo invisível. Num blog isso é problema de usabilidade
e de SEO (link interno que ninguém vê ninguém clica). */
.post-body a:not(.cta-button) {
color: var(--accent-green);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--accent-green) 45%, transparent);
}
.post-body a:not(.cta-button):hover {
color: var(--accent-brown);
text-decoration-color: currentColor;
}
.post-body strong,
.post-body b {
color: var(--text-primary);
font-weight: 600;
}
.post-body em,
.post-body i {
font-style: italic;
}
.post-body mark {
background: color-mix(in srgb, var(--accent-green) 22%, transparent);
color: var(--text-primary);
padding: 0 4px;
border-radius: 3px;
}
.post-body hr {
border: 0;
height: 1px;
background: var(--border);
margin-block: 2.5em;
}
/* ═══════ CITAÇÕES ═══════ */
.post-body blockquote {
border-left: 3px solid var(--accent-green);
padding: 4px 0 4px 24px;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-primary);
}
.post-body blockquote p {
color: inherit;
font-size: inherit;
}
.post-body blockquote > * + * {
margin-top: 0.8em;
}
/* .post-quote é a variante "destaque" da allowlist do sanitize.mjs:
citação de respiro, centralizada, sem a barra lateral — serve pra
quebrar o ritmo no meio de um texto longo. */
.post-body .post-quote {
border-left: 0;
padding: 32px 0;
margin-block: 2em;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.25rem, 3.5vw, 1.6rem);
line-height: 1.45;
color: var(--accent-brown);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* ═══════ CALLOUT ═══════
Também é o fallback visível do render.mjs quando um embed é inválido
("Conteúdo incorporado indisponível") — por isso precisa parecer um
aviso, e não texto solto. */
.post-body .post-callout {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-left: 4px solid var(--accent-green);
border-radius: var(--radius);
padding: 20px 24px;
color: var(--text-secondary);
font-size: 1rem;
}
/* ═══════ LISTAS ═══════ */
.post-body ul,
.post-body ol {
padding-left: 1.4em;
}
.post-body li + li {
margin-top: 0.5em;
}
.post-body li::marker {
color: var(--accent-green);
}
/* ul.checklist: o global.css já dá o "✓" e o padding; dentro de um
artigo a borda embaixo de cada item (que funciona bem em LP) vira
ruído de leitura, então some. */
.post-body .checklist {
padding-left: 0;
}
.post-body .checklist li {
border-bottom: 0;
padding: 6px 0 6px 32px;
}
.post-body .checklist li + li {
margin-top: 0;
}
.post-body dt {
font-weight: 600;
color: var(--text-primary);
}
.post-body dd {
margin-left: 1.4em;
}
/* ═══════ CONTENÇÃO DE MÍDIA E BLOCOS LARGOS ═══════
Regra: nada do conteúdo dela pode estourar a largura da página. */
.post-body img,
.post-body video,
.post-body iframe {
max-width: 100%;
height: auto;
display: block;
}
.post-body img {
border-radius: var(--radius);
margin-inline: auto;
}
/* iframe solto (o embed do Spotify não vem embrulhado em .embed-16x9) */
.post-body > iframe {
width: 100%;
border: 0;
border-radius: var(--radius);
}
.post-body figure {
margin-inline: 0;
}
.post-body figcaption {
margin-top: 10px;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-muted);
text-align: center;
}
/* Tabela vira bloco rolável: sem isso, uma tabela de 6 colunas colada do
Word alarga a página inteira no celular. O scroll fica NA tabela. */
.post-body table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
font-size: 0.95rem;
}
.post-body th,
.post-body td {
border: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.post-body th {
background: var(--bg-secondary);
color: var(--text-primary);
font-weight: 600;
}
.post-body caption {
caption-side: bottom;
padding-top: 10px;
font-size: 0.85rem;
color: var(--text-muted);
}
.post-body pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px;
font-size: 0.9rem;
line-height: 1.6;
}
.post-body pre code {
background: none;
padding: 0;
font-size: inherit;
}
.post-body code,
.post-body kbd {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
font-size: 0.9em;
/* URLs e caminhos longos em quebram em vez de empurrar a página. */
overflow-wrap: anywhere;
}
/* ═══════ EMBEDS 16:9 (YouTube e VTurb) ═══════
HTML vindo de lib/embeds.mjs:
aspect-ratio já reserva a altura ANTES do player carregar — sem isso o
conteúdo abaixo pula quando o iframe monta (CLS, que o Core Web Vitals
pune num domínio que roda anúncio). O position:absolute no filho é o
que garante que o player preencha a caixa, inclusive o custom element
do VTurb, que sem display:block seria inline e teria altura zero. */
.post-body .embed-16x9 {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--accent-brown); /* placeholder enquanto o player carrega */
}
.post-body .embed-16x9 > iframe,
.post-body .embed-16x9 > vturb-smartplayer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
}
/* ═══════ BOTÕES DE CTA ═══════
HTML exato gerado por lib/render.mjs → ctaHtml():
QUERO …
… ← ausente no CTA de WhatsApp
É o elemento que converte pros produtos dela (Desatando Nós, Mente
Detetive, Masterclass Ciúmes, livro, WhatsApp do Núcleo), então tem
presença deliberadamente maior que qualquer outra coisa do artigo:
ocupa a largura da coluna, é centralizado e tem folga vertical dos
dois lados pra não ser lido como "mais um parágrafo". */
.post-body .cta-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
max-width: 420px; /* mesmo teto do .btn-primary do global.css */
/* 56px > 44px, o alvo de toque mínimo recomendado (WCAG 2.5.8);
min-height e não height porque o sublabel pode quebrar em 2 linhas
no celular. */
min-height: 56px;
margin: 2.6em auto;
padding: 16px 28px;
border-radius: var(--radius);
text-align: center;
text-decoration: none;
font-family: var(--font-heading);
transition: var(--transition);
}
.post-body .cta-button--primary {
background-color: var(--accent-green);
color: var(--white);
border: 2px solid var(--accent-green);
}
.post-body .cta-button--primary:hover {
background-color: var(--accent-brown);
border-color: var(--accent-brown);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-brown) 25%, transparent);
}
.post-body .cta-button--secondary {
background-color: transparent;
color: var(--accent-green);
border: 2px solid var(--accent-green);
}
.post-body .cta-button--secondary:hover {
background-color: var(--accent-green);
color: var(--white);
transform: translateY(-2px);
}
.post-body .cta-label {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
line-height: 1.3;
color: inherit;
}
.post-body .cta-sublabel {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: none;
line-height: 1.4;
color: inherit;
opacity: 0.85;
}
/* ═══════ ÍNDICE DO BLOG / NEWSLETTER ═══════
blog.mjs → postCard(): com img,
.badge, h3 e