blah blah

www/index.html

@@ -11,25 +11,6 @@
   <img src="banner.png" alt="banner" />
 </div>
 
-<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
-  <defs>
-    <filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
-      <feImage id="nav-disp-img" result="disp_map" />
-      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
-      <feImage id="nav-spec-img" result="spec_map" />
-      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
-      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
-    </filter>
-    <filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
-      <feImage id="displacement-map-img" result="disp_map" />
-      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
-      <feImage id="specular-map-img" result="spec_map" />
-      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
-      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
-    </filter>
-  </defs>
-</svg>
-
 <div class="nav-wrap">
   <div class="nav-pill" id="nav-pill">
     <div class="nav-pill-bar" id="nav-pill-bar">
@@ -48,13 +29,47 @@
   </div>
 </div>
 
+<div class="nav-placeholder" id="nav-placeholder"></div>
+
+<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
+<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
+  <defs>
+    <filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <feImage id="nav-disp-img" result="disp_map" />
+      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
+      <feImage id="nav-spec-img" result="spec_map" />
+      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+    </filter>
+    <filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <feImage id="displacement-map-img" result="disp_map" />
+      <feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
+      <feImage id="specular-map-img" result="spec_map" />
+      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+    </filter>
+  </defs>
+</svg>
+
+<div class="card" id="card">
+  <h1>waff waff!</h1>
+  <div class="divider"></div>
+  <p>tiny text!!!</p>
+  <p>wuff</p>
+</div>
+<br>
+<div class="card" id="card">
+  <h1>waff waff!</h1>
+  <div class="divider"></div>
+  <p>tiny text!!!</p>
+  <p>wuff</p>
+</div>
 <div class="card" id="card">
   <h1>waff waff!</h1>
   <div class="divider"></div>
   <p>tiny text!!!</p>
   <p>wuff</p>
 </div>
-
 <script>
 // ─── Configuration ────────────────────────────────────────────────────────────
 const CONFIG = {
@@ -387,6 +402,25 @@ document.addEventListener('click', (e) => {
     setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
   }
 });
+
+// ─── Nav pin on scroll ────────────────────────────────────────────────────────
+
+const navWrap        = document.querySelector('.nav-wrap');
+const navPlaceholder = document.getElementById('nav-placeholder');
+
+function updateNavPin() {
+  navWrap.classList.remove('pinned');
+  navPlaceholder.classList.remove('visible');
+  const offsetTop = navWrap.offsetTop;
+  if (window.scrollY > offsetTop) {
+    navWrap.classList.add('pinned');
+    navPlaceholder.classList.add('visible');
+  }
+}
+
+window.addEventListener('scroll', updateNavPin);
+window.addEventListener('load', updateNavPin);
+
 </script>
 
 </body>

www/style.css

@@ -3,10 +3,11 @@
 body {
     min-height: 100vh;
     display: flex;
-    flex-direction: column; /* Stack banner and card top to bottom */
+    flex-direction: column;
-    align-items: center; /* Keep card horizontally centered */
+    align-items: center;
-    justify-content: flex-start; /* Stack from the top rather than centering vertically */
+    justify-content: flex-start;
     background: #0a0e1a url('background.png') center/cover no-repeat;
+    overflow-x: hidden;
 }
 
 .banner {
@@ -104,17 +105,35 @@ p {
     color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
 }
 
-/* ── Nav pill wrapper — fixed to top of viewport ── */
+/* ── Nav pill wrapper — sits below banner, pins to top on scroll ── */
 .nav-wrap {
+    align-self: stretch; /* Override body align-items:center — makes this child full width */
+    display: flex;
+    justify-content: center; /* Centre the pill inside the full-width container */
+    padding: 8px 0;
+}
+
+.nav-wrap.pinned {
     position: fixed;
-    top: 16px;
+    top: 0;
-    left: 50%;
+    left: 0;
-    transform: translateX(-50%);
+    right: 0;
     z-index: 100;
+    padding: 8px 0;
     display: flex;
     justify-content: center;
 }
 
+.nav-placeholder {
+    display: none;
+    align-self: stretch;
+    height: 60px;
+}
+
+.nav-placeholder.visible {
+    display: block;
+}
+
 /* ── The pill itself ── */
 .nav-pill {
     width: 160px;