amare/openspec/changes/archive/2026-08-01-recreate-public-frontend/design.md

## Context

O site público da Fase 1 já entrega rotas, CMS, SEO, mídia responsiva, regressão visual e acessibilidade. A identidade visual, porém, ainda é o placeholder da fundação: Instrument Sans, acento ouro, raios arredondados e cartões com sombra. `DESIGN.md` (“Heritage Editorial”), o mockup `amare-home-editorial.html`, o logo fornecido (coração facetado) e `depoimentos.md` (cinco casais reais) definem a marca a materializar.

Restrições que condicionam o desenho:

- Arquitetura multipágina Laravel/Blade/CMS já aprovada; o mockup HTML é single-page com âncoras — adaptar, não portar literalmente.
- Contato permanece placeholder (WEB-05 fora de escopo); CTAs levam a `/contato` sem criar leads.
- Fontes self-hosted via Vite (determinismo visual); sem Google Fonts CDN.
- Imagens públicas via disco configurado + variantes; Unsplash do mockup não entra no app.
- `PRODUCT.md`: São Paulo capital; seeders atuais ainda usam Fortaleza e depoimentos fictícios.
- Change paralela `complete-foundation-parity` não bloqueia nem é bloqueada por esta.

## Goals / Non-Goals

**Goals:**

- Materializar Heritage Editorial em todas as rotas públicas (home, serviços, portfólio, caso, sobre, contato, privacidade, 404, 500).
- Home como capa do “Dossiê Editorial do Evento”: hero, manifesto, serviços, portfólio, método (4 passos), depoimentos reais, perfil Amare, CTA final.
- Tokens centralizados alinhados a `DESIGN.md`; EB Garamond única família; radius 0; elevação por campos tonais.
- Logo oficial otimizado (selo + lockup) em fundos claros/escuros, geometria preservada.
- Cinco depoimentos de `depoimentos.md` no CMS/seed, multipárrafo, com nota de autorização.
- Manter publicação dinâmica, paginação, eager loading, SEO, axe, teclado, contraste AA e baselines determinísticas.

**Non-Goals:**

- Briefing funcional / lead (WEB-05), WhatsApp automatizado, inventar provas corporativas.
- Redesign do Filament, page builder, single-page navigation como modelo primário.
- Fotografia proprietária real (permanece ilustrativa e marcada até acervo autorizado).
- Staging/deploy/auth parity (`complete-foundation-parity`).

## Decisions

### D1 — Multipágina editorial, não single-page literal

Preservar rotas do SPEC §5.1. Home concentra a narrativa do mockup; páginas internas herdam a mesma gramática (eyebrow, títulos, linhas 1px, spreads assimétricos no desktop, sequência linear no mobile). Header usa links de rota (não `#âncoras` como navegação primária), com CTA “Solicitar proposta” → `contact`.

*Alternativas:* home quase idêntica com âncoras (rejeitada: conflita com SEO/CMS/rotas já testadas); portar HTML estático (rejeitada: perde CMS e determinismo).

### D2 — Tokens Heritage Editorial como única fonte visual

Reescrever `resources/css/tokens.css` e o mapeamento `@theme` em `app.css`:

| Papel | Token | Valor |
|-------|-------|-------|
| Fundo | `--amare-color-bg` | `#FBF9F4` (Papel Marfim) |
| Fundo profundo | `--amare-color-bg-deep` | `#F0EEE9` |
| Arquivo | `--amare-color-bg-archive` | `#E4E2DD` |
| Oliva | `--amare-color-accent` | `#556B2F` |
| Oliva profunda | `--amare-color-accent-deep` | `#3E5219` |
| Sálvia | `--amare-color-sage` | `#8B9D77` |
| Tinta | `--amare-color-text` | `#1B1C19` |
| Tinta suave | `--amare-color-muted` | `#5D6155` |
| Linha | `--amare-color-border` | `#C5C8B8` |
| Radius | `--amare-radius-*` | `0` |
| Container | `--amare-container-max` | `1120px` |
| Sombra | removida / não usada em conteúdo | — |

Tipografia: EB Garamond (400/500/600) self-hosted via Vite; escala display/headline/title/body/label conforme `DESIGN.md`. Componentes públicos deixam de usar `rounded-*` e shadows de cartão.

*Alternativa:* CSS inline do mockup (rejeitada: foge de `design-tokens` e quebra Tailwind/`@theme`).

### D3 — Composição da home e omissão de seções vazias

Ordem canônica:

1. Hero (settings + imagem OG/hero se houver)
2. Manifesto (copy de settings)
3. Serviços em destaque (lista editorial, não grid de cartões)
4. Portfólio em destaque (bloco escuro oliva; funde proof+cases atuais)
5. Método (4 passos: Escuta, Direção, Produção, Execução)
6. Depoimentos publicados
7. Perfil / posicionamento Amare (about + princípios)
8. CTA final → `/contato`

Seções alimentadas por collections (serviços, casos, depoimentos) **omitidas** quando vazias. Manifesto, método, perfil e CTA final permanecem (copy de settings / defaults editoriais). Um único `h1` no hero; demais seções usam `h2`/`h3`.

### D4 — Contato continua presentation-only

`/contato` e o CTA da home mostram canais de `site_settings` (e-mail, telefone, cidade, sociais). Nenhum `<form>` funcional, nenhum lead. O mockup de formulário serve só como referência visual futura para WEB-05; nesta change o bloco de contato da home é CTA editorial + link para a página de contato, não formulário embutido.

