diff --git a/index.html b/index.html index 6cf75cb..83c46c9 100644 --- a/index.html +++ b/index.html @@ -75,18 +75,20 @@ body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999; opacity:.35} /* ─── NAV ─── */ -nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0.6rem 3rem;display:flex;justify-content:space-between;align-items:center; - backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); - background:rgba(14,13,12,.75);border-bottom:1px solid rgba(235,235,222,.05)} +nav{position:fixed;top:0;left:0;right:0;z-index:100;height:80px;padding:0 3rem;display:flex;justify-content:space-between;align-items:center; + backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); + background:rgba(14,13,12,.8);border-bottom:1px solid rgba(235,235,222,.06); + transition:height .4s,box-shadow .4s} +nav.scrolled{height:62px;box-shadow:0 2px 30px rgba(0,0,0,.5);border-bottom-color:rgba(245,124,0,.3)} .nav-logo{text-decoration:none;display:flex;align-items:center;gap:.75rem} .nav-logo img{height:32px;display:block;width:auto} -.nav-logo-name{font-family:var(--head);font-size:1.05rem;font-weight:900;letter-spacing:.15em;color:var(--ivory);text-transform:uppercase;border-left:1px solid rgba(235,235,222,.15);padding-left:.75rem} +.nav-logo-name{font-family:var(--head);font-size:1.2rem;font-weight:900;letter-spacing:.15em;color:var(--ivory);text-transform:uppercase;border-left:1px solid rgba(235,235,222,.15);padding-left:.75rem} .nav-logo-name em{font-style:normal;color:var(--amber)} nav ul{list-style:none;display:flex;gap:2rem;align-items:center} nav a{color:var(--text-dim);text-decoration:none;font-family:var(--head);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s} nav a:hover{color:var(--amber)} -.nav-cta{color:var(--amber)!important;border:1px solid var(--amber);padding:.45rem 1.2rem;transition:all .3s} -.nav-cta:hover{background:var(--amber);color:var(--bg)!important} +.nav-cta{background:var(--amber);color:#0e0d0c!important;border:1px solid var(--amber);padding:.55rem 1.4rem;font-weight:700;transition:background .2s,transform .2s} +.nav-cta:hover{background:#e06500;transform:translateY(-1px)} /* Hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:1px solid rgba(235,235,222,.25); @@ -886,6 +888,12 @@ const observer = new IntersectionObserver((entries) => { }, { threshold: 0.12 }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); +// Nav scroll shrink +const navEl = document.querySelector('nav'); +window.addEventListener('scroll', () => { + navEl.classList.toggle('scrolled', window.scrollY > 40); +}, { passive: true }); + // Mobile nav toggle const hamburger = document.getElementById('hamburger'); const mobileNav = document.getElementById('mobileNav');