Guia de estilo – Direito

Cores

Paleta primitiva e aliases semânticos. Usar sempre as variáveis CSS, nunca os valores hex diretamente.

Primitivas — Azul

Blue 100

#f2f4f8

--p-blue-100

Blue 200

#d8e2f5

--p-blue-200

Blue 300

#4764af

--p-blue-300

Blue 400

#5155bd

--p-blue-400

Blue 500

#353887

--p-blue-500

Blue 600

#2f337e

--p-blue-600

Blue 700

#16254c

--p-blue-700

Primitivas — Neutro & Accent

Neutral 100

#e4e8ef

--p-neutral-100

Neutral 200

#4e5a66

--p-neutral-200

Neutral 300

#3e4149

--p-neutral-300

Neutral 400

#2e3640

--p-neutral-400

Neutral 500

#1e2530

--p-neutral-500

Yellow 500

#ecdd12

--p-yellow-500

White

#ffffff

--p-white

Semânticas

Brand Primary

#2f337e

--brand-primary

Brand Accent

#ecdd12

--brand-accent

Text Default

#1e2530

--text-default

Text Secondary

#2e3640

--text-secondary

Text Muted

#4e5a66

--text-muted

Text Heading

#3e4149

--text-heading

Text on Dark

#ffffff

--text-on-dark

BG Default

#ffffff

--bg-default

BG Subtle

#f2f4f8

--bg-subtle

BG Muted

#d8e2f5

--bg-muted

Border Default

#e4e8ef

--border-default

Interactive

#4764af

--interactive

Interactive Hover

#353887

--interactive-hover

Tipografia

Dois typefaces: Lora (display/headings) e Montserrat (body/UI).

Display — Lora

Título principal H1

Título de seção H2

Subtítulo H3

Variante itálica para citações

Body — Montserrat

Texto de corpo regular (400) — O curso de Direito da UNAERP forma profissionais com sólida base jurídica e humanística.

Texto secundário small (14px) — Informações complementares e metadados.

Label / overline (12px, uppercase)

Texto em negrito (700) — Destaque importante.

Escala de tamanhos

--fs-xs
12px

Aa — Direito UNAERP

--fs-sm
14px

Aa — Direito UNAERP

--fs-base
16px

Aa — Direito UNAERP

--fs-md
18px

Aa — Direito UNAERP

--fs-lg
20px

Aa — Direito UNAERP

--fs-xl
24px

Aa — Direito UNAERP

--fs-2xl
32px

Aa — Direito UNAERP

--fs-3xl
40px

Aa — Direito UNAERP

Espaçamento

Escala múltipla de 8px. Nunca usar 5px, 10px, 20px, 30px.

8px Micro — ícone/badge padding

16px XS — gap interno, gap-sm

24px SM — padding de botão, espaço entre itens

32px MD — gap de grid, wrap padding

40px LG — espaço entre seções internas

48px XL — footer, blocos compactos

64px 2XL — padding de seção (--sec-pad)

96px 3XL — padding de seção grande

Variáveis de layout

--max: 1184px --sec-pad: 64px --wrap-px: 32px --gap: 32px --gap-sm: 16px --r: 6px

Botões

Dois componentes de botão: .vcard-btn para ações em cards, e .pb-btn para o bloco de CTA do page builder.

vcard-btn — primário (cards)

Cards

Componente base .pb-card com variante para fundo escuro.

Card padrão (fundo claro)

Título do Card

Descrição breve do item, explicando o conteúdo de forma objetiva.

Outro Card

Mais um exemplo de card com ícone Phosphor e texto descritivo.

Terceiro Card

Terceiro item da grade, mostrando o alinhamento e o espaçamento.

Card dark (fundo navy)

Título do Card

Descrição no modo escuro, com texto em branco semi-transparente.

Outro Card Dark

Exemplo de card na variante escura.

Terceiro Dark

Grade de três colunas colapsa para uma no mobile.

Fundos de Seção

Quatro variantes de fundo usadas nos blocos do page builder.

White

bg = white · background: var(--bg-default) · Fundo padrão

Gray

bg = gray · background: var(--bg-subtle) · Fundo alternado

Navy

bg = navy · Gradiente Navy → Deep · dark = true

Azul

bg = azul · Gradiente Deep → Mid · dark = true

Padding de seção

none → 0 xs → 16px sm → 32px md → 64px (padrão) lg → 96px

Gradientes

Gradientes canônicos do tema. Usar sempre estes — não criar novos.

Navy → Deep (150deg)
Seções navy, header hero

Deep → Mid (145deg)
Seções azul

Navy → Blue (150deg)
Variante alternativa

Ícones

Biblioteca Phosphor Icons. Usar sempre o peso ph (regular). Para ênfase, ph-bold.

Uso frequente no projeto

Direito ph-scales

Conteúdo ph-book-open

Formação ph-graduation-cap

Carreira ph-briefcase

Instituição ph-buildings

Professores ph-users

Certificado ph-certificate

Localização ph-map-pin

Contato ph-phone

E-mail ph-envelope

Horário ph-clock

Data ph-calendar-blank

CTA ph-arrow-right

Confirmação ph-check-circle

Info ph-info

Destaque ph-star

Depoimento ph-chat-text

Documento ph-file-text

Aluno ph-student

Notícia ph-newspaper

Vídeo ph-video

Imagem ph-image

Accordion ph-caret-right

Lista ph-list

Tamanhos recomendados

16px inline 24px card 32px destaque 48px hero ícone

Blocos do Page Builder

Cada bloco é um layout ACF Flexible Content. Arquivo em resources/views/blocks/builder/.

Título

bloco_titulo

_titulo.twig

Texto

bloco_texto

_texto.twig

Imagem

bloco_imagem

_imagem.twig

Botão / CTA

bloco_botao

_botao.twig

Cards

bloco_cards

_cards.twig

Professores

bloco_professores

_professores.twig

Acordeão

bloco_acordeao

_acordeao.twig

Texto 2 Colunas

bloco_texto_2col

_texto-2col.twig

Texto + Foto

bloco_texto_foto

_texto-foto.twig

Carrossel

bloco_carrossel

_carrossel.twig

Carrossel de Vídeo

bloco_carrossel_video

_carrossel-video.twig

Vídeo

bloco_video

_video.twig

Campos globais de cada bloco

      bg → white | gray | navy | azul

      padding_top → none | xs (16px) | sm (32px) | md (64px) | lg (96px)

      padding_bottom → none | xs | sm | md | lg

      dark → true quando bg = navy ou azul (automático no Twig)