Match GL capsule navbar and simplify canvas/card layering

app/app.vue

@@ -6,7 +6,7 @@ const isLoginPage = computed(() => route.path === '/login');
 <template>
   <div class="lk-shell" data-theme="aqua">
     <UiAppHeader v-if="!isLoginPage" />
-    <main class="mx-auto w-full max-w-[1440px] p-4 pt-[92px] md:p-6 md:pt-[96px] lg:p-8 lg:pt-[96px]">
+    <main class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]">
       <div class="lk-content-canvas">
         <NuxtPage />
       </div>

app/assets/css/main.css

@@ -94,24 +94,19 @@ body {
 }
 
 .lk-content-canvas {
-  border: 1px solid rgba(255, 255, 255, 0.52);
+  border: 0;
   border-radius: 2rem;
-  background:
-    linear-gradient(160deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.36));
+  background: color-mix(in oklab, var(--color-base-200) 78%, white);
   box-shadow:
-    0 22px 60px rgba(16, 73, 44, 0.16),
-    inset 0 1px 0 rgba(255, 255, 255, 0.72);
-  -webkit-backdrop-filter: blur(16px) saturate(170%);
-  backdrop-filter: blur(16px) saturate(170%);
+    0 22px 60px rgba(16, 73, 44, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.35);
   padding: clamp(1rem, 1.2vw, 1.5rem);
 }
 
 .surface-card {
-  border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, white);
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow:
-    0 16px 36px rgba(24, 66, 44, 0.1),
-    0 1px 0 rgba(255, 255, 255, 0.62) inset;
+  border: 0;
+  background: #fff;
+  box-shadow: 0 14px 32px rgba(24, 66, 44, 0.08);
 }
 
 .fregat-header-glass {
@@ -134,7 +129,8 @@ body {
 .fregat-header-row {
   gap: 0.5rem;
   --fregat-pill-shell-px: 0.5rem;
-  --fregat-pill-shell-py: 0.5rem;
+  --fregat-pill-shell-py: 0.625rem;
+  min-height: 3.5rem;
 }
 
 .fregat-pill-shell {
@@ -189,6 +185,12 @@ body {
 .lk-nav-link {
   @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200;
   color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
+  min-height: 2rem;
+}
+
+.lk-pill-divider {
+  background: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  opacity: 0.45;
 }
 
 .lk-nav-link:hover {
@@ -204,8 +206,9 @@ body {
 
 @media (min-width: 1024px) {
   .fregat-header-row {
-    min-height: 3rem;
-    --fregat-pill-shell-px: 0.75rem;
+    min-height: 3.75rem;
+    --fregat-pill-shell-px: 0.875rem;
+    --fregat-pill-shell-py: 0.75rem;
   }
 
   .fregat-pill-brand,
@@ -222,7 +225,7 @@ body {
   .fregat-pill-center {
     left: 50%;
     width: max-content;
-    max-width: min(54vw, 900px);
+    max-width: min(62vw, 1020px);
     transform: translateX(-50%);
   }
 
@@ -233,12 +236,12 @@ body {
 
 @media (max-width: 1023px) {
   .fregat-pill-brand {
-    padding-inline: 0.75rem;
+    padding-inline: 1rem;
   }
 
   .lk-nav-link {
-    padding-inline: 0.7rem;
-    padding-block: 0.5rem;
+    padding-inline: 0.8rem;
+    padding-block: 0.55rem;
   }
 }
 

app/components/ui/AppHeader.vue

@@ -2,20 +2,19 @@
 type NavItem = {
   to: string;
   label: string;
-  icon: string;
 };
 
 const route = useRoute();
 const { totalItems } = useClientCart();
 
 const centerCapsule: NavItem[] = [
-  { to: '/products', label: 'Каталог', icon: 'grid' },
-  { to: '/orders', label: 'Мои заказы', icon: 'stack' },
+  { to: '/products', label: 'Каталог' },
+  { to: '/orders', label: 'Мои заказы' },
 ];
 
 const rightCapsule: NavItem[] = [
-  { to: '/cart', label: 'Корзина', icon: 'cart' },
-  { to: '/profile', label: 'Профиль', icon: 'user' },
+  { to: '/cart', label: 'Корзина' },
+  { to: '/profile', label: 'Профиль' },
 ];
 
 function isActive(path: string) {
@@ -30,52 +29,52 @@ function isActive(path: string) {
   <header class="fregat-header-glass fixed inset-x-0 top-0 z-50 border-0">
     <div class="fregat-header-backdrop" aria-hidden="true" />
 
-    <div class="relative mx-auto max-w-[2200px] px-4 py-2 md:px-6">
-      <div class="fregat-header-row relative flex min-h-[3rem] items-center">
+    <div class="relative mx-auto max-w-[2200px] px-3 py-2 md:px-4">
+      <div class="fregat-header-row relative flex items-center">
         <NuxtLink
           to="/"
-          class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-extrabold text-base-content"
+          class="fregat-pill-glass fregat-pill-shell fregat-pill-brand inline-flex items-center justify-center rounded-full px-5 text-base font-extrabold tracking-[0.03em] text-base-content"
         >
-          <span class="inline-flex h-2.5 w-2.5 rounded-full bg-[#139957]" />
           Fregat
         </NuxtLink>
 
-        <div class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center gap-1 rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
+        <nav class="fregat-pill-glass fregat-pill-shell fregat-pill-center flex min-w-0 flex-1 items-center rounded-full p-1 lg:absolute lg:left-1/2 lg:w-auto lg:-translate-x-1/2">
+          <template v-for="(item, index) in centerCapsule" :key="item.to">
             <NuxtLink
-            v-for="item in centerCapsule"
-            :key="item.to"
               :to="item.to"
               :class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
             >
-            <svg v-if="item.icon === 'grid'" class="h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <path d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z" fill="currentColor" />
-            </svg>
-            <svg v-else class="h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <path d="M5 5h14v3H5V5Zm0 5h14v3H5v-3Zm0 5h14v4H5v-4Z" fill="currentColor" />
-            </svg>
               {{ item.label }}
             </NuxtLink>
-        </div>
+            <div
+              v-if="index < centerCapsule.length - 1"
+              class="lk-pill-divider mx-1 h-6 w-px shrink-0"
+              aria-hidden="true"
+            />
+          </template>
+        </nav>
 
-        <div class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center gap-1 rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
+        <nav class="fregat-pill-glass fregat-pill-shell fregat-pill-right flex min-w-0 items-center rounded-full p-1 lg:absolute lg:right-0 lg:w-auto">
+          <template v-for="(item, index) in rightCapsule" :key="item.to">
             <NuxtLink
-            v-for="item in rightCapsule"
-            :key="item.to"
               :to="item.to"
               :class="['lk-nav-link', { 'lk-nav-link-active': isActive(item.to) }]"
             >
-            <svg v-if="item.icon === 'cart'" class="h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <path d="M7 4h-2l-1 2v2h1l2.2 9h10.6l2.2-7H8.3L7.8 8H21V6h-12l-1-2Zm2 16a2 2 0 1 0 0 .01V20Zm8 0a2 2 0 1 0 0 .01V20Z" fill="currentColor" />
-            </svg>
-            <svg v-else class="h-4 w-4" viewBox="0 0 24 24" fill="none">
-              <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" fill="currentColor" />
-            </svg>
-            <span class="hidden sm:inline">{{ item.label }}</span>
-            <span v-if="item.to === '/cart' && totalItems > 0" class="badge badge-sm border-0 bg-[#139957] text-white">
+              <span>{{ item.label }}</span>
+              <span
+                v-if="item.to === '/cart' && totalItems > 0"
+                class="badge badge-sm border-0 bg-[#139957] text-white"
+              >
                 {{ totalItems }}
               </span>
             </NuxtLink>
-        </div>
+            <div
+              v-if="index < rightCapsule.length - 1"
+              class="lk-pill-divider mx-1 h-6 w-px shrink-0"
+              aria-hidden="true"
+            />
+          </template>
+        </nav>
       </div>
     </div>
   </header>