From beeca95ba8f96d1ae73506386d7aa13fc96d82cb Mon Sep 17 00:00:00 2001
From: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
Date: Wed, 25 Feb 2026 10:25:45 -0800
Subject: [PATCH] Make nav clear until scroll on landing page

---
 .../components/Nav2026.module.css             |  22 ++-
 .../pages/landing-2026/components/Nav2026.tsx | 144 +++++++++---------
 2 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/packages/web/src/public-site/pages/landing-2026/components/Nav2026.module.css b/packages/web/src/public-site/pages/landing-2026/components/Nav2026.module.css
index ee749f2bb81..2643b15527b 100644
--- a/packages/web/src/public-site/pages/landing-2026/components/Nav2026.module.css
+++ b/packages/web/src/public-site/pages/landing-2026/components/Nav2026.module.css
@@ -1,16 +1,26 @@
-.nav {
+.container {
   position: sticky;
+  container-type: scroll-state;
   top: 0;
   z-index: 100;
   width: 100%;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  background: rgba(17, 17, 17, 0.75);
-  border-bottom: 1px solid rgba(17, 17, 17, 0.7);
+  box-sizing: border-box;
+  height: 88px;
+  margin-bottom: -88px;
+}
+
+.nav {
+  width: 100%;
   display: flex;
   justify-content: center;
   padding: 0 48px;
-  box-sizing: border-box;
+  @container scroll-state(stuck: top) {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    background: rgba(17, 17, 17, 0.75);
+    border-bottom: 1px solid rgba(17, 17, 17, 0.7);
+    transition: background 0.2s ease;
+  }
 }
 
 .inner {
diff --git a/packages/web/src/public-site/pages/landing-2026/components/Nav2026.tsx b/packages/web/src/public-site/pages/landing-2026/components/Nav2026.tsx
index 81ce7b8f658..4bf6ff64284 100644
--- a/packages/web/src/public-site/pages/landing-2026/components/Nav2026.tsx
+++ b/packages/web/src/public-site/pages/landing-2026/components/Nav2026.tsx
@@ -149,81 +149,85 @@ export const Nav2026 = (props: Nav2026Props) => {
 
   return (
     <>
-      <nav className={styles.nav}>
-        <div className={styles.inner}>
-          <a
-            href='/'
-            onClick={onLogoClick}
-            aria-label='Audius home'
-            className={styles.logoLink}
-          >
-            <IconAudiusLogoHorizontal
-              height={32}
-              width='auto'
-              color='default'
-              className={styles.logo}
-            />
-          </a>
-          <div className={styles.right}>
-            {isMobile ? (
-              <button
-                type='button'
-                className={styles.mobileMenuButton}
-                onClick={() => setIsMobileOverlayOpen(true)}
-                aria-label='Open menu'
-              >
-                <IconKebabHorizontal
-                  size='m'
-                  color='default'
-                  className={styles.kebabIcon}
-                />
-              </button>
-            ) : (
-              <>
-                <div ref={dropdownRef} style={{ position: 'relative' }}>
-                  <button
-                    type='button'
-                    className={styles.resourcesButton}
-                    onClick={() => {
-                      if (isDropdownOpen) startCloseDropdown()
-                      else {
-                        setIsDropdownClosing(false)
-                        setIsDropdownOpen(true)
-                      }
-                    }}
-                    aria-expanded={isDropdownOpen && !isDropdownClosing}
-                    aria-haspopup='true'
-                    aria-label='Resources menu'
-                  >
-                    {messages.resources}
-                    <IconCaretDown
-                      size='s'
-                      color='default'
-                      className={`${styles.chevronIcon} ${isDropdownOpen && !isDropdownClosing ? styles.chevronIconOpen : ''}`}
-                    />
-                  </button>
-                  {isDropdownOpen || isDropdownClosing ? (
-                    <ResourcesDropdown
-                      setRenderPublicSite={setRenderPublicSite}
-                      navigate={navigate}
-                      onClose={startCloseDropdown}
-                      onClosingComplete={finishCloseDropdown}
-                      isClosing={isDropdownClosing}
-                    />
-                  ) : null}
-                </div>
+      <div className={styles.container}>
+        <nav className={styles.nav}>
+          <div className={styles.inner}>
+            <a
+              href='/'
+              onClick={onLogoClick}
+              aria-label='Audius home'
+              className={styles.logoLink}
+            >
+              <IconAudiusLogoHorizontal
+                height={32}
+                width='auto'
+                color='default'
+                className={styles.logo}
+              />
+            </a>
+            <div className={styles.right}>
+              {isMobile ? (
                 <button
                   type='button'
-                  className={styles.ctaButton}
-                  onClick={onSignUp}
+                  className={styles.mobileMenuButton}
+                  onClick={() => setIsMobileOverlayOpen(true)}
+                  aria-label='Open menu'
                 >
-                  <span className={styles.ctaLabel}>{messages.getStarted}</span>
+                  <IconKebabHorizontal
+                    size='m'
+                    color='default'
+                    className={styles.kebabIcon}
+                  />
                 </button>
-              </>
-            )}
+              ) : (
+                <>
+                  <div ref={dropdownRef} style={{ position: 'relative' }}>
+                    <button
+                      type='button'
+                      className={styles.resourcesButton}
+                      onClick={() => {
+                        if (isDropdownOpen) startCloseDropdown()
+                        else {
+                          setIsDropdownClosing(false)
+                          setIsDropdownOpen(true)
+                        }
+                      }}
+                      aria-expanded={isDropdownOpen && !isDropdownClosing}
+                      aria-haspopup='true'
+                      aria-label='Resources menu'
+                    >
+                      {messages.resources}
+                      <IconCaretDown
+                        size='s'
+                        color='default'
+                        className={`${styles.chevronIcon} ${isDropdownOpen && !isDropdownClosing ? styles.chevronIconOpen : ''}`}
+                      />
+                    </button>
+                    {isDropdownOpen || isDropdownClosing ? (
+                      <ResourcesDropdown
+                        setRenderPublicSite={setRenderPublicSite}
+                        navigate={navigate}
+                        onClose={startCloseDropdown}
+                        onClosingComplete={finishCloseDropdown}
+                        isClosing={isDropdownClosing}
+                      />
+                    ) : null}
+                  </div>
+                  <button
+                    type='button'
+                    className={styles.ctaButton}
+                    onClick={onSignUp}
+                  >
+                    <span className={styles.ctaLabel}>
+                      {messages.getStarted}
+                    </span>
+                  </button>
+                </>
+              )}
+            </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      </div>
       {isMobileOverlayOpen ? (
         <MobileNavOverlay
           onClose={() => setIsMobileOverlayOpen(false)}