NANCY THAME
Guia visual com duas linhas de identidade: Campanha (oficial) e Pré-Campanha (institucional). As cores estão ligadas às Cores Globais do Divi — mude uma variável no Gestor e ela muda aqui e nos componentes do site ao mesmo tempo.
Linha 1 — Campanha
Paleta oficial da campanha, vibrante e energética: os verdes são a base — lima (primária) e verde médio (secundária) — com o verde escuro e o azul como accents, além de amarelo e laranja.
Paleta de cores — Campanha
Botões — contraste em todos os fundos
Hierarquia tipográfica (clamp / fluida)
H1 — Título principal
--nt-fs-h1 = clamp(2.25rem, 1.40rem + 3.80vw, 3.75rem)H2 — Subtítulo
--nt-fs-h2 = clamp(1.75rem, 1.20rem + 2.40vw, 2.75rem)H3 — Seção
--nt-fs-h3 = clamp(1.40rem, 1.10rem + 1.30vw, 2.00rem)H4 — Bloco
--nt-fs-h4 = clamp(1.20rem, 1.05rem + 0.70vw, 1.50rem)H5 — Rótulo
--nt-fs-h5 = clamp(1.05rem, 1.00rem + 0.30vw, 1.25rem)H6 — Miúdo
--nt-fs-h6 = clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem)Parágrafo — corpo de texto. Link de exemplo.
--nt-fs-body = clamp(1.00rem, 0.96rem + 0.25vw, 1.125rem)--nt-fs-btn = clamp(0.95rem, 0.90rem + 0.20vw, 1.05rem)
Linha 2 — Pré-Campanha
Identidade institucional/teaser: sóbria e foundational (verdes + azul institucional). Sem número e sem apelo eleitoral, para o período pré-campanha.
Paleta de cores — Pré-Campanha
Botões — contraste em todos os fundos
Guia de uso — variáveis
Uma cor fica ao vivo quando o alias var(--nt-...) aponta pro var(--gcid-...) de uma Cor Global existente no Divi. Onde diz criar Cor Global, a cor está fixa em hex até você criá-la no Gestor de Variáveis e me passar o --gcid gerado.
| Papel | Variável Divi | Alias em código | Valor | Status |
|---|---|---|---|---|
| 1 · Primária (Lima) | var(--gcid-primary-color) | var(--nt-c-primary) | #8dbf43 | ao vivo |
| 2 · Secundária (Verde médio) | var(--gcid-secondary-color) | var(--nt-c-secondary) | #67963e | ao vivo |
| 3 · Accent escuro (Verde) | var(--gcid-7rxx8yklfs) | var(--nt-c-accent-dark) | #1f4a38 | ao vivo |
| 4 · Accent (Azul) | criar Cor Global | var(--nt-c-accent-blue) | #2b3a54 | fixo |
| Link (Verde) | var(--gcid-link-color) | var(--nt-c-link) | #5f8a3a | ao vivo |
| Amarelo | criar Cor Global | var(--nt-c-yellow) | #ffd85a | fixo |
| Amarelo Escuro | criar Cor Global | var(--nt-c-yellow-deep) | #ffc73d | fixo |
| Laranja | criar Cor Global | var(--nt-c-orange) | #ef833a | fixo |
| Títulos | var(--gcid-heading-color) | var(--nt-c-heading) | #3a4657 | ao vivo |
| Corpo | var(--gcid-body-color) | var(--nt-c-body) | #6b7480 | ao vivo |
| Fundo 1 | var(--gcid-na852uss3f) | var(--nt-c-bg1) | #f7f8f4 | ao vivo |
| Fundo 2 | var(--gcid-amwxlod4oh) | var(--nt-c-bg2) | #ecefe8 | ao vivo |
| Borda | var(--gcid-5rn417n7hr) | var(--nt-c-border) | #d9decf | ao vivo |
| Papel | Variável Divi | Alias em código | Valor | Status |
|---|---|---|---|---|
| Primária (Verde) | criar Cor Global | var(--nt-p-primary) | #3d7c38 | fixo |
| Secundária (Verde Escuro) | criar Cor Global | var(--nt-p-secondary) | #007f4a | fixo |
| Accent (Azul Institucional) | criar Cor Global | var(--nt-p-accent) | #056EB3 | fixo |
| Fundo 1 | var(--gcid-na852uss3f) | var(--nt-p-bg1) | #f7f8f4 | ao vivo |
| Fundo 2 | var(--gcid-amwxlod4oh) | var(--nt-p-bg2) | #ecefe8 | ao vivo |
| Borda | var(--gcid-5rn417n7hr) | var(--nt-p-border) | #d9decf | ao vivo |
| Elemento | Variável Divi (px de referência, máx.) | Alias em código (clamp) | Mín → Máx |
|---|---|---|---|
| H1 | Tamanho H1 (60px) | var(--nt-fs-h1) | clamp(2.25rem, 1.40rem + 3.80vw, 3.75rem) |
| H2 | Tamanho H2 (44px) | var(--nt-fs-h2) | clamp(1.75rem, 1.20rem + 2.40vw, 2.75rem) |
| H3 | Tamanho H3 (32px) | var(--nt-fs-h3) | clamp(1.40rem, 1.10rem + 1.30vw, 2.00rem) |
| H4 | Tamanho H4 (24px) | var(--nt-fs-h4) | clamp(1.20rem, 1.05rem + 0.70vw, 1.50rem) |
| H5 | Tamanho H5 (20px) | var(--nt-fs-h5) | clamp(1.05rem, 1.00rem + 0.30vw, 1.25rem) |
| H6 | Tamanho H6 (17.6px) | var(--nt-fs-h6) | clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem) |
| Corpo | Tamanho Corpo (18px) | var(--nt-fs-body) | clamp(1.00rem, 0.96rem + 0.25vw, 1.125rem) |
| Botão | Tamanho Botão (16.8px) | var(--nt-fs-btn) | clamp(0.95rem, 0.90rem + 0.20vw, 1.05rem) |