### D5 — Extensão mínima tipada de `site_settings`

Novos campos tipados (não key/value genérico):

- `logo_path` / `logo_alt` (opcional; fallback para lockup estático em `public/`)
- `hero_secondary_cta_label` (opcional)
- `hero_note` (texto curto sob CTAs)
- `manifesto_title`, `manifesto_lead`, `manifesto_body`
- `method_intro` (opcional; passos estruturados em JSON tipado ou colunas `method_step_{1..4}_{title,body}` — preferir JSONB `method_steps` validado no Filament)
- `principles` (JSONB lista de até 4 strings) **ou** quatro colunas `principle_1..4`
- Manter `about_summary`, hero atual, contato, SEO, analytics

Filament `ManageSiteSettings` ganha seções editoriais em pt-BR. Defaults no seeder alinhados ao mockup + São Paulo.

*Alternativa:* hardcode de manifesto/método nas Blade (rejeitada parcialmente: método/princípios podem ter default no view, mas copy institucional deve ser editável como o hero).

### D6 — Logo: ativo estático + campo CMS opcional

1. Converter/otimizar o PNG fornecido para WebP/SVG derivados em `public/brand/` (selo coração + lockup completo), com versões para fundo claro (oliva) e fundo escuro (papel/branco).
2. Componente `<x-brand.logo>` escolhe variante por contexto (`on-dark` / `on-light`) e expõe `alt` acessível.
3. Se `logo_path` em settings estiver preenchido, usa o upload; senão, o estático versionado.

Não redesenhar o coração facetado; não inventar polígonos decorativos genéricos.

### D7 — Depoimentos reais multipárrafo

- Seedar os 5 casais de `depoimentos.md` em `quote` (texto completo com quebras `\n\n`), `author_name`, `context` (ex.: `Casamento · 06/12/2025`), `sort_order`, `is_featured`, `published_at` conforme ambiente.
- Blade renderiza parágrafos a partir de quebras de linha; tipografia editorial (aspas, offset).
- Nota discreta no markup/admin: autorização final dos casais antes de publicação em produção.
- Remover depoimentos fictícios dos seeders de demo/visual ou substituí-los pelos reais (visual seeder usa subset determinístico, tipicamente 2 featured).

### D8 — Navegação responsiva com JS mínimo

`resources/js/app.js` ganha toggle de menu mobile (aria-expanded, `menu-open`, fechar ao navegar), espelhando o mockup. Sem framework novo. `prefers-reduced-motion` continua a anular transições não essenciais. Hover de imagem (scale leve) só quando motion permitido.

### D9 — Páginas internas como capítulos

| Rota | Tratamento |
|------|------------|
| `/servicos` | Lista editorial (número + nome + resumo), não cartões |
| `/portfolio` | Grade assimétrica / stack com captions; fundo pode usar papel profundo |
| `/portfolio/{slug}` | Caderno de caso: metadados, desafio/solução/resultado, galeria |
| `/sobre` | Perfil editorial + princípios |
| `/contato` | Canais + CTA textual (sem form) |
| `/privacidade` | Tipografia editorial sobre papel |
| 404/500 | Mesma linguagem; 500 sem internals |

### D10 — Testes e baselines

- Atualizar feature tests de home (ordem de seções, omissão, CTA → contact, `data-testid="home-primary-cta"`).
- Browser: axe nas rotas cobertas; Tab até CTA; console limpo.
- `composer visual:update` após aprovação visual local; timezone permanece `America/Fortaleza` (SPEC); copy de cidade pública passa a São Paulo.
- Fotos fixture locais continuam; filtro CSS de saturação contida via classe utilitária, não via URL externa.

## Risks / Trade-offs

- **Regeneração de 8+ snapshots** → risco de ruído no PR; mitigar com seeder visual estável e revisão humana do diff.
- **EB Garamond em forms/UI** → legibilidade de labels uppercase; mitigar com letter-spacing e peso 600 conforme DESIGN.md; validar contraste AA.
- **Depoimentos longos** → layout quebra em mobile; mitigar com tipografia responsiva e subset featured na home.
- **Autorização de depoimentos** → risco legal/reputacional; mitigar com nota explícita e `published_at` null até autorização.
- **Campos novos em site_settings** → migração + Filament; mitigar com defaults e nullable.
- **Paridade com mockup single-page** → expectativa visual vs rotas; documentar adaptação multipágina na proposta e no surface brief.

## Migration Plan

1. Migrar tokens/fontes/logo estático (sem breaking de rotas).
2. Migrar `site_settings` (colunas novas nullable + backfill de defaults).
3. Atualizar seeders (SP + depoimentos reais).
4. Trocar layout e páginas; manter contratos de testes passando incrementalmente.
5. Regenerar baselines com `composer visual:update`.
6. Rollback: reverter deploy/commit; migração down remove colunas novas; assets estáticos são aditivos.

## Open Questions

- Formato exato de `method_steps` / `principles` (JSONB vs colunas) — default recomendado: JSONB validado no Filament.
- WhatsApp/e-mail/Instagram oficiais ainda ausentes — settings continuam placeholder até o dono informar.
- Subconjunto de depoimentos na home (2 vs 5) — default: featured first, até 2 na home estilo mockup; listagem completa só se houver página dedicada (não há); home mostra todos published featured ou os N primeiros por `sort_order` (cap 2–3 para ritmo editorial).