/* ============================================================ Melhor Passagem · Agency OS — Camada VIDRO (opt-in, SÓ escuro) ------------------------------------------------------------ Estética do "glass code block": anel de 1px em gradiente + fundo translúcido + backdrop-blur + brilho interno no topo + sombra ampla e difusa. SÓ ESCURO, de propósito: no tema claro o efeito foi avaliado no ds-vidro-lab.html e rende quase nada (branco translúcido sobre tela branca continua branco), sem compensar o custo de blur. Todo seletor daqui exige `.ds-dark` E `.ds-vidro`. Três níveis de reversão, todos instantâneos: 1. tirar a classe `ds-vidro` do do console.html 2. tirar o deste arquivo 3. o usuário voltar pro tema claro (a camada dorme sozinha) ONDE se aplica: SÓ superfícies FLUTUANTES — o modal legado (.modal-overlay/.modal-box, que é o que o console usa nos seus 10 modais) e a camada ds- (.ds-modal/.ds-drawer). NÃO toca em .ds-card, tabelas nem na sidebar: o DS manda "card de conteúdo = borda, nunca sombra", e o glassmorphism do aside foi removido de propósito na Fase 3. Regra de ouro (nenhum hex fora dos tokens) preservada: todo hex deste arquivo vive no bloco de tokens abaixo. ============================================================ */ @media screen { /* ════════════════════════════════════════════════════════════ TOKENS ════════════════════════════════════════════════════════════ */ .ds-dark .ds-vidro { --ds-vidro-fundo: rgba(18, 24, 38, .66); --ds-vidro-anel: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 100%); --ds-vidro-brilho: rgba(255, 255, 255, .07); --ds-vidro-borda: rgba(255, 255, 255, .09); --ds-vidro-sombra: 0 40px 90px rgba(0, 0, 0, .55); --ds-vidro-blur: blur(18px) saturate(140%); --ds-vidro-campo: rgba(255, 255, 255, .06); /* véu do overlay + aura de marca: sem conteúdo pra refratar, backdrop-blur vira cinza chapado */ --ds-vidro-veu: rgba(2, 6, 16, .62); --ds-vidro-aura: radial-gradient(circle at 22% 18%, rgba(30, 139, 255, .20), transparent 52%), radial-gradient(circle at 82% 84%, rgba(59, 107, 255, .16), transparent 55%); } /* ════════════════════════════════════════════════════════════ A RECEITA — anel de 1px em gradiente sem pseudo-elemento. Dois backgrounds recortados: a cor translúcida para no padding-box, o gradiente do anel ocupa o border-box e só aparece na borda de 1px. Por que não ::before: .modal-box tem overflow:auto, e um pseudo absoluto rolaria junto com o conteúdo. Assim também não preciso mexer em position nem em z-index de filho. ════════════════════════════════════════════════════════════ */ .ds-dark .ds-vidro .modal-box, .ds-dark .ds-vidro .ds-modal, .ds-dark .ds-vidro .ds-drawer { border: 1px solid transparent; background: linear-gradient(var(--ds-vidro-fundo), var(--ds-vidro-fundo)) padding-box, var(--ds-vidro-anel) border-box; -webkit-backdrop-filter: var(--ds-vidro-blur); backdrop-filter: var(--ds-vidro-blur); box-shadow: var(--ds-vidro-sombra), inset 0 1px 0 var(--ds-vidro-brilho); } /* overlay: véu + aura. SEM backdrop-filter aqui de propósito — borrar a tela inteira a cada modal é caro, e deixaria a caixa refratando um borrão já borrado. O blur fica só na caixa. */ .ds-dark .ds-vidro .modal-overlay, .ds-dark .ds-vidro .ds-modal-overlay { background: var(--ds-vidro-aura), var(--ds-vidro-veu); } /* divisórias internas acompanham o vidro */ .ds-dark .ds-vidro .modal-box hr, .ds-dark .ds-vidro .ds-modal hr, .ds-dark .ds-vidro .ds-drawer-cab, .ds-dark .ds-vidro .ds-drawer-rodape, .ds-dark .ds-vidro .ds-abas { border-color: var(--ds-vidro-borda); } /* rodapé do drawer é sólido no ds-dark; sobre vidro tem que ser vidro */ .ds-dark .ds-vidro .ds-drawer-rodape { background: transparent; } /* campos: quase opacos. Input translúcido come a leitura de número, e este CRM é todo número. */ .ds-dark .ds-vidro .modal-box input, .ds-dark .ds-vidro .modal-box select, .ds-dark .ds-vidro .modal-box textarea, .ds-dark .ds-vidro .ds-modal .ds-input, .ds-dark .ds-vidro .ds-drawer .ds-input { background: var(--ds-vidro-campo); border-color: var(--ds-vidro-borda); } /* ════════════════════════════════════════════════════════════ DEGRADAÇÃO — sem suporte a blur, ou transparência reduzida no sistema, a superfície volta a ser a sólida do ds-dark. ════════════════════════════════════════════════════════════ */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ds-dark .ds-vidro .modal-box, .ds-dark .ds-vidro .ds-modal, .ds-dark .ds-vidro .ds-drawer { background: var(--ds-d-card); border-color: var(--ds-n-300); } } @media (prefers-reduced-transparency: reduce) { .ds-dark .ds-vidro .modal-box, .ds-dark .ds-vidro .ds-modal, .ds-dark .ds-vidro .ds-drawer { background: var(--ds-d-card); border-color: var(--ds-n-300); -webkit-backdrop-filter: none; backdrop-filter: none; } .ds-dark .ds-vidro .modal-overlay, .ds-dark .ds-vidro .ds-modal-overlay { background: var(--ds-vidro-veu); } } } /* @media screen — no papel, nunca vidro */