# Lapidare Design System
Fonte de verdade visual extraída de `indica-lapidare.html`.
Arquivo CSS: `ds-lapidare.css`
---
## Como usar em novas LPs
```html
```
Isso disponibiliza todas as classes e variáveis abaixo.
O CSS específico da LP só precisa sobrescrever o que for diferente.
---
## 1. Tokens (CSS custom properties)
Declare overrides no `:root` do CSS específico quando necessário.
| Token | Valor padrão | Uso |
|---|---|---|
| `--lp-primary` | `#414141` | Títulos, nav, step numbers |
| `--lp-accent` | `#00b5b0` | CTAs, ícones, destaques, itálicos |
| `--lp-white` | `#FFFFFF` | Fundos brancos |
| `--lp-off-white` | `#bbd7d5` | Fundo geral da página |
| `--lp-light-gray` | `#E8EAED` | Fundo seções alternadas |
| `--lp-medium-gray` | `#D1D5DB` | Bordas, divisores |
| `--lp-text` | `#4B5563` | Corpo de texto |
| `--lp-dark-bg` | `#414141` | Seção escura (números, ticker) |
| `--lp-footer-bg` | `#111111` | Rodapé |
| `--lp-font` | `'Montserrat', sans-serif` | Fonte única |
| `--lp-section-pad` | `100px 5%` | Padding padrão de seção |
| `--lp-max-width` | `1200px` | Largura máxima de conteúdo |
| `--lp-radius-sm` | `8px` | Botões, campos, snum |
| `--lp-radius-md` | `12px` | Cards FAQ |
| `--lp-radius-lg` | `20px` | Cards bcol, stat |
| `--lp-radius-xl` | `25px` | Form box |
| `--lp-radius-pill` | `100px` | Badges |
| `--lp-transition` | `0.3s ease` | Hover padrão |
---
## 2. Tipografia
| Papel | Tamanho | Peso | Classe ou tag |
|---|---|---|---|
| H1 hero | `clamp(32px, 4vw, 54px)` | 800 | `.title-bottom` |
| H2 seção | `clamp(32px, 4vw, 48px)` | 800 | `h2` |
| H2 section-header | `clamp(32px, 4vw, 42px)` | 800 | `.section-header h2` |
| H3 card | `26px` | 800 | `.bcol h3` |
| Body | `1rem` / `16px` | 400 | `p` |
| Rótulo eyebrow | `11px` | 700 | `.bcol-who` |
| Nav link | `13px` | 700 uppercase | `.nav-links a` |
| Badge label | `0.75rem` | 700 | `.hero-badge span` |
| Ticker | `0.75rem` | 700 | `.tick` |
**Regra de itálico colorido:** `` dentro de `h1`, `h2`, `h3` = `font-style: italic; color: var(--lp-accent)`.
---
## 3. Cores — referência rápida
```
Primário ██ #414141 (cinza escuro quase preto)
Accent ██ #00b5b0 (teal — toda identidade visual)
Off-white ██ #bbd7d5 (fundo página)
Text ██ #4B5563 (parágrafos)
Footer ██ #111111 (rodapé)
```
---
## 4. Componentes
### 4.1 Header
```html
```
### 4.2 Badge / Rótulo de seção
```html
Texto do badge
```
> Também aceita as classes originais `hero-badge` + `hero-badge-dot`.
### 4.3 Botão Primário (CTA principal)
```html
Texto do CTA
```
Variáveis de override: `--lp-accent` (bg), altura padrão `45px`.
### 4.4 Botão Outline (CTA secundário)
```html
IR PARA O FORMULÁRIO
```
### 4.5 Section Header
```html
Rótulo
Título da seção com destaque.
```
### 4.6 Card de Benefício
```html
Para você
Título do card
Descrição...
Regra do benefício
```
### 4.7 Rule Card (regulamento)
```html
Título
Descrição da regra.
```
Hover: fundo muda para `--lp-primary`, texto branco, escala `1.05`.
### 4.8 Step (como funciona)
```html
01
Título do passo
Descrição...
```
### 4.9 Stat Card (prova social / números)
Colocar dentro de uma seção com `.lp-section-dark`:
```html
100%
Prática clínica com pacientes reais
```
### 4.10 Ticker (faixa animada)
```html
Texto 1Texto 2
```
### 4.11 Checklist
```html
Texto do item
```
### 4.12 FAQ (accordion)
Inclui o JS `tgFaq` abaixo ou copie do template.
```html
Pergunta?
Resposta...
```
### 4.13 Formulário RD Station
O formulário é embutido pelo RD Station. O design system apenas estiliza o container e os campos:
```html
```
Campos herdam `.bricks-form__input` → estilos definidos no DS.
### 4.14 Reveal (animação de entrada)
Adicione `.reveal` a qualquer elemento; o JS de observação ativa `.on` ao entrar na viewport.
```html
Conteúdo
```
JS necessário (copiar para todas as LPs):
```js
const obs = new IntersectionObserver(es => {
es.forEach(e => { if(e.isIntersecting) e.target.classList.add('on'); });
}, { threshold: .1 });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
```
---
## 5. Grids
| Classe | Colunas | Quando usar |
|---|---|---|
| `.lp-grid-2` | `1fr 1fr` | Benefícios, números, form-layout |
| `.lp-grid-3` | `repeat(3,1fr)` | Regras, features |
| `.lp-grid-auto` | `repeat(auto-fit, minmax(300px,1fr))` | Conteúdo variável |
Todos colapsam para `1fr` em mobile ≤768px automaticamente.
---
## 6. Fundos de seção
| Classe | Cor |
|---|---|
| `.lp-bg-white` | `#FFFFFF` |
| `.lp-bg-gray` | `#E8EAED` |
| `.lp-bg-dark` | `#414141` |
Alternância sugerida: branco → cinza → branco → escuro → branco → cinza.
---
## 7. Estrutura de seção tipo (template mínimo)
```html
Rótulo
Título. Destaque.
```
---
## 8. Dependências externas
| Recurso | Origem | Uso |
|---|---|---|
| Montserrat | Google Fonts (importado no DS CSS) | Fonte principal |
| Font Awesome 6 | CDN externo | Ícones (fas fa-*) |
| RD Station Forms | Script externo | Formulário de conversão |
```html
```
---
## 9. Como criar uma nova LP
1. Copie o template `template-lp.html` (se criado) ou use `indica-lapidare.html` como base estrutural.
2. Importe `ds-lapidare.css`.
3. Crie `nome-da-lp.css` — sobrescreva apenas o que diferir (hero image, copy, seções extras).
4. Reutilize as classes/tokens — evite redefinir o que já existe no DS.
5. Para mudar a cor de accent globalmente: `:root { --lp-accent: #NOVA_COR; }` no CSS da LP.
