/* Base compartilhada do site: tokens, reset e utilitários.
*
* §5.2 do plano de refatoração. Cada página carregava a sua própria cópia da
* paleta, do reset, do `.lucide`, do `.sr-only` e do `::selection` — nove
* cópias que já divergiam em detalhe. Aqui elas são uma só.
*
* O que NÃO está aqui, de propósito:
*
* - **A escala tipográfica.** A home usa `body { font-size: 17px }` e as
* ferramentas usam `html { font-size: 14px }`, então `rem` não significa a
* mesma coisa entre elas. Unificar isso mexeria em todo o layout de todas as
* páginas ao mesmo tempo; a §5.2 manda deixar para depois, e cada página
* continua declarando o seu tamanho raiz.
* - **`body`.** Pelo mesmo motivo: fundo, cor e família ainda variam por
* página. O que dá para unificar já são os tokens que elas usam.
*/
:root {
/* ── Paleta ──────────────────────────────────────────────────────── */
--bg: #FFFFFF;
--surface: #FFFFFF;
--ink-1: #161900;
--ink-2: #2A2E15;
--ink-3: rgba(22, 25, 0, 0.62);
--ink-4: rgba(22, 25, 0, 0.42);
--accent: #3E4700;
--primary: #E6FF00;
--rule: #E2E8F0;
/* Nomes que o blog usa para a mesma coisa. Ficam como apelido até os dois
vocabulários convergirem; remover agora exigiria reescrever o
blog-post.css inteiro no mesmo commit. */
--page-bg: var(--bg);
--ink-title: var(--ink-1);
--ink-body: var(--ink-2);
--ink-muted: var(--ink-3);
--ink-dim: var(--ink-4);
--link: var(--accent);
--link-hover: var(--ink-1);
/* ── Status ──────────────────────────────────────────────────────── */
/* A mesma escala de "bom / precisa melhorar / ruim / não se aplica" estava
escrita com nomes diferentes em cada ferramenta: `--sim-bg` e `--otm-bg`
no GEO e no Article Check, `.tech-chip-good` no SEO Check, `--ok-bg` no
Benchmark. Os valores sempre foram os mesmos. */
--good: #48BB78;
--medium: #ED8936;
--poor: #F56565;
--na: #A0AEC0;
--good-bg: #DCFCE7;
--medium-bg: #FEF3C7;
--poor-bg: #FEE2E2;
--na-bg: #F1F5F9;
--good-fg: #166534;
--medium-fg: #92400E;
--poor-fg: #991B1B;
--na-fg: #64748B;
--info-bg: #E3F2FD;
--info-fg: #0369A1;
/* ── Tipografia ──────────────────────────────────────────────────── */
--font-body: 'Roboto', system-ui, -apple-system, sans-serif;
--font-display: 'Roboto', system-ui, -apple-system, sans-serif;
--font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ── Fontes ────────────────────────────────────────────────────────── */
/* Self-hosted, no lugar do fonts.googleapis.com. O navegador só baixa cada
arquivo quando alguma regra pede aquela família e aquele peso.
As URLs são relativas a esta folha, que fica em /assets/, então resolvem
para /assets/fonts/… — idênticas às do das páginas. A
§5.4 pede essa igualdade: preload com URL diferente da do @font-face baixa
o arquivo duas vezes. */
@font-face {
font-family: 'Abril Fatface';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/abril-fatface-v25-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/roboto-v51-latin-300.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/roboto-v51-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/roboto-v51-latin-700.woff2') format('woff2');
}
/* ── Reset ─────────────────────────────────────────────────────────── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection {
background: var(--primary);
color: var(--ink-1);
}
/* ── Utilitários ───────────────────────────────────────────────────── */
/* Ícones do sprite: só a caixa e a espessura do traço.
`fill`, `stroke` e os `stroke-linecap/linejoin` NÃO ficam aqui: os 194
do site já os trazem como atributo de apresentação, e declarar
os mesmos valores nos dois lugares é manter duas cópias que podem
divergir. Quem gera os símbolos é o scripts/gerar-sprites.mjs e, no
blog, o admin/lib/icones.php. */
.lucide {
width: 1em;
height: 1em;
vertical-align: -0.125em;
stroke-width: 2;
display: inline-block;
flex-shrink: 0;
}
/* Visível só para leitores de tela e para quem rastreia a página. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Destaque amarelo atrás do texto, como um marca-texto.
*
* O mesmo bloco estava copiado em cinco lugares (home, /sobre, GEO Check,
* Benchmark, blog), sempre sobre um seletor `em` de título. Aqui vira classe:
* quem quiser o destaque usa `class="mark"`, e a semântica de ênfase do ``
* deixa de ser um requisito para conseguir o efeito.
*
* Cuidado que a §5.2.1 aponta: **nunca** aplicar isto por um seletor global de
* `em`. No corpo dos posts do blog, `` é itálico, e um seletor global
* vazaria para lá. */
.mark {
font-style: normal;
background-image: linear-gradient(var(--primary), var(--primary));
background-size: 100% 0.4em;
background-repeat: no-repeat;
background-position: 0 88%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 0.08em;
}
/* Cartão: a caixa branca com borda fina que aparece como `.tool`,
`.editorial-stat` e `.passo-card`. */
.card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 12px;
}
/* Com o hover que as três versões faziam: sobe um pouco e ganha sombra. */
.card--hover {
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.card--hover:hover {
transform: translateY(-2px);
border-color: var(--primary);
box-shadow: 0 10px 24px -12px rgba(22, 25, 0, 0.18);
}
/* O `hidden` do HTML precisa vencer um `display` de classe. Sem isto, esconder
um elemento exige `style="display:none"` no HTML, que é o que a §5.4 tira. */
[hidden] {
display: none !important;
}