/* ========================================================================== BASE — reset, fontes, tipografia, container, botões Autoridade: specs/design.md §3, §7, §10, §11, §12, §13 ========================================================================== */ /* --- Fontes: self-hosted, nunca o CDN da Google (§12) -------------------- Os .woff2 têm de ser colocados em /fontes/. Enquanto não estiverem, o fallback abaixo segura o desenho sem partir o layout. ------------------------------------------------------------------------ */ @font-face { font-family: 'Italiana'; src: url('../fontes/italiana-400.woff2') format('woff2'); font-weight: 400; /* a Italiana só existe em 400 — §9 */ font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F; } /* Fallback com métricas ajustadas, para não haver salto ao carregar. ⚠️ Valores estimados — medir com a fonte real (§12). */ @font-face { font-family: 'Italiana-fb'; src: local('Georgia'), local('Times New Roman'); size-adjust: 92%; ascent-override: 90%; descent-override: 22%; } @font-face { font-family: 'Open Sans'; src: url('../fontes/opensans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F; } @font-face { font-family: 'Open Sans'; src: url('../fontes/opensans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F; } @font-face { font-family: 'Open Sans'; src: url('../fontes/opensans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-scroll) + var(--s3)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--preto); color: var(--branco); font-family: var(--f-corpo); font-size: var(--t-corpo); line-height: var(--lh-corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, picture, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } /* --- Tipografia (§3, §12, §13) ------------------------------------------- */ h1, h2, h3, h4 { margin: 0; text-wrap: balance; /* sem palavra órfã na última linha */ hyphens: manual; /* título não hifeniza */ } h1, h2 { font-family: var(--f-display); font-weight: 400; /* NUNCA 600/700 — falso-negrito sintético, §9 */ } h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: 0.02em; max-width: 22ch; } h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: 0.01em; max-width: 26ch; } h3 { font-family: var(--f-corpo); font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-h3); } h4 { font-family: var(--f-corpo); font-size: var(--t-h4); font-weight: 700; line-height: var(--lh-h3); } /* A escala de H4 aplicada a um elemento de nível semântico diferente. Existe porque saltar de H2 para H4 quebra a navegação por títulos num leitor de ecrã — o desenho pede a escala pequena, a semântica pede H3. */ .t-h4 { font-family: var(--f-corpo); font-size: var(--t-h4); font-weight: 700; line-height: var(--lh-h3); } p { text-wrap: pretty; hyphens: auto; /* exige lang="pt-BR" no — §13 */ max-width: 68ch; } /* A palavra dourada — assinatura tipográfica (§3) */ .ouro { color: var(--ouro); } .ambar { color: var(--ambar); } /* Destaque curto (≤18 caracteres) não pode partir a meio — §13 */ .nowrap { white-space: nowrap; } .kicker { font-size: var(--t-kicker); line-height: var(--lh-kicker); color: var(--texto-mudo); max-width: 52ch; } /* Kicker que segue directamente um H2, sem bloco de cabeçalho à volta. Existe como classe e não como style inline para a CSP poder proibir estilos inline sem partir a página. */ .kicker--apos-titulo { margin-top: var(--s2); } .legal { font-size: var(--t-legal); color: var(--texto-mudo-frio); } /* Marcador visível de dado por preencher — CLAUDE.md regra 3 */ .placeholder { color: var(--ambar); background: rgba(255, 154, 0, 0.08); border: 1px dashed var(--ambar); border-radius: var(--r-botao); padding: 2px 8px; font-size: 0.875em; font-style: italic; } /* --- Layout (§11) -------------------------------------------------------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .seccao { padding-block: var(--seccao); } .seccao--clara { background: var(--claro); color: var(--texto-claro); } .seccao--alt { background: var(--preto-alt); } .seccao--clara h1, .seccao--clara h2 { color: var(--texto-claro); } /* Sobre fundo claro o mudo tem de escurecer, não clarear (§2) */ .seccao--clara .kicker, .pilares__painel .kicker, .convite__card .kicker { color: var(--texto-mudo-claro); } .centro { text-align: center; } .centro h2, .centro .kicker { margin-inline: auto; } /* --- Botões (§7) --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); padding: var(--s2) var(--s4); /* 16px 32px — padrão */ border: 0; border-radius: var(--r-botao); font-family: var(--f-corpo); font-size: var(--t-botao); font-weight: 600; line-height: 1; text-decoration: none; text-transform: none; cursor: pointer; transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao); } /* Primário — o único dourado sólido. Texto #0D0D0D, nunca branco (§2, §9) */ .btn--primario { background: var(--ouro); color: var(--preto); } .btn--primario:hover { background: var(--ambar); } /* Hero — gradiente exclusivo do bloco 2. O gradiente da referência ia até ao bronze com texto branco: 1.66:1, falha AA — e é o mesmo erro que a §9 manda não repetir. Mantém-se o gradiente como gesto, dentro de uma gama que aceita texto escuro. Ver design.md §7. */ .btn--hero { background: linear-gradient(#FFD08A 0%, var(--ouro) 55%); color: var(--preto); } .btn--hero:hover { background: linear-gradient(var(--ouro) 0%, var(--ambar) 55%); } /* Fantasma — ações secundárias */ .btn--fantasma { background: transparent; border: 1px solid var(--ouro); color: var(--ouro); } .btn--fantasma:hover { background: var(--ouro); color: var(--preto); } /* Sobre painel claro */ .btn--escuro { background: var(--preto); color: var(--branco); } .btn--escuro:hover { background: var(--carvao); } /* Compacto — só no header (§7, §14). O min-height não é decorativo: com padding 12px e texto de 15px/1 a caixa dá 39px, e o alvo de toque mínimo é 44px (§10). */ .btn--compacto { padding: 12px var(--s3); min-height: 44px; } .btn--largo { width: 100%; } /* --- Foco visível (§10) -------------------------------------------------- */ :focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 2px; } .seccao--clara :focus-visible { outline-color: var(--bronze); } .salta-para-conteudo { position: absolute; left: -9999px; top: var(--s2); z-index: 100; background: var(--ouro); color: var(--preto); padding: var(--s2) var(--s3); border-radius: var(--r-botao); } .salta-para-conteudo:focus { left: var(--s3); } /* --- Alvos de toque ≥44px (§10) ------------------------------------------ Medidos no browser, não estimados. Todo o elemento clicável passa por aqui. ------------------------------------------------------------------------ */ .link-nav, .link-rodape { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; transition: color var(--transicao); } .link-nav:hover, .link-rodape:hover { color: var(--ouro); } /* Links que envolvem só um ícone ou um logótipo não ganham altura do texto */ .header__logo-link, .header__sociais a, .rodape__sociais a, .seletor-idioma a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .seletor-idioma a { min-width: 32px; } /* --- Ícones -------------------------------------------------------------- */ .icone { width: 40px; height: 40px; flex: none; }