From 981500ec5d32e3a09d754500dfeb95163b11deaf Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 16:09:00 +0700
Subject: [PATCH] Soften glass gradient and round capsules

---
 app/components/navigation/MainNavigation.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 320ca79..aec07e1 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,14 +1,14 @@
 <template>
   <header
-    class="shadow-lg relative overflow-hidden"
+    class="relative overflow-hidden"
     :class="headerClasses"
     :style="{ height: `${height}px` }"
   >
-    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/35 via-white/15 to-transparent" />
+    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/45 via-white/20 to-transparent" />
     <!-- Single row: Logo + Search + Icons -->
     <div class="relative z-10 flex items-center h-full px-4 lg:px-6 gap-4">
       <!-- Left: Logo + Nav links (top aligned) -->
-      <div class="flex items-center gap-6 flex-shrink-0 px-4 py-3 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
+      <div class="flex items-center gap-6 flex-shrink-0 px-5 py-3 rounded-full border border-white/15 bg-white/12 backdrop-blur-md">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
           <span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
         </NuxtLink>
@@ -84,7 +84,7 @@
 
         <!-- Client Area tabs -->
         <template v-if="isClientArea">
-          <div class="flex items-center gap-1 rounded-full border border-white/35 bg-white/75 backdrop-blur-md shadow-lg p-1">
+          <div class="flex items-center gap-1 rounded-full border border-white/35 bg-white/70 backdrop-blur-md p-1">
             <!-- BUYER tabs -->
             <template v-if="currentRole !== 'SELLER'">
               <NuxtLink
@@ -118,7 +118,7 @@
 
         <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-else-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
+          <div class="flex items-center w-full rounded-full border border-white/45 bg-white/55 backdrop-blur-md divide-x divide-base-300/30">
             <!-- Product segment -->
             <button
               class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@@ -167,7 +167,7 @@
         <template v-else>
           <!-- Big pill input -->
           <div
-            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/45 bg-white/55 backdrop-blur-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
             @click="focusInput"
           >
             <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
@@ -212,7 +212,7 @@
       </div>
 
       <!-- Right: AI + Globe + Team + User (top aligned like logo) -->
-      <div class="flex items-center gap-1 flex-shrink-0 px-3 py-2 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
+      <div class="flex items-center gap-1 flex-shrink-0 px-4 py-2 rounded-full border border-white/15 bg-white/12 backdrop-blur-md">
         <!-- AI Assistant button -->
         <NuxtLink
           :to="localePath('/clientarea/ai')"