/* ========================================= HEADER ========================================= */ .new-header{ position:fixed; top:24px; left:0; width:100%; box-sizing:border-box; z-index:9999; padding:0 30px; } .header-container{ isolation:isolate; position:relative; max-width:1320px; margin:auto; height:78px; display:grid; grid-template-columns:1fr 260px 1fr; align-items:center; padding:0 55px; border-radius:30px; background: linear-gradient( 180deg, rgba(40,55,85,0.16), rgba(15,20,35,0.08) ); backdrop-filter: blur(55px) saturate(180%); -webkit-backdrop-filter: blur(55px) saturate(180%); border:1px solid rgba(255,255,255,0.16); outline:1px solid rgba(255,255,255,0.04); overflow:hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 8px 25px rgba(0,140,255,0.05), inset 0 1px 0 rgba(255,255,255,0.06); } .header-container::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:38%; height:1px; background: linear-gradient( 90deg, transparent, rgba(120,190,255,0.45), transparent ); z-index:2; } /* ========================================= NAVS ========================================= */ .nav-left, .nav-right{ display:flex; align-items:center; gap:70px; } .nav-left{ justify-content:flex-start; } .nav-right{ justify-content:flex-end; } .nav-left a, .nav-right a{ position:relative; color:rgba(35,45,65,0.88); font-family:'Space Grotesk',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:1.6px; font-weight:700; transition:0.35s; will-change:transform; text-decoration:none; } .nav-left a:hover, .nav-right a:hover{ color:rgba(15,25,45,1); transform: translateY(-2px) scale(1.03); text-shadow: 0 0 18px rgba(0,140,255,0.22); } .nav-left a::before, .nav-right a::before{ content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); width:0%; height:3px; opacity:0.95; border-radius:20px; background: linear-gradient( 90deg, #009dff, #66d1ff ); transition:0.35s; } .nav-left a:hover::before, .nav-right a:hover::before{ width:100%; box-shadow: 0 0 8px rgba(0,157,255,0.6); } /* ========================================= LOGO ========================================= */ .logo{ position:relative; justify-self:center; width:150px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:22px; background: linear-gradient( 180deg, rgba(255,255,255,0.28), rgba(220,230,255,0.04) ); border:1px solid rgba(255,255,255,0.22); outline:1px solid rgba(0,140,255,0.10); backdrop-filter: blur(28px) saturate(180%); overflow:hidden; z-index:10; transform-style:preserve-3d; transition: transform 0.4s, box-shadow 0.4s; box-shadow: 0 12px 35px rgba(0,0,0,0.28), 0 0 14px rgba(0,140,255,0.05), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -8px 18px rgba(255,255,255,0.10); } .logo::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size:18px 18px; animation:gridMove 10s linear infinite; } .logo:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.32), 0 0 28px rgba(0,140,255,0.16), inset 0 1px 0 rgba(255,255,255,0.50); } @keyframes gridMove{ from{ transform:translateY(0px); } to{ transform:translateY(18px); } } .logo img{ position:relative; z-index:2; height:38px; filter: drop-shadow(0 0 10px rgba(0,140,255,0.18)) drop-shadow(0 0 18px rgba(0,140,255,0.08)); } .logo::after{ content:""; position:absolute; inset:0; background: radial-gradient( circle at top center, rgba(255,255,255,0.50), transparent 72% ); pointer-events:none; opacity:0.7; } /* ========================================= MOBILE ========================================= */ .mobile-toggle{ display:none; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:16px; background: linear-gradient( 180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) ); backdrop-filter:blur(20px); cursor:pointer; z-index:100000; } .mobile-toggle span{ position:absolute; left:50%; width:24px; height:2px; background:white; border-radius:20px; transform: translateX(-50%); transition: 0.35s; } .mobile-toggle span:nth-child(1){ top:18px; } .mobile-toggle span:nth-child(2){ top:25px; } .mobile-toggle span:nth-child(3){ top:32px; } /* ========================================= HAMBURGER ACTIVE ========================================= */ .mobile-toggle.active span:nth-child(1){ top:25px; transform: translateX(-50%) rotate(45deg); } .mobile-toggle.active span:nth-child(2){ opacity:0; } .mobile-toggle.active span:nth-child(3){ top:25px; transform: translateX(-50%) rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; background:rgba(5,8,22,0.96); backdrop-filter:blur(25px); z-index:99999; opacity:0; visibility:hidden; transition:0.4s; } .mobile-menu.active{ opacity:1; visibility:visible; } .mobile-menu-content{ height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:35px; } .mobile-menu-content a{ font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,8vw,4rem); color:white; text-decoration:none; } /* ========================================= RESPONSIVE ========================================= */ @media(max-width:980px){ .new-header{ padding:0 16px; } .header-container{ isolation:isolate; width:100%; max-width:100%; height:72px; grid-template-columns:1fr; padding:0 18px; box-sizing:border-box; } .nav-left, .nav-right{ display:none; } .mobile-toggle{ display:block; } .logo{ justify-self:start; width:138px; height:50px; } .logo img{ height:34px; } } #dynamicHeader.header-dark .nav-left a, #dynamicHeader.header-dark .nav-right a{ color:white !important; opacity:1 !important; text-shadow: 0 0 20px rgba(0,140,255,0.45), 0 0 40px rgba(0,140,255,0.15) !important; }