/* ==== base.css (v3.1) ==== */
/* =====================================================================
rendaacessivel.pt · base.css (v3.1, 27/09/2026, revisto com as críticas)
Sistema visual único do site. Direcção decidida pelo dono:
estrutura B (portal de casas, fotografia primeiro) com a letra e os
tons quentes da E (cal, madeira, telha para a acção, oliva para estados).
Letras: Fraunces e Source Sans 3 (famílias do Google Fonts, licença OFL)
SERVIDAS PELO SITE em /letras/, nunca pelo fonts.googleapis.com: o CSP
do Caddy não tem font-src e o Google recebia o IP de cada visitante.
Ficheiros (subconjunto latin, woff2 variável):
/letras/fraunces-var.woff2 opsz 9..144, wght 400..600
/letras/source-sans-3-var.woff2 wght 400..700
No : (só a Fraunces)
Regras de uso (o pormenor está em ESPEC.md, secção 9):
1. Um só botão cheio (.bt) por ecrã. Tudo o resto é .bt-contorno ou .lig.
2. Telha = acção ou prazo a acabar. Oliva = aberto, serve-te. Madeira
escura = acontecimento (sorteio, resultados). Mais nenhuma cor.
Telha em TEXTO só sobre branco; sobre fundo tingido, telha escura.
3. Sem sombra em repouso; só o que flutua leva --sombra.
4. Nada se mexe sozinho. Transições só de cor, 150 ms.
5. Mínimos: leitura 18 px, apoio 16 px, rótulo 15 px, alvo de toque 48 px.
6. font-size só com var(--t-*). Sete tamanhos, e só estes (a guarda do
gerador recusa outro valor; excepção única: a impressão, em pt).
===================================================================== */
/* ---------- 0. Letras ---------- */
@font-face{
font-family:"Fraunces"; font-style:normal; font-weight:400 600; font-display:swap;
src:url("/letras/fraunces-var.woff2") format("woff2");
}
@font-face{
font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap;
src:url("/letras/source-sans-3-var.woff2") format("woff2");
}
/* ---------- 1. Tokens ---------- */
:root{
color-scheme: light;
/* materiais */
--cal:#F6F1E8; /* fundo da página */
--branco:#FFFFFF; /* cartões, campos, folha do concurso */
--cal-2:#EDE5D7; /* faixas, cartão sem fotografia, rodapé */
--madeira:#D6C09B; /* só decoração: sublinhado, trilho */
--madeira-clara:#F1E6D3;/* fundo de acontecimento */
--madeira-esc:#77552A; /* texto de acontecimento (6,7 branco · 5,5 madeira clara) */
/* tinta (contrastes medidos: cal · cal escura · branco) */
--tinta:#26211C; /* 14,2 */
--tinta-2:#5C5248; /* 6,8 · 6,1 · 7,6 texto de apoio e rótulos */
--tinta-3:#6B6055; /* 5,4 · 4,9 · 6,1 só metadados; passa em todos os fundos */
--linha:#E3D8C8; /* filetes, contorno de cartão (decoração) */
--linha-forte:#8B7F72; /* contorno de campo e botão (3,9 branco, WCAG 1.4.11) */
/* acção e estados */
--telha:#B0482A; /* botão cheio, prazo curto (5,5 com branco) */
--telha-esc:#8A3920; /* ligações, texto telha sobre tingido (6,2 a 7,8) */
--telha-clara:#F5E2D7; /* fundo de alerta e de último dia */
--oliva:#4E5A33; /* aberto, serve-te, bloco escuro único (7,4; 5,9 na oliva clara) */
--oliva-clara:#E5E8D4;
/* letra */
--serifa:"Fraunces", Georgia, "Times New Roman", serif;
--letra:"Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
--base:112.5%; /* 18 px com a letra do telemóvel normal; segue a preferência dele */
/* escala: sete tamanhos e só estes (rem, seguem o --base, que segue a letra do telemóvel) */
--t-1:clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem); /* 34 > 56 px, h1 */
--t-2:clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); /* 27 > 38 px, h2, preços */
--t-3:clamp(1.2rem, 1.13rem + .3vw, 1.4rem); /* 22 > 25 px, h3, renda, factos */
--t-num:clamp(2.6rem, 2rem + 2.6vw, 3.8rem); /* o número-imagem */
--t-corpo:1rem; /* 18 px */
--t-apoio:.889rem; /* 16 px */
--t-rotulo:.833rem; /* 15 px, nunca abaixo */
/* espaço (base 4) */
--e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
--e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px;
--e-secao:56px; /* 96 no computador, ver 14 */
/* forma */
--r-cartao:16px; --r-campo:12px; --r-pilula:999px;
--sombra:0 8px 24px rgba(38,33,28,.14);
--alvo:48px;
--larg:1200px; --larg-texto:40rem; --gutter:16px;
--topo:64px; /* altura do cabeçalho preso */
--abre:var(--e-6); /* do cabeçalho ao primeiro texto de uma página sem migalhas (48 no computador); com migalhas, 0 */
--dur:150ms;
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
font-size:var(--base); -webkit-text-size-adjust:100%; text-size-adjust:100%;
/* o cabeçalho preso e a barra fixa nunca tapam o que tem foco (WCAG 2.4.11) */
scroll-padding-top:calc(var(--topo) + 24px); scroll-padding-bottom:110px;
}
body{
margin:0; background:var(--cal); color:var(--tinta);
font:400 var(--t-corpo)/1.6 var(--letra);
font-variant-numeric:lining-nums tabular-nums;
-webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
h1,h2,h3,.serifa{
font-family:var(--serifa); font-weight:450; letter-spacing:-.012em;
font-optical-sizing:auto; text-wrap:balance;
}
h1,.t-1{ font-size:var(--t-1); line-height:1.08; }
h2,.t-2{ font-size:var(--t-2); line-height:1.15; }
h3,.t-3{ font-size:var(--t-3); line-height:1.22; }
.t-num{ font-family:var(--serifa); font-size:var(--t-num); line-height:1; font-weight:450; letter-spacing:-.02em; }
.t-apoio{ font-size:var(--t-apoio); line-height:1.5; color:var(--tinta-2); }
/* rótulo em letra normal, maiúscula só na primeira: maiúsculas espaçadas custam a ler */
.t-rotulo{ font-size:var(--t-rotulo); line-height:1.35; font-weight:600; color:var(--tinta-2); }
.t-forte{ font-weight:700; }
.t-realce{ color:var(--telha-esc); } /* ênfase de um título: uma por página */
p + p{ margin-top:var(--e-4); }
.texto{ max-width:var(--larg-texto); } /* ~68 caracteres */
.texto p,.texto li{ text-wrap:pretty; }
a{ color:var(--telha-esc); text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-color:currentColor; }
a:hover{ color:var(--tinta); }
/* foco: anel de tinta com halo branco por dentro; vê-se em cal, branco, telha e fotografia */
:focus-visible{ outline:3px solid var(--tinta); outline-offset:2px; box-shadow:0 0 0 2px var(--branco); border-radius:4px; }
.bloco-escuro :focus-visible{ outline-color:var(--branco); box-shadow:0 0 0 2px var(--tinta); }
.pular{ position:absolute; left:var(--e-4); top:-100px; z-index:100; background:var(--tinta); color:#fff; padding:var(--e-3) var(--e-4); border-radius:var(--r-campo); }
.pular:focus{ top:var(--e-3); }
.so-leitor{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* ícones: sprite inline, traço 1,75, currentColor */
.i{ width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.i-24{ width:24px; height:24px; }
/* ---------- 3. Grelha e ritmo ---------- */
.caixa{ width:100%; max-width:calc(var(--larg) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.secao{ padding-block:var(--e-secao); }
.secao-cal2{ background:var(--cal-2); }
.pilha > * + *{ margin-top:var(--e-4); }
.pilha-g > * + *{ margin-top:var(--e-5); }
.linha-flex{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-3); }
.cabeca{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--e-3) var(--e-5); margin-bottom:var(--e-5); }
.cabeca p{ color:var(--tinta-2); margin-top:var(--e-2); }
.grelha{ display:grid; gap:var(--e-5); grid-template-columns:1fr; }
.filete{ height:1px; border:0; background:var(--linha); margin-block:var(--e-5); }
/* ---------- 4. Cabeçalho e menu ---------- */
.topo{ position:sticky; top:0; z-index:40; background:var(--cal); border-bottom:1px solid var(--linha); }
.topo .caixa{ display:flex; align-items:center; gap:var(--e-2); min-height:var(--topo); }
.marca{ display:flex; align-items:center; gap:10px; color:var(--tinta); text-decoration:none; margin-right:auto; min-height:var(--alvo); flex:none; }
.marca-simb{ width:30px; height:30px; flex:none; }
.marca-nome{ display:block; white-space:nowrap; font-family:var(--serifa); font-size:var(--t-corpo); font-weight:560; letter-spacing:-.01em; line-height:1.1; }
.marca-desc{ display:block; font-family:var(--letra); font-size:var(--t-rotulo); font-weight:600; line-height:1.2; color:var(--tinta-2); white-space:nowrap; }
.nav{ display:none; }
.nav a{ white-space:nowrap; color:var(--tinta-2); font-weight:600; text-decoration:none; padding:var(--e-3) var(--e-2); min-height:var(--alvo); display:inline-flex; align-items:center; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--tinta); box-shadow:inset 0 -3px 0 var(--telha); }
.menu-bt{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-height:var(--alvo); min-width:var(--alvo); padding:0 12px; white-space:nowrap;
border:1.5px solid var(--linha-forte); border-radius:var(--r-pilula);
background:var(--branco); font-weight:600; font-size:var(--t-apoio); line-height:1.1; flex:none;
}
/* no telemóvel o «Menu» fica só com o ícone (aria-label) */
.menu-bt .menu-bt-txt{ display:none; }
/* integrador, 27/09: a 375 px o cabeçalho transbordava 3 px (scrollWidth 378) em TODAS as páginas; o remendo
estava repetido em sete CSS de página. Abaixo de 400 px a marca encolhe e os botões ficam mais justos. */
@media (max-width:399.98px){
.topo .caixa{ gap:4px; }
.topo .marca{ gap:8px; flex:0 1 auto; min-width:0; }
.topo .marca-simb{ width:26px; height:26px; }
.topo .marca > span{ min-width:0; }
.topo .marca-desc{ overflow:hidden; text-overflow:ellipsis; }
/* 27/09: «guia independente» tem de ficar à vista (o Lion, 27/09: «mete só guia independente»): parte em duas
linhas em vez de levar reticências, e ganha às regras de página que a cortavam ou escondiam */
.topo .marca .marca-desc{ display:block; white-space:normal; overflow:visible; text-overflow:clip; }
}
/* o menu é um