# PhilGood · Front-end & UI

> Especificação técnica da interface: tokens, componentes, animações e regras de implementação.
> Referência: philgood.com.br (Next.js 16 + Tailwind CSS 4, export estático no Cloudflare).
> Versão 1.0 · setembro de 2026

---

## Stack

- **Next.js 16** (App Router) com `output: "export"` → site 100% estático
- **Tailwind CSS 4** com tokens em `@theme`
- Fontes via `next/font/google` (auto-hospedadas no build)
- Bilíngue por rota: `/pt/…` e `/en/…`
- Sem bibliotecas de animação: CSS + um pouco de JS (IntersectionObserver e canvas)

## Tokens

```css
@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-type: var(--font-typewriter), "Courier New", monospace;   /* Special Elite */
  --font-chunky: var(--font-chunky), Georgia, serif;               /* Fraunces, só logo */
  --font-signature: var(--font-signature), cursive;                /* Homemade Apple */

  --color-paper: #f6f1e7;      --color-paper-2: #efe8da;   --color-paper-3: #e8e0cf;
  --color-card: #fbf8f1;
  --color-ink: #23262d;        --color-ink-soft: #3d3f45;  --color-ink-muted: #6b6a66;
  --color-line: #dcd3c1;       --color-line-strong: #c7bca7;

  --color-marker: #f5d985;     /* destaque amarelo */
  --color-moss: #2f5d3a;       --color-moss-hover: #264d30;
  --color-sage: #447759;       /* blocos de cor, contraste AA com texto creme */
  --color-sprout: #cfe6c8;     --color-sun: #f7dc8a;       --color-sand: #ead9c4;

  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}
```

Tags de categoria usam os tons pastel do Notion (azul, laranja, marrom, roxo, rosa, verde, amarelo), sempre com texto na versão escura do mesmo tom.

## Tipografia na UI

| Elemento | Classe | Tamanho (mobile → desktop) |
|---|---|---|
| H1 hero | `.type` | 42 → 60 px, entrelinha 1,14 |
| H2 seção | `.type` | 34 → 46 px |
| Sobretítulo | `.type` caixa alta, tracking 0,12em | 14 px, `ink-muted` |
| Texto | Inter | 17–18 px, entrelinha 1,6, `ink-soft` |
| Nav | `.type` caixa alta, tracking 0,1em | 13 px |
| Botão | `.type` caixa alta, tracking 0,1em | 13–16 px |

Títulos aceitam `*palavra*` no texto, que vira o destaque amarelo (componente `Accent`).

## Componentes

### Botão-carimbo (`.btn-stamp`)
```css
border: 2px solid ink; background: moss; color: paper;
box-shadow: 4px 4px 0 ink; transform: rotate(-1deg);
/* hover: translate(2px,2px) + sombra 2px | active: translate(4px,4px) + sombra 0 */
```
Variante clara: `.btn-stamp.is-light` (fundo cartão; hover amarelo).

### Link secundário
Texto `.type` com `.hl` (marca-texto) + seta desenhada à mão (`HandArrow`) que anda 4 px no hover.

### Marca-texto (`.hl`)
- Fundo = SVG de pincelada (`--brush`) com borda irregular e riscas
- Entra em `background-size: 0% → 100%` em 0,9 s quando o bloco `.reveal` fica visível
- `.hl-hover`: mesma pincelada, aparece no hover (menu)

### Card de projeto
- Borda 2 px `ink/80`, fundo cartão, sem raio de borda
- Hover: `translate(-2px,-2px)` + `box-shadow: 5px 5px 0 ink`
- Capa 4:3 (grade) ou 16:9 (destaque). Diagramas usam `object-contain`
- Destaques: 8 no desktop (4 colunas), 6 no celular (2 colunas)
- Demais projetos: linha horizontal compacta com ícone à esquerda

### Filtros
Faixa horizontal **arrastável** (`DragScroll`): sem barra de rolagem, `cursor: grab / grabbing`, um arraste não dispara clique, rolagem nativa no toque.

### Ícones
- SVG 64 × 64, traço 2,4, `stroke-linecap/linejoin: round`, filtro `#ink-brush` (leve deslocamento)
- Sobre `SoftCircle` (forma orgânica 46%/54%…) em sun, sprout ou sand

### Selo
SVG circular com texto em `textPath`, anel tracejado e monograma Pg sobre borrão verde. Animação `soft-float` (sem rotação).

### Header
Sticky, transparente no topo; com scroll ganha `paper/92` + blur + linha inferior. Logo à esquerda, nav em máquina de escrever, idioma com bandeira SVG, botão-carimbo.

## Movimento

| Efeito | Onde | Detalhe |
|---|---|---|
| Reveal | Blocos `.reveal` | `opacity 0→1`, `translateY 14px→0`, 0,7 s `ease-soft`, atraso escalonado de 60–90 ms |
| Desenho do traço | Ícones `.draw-on` | `stroke-dashoffset 1→0` em 1,5 s (`pathLength=1`) |
| Flutuar | Círculos e selo | `soft-float` 7 s, ±4 px, ±2,5° |
| Ferver | Hover do ícone | filtro `#ink-boil` com `feTurbulence` trocando a semente a cada 0,11 s + balanço de 0,9 s |
| Datilografar | "Oi, eu sou o Phil." | 55–125 ms por letra; cursor de 1,5 px piscando |
| Campo de tinta | Fundo do hero | Canvas com traços de nanquim (espaçamento 36 px) que formam anéis em volta do mouse, seguidos com atraso (`follow 0,075`); com o mouse parado o anel respira e boia; pausa fora da tela |

**Sempre** respeitar `prefers-reduced-motion`: sem animações, tudo visível e estático.

## Texturas

- `.paper-texture`: camada fixa com `feTurbulence` (grão), opacidade 0,6
- `.noise`: pseudo-elemento com ruído em `mix-blend-mode: overlay`, opacidade 0,45 (blocos de cor)
- Trama de pontinhos: `radial-gradient` 1,2 px a cada 26–28 px

## Layout

- Container `max-w-6xl`, gutter de 16 px no mobile e 24 px no desktop
- Seções com `py-16` → `sm:py-24`; faixas alternadas em `paper-2/60` com borda de 2 px `ink/10`
- Grade: 1 → 2 → 4 colunas
- Sem rolagem horizontal em 375 px

## Acessibilidade

- Contraste AA: texto creme sobre sálvia `#447759` = 4,6:1; tinta sobre papel acima de 12:1
- Foco visível: `outline 2px moss`, deslocamento de 3 px
- Link "Pular para o conteúdo"; `aria-pressed` nos filtros; `aria-hidden` nos SVGs decorativos
- Imagens de conteúdo com `alt`; ícones decorativos sem

## Performance

- Export estático + CDN da Cloudflare
- Imagens em **WebP** (1600 px, q80, ~100–150 KB), `loading="lazy"`
- Fontes com `display: swap`, subsetting latin
- Nenhum JS de terceiros (analytics da Cloudflare sem cookie)

## Não fazer

- ❌ `border-radius` grande em cards (a marca é "papel", cantos retos)
- ❌ Sombras com desfoque (`blur`): só sombra dura deslocada
- ❌ Animações longas ou em loop chamativo (tudo sutil e com propósito)
- ❌ Emoji de bandeira (não aparece no Windows): usar SVG
- ❌ Fraunces fora do logo