/* =============================================================
CortexIA Blog — Custom CSS
Componentes do design system não cobertos por theme.json.
Use estas classes em blocos HTML, group blocks ou patterns.
Tokens vêm via var(--wp--preset--*) gerados pelo theme.json.
============================================================= */
/* -------------------------------------------------------------
* 1. Tokens auxiliares — espelham nomes do design system para
* código copiado direto dos componentes JSX. Aliases sobre
* o que o theme.json já expõe.
* ------------------------------------------------------------- */
:root {
/* Valores fixos (não dependem do theme.json/Kadence) — modo claro */
--cx-bg-canvas: #F4EEE3;
--cx-bg-surface: #FFFFFF;
--cx-bg-muted: #EDE7DB;
--cx-bg-subtle: #F9F5EF;
--cx-text-primary: #1A130D;
--cx-text-secondary: #3D2E21;
--cx-text-muted: #7A6651;
--cx-text-xmuted: #A8927A;
--cx-border-subtle: rgba(26,19,13,.07);
--cx-border-default: rgba(26,19,13,.13);
--cx-border-strong: rgba(26,19,13,.28);
--cx-accent: #CB551A;
--cx-accent-hover: #B44916;
--cx-accent-subtle: rgba(203, 85, 26, 0.10);
--cx-cluster-criativos: #E07332;
--cx-cluster-ferramentas: #1C7A57;
--cx-cluster-agentes: #C81E62;
--cx-success: #0E6E55;
--cx-warning: #D98A10;
--cx-danger: #B8321A;
--cx-info: #1C7A57;
--cx-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--cx-font-body: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--cx-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
--cx-amber-gradient: linear-gradient(150deg, #F2A92B 0%, #D9591A 55%, #9E2B0E 100%);
--cx-pinheiro-gradient: linear-gradient(150deg, #2BB37D 0%, #1C7A57 52%, #0F4D3A 100%);
--cx-magenta-gradient: linear-gradient(150deg, #E83A7D 0%, #C81E62 52%, #6E1330 100%);
--cx-shadow-1: 0 1px 3px rgba(26,19,13,.07), 0 1px 2px rgba(26,19,13,.05);
--cx-shadow-2: 0 4px 12px rgba(26,19,13,.09), 0 1px 3px rgba(26,19,13,.06);
--cx-shadow-3: 0 8px 24px rgba(26,19,13,.11), 0 2px 6px rgba(26,19,13,.07);
--cx-shadow-4: 0 20px 48px rgba(26,19,13,.14), 0 4px 12px rgba(26,19,13,.08);
--cx-ring-focus: 0 0 0 3px rgba(203,85,26,.35);
--cx-radius-sm: 4px;
--cx-radius-md: 8px;
--cx-radius-lg: 12px;
--cx-radius-xl: 20px;
--cx-radius-2xl: 28px;
--cx-radius-full: 9999px;
}
/* -------------------------------------------------------------
* 2. Dark mode — alterna via classe .cx-dark no .
* ------------------------------------------------------------- */
html.cx-dark {
--cx-bg-canvas: #1C1610;
--cx-bg-surface: #261D15;
--cx-bg-muted: #1C1610;
--cx-bg-subtle: #221911;
--cx-text-primary: #EDE0CF;
--cx-text-secondary: #C4A988;
--cx-text-muted: #8A7260;
--cx-text-xmuted: #5A4A38;
--cx-border-subtle: rgba(240,232,220,.07);
--cx-border-default: rgba(240,232,220,.13);
--cx-border-strong: rgba(240,232,220,.28);
--cx-accent: #E07332;
--cx-accent-hover: #F08744;
--cx-accent-subtle: rgba(224,115,50,.12);
--cx-cluster-criativos: #F08744;
--cx-cluster-ferramentas: #2BB37D;
--cx-cluster-agentes: #E83A7D;
--cx-success: #1B9E6E;
--cx-warning: #F2A92B;
--cx-danger: #E04A2A;
--cx-info: #2BB37D;
--cx-shadow-1: 0 0 0 1px rgba(240,232,220,.08);
--cx-shadow-2: 0 0 0 1px rgba(240,232,220,.10), 0 4px 16px rgba(0,0,0,.28);
--cx-shadow-3: 0 0 0 1px rgba(240,232,220,.12), 0 8px 28px rgba(0,0,0,.36);
--cx-shadow-4: 0 0 0 1px rgba(240,232,220,.14), 0 16px 48px rgba(0,0,0,.46);
--cx-ring-focus: 0 0 0 3px rgba(224,115,50,.4);
background: var(--cx-bg-canvas);
color: var(--cx-text-primary);
}
html.cx-dark body { background: var(--cx-bg-canvas); color: var(--cx-text-primary); }
::selection { background: var(--cx-accent); color: #fff; }
/* -------------------------------------------------------------
* 3. Wordmark — "cortexia" sempre minúsculo, "ia" no gradient.
* ------------------------------------------------------------- */
.cx-wordmark {
font-family: var(--cx-font-display);
font-weight: 700;
letter-spacing: -0.03em;
text-transform: lowercase;
color: var(--cx-text-primary);
line-height: 1;
}
.cx-wordmark__ia {
background: var(--cx-amber-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* -------------------------------------------------------------
* 4. ClusterPill — outline pill por categoria (criativos / ferramentas / agentes).
* Uso: Ferramentas
* ------------------------------------------------------------- */
.cx-cluster-pill {
display: inline-flex;
align-items: center;
font-family: var(--cx-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1.5px solid currentColor;
border-radius: var(--cx-radius-full);
padding: 3px 10px;
line-height: 1.5;
text-decoration: none;
}
.cx-cluster-pill--criativos { color: var(--cx-cluster-criativos); }
.cx-cluster-pill--ferramentas { color: var(--cx-cluster-ferramentas); }
.cx-cluster-pill--agentes { color: var(--cx-cluster-agentes); }
.cx-cluster-pill--sm { font-size: 10px; padding: 2px 8px; }
/* -------------------------------------------------------------
* 5. Badge — filled, pequeno (Novo / Atualizado / Sponsored / Editor pick).
* ------------------------------------------------------------- */
.cx-badge {
display: inline-flex;
align-items: center;
font-family: var(--cx-font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--cx-radius-full);
padding: 3px 9px;
line-height: 1.5;
color: #fff;
background: var(--cx-accent);
}
.cx-badge--novo { background: var(--cx-accent); }
.cx-badge--atualizado { background: var(--cx-info); }
.cx-badge--editor-pick { background: var(--cx-warning); }
.cx-badge--sponsored { background: var(--cx-bg-muted); color: var(--cx-text-muted); border: 1px solid var(--cx-border-default); }
/* -------------------------------------------------------------
* 6. Kicker — rótulo monospace de seção.
* Uso: Editorial de destaque
* ------------------------------------------------------------- */
.cx-kicker {
font-family: var(--cx-font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cx-text-muted);
margin: 0 0 20px;
}
/* -------------------------------------------------------------
* 7. Meta de artigo — autor · data · tempo de leitura.
* Uso: V. Santos · 05 jun 2026 · 14 min
* ------------------------------------------------------------- */
.cx-meta {
font-family: var(--cx-font-mono);
font-size: 11px;
letter-spacing: 0.03em;
color: var(--cx-text-muted);
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.cx-meta > span { opacity: 0.4; }
/* -------------------------------------------------------------
* 8. Callout — info / dica / alerta / opinião do autor.
* Uso:
*
* ------------------------------------------------------------- */
.cx-callout {
display: flex;
gap: 14px;
border-radius: var(--cx-radius-lg);
padding: 20px;
margin: 24px 0;
border: 1.5px solid;
}
.cx-callout__title {
font-family: var(--cx-font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 4px;
}
.cx-callout__body {
font-family: var(--cx-font-body);
font-size: 15px;
line-height: 1.72;
color: var(--cx-text-secondary);
}
.cx-callout__body > :last-child { margin-bottom: 0; }
.cx-callout--info { background: rgba(28,122,87,.10); border-color: var(--cx-info); }
.cx-callout--info .cx-callout__title { color: var(--cx-info); }
.cx-callout--dica { background: rgba(14,110,85,.10); border-color: var(--cx-success); }
.cx-callout--dica .cx-callout__title { color: var(--cx-success); }
.cx-callout--alerta { background: rgba(217,138,16,.10); border-color: var(--cx-warning); }
.cx-callout--alerta .cx-callout__title { color: var(--cx-warning); }
.cx-callout--opiniao { background: var(--cx-accent-subtle); border-color: var(--cx-accent); }
.cx-callout--opiniao .cx-callout__title { color: var(--cx-accent); }
/* -------------------------------------------------------------
* 9. PromptBlock — bloco copiável para prompts (parte das suas
* regras de E-E-A-T: prompts/scripts sempre copiáveis).
* Uso: ...
* ------------------------------------------------------------- */
.cx-prompt {
font-family: var(--cx-font-mono);
font-size: 14px;
line-height: 1.6;
background: var(--cx-bg-muted);
border: 1px solid var(--cx-border-default);
border-radius: var(--cx-radius-md);
padding: 16px 20px;
overflow-x: auto;
color: var(--cx-text-primary);
margin: 24px 0;
position: relative;
}
.cx-prompt::before {
content: 'PROMPT';
position: absolute;
top: 10px; right: 12px;
font-size: 9px;
letter-spacing: 0.06em;
color: var(--cx-text-xmuted);
}
/* -------------------------------------------------------------
* 10. ArticleCard — variants featured / grid / compact.
* Cards são etc.
* ------------------------------------------------------------- */
.cx-card {
background: var(--cx-bg-surface);
border: 1px solid var(--cx-border-subtle);
border-radius: var(--cx-radius-lg);
overflow: hidden;
box-shadow: var(--cx-shadow-1);
transition: box-shadow .2s, transform .2s;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.cx-card:hover { box-shadow: var(--cx-shadow-2); transform: translateY(-2px); }
.cx-card__cover {
background: var(--cx-bg-muted);
height: 180px;
position: relative;
flex-shrink: 0;
}
.cx-card__cover--amber { background: var(--cx-amber-gradient); }
.cx-card__cover--pinheiro { background: var(--cx-pinheiro-gradient); }
.cx-card__cover--magenta { background: var(--cx-magenta-gradient); }
.cx-card__content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.cx-card__title {
font-family: var(--cx-font-display);
font-weight: 700;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--cx-text-primary);
margin: 0;
text-wrap: balance;
}
.cx-card__meta-bottom { margin-top: auto; }
/* Featured — grid 2 col, cover lateral grande. */
.cx-card--featured {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cx-card--featured .cx-card__cover {
height: auto;
min-height: 280px;
}
.cx-card--featured .cx-card__content { padding: 32px; justify-content: center; gap: 16px; }
.cx-card--featured .cx-card__title {
font-size: clamp(22px, 3vw, 34px);
}
.cx-card--featured .cx-card__excerpt {
font-family: var(--cx-font-body);
font-size: 16px;
line-height: 1.72;
color: var(--cx-text-secondary);
margin: 0;
}
@media (max-width: 768px) {
.cx-card--featured { grid-template-columns: 1fr; }
}
/* Compact — linha horizontal com thumb à esquerda. */
.cx-card--compact { flex-direction: row; }
.cx-card--compact .cx-card__cover { width: 100px; height: auto; }
.cx-card--compact .cx-card__content { padding: 16px; gap: 8px; justify-content: center; }
.cx-card--compact .cx-card__title { font-size: 16px; line-height: 1.4; }
/* -------------------------------------------------------------
* 11. ArticleHero — capa do artigo (kicker, H1, subtitle, meta).
* ------------------------------------------------------------- */
.cx-article-hero {
padding: 48px 0 32px;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 880px;
}
.cx-article-hero__title {
font-family: var(--cx-font-display);
font-weight: 800;
font-size: clamp(32px, 5vw, 56px);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--cx-text-primary);
margin: 0;
text-wrap: balance;
}
.cx-article-hero__subtitle {
font-family: var(--cx-font-body);
font-size: 19px;
line-height: 1.5;
color: var(--cx-text-secondary);
margin: 0;
max-width: 60ch;
}
.cx-article-hero__cover {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--cx-radius-xl);
overflow: hidden;
background: var(--cx-amber-gradient);
margin-top: 16px;
}
/* -------------------------------------------------------------
* 12. AuthorCard — caixa do autor ao fim do artigo (E-E-A-T).
* ------------------------------------------------------------- */
.cx-author-card {
display: grid;
grid-template-columns: 96px 1fr;
gap: 20px;
align-items: center;
background: var(--cx-bg-surface);
border: 1px solid var(--cx-border-subtle);
border-radius: var(--cx-radius-lg);
padding: 24px;
margin: 48px 0;
box-shadow: var(--cx-shadow-1);
}
.cx-author-card__avatar {
width: 96px;
height: 96px;
border-radius: var(--cx-radius-full);
background: var(--cx-amber-gradient);
overflow: hidden;
}
.cx-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cx-author-card__name {
font-family: var(--cx-font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--cx-text-primary);
margin: 0 0 4px;
}
.cx-author-card__role {
font-family: var(--cx-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cx-text-muted);
margin: 0 0 8px;
}
.cx-author-card__bio {
font-family: var(--cx-font-body);
font-size: 14px;
line-height: 1.6;
color: var(--cx-text-secondary);
margin: 0;
}
/* -------------------------------------------------------------
* 13. TOC (Table of Contents) — sidebar sticky no artigo.
* ------------------------------------------------------------- */
.cx-toc {
position: sticky;
top: 96px;
align-self: start;
font-family: var(--cx-font-mono);
font-size: 12px;
border-left: 1px solid var(--cx-border-default);
padding-left: 16px;
}
.cx-toc__title {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cx-text-muted);
margin: 0 0 12px;
}
.cx-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cx-toc a {
color: var(--cx-text-secondary);
text-decoration: none;
font-size: 13px;
line-height: 1.4;
transition: color .15s;
}
.cx-toc a:hover { color: var(--cx-accent); }
.cx-toc li.is-active a { color: var(--cx-accent); font-weight: 600; }
.cx-toc .cx-toc__sub { padding-left: 12px; font-size: 12px; color: var(--cx-text-muted); }
/* -------------------------------------------------------------
* 14. Reading progress bar — barra fixa no topo durante leitura.
* ------------------------------------------------------------- */
.cx-reading-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 200;
pointer-events: none;
}
.cx-reading-progress__bar {
height: 100%;
width: 0%;
background: var(--cx-accent);
transition: width .1s linear;
}
/* -------------------------------------------------------------
* 15. AdSense slot wrapper — com label "Publicidade" obrigatório.
*
* REGRAS GOOGLE ADSENSE:
* - Label visível no DOM (não via ::before — ad blockers/bot não veem CSS)
* - min-height reservada ANTES do load para evitar CLS (Core Web Vitals)
* - Margem mínima 8px de qualquer elemento clicável (evita clique acidental)
* - Nunca dentro de popups, drawers ou elementos overflow:hidden sem scroll
*
* Variantes disponíveis:
* .cx-ad--leaderboard → 728×90 (desktop topo/rodapé de seção)
* .cx-ad--in-content → 336×280 ou responsivo (dentro do texto, após H2)
* .cx-ad--sidebar → 300×250 (sidebar do artigo)
* .cx-ad--mobile-banner→ 320×50 (fixo mobile, quando implementado)
* ------------------------------------------------------------- */
.cx-ad {
margin: 40px 0; /* margem generosa — afasta de conteúdo clicável */
text-align: center;
position: relative;
}
/* Label no DOM — obrigatório e visível (não via ::before) */
.cx-ad__label {
display: block;
font-family: var(--cx-font-mono);
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cx-text-xmuted);
margin-bottom: 6px;
text-align: center;
}
/* Área reservada antes do ad carregar — evita CLS */
.cx-ad__slot {
display: block;
width: 100%;
background: var(--cx-bg-muted);
border: 1px solid var(--cx-border-subtle);
border-radius: var(--cx-radius-md);
overflow: hidden;
}
/* Leaderboard 728×90 — usa entre seções de conteúdo */
.cx-ad--leaderboard .cx-ad__slot { min-height: 90px; }
/* In-content responsivo — após 2º ou 3º H2 do artigo */
.cx-ad--in-content .cx-ad__slot { min-height: 280px; }
@media (max-width: 600px) {
.cx-ad--in-content .cx-ad__slot { min-height: 200px; }
}
/* Sidebar 300×250 */
.cx-ad--sidebar .cx-ad__slot { min-height: 250px; max-width: 300px; margin: 0 auto; }
/* ── Pre-header (acima do header, como The Verge) ──────────────
* Posição de maior RPM. Fica ANTES do .cx-header no DOM.
* Desktop: 970×90 ou 728×90. Mobile: 320×50.
* REGRA ADSENSE: não pode ser sticky/fixed no desktop — só mobile.
* ──────────────────────────────────────────────────────────────── */
.cx-ad--pre-header {
width: 100%;
background: var(--cx-bg-muted);
border-bottom: 1px solid var(--cx-border-subtle);
margin: 0;
padding: 6px 0;
text-align: center;
}
.cx-ad--pre-header .cx-ad__label {
font-size: 8px;
margin-bottom: 4px;
}
.cx-ad--pre-header .cx-ad__slot {
min-height: 90px;
max-width: 970px;
margin: 0 auto;
border: none;
border-radius: 0;
background: transparent;
}
@media (max-width: 768px) {
.cx-ad--pre-header .cx-ad__slot { min-height: 50px; }
}
/* ── Post-header (entre header e conteúdo, como The Verge tela 1) ──
* Segunda posição de maior RPM. Aparece logo abaixo do header sticky.
* Não deve ser sticky — só estática.
* ──────────────────────────────────────────────────────────────── */
.cx-ad--post-header {
width: 100%;
background: var(--cx-bg-canvas);
border-bottom: 1px solid var(--cx-border-subtle);
padding: 12px 24px;
text-align: center;
margin: 0;
}
.cx-ad--post-header .cx-ad__slot {
min-height: 90px;
max-width: 970px;
margin: 0 auto;
background: var(--cx-bg-muted);
border: 1px solid var(--cx-border-subtle);
border-radius: var(--cx-radius-md);
}
@media (max-width: 768px) {
.cx-ad--post-header { padding: 8px 16px; }
.cx-ad--post-header .cx-ad__slot { min-height: 50px; }
}
/* ── Sticky bottom mobile ──────────────────────────────────────
* Fixo na parte inferior em mobile — alta visibilidade, baixo CLS.
* Ativar após aprovação no AdSense. Respeita safe-area do iPhone.
* ──────────────────────────────────────────────────────────────── */
.cx-ad--sticky-mobile {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 999;
background: var(--cx-bg-surface);
border-top: 1px solid var(--cx-border-subtle);
padding: 4px 0;
padding-bottom: env(safe-area-inset-bottom, 4px); /* iPhone notch */
margin: 0;
display: none;
}
@media (max-width: 768px) {
.cx-ad--sticky-mobile { display: block; }
}
.cx-ad--sticky-mobile .cx-ad__slot {
min-height: 50px;
border: none;
border-radius: 0;
background: transparent;
}
/* Compensar espaço do sticky mobile no body para não cobrir conteúdo */
body.has-sticky-ad { padding-bottom: 70px; }
/* -------------------------------------------------------------
* 16. Newsletter — sempre fundo dark, accent sólido.
* ------------------------------------------------------------- */
.cx-newsletter {
background: #1A130D;
padding: 64px 24px;
margin-top: 64px;
}
.cx-newsletter__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.cx-newsletter__kicker {
font-family: var(--cx-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244,238,227,.4);
margin: 0 0 12px;
}
.cx-newsletter__title {
font-family: var(--cx-font-display);
font-weight: 700;
font-size: 32px;
letter-spacing: -0.03em;
color: #F4EEE3;
margin: 0 0 10px;
line-height: 1.1;
}
.cx-newsletter__copy {
font-family: var(--cx-font-body);
font-size: 15px;
color: rgba(244,238,227,.6);
margin: 0;
max-width: 36ch;
}
.cx-newsletter__form {
display: flex;
gap: 10px;
flex: 1;
max-width: 420px;
}
.cx-newsletter__form input[type="email"] {
flex: 1;
background: rgba(244,238,227,.07);
border: 1px solid rgba(244,238,227,.15);
border-radius: var(--cx-radius-md);
padding: 11px 16px;
font-family: var(--cx-font-body);
font-size: 15px;
color: #F4EEE3;
outline: none;
}
.cx-newsletter__form input[type="email"]:focus { box-shadow: var(--cx-ring-focus); }
.cx-newsletter__form button {
background: var(--cx-accent);
color: #fff;
border: none;
border-radius: var(--cx-radius-md);
padding: 11px 20px;
font-family: var(--cx-font-display);
font-weight: 600;
font-size: 15px;
cursor: pointer;
white-space: nowrap;
}
.cx-newsletter__form button:hover { background: var(--cx-accent-hover); }
/* -------------------------------------------------------------
* 17. Botão dark mode toggle no header.
* ------------------------------------------------------------- */
.cx-theme-toggle {
background: transparent;
border: 1px solid var(--cx-border-default);
border-radius: var(--cx-radius-full);
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--cx-text-secondary);
transition: background .15s, color .15s;
}
.cx-theme-toggle:hover { background: var(--cx-bg-subtle); color: var(--cx-text-primary); }
.cx-theme-toggle:focus-visible { outline: none; box-shadow: var(--cx-ring-focus); }
/* -------------------------------------------------------------
* 18. Header (lockup + nav).
* ------------------------------------------------------------- */
.cx-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in oklab, var(--cx-bg-canvas) 92%, transparent);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--cx-border-subtle);
}
.cx-header__inner {
max-width: 1280px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.cx-header__brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--cx-text-primary);
}
.cx-header__brand .cx-mark { width: 28px; height: 28px; color: var(--cx-accent); }
.cx-header__brand .cx-wordmark { font-size: 22px; }
.cx-header__nav {
display: flex;
gap: 28px;
font-family: var(--cx-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cx-header__nav a {
color: var(--cx-text-secondary);
text-decoration: none;
transition: color .15s;
}
.cx-header__nav a:hover,
.cx-header__nav a.is-active { color: var(--cx-text-primary); }
.cx-header__actions { display: inline-flex; align-items: center; gap: 12px; }
.cx-header__cta {
background: var(--cx-accent);
color: #fff;
font-family: var(--cx-font-display);
font-weight: 600;
font-size: 14px;
border-radius: var(--cx-radius-md);
padding: 9px 16px;
text-decoration: none;
transition: background .15s;
}
.cx-header__cta:hover { background: var(--cx-accent-hover); }
@media (max-width: 768px) {
.cx-header__nav { display: none; }
}
/* -------------------------------------------------------------
* 19. Footer — sempre dark.
* ------------------------------------------------------------- */
.cx-footer {
background: #1A130D;
color: rgba(244,238,227,.7);
padding: 64px 24px 40px;
font-family: var(--cx-font-body);
}
.cx-footer__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 48px;
}
.cx-footer__brand .cx-wordmark { color: #F4EEE3; font-size: 24px; }
.cx-footer__brand p {
font-size: 14px;
line-height: 1.6;
margin: 16px 0 0;
max-width: 32ch;
color: rgba(244,238,227,.5);
}
.cx-footer__col h4 {
font-family: var(--cx-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244,238,227,.4);
margin: 0 0 16px;
}
.cx-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-footer__col a {
color: rgba(244,238,227,.7);
font-size: 14px;
text-decoration: none;
}
.cx-footer__col a:hover { color: #F4EEE3; }
.cx-footer__legal {
max-width: 1280px;
margin: 48px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(244,238,227,.1);
font-family: var(--cx-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(244,238,227,.4);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 768px) {
.cx-footer__inner { grid-template-columns: 1fr 1fr; }
}
/* -------------------------------------------------------------
* 20. Breadcrumb.
* ------------------------------------------------------------- */
.cx-breadcrumb {
font-family: var(--cx-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cx-text-muted);
padding: 24px 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cx-breadcrumb a { color: var(--cx-text-muted); text-decoration: none; }
.cx-breadcrumb a:hover { color: var(--cx-accent); }
.cx-breadcrumb__sep { opacity: 0.5; }
/* -------------------------------------------------------------
* 21. Prose — corpo do post. Largura controlada via .cx-prose.
* Aplica os tokens editoriais ao conteúdo do post.
* ------------------------------------------------------------- */
.cx-prose {
max-width: 680px;
font-family: var(--cx-font-body);
font-size: 17px;
line-height: 1.72;
color: var(--cx-text-secondary);
}
.cx-prose p,
.cx-prose ul,
.cx-prose ol,
.cx-prose blockquote { margin: 0 0 20px; }
/* Páginas de texto (Sobre, Contato, Privacidade): coluna de leitura centralizada */
.cx-prose.cx-container {
max-width: 760px;
margin-left: auto;
margin-right: auto;
padding-top: 56px;
padding-bottom: 80px;
}
.cx-prose h1 {
font-family: var(--cx-font-display);
font-weight: 800;
font-size: clamp(30px, 4.5vw, 48px);
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--cx-text-primary);
margin: 0 0 24px;
text-wrap: balance;
}
.cx-prose h2 {
font-family: var(--cx-font-display);
font-weight: 700;
font-size: clamp(22px, 3vw, 30px);
letter-spacing: -0.02em;
color: var(--cx-text-primary);
margin: 48px 0 16px;
line-height: 1.2;
text-wrap: balance;
}
.cx-prose h3 {
font-family: var(--cx-font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.01em;
color: var(--cx-text-primary);
margin: 32px 0 12px;
line-height: 1.3;
}
.cx-prose a { color: var(--cx-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cx-prose a:hover { color: var(--cx-accent-hover); }
.cx-prose code {
font-family: var(--cx-font-mono);
font-size: 0.92em;
background: var(--cx-bg-muted);
padding: 2px 6px;
border-radius: 4px;
}
.cx-prose blockquote {
border-left: 3px solid var(--cx-accent);
padding-left: 20px;
font-style: normal;
color: var(--cx-text-primary);
font-family: var(--cx-font-display);
font-size: 19px;
line-height: 1.5;
}
/* -------------------------------------------------------------
* 22. Container helpers.
* ------------------------------------------------------------- */
.cx-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.cx-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.cx-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.cx-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.cx-grid-3, .cx-grid-2 { grid-template-columns: 1fr; }
}
/* -------------------------------------------------------------
* 24. Right Rail — coluna lateral direita na home e categorias.
* Como no Wired: conteúdo principal à esquerda (3 cols) +
* coluna de ad à direita (300px fixa). Sticky para acompanhar
* o scroll do leitor na listagem de artigos.
*
* Uso:
*
* ------------------------------------------------------------- */
.cx-rail-layout {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
align-items: start;
}
.cx-rail-layout__main { min-width: 0; }
.cx-rail-layout__rail {
position: sticky;
top: 88px; /* abaixo do header sticky (~72px) + folga */
display: flex;
flex-direction: column;
gap: 24px;
}
/* Em tablet, rail colapsa para baixo do conteúdo */
@media (max-width: 1024px) {
.cx-rail-layout {
grid-template-columns: 1fr;
}
.cx-rail-layout__rail {
position: static;
display: grid;
grid-template-columns: repeat(2, 300px);
justify-content: center;
gap: 20px;
}
}
/* Em mobile, rail desaparece (ads in-content cobrem) */
@media (max-width: 640px) {
.cx-rail-layout__rail { display: none; }
}
/* ── Rail ad — 300×250 ou 300×600 empilháveis ── */
.cx-ad--rail {
margin: 0;
}
.cx-ad--rail .cx-ad__slot {
min-height: 250px;
width: 300px;
background: var(--cx-bg-muted);
border: 1px solid var(--cx-border-subtle);
border-radius: var(--cx-radius-md);
}
/* Versão alta (300×600) — melhor RPM */
.cx-ad--rail-tall .cx-ad__slot { min-height: 600px; }
/* =============================================================
* 25. CHROME DOS TEMPLATES DO TEMA (header.php, footer.php, etc.)
* Default = LIGHT. Dark via html.cx-dark.
* ============================================================= */
/* Base do corpo — garante papel quente no claro, dark consistente */
body {
background: var(--cx-bg-canvas);
color: var(--cx-text-primary);
font-family: var(--cx-font-body);
margin: 0;
}
.cx-site-main { display: block; min-height: 40vh; }
.cx-skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--cx-accent); color: #fff; padding: 10px 16px; z-index: 1000;
border-radius: 0 0 var(--cx-radius-md) 0; font-family: var(--cx-font-mono); font-size: 12px;
}
.cx-skip-link:focus { left: 0; }
/* ---- Header: mark + nav ---- */
.cx-header__brand .cx-mark { display: inline-flex; width: 26px; height: 26px; }
.cx-header__brand .cx-mark svg { width: 100%; height: 100%; display: block; }
.cx-header.is-scrolled { box-shadow: var(--cx-shadow-1); border-bottom-color: var(--cx-border-default); }
.cx-header__nav { display: flex; align-items: center; flex: 1; margin-left: 16px; }
.cx-nav-list {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: 2px;
}
.cx-nav-list a {
display: inline-block;
font-family: var(--cx-font-body); font-weight: 500; font-size: 14px;
color: var(--cx-text-secondary); text-decoration: none;
padding: 8px 12px; border-radius: var(--cx-radius-md);
transition: color .15s, background .15s;
}
.cx-nav-list a:hover { color: var(--cx-text-primary); background: var(--cx-bg-subtle); }
.cx-nav-list .current-menu-item a,
.cx-nav-list .current-cat a { color: var(--cx-accent); background: var(--cx-accent-subtle); }
.cx-header .cx-icon-btn {
width: 38px; height: 38px;
display: inline-flex !important; align-items: center; justify-content: center;
padding: 0 !important; margin: 0;
border: 1px solid var(--cx-border-default) !important;
background: transparent !important;
color: var(--cx-text-secondary) !important;
border-radius: var(--cx-radius-md) !important;
cursor: pointer; transition: color .15s, background .15s, border-color .15s;
-webkit-appearance: none; appearance: none; box-shadow: none !important;
}
.cx-header .cx-icon-btn svg { display: block; }
.cx-header .cx-icon-btn:hover { color: var(--cx-accent) !important; background: var(--cx-accent-subtle) !important; border-color: var(--cx-accent) !important; }
.cx-header .cx-icon-btn:focus-visible { outline: none; box-shadow: var(--cx-ring-focus) !important; }
/* Alterna ícone sol/lua conforme o tema (especificidade alta p/ vencer .cx-icon-btn svg) */
.cx-header .cx-icon-btn .cx-icon-moon { display: block; }
.cx-header .cx-icon-btn .cx-icon-sun { display: none; }
html.cx-dark .cx-header .cx-icon-btn .cx-icon-moon { display: none; }
html.cx-dark .cx-header .cx-icon-btn .cx-icon-sun { display: block; }
.cx-header__burger { display: none; }
.cx-header__drawer { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; border-top: 1px solid var(--cx-border-subtle); background: var(--cx-bg-surface); }
.cx-header__drawer:not([hidden]) { display: flex; }
.cx-header__drawer[hidden] { display: none !important; }
.cx-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cx-drawer-list a { display: block; padding: 12px 8px; font-family: var(--cx-font-body); font-size: 16px; color: var(--cx-text-secondary); text-decoration: none; border-bottom: 1px solid var(--cx-border-subtle); }
.cx-header__cta--block { text-align: center; margin-top: 12px; }
@media (max-width: 880px) {
.cx-header__nav { display: none; }
.cx-header__burger { display: grid; }
}
@media (min-width: 881px) { .cx-header__drawer { display: none !important; } }
/* ---- Cabeçalho de seção (home/arquivo) ---- */
.cx-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.cx-section-head--sm { margin-bottom: 16px; }
.cx-section-title {
font-family: var(--cx-font-display); font-weight: 700; font-size: 22px;
letter-spacing: -0.02em; color: var(--cx-text-primary); margin: 0;
}
.cx-section-link {
font-family: var(--cx-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
color: var(--cx-text-muted); text-decoration: none; white-space: nowrap;
}
.cx-section-link:hover { color: var(--cx-accent); }
/* ---- Home spacing ---- */
.cx-home-featured { padding-top: 40px; padding-bottom: 48px; }
.cx-home-latest { padding-bottom: 56px; }
.cx-home-clusters { padding-bottom: 64px; border-top: 1px solid var(--cx-border-subtle); padding-top: 40px; }
.cx-clusters-grid { gap: 40px; align-items: stretch; }
.cx-cluster-col { min-width: 0; display: flex; flex-direction: column; }
.cx-cluster-list { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cx-cluster-col .cx-card--compact { flex: 1; min-height: 132px; }
.cx-cluster-col .cx-card--compact .cx-card__cover { min-height: 100%; }
/* ---- Hero do artigo: meta ---- */
.cx-article-hero { padding-top: 32px; }
.cx-article-hero__meta { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.cx-article-hero__avatar {
width: 38px; height: 38px; border-radius: var(--cx-radius-full); flex-shrink: 0;
background: var(--cx-amber-gradient); display: grid; place-items: center;
color: #fff; font-family: var(--cx-font-display); font-weight: 700; font-size: 14px;
}
.cx-article-hero__author { display: block; font-family: var(--cx-font-body); font-weight: 600; font-size: 14px; color: var(--cx-text-primary); }
.cx-article-hero__date { display: block; font-family: var(--cx-font-mono); font-size: 11px; color: var(--cx-text-muted); letter-spacing: .03em; }
/* ---- Layout do artigo: prose + TOC ---- */
.cx-article-layout {
display: grid; grid-template-columns: minmax(0, 680px) 240px;
gap: 64px; align-items: start; padding-bottom: 80px;
}
.cx-article-layout .cx-prose { max-width: 680px; }
.cx-toc__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cx-toc__track { flex: 1; height: 3px; background: var(--cx-border-subtle); border-radius: 99px; overflow: hidden; }
.cx-toc__fill { height: 100%; width: 0; background: var(--cx-accent); border-radius: 99px; transition: width .15s linear; }
.cx-toc__progress > span { font-family: var(--cx-font-mono); font-size: 10px; color: var(--cx-text-muted); flex-shrink: 0; }
.cx-toc nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-toc nav li a {
display: block; font-family: var(--cx-font-body); font-size: 13px; color: var(--cx-text-muted);
text-decoration: none; line-height: 1.5; padding: 4px 6px; border-left: 2px solid transparent; transition: color .14s, border-color .14s;
}
.cx-toc nav li a:hover { color: var(--cx-text-secondary); }
.cx-toc nav li.is-active a { color: var(--cx-accent); border-left-color: var(--cx-accent); font-weight: 600; }
.cx-toc nav li.cx-toc__sub a { padding-left: 16px; font-size: 12.5px; }
@media (max-width: 1024px) {
.cx-article-layout { grid-template-columns: 1fr; gap: 0; }
.cx-toc { display: none; }
}
/* ---- Author card link ---- */
.cx-author-card__link { font-family: var(--cx-font-body); font-weight: 600; font-size: 13px; color: var(--cx-accent); text-decoration: none; border-bottom: 1.5px solid var(--cx-accent-subtle); }
/* ---- Arquivo / Blog ---- */
.cx-archive { padding-top: 40px; padding-bottom: 64px; }
.cx-archive__head { margin-bottom: 32px; }
.cx-archive__title { font-family: var(--cx-font-display); font-weight: 800; font-size: clamp(28px,4vw,44px); letter-spacing: -0.03em; color: var(--cx-text-primary); margin: 8px 0 0; }
.cx-empty { font-family: var(--cx-font-body); color: var(--cx-text-muted); padding: 40px 0; }
.cx-cluster-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--cx-border-subtle); position: relative; overflow: hidden; }
.cx-cluster-hero::before { content: ''; position: absolute; inset: 0; opacity: .08; background: var(--cx-cluster-grad, transparent); pointer-events: none; }
.cx-cluster-hero__title { font-family: var(--cx-font-display); font-weight: 800; font-size: clamp(32px,5vw,52px); letter-spacing: -0.03em; color: var(--cx-text-primary); margin: 12px 0 0; }
.cx-cluster-hero__desc { font-family: var(--cx-font-body); font-size: 17px; line-height: 1.6; color: var(--cx-text-secondary); margin: 12px 0 0; max-width: 60ch; }
.cx-related { padding-top: 16px; padding-bottom: 64px; }
.cx-related .cx-section-title { margin-bottom: 24px; }
.cx-pagination { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; }
.cx-pagination .page-numbers {
font-family: var(--cx-font-mono); font-size: 13px; color: var(--cx-text-secondary);
text-decoration: none; padding: 8px 14px; border: 1px solid var(--cx-border-default); border-radius: var(--cx-radius-md);
}
.cx-pagination .page-numbers.current { background: var(--cx-accent); color: #fff; border-color: var(--cx-accent); }
.cx-pagination .page-numbers:hover:not(.current) { border-color: var(--cx-accent); color: var(--cx-accent); }
/* ---- Footer extra (tagline, newsletter mini) ---- */
.cx-footer__brandlink { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cx-footer__brandlink .cx-mark { width: 26px; height: 26px; display: inline-flex; }
.cx-footer__brandlink .cx-mark svg { width: 100%; height: 100%; }
.cx-footer__brandlink .cx-wordmark { color: #F4EEE3; font-size: 22px; }
.cx-footer__tagline { font-family: var(--cx-font-body); font-size: 15px; line-height: 1.65; color: rgba(244,238,227,.65); margin: 16px 0 24px; max-width: 30ch; }
.cx-footer__nlkicker { font-family: var(--cx-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244,238,227,.45); margin: 0 0 12px; }
.cx-footer__nlform { display: flex; gap: 8px; max-width: 320px; }
.cx-footer__nlform input { flex: 1; background: rgba(244,238,227,.07); border: 1px solid rgba(244,238,227,.15); border-radius: var(--cx-radius-md); padding: 9px 14px; font-family: var(--cx-font-body); font-size: 14px; color: #F4EEE3; outline: none; }
.cx-footer__nlform button { background: var(--cx-accent); color: #fff; border: none; border-radius: var(--cx-radius-md); padding: 9px 16px; font-family: var(--cx-font-body); font-weight: 600; font-size: 14px; cursor: pointer; }
.cx-footer__legal-text { display: flex; flex-direction: column; gap: 4px; }
.cx-footer__legal-sub { font-size: 10px; color: rgba(244,238,227,.28); }
/* Footer responsivo (corrige estouro no mobile) */
.cx-footer { padding-left: 24px; padding-right: 24px; overflow: hidden; }
.cx-footer__inner { padding-left: 0; padding-right: 0; }
@media (max-width: 900px) {
.cx-footer__inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 560px) {
.cx-footer__inner { grid-template-columns: 1fr !important; gap: 28px !important; }
.cx-footer__brand { order: -1; }
.cx-footer__nlform { max-width: 100%; }
.cx-footer__legal { flex-direction: column; align-items: flex-start; }
}
/* =============================================================
* 26. FORMULÁRIOS (contato / newsletter)
* ============================================================= */
.cx-form { max-width: 560px; margin: 32px 0 0; display: flex; flex-direction: column; gap: 16px; }
.cx-field { display: flex; flex-direction: column; gap: 6px; }
.cx-field > span { font-family: var(--cx-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--cx-text-muted); }
.cx-form input[type="text"],
.cx-form input[type="email"],
.cx-form textarea {
width: 100%; box-sizing: border-box;
font-family: var(--cx-font-body); font-size: 16px;
color: var(--cx-text-primary); background: var(--cx-bg-surface);
border: 1px solid var(--cx-border-default); border-radius: var(--cx-radius-md);
padding: 11px 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.cx-form input:focus, .cx-form textarea:focus { border-color: var(--cx-accent); box-shadow: var(--cx-ring-focus); }
.cx-form textarea { resize: vertical; min-height: 120px; }
.cx-consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--cx-font-body); font-size: 13px; line-height: 1.5; color: var(--cx-text-secondary); }
.cx-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--cx-accent); }
.cx-consent a { color: var(--cx-accent); }
.cx-btn-primary {
align-self: flex-start;
font-family: var(--cx-font-display); font-weight: 600; font-size: 15px;
color: #fff; background: var(--cx-accent); border: none;
border-radius: var(--cx-radius-md); padding: 12px 22px; cursor: pointer; transition: background .15s;
}
.cx-btn-primary:hover { background: var(--cx-accent-hover); }
.cx-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.cx-form__status { font-family: var(--cx-font-body); font-size: 14px; padding: 12px 16px; border-radius: var(--cx-radius-md); margin: 0; }
.cx-form__status--ok { background: rgba(14,110,85,.12); color: var(--cx-success); border: 1px solid var(--cx-success); }
.cx-form__status--err { background: rgba(184,50,26,.10); color: var(--cx-danger); border: 1px solid var(--cx-danger); }
.cx-form--inline { max-width: 480px; }
.cx-form__row { display: flex; gap: 10px; }
.cx-form__row input { flex: 1; }
.cx-form--inline .cx-btn-primary { align-self: auto; white-space: nowrap; }
@media (max-width: 520px) { .cx-form__row { flex-direction: column; } }
/* -------------------------------------------------------------
* 23. Reduced motion respect.
* ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
}