feat: align landing capsule and remove glass from map ui

app/components/navigation/MainNavigation.vue

@@ -98,8 +98,10 @@
 
       <!-- Center: Search input OR Client Area tabs (vertically centered) -->
       <div
-        class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 transition-all"
-        :class="isHeroLayout ? 'justify-start' : 'justify-center'"
+        class="relative flex-1 flex flex-col items-center mx-auto gap-2 transition-all"
+        :class="[
+          isHeroLayout ? 'w-full max-w-none justify-start' : 'max-w-2xl justify-center'
+        ]"
         :style="centerStyle"
       >
         <!-- Hero slot for home page title -->
@@ -141,7 +143,11 @@
 
         <!-- Quote mode: Step-based capsule navigation (like logistics) -->
         <template v-else-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full pill-glass overflow-hidden">
+          <div
+            class="flex items-center rounded-full pill-glass overflow-hidden"
+            :class="searchCapsuleClass"
+            :style="searchCapsuleStyle"
+          >
             <!-- Product segment -->
             <NuxtLink
               :to="localePath('/catalog/product')"
@@ -182,7 +188,9 @@
         <template v-else>
           <!-- Big pill input -->
           <div
-            class="flex items-center gap-3 w-full px-5 py-3 rounded-full pill-glass focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            class="flex items-center gap-3 px-5 py-3 rounded-full pill-glass focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            :class="searchCapsuleClass"
+            :style="searchCapsuleStyle"
             @click="focusInput"
           >
             <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
@@ -409,9 +417,12 @@ const props = withDefaults(defineProps<{
   height?: number
   // Collapse progress for hero layout
   collapseProgress?: number
+  // Home scroll position for floating center capsule
+  heroScrollY?: number
 }>(), {
   height: 100,
-  collapseProgress: 1
+  collapseProgress: 1,
+  heroScrollY: 0
 })
 
 defineEmits([
@@ -516,6 +527,8 @@ const getTokenIcon = (type: string) => {
 
 const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
 const topRowHeight = 100
+const LANDING_CAPSULE_TOP_START = 450
+const LANDING_CAPSULE_TOP_STOP = 2
 
 const rowStyle = computed(() => {
   if (isHeroLayout.value) {
@@ -534,6 +547,24 @@ const centerStyle = computed(() => {
   return { marginTop: `${top}px` }
 })
 
+const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
+
+const landingCapsuleTop = computed(() => {
+  if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
+  const y = Math.max(0, props.heroScrollY || 0)
+  return Math.max(LANDING_CAPSULE_TOP_STOP, LANDING_CAPSULE_TOP_START - y)
+})
+
+const searchCapsuleClass = computed(() => {
+  if (!isFloatingHomeCapsule.value) return 'w-full'
+  return 'w-full lg:fixed lg:left-1/2 lg:z-40 lg:w-[min(1120px,calc(100%-1.5rem))] lg:-translate-x-1/2 transition-[top] duration-200 ease-out'
+})
+
+const searchCapsuleStyle = computed(() => {
+  if (!isFloatingHomeCapsule.value) return undefined
+  return { top: `${landingCapsuleTop.value}px` }
+})
+
 // Use white text on dark backgrounds (collapsed or home page with animation)
 const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
 </script>