/* ============================================================ VNESYS NAVBAR — standalone stylesheet Self-contained: doesn't require css/base.css to look right. Link this in the page , e.g.: ============================================================ */ :root{ --vn-bg-deep:#000000; --vn-border:rgba(212,175,55,0.18); --vn-gold:#D4AF37; --vn-gold-bright:#F1C64C; --vn-gold-dim:#8A6E23; --vn-text:#F4F1E8; --vn-font-body:'Inter', sans-serif; } /* ---- Navbar shell ---- */ .top-navbar{ position:fixed; top:0; left:0; width:100%; z-index:200; background:rgba(0,0,0,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--vn-border); font-family:var(--vn-font-body); } .navbar-container{ display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0.8em 1.5em; } /* ---- Logo ---- */ .navbar-logo{ display:flex; align-items:center; flex-shrink:0; } .navbar-logo img{ height:36px; width:auto; display:block; } /* ---- Links ---- */ .navbar-links{ display:flex; align-items:center; gap:1.6em; list-style:none; margin:0; padding:0; } .navbar-links li{ display:inline-flex; } .navbar-links a{ color:var(--vn-text); text-decoration:none; font-size:0.95em; font-weight:500; letter-spacing:.01em; transition:color .2s ease; white-space:nowrap; } .navbar-links a:hover{ color:var(--vn-gold); } .navbar-links .nav-cta{ color:#000; background:linear-gradient(135deg, var(--vn-gold-bright), var(--vn-gold-dim)); padding:.5em 1.1em; border-radius:999px; font-weight:600; } .navbar-links .nav-cta:hover{ filter:brightness(1.08); color:#000; } /* ---- Hamburger toggle (hidden on desktop) ---- */ .navbar-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; } .navbar-toggle span{ display:block; height:2px; width:100%; background:var(--vn-gold); border-radius:2px; transition:transform .25s ease, opacity .25s ease; } .navbar-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .navbar-toggle.open span:nth-child(2){ opacity:0; } .navbar-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---- Mobile menu panel ---- */ .mobile-menu{ position:fixed; top:0; left:0; width:100%; height:0; overflow:hidden; background:rgba(0,0,0,0.96); border-top:1px solid var(--vn-border); z-index:199; transition:height .3s ease; } .mobile-menu.open{ height:100vh; padding-top:70px; /* clears the fixed navbar height */ } .mobile-menu ul{ list-style:none; margin:0; padding:1.5em; display:flex; flex-direction:column; gap:0.3em; } .mobile-menu a{ display:block; color:var(--vn-text); text-decoration:none; font-size:1.1em; font-weight:500; padding:0.8em 0.5em; border-bottom:1px solid var(--vn-border); } .mobile-menu .nav-cta{ color:var(--vn-gold); border-bottom:none; } /* ---- Responsive breakpoint ---- */ @media (max-width: 860px){ .navbar-links{ display:none; } .navbar-toggle{ display:flex; } }