Cores

Lidas do :root. O nome da variável é o que se usa no SCSS: var(--black).

Tipografia

Outras variáveis

O que não é cor nem fonte — gutters do Bootstrap e o que o projeto acrescentar.

Ícones

Lidos de assets/svg/. Pelo nome do arquivo: get_svg('nome') devolve a URL e get_svg('nome', true), o SVG inline.

banner-sombra-linear

banner-sombra-radial

bierland-logo

chevron-direita

chevron-esquerda

contraste

email

facebook

fonte-aumentar

fonte-diminuir

fonte-restaurar

instagram

localizacao-preenchido

localizacao

lupa

menu

relogio

seta-direita

seta-fina

telefone

Componentes

Bloco manual: componente novo em main.scss precisa ganhar uma demonstração aqui.

Botão — .c-btn

O .c-btn espera um <span> para o texto; o SVG é opcional e, como os ícones do tema usam currentColor, acompanha a cor no hover. O .c-btn-quadrado muda só o arredondamento.

Botão com contorno — .c-btn.c-btn-contorno

Para fundo escuro, como o banner da página inicial. O fundo preto aqui é só da demonstração.

Tag com traço — .c-tag-linha

Rótulo acima dos títulos das seções. O traço é um ::before na cor do texto.

Tag — .c-tag

Mesma estrutura do botão, em tamanho menor. O que costuma mudar por projeto é só o background-color.

Neste projeto o header não tem os botões de acessibilidade do tema base (.btn-icone): o layout não prevê, e o estilo deles saiu do header.scss.

Formulários

Bloco manual. As cores vêm do :root, menos os ícones do select e do checkbox: eles ficam escritos no data-URI do main.scss e precisam ser trocados à mão quando a paleta mudar.

Contact Form 7 — mensagens de retorno

Classes utilitárias

Bloco manual. Todas escopadas em body #page — fora do wrapper não funcionam.

Proporções — .aspect-ratio-*

Visibilidade

Redimensione a janela para ver a troca. .custom-full-width não entra aqui: ela estoura o container para 100vw e quebraria o recorte desta página.