/* ======================================================================= EIOS CLUB — LUXURY VISUAL LAYER V3 PRETO PROFUNDO + CARDS TRANSPARENTES Estrutura preservada ======================================================================= */ :root { --eios-black: #000000; --eios-black-soft: #02060a; --eios-card: rgba(7, 20, 31, 0.52); --eios-card-deep: rgba(3, 12, 20, 0.62); --eios-border: rgba(76, 199, 255, 0.20); --eios-border-strong: rgba(97, 218, 255, 0.32); --eios-cyan: #25d7ff; --eios-cyan-soft: rgba(37, 215, 255, 0.18); --eios-text-soft: #dff8ff; } /* ----------------------------------------------------------------------- FUNDO GLOBAL PRETO ----------------------------------------------------------------------- */ html.eios-club-v3, html.eios-club-v3 body { background: #000000 !important; background-color: #000000 !important; } html.eios-club-v3 body { position: relative; } html.eios-club-v3 #root { position: relative; z-index: 2; min-height: 100vh; background: transparent !important; } html.eios-club-v3 #root > div, html.eios-club-v3 #root > div > div, html.eios-club-v3 #root > div > main, html.eios-club-v3 #root [data-sidebar="inset"], html.eios-club-v3 #root main { background-color: transparent !important; } /* shells escuros, sem mexer no layout */ html.eios-club-v3 #root .bg-background, html.eios-club-v3 #root .bg-sidebar, html.eios-club-v3 #root .bg-muted\/20, html.eios-club-v3 #root .bg-muted\/30, html.eios-club-v3 #root .bg-muted\/40, html.eios-club-v3 #root .bg-muted\/50 { background-color: transparent !important; } /* ----------------------------------------------------------------------- UNIVERSO PRETO ----------------------------------------------------------------------- */ #eios-club-universe-v3 { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 18% 15%, rgba(22, 108, 174, 0.05), transparent 18%), radial-gradient(circle at 80% 12%, rgba(32, 164, 219, 0.04), transparent 18%), radial-gradient(circle at 74% 78%, rgba(26, 108, 172, 0.03), transparent 20%), #000000; } #eios-club-universe-v3::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 6% 20%, rgba(255,255,255,.72), transparent 60%), radial-gradient(1px 1px at 13% 68%, rgba(190,240,255,.52), transparent 60%), radial-gradient(1.2px 1.2px at 24% 36%, rgba(255,255,255,.66), transparent 60%), radial-gradient(1px 1px at 33% 84%, rgba(179,237,255,.46), transparent 60%), radial-gradient(1.2px 1.2px at 46% 18%, rgba(255,255,255,.70), transparent 60%), radial-gradient(1px 1px at 58% 54%, rgba(187,241,255,.48), transparent 60%), radial-gradient(1.2px 1.2px at 71% 24%, rgba(255,255,255,.72), transparent 60%), radial-gradient(1px 1px at 83% 63%, rgba(174,235,255,.50), transparent 60%), radial-gradient(1.2px 1.2px at 92% 31%, rgba(255,255,255,.64), transparent 60%), radial-gradient(1px 1px at 95% 83%, rgba(183,239,255,.46), transparent 60%); animation: eiosStarsPulseV3 9s ease-in-out infinite alternate; } @keyframes eiosStarsPulseV3 { from { opacity: .42; } to { opacity: .74; } } /* ----------------------------------------------------------------------- COMETAS SUBINDO ----------------------------------------------------------------------- */ .eios-club-comet-v3 { position: absolute; width: 170px; height: 2px; left: -30vw; bottom: -18vh; border-radius: 999px; background: linear-gradient( 90deg, rgba(90,220,255,0) 0%, rgba(90,220,255,.04) 22%, rgba(90,220,255,.18) 62%, rgba(184,243,255,.68) 90%, rgba(255,255,255,.98) 100% ); filter: drop-shadow(0 0 8px rgba(92,225,255,.25)); opacity: 0; will-change: transform, opacity; } .eios-club-comet-v3::after { content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(188,244,255,.94) 45%, rgba(118,229,255,0) 78%); box-shadow: 0 0 14px rgba(127,235,255,.55); } .eios-club-comet-v3.one { animation: eiosCometUp1 22s linear infinite; animation-delay: 2s; } .eios-club-comet-v3.two { width: 130px; left: 10vw; bottom: -24vh; animation: eiosCometUp2 31s linear infinite; animation-delay: 12s; } @keyframes eiosCometUp1 { 0% { transform: translate3d(-12vw, 18vh, 0) rotate(-34deg); opacity: 0; } 8% { opacity: .60; } 72% { opacity: .42; } 100% { transform: translate3d(142vw, -128vh, 0) rotate(-34deg); opacity: 0; } } @keyframes eiosCometUp2 { 0% { transform: translate3d(-14vw, 10vh, 0) rotate(-39deg); opacity: 0; } 8% { opacity: .44; } 70% { opacity: .30; } 100% { transform: translate3d(108vw, -136vh, 0) rotate(-39deg); opacity: 0; } } /* ----------------------------------------------------------------------- CARDS PREMIUM TRANSPARENTES referência: segundo print aprovado ----------------------------------------------------------------------- */ /* cards nativos */ html.eios-club-v3 #root .bg-card, html.eios-club-v3 #root [data-slot="card"] { background: linear-gradient( 145deg, rgba(7, 21, 33, 0.56), rgba(3, 10, 17, 0.42) ) !important; border-color: rgba(84, 206, 255, 0.20) !important; backdrop-filter: blur(18px) saturate(112%) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(232,248,255,.03), 0 0 18px rgba(34,163,225,.04) !important; } /* containers com borda arredondada */ html.eios-club-v3 #root main .rounded-xl.border, html.eios-club-v3 #root main .rounded-2xl.border, html.eios-club-v3 #root main .rounded-3xl.border, html.eios-club-v3 #root aside .rounded-xl.border, html.eios-club-v3 #root aside .rounded-2xl.border, html.eios-club-v3 #root aside .rounded-3xl.border { background: linear-gradient( 145deg, rgba(6, 18, 28, 0.54), rgba(3, 9, 16, 0.38) ) !important; border-color: rgba(78, 198, 245, 0.18) !important; backdrop-filter: blur(16px) saturate(110%); -webkit-backdrop-filter: blur(16px) saturate(110%); box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(230,247,255,.02); } /* tabelas/listagens administrativas */ html.eios-club-v3 #root table, html.eios-club-v3 #root .overflow-hidden.border, html.eios-club-v3 #root .border.rounded-xl, html.eios-club-v3 #root .border.rounded-2xl, html.eios-club-v3 #root .border.rounded-3xl { border-color: rgba(76, 198, 255, 0.18) !important; } html.eios-club-v3 #root .rounded-xl.border:hover, html.eios-club-v3 #root .rounded-2xl.border:hover, html.eios-club-v3 #root .rounded-3xl.border:hover, html.eios-club-v3 #root [data-slot="card"]:hover { border-color: rgba(104, 220, 255, 0.30) !important; box-shadow: 0 18px 40px rgba(0,0,0,.36), 0 0 20px rgba(34,163,225,.05), inset 0 1px 0 rgba(240,251,255,.035) !important; } /* inputs */ html.eios-club-v3 #root input, html.eios-club-v3 #root textarea, html.eios-club-v3 #root select { background-color: rgba(3, 10, 17, 0.72) !important; border-color: rgba(84, 198, 241, 0.18) !important; } /* botões ghost / pills */ html.eios-club-v3 #root .rounded-full.border, html.eios-club-v3 #root .rounded-md.border { background-color: rgba(5, 16, 26, 0.46) !important; border-color: rgba(77, 198, 247, 0.18) !important; } /* scroll */ html.eios-club-v3 * { scrollbar-color: rgba(92, 207, 251, 0.34) rgba(0,0,0,.14); } html.eios-club-v3 *::-webkit-scrollbar { width: 7px; height: 7px; } html.eios-club-v3 *::-webkit-scrollbar-track { background: rgba(0,0,0,.12); } html.eios-club-v3 *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(99,219,255,.38), rgba(43,124,190,.24)); border-radius: 999px; } @media (prefers-reduced-motion: reduce) { #eios-club-universe-v3::before, .eios-club-comet-v3 { animation: none !important; } .eios-club-comet-v3 { display: none !important; } } /* EIOS_CLUB_CARD_NORMALIZATION_V3B_START */ /* referência visual: Equipe Comercial */ html.eios-club-v3 #root { --eios-card-commercial-bg: linear-gradient( 180deg, rgba(6, 14, 22, 0.82) 0%, rgba(4, 10, 16, 0.76) 52%, rgba(3, 8, 14, 0.72) 100% ); --eios-card-commercial-border: rgba(75, 198, 246, 0.18); --eios-card-commercial-border-hover: rgba(98, 216, 255, 0.28); --eios-card-commercial-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.02), 0 0 0 1px rgba(18, 120, 176, .03); } /* cards principais */ html.eios-club-v3 #root [data-slot="card"], html.eios-club-v3 #root .bg-card, html.eios-club-v3 #root .rounded-xl.border, html.eios-club-v3 #root .rounded-2xl.border, html.eios-club-v3 #root .rounded-3xl.border, html.eios-club-v3 #root .rounded-lg.border, html.eios-club-v3 #root .border.rounded-xl, html.eios-club-v3 #root .border.rounded-2xl, html.eios-club-v3 #root .border.rounded-3xl, html.eios-club-v3 #root .border.rounded-lg, html.eios-club-v3 #root .overflow-hidden.border, html.eios-club-v3 #root .shadow-sm.border, html.eios-club-v3 #root .shadow.border { background: var(--eios-card-commercial-bg) !important; border-color: var(--eios-card-commercial-border) !important; box-shadow: var(--eios-card-commercial-shadow) !important; backdrop-filter: blur(16px) saturate(112%) !important; -webkit-backdrop-filter: blur(16px) saturate(112%) !important; } /* hover premium discreto */ html.eios-club-v3 #root [data-slot="card"]:hover, html.eios-club-v3 #root .bg-card:hover, html.eios-club-v3 #root .rounded-xl.border:hover, html.eios-club-v3 #root .rounded-2xl.border:hover, html.eios-club-v3 #root .rounded-3xl.border:hover, html.eios-club-v3 #root .rounded-lg.border:hover, html.eios-club-v3 #root .border.rounded-xl:hover, html.eios-club-v3 #root .border.rounded-2xl:hover, html.eios-club-v3 #root .border.rounded-3xl:hover, html.eios-club-v3 #root .border.rounded-lg:hover, html.eios-club-v3 #root .overflow-hidden.border:hover { border-color: var(--eios-card-commercial-border-hover) !important; box-shadow: 0 18px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025), 0 0 22px rgba(37, 191, 255, .05) !important; } /* cards de métricas / KPIs */ html.eios-club-v3 #root main .grid > .border, html.eios-club-v3 #root main .grid > .rounded-xl, html.eios-club-v3 #root main .grid > .rounded-2xl, html.eios-club-v3 #root main .grid > .rounded-3xl { background: var(--eios-card-commercial-bg) !important; border-color: var(--eios-card-commercial-border) !important; } /* tabelas e listagens */ html.eios-club-v3 #root table, html.eios-club-v3 #root thead, html.eios-club-v3 #root tbody, html.eios-club-v3 #root tr, html.eios-club-v3 #root .table, html.eios-club-v3 #root [role="table"] { background-color: transparent !important; } html.eios-club-v3 #root .overflow-auto.border, html.eios-club-v3 #root .overflow-x-auto.border, html.eios-club-v3 #root .overflow-y-auto.border, html.eios-club-v3 #root .overflow-hidden.border.rounded-xl, html.eios-club-v3 #root .overflow-hidden.border.rounded-2xl, html.eios-club-v3 #root .overflow-hidden.border.rounded-3xl { background: var(--eios-card-commercial-bg) !important; border-color: var(--eios-card-commercial-border) !important; } /* blocos internos menores */ html.eios-club-v3 #root .rounded-full.border, html.eios-club-v3 #root .rounded-md.border, html.eios-club-v3 #root .rounded-lg.border { background-color: rgba(6, 14, 22, 0.62) !important; border-color: rgba(79, 198, 246, 0.16) !important; } /* inputs e filtros, para combinar com o card comercial */ html.eios-club-v3 #root input, html.eios-club-v3 #root textarea, html.eios-club-v3 #root select { background: rgba(2, 8, 14, 0.88) !important; border-color: rgba(74, 186, 232, 0.16) !important; box-shadow: none !important; } /* dropdown / popover / modal */ html.eios-club-v3 #root [data-radix-popper-content-wrapper] > *, html.eios-club-v3 #root [role="dialog"], html.eios-club-v3 #root [role="menu"], html.eios-club-v3 #root [role="listbox"], html.eios-club-v3 #root .popover-content, html.eios-club-v3 #root .dropdown-content { background: linear-gradient( 180deg, rgba(5, 12, 20, 0.93) 0%, rgba(3, 8, 14, 0.90) 100% ) !important; border-color: rgba(80, 198, 246, 0.18) !important; backdrop-filter: blur(18px) saturate(112%) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; } /* garante que os painéis grandes não fiquem mais "chapados" */ html.eios-club-v3 #root section.border, html.eios-club-v3 #root article.border, html.eios-club-v3 #root aside.border, html.eios-club-v3 #root div.border.rounded-xl, html.eios-club-v3 #root div.border.rounded-2xl, html.eios-club-v3 #root div.border.rounded-3xl { background: var(--eios-card-commercial-bg) !important; } /* EIOS_CLUB_CARD_NORMALIZATION_V3B_END */ /* EIOS_CLUB_CARD_TONE_REFINEMENT_V3C_START */ /* * REFERÊNCIA: * segundo print aprovado. * * Tom: * grafite fumê + azul noite muito discreto. * * Não é preto chapado. * Não é azul petróleo forte. * Não é verde. */ html.eios-club-v3 #root { --eios-second-print-card: linear-gradient( 180deg, rgba( 24, 28, 33, .82 ) 0%, rgba( 17, 23, 29, .80 ) 52%, rgba( 10, 27, 39, .74 ) 100% ); --eios-second-print-border: rgba( 69, 185, 230, .16 ); --eios-second-print-border-hover: rgba( 94, 211, 253, .26 ); --eios-second-print-shadow: 0 14px 34px rgba( 0, 0, 0, .30 ), inset 0 1px 0 rgba( 255, 255, 255, .018 ); } /* ================================================================ PRINCIPAL CARD SURFACES ================================================================ */ html.eios-club-v3 #root [data-slot="card"], html.eios-club-v3 #root .bg-card, html.eios-club-v3 #root .rounded-xl.border, html.eios-club-v3 #root .rounded-2xl.border, html.eios-club-v3 #root .rounded-3xl.border, html.eios-club-v3 #root .border.rounded-xl, html.eios-club-v3 #root .border.rounded-2xl, html.eios-club-v3 #root .border.rounded-3xl, html.eios-club-v3 #root .overflow-hidden.border, html.eios-club-v3 #root .overflow-auto.border, html.eios-club-v3 #root .overflow-x-auto.border, html.eios-club-v3 #root .overflow-y-auto.border { background: var( --eios-second-print-card ) !important; background-color: rgba( 18, 24, 31, .79 ) !important; border-color: var( --eios-second-print-border ) !important; box-shadow: var( --eios-second-print-shadow ) !important; backdrop-filter: blur(14px) saturate(108%) !important; -webkit-backdrop-filter: blur(14px) saturate(108%) !important; } /* ================================================================ LARGER PANELS / KPI BLOCKS ================================================================ */ html.eios-club-v3 #root main .grid > .border, html.eios-club-v3 #root main .grid > .rounded-xl, html.eios-club-v3 #root main .grid > .rounded-2xl, html.eios-club-v3 #root main .grid > .rounded-3xl { background: var( --eios-second-print-card ) !important; border-color: var( --eios-second-print-border ) !important; } /* ================================================================ CUSTOM DARK SURFACES ================================================================ */ /* * Club has older surfaces using custom Tailwind background tokens. * When they are also bordered/rounded, they are visual cards. */ html.eios-club-v3 #root [class*="bg-slate"] [class*="border"] [class*="rounded"], html.eios-club-v3 #root [class*="bg-zinc"] [class*="border"] [class*="rounded"], html.eios-club-v3 #root [class*="bg-neutral"] [class*="border"] [class*="rounded"], html.eios-club-v3 #root [class*="bg-gray"] [class*="border"] [class*="rounded"] { background: var( --eios-second-print-card ) !important; background-color: rgba( 18, 24, 31, .79 ) !important; border-color: var( --eios-second-print-border ) !important; box-shadow: var( --eios-second-print-shadow ) !important; } /* ================================================================ TABLE WRAPPERS ================================================================ */ html.eios-club-v3 #root table, html.eios-club-v3 #root thead, html.eios-club-v3 #root tbody, html.eios-club-v3 #root tr, html.eios-club-v3 #root td, html.eios-club-v3 #root th { background: transparent !important; } /* ================================================================ HOVER ================================================================ */ html.eios-club-v3 #root [data-slot="card"]:hover, html.eios-club-v3 #root .bg-card:hover, html.eios-club-v3 #root .rounded-xl.border:hover, html.eios-club-v3 #root .rounded-2xl.border:hover, html.eios-club-v3 #root .rounded-3xl.border:hover { border-color: var( --eios-second-print-border-hover ) !important; box-shadow: 0 17px 37px rgba( 0, 0, 0, .34 ), inset 0 1px 0 rgba( 255, 255, 255, .022 ), 0 0 18px rgba( 49, 183, 235, .035 ) !important; } /* ================================================================ SECONDARY CONTROLS ================================================================ */ html.eios-club-v3 #root .rounded-full.border, html.eios-club-v3 #root .rounded-md.border { background: linear-gradient( 180deg, rgba( 20, 24, 29, .76 ), rgba( 9, 25, 37, .64 ) ) !important; border-color: rgba( 72, 188, 233, .14 ) !important; } /* ================================================================ INPUTS / SEARCH / FILTERS ================================================================ */ html.eios-club-v3 #root input, html.eios-club-v3 #root textarea, html.eios-club-v3 #root select { background: linear-gradient( 180deg, rgba( 13, 17, 22, .91 ), rgba( 8, 15, 21, .88 ) ) !important; border-color: rgba( 68, 175, 219, .14 ) !important; box-shadow: none !important; } /* ================================================================ DROPDOWNS / DIALOGS ================================================================ */ html.eios-club-v3 #root [role="dialog"], html.eios-club-v3 #root [role="menu"], html.eios-club-v3 #root [role="listbox"] { background: linear-gradient( 180deg, rgba( 25, 29, 34, .95 ), rgba( 11, 23, 32, .93 ) ) !important; border-color: rgba( 72, 190, 237, .17 ) !important; } /* EIOS_CLUB_CARD_TONE_REFINEMENT_V3C_END */ /* EIOS_GLOBAL_CANONICAL_SHELL_V1_START */ /* ================================================================ CANONICAL CLUB SHELL ================================================================ */ html.eios-club-v3, html.eios-club-v3 body, html.eios-club-v3 #root { background: #000000 !important; background-color: #000000 !important; } html.eios-club-v3 #root [data-sidebar="sidebar"] { background: rgba(0, 0, 0, .92) !important; } html.eios-club-v3 #root [data-sidebar="inset"] { background: transparent !important; } .eios-canonical-shell-route { position: relative; width: 100%; min-width: 0; min-height: 100%; background: transparent !important; } /* ================================================================ PAGE BACKGROUNDS: remove old navy full-screen fills, reveal canonical BLACK universe. ================================================================ */ .eios-canonical-shell-route [class*="min-h-screen"][class*="bg-slate-950"], .eios-canonical-shell-route [class*="min-h-screen"][class*="bg-[#050A0F]"], .eios-canonical-shell-route [class*="min-h-screen"][class*="bg-[#0a0a0f]"], .eios-canonical-shell-route [class*="min-h-screen"][class*="bg-[#0a0a0a]"], .eios-canonical-shell-route [class*="min-h-screen"][class*="bg-[#050a0f]"] { background: transparent !important; background-color: transparent !important; } /* Header bars remain readable but BLACK. */ .eios-canonical-shell-route [class*="sticky"][class*="bg-slate-900"], .eios-canonical-shell-route [class*="sticky"][class*="bg-[#050A0F]"], .eios-canonical-shell-route [class*="sticky"][class*="bg-[#03070A]"] { background: rgba(0, 0, 0, .88) !important; } /* ================================================================ OWNER PORTAL ================================================================ */ .eios-page-owner [class*="bg-slate-800"][class*="rounded"] { background: var(--eios-second-print-card) !important; border: 1px solid var(--eios-second-print-border) !important; backdrop-filter: blur(14px) saturate(108%); } .eios-page-owner [class*="bg-slate-900"][class*="rounded"] { background: var(--eios-second-print-card) !important; } /* ================================================================ KNOWN LEGACY CARD FILLS Any rounded UI block becomes the approved smoked card. ================================================================ */ .eios-canonical-shell-route [class*="bg-[#0A1628]"][class*="rounded"], .eios-canonical-shell-route [class*="bg-[#0D1F3C]"][class*="rounded"], .eios-canonical-shell-route [class*="bg-[#071321]"][class*="rounded"], .eios-canonical-shell-route [class*="bg-[#07111F]"][class*="rounded"], .eios-canonical-shell-route [class*="bg-[#06111d]"][class*="rounded"], .eios-canonical-shell-route [class*="bg-[#07111A]"][class*="rounded"] { background: var(--eios-second-print-card) !important; background-color: rgba(18, 24, 31, .79) !important; border-color: var(--eios-second-print-border) !important; backdrop-filter: blur(14px) saturate(108%) !important; -webkit-backdrop-filter: blur(14px) saturate(108%) !important; } /* ================================================================ MEU CLUB Dashboard already had its own old sidebar. Preserve ALL page content, hide ONLY duplicate navigation. ================================================================ */ .eios-page-dashboard > .min-h-screen > aside { display: none !important; } .eios-page-dashboard > .min-h-screen > main { margin-left: 0 !important; width: 100% !important; } /* ================================================================ SERENA Preserve Serena history + AI workspace. Hide ONLY her duplicated ecosystem navigation sidebar. ================================================================ */ .eios-page-serena > .flex.h-screen > aside:first-of-type { display: none !important; } .eios-page-serena > .flex.h-screen > [class*="flex-shrink-0"][class*="border-r"]:first-child { display: none !important; } /* ================================================================ CANONICAL CÉREBRO PROFILE MENU INSIDE MANAGEMENT OS ================================================================ */ .eios-canonical-profile-dock { position: fixed; left: 14px; bottom: 14px; z-index: 160; width: 238px; max-width: calc(100vw - 28px); } /* Profile panel itself keeps black/Cérebro appearance. */ .eios-canonical-profile-dock > * { background: rgba(0, 0, 0, .94); } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 767px) { .eios-canonical-profile-dock { left: 10px; bottom: 10px; width: min( 230px, calc(100vw - 20px) ); } } /* EIOS_GLOBAL_CANONICAL_SHELL_V1_END */ /* EIOS_FINAL_BLACK_UNIVERSE_V7_START */ :root { --club-final-black: #000000; --club-final-glass: rgba(6, 8, 11, .26); --club-final-glass-hover: rgba(8, 11, 15, .34); --club-final-glass-strong: rgba(7, 10, 14, .34); --club-final-border: rgba(43, 184, 245, .22); --club-final-border-active: rgba(54, 209, 255, .48); --club-final-glow: rgba(0, 190, 255, .13); --club-final-text: #f4fbff; } /* ================================================================ 1. ABSOLUTE BLACK FOUNDATION ================================================================ */ html, body { background: #000000 !important; background-color: #000000 !important; min-height: 100% !important; } body { min-height: 100vh !important; } /* Root is transparent. Universe lives behind it. */ #root { position: relative !important; z-index: 1 !important; min-height: 100vh !important; background: transparent !important; background-color: transparent !important; } /* ================================================================ 2. FINAL UNIVERSE LAYER ================================================================ */ #eios-final-universe-v7 { position: fixed !important; inset: 0 !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none !important; background: #000000 !important; } #eios-final-universe-v7::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at 20% 25%, rgba(0, 170, 255, .025), transparent 24% ), radial-gradient( circle at 82% 72%, rgba(0, 150, 255, .022), transparent 26% ); pointer-events: none; } .eios-final-star { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 999px; background: rgba( 222, 248, 255, var(--opacity) ); box-shadow: 0 0 7px rgba( 105, 211, 255, .32 ); animation: eiosFinalStarMove var(--duration) ease-in-out var(--delay) infinite; will-change: transform, opacity; } @keyframes eiosFinalStarMove { 0% { transform: translate3d( 0, 14px, 0 ); opacity: .18; } 50% { opacity: .86; } 100% { transform: translate3d( 0, -28px, 0 ); opacity: .20; } } /* ================================================================ 3. EXACTLY TWO COMETS — BOTTOM -> TOP ================================================================ */ .eios-final-comet { position: absolute; width: clamp( 150px, 14vw, 240px ); height: 2px; border-radius: 999px; opacity: 0; background: linear-gradient( 90deg, transparent 0%, rgba(77, 195, 255, .05) 28%, rgba(89, 211, 255, .34) 65%, rgba(224, 249, 255, .98) 100% ); box-shadow: 0 0 9px rgba(63, 198, 255, .26), 0 0 20px rgba(63, 198, 255, .12); transform-origin: right center; pointer-events: none; will-change: transform, opacity; } .eios-final-comet::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); border-radius: 999px; background: #f3fdff; box-shadow: 0 0 9px rgba(235, 253, 255, .90), 0 0 17px rgba(70, 213, 255, .52); } .eios-final-comet-a { animation: eiosFinalCometA 13s linear infinite; } .eios-final-comet-b { animation: eiosFinalCometB 17s linear -7s infinite; } @keyframes eiosFinalCometA { 0% { transform: translate3d( -16vw, 116vh, 0 ) rotate(-54deg); opacity: 0; } 8% { opacity: .90; } 43% { opacity: .72; } 58% { transform: translate3d( 65vw, -28vh, 0 ) rotate(-54deg); opacity: 0; } 100% { transform: translate3d( 65vw, -28vh, 0 ) rotate(-54deg); opacity: 0; } } @keyframes eiosFinalCometB { 0% { transform: translate3d( 34vw, 118vh, 0 ) rotate(-58deg); opacity: 0; } 9% { opacity: .84; } 44% { opacity: .67; } 60% { transform: translate3d( 82vw, -30vh, 0 ) rotate(-58deg); opacity: 0; } 100% { transform: translate3d( 82vw, -30vh, 0 ) rotate(-58deg); opacity: 0; } } /* ================================================================ 4. PAGE CANVAS NO NAVY PAGE BACKGROUND. ================================================================ */ #root [data-sidebar="inset"], #root [data-sidebar="content"], #root .eios-canonical-shell-route, #root main, #root > div, #root > div > div { background-color: transparent !important; } /* Full-screen structural wrappers only. */ #root [class*="min-h-screen"]:not([class*="rounded"]), #root [class*="h-screen"]:not([class*="rounded"]), #root [class*="min-h-full"]:not([class*="rounded"]) { background-color: transparent !important; } /* * Known structural navy classes. * Cards are excluded here and restored separately below. */ #root [class*="bg-[#01050B]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#020B18]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#020914]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#061526]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#081C31]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#06101E]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#071321]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#060E1A]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#050A0F]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#03070A]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#0A1628]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-[#0D1F3C]"]:not([class*="rounded"]):not([class*="border"]), #root [class*="bg-slate-950"]:not([class*="rounded"]):not([class*="border"]) { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ================================================================ 5. SIDEBAR = PURE BLACK ================================================================ */ #root [data-sidebar="sidebar"], #root aside, #root .sidebar, #root .dashboard-sidebar, #root .club-sidebar, #root .member-sidebar, #root [class*="Sidebar"] { background: #000000 !important; background-color: #000000 !important; background-image: none !important; border-color: rgba( 42, 169, 225, .13 ) !important; } /* Sidebar structural children remain black. */ #root [data-sidebar="sidebar"] > div, #root aside > div { background-color: #000000 !important; } /* ================================================================ 6. HEADER = BLACK ================================================================ */ #root header, #root [class*="topbar"], #root [class*="Topbar"] { background: rgba( 0, 0, 0, .96 ) !important; background-color: rgba( 0, 0, 0, .96 ) !important; background-image: none !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* ================================================================ 7. CARDS = TRUE TRANSPARENT GLASS NO BLUE FILL. ================================================================ */ #root [data-slot="card"], #root .bg-card, #root .rounded-xl.border, #root .rounded-2xl.border, #root .rounded-3xl.border, #root .border.rounded-xl, #root .border.rounded-2xl, #root .border.rounded-3xl, #root .overflow-hidden.border { background: rgba( 6, 8, 11, .26 ) !important; background-color: rgba( 6, 8, 11, .26 ) !important; border-color: var(--club-final-border) !important; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .025 ), 0 12px 30px rgba( 0, 0, 0, .22 ) !important; backdrop-filter: blur(12px) saturate(108%) !important; -webkit-backdrop-filter: blur(12px) saturate(108%) !important; } /* Known card surfaces. */ #root [class*="bg-[#0A1628]"][class*="border"], #root [class*="bg-[#0D1F3C]"][class*="border"], #root [class*="bg-[#071321]"][class*="border"], #root [class*="bg-[#061526]"][class*="border"], #root [class*="bg-[#07111F]"][class*="border"], #root [class*="bg-[#06111d]"][class*="border"] { background: rgba( 6, 8, 11, .26 ) !important; background-color: rgba( 6, 8, 11, .26 ) !important; border-color: var(--club-final-border) !important; backdrop-filter: blur(12px) saturate(108%) !important; -webkit-backdrop-filter: blur(12px) saturate(108%) !important; } /* ================================================================ 8. BUTTONS = TRANSPARENT NO BLUE FILL. ================================================================ */ #root button, #root a[role="button"], #root [role="button"] { background: rgba( 0, 0, 0, .08 ) !important; background-color: rgba( 0, 0, 0, .08 ) !important; background-image: none !important; border-color: rgba( 44, 187, 247, .27 ) !important; box-shadow: none !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } #root button:hover, #root a[role="button"]:hover, #root [role="button"]:hover { background: rgba( 0, 0, 0, .18 ) !important; background-color: rgba( 0, 0, 0, .18 ) !important; border-color: rgba( 65, 214, 255, .42 ) !important; box-shadow: 0 0 16px rgba( 0, 190, 255, .08 ) !important; } /* * IMPORTANT: * only explicit accessibility/state attributes. * NO [class*="active"] global selector. */ #root a[aria-current="page"], #root button[aria-current="page"], #root button[aria-selected="true"], #root [role="tab"][aria-selected="true"] { background: rgba( 0, 0, 0, .16 ) !important; background-color: rgba( 0, 0, 0, .16 ) !important; border-color: var(--club-final-border-active) !important; box-shadow: 0 0 18px var(--club-final-glow) !important; } /* Sidebar links = transparent. */ #root aside a, #root [data-sidebar="sidebar"] a { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Selected sidebar item gets outline/glow only. */ #root aside a[aria-current="page"], #root [data-sidebar="sidebar"] a[aria-current="page"] { background: rgba( 0, 0, 0, .18 ) !important; border-color: rgba( 54, 209, 255, .44 ) !important; box-shadow: 0 0 17px rgba( 0, 194, 255, .12 ) !important; } /* ================================================================ 9. TABLES = TRANSPARENT ================================================================ */ #root table, #root thead, #root tbody, #root tr, #root th, #root td { background-color: transparent !important; } /* ================================================================ 10. INPUTS ================================================================ */ #root input, #root textarea, #root select, #root [role="combobox"] { background: rgba( 0, 0, 0, .24 ) !important; background-color: rgba( 0, 0, 0, .24 ) !important; border-color: rgba( 44, 187, 247, .20 ) !important; } /* ================================================================ 11. GESTAO ROUTES ================================================================ */ html[data-eios-route^="/gestao"] #root main, html[data-eios-route^="/gestao"] #root .eios-canonical-shell-route { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ================================================================ 12. MEMBER / SOCIAL / SERENA / PROFILE / MARKETPLACE ================================================================ */ html[data-eios-route="/serena"] #root main, html[data-eios-route="/rede-social"] #root main, html[data-eios-route="/comunidade"] #root main, html[data-eios-route="/recompensas"] #root main, html[data-eios-route="/resgates"] #root main, html[data-eios-route="/configuracoes"] #root main, html[data-eios-route="/profile"] #root main, html[data-eios-route="/destinos"] #root main, html[data-eios-route="/experiencias"] #root main, html[data-eios-route="/marketplace"] #root main, html[data-eios-route="/minha-aeronave"] #root main, html[data-eios-route="/carteira"] #root main, html[data-eios-route="/pontos"] #root main { background: transparent !important; background-color: transparent !important; } /* ================================================================ 13. PROFILE COVER / PHOTOS Never remove actual image backgrounds. ================================================================ */ #root img, #root video { background-color: transparent; } /* ================================================================ 14. MOBILE ================================================================ */ @media (max-width: 767px) { #root aside, #root [data-sidebar="sidebar"] { background: #000000 !important; background-color: #000000 !important; } .eios-final-comet { width: 145px; } } /* EIOS_FINAL_BLACK_UNIVERSE_V7_END */