# Aparência — tema do site e estilo por seção

Paleta e fontes do site inteiro, e o visual fino de cada seção.

Fonte: https://docs.altaris.love/artigo/aparencia-e-tema/

A aparência funciona em duas camadas: o **tema** (vale para o site inteiro) e a **aparência por seção** (o acabamento de cada bloco).

## O tema do site

No painel **Tema e cores** do editor (em **Criar**, no trilho à esquerda; no celular, no atalho do topo da lista de seções) vocês escolhem as cores (primária, secundária, destaque, fundo, texto) e as fontes de título e de texto. Todas as seções seguem o tema automaticamente — troque a cor primária e o site inteiro acompanha, sem retrabalho.

São **29 fontes**, organizadas em quatro grupos para vocês procurarem pelo jeitão e não pelo nome:

- **Serifadas** — as clássicas de convite (Playfair Display, Cormorant Garamond, EB Garamond, Libre Baskerville, Bodoni Moda, Marcellus, Cinzel, Lora);
- **Sem serifa** — as limpas e modernas (Inter, Montserrat, Lato, Raleway, Poppins, Nunito, Josefin Sans, Oswald);
- **Caligráficas e manuscritas** — Great Vibes, Parisienne, Sacramento, Pinyon Script, Alex Brush, Tangerine, Dancing Script, Caveat, Amatic SC;
- **Marcantes** — para quem quer personalidade (Abril Fatface, Yeseva One, Special Elite e Courier Prime, essas duas com cara de máquina de escrever).

Tem também a **fonte dos nomes**: uma fonte só para os nomes (do casal, da aniversariante…), na capa e no topo do site. É onde as **caligráficas** costumam entrar — o efeito de convite escrito à mão, sem deixar o site inteiro cursivo (títulos e textos continuam nas fontes de sempre). Deixando "Igual aos títulos", nada muda.

Não sabem por onde começar? Os **presets** (Clássico, Botânico, Minimalista, Praia, Vinho, Lavanda…) aplicam uma combinação pronta de cores e fontes com um clique — e continuam ajustáveis depois.

## Aparência por seção

Cada seção tem um bloco **Aparência** no formulário, com:

- **Cores**: claro, suave (fundo levemente colorido), cor principal, cor secundária ou **cor livre** (a sua) — alternar esquemas entre seções vizinhas dá ritmo visual ao site;
- **Cor dos títulos** e **cor dos textos**: a cor de um texto só desta seção, escolhida entre as cores do tema ou livre. O site continua se recolorindo sozinho quando vocês trocam o tema, porque a escolha é a _cor do tema_, não um código fixo;
- **Fonte dos títulos** e **fonte dos textos**: as mesmas 29 famílias, só nesta seção. Dá para deixar o "Bem-vindos" em caligráfica e o resto do site como está;
- **Textura de fundo**: pontos, linhas ou papel, bem sutis;
- **Alinhamento e espaçamento** do conteúdo;
- **Divisória de topo**: curva, diagonal ou pétalas fazendo a transição da seção anterior;
- **Ornamento e ícone**: detalhes gráficos, incluindo um **monograma** com as iniciais;
- **Estilo de botão e animação de entrada** dos elementos.

A galeria tem ainda o **formato das fotos** (polaroid, arco, círculo, filete, sombra) — e a capa, o controle **Escurecer a foto**: um véu na cor primária sobre a imagem de fundo, ajustável de 0 a 90%. Texto difícil de ler na capa? Suba o controle.

## CSS personalizado (avançado)

Para quem sabe CSS (ou tem alguém que sabe): nos planos **sem a marca no rodapé**, a tela **Configurações do site** (em **Conta e ajustes**) ganha um campo de **CSS personalizado** — um bloco de estilos aplicado por cima do tema, no site publicado. Ao contrário do tema, ele vale na hora, sem publicar.

Vale o aviso da própria tela: é um recurso **sem suporte**. As classes internas do site podem mudar sem aviso; prefiram seletores próprios e as variáveis de tema (`--wed-primary`, `--wed-bg`…), que são estáveis. Para 99% dos ajustes, o tema e a aparência por seção acima chegam lá sem escrever uma linha de código.

## Dicas rápidas

- Menos é mais: escolham 1–2 divisórias e repitam — o site fica coeso.
- O esquema **cor principal** em uma seção no meio do site (ex.: a galeria) cria um destaque bonito sem esforço.
- Cor de texto e fonte por seção rendem mais quando usadas com parcimônia: uma seção com voz própria chama atenção; cinco seções diferentes viram bagunça.
- Não dá para escolher uma cor de texto ilegível: se a cor escolhida não tiver contraste suficiente com o fundo daquela seção, nós clareamos ou escurecemos o tom o mínimo necessário para o convidado conseguir ler — a cor continua sendo a de vocês, só na medida que funciona. Título aceita mais liberdade que parágrafo, porque letra grande já é mais fácil de ler.
- Uma cor clara só aparece clara sobre um fundo escuro. Se a seção é clara e vocês pedem um tom claro no texto, ele sai escurecido — não é defeito, é a única versão daquela cor que dá para ler ali. Para um título claro de verdade, deixem a seção com o esquema **cor principal**, **secundária** ou **cor livre** e escolham "Clara".
- **Na capa com foto é diferente, e é o que vocês provavelmente querem**: ali quem se ajusta é o véu por cima da foto, não o texto. Escolham "Clara" nos títulos e nos textos e a capa fica com letras claras sobre um véu mais escuro — a capa clássica. Se a foto for muito clara e o texto ficar competindo com ela, subam o **"Escurecer a foto"**.
- As animações de entrada respeitam quem prefere menos movimento (configuração do celular do convidado) — e o site funciona perfeitamente sem elas.
- Tudo isso é rascunho até [publicar](https://docs.altaris.love/artigo/publicar-seu-site/): testem combinações à vontade.