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

Nav transparent until scroll; mobile hero loop rotated 90deg CW + fit

Browse Source 
- Nav: fully transparent over the hero (no bg/blur/border), frosts in once
  scrolled past 24px (.scrolled toggled in updateNavTheme; on-dark still wins
  over dark sections).
- Mobile hero loop: rotate 90deg CW and size (240px x 100vw, centered) so it
  fills the landscape strip after rotation; warm tint ::after still applies.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 20:15:36 -07:00
parent 89ce3cdcac
commit 09a0009053
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -283,6 +283,7 @@
return false; return false;
} }
function updateNavTheme() { function updateNavTheme() {
nav.classList.toggle('scrolled', window.scrollY > 24);
var nr = nav.getBoundingClientRect(); var nr = nav.getBoundingClientRect();
nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2)); nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
if (menu && menu.classList.contains('open')) { if (menu && menu.classList.contains('open')) {
style.css
+8 -5
View File
@@ -58,10 +58,11 @@ strong { font-weight: 500; color: var(--ink); }
.nav { .nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 0.85rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; 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); background: transparent; border-bottom: 1px solid transparent;
border-bottom: 1px solid rgba(15, 23, 41, 0.08); transition: background-color 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
transition: background-color 0.45s ease, border-color 0.45s ease;
} }
/* Transparent over the hero; frosts once you start scrolling */
.nav.scrolled { background: #f7f4ef80; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(15, 23, 41, 0.08); }
.nav-logo { flex-shrink: 0; display: flex; } .nav-logo { flex-shrink: 0; display: flex; }
.nav-logo-img { height: 34px; width: auto; display: block; transition: filter 0.45s ease; } .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 { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }
@@ -144,8 +145,10 @@ a.tel { text-decoration: none; }
.hero-video.is-playing { opacity: 1; } .hero-video.is-playing { opacity: 1; }
@media (max-width: 760px) { @media (max-width: 760px) {
.hero { min-height: 0; padding: 132px 0 64px; display: block; } .hero { min-height: 0; padding: 132px 0 64px; display: block; }
.hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 230px; margin-top: 1.6rem; .hero-media { position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: 240px; margin-top: 1.6rem; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }
/* Loop rotated 90deg CW, sized so it fills the landscape strip after rotation (tint ::after still applies) */
.hero-video { position: absolute; top: 50%; left: 50%; width: 240px; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
} }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }