Efeitos Visuais

O glass morphism é a linguagem visual central do dark mode da Retents. Em light mode, o efeito é substituído por superfície elevada com sombra sutil — veja Temas. Os previews de glass e blur abaixo estão intencionalmente em fundo escuro: o efeito não existe sobre branco.

Glass Card

O componente visual mais usado. Aplicado como classe utilitária .glass-card.

Dark mode

Régua anti-cancelamento

Identifica alunos em risco e aciona o contato no momento certo.

Light mode

Régua anti-cancelamento

Identifica alunos em risco e aciona o contato no momento certo.

Dark mode:

background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
border-radius: 14px;

Light mode — sem glass, com superfície elevada:

background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
border-radius: 14px;

Quando usar: Qualquer área de conteúdo destacada — features, testimonials, pricing cards, forms.

Glass Nav

Usado na barra de navegação principal.

Dark mode

Retents

ProdutoPreços

Começar

Light mode

Retents

ProdutoPreços

Começar

Dark mode:

background: rgba(0, 0, 0, 0.80);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);

Light mode:

background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px);

Blur — níveis

blur(8px)

backdropBlur-overlay

8px — Overlays leves

blur(12px)

backdropBlur-card

12px — Glass cards padrão

blur(16px)

backdropBlur-nav

16px — Navegação

blur(20px)

backdropBlur-modal

20px — Modais, overlays

Sombras

shadow-card

Cards elevados

shadow-glow

Destaques com cor brand

Token	Valor
`shadow-card`	`0 0 0 1px rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.4)`
`shadow-glow`	`0 0 40px rgba(231,88,15,0.35)`

Border Radius

rounded-sm6pxBadges, tags

rounded-md10pxInputs, botões

rounded-lg14pxCards

rounded-xl20pxModais

rounded-full9999pxBotões pill, avatares

Regras

Nunca aplique blur sobre blur — não aninhe glass cards
O blur cria custo de GPU — use com moderação em mobile
Glass card sempre sobre fundo preto ou muito escuro — sobre outros cards o efeito se perde
Em light mode, não use glass morphism — sobre fundo branco o efeito é imperceptível. Substitua por superfície com sombra sutil: box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)
shadow-glow em light mode — não use. Substitua por borda colorida: border: 1px solid rgba(201,66,8,0.30)

Veja exemplos lado a lado em Temas.