Website
System
Arquitetura da homepage, ordem de seções, hierarquia tipográfica, padrões de CTA e adaptação mobile. O arquivo de referência de implementação é website/index.html.
Estrutura da Homepage
A homepage segue uma narrativa linear descendente: entrada → posicionamento → projeto → natureza → produto → lugar → lazer → conversão. Cada seção tem um único foco — nunca duas mensagens diferentes na mesma seção.
Navegação Fixa
Logo horizontal esquerda. Links centrais (6 itens). CTA "Cadastre-se" (Oliva) direita. Transparente sobre hero; fundo Areia 96% após scroll de 40px. Blur backdrop.
Hero — Split Editorial
Layout A (58/42). Esquerda: label + título RESERVA/FIGUEIRA Gazpacho Thin hero + regra + subtítulo + meta row + 2 CTAs. Direita: fotografia hero (RF-P-001) ou interim RF-TX-D02.
Manifesto — Full Viewport
Fundo: RF-TX-A02 a 35% de opacidade. Conteúdo centralizado: eyebrow + headline grande + regra + subtítulo. Sem CTA. Seção de pausa e posicionamento.
O Projeto — Split
Imagem/textura esquerda (full height). Texto direita: label 01, título, regra, 2 parágrafos, link ghost. Imagem: fotografia RF-P-002 ou RF-TX-A02.
Estatísticas — Banda
Layout D. 3 colunas: 360m², +40%, ITU|SP. Fundo RF-TX-B03 a 18%. Bordas verticais 1px Falha. Números Gazpacho Thin grandes.
Natureza — Full Bleed
Layout B. Fotografia RF-P-003 ou RF-TX-B05. Overlay gradiente escuro. Texto bottom-left. Âncora para mensagem central de natureza.
Lotes — Grid
3 colunas (lote padrão/generoso/premium). Fundo RF-TX-C01 a 22%. Números de área em Gazpacho Thin grande. Valor em Bronze. CTA header "Ver disponibilidade".
Localização — Split
Esquerda: painel de textura RF-TX-A01 com pin animado e coordenadas. Direita: título ITU|SP + tabela de distâncias + CTA. Sem sobreposição de imagens.
Lazer — 4 Cards
Grid 4 colunas. Cada card: imagem 3:4 (textura aprovada) + label categoria + nome amenidade. Hover: zoom leve na imagem.
Galeria
Layout E. 5 ativos de textura aprovados. Fundo Carvão. Lightbox ao clicar. Placeholder para fotografias aprovadas futuras.
Stand — Banda Informativa
Linha horizontal com endereço + telefone + CTA Cadastre-se. Fundo Areia Profunda. Separadores 1px Falha.
Contato — Split Conversão
Esquerda Oliva: título poético + info de contato + carimbo. Direita Areia: formulário com campos de linha inferior apenas. CTA principal Carvão full-width.
Footer
Fundo Carvão. Topo: logo + nav 3x2 + carimbo. Base: copyright + tagline. Logo com filter invert.
Padrões de CTA
Fundo: Oliva · Texto: Areia · Fonte: Montserrat 500 11px 0.18em · Padding: 1rem 2rem · Uso: ação principal de conversão
Fundo: transparente · Borda + Texto: Carvão · Hover: fundo Carvão, texto Areia · Uso: ação secundária em par com CTA Primário
Sem borda · Sem fundo · Com seta (→) animada no hover · Uso: links de seção, navegação interna editorial
Adaptação Mobile (≤ 640px)
| Elemento | Desktop | Mobile |
|---|---|---|
| Navegação | Links + CTA visíveis | Hamburger menu · Links e CTA ocultos |
| Hero | Split 58/42 lado a lado | Stack vertical: imagem topo (45svh) + texto abaixo |
| O Projeto | Split 50/50 | Stack: imagem (400px) + texto |
| Estatísticas | 3 colunas | 1 coluna com bordas horizontais |
| Lotes | 3 colunas | 1 coluna |
| Localização | Split 50/50 | Stack: painel textura (350px) + conteúdo |
| Lazer | 4 colunas | 2 colunas |
| Contato | Split 50/50 | Stack: verde + formulário |
| Fonte hero | clamp(4rem, 8vw, 8.5rem) | clamp(3.5rem, 14vw, 5rem) |
| Gutter | clamp(1.5rem, 5vw, 5rem) | 1.25rem (fixo) |
Tokens CSS de Referência
--areia: #F2EDE4;
--areia-deep: #EAE3D8;
--oliva: #3C4A35;
--carvao: #1C1C1C;
--bronze: #8C6B3E;
--falha: #C4B8A5;
--muted: #8A7E72;
/* Fontes */
--font-display: 'Gazpacho', Georgia, serif;
--font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
/* Tracking */
--track-wide: 0.15em;
--track-wider: 0.22em;
/* Espaçamento */
--gutter: clamp(1.5rem, 5vw, 5rem);
--nav-h: 80px;