Cheatsheet

Referência rápida — classes e elementos disponíveis para uso no Hero e Conteúdo das páginas.

Campo Hero (HTML direto)

Esses elementos funcionam dentro do campo Hero (HTML) no Keystatic.

Título Principal Destaque

Subtítulo com negrito e itálico.
Segunda linha com <br>.

<h1>Título Principal <span class="accent">Destaque</span></h1>
<p>Subtítulo com <strong>negrito</strong> e <em>itálico</em>.<br>Segunda linha.</p>

Tipografia (dentro de `.prose`)

Esses estilos se aplicam dentro da área de Conteúdo das páginas.

Elemento	Resultado	Tamanho / Cor
`<h2>`	Título H2	1.25rem · --brand-navy
`<h3>`	Título H3	1.05rem · --brand-navy
`<p>`	Parágrafo de texto normal com line-height 1.75.	1rem · --text
`<strong>`	Texto em negrito	font-weight 700
`<em>`	Texto em itálico	font-style italic
`<a>`	Link padrão	--brand-blue
`<hr>`		1px solid --border

Listas

Lista não ordenada <ul>

Item um
Item dois
Item três

Lista ordenada <ol>

Primeiro
Segundo
Terceiro

Classes utilitárias

Classe	Resultado	Uso
`.accent`	Texto em destaque	Qualquer elemento. Cor ciano `--brand-blue`.
`.btn .btn-primary`	Botão	Links e `<button>`. Fundo azul, texto branco.
`.localidade-tag`	São Paulo, SP	Aplicada automaticamente ao shortcode `[localidade]`. Azul + negrito.

<span class="accent">texto em destaque</span>

<a href="/contato" class="btn btn-primary">Fale Comigo</a>

Shortcode — Localidade do usuário

Exibe dinamicamente a área selecionada pelo usuário (cookie hp_area). Funciona em qualquer campo do site.

No editor de Conteúdo (Markdoc)

{% localidade /%}

{# com texto padrão customizado #}
{% localidade fallback="sua cidade" /%}

Em campos HTML (Hero, Info adicional…)

Atendimento em
<span data-localidade>sua localidade</span>

Como inserir no editor visual: clique no botão + de componentes → 📍 Localidade do usuário → defina o texto padrão.
Sem área selecionada → exibe o fallback. Com área → substitui automaticamente pelo nome do local.

Decoração do Hero

Disponível em Serviços, Categorias, Subcategorias e Páginas. Configure no campo Tipo de decoração no Keystatic.

Tipo	Comportamento	Campos
`Nenhuma`	Hero sem decoração (padrão)	—
`Imagem`	Coluna à direita do hero. Contida por altura. Mobile: oculta.	Upload da imagem + texto alternativo (alt)
`ASCII Art`	Posicionada absoluta no canto direito do hero, sem espaços. Fonte escala para caber na altura. Mobile: oculta.	Textarea com o texto ASCII

A decoração ASCII comprime o .hero-content para 56% da largura automaticamente (CSS :has()). A escala da fonte é calculada via JS após as fontes carregarem.

Galeria de imagens

Disponível nas páginas de Serviço. Aparece após o conteúdo principal e antes das informações adicionais.

Opção	Valores	Descrição
`Modo`	`grade` · `carrossel`	Grade CSS ou carousel scroll-snap (sem JS externo)
`Colunas`	`2` · `3` · `4`	Só para modo grade. Tablet → 2 cols. Mobile → 1 col.
`Proporção`	`Livre` · `16:9` · `4:3` · `1:1`	Força todas as imagens na mesma proporção via padding-top trick
`Mostrar legendas`	`sim` · `não`	Exibe o campo Legenda de cada imagem abaixo dela

Imagens armazenadas em public/images/galeria/. O carrossel tem botões ← → e dots sincronizados com swipe por toque.

Tabela

Suportada na área de Conteúdo via editor WYSIWYG.

Coluna A	Coluna B	Coluna C
Dado 1	Dado 2	Dado 3
Dado 4	Dado 5	Dado 6

Variáveis CSS (design tokens)

Use em style="" inline quando necessário.

--brand-blue#0284c7 — links, botões, accent

--brand-navy#60a5fa — headings h2/h3 no prose

--textTexto principal

--text-lightTexto secundário / muted

--bgFundo da página

--bg-sectionFundo de seções alternadas

--card-bgFundo de cards

--borderBordas padrão

--hero-bgFundo do hero

--hero-textTexto do hero

Fontes

Família	Uso	Exemplo
`Inter`	Corpo de texto padrão (`font-family: 'Inter', sans-serif`)	The quick brown fox
`JetBrains Mono`	Headings, botões, labels (`font-family: 'Ubuntu', sans-serif`)	The quick brown fox