/* ============================================================ Portal MEGH — Identidade Visual Variáveis CSS para Light Mode e Dark Mode ============================================================ */ /* Tema Claro (Light Mode) — padrão */ :root { /* Backgrounds */ --bg: #f0f0f7; --bg-side: #ffffff; --bg-area: #f4f4fb; --bg-foot: #f8f8fd; --bg-input: #ffffff; --bg-msg-ia: #ffffff; --bg-msg-user: rgba(0, 0, 132, 0.1); /* Textos de mensagens */ --tx-msg-user: #000084; --bd-msg-user: rgba(0, 0, 132, 0.18); /* Header */ --bg-head: #e8e8ee; --tx-head: #000084; /* Textos */ --tx: #0a0a1a; --tx-2: #595959; --tx-faint: rgba(0, 0, 0, 0.28); /* Bordas */ --bd: rgba(0, 0, 0, 0.08); --bd-input: rgba(0, 0, 0, 0.14); --bd-focus: rgba(0, 0, 132, 0.45); /* Accent / Primário */ --accent: #000084; /* Paleta de marca */ --color-primary: #000084; --color-primary-light: #0000c8; --color-cta: #fe6a00; --color-cta-hover: #f55f00; --color-cyan: #00edff; --color-success: #00a871; --color-success-dark: #00320d; --color-gray: #595959; } /* Tema Escuro (Dark Mode) — ativado via classe .dark no */ html.dark { /* Backgrounds */ --bg: #06061a; --bg-side: #04041a; --bg-area: #06061a; --bg-foot: #09091f; --bg-input: rgba(255, 255, 255, 0.05); --bg-msg-ia: #0d1117; --bg-msg-user: #000084; /* Textos de mensagens */ --tx-msg-user: #ffffff; --bd-msg-user: rgba(0, 237, 255, 0.2); /* Header */ --bg-head: #000084; --tx-head: #ffffff; /* Textos */ --tx: rgba(255, 255, 255, 0.9); --tx-2: rgba(255, 255, 255, 0.5); --tx-faint: rgba(255, 255, 255, 0.2); /* Bordas */ --bd: rgba(255, 255, 255, 0.1); --bd-input: rgba(255, 255, 255, 0.12); --bd-focus: rgba(0, 237, 255, 0.45); /* Accent / Primário */ --accent: #00edff; } /* ============================================================ Animação de Glow — Logo e textos destacados ============================================================ */ @keyframes glow-light { 0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 0, 200, 0.18)); } 50% { filter: drop-shadow(0 0 7px rgba(0, 0, 200, 0.38)); } } @keyframes glow-dark { 0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(0, 0, 200, 0.5)); } 50% { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(0, 0, 200, 0.9)); } } .logo-glow { animation: glow-light 2.8s ease-in-out infinite; } html.dark .logo-glow { animation: glow-dark 2.8s ease-in-out infinite; } /* ============================================================ Logo — inverte para branco no dark mode ============================================================ */ .logo-img { filter: none; transition: filter 0.2s ease; } html.dark .logo-img { filter: brightness(0) invert(1); } /* Logo branco com glow — usado na tela de login */ @keyframes glow-login { 0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(180, 180, 255, 0.5)); } 50% { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(180, 180, 255, 0.95)); } } .login-logo { animation: glow-login 2.8s ease-in-out infinite; } /* Background do item ativo no nav */ :root { --bg-nav-active: rgba(0, 0, 0, 0.06); } html.dark { --bg-nav-active: rgba(0, 237, 255, 0.08); } /* ============================================================ Login / Splash — sempre fundo gradiente azul (sem dark mode) ============================================================ */ .login-bg { background: linear-gradient(135deg, #000084 0%, #000050 60%, #00320d 100%); }