From fcfbfd8817865b1c5c828d9f1ccfb27458c48fa0 Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Wed, 17 Jun 2026 10:52:13 -0700 Subject: [PATCH] OC nav flip: independent per-area detection (bar + menu read their own bg, re-check on open) + fade transitions Co-Authored-By: Claude Opus 4.8 --- index.html | 21 ++++++++++++++------- style.css | 10 ++++++---- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index f90ce20..d3bbc51 100644 --- a/index.html +++ b/index.html @@ -249,19 +249,26 @@ toggle.classList.toggle('open', open); toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu'); toggle.setAttribute('aria-expanded', open ? 'true' : 'false'); + updateNavTheme(); }); for (var a of menu.querySelectorAll('a')) { a.addEventListener('click', closeMenu); } } var nav = document.getElementById('nav'); var sections = Array.prototype.slice.call(document.querySelectorAll('[data-bg]')); - function updateNavTheme() { - var dark = false; - for (var s of sections) { - var r = s.getBoundingClientRect(); - if (r.top <= 30 && r.bottom > 30) { dark = (s.dataset.bg === 'dark'); break; } + function darkBehind(y) { + for (var i = 0; i < sections.length; i++) { + var r = sections[i].getBoundingClientRect(); + if (r.top <= y && r.bottom > y) return sections[i].dataset.bg === 'dark'; + } + return false; + } + function updateNavTheme() { + var nr = nav.getBoundingClientRect(); + nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2)); + if (menu && menu.classList.contains('open')) { + var mr = menu.getBoundingClientRect(); + menu.classList.toggle('on-dark', darkBehind((mr.top + mr.bottom) / 2)); } - nav.classList.toggle('on-dark', dark); - if (menu) menu.classList.toggle('on-dark', dark); } updateNavTheme(); window.addEventListener('scroll', function () { window.requestAnimationFrame(updateNavTheme); }, { passive: true }); diff --git a/style.css b/style.css index 46eea09..1928008 100644 --- a/style.css +++ b/style.css @@ -60,9 +60,10 @@ strong { font-weight: 500; color: var(--ink); } padding: 0.85rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15, 23, 41, 0.08); + transition: background-color 0.45s ease, border-color 0.45s ease; } .nav-logo { flex-shrink: 0; display: flex; } -.nav-logo-img { height: 34px; width: auto; display: block; } +.nav-logo-img { height: 34px; width: auto; display: block; transition: filter 0.45s ease; } .nav-links-desktop { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); } .nav-links-desktop a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; white-space: nowrap; transition: color 0.3s; } .nav-links-desktop a:hover { color: #0f1729; } @@ -76,8 +77,8 @@ a.tel { text-decoration: none; } .nav-toggle { display: none; cursor: pointer; padding: 4px; background: none; border: none; align-items: center; justify-content: center; } .nav-toggle-icon { width: 32px; height: 32px; overflow: visible; } -.nav-toggle-icon .bar { stroke: #0f1729; stroke-width: 1.8; stroke-linecap: round; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1); } -.nav-toggle-icon .o-ring { fill: none; stroke: #0f1729; stroke-width: 1.8; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: 0; transform-origin: 16px 16px; transition: stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.1s, opacity 0.2s ease 0.1s; } +.nav-toggle-icon .bar { stroke: #0f1729; stroke-width: 1.8; stroke-linecap: round; transition: stroke 0.45s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(.4,0,.2,1); } +.nav-toggle-icon .o-ring { fill: none; stroke: #0f1729; stroke-width: 1.8; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: 0; transform-origin: 16px 16px; transition: stroke 0.45s ease, stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.1s, opacity 0.2s ease 0.1s; } .nav-toggle.open .bar-top { opacity: 0; transform: translateY(-4px); } .nav-toggle.open .bar-mid { opacity: 0; transform: scaleX(0); } .nav-toggle.open .bar-bot { opacity: 0; transform: translateY(4px); } @@ -88,9 +89,10 @@ a.tel { text-decoration: none; } flex-direction: column; gap: 1.25rem; padding: 1.75rem 1.5rem 2rem; background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15, 23, 41, 0.08); align-items: flex-end; text-align: right; + transition: background-color 0.45s ease, border-color 0.45s ease; } .nav-mobile-menu.open { display: flex; animation: navFadeIn 0.22s ease forwards; } -.nav-mobile-menu a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; } +.nav-mobile-menu a { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: #374151; text-decoration: none; transition: color 0.45s ease; } .nav-mobile-menu a:hover { color: #0f1729; } .nav-mobile-menu .nav-cta { color: #fff !important; } @keyframes navFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }