/* * Niyutam Navbar — nav.css * * Fonts: Clash Display (logo) + Satoshi (links) via Fontshare. * Tip: for best performance move this @import to a in . */ @import url('https://api.fontshare.com/v2/css?f[]=clash-display@600&f[]=satoshi@400,500&display=swap'); /* ─── Design tokens ───────────────────────────────────────────── */ :root { --nav-clr-surface: #0a0a0f; --nav-clr-bg-scroll: rgba(10, 10, 15, 0.9); --nav-clr-accent: #C8FF00; --nav-clr-accent-hover: #aee600; --nav-clr-text: #ffffff; --nav-height: 72px; --nav-blur: 16px; --nav-radius-cta: 6px; --nav-duration: 0.3s; --nav-ease: ease; --nav-font-logo: 'Clash Display', system-ui, sans-serif; --nav-font-links: 'Satoshi', system-ui, sans-serif; } /* ─── Scoped reset ────────────────────────────────────────────── */ .navbar *, .navbar *::before, .navbar *::after, .mobile-menu *, .mobile-menu *::before, .mobile-menu *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Navbar shell ────────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: transparent; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background var(--nav-duration) var(--nav-ease), backdrop-filter var(--nav-duration) var(--nav-ease), -webkit-backdrop-filter var(--nav-duration) var(--nav-ease); } .navbar.is-scrolled { background: var(--nav-clr-bg-scroll); backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur)); } /* ─── Inner container ─────────────────────────────────────────── */ .navbar__container { max-width: 1440px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 3rem); height: var(--nav-height); display: flex; align-items: center; justify-content: flex-start; gap: clamp(1rem, 2.5vw, 2rem); } html { scroll-behavior: smooth; } /* ─── Logo ────────────────────────────────────────────────────── */ .navbar__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .brand-logo { height: 48px; background: #ffffff; border-radius: 8px; padding: 8px 16px; display: block; object-fit: contain; } /* ─── Desktop nav links ───────────────────────────────────────── */ .navbar__nav { margin-left: auto; } .navbar__links { list-style: none; display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); } .navbar__link { font-family: var(--nav-font-links); font-weight: 500; font-size: 0.9375rem; color: var(--nav-clr-text); text-decoration: none; opacity: 0.75; position: relative; padding-bottom: 8px; /* room for the accent dot */ min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; transition: opacity var(--nav-duration) var(--nav-ease); } /* Active / hover accent dot */ .navbar__link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--nav-clr-accent); opacity: 0; transition: opacity var(--nav-duration) var(--nav-ease); } .navbar__link:hover { opacity: 1; } .navbar__link.active { opacity: 1; } .navbar__link.active::after { opacity: 1; } /* ─── CTA button ──────────────────────────────────────────────── */ .navbar__cta { font-family: var(--nav-font-links); font-weight: 500; font-size: 0.9375rem; color: #000000; background: var(--nav-clr-accent); text-decoration: none; padding-inline: 1.375rem; height: 44px; border-radius: var(--nav-radius-cta); display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; transition: background var(--nav-duration) var(--nav-ease); } .navbar__cta:hover { background: var(--nav-clr-accent-hover); } /* ─── Hamburger button ────────────────────────────────────────── */ .navbar__hamburger { display: none; /* shown only on mobile via media query */ width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; margin-left: auto; } .navbar__bar { display: block; width: 24px; height: 2px; background: var(--nav-clr-text); border-radius: 2px; transform-origin: center; transition: transform 0.32s ease, opacity 0.32s ease; } /* * Bar math: button 44px tall, 3×2px bars, gap 5px. * Group height = 16px, centred → bars at y=15,22,29px. * Bars 1 & 3 must travel 7px to meet bar 2 (centre). */ .navbar.is-open .navbar__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar.is-open .navbar__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar.is-open .navbar__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── Mobile fullscreen overlay ───────────────────────────────── */ .mobile-menu { position: fixed; inset: 0; z-index: 1000; background: var(--nav-clr-surface); display: flex; flex-direction: column; justify-content: center; align-items: center; /* hidden state */ transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.45s ease; } .mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; } /* Stacked links */ .mobile-menu__links { list-style: none; display: flex; flex-direction: column; align-items: center; width: 100%; } .mobile-menu__link { font-family: var(--nav-font-links); font-weight: 500; font-size: clamp(1.75rem, 7vw, 2.75rem); color: var(--nav-clr-text); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; min-height: 72px; width: 100%; text-align: center; opacity: 0.55; transition: opacity var(--nav-duration) var(--nav-ease), color var(--nav-duration) var(--nav-ease); } .mobile-menu__link:hover, .mobile-menu__link.active { opacity: 1; color: var(--nav-clr-accent); } /* Mobile CTA */ .mobile-menu__cta { font-family: var(--nav-font-links); font-weight: 500; font-size: 1rem; color: #000000; background: var(--nav-clr-accent); text-decoration: none; padding-inline: 2rem; height: 52px; border-radius: var(--nav-radius-cta); display: inline-flex; align-items: center; margin-top: 2.5rem; transition: background var(--nav-duration) var(--nav-ease); } .mobile-menu__cta:hover { background: var(--nav-clr-accent-hover); } /* ─── Responsive breakpoints ──────────────────────────────────── */ @media (max-width: 767px) { .navbar__nav, .navbar__cta { display: none; } .navbar__hamburger { display: flex; } } @media (min-width: 768px) { /* Hide overlay on desktop — only used by mobile hamburger */ .mobile-menu { display: none; } }