Keep the hero logo on screen while it scales down on scroll.

The sticky stage was scrolling away, so the title clipped under the header and left an empty gap above the next section.

Co-authored-by: Cursor <cursoragent@cursor.com>

common.js

@@ -87,6 +87,23 @@ function initHeroScroll(config){
   const siteHeader = document.querySelector('.site-header');
   const mainNav = document.querySelector('.main-nav');
 
+  let heroPin = null;
+  if (section && !section.parentElement?.classList.contains('hero-scroll')){
+    const heroScroll = document.createElement('div');
+    heroScroll.className = 'hero-scroll';
+    section.parentElement.insertBefore(heroScroll, section);
+    heroScroll.appendChild(section);
+  }
+  if (section?.parentElement?.classList.contains('hero-scroll')){
+    heroPin = section.parentElement.querySelector(':scope > .hero-pin');
+    if (!heroPin){
+      heroPin = document.createElement('div');
+      heroPin.className = 'hero-pin';
+      heroPin.setAttribute('aria-hidden', 'true');
+      section.parentElement.appendChild(heroPin);
+    }
+  }
+
   let cachedBaseHeight = 0;
   let cachedBrandGap = 32;
   let cachedMaxScale = 1.9;
@@ -113,6 +130,7 @@ function initHeroScroll(config){
     heroRoot.style.removeProperty('--hero-nav-shift-max');
     heroRoot.style.removeProperty('--hero-scroll-start');
     heroRoot.style.removeProperty('--hero-scroll-end');
+    heroRoot.style.removeProperty('--hero-pin-space');
     if (brandInner){
       brandInner.style.removeProperty('animation-range');
       brandInner.style.removeProperty('animation-timeline');
@@ -304,6 +322,19 @@ function initHeroScroll(config){
 
     updateHeroBrand();
     updateHeroContentLift();
+    syncHeroPinSpace();
+  }
+
+  function syncHeroPinSpace(){
+    if (!section || heroIsMobile || prefersReducedMotion || heroRunway <= 0){
+      heroRoot.style.removeProperty('--hero-pin-space');
+      return;
+    }
+    const runway = getHeroEffectiveRunway();
+    const progress = runway > 0 ? Math.min(getHeroScrollProgress() / runway, 1) : 1;
+    const multiplier = getHeroScrollRunwayMultiplier();
+    const spacer = heroRunway * Math.max(multiplier - 1, 0) * (1 - progress);
+    heroRoot.style.setProperty('--hero-pin-space', `${spacer}px`);
   }
 
   function updateHeroBrand(){
@@ -335,6 +366,7 @@ function initHeroScroll(config){
     heroRoot.style.setProperty('--hero-scale', scale.toFixed(4));
     heroRoot.style.setProperty('--hero-brand-height', `${brandHeight}px`);
     heroRoot.style.setProperty('--hero-stage-height', `${brandHeight + cachedNavHeight}px`);
+    syncHeroPinSpace();
   }
 
   let heroScrollRaf = 0;

en/index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -446,7 +446,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/app.js"></script>
 
 </body>

en/terminal/index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -296,7 +296,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/terminal.js"></script>
 
 </body>

index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -446,7 +446,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/app.js"></script>
 
 </body>

src/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {{HEAD_META}}
 {{LANG_REDIRECT_SCRIPT}}
-<link rel="stylesheet" href="{{ASSET_PREFIX}}styles.css?v=20260923k">
+<link rel="stylesheet" href="{{ASSET_PREFIX}}styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -359,7 +359,7 @@
 </div>
 
 <link rel="stylesheet" href="{{ASSET_PREFIX}}fonts/inter.css">
-<script src="{{ASSET_PREFIX}}common.js?v=20260923d"></script>
+<script src="{{ASSET_PREFIX}}common.js?v=20260924d"></script>
 <script src="{{ASSET_PREFIX}}app.js"></script>
 
 </body>

src/terminal.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {{HEAD_META}}
 {{LANG_REDIRECT_SCRIPT}}
-<link rel="stylesheet" href="{{ASSET_PREFIX}}styles.css?v=20260923k">
+<link rel="stylesheet" href="{{ASSET_PREFIX}}styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -209,7 +209,7 @@
 </div>
 
 <link rel="stylesheet" href="{{ASSET_PREFIX}}fonts/inter.css">
-<script src="{{ASSET_PREFIX}}common.js?v=20260923d"></script>
+<script src="{{ASSET_PREFIX}}common.js?v=20260924d"></script>
 <script src="{{ASSET_PREFIX}}terminal.js"></script>
 
 </body>

styles.css

@@ -45,7 +45,7 @@ body{
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   transition: background var(--transition), color var(--transition);
-  overflow-x:hidden;
+  overflow-x:clip;
 }
 
 .ambient{
@@ -182,10 +182,37 @@ main, .site-footer{
   --hero-max-scale:1.95;
   --hero-active-scale:var(--hero-max-scale);
   --hero-logo-size:clamp(60px, 11vw, 128px);
-  position:relative;
+  position:sticky;
+  top:var(--site-header-height);
+  z-index:2;
   padding-top:var(--hero-stage-offset);
   padding-bottom:var(--hero-bottom-gap);
   text-align:left;
+  background:var(--bg);
+}
+.hero-scroll{
+  position:relative;
+  z-index:2;
+}
+.hero-pin{
+  height:var(--hero-pin-space, 0px);
+}
+.hero-scroll + .post-hero-lift{
+  position:relative;
+  z-index:1;
+  margin-top:calc(var(--hero-pin-space, 0px) * -1);
+}
+.hero::before,
+.terminal-hero::before{
+  content:'';
+  position:absolute;
+  z-index:-1;
+  left:50%;
+  top:0;
+  bottom:0;
+  width:100vw;
+  transform:translateX(-50%);
+  background:var(--bg);
 }
 .hero-stage{
   position:sticky;
@@ -697,11 +724,14 @@ main, .site-footer{
   --hero-logo-size:clamp(72px, 13.5vw, 158px);
   --hero-terminal-overflow:1.14;
   --hero-brand-gap:var(--hero-bottom-gap);
-  position:relative;
+  position:sticky;
+  top:var(--site-header-height);
+  z-index:2;
   padding-top:var(--hero-stage-offset);
   padding-bottom:var(--hero-bottom-gap);
   text-align:center;
   overflow:visible;
+  background:var(--bg);
 }
 .terminal-stage{
   position:sticky;

terminal/index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -296,7 +296,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/terminal.js"></script>
 
 </body>

ua/index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -446,7 +446,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/app.js"></script>
 
 </body>

ua/terminal/index.html

@@ -88,7 +88,7 @@
   }
 })();
 </script>
-<link rel="stylesheet" href="/styles.css?v=20260923k">
+<link rel="stylesheet" href="/styles.css?v=20260924d">
 </head>
 <body>
 <div class="ambient" aria-hidden="true">
@@ -296,7 +296,7 @@
 </div>
 
 <link rel="stylesheet" href="/fonts/inter.css">
-<script src="/common.js?v=20260923d"></script>
+<script src="/common.js?v=20260924d"></script>
 <script src="/terminal.js"></script>
 
 </body>