fixes

apps/website/assets/css/voyage-layout.css

@@ -248,8 +248,6 @@ html {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    --nav-padding-top-base: var(--space-sm);
-    --nav-padding-bottom-base: var(--space-sm);
 }
 
 @media (max-width: 768px) {
@@ -455,6 +453,7 @@ html {
     top: calc(-1 * var(--hero-safe-area-top));
     height: calc(100lvh + var(--hero-safe-area-top));
     transform: translate3d(0, var(--parallax-offset, 0px), 0);
+    background: #ffffff;
     z-index: 0; /* Behind content */
     pointer-events: none;
 }

apps/website/components/AppNavbar.vue

@@ -57,77 +57,19 @@ const logoAlt = computed(() =>
   isScrolled.value ? 'Harbor Smith Navy Logo' : 'Harbor Smith White Logo'
 )
 
-let maxSafeAreaTop = 0
+const SCROLL_ENTER = 80
-
+const SCROLL_EXIT = 40
-const measureSafeAreaTop = () => {
-  if (typeof window === 'undefined') {
-    return 0
-  }
-
-  const viewport = window.visualViewport
-  const viewportInset = viewport?.offsetTop ?? 0
-  let envInset = 0
-  let legacyInset = 0
-
-  if (document.body) {
-    const probe = document.createElement('div')
-    probe.style.cssText = [
-      'position:absolute',
-      'top:0',
-      'left:0',
-      'width:0',
-      'height:env(safe-area-inset-top, 0px)',
-      'pointer-events:none',
-      'visibility:hidden'
-    ].join(';')
-
-    document.body.appendChild(probe)
-    envInset = probe.getBoundingClientRect().height || 0
-
-    probe.style.height = 'constant(safe-area-inset-top)'
-    legacyInset = probe.getBoundingClientRect().height || 0
-    document.body.removeChild(probe)
-  }
-
-  return Math.max(0, viewportInset, envInset, legacyInset)
-}
-
-const setInitialSafeAreaTop = () => {
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  const root = document.documentElement
-  const measured = measureSafeAreaTop()
-
-  if (measured > maxSafeAreaTop) {
-    maxSafeAreaTop = measured
-    root.style.setProperty('--initial-safe-area-top', `${measured}px`)
-  }
-}
-
-const resetSafeAreaTop = () => {
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  maxSafeAreaTop = 0
-  document.documentElement.style.setProperty('--initial-safe-area-top', '0px')
-  const remeasure = () => {
-    setInitialSafeAreaTop()
-  }
-
-  if (typeof requestAnimationFrame === 'function') {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(remeasure)
-    })
-  } else {
-    setTimeout(remeasure, 50)
-  }
-}
 
 const handleScroll = () => {
-  isScrolled.value = window.pageYOffset > 50
+  const currentOffset = window.scrollY || window.pageYOffset
+
+  if (isScrolled.value) {
+    if (currentOffset < SCROLL_EXIT) {
+      isScrolled.value = false
+    }
+  } else if (currentOffset > SCROLL_ENTER) {
+    isScrolled.value = true
+  }
 }
 
 const handleSmoothScroll = (event: Event, href: string) => {
@@ -144,29 +86,11 @@ const scrollToTop = () => {
 }
 
 onMounted(() => {
-  setInitialSafeAreaTop()
-  setTimeout(() => {
-    setInitialSafeAreaTop()
-  }, 100)
   handleScroll()
   window.addEventListener('scroll', handleScroll, { passive: true })
-  window.addEventListener('orientationchange', resetSafeAreaTop)
-  window.addEventListener('resize', setInitialSafeAreaTop)
-
-  if (window.visualViewport) {
-    window.visualViewport.addEventListener('resize', setInitialSafeAreaTop)
-  }
 })
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', handleScroll)
-  window.removeEventListener('orientationchange', resetSafeAreaTop)
-  window.removeEventListener('resize', setInitialSafeAreaTop)
-
-  if (window.visualViewport) {
-    window.visualViewport.removeEventListener('resize', setInitialSafeAreaTop)
-  }
-
-  maxSafeAreaTop = 0
 })
 </script>