Visual
Materiais de vidro
A marca é de vidro — então as superfícies da marca são de vidro. Não é moda de interface: é o produto virando linguagem. Quem passa o dia trocando para-brisa já sabe que vidro tem tipo, tem espessura, tem película. Aqui os nomes vêm da oficina de propósito — laminado, fumê, fosco — porque é assim que a casa fala.
São seis materiais. Cada um tem uma função e um lugar. Usados juntos, sem critério, viram sopa borrada — por isso este capítulo é curto e duro: o que é, onde vai, e onde nunca vai.
Os seis materiais
Todos vivem em globals.css, no namespace .vidro-*. Não recrie nenhum à mão: aplique a classe. Os espécimes abaixo estão renderizados ao vivo, sobre o fundo rico oficial (gradiente do hero + padrão gráfico).
Cristal
.vidro-cristal
Cristal
O mais limpo — quase invisível, só insinua a superfície.
Use em: Chips, pills, realce leve sobre o hero.
- fundo rgba(255,255,255,0.10)
- blur(12px) saturate(150%)
- borda 1px rgba(255,255,255,0.22)
Laminado
.vidro-laminado
Laminado
O padrão. Como o para-brisa: camadas.
Use em: Card de conteúdo sobre azul ou gradiente.
- fundo rgba(255,255,255,0.14)
- blur(20px) saturate(170%)
- borda 1px rgba(255,255,255,0.28)
Fosco
.vidro-fosco
Fosco
Leitura densa. Mais opaco, sem perder o vidro.
Use em: Card com parágrafo sobre foto ou hero.
- fundo rgba(255,255,255,0.90)
- blur(24px) saturate(180%)
- borda 1px rgba(255,255,255,0.70)
Fumê
.vidro-fume
Fumê
Vidro escurecido, como o insulfilm.
Use em: Sobre foto clara ou fundo ruidoso demais.
- fundo rgba(11,42,126,0.42) — o --az-deep
- blur(20px) saturate(160%)
- borda 1px rgba(255,255,255,0.16)
Âmbar
Vidro no tom da marca. Acento, não superfície.
Use em: Destaque e CTA — com moderação.
- gradiente 135°, rgba(245,200,0,0.26) → 0.10 — o --am
- blur(20px) saturate(180%)
- borda 1px rgba(245,200,0,0.42)
O sexto é o Reflexo — ele não é uma superfície, é um comportamento: some sobre os outros cinco. Está documentado na seção “Reflexo”, mais abaixo. Não confunda com .glass-*: aquele namespace é a voz da Apol no admin, este é a voz do Alemão. Um não encosta no outro.
A regra de ouro
Vidro só sobre fundo rico. Azul, gradiente, foto ou padrão gráfico. Sobre branco ou gelo, use card sólido — e ponto. O motivo é honesto e mecânico: o blur precisa de algo pra borrar. Sobre branco não há nada atrás, o efeito simplesmente não acontece, e o que sobra é um retângulo lavado com o texto perdendo contraste. Isto é acessibilidade (WCAG AA), não gosto.
Visão limpa
O blur tem gradiente e padrão pra borrar.
Visão limpa
Não há nada atrás pra borrar. O texto sumiu.
Os dois cards acima são a mesma classe, o mesmo texto, a mesma opacidade. À direita não há efeito nenhum: só um texto branco quase ilegível num quadrado esbranquiçado. Não é um bug de CSS — é o vidro fazendo exatamente o que vidro faz quando não há paisagem do outro lado.
Contraste
Qual cor de texto vai sobre cada material. Não é sugestão: fora desta tabela, reprova AA.
| Material | Cor do texto | Por quê |
|---|---|---|
| .vidro-cristal | Branco | Fundo rico aparece quase inteiro — só branco aguenta |
| .vidro-laminado | Branco | 14% de véu branco sobre azul: o fundo ainda é escuro |
| .vidro-fume | Branco | Escurecido de propósito (azul profundo a 42%) |
| .vidro-fosco | --tinta #10203F | É o único claro (90% branco) — texto escuro, nunca branco |
| .vidro-ambar | Branco — só sobre --az / --az-deep | Sobre o miolo claro do gradiente do hero nem branco (4.1:1) nem --tinta (3.9:1) passam. Âmbar é acento sobre azul chapado, não sobre luz. |
| Amarelo como texto sobre vidro claro | ✕ Nunca | 1.6:1 — reprova AA. Amarelo só é texto sobre azul/escuro |
Atalho mental: vidro escuro pede texto branco, vidro claro pede --tinta. O único material claro do sistema é o Fosco. Se você está prestes a escrever branco sobre Fosco, pare — o material errado foi escolhido, não a cor.
Reflexo
O grafismo-assinatura da marca — a faixa diagonal de luz — virado interação. É o único material que não é uma superfície: é um facho que atravessa o vidro quando a pessoa passa o mouse ou navega pelo teclado.
Passe o mouse aqui
A luz atravessa uma vez, na diagonal — igual ao reflexo do sol num para-brisa.
| Propriedade | Valor |
|---|---|
| Gradiente | linear-gradient(105°, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%) |
| Percurso | translateX(-130%) → translateX(130%) |
| Duração e curva | 700ms cubic-bezier(0.22, 1, 0.36, 1) |
| Gatilhos | :hover e :focus-within — teclado dispara igual ao mouse |
| prefers-reduced-motion | O facho é removido por completo (display:none). O card continua legível. |
Reflexo é acompanhante, não sozinho. Ele é só posicionamento e overflow — combine com um material de superfície (.vidro-laminado .vidro-reflexo). E vale a mesma regra do padrão gráfico, documentada em Padrão gráfico: um facho por composição. Dez cards piscando ao mesmo tempo não é assinatura, é pisca-pisca.
Quando NÃO usar vidro
Um material bom usado no lugar errado estraga a peça. Estes quatro casos são os que mais aparecem — e em todos eles a resposta é card sólido.
Sobre fundo branco ou gelo
O blur não tem o que borrar e o texto perde contraste. Não há ajuste que salve — troque por card sólido com borda --linha.
Texto corrido longo
Ler três parágrafos sobre um fundo que se mexe cansa. Se o texto é o protagonista, use .vidro-fosco (90% opaco) ou saia do vidro de vez.
Aparelho fraco
backdrop-filter custa GPU e o público abre isto no celular. Não empilhe dez vidros na mesma tela: dois ou três por vista, com folga.
Navegador sem suporte
Já resolvido: o @supports em globals.css derruba tudo pra opaco legível (azul profundo a 72%, fosco a 97%). Não escreva fallback novo — ele já existe.
Teste rápido de bolso: tire o vidro e coloque um retângulo sólido no lugar. Se a peça não piorou, ela não precisava de vidro.
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Vidro só sobre fundo rico: azul, gradiente, foto ou padrão gráfico
- Aplicar a classe .vidro-* pronta — nunca reescrever o blur à mão
- Branco sobre cristal/laminado/fumê; --tinta sobre fosco
- Dois ou três vidros por tela — backdrop-filter custa GPU no celular
- Reflexo combinado com um material de superfície, um por composição
Nunca
- Vidro sobre branco ou gelo (o efeito some e o texto reprova AA)
- Amarelo como texto sobre vidro claro — 1.6:1, reprova AA
- Texto branco sobre .vidro-fosco (ele é o material claro do sistema)
- Misturar .vidro-* com .glass-* do admin — são marcas diferentes
- Empilhar vidro sobre vidro pra criar profundidade — vira borrão
Recursos
Use sempre os arquivos oficiais — nunca redesenhe.
