/* ╔══════════════════════════════════════════════════════════════════════════ ║ VyaHub Platform — background premium GLOBAL ║ ║ Imagem da fábrica autônoma como pano de fundo de TODAS as páginas. ║ Camada de overlay (vinheta + escurecimento) garante a legibilidade do ║ conteúdo. Glass effect nos cards (backdrop-filter) deixa a imagem aparecer ║ suavemente — sensação de "sala de controle". ║ ║ Carregado por ÚLTIMO no pra cascatear sobre os backgrounds dos ║ stylesheets de página (styles.css / auth.css / users.css / team.css / home.css). ╚══════════════════════════════════════════════════════════════════════════ */ html { min-height: 100%; } body, body.portal-body, body.auth-body { min-height: 100vh; background-color: #070b16; /* fallback dark se a imagem falhar */ background-image: /* 1) Vinheta — escurece as bordas e foca o conteúdo no centro */ radial-gradient(ellipse at center, rgba(7, 11, 22, 0.45) 0%, rgba(7, 11, 22, 0.78) 65%, rgba(7, 11, 22, 0.94) 100%), /* 2) A imagem da fábrica */ url('/bg-factory.png'); background-size: cover, cover; background-position: center center, center center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; /* parallax sutil */ } /* O `.bg-ambient` do styles.css gera um glow radial que compete com a imagem nova. Atenuado, vira só um realce sutil no centro. */ .bg-ambient { opacity: 0.30; pointer-events: none; } /* ── PADRAO OFICIAL "vidro leve" — definido em kernel/design-system.md ── Todos os cards/paineis/boxes do site usam o mesmo branco translucido de 5%. Imagem da fabrica passa nitida atras; SEM blur; border fina (10% branco) delimita visualmente. Igual ao tile 'Integrations' da home (bg-white/5). */ .panel, .hero-card, .stat-card, .tile, .agent-card, .demand-col, .activity, .users-table-wrap, .build-card, .kpi, .kpi-card, .metric-card, .data-card, .subpanel, .console, .card, .project-card, .secret-card, .integration-card, .template-card, .domain-card, .editor-pane, .editor-panel, .team-card, .role-card, .user-card, .sql-card, .query-card { background: rgba(255, 255, 255, 0.05) !important; background-color: rgba(255, 255, 255, 0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } /* Topbar com glass mais opaco — o menu precisa ser nítido */ .topbar, .portal-topbar { background: rgba(10, 14, 26, 0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* Footer também ganha o tratamento (Mission Control / home) */ .footer { background: rgba(10, 14, 26, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Modais — backdrop mais escuro pra focar no diálogo */ .modal-backdrop { background: rgba(7, 11, 22, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Inputs e selects — preto neutro leve, apenas pra texto digitado ser legivel */ .form-input, .form-select, .auth-input, .role-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { background-color: rgba(0, 0, 0, 0.30); } /* Tabela de usuários — linhas translúcidas */ .users-table tr:hover td { background: rgba(255, 255, 255, 0.04); }