Sample 05 — Atual Refinada (evolução do uat.marcasp.org.br)

🏛️ Autoria: Claude Opus 4.8 (1M context) · Claude Code

A proposta em uma frase

Não é um redesign — é o site atual, impecável. Mantém a mesma identidade, a mesma paleta e a mesma estrutura de uat.marcasp.org.br, de forma que ao abrir você reconheça “ah, essa é a versão atual melhorada” — só que com tipografia mais refinada e os problemas de hoje corrigidos.

O que foi MANTIDO (para continuar reconhecível)

• Paleta idêntica ao globals.css atual: navy #0d1b3e, navy-light #1a3060, dourado #c9a84c, creme #f5f0e8, texto #12203f, bordas rgba(13,27,62,0.14).
• A “assinatura” Cinzel nos rótulos (text-symbolic uppercase tracking) — o elemento mais característico do site — preservada.
• A mesma anatomia: barra superior navy → header sticky com brasão + nav sublinhada em dourado → hero navy com os 4 valores → faixa de atalhos em pílulas → intro editorial → fundamentos → história → liderança → princípios (bloco navy) → Nautas → eventos → notícias → audiovisual → sede → rodapé de 4 colunas.
• Cards arredondados (radius 1.75rem), bordas sutis e sombras suaves — o mesmo “tom”.

O que foi MELHORADO / CORRIGIDO

1. Tipografia. Troquei a serifa Playfair Display → Fraunces (serifa editorial com opsz, mais quente e robusta em corpos médios, onde a Playfair afina e fragiliza) e o corpo Source Sans 3 → Inter (mais limpa e legível). O Cinzel dos rótulos foi mantido como elo de identidade.
2. Fim do texto justificado. Hoje o globals.css aplica text-align: justify em todo parágrafo, criando “rios” de espaço em colunas estreitas. Aqui o texto é alinhado à esquerda — leitura muito mais limpa.
3. Conteúdo “meta” removido. O site atual tem frases que falam do próprio design ao visitante (“a organização visual aqui é propositalmente mais austera…”, “em vez de blocos genéricos, a área de notícias funciona como…”). Substituí por conteúdo institucional real.
4. Acentuação corrigida. O site exibe “Sao Paulo”, “Endereco”, “memoria”, “Historico”, “Noticias” sem acento (provável perda de encoding). Aqui está tudo correto: São Paulo, Endereço, memória…
5. Hero mais útil. O card lateral “Em destaque / Leitura / Agenda / Tom” (que era meta-texto) virou um card de destaque real: próxima Assembleia + uma faixa de credibilidade institucional (2006 · 30+ Lojas · 800 obreiros) — números que o site tem no texto mas nunca destaca.
6. História como linha do tempo. Os fatos dispersos (1599, 1769, 1856, 2006) viraram uma timeline legível.
7. Detalhes finos. Hover states consistentes, foco visível para acessibilidade (:focus-visible dourado), ícones em SVG inline (sem dependência de biblioteca), escala tipográfica e respiro revistos.

Sistema tipográfico

Standalone

Fontes via Google Fonts, imagens locais em ./assets/, ícones em SVG inline. Abrir o index.html.