assets/main.scss

@@ -25,24 +25,44 @@ body {
 .header {
     @apply p-2 bg-slate-200;
 
-    a:not([target="_blank"]) {
-        @apply hidden xl:inline-block
+    .container {
+        @apply items-center;
     }
 }
 
 .logo {
-    @apply text-ioprim font-bold w-20 text-2xl leading-4 py-4 col-span-4 xl:col-span-2;
+    @apply w-full py-4 col-span-4 xl:col-span-2;
+
+    a {
+        @apply flex items-center gap-2;
+    }
+
+    &_text {
+        @apply leading-4 text-3xl font-semibold;
+    }
+
+    svg {
+        @apply text-ioprim inline-block m-0 w-10 h-10;
+    }
 }
 
 .menu {
-    @apply col-span-8 flex justify-between;
+    @apply col-span-10 flex justify-end;
 
     a {
-        @apply underline decoration-0 underline-offset-4 decoration-dotted hover:decoration-transparent transition-all;
+        @apply hover:text-ioprim-900 transition-colors;
+
+        &:before {
+            content: '';
+            @apply inline-block w-[2px] h-5  mx-4 align-middle bg-gradient-to-t from-transparent via-[#333333] via-50% to-transparent;
+        }
+        &:first-child::before {
+            content: none;
+        }
     }
 
     a[href^=http] {
-        @apply relative no-underline;
+        @apply relative;
 
         &:after {
             content: '↷';
@@ -63,7 +83,7 @@ a[href^="#"] {
     }
 
     .k-logo {
-        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;
+        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl;
 
         svg {
             @apply my-0 mx-auto;
@@ -150,9 +170,11 @@ a[href^="#"] {
 
     &-status {
         @apply text-center;
+
         &-icon {
             @apply text-8xl;
         }
+
         &-text {
             @apply text-3xl;
         }
@@ -172,8 +194,9 @@ label {
 }
 
 input {
-    @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed;
+    @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black;
 }
+
 input[type=checkbox] {
     @apply w-4 h-4;
 }

components/header.vue

@@ -10,12 +10,10 @@ const route = useRoute()
     <div class="header">
         <div class="container">
             <div class="logo">
-                <div class="k-logo">
-                    <NuxtLink to="/">
-                        <k_logo />
-                        Kupizabor
-                    </NuxtLink>
-                </div>
+                <NuxtLink to="/">
+                    <k_logo />
+                    <span class="logo_text">Kupizabor</span>
+                </NuxtLink>
             </div>
             <div class="menu">
                 <template v-for="item in pagesData">

pages/[slug].vue

@@ -43,7 +43,7 @@ const policyText = computed(() => {
             <NuxtImg :src="[imgBase, data?.image].join('/')" class="invisible" alt="data.title || 'фоновая картинка'" title="" format="webp"
                 loading="lazy" />
         </div>
-        <div class="siteblock siteblock_calc bg-white">
+        <div class="siteblock siteblock_calc bg-white" v-else>
             <Suspense>
                 <CalcModels />
             </Suspense>