From 09a0009053809375174b72df003e9a76d1079b44 Mon Sep 17 00:00:00 2001
From: Michael Victory <opcomm@gmail.com>
Date: Mon, 22 Jun 2026 20:15:36 -0700
Subject: [PATCH] Nav transparent until scroll; mobile hero loop rotated 90deg
 CW + fit

- 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>
---
 index.html |  1 +
 style.css  | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 72075e3..82c645d 100644
--- a/index.html
+++ b/index.html
@@ -283,6 +283,7 @@
     return false;
   }
   function updateNavTheme() {
+    nav.classList.toggle('scrolled', window.scrollY > 24);
     var nr = nav.getBoundingClientRect();
     nav.classList.toggle('on-dark', darkBehind((nr.top + nr.bottom) / 2));
     if (menu && menu.classList.contains('open')) {
diff --git a/style.css b/style.css
index 194cb79..8449bbe 100644
--- a/style.css
+++ b/style.css
@@ -58,10 +58,11 @@ strong { font-weight: 500; color: var(--ink); }
 .nav {
   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;
-  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;
+  background: transparent; border-bottom: 1px solid transparent;
+  transition: background-color 0.45s ease, border-color 0.45s ease, backdrop-filter 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-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); }
@@ -144,8 +145,10 @@ a.tel { text-decoration: none; }
 .hero-video.is-playing { opacity: 1; }
 @media (max-width: 760px) {
   .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;
-    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
+  .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 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; }