/* ============================================================================
LIQUID GLASS — núcleo do sistema de superfície
Ecossistema Clínica Dr. Reges Jr. (site + ERP)
----------------------------------------------------------------------------
Estética "vidro jateado" (Frosted Glass): formas geométricas com canto
levemente arredondado, superfícies translúcidas de alta refração, luz de
borda e profundidade Z.
ESTE ARQUIVO NÃO CONHECE NENHUMA TELA. Ele só publica tokens e utilitários.
Quem amarra isso às classes existentes são as camadas de mapeamento:
site → assets/liquid-glass-site.css
ERP → css/liquid-glass-erp.css
CÓPIA DUPLA PROPOSITAL: site e ERP são dois deployables independentes
(o site é HTML estático; o ERP é servido pelo Express). Este arquivo existe
em dois caminhos e os dois devem ser trocados juntos:
~/Desktop/Reges Jr Clinic/Códigos_e_Projetos/assets/liquid-glass.css
~/clinica-erp/public/css/liquid-glass.css
Conferir com `md5 -q` nos dois antes de publicar.
ORDEM DE CARGA IMPORTA. As páginas do site têm um bloco de estilo inline no
; este arquivo entra DEPOIS do fechamento dele. Com isso as regras de
mesma especificidade vencem por ordem e não precisamos de `!important`.
NÃO ESCREVA A TAG DE FECHAMENTO DE ESTILO POR EXTENSO NESTE ARQUIVO, nem
dentro de comentário. No site este CSS é EMBUTIDO no HTML por
`assets/embutir-tema.mjs`, e a sequência literal encerraria o elemento no
meio do tema — as 9 páginas quebrariam em silêncio, cuspindo o resto do CSS
como texto na tela. O gerador tem uma guarda que recusa o arquivo se ela
aparecer; foi ela que pegou este caso.
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* --- Espectro: ciano, cobalto, ametista ------------------------------
São as três cores pedidas para o gel. Ficam como tokens separados dos
tokens de vidro porque o vidro é composto (cor + alfa + mistura) e a
cor sozinha também é usada em texto, foco e gráfico. */
--lg-ciano: #e0e0e0;
--lg-ciano-fundo: #b0b0b0;
--lg-cobalto: #8a8a8a;
--lg-cobalto-fundo: #5c5c5c;
--lg-ametista: #4a4a4a;
--lg-ametista-fundo: #262626;
/* Abismo: o plano de fundo sobre o qual o vidro flutua. Preto profundo
puro, por pedido do cliente. */
--lg-abismo: #000000;
--lg-abismo-alto: #141414;
/* --- Acento da marca --------------------------------------------------
O brasão RJ é um SVG com gradiente dourado (#F3E5AB → #CBA730 → #AA8A2A)
e os ícones do ERP foram gerados a partir dele. Trocar o acento para azul
deixaria um brasão dourado solto no meio de uma interface fria, parecendo
defeito. Então o dourado PERMANECE como acento sobre o vidro azul: é o
contraste quente/frio que sustenta a composição, e é o único ponto em que
a identidade do cliente sobrevive à troca de paleta.
Ver [[regisjr-marca]] antes de mexer. */
--lg-acento: #CBA730;
--lg-acento-claro: #F3E5AB;
--lg-acento-fundo: #AA8A2A;
/* --- Tinta ------------------------------------------------------------ */
--lg-tinta: #eef4ff;
--lg-tinta-media: rgba(226, 236, 255, 0.72);
--lg-tinta-fraca: rgba(210, 224, 250, 0.52);
/* --- Corpo do vidro ---------------------------------------------------
Três densidades. A escolha não é estética, é de legibilidade: quanto mais
texto a superfície carrega, mais densa ela precisa ser para o fundo não
competir com as letras.
fina → chips, badges, barras (pouco texto, muito fundo aparente)
media → cartões e painéis (o caso comum)
densa → modais e formulários (texto longo, leitura contínua) */
--lg-vidro-fino:
linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 42%,
rgba(138, 138, 138, 0.07) 78%, rgba(74, 74, 74, 0.09));
--lg-vidro-medio:
linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045) 38%,
rgba(224, 224, 224, 0.07) 62%, rgba(138, 138, 138, 0.11) 82%,
rgba(74, 74, 74, 0.13));
--lg-vidro-denso:
linear-gradient(155deg, rgba(14, 14, 14, 0.82), rgba(14, 14, 14, 0.86) 45%,
rgba(14, 14, 14, 0.88)),
linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 50%,
rgba(74, 74, 74, 0.10));
/* --- Refração ---------------------------------------------------------
saturate() é o que separa vidro de véu cinza — mesma lição já registrada
no cabeçalho da home. brightness() acima de 1 devolve o brilho que o blur
come. Não baixar o saturate abaixo de 150% sem olhar o resultado. */
--lg-refracao-leve: blur(14px) saturate(165%) brightness(1.06);
--lg-refracao: blur(26px) saturate(185%) brightness(1.08);
--lg-refracao-densa: blur(40px) saturate(200%) brightness(1.05);
/* --- Luz de borda (rim light) ----------------------------------------- */
--lg-rim: rgba(255, 255, 255, 0.22);
--lg-rim-forte: rgba(255, 255, 255, 0.42);
--lg-rim-fria: rgba(224, 224, 224, 0.34);
--lg-rim-quente: rgba(203, 167, 48, 0.38);
/* --- Escada de profundidade (Z-depth) ---------------------------------
Sombra difusa global + sombra de contato curta. As duas juntas é o que
faz a peça parecer flutuar em vez de estar colada; só a difusa dá aspecto
de adesivo. */
--lg-sombra-1:
0 1px 2px rgba(0, 0, 0, 0.30),
0 8px 24px -8px rgba(0, 0, 0, 0.42);
--lg-sombra-2:
0 2px 6px rgba(0, 0, 0, 0.34),
0 18px 48px -14px rgba(0, 0, 0, 0.55),
0 0 60px -20px rgba(138, 138, 138, 0.35);
--lg-sombra-3:
0 4px 10px rgba(0, 0, 0, 0.38),
0 34px 90px -22px rgba(0, 0, 0, 0.68),
0 0 110px -30px rgba(74, 74, 74, 0.40);
/* Brilho interno: o "corpo" do vidro. inset no topo = onde a luz entra;
inset embaixo = o fundo da gota, onde a cor acumula. */
--lg-interno:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
inset 0 -1px 0 rgba(255, 255, 255, 0.06),
inset 0 -24px 48px -30px rgba(74, 74, 74, 0.45);
/* --- Morfologia: retângulo com canto leve ------------------------------
Vidro jateado (Frosted Glass): forma geométrica única — quadrado ou
retângulo — com canto uniformemente arredondado entre 8px e 12px. Sem
raios elípticos, sem assimetria entre cantos: nenhuma peça troca de
silhueta com a vizinha nem "escorre" para outra forma ao interagir.
Os nomes (gota-1..4, seixo-1..2, mercúrio/mercúrio-alt) continuam
existindo como categorias de escala — grande, pequena, ícone — só que
cada categoria agora resolve para um único valor fixo. */
--lg-gota-1: 10px;
--lg-gota-2: 10px;
--lg-gota-3: 10px;
--lg-gota-4: 10px;
/* Peças pequenas (chips, botões, campos): mesma lógica, escala menor. */
--lg-seixo-1: 8px;
--lg-seixo-2: 8px;
/* Ícones e avatares: quadrado com canto leve. */
--lg-mercurio: 10px;
--lg-mercurio-alt: 10px;
/* --- Tipografia -------------------------------------------------------
Urbanist (Google Fonts) no lugar de Tinos. O pedido original era "Quiche
Sans", mas é família comercial sem licença/arquivo disponível neste
projeto — mesma situação da Adobe Fonts "nimbus-roman-no9-l" resolvida
trocando por Tinos. Urbanist (licença OFL, gratuita) tem range completo
de pesos com itálicos REAIS em cada peso (não é negrito/itálico
sintético do navegador), o que permite a mesma hierarquia fina pedida
para o Quiche Sans: títulos em Bold, destaques/subtítulos em
Thin/Light itálico, corpo em Regular/Light, UI em Medium.
Tinos só tinha 400 e 700 como arquivo, por isso leve/normal colapsavam
no mesmo valor. Com Urbanist os cinco pesos abaixo são todos distintos —
qualquer seletor que herdava --lg-peso-leve num TÍTULO ficará visualmente
mais claro que antes; foi por isso que cada consumidor destes tokens,
neste arquivo, foi revisto um a um (ver seção 6). */
--lg-fonte: "Urbanist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--lg-peso-thin: 100;
--lg-peso-leve: 300;
--lg-peso-normal: 400;
--lg-peso-medio: 500;
--lg-peso-forte: 700;
--lg-tracking-amplo: 0.055em;
--lg-tracking-titulo: 0.02em;
/* --- Camadas ----------------------------------------------------------
Reproduz a escada que o site JÁ usa. O cabeçalho é 1000 de propósito
porque os modais são 2000/3000 e precisam passar por cima dele —
elevar o cabeçalho esconde os modais. Não é folga, é contrato. */
--lg-z-caustica: 0;
--lg-z-base: 1;
--lg-z-elevado: 10;
--lg-z-fixo: 1000;
--lg-z-acao: 2000;
--lg-z-portal: 3000;
--lg-transicao: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
/* Posição da fonte de luz. liquid-glass.js reescreve estes dois valores
conforme o cursor; os padrões abaixo são o que vale sem JavaScript, e
correspondem a uma luz alta à esquerda. */
--lg-luz-x: 26%;
--lg-luz-y: 4%;
}
/* --------------------------------------------------------------------------
Tema alternativo: vidro dourado.
A paleta ciano/cobalto/ametista foi o pedido e é o padrão. Mas o ecossistema
inteiro (brasão vetorizado, favicons gerados, .btn-gold, cabeçalho medido)
nasceu dark & gold, e trocar tudo para azul é decisão de marca, não de CSS.
Esta classe existe para a decisão ser reversível em UM ponto:
→ mesmo vidro, temperatura da marca.
Nada mais no sistema precisa mudar.
-------------------------------------------------------------------------- */
.lg-tema-ouro {
--lg-ciano: #F3E5AB;
--lg-ciano-fundo: #CBA730;
--lg-cobalto: #CBA730;
--lg-cobalto-fundo: #AA8A2A;
--lg-ametista: #E0C46A;
--lg-ametista-fundo: #8a6f20;
--lg-abismo: #08070a;
--lg-abismo-alto: #14110a;
--lg-tinta: #F5EFE0;
--lg-tinta-media: rgba(240, 232, 210, 0.74);
--lg-tinta-fraca: rgba(230, 220, 195, 0.54);
--lg-rim-fria: rgba(243, 229, 171, 0.34);
--lg-vidro-fino:
linear-gradient(145deg, rgba(255, 252, 240, 0.13), rgba(255, 255, 255, 0.03) 42%,
rgba(203, 167, 48, 0.09) 78%, rgba(170, 138, 42, 0.10));
--lg-vidro-medio:
linear-gradient(150deg, rgba(255, 252, 240, 0.17), rgba(255, 255, 255, 0.05) 38%,
rgba(243, 229, 171, 0.07) 62%, rgba(203, 167, 48, 0.12) 82%,
rgba(170, 138, 42, 0.14));
--lg-vidro-denso:
linear-gradient(155deg, rgba(30, 25, 12, 0.84), rgba(18, 15, 8, 0.88) 45%,
rgba(26, 21, 10, 0.90)),
linear-gradient(150deg, rgba(255, 250, 235, 0.10), rgba(255, 255, 255, 0.02) 50%,
rgba(203, 167, 48, 0.11));
--lg-interno:
inset 0 1px 0 rgba(255, 250, 235, 0.38),
inset 0 -1px 0 rgba(255, 255, 255, 0.06),
inset 0 -24px 48px -30px rgba(203, 167, 48, 0.45);
}
/* ==========================================================================
2. AMBIENTE — o plano onde o vidro flutua
--------------------------------------------------------------------------
Sem isto o resto não funciona. `backdrop-filter` só tem efeito visível se
existir algo ATRÁS para desfocar: sobre um fundo chapado o vidro fica
idêntico a um retângulo opaco, e o trabalho todo some.
========================================================================== */
.lg-ambiente {
background-color: var(--lg-abismo);
color: var(--lg-tinta);
position: relative;
/* A cáustica é `fixed` e sangra para fora da viewport; sem isto o documento
ganha barra de rolagem horizontal fantasma. */
overflow-x: hidden;
}
/* --- Cáusticas: padrões de luz refratada no plano de fundo ---------------
Três massas de cor em deriva lenta, borradas a ponto de não terem contorno.
É o que a peça de vidro "colhe" pelo backdrop-filter — sem esta camada o
desfoque não teria variação nenhuma para mostrar. */
.lg-ambiente::before {
content: "";
position: fixed;
inset: -25%;
z-index: var(--lg-z-caustica);
pointer-events: none;
background:
radial-gradient(38% 42% at 16% 20%, rgba(224, 224, 224, 0.30), transparent 62%),
radial-gradient(40% 36% at 84% 26%, rgba(74, 74, 74, 0.28), transparent 64%),
radial-gradient(48% 44% at 52% 86%, rgba(138, 138, 138, 0.32), transparent 66%),
radial-gradient(30% 30% at 78% 68%, rgba(224, 224, 224, 0.18), transparent 60%);
filter: blur(70px) saturate(150%);
animation: lg-deriva 34s ease-in-out infinite alternate;
}
/* Véu de granulação: quebra o banding das transições de gradiente, que em
telas de 8 bits aparece como listras concêntricas nas cáusticas. */
.lg-ambiente::after {
content: "";
position: fixed;
inset: 0;
z-index: var(--lg-z-caustica);
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes lg-deriva {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
/* Todo conteúdo real precisa subir acima da cáustica.
Exceção: elementos com position:fixed próprio (portal-overlay,
avatar-ia-flutuante) ficam de fora — senão isto rebaixa os dois para
relative e eles somem lá embaixo no fluxo do documento, em vez de flutuar
sobre a viewport. */
.lg-ambiente > *:not(.portal-overlay):not(.avatar-ia-flutuante) {
position: relative;
z-index: var(--lg-z-base);
}
/* ==========================================================================
3. SUPERFÍCIE DE VIDRO
========================================================================== */
.lg-vidro {
position: relative;
background-image: var(--lg-vidro-medio);
background-color: rgba(14, 14, 14, 0.34);
-webkit-backdrop-filter: var(--lg-refracao);
backdrop-filter: var(--lg-refracao);
border: 1px solid var(--lg-rim);
border-radius: var(--lg-gota-1);
box-shadow: var(--lg-sombra-2), var(--lg-interno);
color: var(--lg-tinta);
transition: transform var(--lg-transicao), box-shadow var(--lg-transicao),
border-color var(--lg-transicao);
/* isolate cria contexto de empilhamento local: os pseudo-elementos de brilho
ficam presos à peça e não vazam por cima do irmão seguinte. */
isolation: isolate;
}
/* --- Reflexo especular ---------------------------------------------------
Faixa de luz nítida na aresta superior-esquerda, como em vidro soprado sob
uma fonte de luz difusa. `overlay` faz a luz somar sobre o que está atrás em
vez de pintar branco por cima — é a diferença entre reflexo e mancha. */
.lg-vidro::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(142deg,
rgba(255, 255, 255, 0.52) 0%,
rgba(255, 255, 255, 0.14) 12%,
rgba(255, 255, 255, 0) 32%),
radial-gradient(72% 46% at var(--lg-luz-x) var(--lg-luz-y),
rgba(255, 255, 255, 0.30), transparent 60%);
mix-blend-mode: overlay;
opacity: 0.85;
z-index: 2;
}
/* --- Rim light: fio de luz que percorre a borda --------------------------
Um gradiente cônico recortado em anel de 1px pelo mask. Um `border` de cor
única não consegue isto: aqui a borda é mais clara onde a luz bate e some
onde a peça vira de costas para a fonte. */
.lg-vidro::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: conic-gradient(from 210deg,
var(--lg-rim-forte) 0deg,
var(--lg-rim-fria) 60deg,
rgba(255, 255, 255, 0.05) 140deg,
rgba(74, 74, 74, 0.30) 220deg,
rgba(255, 255, 255, 0.06) 300deg,
var(--lg-rim-forte) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 3;
}
/* Densidades. */
.lg-vidro.lg-fino {
background-image: var(--lg-vidro-fino);
-webkit-backdrop-filter: var(--lg-refracao-leve);
backdrop-filter: var(--lg-refracao-leve);
box-shadow: var(--lg-sombra-1), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.lg-vidro.lg-denso {
background-image: var(--lg-vidro-denso);
background-color: transparent;
-webkit-backdrop-filter: var(--lg-refracao-densa);
backdrop-filter: var(--lg-refracao-densa);
box-shadow: var(--lg-sombra-3), var(--lg-interno);
}
/* --- Superfície PLANA ----------------------------------------------------
Mesma aparência, SEM backdrop-filter. É o que se usa em vidro dentro de
vidro: um `backdrop-filter` aninhado reamostra o resultado do pai a cada
quadro e o custo explode em listas longas (a agenda do ERP tem centenas de
células). Regra prática: backdrop-filter só na superfície de nível mais
alto; tudo aninhado usa .lg-plano. */
.lg-plano {
position: relative;
background-image: var(--lg-vidro-fino);
background-color: rgba(255, 255, 255, 0.035);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--lg-seixo-1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
color: var(--lg-tinta);
}
/* ==========================================================================
4. MORFOLOGIA — retângulo uniforme
--------------------------------------------------------------------------
.lg-cardume aplicado no CONTÊINER da grade antes distribuía quatro
silhuetas diferentes pelos filhos; hoje as quatro variáveis resolvem para
o mesmo raio. As regras abaixo ficam por compatibilidade de classe (troca
de nome não quebra HTML existente), não por efeito visual — não há mais
variação de forma nem morph de hover entre elas.
========================================================================== */
.lg-cardume > *:nth-child(4n + 1) { border-radius: var(--lg-gota-1); }
.lg-cardume > *:nth-child(4n + 2) { border-radius: var(--lg-gota-2); }
.lg-cardume > *:nth-child(4n + 3) { border-radius: var(--lg-gota-3); }
.lg-cardume > *:nth-child(4n + 4) { border-radius: var(--lg-gota-4); }
.lg-r1 { border-radius: var(--lg-gota-1); }
.lg-r2 { border-radius: var(--lg-gota-2); }
.lg-r3 { border-radius: var(--lg-gota-3); }
.lg-r4 { border-radius: var(--lg-gota-4); }
.lg-seixo { border-radius: var(--lg-seixo-1); }
.lg-mercurio { border-radius: var(--lg-mercurio); }
/* Elevação ao interagir: sobe no eixo Z e a sombra abre junto. */
.lg-elevavel:hover,
.lg-elevavel:focus-visible {
transform: translateY(-6px);
box-shadow: var(--lg-sombra-3), var(--lg-interno);
border-color: var(--lg-rim-forte);
}
/* ==========================================================================
5. VARREDURA ESPECULAR
--------------------------------------------------------------------------
Faixa de luz que atravessa a peça quando o cursor entra. Precisa de um
elemento próprio porque ::before e ::after já estão ocupados pelo reflexo e
pelo rim; quem usa põe dentro.
========================================================================== */
.lg-brilho {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 4;
}
.lg-brilho::after {
content: "";
position: absolute;
top: -60%;
left: -140%;
width: 60%;
height: 220%;
background: linear-gradient(96deg,
transparent, rgba(255, 255, 255, 0.34) 46%, rgba(255, 255, 255, 0.62) 50%,
rgba(255, 255, 255, 0.34) 54%, transparent);
transform: rotate(14deg);
transition: left 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.lg-vidro:hover > .lg-brilho::after,
.lg-elevavel:hover > .lg-brilho::after {
left: 160%;
}
/* ==========================================================================
6. TIPOGRAFIA
--------------------------------------------------------------------------
Peso leve e tracking amplo, integrados à superfície. A sombra de texto não
é decorativa: sobre vidro translúcido o fundo passa por baixo das letras e
come a definição da haste; a sombra escura devolve a separação.
========================================================================== */
.lg-tipo,
.lg-ambiente {
font-family: var(--lg-fonte);
font-weight: var(--lg-peso-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lg-titulo {
font-family: var(--lg-fonte);
font-weight: var(--lg-peso-forte);
letter-spacing: var(--lg-tracking-titulo);
line-height: 1.12;
color: var(--lg-tinta);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* Título "gravado": o texto é preenchido pelo próprio gradiente do vidro.
Só funciona em texto grande — abaixo de ~1.4rem o gradiente atravessa a
haste da letra e o contraste desaba. */
.lg-titulo-gravado {
background: linear-gradient(150deg, var(--lg-tinta) 0%, var(--lg-ciano) 45%,
var(--lg-ametista) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
filter: drop-shadow(0 2px 6px rgba(138, 138, 138, 0.35));
}
.lg-rotulo {
font-size: 0.7rem;
font-weight: var(--lg-peso-medio);
text-transform: uppercase;
letter-spacing: var(--lg-tracking-amplo);
color: var(--lg-tinta-fraca);
}
/* ==========================================================================
7. ÍCONES — glifos gravados dentro de peças de vidro
--------------------------------------------------------------------------
O ecossistema usa emoji (menu do ERP, .icon-gold do site). Emoji são
bitmaps coloridos: background-clip não os alcança. O tratamento que
funciona é filtro — dessatura, clareia e aplica duas sombras (uma clara em
cima, uma escura embaixo) que simulam gravação a laser no vidro.
========================================================================== */
.lg-glifo {
display: inline-grid;
place-items: center;
width: 3.1rem;
height: 3.1rem;
flex-shrink: 0;
border-radius: var(--lg-mercurio);
background-image: var(--lg-vidro-medio);
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--lg-rim);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.40),
inset 0 -6px 14px -6px rgba(74, 74, 74, 0.55),
0 6px 18px -6px rgba(0, 0, 0, 0.60);
font-size: 1.45rem;
line-height: 1;
transition: transform var(--lg-transicao);
}
.lg-glifo:hover {
transform: translateY(-2px) rotate(-3deg);
}
/* Emoji → glifo gravado. */
.lg-glifo-gravado {
filter:
grayscale(1) brightness(1.5) contrast(0.86)
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55))
drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.45))
drop-shadow(0 4px 8px rgba(138, 138, 138, 0.45));
opacity: 0.94;
}
/* SVG dentro do vidro (brasão, ícones sociais). O drop-shadow duplo dá volume
sem tocar no traço.
ATENÇÃO: nunca fixe width E height do brasão junto — ele é 100:132 e trava
as duas medidas o distorce. Fixe só a altura. */
.lg-svg-vidro {
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.30))
drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
/* ==========================================================================
8. CONTROLES
========================================================================== */
.lg-botao {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: 0.95em 2em;
font-family: var(--lg-fonte);
font-size: 0.85rem;
font-weight: var(--lg-peso-medio);
letter-spacing: var(--lg-tracking-amplo);
text-transform: uppercase;
color: var(--lg-tinta);
cursor: pointer;
border: 1px solid var(--lg-rim-forte);
border-radius: var(--lg-seixo-1);
background-image:
linear-gradient(150deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.05) 45%,
rgba(138, 138, 138, 0.28) 78%, rgba(74, 74, 74, 0.34));
background-color: rgba(14, 14, 14, 0.30);
-webkit-backdrop-filter: var(--lg-refracao-leve);
backdrop-filter: var(--lg-refracao-leve);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -8px 16px -10px rgba(74, 74, 74, 0.60),
var(--lg-sombra-1);
transition: transform var(--lg-transicao), box-shadow var(--lg-transicao),
border-color var(--lg-transicao);
isolation: isolate;
overflow: hidden;
}
.lg-botao:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.62);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -10px 20px -10px rgba(74, 74, 74, 0.75),
var(--lg-sombra-2);
}
.lg-botao:active {
transform: translateY(0) scale(0.985);
}
/* Ação principal: acento quente da marca sobre o vidro frio. */
.lg-botao-acento {
color: #0a0a0a;
border-color: rgba(243, 229, 171, 0.75);
background-image:
linear-gradient(150deg, var(--lg-acento-claro), var(--lg-acento) 48%,
var(--lg-acento-fundo));
background-color: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 -8px 16px -10px rgba(120, 90, 10, 0.55),
0 8px 26px -8px rgba(203, 167, 48, 0.55);
}
.lg-botao-acento:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 12px 34px -8px rgba(203, 167, 48, 0.70);
}
/* Campos: gota côncava — a luz entra por baixo, ao contrário do botão. */
.lg-campo {
width: 100%;
padding: 0.85em 1.15em;
font-family: var(--lg-fonte);
font-size: 0.95rem;
font-weight: var(--lg-peso-normal);
color: var(--lg-tinta);
background-color: rgba(14, 14, 14, 0.42);
background-image: linear-gradient(180deg, rgba(14, 14, 14, 0.35), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--lg-seixo-1);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.55),
inset 0 -1px 0 rgba(255, 255, 255, 0.20);
transition: border-color var(--lg-transicao), box-shadow var(--lg-transicao);
}
.lg-campo::placeholder { color: var(--lg-tinta-fraca); }
.lg-campo:focus {
outline: none;
border-color: var(--lg-rim-fria);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.45),
0 0 0 3px rgba(224, 224, 224, 0.22),
0 0 24px -4px rgba(224, 224, 224, 0.45);
}
/* Foco visível global. Contorno próprio porque o `outline` retangular padrão
cortaria os cantos das gotas e denunciaria a caixa por baixo da forma. */
.lg-ambiente :focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(224, 224, 224, 0.30), 0 0 22px -4px rgba(224, 224, 224, 0.55);
}
/* Chip / badge. */
.lg-chip {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.9em;
font-size: 0.7rem;
font-weight: var(--lg-peso-medio);
letter-spacing: var(--lg-tracking-amplo);
text-transform: uppercase;
color: var(--lg-tinta);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background-image: var(--lg-vidro-fino);
background-color: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.lg-chip-ciano { border-color: rgba(224, 224, 224, 0.45); color: #9beef8;
background-color: rgba(224, 224, 224, 0.12); }
.lg-chip-cobalto { border-color: rgba(138, 138, 138, 0.48); color: #b6c9ff;
background-color: rgba(138, 138, 138, 0.15); }
.lg-chip-ametista { border-color: rgba(74, 74, 74, 0.45); color: #dcbcff;
background-color: rgba(74, 74, 74, 0.14); }
.lg-chip-acento { border-color: rgba(203, 167, 48, 0.50); color: var(--lg-acento-claro);
background-color: rgba(203, 167, 48, 0.14); }
/* ==========================================================================
8b. REFRAÇÃO REAL — aprimoramento progressivo
--------------------------------------------------------------------------
Até aqui o vidro DESFOCA o fundo. Vidro de verdade também o DISTORCE, e é
a distorção que separa "superfície fosca" de "lente". Isso exige um filtro
SVG dentro do backdrop-filter — hoje só o Chromium aceita.
A classe `.lg-refracao-svg` é posta na raiz por liquid-glass.js quando o
suporte existe. O gate é obrigatório: uma lista de filtros com um valor não
suportado é descartada INTEIRA, então declarar `url(#...)` direto no
.lg-vidro faria Safari e Firefox perderem também o blur e o saturate — o
vidro sumiria justamente onde ele deveria apenas ser mais simples.
========================================================================== */
.lg-refracao-svg .lg-vidro {
-webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.08) url("#lg-refracao");
backdrop-filter: blur(22px) saturate(185%) brightness(1.08) url("#lg-refracao");
}
.lg-refracao-svg .lg-vidro.lg-denso {
-webkit-backdrop-filter: blur(34px) saturate(200%) url("#lg-refracao");
backdrop-filter: blur(34px) saturate(200%) url("#lg-refracao");
}
/* Membrana: distorce a SILHUETA de uma camada puramente decorativa, dando a
borda irregular de vidro soprado que border-radius não alcança.
Só em quem não carrega texto — `filter` reamostra o conteúdo e a tipografia
perderia o subpixel. Por isso o alvo é `.lg-membrana`, um vazio. */
.lg-membrana {
position: absolute;
inset: -6px;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background: var(--lg-vidro-medio);
opacity: 0.55;
}
.lg-refracao-svg .lg-membrana {
filter: url("#lg-membrana");
}
/* ==========================================================================
9. DEGRADAÇÃO E ACESSIBILIDADE
--------------------------------------------------------------------------
Tudo acima assume backdrop-filter, mask-composite e mix-blend-mode. Nenhum
deles é universal, e dois deles falham em SILÊNCIO — sem fallback o vidro
vira retângulo transparente com texto ilegível por cima da foto.
========================================================================== */
/* Sem backdrop-filter: o fundo vira quase sólido. Perde-se a refração, mas o
texto continua legível — que é o que não se negocia. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.lg-vidro,
.lg-botao {
background-color: rgba(14, 14, 14, 0.93);
}
.lg-vidro.lg-denso { background-color: rgba(14, 14, 14, 0.96); }
.lg-campo { background-color: rgba(14, 14, 14, 0.92); }
}
/* Sem mask-composite o ::after do rim viraria um bloco chapado cobrindo a
peça inteira. Melhor não desenhá-lo. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
.lg-vidro::after { display: none; }
.lg-vidro { border-color: var(--lg-rim-forte); }
}
/* "Reduzir transparência" (iOS/macOS, Windows). Aqui o pedido do usuário é
explícito e vence a estética: sai o desfoque, sai o reflexo, entra fundo
opaco. Os cantos arredondados permanecem — eles não atrapalham ninguém. */
@media (prefers-reduced-transparency: reduce) {
.lg-ambiente::before,
.lg-ambiente::after { display: none; }
.lg-vidro,
.lg-plano,
.lg-botao,
.lg-glifo {
background-image: none;
background-color: #0e0e0e;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: rgba(255, 255, 255, 0.30);
}
.lg-vidro::before,
.lg-vidro::after { display: none; }
.lg-botao-acento {
background-color: var(--lg-acento);
color: #0a0a0a;
}
}
@media (prefers-reduced-motion: reduce) {
.lg-ambiente::before { animation: none; }
.lg-vidro,
.lg-botao,
.lg-glifo,
.lg-campo,
.lg-brilho::after {
transition-duration: 0.01ms;
}
}
/* Alto contraste do sistema: o vidro é decoração e some por completo. */
@media (forced-colors: active) {
.lg-vidro,
.lg-plano,
.lg-botao,
.lg-chip,
.lg-glifo {
background: Canvas;
border: 1px solid CanvasText;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.lg-vidro::before,
.lg-vidro::after,
.lg-ambiente::before,
.lg-ambiente::after { display: none; }
}
/* Impressão: prontuário e relatório saem em papel branco. Vidro escuro na
impressora gasta toner e sai ilegível. */
@media print {
.lg-ambiente::before,
.lg-ambiente::after,
.lg-vidro::before,
.lg-vidro::after { display: none !important; }
.lg-ambiente { background: #fff; color: #000; }
.lg-vidro,
.lg-plano {
background: #fff;
color: #000;
border: 1px solid #999;
border-radius: 8px;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}