/* ===================================================================== VEUS Jurídico — Atmosfera animada: mesh + partículas + auroras + glow --------------------------------------------------------------------- Reuso do padrão validado no login Authentik VEUS (janelas #5–#8 desta sessão — pattern_authentik_login_particles_aurora.md). Diferenças: - Pseudo-elementos vivem em `body::before / body::after` e `.veus-atmosphere::before / ::after` (em vez de `.pf-c-login`), porque o app FastAPI não tem PatternFly shell. - Idênticos números de layers (5 XL + 5 médios + 8 micro = 18) e paleta saturada da janela #8 — coerência com a tela de login. - Auroras posicionadas fixed no viewport, blur 60px, animação 14s/18s aurora-pulse — idêntico ao login. - prefers-reduced-motion desliga TUDO mantendo opacity baixa. IMPORTANTE: pseudo-elements de partícula têm `pointer-events: none` e vivem em z-index -2 / -1, atrás do conteúdo (que tem z-index >= 1). Para REUTILIZAR em uma página com fundo branco "limpo" (impressão PDF), use a classe `.veus-no-atmosphere` no — disable global. ===================================================================== */ /* --- Mesh base (rotação 22s) + halos quentes --- */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--veus-z-mesh); pointer-events: none; background: /* Halos quentes: topo-direita, meio-baixa-esquerda, base-esquerda */ radial-gradient(circle at 78% 22%, rgba(255, 179, 22, 0.28) 0%, rgba(255, 179, 22, 0.08) 35%, transparent 70%), radial-gradient(circle at 22% 82%, rgba(255, 179, 22, 0.22) 0%, rgba(255, 179, 22, 0.06) 40%, transparent 75%), radial-gradient(circle at 12% 92%, rgba(89, 89, 89, 0.14) 0%, rgba(89, 89, 89, 0.03) 50%, transparent 85%), /* Mesh conic em creme/amarelo-pálido — 6 stops + retorno ao fafafa */ conic-gradient(from 0deg at 50% 50%, #fafafa 0%, #fff5dc 16%, #fafafa 32%, #fff8e8 50%, #fff0c8 68%, #fafafa 84%, #fafafa 100%); animation: veus-mesh-rotate var(--veus-duration-ambient, 22s) linear infinite; will-change: transform; } @keyframes veus-mesh-rotate { from { transform: rotate(0deg) scale(1.45); } to { transform: rotate(360deg) scale(1.45); } } /* --- Partículas (5 XL + 5 médias + 8 micro = 18 layers; saturação janela #8) Posição absoluta com viewport units (pegadinha 4 do pattern janela #7: `inset` é truncado por `overflow-y: auto` induced em ancestrais grid/flex; vw/vh ignoram CB e dão garantia de viewport completo). */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: var(--veus-z-particles); pointer-events: none; background-image: /* Camada A (1-5): vagalumes XL brilhantes — 3-5px, saturados. Reproduz exatamente os pontos da janela #8 do login Authentik. */ radial-gradient(circle at 22% 12%, rgba(255, 179, 22, 1.00) 3.5px, rgba(255, 179, 22, 0.4) 5.0px, transparent 7.0px), radial-gradient(circle at 78% 86%, rgba(212, 136, 0, 1.00) 3.0px, rgba(212, 136, 0, 0.4) 4.5px, transparent 6.5px), radial-gradient(circle at 38% 48%, rgba(230, 157, 0, 1.00) 4.0px, rgba(230, 157, 0, 0.45)5.5px, transparent 7.5px), radial-gradient(circle at 52% 72%, rgba(212, 136, 0, 1.00) 3.2px, rgba(212, 136, 0, 0.45)4.8px, transparent 6.8px), radial-gradient(circle at 12% 58%, rgba(230, 157, 0, 1.00) 3.0px, rgba(230, 157, 0, 0.4) 4.5px, transparent 6.5px), /* Camada B (6-10): médios 1.8-2.5px amarelo puro */ radial-gradient(circle at 18% 8%, rgba(255, 179, 22, 0.95) 2.2px, transparent 3.2px), radial-gradient(circle at 82% 22%, rgba(255, 179, 22, 1.00) 1.8px, transparent 2.8px), radial-gradient(circle at 92% 55%, rgba(255, 179, 22, 1.00) 1.6px, transparent 2.6px), radial-gradient(circle at 8% 62%, rgba(255, 179, 22, 0.85) 2.0px, transparent 3.0px), radial-gradient(circle at 28% 92%, rgba(255, 200, 60, 0.90) 2.1px, transparent 3.1px), /* Camada C (11-18): micro 1.0-1.5px alta densidade — tons quentes */ radial-gradient(circle at 33% 6%, rgba(255, 179, 22, 0.85) 1.2px, transparent 2.0px), radial-gradient(circle at 65% 18%, rgba(230, 157, 0, 0.90) 1.0px, transparent 1.8px), radial-gradient(circle at 14% 28%, rgba(255, 179, 22, 0.80) 1.3px, transparent 2.1px), radial-gradient(circle at 76% 40%, rgba(212, 136, 0, 0.90) 1.1px, transparent 1.9px), radial-gradient(circle at 24% 64%, rgba(230, 157, 0, 0.90) 1.2px, transparent 2.0px), radial-gradient(circle at 90% 74%, rgba(255, 179, 22, 0.90) 1.1px, transparent 1.9px), radial-gradient(circle at 42% 84%, rgba(212, 136, 0, 0.85) 1.0px, transparent 1.7px), radial-gradient(circle at 6% 96%, rgba(230, 157, 0, 0.85) 1.3px, transparent 2.2px); background-size: /* A: 5 entries (vagalumes XL) */ 520px 400px, 580px 420px, 540px 440px, 560px 410px, 600px 430px, /* B: 5 entries (médios) */ 260px 220px, 320px 240px, 340px 260px, 300px 230px, 280px 250px, /* C: 8 entries (micro densos) */ 180px 160px, 140px 130px, 200px 170px, 160px 150px, 190px 165px, 150px 140px, 175px 160px, 185px 170px; opacity: 0.95; filter: drop-shadow(0 0 3px rgba(255, 179, 22, 0.45)); animation: veus-dots-drift 52s linear infinite, veus-fireflies-flicker 6.3s ease-in-out infinite; } @keyframes veus-fireflies-flicker { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 179, 22, 0.45)) brightness(1); } 30% { filter: drop-shadow(0 0 5px rgba(255, 179, 22, 0.65)) brightness(1.5); } 65% { filter: drop-shadow(0 0 2px rgba(255, 179, 22, 0.30)) brightness(0.7); } } @keyframes veus-dots-drift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: -180px -720px, 240px -780px, -140px -740px, -220px -760px, 260px -740px, 280px 220px, -340px 260px, -380px -320px, 320px 100px, 180px -160px, 200px 140px, -140px 220px, 240px -100px, -180px 180px, -260px 200px, 180px -180px, -160px 220px, 140px -200px; } } /* --- Auroras pulsantes (2 orbes blur 60px, fixed no viewport) ---------- Vivem em pseudos do `.veus-atmosphere` — wrapper opcional dentro do body que serve só para hospedar mais dois pseudo-elements sem estourar limite do body. Se a página não tem `.veus-atmosphere`, as auroras simplesmente não aparecem (graceful). */ .veus-atmosphere::before, .veus-atmosphere::after { content: ""; position: fixed; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: var(--veus-z-particles); will-change: transform, opacity; } .veus-atmosphere::before { top: 8%; right: 6%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255, 179, 22, 0.45) 0%, rgba(255, 179, 22, 0.15) 40%, transparent 70%); animation: veus-aurora-pulse 14s var(--veus-ease-in-out, ease-in-out) infinite; } .veus-atmosphere::after { bottom: -5%; left: -3%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(255, 179, 22, 0.32) 0%, rgba(255, 179, 22, 0.08) 45%, transparent 72%); animation: veus-aurora-pulse 18s var(--veus-ease-in-out, ease-in-out) -7s infinite; } @keyframes veus-aurora-pulse { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; } 50% { transform: translate3d(-30px, 40px, 0) scale(1.15); opacity: 1; } } /* --- Override total: páginas internas com fundo "limpo" (dashboard densa, tabela de processos) podem aplicar `.veus-no-atmosphere` no para desligar tudo. Útil também no print stylesheet. */ .veus-no-atmosphere::before, .veus-no-atmosphere::after { display: none !important; } .veus-no-atmosphere .veus-atmosphere::before, .veus-no-atmosphere .veus-atmosphere::after { display: none !important; } /* --- Mobile: reduz peso GPU (blur 60px é caro em GPUs móveis) --- */ @media (max-width: 480px) { body::before { animation-duration: 32s; } body::after { opacity: 0.55; } .veus-atmosphere::before { width: 280px; height: 280px; top: 4%; right: -8%; filter: blur(50px); opacity: 0.7; } .veus-atmosphere::after { width: 320px; height: 320px; bottom: -10%; left: -15%; filter: blur(50px); opacity: 0.6; } } /* --------------------------------------------------------------------- 2026-05-27 (gucci-frontend item H): Pedro pediu remover animação do background pós-login juridico. Mantém PALETA da marca (mesh amarelo+ creme + partículas estáticas + auroras estáticas), mas CONGELA as animações. Critério: `

` significa login (única página onde anima); qualquer outra rota (.veus-main sem .veus-login) congela. Específico do site juridico — não toca login Authentik que continua com animação. Estratégia: scope via `body:has(main:not(.veus-login))` — se NÃO tem .veus-login no main, congelar. Suporte :has() é >=92% browsers (2026). Fallback: usuário com browser sem :has() vê o antigo comportamento. ------------------------------------------------------------------ */ body:has(main:not(.veus-login)) ::before, body:has(main:not(.veus-login)) ::after, body:has(main.veus-main:not(.veus-login)) body::before, body:has(main.veus-main:not(.veus-login)) body::after, body:has(main.veus-main:not(.veus-login)) .veus-atmosphere::before, body:has(main.veus-main:not(.veus-login)) .veus-atmosphere::after { animation: none !important; } /* Aplicação direta: se html tem class indicando pós-login (estamos a simplificar — qualquer .veus-main sem .veus-login congela tudo). */ body:has(main.veus-main:not(.veus-login)) body::before, body:has(.veus-shell main:not(.veus-login)) body::before { animation: none !important; } body:has(main.veus-main:not(.veus-login)) body::after, body:has(.veus-shell main:not(.veus-login)) body::after { animation: none !important; opacity: 0.5 !important; } body:has(main.veus-main:not(.veus-login)) .veus-atmosphere::before, body:has(.veus-shell main:not(.veus-login)) .veus-atmosphere::before, body:has(main.veus-main:not(.veus-login)) .veus-atmosphere::after, body:has(.veus-shell main:not(.veus-login)) .veus-atmosphere::after { animation: none !important; transform: none !important; opacity: 0.7 !important; } /* --- Acessibilidade: prefers-reduced-motion desliga TUDO --- */ @media (prefers-reduced-motion: reduce) { body::before, body::after, .veus-atmosphere::before, .veus-atmosphere::after { animation: none !important; transition-duration: 0.01ms !important; } body::after { opacity: 0.3; /* Estático mas visível */ } .veus-atmosphere::before, .veus-atmosphere::after { opacity: 0.5; transform: none; } } /* ===================================================================== DARK MODE — atmosfera (item 16, 2026-06-10, gucci-frontend) --------------------------------------------------------------------- O mesh conic é hardcoded em creme/#fafafa: SEM este override o fundo continuaria CLARO mesmo com os tokens dark, fazendo dark==light de novo. Aqui invertemos o mesh para tons de grafite profundo (escala do cinza VEUS levada para baixo) mantendo os halos amarelos quentes — a assinatura visual da marca. As partículas (body::after) e auroras ficam IDÊNTICAS em geometria; só ganham um leve boost de glow porque brilham melhor sobre fundo escuro. ===================================================================== */ :root[data-theme="dark"] body::before { background: /* Halos quentes (mais intensos sobre grafite) */ radial-gradient(circle at 78% 22%, rgba(255, 179, 22, 0.20) 0%, rgba(255, 179, 22, 0.06) 35%, transparent 70%), radial-gradient(circle at 22% 82%, rgba(255, 179, 22, 0.16) 0%, rgba(255, 179, 22, 0.05) 40%, transparent 75%), radial-gradient(circle at 12% 92%, rgba(154, 156, 163, 0.10) 0%, rgba(154, 156, 163, 0.02) 50%, transparent 85%), /* Mesh conic em grafite — espelha os 6 stops do light, escurecidos */ conic-gradient(from 0deg at 50% 50%, #16181b 0%, #1e2128 16%, #16181b 32%, #20242c 50%, #1a1d23 68%, #16181b 84%, #16181b 100%); } /* Partículas: mesmo desenho, glow um pouco mais forte no escuro */ :root[data-theme="dark"] body::after { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 179, 22, 0.55)); } /* Auroras: levemente mais presentes sobre grafite */ :root[data-theme="dark"] .veus-atmosphere::before { background: radial-gradient(circle, rgba(255, 179, 22, 0.38) 0%, rgba(255, 179, 22, 0.12) 40%, transparent 70%); } :root[data-theme="dark"] .veus-atmosphere::after { background: radial-gradient(circle, rgba(255, 179, 22, 0.26) 0%, rgba(255, 179, 22, 0.07) 45%, transparent 72%); }