mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OC nav flip: independent per-area detection (bar + menu read their own bg, re-check on open) + fade transitions

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-17 10:52:13 -07:00
parent 3267a6e8cc
commit fcfbfd8817
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+14 -7
View File
@@ -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 });
style.css
+6 -4
View File
@@ -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); } }