/* Theme: modern-sleek Prometheus Version: 1.6 Description: A sleek, modern black and white theme with smooth animations Last Updated: January 10, 2026 - v2.7 BLACK WHITE BLUR */ /* Global: never underline links on hover/focus (Bootstrap can re-add underlines on nested spans) */ a, a:hover, a:focus, a:active, a:hover *, a:focus *, a:active *{ text-decoration: none !important; text-decoration-line: none !important; text-decoration-thickness: initial !important; text-decoration-style: initial !important; text-decoration-color: currentColor !important; } /* Extra belt-and-suspenders for nav/button-like anchors */ .navbar a:hover, .navbar a:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .vn-discord-link:hover, .vn-discord-link:focus, .vn-announce:hover, .vn-announce:focus{ text-decoration: none !important; text-decoration-line: none !important; } /* Navigation Bar - Fully transparent */ .navbar-inverse{background: transparent !important; box-shadow: none !important; border-bottom: none !important; padding: 0.5rem 0 !important;} /* Navbar Links - Styled exactly like language selector */ .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > .nav-item > a, .navbar .navbar-nav li a, .navbar-nav .nav-link, nav.navbar .nav-link{ background: rgba(20, 20, 20, 0.78) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; border-radius: 8px !important; padding: 10px 18px !important; margin: 0 6px !important; transition: all 0.25s ease !important; position: relative !important; font-weight: 600 !important; overflow: hidden !important; backdrop-filter: blur(10px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important; } .navbar-inverse .navbar-nav > li > a:before, .navbar-inverse .navbar-nav > .nav-item > a:before, .navbar .navbar-nav li a:before, .navbar-nav .nav-link:before{ content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.25) !important; transform: translate(-50%, -50%) !important; transition: width 0.6s ease-out, height 0.6s ease-out !important; z-index: 0 !important; pointer-events: none !important; } .navbar-inverse .navbar-nav > li > a:active:before, .navbar-inverse .navbar-nav > .nav-item > a:active:before, .navbar .navbar-nav li a:active:before, .navbar-nav .nav-link:active:before{ width: 300px !important; height: 300px !important; } .navbar-inverse .navbar-nav > li > a span, .navbar-inverse .navbar-nav > li > a i, .navbar-inverse .navbar-nav > .nav-item > a span, .navbar-inverse .navbar-nav > .nav-item > a i, .navbar .navbar-nav li a span, .navbar .navbar-nav li a i, .navbar-nav .nav-link span, .navbar-nav .nav-link i{ position: relative !important; z-index: 2 !important; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > .nav-item > a:hover, .navbar-inverse .navbar-nav > .nav-item > a:focus, .navbar .navbar-nav li a:hover, .navbar .navbar-nav li a:focus, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus{ background: rgba(34, 34, 34, 0.9) !important; color: #ffffff !important; transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.28) inset !important; border-color: rgba(255, 255, 255, 0.32) !important; text-decoration: none !important; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > li.active > a, .navbar .navbar-nav li.active a, .navbar-nav .nav-item.active .nav-link, .navbar-nav .active > .nav-link{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(190, 190, 190, 0.24) 50%, rgba(48, 48, 48, 0.92) 100%) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.32), inset 0 -1px 2px rgba(0, 0, 0, 0.35) !important; } /* Navbar structure */ .navbar{display: flex !important; align-items: center !important; padding: 0 2rem !important;} .navbar-header{display: flex !important; align-items: center !important; margin-right: 3rem !important;} .navbar-brand{margin: 0 !important;} /* Navbar collapse - Split left and right */ .navbar-collapse{display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; padding: 0 !important; position: relative !important;} .navbar-collapse > .nav:first-of-type{display: flex !important; flex-direction: row !important; align-items: center !important; margin-right: 12px !important; margin-left: 0 !important; padding: 0 !important; order: 1 !important; flex: 0 0 auto !important;} .navbar-collapse > .nav:first-of-type > li{margin: 0 0.5rem !important;} .navbar-collapse > .nav:first-of-type > li > a{padding: 0.75rem 0.75rem !important; display: flex !important; align-items: center !important;} .navbar-collapse > .nav.ml-auto{display: flex !important; flex-direction: row !important; align-items: center !important; margin-left: 12px !important; margin-right: 0 !important; padding: 0 !important; order: 3 !important; flex: 0 0 auto !important;} .navbar-collapse > .nav.ml-auto > li{margin: 0 0.5rem !important;} .navbar-collapse > .nav.ml-auto > li > a{padding: 0.75rem 0.75rem !important; display: flex !important; align-items: center !important;} /* Center slot for logo only */ .navbar-center{order: 2 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 0.5rem !important;} .navbar-center::before{content:none !important;} .navbar-center .navbar-brand{margin: 0 !important; padding: 0 !important; position: relative !important;} @media (max-width: 767px){ .navbar-center{display: none !important;} } /* Dropdown toggle arrow animation */ .dropdown-toggle::after{ transition: transform 0.3s ease !important; display: inline-block !important; margin-left: 6px !important; vertical-align: middle !important; } .dropdown.show .dropdown-toggle::after, .open .dropdown-toggle::after{transform: rotate(180deg) !important;} /* Navbar dropdown styling - match language selector */ .navbar-nav .dropdown-toggle, .navbar-nav .nav-item.dropdown > a{ background: rgba(40, 50, 70, 0.8) !important; border: 1px solid rgba(100, 150, 200, 0.4) !important; border-radius: 6px !important; padding: 8px 16px !important; } /* Hide any top-level dropdown in nav (Store) */ .navbar-inverse .navbar-nav > .nav-item.dropdown, .navbar-inverse .nav > .nav-item.dropdown, nav.navbar .nav > .nav-item.dropdown, .navbar .nav > .nav-item.dropdown, .navbar .dropdown-toggle{display: none !important;} /* Shimmer effect for navbar links */ .navbar-inverse .navbar-nav > li > a:after, .navbar-inverse .navbar-nav > .nav-item > a:after, .navbar .navbar-nav li a:after, .navbar-nav .nav-link:after{ content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important; transform: skewX(-20deg) !important; transition: left 0.7s ease !important; z-index: 1 !important; pointer-events: none !important; } .navbar-inverse .navbar-nav > li > a:hover:after, .navbar-inverse .navbar-nav > .nav-item > a:hover:after, .navbar .navbar-nav li a:hover:after, .navbar-nav .nav-link:hover:after{ left: 150% !important; } /* Single gradient pill navbar with centered logo */ .navbar.navbar-inverse:not(.fixed-top){justify-content: center !important; position: relative !important; z-index: 20 !important; background: transparent !important; box-shadow: none !important; padding: 10px 0 !important;} .navbar.navbar-inverse:not(.fixed-top) .container{max-width: 1200px !important; width: 100% !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; position: relative !important; display: flex !important; justify-content: center !important;} .navbar.navbar-inverse:not(.fixed-top) .navbar-collapse{position: relative !important; z-index: 2 !important; width: 82% !important; max-width: 1040px !important; min-height: 70px !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;} .navbar.navbar-inverse:not(.fixed-top) .navbar-collapse::before{content:'' !important; position:absolute !important; inset: 0 !important; margin: auto !important; height: 46px !important; width: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(250,250,250,0.9) 0%, rgba(210,210,210,0.55) 45%, rgba(16,16,16,0.92) 100%) !important; box-shadow: 0 16px 42px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.18) !important; border: 0 !important; background-clip: padding-box !important; backdrop-filter: blur(12px) saturate(1.1) !important; -webkit-backdrop-filter: blur(12px) saturate(1.1) !important; pointer-events: none !important;} .navbar-nav, .navbar-center{position: relative !important; z-index: 3 !important;} @media (min-width: 768px){ /* Prevent the toggler wrapper from shifting the centered pill on desktop */ .navbar.navbar-inverse:not(.fixed-top) .navbar-header{display: none !important;} } /* Ensure navbar button text/icons are readable when not hovering */ .navbar.navbar-inverse:not(.fixed-top) .nav-link{color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;} .navbar.navbar-inverse:not(.fixed-top) .nav-link i{color: #ffffff !important; opacity: 0.95 !important;} .navbar-brand{display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; padding: 0 !important;} .navbar-brand img{width: 76px !important; height: 76px !important; border-radius: 50% !important; border: 4px solid rgba(255,255,255,0.9) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.55) !important; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(0,0,0,0.9)) !important;} @media (max-width: 991px){ .navbar.navbar-inverse:not(.fixed-top) .container{padding: 0 10px !important;} .navbar.navbar-inverse:not(.fixed-top) .navbar-collapse{width: 100% !important; min-height: 0 !important; padding: 8px 0 !important; gap: 8px !important;} .navbar.navbar-inverse:not(.fixed-top) .navbar-collapse::before{height: 38px !important;} .navbar-brand img{width: 52px !important; height: 52px !important;} } /* Landing hero layout */ .landing-hero{position: relative !important; min-height: 90vh !important; display: block !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; overflow: hidden !important; color: rgb(245, 245, 245) !important; background-color: transparent !important;} .landing-hero:before{content:'' !important; position:absolute !important; inset:0 !important; background: linear-gradient(120deg, rgba(6, 12, 20, 0.76) 0%, rgba(8, 14, 22, 0.82) 55%, rgba(4, 8, 14, 0.9) 100%) !important; z-index: 1 !important; pointer-events:none !important;} .landing-hero:after{content:'' !important; position:absolute !important; inset:0 !important; background: radial-gradient(900px 520px at 22% 35%, rgba(255,255,255,0.08), transparent 60%), radial-gradient(900px 520px at 78% 45%, rgba(120,255,180,0.06), transparent 62%) !important; z-index: 1 !important; pointer-events:none !important;} /* Full-bleed hero background swap layers (JS updates --vn-hero-bg / --vn-hero-bg-next) */ .vn-hero-bg-layer{position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: saturate(1.15) contrast(1.08) brightness(0.72) !important; transform: scale(1.02) !important;} .vn-hero-bg-layer--base{background-image: var(--vn-hero-bg) !important; opacity: 1 !important;} .vn-hero-bg-layer--next{background-image: var(--vn-hero-bg-next) !important; opacity: 0 !important; transition: opacity 0.34s ease !important;} /* When swapping, fade the next layer on top */ .landing-hero.vn-hero-bg-swap .vn-hero-bg-layer--next{opacity: 1 !important;} /* Optional subtle animation during swap */ .landing-hero.vn-hero-bg-swapping .vn-hero-bg-layer{transform: scale(1.04) !important;} .hero-frame{position: relative !important; z-index: 2 !important; max-width: 1280px !important; width: 100% !important; margin: 0 auto !important; padding: 3.25rem 20px 3rem !important; box-sizing: border-box !important;} /* New hero copy + servers grid */ .vn-hero-grid{display: grid !important; grid-template-columns: 1fr !important; gap: 2.25rem !important; align-items: center !important; justify-items: center !important;} .vn-hero-copy{max-width: 100% !important; text-align: center !important;} .vn-hero-kicker{display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(14px) !important; font-weight: 800 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; font-size: 12px !important; color: rgba(245,245,245,0.92) !important;} .vn-hero-kicker-dot{width: 10px !important; height: 10px !important; border-radius: 50% !important; background: rgba(120, 255, 180, 0.95) !important; box-shadow: 0 0 0 3px rgba(120,255,180,0.18), 0 10px 22px rgba(120,255,180,0.18) !important;} .vn-hero-title{display: inline-block !important; margin: 18px 0 16px !important; padding: 12px 20px !important; border-radius: 20px !important; font-size: clamp(44px, 5.7vw, 76px) !important; line-height: 1.03 !important; letter-spacing: -1.2px !important; font-weight: 900 !important; color: rgba(255,255,255,0.995) !important; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 35%, rgba(0,0,0,0.24) 100%) !important; border: 1px solid rgba(255,255,255,0.26) !important; backdrop-filter: blur(16px) saturate(1.12) !important; -webkit-backdrop-filter: blur(16px) saturate(1.12) !important; box-shadow: 0 24px 72px rgba(0,0,0,0.58), 0 0 34px rgba(120,255,180,0.10), inset 0 1px 0 rgba(255,255,255,0.18) !important; text-shadow: 0 14px 46px rgba(0,0,0,0.62), 0 0 18px rgba(120,255,180,0.12) !important;} .vn-hero-lead{margin: 0 0 18px !important; font-size: 18px !important; line-height: 1.6 !important; color: rgba(235, 235, 235, 0.86) !important; max-width: 56ch !important;} .vn-hero-servercard{width: 100% !important; display: grid !important; place-items: center !important; margin: 8px 0 14px !important;} .vn-community{width: 100% !important; margin: 18px auto 8px !important;} .vn-community-grid{display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 18px !important; width: 100% !important;} .vn-community-card{grid-column: span 12 !important; text-align: left !important; padding: 18px 18px 16px !important; border-radius: 20px !important; background: rgba(0,0,0,0.22) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 22px 58px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.10) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; position: relative !important; overflow: hidden !important;} .vn-community-card:before{content:'' !important; position:absolute !important; inset:0 !important; background: radial-gradient(800px 240px at 15% 0%, rgba(120,255,180,0.10), transparent 55%), radial-gradient(800px 240px at 85% 0%, rgba(255,255,255,0.08), transparent 55%) !important; pointer-events:none !important; z-index:0 !important;} .vn-community-card > *{position: relative !important; z-index: 1 !important;} .vn-community-card-title{font-weight: 800 !important; letter-spacing: -0.4px !important; font-size: 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important;} .vn-community-card-sub{color: rgba(255,255,255,0.82) !important; font-size: 13px !important; line-height: 1.45 !important; margin-bottom: 12px !important;} .vn-community-card-actions{display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 12px !important;} .vn-community-card--discord{display: flex !important; flex-direction: column !important;} .vn-discord-links{display: grid !important; gap: 14px !important; margin: 10px 0 0 !important; flex: 1 1 auto !important; align-content: stretch !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;} .vn-discord-link{display: grid !important; gap: 14px !important; padding: 18px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(25, 25, 25, 0.62) 0%, rgba(18, 18, 18, 0.68) 55%, rgba(10, 10, 10, 0.78) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(22px) !important; -webkit-backdrop-filter: blur(22px) !important; position: relative !important; overflow: hidden !important; text-decoration: none !important; color: rgba(255,255,255,0.96) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important; min-height: 140px !important;} .vn-discord-link:before{content: '' !important; position: absolute !important; inset: -35% -55% auto auto !important; width: 320px !important; height: 320px !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 62%) !important; pointer-events: none !important;} .vn-discord-link:hover{transform: translateY(-3px) !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;} .vn-discord-head, .vn-discord-foot{position: relative !important; z-index: 2 !important;} .vn-discord-head{display: grid !important; grid-template-columns: 46px 1fr !important; gap: 14px !important; align-items: center !important;} .vn-discord-logo{width: 46px !important; height: 46px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36) !important; flex: 0 0 auto !important;} .vn-discord-logo i{font-size: 22px !important; color: rgba(120,255,180,0.92) !important;} .vn-discord-meta .server-title{margin-top: 2px !important;} .vn-discord-foot{display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;} .vn-discord-url{font-weight: 900 !important; font-size: 12px !important; letter-spacing: 0.35px !important; color: rgba(255,255,255,0.78) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;} .vn-discord-cta{display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 16px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(180,180,180,0.12) 45%, rgba(10,10,10,0.55) 100%) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.95) !important; font-weight: 900 !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16) !important;} .vn-community-btn{display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 12px !important; border-radius: 14px !important; background: rgba(80, 255, 160, 0.16) !important; border: 1px solid rgba(120,255,180,0.22) !important; color: rgba(255,255,255,0.97) !important; text-decoration: none !important; font-weight: 800 !important; font-size: 13px !important; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease !important;} .vn-community-btn:hover{transform: translateY(-1px) !important; background: rgba(80, 255, 160, 0.22) !important; border-color: rgba(120,255,180,0.32) !important;} .vn-community-btn--ghost{background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important;} .vn-community-btn--ghost:hover{background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.20) !important;} .vn-community-list{list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px !important;} .vn-community-item{padding: 10px 12px !important; border-radius: 16px !important; background: rgba(0,0,0,0.22) !important; border: 1px solid rgba(255,255,255,0.10) !important;} .vn-community-item-title{font-weight: 900 !important; font-size: 13px !important; display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 6px !important;} .vn-community-item-sub{color: rgba(255,255,255,0.80) !important; font-size: 12px !important; line-height: 1.35 !important;} .vn-community-pill{display: inline-flex !important; align-items: center !important; padding: 4px 8px !important; margin-right: 8px !important; border-radius: 999px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.90) !important; font-weight: 800 !important; font-size: 11px !important;} .vn-community-news{display: grid !important; gap: 10px !important; margin-top: 4px !important;} .vn-announce{display: grid !important; gap: 10px !important; padding: 12px 12px 12px !important; border-radius: 18px !important; background: rgba(0,0,0,0.22) !important; border: 1px solid rgba(255,255,255,0.10) !important; text-decoration: none !important; color: rgba(255,255,255,0.95) !important; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;} .vn-announce:hover{transform: translateY(-1px) !important; background: rgba(0,0,0,0.28) !important; border-color: rgba(255,255,255,0.18) !important;} .vn-announce-head{display: grid !important; grid-template-columns: 36px 1fr !important; gap: 10px !important; align-items: center !important;} .vn-announce-avatar{width: 36px !important; height: 36px !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.06) !important; box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;} .vn-announce-avatar img{display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important;} .vn-announce-avatar--placeholder{background: linear-gradient(135deg, rgba(120,255,180,0.18), rgba(255,255,255,0.10), rgba(0,0,0,0.20)) !important;} .vn-announce-title{display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 8px !important;} .vn-announce-sender{font-weight: 950 !important; font-size: 13px !important; letter-spacing: -0.2px !important;} .vn-announce-sep{color: rgba(255,255,255,0.18) !important;} .vn-announce-date{font-weight: 900 !important; font-size: 11px !important; letter-spacing: 0.35px !important; text-transform: uppercase !important; color: rgba(120,255,180,0.86) !important;} .vn-announce-role{display: inline-flex !important; align-items: center !important; padding: 4px 8px !important; border-radius: 999px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.88) !important; font-weight: 900 !important; font-size: 11px !important;} .vn-announce-body{font-size: 12px !important; line-height: 1.45 !important; color: rgba(255,255,255,0.86) !important; white-space: normal !important;} .vn-announce-body{max-height: 220px !important; overflow: auto !important; padding-right: 2px !important;} /* Mobile: ensure all community section cards stay styled on all devices */ @media (max-width: 767px){ /* Community section grid */ .vn-community-grid{gap: 12px !important;} .vn-community-card{padding: 14px 12px !important; border-radius: 16px !important;} .vn-community-card-title{font-size: 14px !important; gap: 8px !important; margin-bottom: 6px !important;} .vn-community-card-sub{font-size: 12px !important; margin-bottom: 10px !important;} /* Discord links on mobile */ .vn-discord-links{gap: 10px !important; grid-template-columns: 1fr !important;} .vn-discord-link{padding: 14px !important; gap: 10px !important; min-height: 120px !important;} .vn-discord-logo{font-size: 16px !important;} .server-badge{font-size: 10px !important; padding: 3px 6px !important;} .server-title{font-size: 14px !important; letter-spacing: -0.2px !important;} .vn-discord-url{font-size: 10px !important; word-break: break-word !important;} .vn-discord-cta{font-size: 11px !important; padding: 6px 10px !important;} .vn-discord-foot{gap: 6px !important;} /* Announcements on mobile */ .vn-community-news{gap: 8px !important; margin-top: 2px !important;} .vn-announce{padding: 10px 10px !important; gap: 8px !important;} .vn-announce-head{grid-template-columns: 32px 1fr !important; gap: 8px !important;} .vn-announce-avatar{width: 32px !important; height: 32px !important; border-radius: 10px !important;} .vn-announce-sender{font-size: 12px !important;} .vn-announce-date{font-size: 10px !important;} .vn-announce-role{padding: 3px 6px !important; font-size: 10px !important;} .vn-announce-body{font-size: 11px !important; max-height: 180px !important;} /* Events list on mobile */ .vn-community-list{gap: 8px !important;} .vn-community-item{padding: 8px 10px !important; border-radius: 14px !important;} .vn-community-item-title{font-size: 12px !important; gap: 8px !important; margin-bottom: 4px !important;} .vn-community-item-sub{font-size: 11px !important; line-height: 1.3 !important;} .vn-community-pill{padding: 2px 6px !important; font-size: 10px !important;} /* Community buttons on mobile */ .vn-community-card-actions{gap: 8px !important;} .vn-community-btn{padding: 8px 12px !important; font-size: 12px !important; border-radius: 10px !important;} } @media (max-width: 520px){ .vn-community-grid{gap: 10px !important;} .vn-community-card{padding: 12px 10px !important; border-radius: 14px !important;} .vn-community-card-title{font-size: 13px !important;} .vn-community-card-sub{font-size: 11px !important;} .vn-discord-links{gap: 8px !important;} .vn-discord-link{padding: 12px !important; gap: 8px !important; min-height: 110px !important;} .server-badge{font-size: 9px !important; padding: 2px 5px !important;} .server-title{font-size: 13px !important;} .vn-discord-url{font-size: 9px !important;} .vn-discord-cta{font-size: 10px !important; padding: 5px 9px !important;} .vn-announce{padding: 8px 8px !important; gap: 6px !important;} .vn-announce-head{grid-template-columns: 28px 1fr !important; gap: 6px !important;} .vn-announce-avatar{width: 28px !important; height: 28px !important; border-radius: 8px !important;} .vn-announce-sender{font-size: 11px !important;} .vn-announce-date{font-size: 9px !important;} .vn-announce-role{padding: 2px 5px !important; font-size: 9px !important;} .vn-announce-body{font-size: 10px !important; max-height: 150px !important;} .vn-community-item{padding: 6px 8px !important; border-radius: 12px !important;} .vn-community-item-title{font-size: 11px !important; gap: 6px !important; margin-bottom: 3px !important;} .vn-community-item-sub{font-size: 10px !important;} .vn-community-pill{padding: 2px 5px !important; font-size: 9px !important; margin-right: 6px !important;} .vn-community-btn{padding: 6px 10px !important; font-size: 11px !important; border-radius: 9px !important;} } @media (min-width: 900px){ .vn-community-card--discord{grid-column: span 4 !important;} .vn-community-card--events{grid-column: span 4 !important;} .vn-community-card--news{grid-column: span 4 !important;} } .vn-hero-actions{display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 0 18px !important; justify-content: center !important;} .vn-hero-btn{display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; border-radius: 10px !important; background: rgba(20, 20, 20, 0.70) !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; color: #ffffff !important; font-weight: 800 !important; letter-spacing: 0.2px !important; text-decoration: none !important; backdrop-filter: blur(12px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;} .vn-hero-btn:hover, .vn-hero-btn:focus{transform: translateY(-2px) !important; text-decoration: none !important; background: rgba(34, 34, 34, 0.86) !important; border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.18) !important;} .vn-hero-btn-primary{background: linear-gradient(135deg, rgba(120,255,180,0.26) 0%, rgba(255,255,255,0.14) 45%, rgba(18,18,18,0.85) 100%) !important; border-color: rgba(120, 255, 180, 0.40) !important;} .vn-hero-chips{display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 4px !important; justify-content: center !important;} /* Seamless hero card variant */ .server-card--hero .ip-card-header{margin-bottom: 10px !important;} .vn-hero-chip{display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 9px 12px !important; border-radius: 999px !important; background: rgba(0, 0, 0, 0.38) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: rgba(245,245,245,0.86) !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.2px !important; backdrop-filter: blur(12px) !important;} .vn-hero-chip i{color: rgba(120,255,180,0.92) !important;} /* Servers grid */ .servers-grid{display: grid !important; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; gap: 2rem !important; align-items: stretch !important; justify-items: stretch !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important;} /* Per-server panel background (limited to each server section) */ .vn-server-panel{width: 100% !important; max-width: 100% !important; padding: 22px !important; border-radius: 22px !important; background: rgba(0, 0, 0, 0.22) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 28px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; position: relative !important; overflow: hidden !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;} .vn-server-panel:before{content:'' !important; position:absolute !important; inset:0 !important; background: linear-gradient(120deg, rgba(6, 12, 20, 0.78) 0%, rgba(8, 14, 22, 0.84) 55%, rgba(4, 8, 14, 0.92) 100%) !important; pointer-events:none !important; z-index: 1 !important;} .vn-server-panel:hover{transform: translateY(-2px) !important; border-color: rgba(255,255,255,0.18) !important; box-shadow: 0 34px 86px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.10) !important;} /* Panel-level backgrounds are disabled in favor of full hero backdrop swapping */ .vn-server-panel--with-bg:after{content:'' !important; position:absolute !important; inset:0 !important; background-image: var(--vn-server-panel-bg) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0 !important; transform: scale(1.02) !important; transition: none !important; z-index: 0 !important; pointer-events: none !important;} .vn-server-panel--with-bg:hover:after{opacity: 0 !important;} .vn-server-panel--with-bg:before{background: linear-gradient(120deg, rgba(6, 12, 20, 0.72) 0%, rgba(8, 14, 22, 0.76) 55%, rgba(4, 8, 14, 0.84) 100%) !important;} .vn-server-panel--with-bg:hover:before{background: linear-gradient(120deg, rgba(6, 12, 20, 0.48) 0%, rgba(8, 14, 22, 0.52) 55%, rgba(4, 8, 14, 0.60) 100%) !important;} .vn-server-panel > .server-card{position: relative !important; z-index: 2 !important;} .hero-pill{display: inline-flex !important; align-items: center !important; padding: 10px 16px !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0.4px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(16px) !important;} .hero-title{font-size: clamp(36px, 5vw, 64px) !important; line-height: 1.1 !important;} .hero-lead{font-size: 18px !important; color: rgba(235, 235, 235, 0.85) !important; max-width: 640px !important;} .hero-actions .btn{margin-right: 12px !important; margin-bottom: 8px !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;} .language-banner{display: inline-flex !important; align-items: center !important; padding: 12px 18px !important; background: rgba(0, 0, 0, 0.65) !important; border: 2px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: 1px !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4) !important;} /* Server card */ .server-card-link{display: block !important; text-decoration: none !important;} .server-card-link:hover, .server-card-link:focus{text-decoration: none !important;} /* Ensure single card centers and stays centered with many cards */ .server-card-link, .server-card{margin-left: auto !important; margin-right: auto !important;} .server-card{width: 100% !important; max-width: 560px !important; padding: 28px !important; background: linear-gradient(180deg, rgba(25, 25, 25, 0.62) 0%, rgba(18, 18, 18, 0.68) 55%, rgba(10, 10, 10, 0.78) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 16px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(22px) !important; position: relative !important; overflow: hidden !important; transition: transform 0.18s ease, box-shadow 0.18s ease !important;} .server-card:hover{transform: translateY(-3px) !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;} .server-card:before{content: '' !important; position: absolute !important; inset: -35% -55% auto auto !important; width: 320px !important; height: 320px !important; background: radial-gradient(circle, rgba(255, 255, 255, 0.10), transparent 62%) !important; pointer-events: none !important;} .ip-card-header{position: relative !important; z-index: 2 !important;} .hero-ip-row, .ip-bar, .server-actions, .vn-server-kicker, .vn-server-chips{position: relative !important; z-index: 2 !important;} .vn-server-meta{position: relative !important; z-index: 2 !important; margin-bottom: 10px !important;} .ip-logo{width: 58px !important; height: 58px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36) !important;} .ip-logo img{max-width: 54px !important; max-height: 54px !important; display: block !important;} .ip-label{font-size: 13px !important; letter-spacing: 1px !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 700 !important;} .ip-address{font-size: 26px !important; font-weight: 800 !important; color: rgb(140, 255, 200) !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;} .server-badge{font-size: 12px !important; font-weight: 900 !important; color: rgba(255, 255, 255, 0.68) !important; text-transform: uppercase !important; letter-spacing: 1.2px !important;} .server-title{font-size: 22px !important; font-weight: 900 !important; color: #ffffff !important; text-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;} .ip-bar{display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 16px !important; background: linear-gradient(90deg, rgba(10, 38, 22, 0.92) 0%, rgba(9, 30, 20, 0.92) 55%, rgba(10, 38, 22, 0.92) 100%) !important; border: 1px solid rgba(60, 255, 150, 0.28) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: 0 0 0 1px rgba(40, 180, 100, 0.14), 0 16px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.08) !important; position: relative !important; z-index: 2 !important; gap: 12px !important;} .ip-left{display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important;} .ip-right{display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important;} .ip-text{font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important; font-size: 18px !important; color: rgb(120, 255, 180) !important; letter-spacing: 0.2px !important;} .btn-copy{appearance: none !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.92) !important; font-weight: 900 !important; padding: 8px 16px !important; border-radius: 10px !important; cursor: pointer !important; box-shadow: 0 12px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;} .btn-copy:hover, .btn-copy:focus{transform: translateY(-1px) !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.26) !important; box-shadow: 0 16px 34px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.12) !important; outline: none !important;} .btn-copy:active{transform: translateY(0px) !important;} .ip-subtext{color: rgba(255, 255, 255, 0.75) !important; font-size: 13px !important; letter-spacing: 0.3px !important; position: relative !important; z-index: 2 !important;} .server-actions{display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin-top: 14px !important; position: relative !important; z-index: 2 !important;} .btn-store{display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 18px !important; border-radius: 10px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.92) !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 14px 34px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.14) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;} .btn-store:hover, .btn-store:focus{transform: translateY(-1px) !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.50), inset 0 0 0 1px rgba(255,255,255,0.12) !important; text-decoration: none !important;} .btn-store:active{transform: translateY(0px) !important;} /* Hero variant: make the logo fit the IP bar nicely */ .server-card--hero .hero-ip-row{display: flex !important; align-items: center !important; gap: 14px !important;} .server-card--hero .ip-bar{margin-top: 0 !important; flex: 1 1 auto !important;} .server-card--hero .hero-logo{width: 46px !important; height: 46px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36) !important; flex: 0 0 auto !important;} .server-card--hero .hero-logo img{max-width: 42px !important; max-height: 42px !important; display: block !important;} .server-card--hero .vn-server-kicker{margin-bottom: 12px !important;} .server-card--hero .vn-server-chips{justify-content: flex-start !important; margin: 0 0 14px !important;} .server-card--hero .vn-hero-chip{background: rgba(0, 0, 0, 0.36) !important;} @media (max-width: 520px){ .server-card--hero .hero-ip-row{flex-direction: column !important; align-items: stretch !important;} .server-card--hero .hero-logo{margin: 0 auto !important;} .server-card--hero .vn-server-chips{justify-content: center !important;} } .btn-connect{display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 18px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(180,180,180,0.12) 45%, rgba(10,10,10,0.55) 100%) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #ffffff !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;} .btn-connect:hover, .btn-connect:focus{transform: translateY(-1px) !important; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(210,210,210,0.14) 45%, rgba(18,18,18,0.65) 100%) !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.12) !important; text-decoration: none !important;} .btn-connect:active{transform: translateY(0px) !important;} @media (max-width: 767px){ .hero-frame{padding: 3rem 1.25rem 2.5rem !important;} .vn-hero-grid{grid-template-columns: 1fr !important; gap: 2rem !important; align-items: start !important;} .vn-hero-copy{max-width: 100% !important;} .vn-hero-actions{gap: 10px !important;} .vn-hero-btn{width: 100% !important;} .hero-actions .btn{width: 100% !important; margin-right: 0 !important;} .language-banner{width: 100% !important; justify-content: center !important; text-align: center !important;} .server-card{max-width: 100% !important;} } /* Leadership+ section (Home) - seamless glass cards */ .vn-leadership{position: relative !important; padding: 5.25rem 0 5.75rem !important; overflow: hidden !important;} .vn-leadership:before{content:'' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(6, 12, 20, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%) !important; z-index: 0 !important; pointer-events: none !important;} .vn-leadership:after{content:'' !important; position:absolute !important; inset:-40% -35% auto auto !important; width: 640px !important; height: 640px !important; background: radial-gradient(circle, rgba(120,255,180,0.10), transparent 62%) !important; z-index: 0 !important; pointer-events:none !important;} .vn-leadership-frame{position: relative !important; z-index: 1 !important; max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important;} .vn-leadership-header{text-align: center !important; margin-bottom: 2.05rem !important;} .vn-leadership-kicker{display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 14px 20px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(16px) !important; font-weight: 900 !important; letter-spacing: 1.0px !important; text-transform: uppercase !important; font-size: 18px !important; color: rgba(255,255,255,0.95) !important;} .vn-leadership-kicker-dot{width: 12px !important; height: 12px !important; border-radius: 50% !important; background: rgba(120, 255, 180, 0.95) !important; box-shadow: 0 0 0 4px rgba(120,255,180,0.18), 0 12px 26px rgba(120,255,180,0.18) !important;} .vn-leadership-title{display: none !important;} .vn-leadership-plus{color: rgba(120,255,180,0.95) !important;} .vn-leadership-sub{margin: 2px auto 0 !important; max-width: 64ch !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(235,235,235,0.82) !important;} .vn-leadership-grid{display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 18px !important; align-items: stretch !important;} .vn-leader{min-width: 0 !important;} .vn-leader-card{height: 100% !important; padding: 18px 18px 16px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(25, 25, 25, 0.58) 0%, rgba(12, 12, 12, 0.68) 55%, rgba(10, 10, 10, 0.74) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 22px 58px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(18px) saturate(1.08) !important; position: relative !important; overflow: hidden !important; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;} .vn-leader-card:before{content:'' !important; position:absolute !important; inset:-45% -55% auto auto !important; width: 300px !important; height: 300px !important; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 62%) !important; pointer-events:none !important;} .vn-leader-card:hover{transform: translateY(-3px) !important; border-color: rgba(255, 255, 255, 0.22) !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;} .vn-leader-top{display: flex !important; align-items: center !important; gap: 12px !important; position: relative !important; z-index: 1 !important;} .vn-leader-avatar{width: 66px !important; height: 66px !important; border-radius: 20px !important; object-fit: cover !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(120,255,180,0.28) !important; box-shadow: 0 16px 34px rgba(0,0,0,0.48), 0 0 0 1px rgba(120,255,180,0.10) inset !important; flex: 0 0 auto !important;} .vn-leader-avatar--fallback{display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 900 !important; letter-spacing: 0.6px !important; color: rgba(245,245,245,0.92) !important; background: radial-gradient(90px 90px at 30% 25%, rgba(255,255,255,0.12), rgba(0,0,0,0.55)) !important;} .vn-leader-meta{min-width: 0 !important;} .vn-leader-name{font-size: 17px !important; font-weight: 900 !important; color: #ffffff !important; letter-spacing: -0.25px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;} .vn-leader-role{margin-top: 3px !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.45px !important; color: rgba(120,255,180,0.92) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;} .vn-leader-link{margin-top: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 11px 14px !important; border-radius: 14px !important; background: rgba(20, 20, 20, 0.70) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: rgba(255, 255, 255, 0.92) !important; font-weight: 900 !important; letter-spacing: 0.2px !important; text-decoration: none !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(12px) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important; position: relative !important; z-index: 1 !important;} .vn-leader-link:hover, .vn-leader-link:focus{transform: translateY(-2px) !important; background: rgba(34, 34, 34, 0.86) !important; border-color: rgba(255, 255, 255, 0.26) !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.12) !important; text-decoration: none !important;} @media (max-width: 520px){ .vn-leadership{padding: 4.25rem 0 4.75rem !important;} .vn-leadership-frame{padding: 0 14px !important;} .vn-leadership-grid{grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;} } /* Main Body - Black/white blurred gradient theme (no global banner image) */ html{width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: #07090c !important;} html:before{content: '' !important; position: fixed !important; inset: -60px !important; background: linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(170,170,170,0.12) 35%, rgba(18,18,18,0.86) 78%, rgba(0,0,0,0.94) 100%), radial-gradient(900px 520px at 22% 22%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(900px 520px at 78% 35%, rgba(120,255,180,0.06), transparent 62%) !important; filter: blur(18px) !important; opacity: 0.95 !important; transform: scale(1.05) !important; pointer-events: none !important; z-index: 0 !important;} body{background: transparent !important; position: relative !important; margin: 0 !important; padding: 0 !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; color: rgb(240, 240, 240) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important; z-index: 1 !important;} .wrap{background: transparent !important; position: relative !important; margin: 0 !important; padding: 0 !important; flex: 1 0 auto !important; z-index: 1 !important;} body:before{content:none !important;} /* Container - Remove max-width restrictions to allow content to reach edges */ .container{max-width: 100% !important; width: 100% !important; padding-left: 15px !important; padding-right: 15px !important;} .navbar .container{padding-left: 2rem !important; padding-right: 2rem !important;} body > .container, .wrap > .container{padding-left: 0 !important; padding-right: 0 !important;} /* Typography - Modern and readable on dark bg */ h1, .header{color: rgb(255, 255, 255) !important; font-weight: 700 !important; letter-spacing: -0.5px !important;} h2{color: rgb(245, 245, 245) !important; font-weight: 600 !important;} h3{color: rgb(230, 230, 230) !important; font-weight: 600 !important;} h6{color: rgb(200, 200, 200) !important;} hr{border-color: rgba(255, 255, 255, 0.15) !important;} /* Links - Light accent with smooth transitions */ a{color: rgb(200, 220, 255) !important; text-decoration: none !important; transition: all 0.3s ease !important; font-weight: 500 !important;} a:hover, a:focus{color: rgb(255, 255, 255) !important; text-decoration: underline !important;} /* Alerts and Callouts */ .bs-callout{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(230, 230, 230) !important; border-left: 4px solid rgba(200, 220, 255, 0.6) !important; border-radius: 4px !important; backdrop-filter: blur(10px) !important;} .bs-callout-success{border-left-color: rgb(100, 220, 120) !important;} .bs-callout-danger{border-left-color: rgb(255, 100, 100) !important;} .bs-callout-info{border-left-color: rgba(200, 220, 255, 0.8) !important;} /* Pagination - Modern style */ .pagination li a{background-color: rgba(255, 255, 255, 0.1) !important; color: rgb(230, 230, 230) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; transition: all 0.3s ease !important;} .pagination li a:hover, .pagination li a:focus{background-color: rgba(255, 255, 255, 0.2) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.4) !important;} .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus{background-color: rgba(200, 220, 255, 0.3) !important; color: rgb(255, 255, 255) !important; border-color: rgba(200, 220, 255, 0.6) !important;} /* Service Boxes - Sleek card design */ .srv-box{background-color: rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; transition: all 0.3s ease !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important;} .srv-box:hover{background-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 15px 50px rgba(200, 220, 255, 0.2) !important; transform: translateY(-5px) !important; border-color: rgba(200, 220, 255, 0.4) !important;} .srv-box:hover .fa{color: rgb(200, 220, 255) !important;} .srv-label{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important;} /* Panels and Boxes */ .options, .dashboard-widget-small-box, .panel-body, .stat-box, #sortable li{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(240, 240, 240) !important; border-radius: 6px !important; transition: all 0.3s ease !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(10px) !important;} .panel-body > .panel-header, .stat-box-header{background-color: rgba(255, 255, 255, 0.1) !important; color: rgb(255, 255, 255) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; font-weight: 700 !important;} .dashboard-widget-small-box{border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;} .dashboard-widget-small-box .element{color: rgb(255, 255, 255) !important; font-weight: 700 !important;} .dashboard-widget-small-box i, #sortable li i{color: rgb(200, 220, 255) !important;} .dashboard-widget-small-box .caption{color: rgb(240, 240, 240) !important;} /* Form Controls - Modern input design */ .form-control{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(245, 245, 245) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 4px !important; transition: all 0.3s ease !important;} .form-control::placeholder{color: rgba(255, 255, 255, 0.5) !important;} .form-control:focus{border-color: rgba(200, 220, 255, 0.6) !important; background-color: rgba(255, 255, 255, 0.12) !important; color: rgb(255, 255, 255) !important; box-shadow: 0 0 0 3px rgba(200, 220, 255, 0.2) !important;} /* Selects - Ensure dropdown list is readable */ select.form-control, select{background-color: rgba(25, 25, 35, 0.9) !important; color: rgb(240, 240, 240) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 4px !important; backdrop-filter: blur(10px) !important;} select.form-control:focus, select:focus{background-color: rgba(25, 25, 35, 0.95) !important; color: rgb(255, 255, 255) !important;} select.form-control option, select option{background-color: rgba(25, 25, 35, 0.98) !important; color: rgb(240, 240, 240) !important;} select.form-control optgroup, select optgroup{color: rgb(230, 230, 230) !important; background-color: rgba(25, 25, 35, 0.98) !important;} /* If Bootstrap-select is used, ensure menu readability */ .bootstrap-select .dropdown-menu{background-color: rgba(25, 25, 35, 0.98) !important; color: rgb(240, 240, 240) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important;} .bootstrap-select .dropdown-menu > li > a{color: rgb(240, 240, 240) !important;} .bootstrap-select .dropdown-menu > li > a:hover{background: linear-gradient(90deg, rgba(200, 220, 255, 0.25) 0%, rgba(200, 220, 255, 0.15) 100%) !important; color: rgb(255, 255, 255) !important;} /* Checkboxes */ .icheckbox_line-red, .iradio_line-red{background: rgba(255, 255, 255, 0.08) !important; color: rgb(230, 230, 230) !important; border-color: rgba(255, 255, 255, 0.2) !important; border-radius: 3px !important;} .icheckbox_line-red.checked, .iradio_line-red.checked{border-color: rgba(200, 220, 255, 0.6) !important; background-color: rgba(200, 220, 255, 0.3) !important;} /* Buttons - Modern button style with ripple (Black/White blur) */ .btn-prom, input.btn-prom, button.btn-prom, a.btn-prom{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 8px !important; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; font-weight: 600 !important; position: relative !important; overflow: hidden !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(10px) !important; padding: 10px 24px !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;} .btn-prom:before, input.btn-prom:before, button.btn-prom:before, a.btn-prom:before{content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.4) !important; transform: translate(-50%, -50%) !important; transition: width 0.6s ease-out, height 0.6s ease-out !important; z-index: 0 !important; pointer-events: none !important;} .btn-prom:active:before, input.btn-prom:active:before, button.btn-prom:active:before, a.btn-prom:active:before{width: 400px !important; height: 400px !important;} .btn-prom:hover, .btn-prom:focus, input.btn-prom:hover, button.btn-prom:hover, a.btn-prom:hover{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; color: rgb(255, 255, 255) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.18) !important; transform: translateY(-4px) scale(1.02) !important; border-color: rgba(255, 255, 255, 0.35) !important;} .btn-prom span, .btn-prom i, input.btn-prom, button.btn-prom{position: relative !important; z-index: 2 !important;} /* Modern Button Styles - All Bootstrap Button Variants (Black/White default) */ .btn:not(.btn-link), input.btn:not(.btn-link), button.btn:not(.btn-link), a.btn:not(.btn-link){position: relative !important; overflow: hidden !important; border-radius: 8px !important; font-weight: 600 !important; padding: 10px 24px !important; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; backdrop-filter: blur(10px) !important; letter-spacing: 0.5px !important; text-transform: none !important; border-width: 2px !important; border-style: solid !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.25) !important;} .btn:not(.btn-link):before, input.btn:not(.btn-link):before, button.btn:not(.btn-link):before, a.btn:not(.btn-link):before{content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.4) !important; transform: translate(-50%, -50%) !important; transition: width 0.6s ease-out, height 0.6s ease-out !important; z-index: 0 !important; pointer-events: none !important;} .btn:not(.btn-link):active:before, input.btn:not(.btn-link):active:before, button.btn:not(.btn-link):active:before, a.btn:not(.btn-link):active:before{width: 400px !important; height: 400px !important;} .btn:not(.btn-link) span, .btn:not(.btn-link) i, .btn:not(.btn-link) .glyphicon, input.btn:not(.btn-link), button.btn:not(.btn-link){position: relative !important; z-index: 2 !important;} .btn:not(.btn-link):hover, .btn:not(.btn-link):focus, input.btn:not(.btn-link):hover, button.btn:not(.btn-link):hover, a.btn:not(.btn-link):hover{transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;} /* Primary Button - Black/White gradient */ .btn-primary, input.btn-primary, button.btn-primary, a.btn-primary{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;} .btn-primary:hover, .btn-primary:focus, input.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.18) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.35) !important;} .btn-primary:active, input.btn-primary:active, button.btn-primary:active, a.btn-primary:active{transform: translateY(-1px) scale(1.01) !important;} /* Success Button - Black/White gradient */ .btn-success, input.btn-success, button.btn-success, a.btn-success{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;} .btn-success:hover, .btn-success:focus, input.btn-success:hover, button.btn-success:hover, a.btn-success:hover{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.18) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.35) !important;} .btn-success:active, input.btn-success:active, button.btn-success:active, a.btn-success:active{transform: translateY(-1px) scale(1.01) !important;} /* Danger Button - Black/White gradient */ .btn-danger, input.btn-danger, button.btn-danger, a.btn-danger{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;} .btn-danger:hover, .btn-danger:focus, input.btn-danger:hover, button.btn-danger:hover, a.btn-danger:hover{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.18) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.35) !important;} .btn-danger:active, input.btn-danger:active, button.btn-danger:active, a.btn-danger:active{transform: translateY(-1px) scale(1.01) !important;} /* Warning Button - Black/White gradient */ .btn-warning{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;} .btn-warning:hover, .btn-warning:focus{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18) !important; color: rgb(255, 255, 255) !important;} .btn-warning:active{transform: translateY(-1px) scale(1.01) !important;} /* Info Button - Black/White gradient */ .btn-info{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;} .btn-info:hover, .btn-info:focus{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18) !important; color: rgb(255, 255, 255) !important;} .btn-info:active{transform: translateY(-1px) scale(1.01) !important;} /* Default Button - Black/White gradient */ .btn-default, input.btn-default, button.btn-default, a.btn-default{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;} .btn-default:hover, .btn-default:focus, input.btn-default:hover, button.btn-default:hover, a.btn-default:hover{background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 100%) !important; color: rgb(255, 255, 255) !important; box-shadow: 0 12px 35px rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important;} .btn-default:active, input.btn-default:active, button.btn-default:active, a.btn-default:active{transform: translateY(-1px) scale(1.01) !important;} /* Link Button - Minimal style with underline animation */ .btn-link{color: rgba(200, 220, 255, 0.9) !important; border: none !important; background: transparent !important; position: relative !important; padding: 8px 16px !important; box-shadow: none !important;} .btn-link:before{display: none !important;} .btn-link:hover, .btn-link:focus{color: rgb(255, 255, 255) !important; transform: translateY(0) !important; box-shadow: none !important; text-decoration: underline !important;} /* Shimmer Effect on Hover - using pseudo-element for non-link buttons */ .btn:not(.btn-link):after, input.btn:not(.btn-link):after, button.btn:not(.btn-link):after{content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important; transform: skewX(-20deg) !important; transition: left 0.7s ease !important; z-index: 1 !important; pointer-events: none !important;} .btn:not(.btn-link):hover:after, input.btn:not(.btn-link):hover:after, button.btn:not(.btn-link):hover:after{left: 150% !important;} /* Pulse animation for buttons */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(200, 220, 255, 0.3); } 50% { box-shadow: 0 8px 30px rgba(200, 220, 255, 0.5); } } .btn:not(.btn-link):hover, input.btn:not(.btn-link):hover, button.btn:not(.btn-link):hover{ animation: pulse-glow 2s ease-in-out infinite !important; } /* Button Sizes */ .btn-lg{padding: 14px 32px !important; font-size: 16px !important; border-radius: 8px !important;} .btn-sm{padding: 6px 16px !important; font-size: 12px !important; border-radius: 4px !important;} .btn-xs{padding: 4px 12px !important; font-size: 11px !important; border-radius: 3px !important;} /* Disabled State */ .btn:disabled, .btn.disabled{opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important;} .btn:disabled:hover, .btn.disabled:hover{transform: none !important; box-shadow: none !important;} /* Input buttons inherit button styles */ input[type="submit"].btn, input[type="button"].btn{-webkit-appearance: none !important; appearance: none !important;} /* Dropdowns - Match language selector with black/white blur gradient */ .dropdown-toggle, .bootstrap-select > .btn, .selectpicker.btn{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(255, 255, 255) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 10px !important; backdrop-filter: blur(15px) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; } .dropdown-menu, .bootstrap-select .dropdown-menu{ background: rgba(15, 15, 22, 0.98) !important; color: rgb(240, 240, 240) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(15px) !important; padding: 8px 0 !important; margin-top: 8px !important; animation: dropdown-appear 0.3s ease-out !important; } .dropdown-menu > li > a, .dropdown-item, .bootstrap-select .dropdown-menu > li > a{ color: rgb(235, 235, 235) !important; padding: 10px 20px !important; transition: all 0.3s ease !important; position: relative !important; display: block !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-item:hover, .dropdown-item:focus, .bootstrap-select .dropdown-menu > li > a:hover{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 50%, rgba(50, 50, 50, 0.9) 100%) !important; color: rgb(255, 255, 255) !important; padding-left: 24px !important; text-decoration: none !important; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-item.active, .bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li.active a{ background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(200, 200, 200, 0.28) 50%, rgba(60, 60, 60, 0.95) 100%) !important; color: rgb(255, 255, 255) !important; border-left: 3px solid rgba(255, 255, 255, 0.6) !important; } /* Dropdown search box (language selector style) */ .bootstrap-select .bs-searchbox .form-control{ background: rgba(0, 0, 0, 0.6) !important; color: rgb(240, 240, 240) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 8px !important; } .bootstrap-select .bs-searchbox .form-control::placeholder{color: rgba(255, 255, 255, 0.55) !important;} /* Dropdown animation */ @keyframes dropdown-appear { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Tables - Clean and modern */ .table-striped thead{background-color: rgba(255, 255, 255, 0.12) !important; color: rgb(255, 255, 255) !important; border-bottom: 2px solid rgba(200, 220, 255, 0.4) !important; font-weight: 600 !important;} .table-striped > tbody > tr:nth-of-type(odd){background-color: rgba(255, 255, 255, 0.05) !important; color: rgb(240, 240, 240) !important;} .table{color: rgb(240, 240, 240) !important; border-color: rgba(255, 255, 255, 0.15) !important;} .table th{color: rgb(255, 255, 255) !important; font-weight: 700 !important;} /* Main Menu */ .main-menu-box, .version-marker{background-color: rgba(255, 255, 255, 0.08) !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important;} .main-menu-box ul li{color: rgb(230, 230, 230) !important; transition: all 0.3s ease !important;} .main-menu-box ul li:hover{background-color: rgba(255, 255, 255, 0.12) !important;} .main-menu-box ul li.active{background-color: rgba(200, 220, 255, 0.3) !important; color: rgb(255, 255, 255) !important;} .version-marker{color: rgb(150, 150, 150) !important;} .main-menu-box .sub-menu{background-color: rgba(255, 255, 255, 0.05) !important;} .main-menu-box ul.sub-menu .submenu-header{color: rgb(200, 220, 255) !important;} /* Content Page Top */ .content-page-top{background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important;} .content-page-top > span{color: rgb(240, 240, 240) !important;} .content-page-top > span > i{color: rgb(200, 220, 255) !important;} .content-page-top:after{border-color: rgba(255, 255, 255, 0.1) transparent transparent !important;} /* Dashboard Navigation */ .dashboard-nav, .dashboard-nav a{background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important;} .dashboard-nav a{color: rgb(230, 230, 230) !important; transition: all 0.3s ease !important;} .dashboard-nav a:hover, .dashboard-nav a:focus{background-color: rgba(200, 220, 255, 0.2) !important; color: rgb(255, 255, 255) !important;} .dashboard-nav a.active{background-color: rgba(200, 220, 255, 0.3) !important; color: rgb(255, 255, 255) !important;} /* Package Steps */ .pkg-step{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(220, 220, 220) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;} /* Modals - Modern overlay */ .modal-content{background-color: rgba(30, 30, 40, 0.95) !important; color: rgb(230, 230, 230) !important; border-radius: 8px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important;} .modal-header{background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%) !important; color: rgb(240, 240, 240) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;} .modal-footer{background-color: rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important;} /* Credits and Footer */ .credits{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(230, 230, 230) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 4px !important; backdrop-filter: blur(10px) !important;} .footer{background: linear-gradient(180deg, rgba(20, 20, 20, 0.8) 0%, rgba(10, 10, 15, 0.8) 100%) !important; color: rgb(230, 230, 230) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px) !important;} .footer{margin-top: auto !important;} /* Legacy sticky-footer spacer: not needed with flex layout */ .push{display: none !important;} .version{color: rgb(200, 220, 255) !important; font-weight: 500 !important;} /* Store and Product */ .banner{background: linear-gradient(135deg, rgba(35, 35, 45, 0.8) 0%, rgba(25, 25, 35, 0.8) 100%) !important; backdrop-filter: blur(10px) !important;} .darker-box, .info-box{background-color: rgba(255, 255, 255, 0.08) !important; border-radius: 6px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(10px) !important;} .categoryLink{background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(180, 180, 180, 0.15) 50%, rgba(20, 20, 20, 0.85) 100%) !important; color: rgb(240, 240, 240) !important; border-radius: 4px !important; transition: all 0.3s ease !important; border: 1px solid rgba(255, 255, 255, 0.25) !important;} .categoryLink:hover{color: rgb(255, 255, 255) !important; box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18) !important; transform: translateY(-3px) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(200, 200, 200, 0.25) 100%) !important;} /* Buy Buttons - Call-to-action */ .buy-btn, button.buy-btn, input.buy-btn, a.buy-btn{background: linear-gradient(135deg, rgba(100, 200, 255, 0.6) 0%, rgba(80, 150, 255, 0.6) 100%) !important; color: rgb(255, 255, 255) !important; border: 2px solid rgba(100, 200, 255, 0.7) !important; border-radius: 8px !important; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; font-weight: 700 !important; position: relative !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(100, 200, 255, 0.4), 0 0 20px rgba(100, 200, 255, 0.2) !important; backdrop-filter: blur(10px) !important; padding: 12px 28px !important; font-size: 15px !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; letter-spacing: 0.5px !important;} .buy-btn:before, button.buy-btn:before, input.buy-btn:before, a.buy-btn:before{content: '' !important; position: absolute !important; top: 0 !important; left: -150% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent) !important; transform: skewX(-20deg) !important; transition: left 0.7s ease !important; z-index: 1 !important; pointer-events: none !important;} .buy-btn:hover:before, button.buy-btn:hover:before, input.buy-btn:hover:before, a.buy-btn:hover:before{left: 150% !important;} .buy-btn:hover, .buy-btn:focus, button.buy-btn:hover, input.buy-btn:hover, a.buy-btn:hover{background: linear-gradient(135deg, rgba(120, 220, 255, 0.8) 0%, rgba(100, 170, 255, 0.8) 100%) !important; color: rgb(255, 255, 255) !important; box-shadow: 0 15px 45px rgba(100, 200, 255, 0.6), 0 0 30px rgba(100, 200, 255, 0.4) !important; transform: translateY(-4px) scale(1.03) !important; border-color: rgba(120, 220, 255, 0.9) !important;} .buy-btn:active, button.buy-btn:active, input.buy-btn:active, a.buy-btn:active{transform: translateY(-2px) scale(1.01) !important;} /* Store Box */ .store-box, .store-box-upper span, .store-box-upper li{border-color: rgba(255, 255, 255, 0.15) !important; border-radius: 6px !important;} .store-box-upper span{color: rgb(200, 220, 255) !important; font-weight: 600 !important;} .store-box-header{background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%) !important; color: rgb(240, 240, 240) !important; backdrop-filter: blur(10px) !important;} /* Credit Content */ .credit-content{border-color: rgba(255, 255, 255, 0.15) !important; color: rgb(200, 220, 255) !important; background-color: rgba(255, 255, 255, 0.05) !important; border-radius: 4px !important; backdrop-filter: blur(10px) !important;} .credit-content span{color: rgb(150, 150, 150) !important;} /* Ticket System */ .ticket-header{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important; font-weight: 700 !important;} .ticket-box{background-color: rgba(255, 255, 255, 0.08) !important; color: rgb(240, 240, 240) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;} /* Labels and Badges */ .label, .badge{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important; font-weight: 600 !important; border: 1px solid rgba(255, 255, 255, 0.25) !important;} .label-primary, .badge-primary{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important;} .label-success, .badge-success{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important;} .label-danger, .badge-danger{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important;} .label-warning, .badge-warning{background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(200, 200, 200, 0.2) 50%, rgba(30, 30, 30, 0.9) 100%) !important; color: rgb(255, 255, 255) !important;} /* Stronger secondary text for better readability */ .text-muted{color: rgba(255, 255, 255, 0.7) !important;} .text-secondary{color: rgb(220, 220, 220) !important;} .help-block{color: rgba(255, 255, 255, 0.65) !important;} .form-text{color: rgba(255, 255, 255, 0.65) !important;} /* Global Transitions */ * {transition-property: background-color, color, border-color, box-shadow !important; transition-duration: 0.3s !important; transition-timing-function: ease !important;} /* Smooth scrolling */ html {scroll-behavior: smooth !important;} /* Discord Mention Pills */ .vn-mention-pill { display: inline-block; padding: 4px 10px; margin: 0 2px; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); color: white; text-decoration: none; border-radius: 20px; font-size: 0.9em; font-weight: 500; transition: all 0.2s ease; border: 1px solid #4752C4; cursor: pointer; vertical-align: middle; } .vn-mention-pill:hover { box-shadow: 0 0 12px rgba(88, 101, 242, 0.6); transform: translateY(-1px); } .vn-mention-pill:active { transform: translateY(0); } /* Announcement Channel Link in Header */ .vn-announce-channel { display: inline-block; padding: 4px 10px; margin-left: 8px; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); color: white; text-decoration: none; border-radius: 20px; font-size: 0.85em; font-weight: 500; transition: all 0.2s ease; border: 1px solid #4752C4; cursor: pointer; vertical-align: middle; } .vn-announce-channel:hover { box-shadow: 0 0 12px rgba(88, 101, 242, 0.6); transform: translateY(-1px); } .vn-announce-channel:active { transform: translateY(0); }