/* ========================================================== MWZ SHARED NAV — matches live index.html exactly Include once via in the of any page that doesn't already have its own nav (i.e. everything but index.html). ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600&display=swap'); :root{ --sn-bg: #07080d; --sn-panel: #0d0f18; --sn-border: rgba(139,92,246,.12); --sn-border-hi: rgba(139,92,246,.35); --sn-text: #e8eaf2; --sn-purple2: #a78bfa; --sn-purple-glow: rgba(139,92,246,.3); --sn-green2: #4ade80; --sn-discord: #5865f2; } #site-nav{ position: sticky; top: 0; z-index: 100; font-family: 'Barlow', sans-serif; } #site-nav .sn-bar{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 48px; background: rgba(7,8,13,.75); backdrop-filter: blur(18px); border-bottom: 1px solid var(--sn-border); transition: padding .3s; } #site-nav.shrunk .sn-bar{ padding: 12px 48px; } .sn-brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sn-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; white-space: nowrap; } .sn-brand img{ width: 30px; height: 30px; border-radius: 8px; filter: drop-shadow(0 0 8px var(--sn-purple-glow)); } .sn-brand .sn-brand-highlight{ color: var(--sn-purple2); } .sn-right{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .sn-menu{ position: relative; } .sn-menu>button{ font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .88rem; letter-spacing: .04em; color: var(--sn-text); background: none; border: 1px solid var(--sn-border-hi); border-radius: 10px; padding: 9px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .sn-menu>button:hover, .sn-menu.open>button{ background: rgba(139,92,246,.1); color: var(--sn-purple2); } .sn-dropdown{ position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--sn-panel); border: 1px solid var(--sn-border-hi); border-radius: 12px; padding: 6px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 16px 32px rgba(0,0,0,.5); } .sn-menu.open .sn-dropdown{ display: flex; } .sn-dropdown a{ color: var(--sn-text); text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: .9rem; display: flex; align-items: center; gap: 8px; } .sn-dropdown a:hover{ background: rgba(139,92,246,.12); color: var(--sn-purple2); } .sn-dropdown a.active{ color: var(--sn-green2); font-weight: 700; } .sn-cta{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; background: var(--sn-discord); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 8px; text-decoration: none; transition: opacity .2s, box-shadow .2s; white-space: nowrap; } .sn-cta:hover{ opacity: .88; box-shadow: 0 0 20px rgba(88,101,242,.4); } @media (max-width: 640px){ #site-nav .sn-bar{ padding: 14px 20px; } #site-nav.shrunk .sn-bar{ padding: 10px 20px; } .sn-menu .sn-label{ display: none; } /* icon-only "▾" button on small screens */ }