/* ========================================================================== NAV — fixed site header, brand, desktop links, mobile menu Depends on: tokens.css, components.css (for .btn) The nav markup is byte-identical on every page. The active link is picked automatically from `` — see section 4 — so there is nothing to hand-edit when you add a page beyond one selector pair. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Header shell -------------------------------------------------------------------------- */ .site-nav { position: fixed; top: 0; right: 0; left: 0; z-index: 70; border-bottom: 1px solid transparent; transition: background var(--dur-base), border-color var(--dur-base), backdrop-filter var(--dur-base); } /* Toggled by js/site.js once the page is scrolled */ .site-nav.is-scrolled { background: var(--c-nav-bg); border-color: var(--c-line); backdrop-filter: blur(14px); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--nav-height); } /* -------------------------------------------------------------------------- 2. Brand -------------------------------------------------------------------------- */ .brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.12rem; line-height: 1; } /* The coin itself. Square art, cropped to a circle so it reads as a token. */ .brand__logo { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(245, 206, 77, .55), 0 0 16px rgba(245, 206, 77, .35); transition: transform var(--dur-base) var(--ease-out); } .brand:hover .brand__logo { transform: rotate(-12deg) scale(1.06); } .brand__primary { color: var(--c-gold); text-shadow: 0 0 14px rgba(245, 206, 77, .5); } .brand__outline { color: transparent; -webkit-text-stroke: 1.4px var(--c-pink); } /* -------------------------------------------------------------------------- 3. Links & actions -------------------------------------------------------------------------- */ .site-nav__links { display: flex; gap: var(--space-6); } .nav-link { position: relative; font-size: var(--text-base); font-weight: 600; color: var(--c-muted); transition: color var(--dur-fast); } /* Same gold as the active page, plus the glow so the two still read apart */ .nav-link:hover { color: var(--c-gold); text-shadow: 0 0 16px rgba(245, 206, 77, .65), 0 0 4px rgba(245, 206, 77, .5); } .site-nav__actions { display: flex; align-items: center; gap: var(--space-3); } .drunk-toggle { padding: 11px var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface-hi); color: var(--c-muted); font-family: var(--font-ui); font-weight: 700; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: .25s; } .drunk-toggle:hover { border-color: var(--c-gold); color: var(--c-ink); } .drunk-toggle.is-on { background: rgba(255, 79, 224, .16); border-color: var(--c-pink); color: var(--c-pink); box-shadow: 0 0 18px rgba(255, 79, 224, .3); } .menu-btn { display: none; /* shown at the mobile breakpoint */ place-items: center; width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-ink); font-size: 1.25rem; cursor: pointer; } /* -------------------------------------------------------------------------- 4. Active page One pair per page. Add a page → add its pair here, nothing else changes. -------------------------------------------------------------------------- */ body[data-page="home"] [data-nav="home"], body[data-page="story"] [data-nav="story"], body[data-page="tokenomics"] [data-nav="tokenomics"], body[data-page="gallery"] [data-nav="gallery"], body[data-page="buy"] [data-nav="buy"], body[data-page="party"] [data-nav="party"] { color: var(--c-gold); } /* Hand-drawn underline, desktop nav only */ body[data-page="home"] .site-nav__links [data-nav="home"]::after, body[data-page="story"] .site-nav__links [data-nav="story"]::after, body[data-page="tokenomics"] .site-nav__links [data-nav="tokenomics"]::after, body[data-page="gallery"] .site-nav__links [data-nav="gallery"]::after, body[data-page="buy"] .site-nav__links [data-nav="buy"]::after, body[data-page="party"] .site-nav__links [data-nav="party"]::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 3px; border-radius: 3px; background: var(--c-gold); transform: rotate(-1.5deg); } /* -------------------------------------------------------------------------- 5. Mobile menu overlay -------------------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); background: var(--c-overlay); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity var(--dur-base); } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-ink); transition: color var(--dur-fast); } .mobile-menu a:hover { color: var(--c-gold); } .mobile-menu__close { position: absolute; top: var(--space-6); right: var(--space-6); width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); color: var(--c-ink); font-size: 1.5rem; cursor: pointer; } /* -------------------------------------------------------------------------- 6. Responsive -------------------------------------------------------------------------- */ /* Five links + the actions cluster get tight before the mobile breakpoint */ @media (max-width: 1060px) { .site-nav__links { gap: var(--space-4); } .site-nav .drunk-toggle { display: none; } } @media (max-width: 880px) { .site-nav__links { display: none; } .menu-btn { display: grid; } } @media (max-width: 600px) { .site-nav .btn { display: none; } }