/* ═══════════════════════════════════════════
RESET & TOKENS
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html { overflow-x: hidden; }
/* Tokens: /assets/css/tokens.css (spec §5). Este arquivo não declara :root.
O entra no de cada post e dos 2 template.html, ANTES deste
arquivo (Epic 1.16 §5.1 — ordem normativa). */
html { scroll-behavior: smooth; }
/* FOCO GLOBAL — spec §6.0 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--ff-s);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
max-width: 100vw;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ═══ TYPOGRAPHY ═══ */
.t-eye {
font-family: var(--ff-s);
font-size: 10px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-brand);
display: flex; align-items: center; gap: 14px;
}
.t-eye::before { content:''; width:24px; height:1px; background:var(--gold); flex-shrink:0; }
.t-body {
font-family: var(--ff-s); font-size: 17px; font-weight: 400;
line-height: 1.75; letter-spacing: -0.005em; color: var(--muted3);
}
/* ═══ CURSOR — spec §6.9 e §12.4.2 grupo D ═══
O blend de inversão e a regra que escondia o cursor do sistema saíram: o
blend viraria o dot dourado em azul-escuro sobre branco, e esconder o cursor
nativo prejudica baixa visão e apontamento assistivo. */
#cv-cursor {
position: fixed; width: 8px; height: 8px;
background: var(--gold); border-radius: var(--radius-full);
pointer-events: none; z-index: 9999;
transform: translate(-50%,-50%);
transition: width .18s, height .18s;
}
#cv-ring {
position: fixed; width: 32px; height: 32px;
border: 1px solid var(--gold);
border-radius: var(--radius-full); pointer-events: none; z-index: 9998;
transform: translate(-50%,-50%);
}
.cursor-hover #cv-cursor { width: 18px; height: 18px; }
.cursor-hover #cv-ring { width: 48px; height: 48px; border-color: var(--border-strong); }
/* ═══ NAV ═══ */
#nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
padding: 26px 64px;
transition: padding .4s ease, background .4s ease;
}
#nav.stuck {
padding: 16px 64px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-1);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* spec §7.5 — wordmark: Inter (não a serifada --ff-d), tinta --ink, tracking apertado */
.nav-logo-name {
font-family: var(--ff-s); font-size: 20px; font-weight: 700;
color: var(--ink); letter-spacing: -0.01em;
}
.nav-menu { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-menu a {
font-family: var(--ff-s); font-size: 11px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-body); text-decoration: none;
transition: color .2s; position: relative;
}
.nav-menu a::after {
content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
height: 1px; background: var(--gold);
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
/* spec §6.1 — nav em repouso/hover/focus/active/página atual */
.nav-menu a:hover, .nav-menu a:focus-visible { color: var(--ink-brand); }
.nav-menu a:active { color: var(--blue-active); }
.nav-menu a:hover::after, .nav-menu a:focus-visible::after { transform: scaleX(1); }
.nav-menu a:focus-visible { outline-offset: 3px; }
.nav-menu a.active { color: var(--ink-brand); font-weight: 600; }
.nav-menu a.active::after { transform: scaleX(1); }
/* spec §6.3 — botão secundário / outline */
.nav-btn {
font-family: var(--ff-s) !important;
font-size: 11px !important; font-weight: 600 !important;
letter-spacing: .12em !important; text-transform: uppercase !important;
color: var(--ink-brand) !important;
border: 1px solid var(--border-input) !important;
padding: 10px 22px; border-radius: var(--radius-sm);
transition: background .2s, color .2s, border-color .2s !important;
}
.nav-btn::after { display: none !important; }
.nav-btn:hover { background: var(--surface-2) !important; color: var(--blue-hover) !important; border-color: var(--blue) !important; }
.nav-btn:focus-visible { border-color: var(--blue) !important; }
.nav-btn:active { background: var(--surface-press) !important; color: var(--blue-active) !important; border-color: var(--blue) !important; }
/* ═══ BUTTONS — spec §6.2 ═══ */
.btn-gold {
display: inline-flex; align-items: center; gap: 10px;
background: var(--blue); color: var(--ink-inverse);
font-family: var(--ff-s); font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 17px 40px; text-decoration: none; border-radius: var(--radius-sm);
position: relative; overflow: hidden;
box-shadow: var(--shadow-1);
transition: transform .2s, box-shadow .3s, background .2s;
}
.btn-gold:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-gold:active { background: var(--blue-active); transform: translateY(0); box-shadow: var(--shadow-1); }
.btn-gold svg { width: 13px; height: 13px; transition: transform .2s; }
.btn-gold:hover svg { transform: translateX(4px); }
/* spec §6.4 — botão terciário / ghost */
.btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink-body); text-decoration: none;
font-family: var(--ff-s); font-size: 13px; font-weight: 500;
transition: color .2s, gap .2s;
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink-brand); gap: 10px; }
.btn-ghost:active { color: var(--blue-active); }
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-ghost svg { width: 16px; height: 16px; transition: transform .2s; }
/* ═══ ARTICLE WRAPPER ═══ */
#article-wrap {
position: relative; z-index: 10;
padding: 140px 80px 0;
max-width: 1160px; margin: 0 auto;
}
/* ═══ BREADCRUMB ═══ */
.breadcrumb {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
font-size: 12px; color: var(--muted2); margin-bottom: 40px;
}
/* spec §6.5 — link de navegação: cor de §6.5, isento do sublinhado padrão */
.breadcrumb a { color: var(--ink-brand); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--blue-hover); }
.breadcrumb a:active { color: var(--blue-active); }
/* spec §12.7 — glifo decorativo redundante: um dos 6 call-sites de --ink-faint */
.breadcrumb .sep { color: var(--ink-faint); }
.breadcrumb .current { color: var(--muted3); }
/* ═══ ARTICLE HERO ═══ */
.article-hero { max-width: 720px; margin: 0 auto 56px; }
/* spec §12.2 — mesma família de "pílulas" do .blog-tag: dourado sai, raio entra
na escala 2/4/50% (§4.6), borda decorativa vira --border (§4.3) */
.article-cat {
display: inline-block;
font-family: var(--ff-s); font-size: 10px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--ink-brand);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 14px; margin-bottom: 26px;
}
.article-h1 {
font-family: var(--ff-d); font-size: clamp(32px, 4.5vw, 52px);
font-weight: 700; line-height: 1.12; letter-spacing: -.025em;
color: var(--ink-brand); margin-bottom: 28px;
}
/* spec §12.5.2 — `em` dentro de H1/H2 (--ink-brand) assume --ink */
.article-h1 em { font-style: italic; color: var(--ink); font-weight: 600; }
.article-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
padding-top: 26px; border-top: 1px solid var(--border);
}
.article-meta-item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--muted2);
}
.article-meta-item svg { width: 15px; height: 15px; color: var(--ink-brand); }
.article-meta-author { display: flex; align-items: center; gap: 10px; }
/* spec §4.4 + §12.3.1: gradiente proibido e dourado NUNCA preenche superfície.
O padrão "superfície dourada + texto escuro" é o do .btn-gold, que §6.2
converte em preenchimento --blue + texto --ink-inverse (11.47). */
/* O seletor carrega o pai de propósito: `.article-meta-av` é um dentro
de `.article-meta-author`, e a regra genérica abaixo (0,2,0) vencia a regra
de classe única (0,1,0). Bug de especificidade PRÉ-EXISTENTE — no dark-mode
a inicial saía em --muted3 sobre o dourado (2.1:1) em vez da tinta escura
pretendida. Corrigido aqui, sob a mesma disciplina da spec §10.4 ("a story
toca exatamente esta linha; corrigir junto, com nota"), porque em light-mode
a mesma herança daria #3D3D3D sobre #0A3B66 = 1.06:1. */
.article-meta-author .article-meta-av {
width: 30px; height: 30px; border-radius: var(--radius-full);
background: var(--blue);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-d); font-size: 13px; font-weight: 400; color: var(--ink-inverse);
flex-shrink: 0;
}
.article-meta-author span { font-size: 13px; color: var(--muted3); }
.article-meta-author strong { color: var(--ink); font-weight: 500; }
/* ═══ COVER (opcional) ═══ */
/* spec §12.4.1 (G-4) — os 3 hexes escuros e o radial dourado saem; fundo chapado */
.article-cover {
max-width: 980px; margin: 0 auto 64px;
aspect-ratio: 16 / 7; border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--border);
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
}
.article-cover svg { width: 72px; height: 72px; color: var(--border-input); opacity: 1; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ═══ LAYOUT: CORPO + SIDEBAR ═══ */
.article-layout {
display: grid; grid-template-columns: minmax(0, 720px) 300px;
gap: 56px; justify-content: center; align-items: start;
padding-bottom: 120px;
}
/* ═══ CORPO DO ARTIGO — tipografia de leitura ═══ */
.article-body {
max-width: 720px;
font-family: var(--ff-s); font-size: 18px; line-height: 1.8;
color: var(--muted3); letter-spacing: -.003em;
}
.article-body > * + * { margin-top: 1.6em; }
.article-body p { color: var(--muted3); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em { font-style: italic; }
/* spec §6.5 — link de corpo: azul E sublinhado por padrão (SC 1.4.1).
O `:not(.btn-gold)` é obrigatório: a `.article-cta` fica DENTRO de
`.article-body`, e `.article-body a` (0,1,1) vence `.btn-gold` (0,1,0). Bug
de especificidade PRÉ-EXISTENTE — no dark-mode o rótulo do CTA saía em
--gold-lt sobre o botão --gold (1.1:1). Sem o filtro, em light-mode ficaria
--ink-brand sobre --blue = 1.00:1, e o botão ainda ganharia um sublinhado
que §6.5 reserva para link de corpo. Mesma disciplina da spec §10.4. */
.article-body a:not(.btn-gold) {
color: var(--ink-brand);
text-decoration: underline; text-underline-offset: 2px;
text-decoration-thickness: 1px; text-decoration-color: rgba(10,59,102,0.35);
transition: color .2s;
}
.article-body a:not(.btn-gold):hover, .article-body a:not(.btn-gold):focus-visible { color: var(--blue-hover); text-decoration-color: currentColor; }
.article-body a:not(.btn-gold):active { color: var(--blue-active); text-decoration-color: currentColor; }
.article-body h2 {
font-family: var(--ff-d); font-size: clamp(26px, 3vw, 34px);
font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
color: var(--ink-brand); margin-top: 2.2em; margin-bottom: .2em;
padding-left: 18px; border-left: 3px solid var(--gold);
}
.article-body h3 {
font-family: var(--ff-d); font-size: clamp(20px, 2.3vw, 24px);
font-weight: 600; letter-spacing: -.015em;
color: var(--ink); margin-top: 1.8em;
}
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-top: .6em; }
/* spec §12.8 — ::marker é glifo e border-left de citação é régua: --gold chapado */
.article-body li::marker { color: var(--gold); }
.article-body blockquote {
border-left: 2px solid var(--gold); padding-left: 22px;
font-family: var(--ff-d); font-style: italic; font-size: 20px;
color: var(--muted3); line-height: 1.65;
}
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
/* spec §12.1.2 (G-1) — code/pre: superfície cinza neutra (não a de marca) e
tinta --ink (não --ink-brand, que leria como link não sublinhado) */
.article-body code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .88em; background: var(--bg-alt); color: var(--ink);
padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.article-body pre {
background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 20px; overflow-x: auto;
}
.article-body pre code { background: none; border: none; padding: 0; color: var(--ink); }
.article-body hr { border: none; height: 1px; background: var(--border); margin: 2.4em 0; }
/* ═══ CTA INLINE (final do artigo) ═══ */
/* spec §12.1.2 e §6.6 — .article-cta é a "variante destacada": superfície de
marca --surface-2 chapada */
.article-cta {
margin-top: 64px; padding: 48px 44px;
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
text-align: center; position: relative; overflow: hidden;
}
/* spec §4.4/§12.3.1 — linha de acento de 2px: gradiente vira --gold chapado */
.article-cta::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: var(--gold);
}
.article-cta h3 {
font-family: var(--ff-d); font-size: clamp(24px, 3vw, 32px);
font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px;
}
/* spec §12.5.2 — `em` dentro de H3 (--ink) assume --ink-brand */
.article-cta h3 em { font-style: italic; color: var(--ink-brand); }
.article-cta p { font-size: 15px; color: var(--muted2); line-height: 1.7; max-width: 460px; margin: 0 auto 28px; }
/* ═══ SIDEBAR ═══ */
.article-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
/* spec §6.6 — card em repouso: --surface + --border + --shadow-1 (sobre página
branca a borda a 1.20:1 sozinha não separa o card do fundo, mesmo argumento
que §6.8 faz para a nav) */
.sidebar-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 28px;
box-shadow: var(--shadow-1);
}
.sidebar-author-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* mesma derivação do .article-meta-av (§4.4 + §12.3.1 + §6.2) */
.sidebar-av {
width: 48px; height: 48px; border-radius: var(--radius-full);
background: var(--blue);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff-d); font-size: 19px; font-weight: 300; color: var(--ink-inverse);
flex-shrink: 0;
}
.sidebar-author-name { font-family: var(--ff-s); font-size: 15px; font-weight: 600; color: var(--ink); }
.sidebar-author-role { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.sidebar-author-bio { font-size: 13px; color: var(--muted2); line-height: 1.7; }
/* spec §6.5 — link de corpo (a bio é parágrafo, não navegação): sublinhado */
.sidebar-author-bio a {
color: var(--ink-brand);
text-decoration: underline; text-underline-offset: 2px;
text-decoration-thickness: 1px; text-decoration-color: rgba(10,59,102,0.35);
transition: color .2s;
}
.sidebar-author-bio a:hover, .sidebar-author-bio a:focus-visible { color: var(--blue-hover); text-decoration-color: currentColor; }
.sidebar-author-bio a:active { color: var(--blue-active); text-decoration-color: currentColor; }
/* spec §12.8 — .sidebar-cta: gradiente dourado sai, superfície de marca entra */
.sidebar-cta {
background: var(--surface-2);
border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 28px;
text-align: center;
}
/* spec D-04 — eyebrow deixa de ser dourado */
.sidebar-cta-eyebrow {
font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-brand); margin-bottom: 12px;
}
.sidebar-cta h4 { font-family: var(--ff-d); font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.sidebar-cta p { font-size: 12px; color: var(--muted2); line-height: 1.6; margin-bottom: 20px; }
.sidebar-cta .btn-gold { width: 100%; justify-content: center; font-size: 10px; padding: 14px 20px; }
/* ═══ FOOTER ═══ */
footer {
background: var(--bg-alt);
border-top: 1px solid var(--border);
padding: 72px 80px 36px;
position: relative; z-index: 10;
}
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 56px;
}
.footer-brand-p { font-size: 13px; color: var(--muted); line-height: 1.75; font-weight: 300; margin-top: 14px; max-width: 280px; }
.footer-col h5 { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-brand); margin-bottom: 20px; font-weight: 500; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--ink-brand); }
.footer-col a:active { color: var(--blue-active); }
.footer-bottom {
border-top: 1px solid var(--border); padding-top: 28px;
display: flex; justify-content: space-between; align-items: center;
}
.footer-copy { font-size: 11px; color: var(--muted); }
.footer-tag { font-size: 10px; color: var(--ink-brand); letter-spacing: .12em; text-transform: uppercase; }
.footer-logo-img { width: 140px; height: auto; display: block; }
/* ═══ HAMBURGER ═══ */
.nav-toggle {
display: none;
background: none; border: none; cursor: pointer;
padding: 8px; flex-direction: column; gap: 5px;
position: relative; z-index: 201;
}
.nav-toggle span {
display: block; width: 22px; height: 1.5px;
background: var(--ink);
transition: transform .3s ease, opacity .3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* A camada #page-stars (canvas de partículas em modo de mesclagem clara) foi
removida nesta story — sobre fundo branco ela some por construção (spec
§6.9), e o JS que a desenhava pintava alphas dourados literais (spec §12.4.2
grupo C). O