.zp-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(6, 8, 8, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(235, 241, 228, 0.08); transition: background 0.3s ease, border-color 0.3s ease; } .zp-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 80px !important; width: 1300px; } .zp-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--zp-bone); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; transition: opacity 0.2s ease; } .zp-nav__brand:hover { opacity: 0.9; } .zp-nav__mark { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .zp-nav__mark img { object-fit: contain; display: block; } .zp-nav__word { text-transform: uppercase; font-size: 0.95em; letter-spacing: 0.05em; } .zp-nav__word--accent { color: var(--zp-neon-lime); } .zp-nav__links { display: flex; align-items: center; gap: 0px !important; } .zp-nav__link { text-decoration: none; color: rgba(235, 233, 223, 0.7); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.2s ease; position: relative; padding: 8px 0; } .zp-nav__link:hover, .zp-nav__link.is-active { color: var(--zp-neon-lime); } .zp-nav__actions { display: flex; align-items: center; gap: 16px; } .zp-theme-switch { background: transparent; border: 1px solid rgba(235, 241, 228, 0.15); cursor: pointer; width: 42px; height: 24px; border-radius: 12px; position: relative; padding: 2px; display: flex; align-items: center; } .zp-theme-switch__knob { width: 18px; height: 18px; background: var(--zp-bone); border-radius: 50%; transition: transform 0.2s ease; } .zp-nav__hamburger{ display:none; padding:10px; margin:-10px; background:transparent; border:none; cursor:pointer; color:var(--zp-bone); position: relative; z-index: 20002; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .zp-nav__hamburgerBox{ display:block; width:24px; height:24px; position:relative; pointer-events: none; } .zp-nav__hamburgerInner{ display:block; top:50%; margin-top:-1px; width:24px; height:2px; background-color:currentColor; border-radius:2px; position:absolute; transition:transform .15s ease; } .zp-nav__hamburgerInner::before, .zp-nav__hamburgerInner::after{ content:""; display:block; width:24px; height:2px; background-color:currentColor; border-radius:2px; position:absolute; transition:transform .15s ease; } .zp-nav__hamburgerInner::before { top: -8px; } .zp-nav__hamburgerInner::after { bottom: -8px; } @media (max-width: 992px) { .zp-desktop-only { display: none; } .zp-nav__hamburger { display: block; } } :root { --header-h: 60px; } .zp-nav{ position:sticky; top:0; z-index:100; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:linear-gradient(180deg,rgba(6,8,8,.85),rgba(6,8,8,.65)); border-bottom:1px solid rgba(235,241,228,.08); } .zp-nav__inner{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); } .zp-nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; letter-spacing:-.02em; position:relative; z-index:102; white-space:nowrap; overflow:hidden; } .zp-nav__mark{ width:60px; height:60px; border-radius:10px; background:radial-gradient(circle at 30% 25%,rgba(240,255,107,.55),transparent 55%), radial-gradient(circle at 70% 72%,rgba(199,255,0,.45),transparent 60%), linear-gradient(135deg,rgba(199,255,0,.16),rgba(211,30,45,.12)); box-shadow:var(--shadow-neon); border:1px solid rgba(235,241,228,.10); flex-shrink:0; } .zp-nav__word{font-weight:780;font-size:1rem} .zp-nav__word--accent{color:var(--zp-accent)} .zp-nav__links{ position:relative; display:flex; align-items:center; gap:2px; padding:6px; border-radius:999px; background:rgba(16,21,20,.55); border:1px solid rgba(235,241,228,.08); box-shadow:0 18px 70px rgba(0,0,0,.35); contain:layout style; } .zp-nav__link{ position:relative; text-decoration:none; padding:8px 14px; border-radius:999px; color:rgba(235,233,223,.70); font-size:.85rem; letter-spacing:.04em; font-weight:600; text-transform:uppercase; transition:color .2s ease; white-space:nowrap; padding-left: 25px; } .zp-nav__link:hover{color:rgba(19, 18, 17, 0.96)} .zp-nav__link.is-active{color:rgba(8,10,8,.92)} .zp-nav:has(.zp-nav__link:hover):not(:has(.zp-nav__link.is-active:hover)) .zp-nav__link.is-active { color: #A4CD02; } .zp-nav__linkText{position:relative;z-index:2} .zp-nav__indicator{ position:absolute; inset:6px auto 6px 6px; width:0; border-radius:999px; background:var(--grad-accent); box-shadow:var(--shadow-neon); opacity:0; transition:all .4s cubic-bezier(.2,.9,.2,1); } .zp-nav__links:has(.is-active) .zp-nav__indicator{opacity:1} .zp-nav__actions{ display:flex; align-items:center; gap:16px; z-index:102; } .zp-theme-switch{ appearance:none; border:0; background:transparent; padding:0; margin:0; cursor:pointer; width:44px; height:24px; position:relative; display:flex; align-items:center; } .zp-theme-switch__track{ display:block; width:100%; height:100%; border-radius:999px; background:rgba(16,21,20,.55); border:1px solid rgba(235,241,228,.15); position:relative; transition:border-color .2s ease, box-shadow .2s ease; } .zp-theme-switch:hover .zp-theme-switch__track{ border-color:var(--zp-stroke-2); box-shadow:var(--shadow-neon); } .zp-theme-switch__knob{ display:block; width:18px; height:18px; border-radius:50%; background:var(--zp-gold-lime); position:absolute; top:2px; left:2px; transition:transform .3s cubic-bezier(.3,1.2,.3,1), background-color .3s ease; box-shadow:0 1px 3px rgba(0,0,0,.4); } .zp-theme-switch[aria-checked="true"] .zp-theme-switch__knob{ transform:translateX(20px); background:#a55cff; } .zp-theme-switch[aria-checked="true"] .zp-theme-switch__track{ border-color:rgba(165,92,255,.3); } .zp-nav__hamburger{ display:none; padding:10px; margin:-10px; background:transparent; border:none; cursor:pointer; color:var(--zp-bone); } .zp-nav__hamburgerBox{ display:block; width:24px; height:24px; position:relative; } .zp-nav__hamburgerInner{ display:block; top:50%; margin-top:-1px; width:24px; height:2px; background-color:currentColor; border-radius:2px; position:absolute; transition:transform .15s ease; } .zp-nav__hamburgerInner::before, .zp-nav__hamburgerInner::after{ content:""; display:block; width:24px; height:2px; background-color:currentColor; border-radius:2px; position:absolute; transition:transform .15s ease; } .zp-nav__hamburgerInner::before{top:-8px} .zp-nav__hamburgerInner::after{bottom:-8px} .zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner{transform:rotate(45deg)} .zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner::before{top:0;opacity:0} .zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner::after{bottom:0;transform:rotate(-90deg)} .zp-nav__mobile{ position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none; } .zp-nav__mobile[data-state]{ visibility:visible; pointer-events:auto; } .zp-nav__mobile[data-state="closing"]{ pointer-events:none; } .zp-nav__mobileBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:opacity 180ms ease-in; z-index:0; } .zp-nav__mobile[data-state="open"] .zp-nav__mobileBackdrop{opacity:1} .zp-nav__mobileInner{ position:absolute; top:0; right:0; bottom:0; width:min(340px, 88vw); background:rgba(10,10,10,0.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-left:1px solid rgba(255,255,255,0.07); transform:translateX(100%); transition:transform 180ms ease-in; display:flex; flex-direction:column; box-shadow:-18px 0 60px rgba(0,0,0,.62), -1px 0 0 rgba(255,255,255,0.04); height:100dvh; min-height:100vh; z-index:1; will-change:transform; } .zp-nav__mobile[data-state="open"] .zp-nav__mobileBackdrop{ transition-duration:220ms; transition-timing-function:ease-out; } .zp-nav__mobile[data-state="open"] .zp-nav__mobileInner{ transform:translateX(0); transition-duration:220ms; transition-timing-function:ease-out; } .zp-nav__mobileTop{ display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:56px; border-bottom:1px solid rgba(255,255,255,0.07); } .zp-nav__mobileLabel{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(235,233,223,.58); font-weight:820; } .zp-nav__close{ background:rgba(6,8,8,.20); border:1px solid rgba(255,255,255,0.08); color:var(--zp-bone); font-size:1.35rem; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; margin-right:-4px; transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .zp-nav__close:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,0.14); box-shadow:var(--shadow-neon); transform:translateY(-1px); } .zp-nav__close:active{transform:translateY(0)} .zp-nav__mobileLinks{ flex:1; padding:10px 0; overflow-y:auto; } .zp-nav__mobileLink{ position:relative; display:flex; align-items:center; min-height:48px; padding:0 20px; font-size:1rem; font-weight:760; letter-spacing:.10em; text-transform:uppercase; text-decoration:none; color:rgba(235,233,223,.76); transition:background-color .18s ease, color .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color:transparent; } .zp-nav__mobileLink:hover{ background:rgba(255,255,255,0.04); color:rgba(235,233,223,.95); } .zp-nav__mobileLink:focus-visible{ outline:none; background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(199,255,0,.12); } .zp-nav__mobileLink::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:transparent; } .zp-nav__mobileLink.is-active{ color:var(--zp-bone); background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent 55%); text-shadow:0 0 12px rgba(0,0,0,.35); } .zp-nav__mobileLink.is-active::before{ background:var(--zp-accent); box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 0 18px var(--zp-stroke-2); } .zp-nav__mobileBottom{ padding:12px 20px 14px; border-top:1px solid rgba(255,255,255,0.07); } .zp-nav__hamburger:focus-visible{outline:2px solid var(--zp-accent);outline-offset:4px;border-radius:4px} .zp-nav__close:focus-visible{outline:2px solid var(--zp-accent);outline-offset:2px} @media (min-width: 901px) { .zp-nav__mobile{display:none} .zp-nav { padding: 0 16px; } } @media (max-width: 900px) { :root{--header-h:60px} .zp-nav__inner { width: 100%; } .zp-nav { padding: 0 16px; } .zp-nav__word--accent { display: none; } .zp-desktop-only{display:none} .zp-nav__hamburger{display:block} } @media (max-width: 480px) { .zp-nav__word{display:none} .zp-nav__inner { width: 100%; } .zp-nav { padding: 0 16px; } .zp-nav__word--accent { display: none; } .zp-nav__brand::after{ content:"Zombie Panda"; font-weight:780; font-size:1rem; color:var(--zp-bone); } } @media (max-width: 350px) { .zp-nav__brand::after{ content:"ZP"; } .zp-nav { padding: 0 16px; } .zp-nav__word--accent { display: none; } .zp-nav__inner { width: 100%; } }