✨feature: Build desktop header

Co-authored-by: Copilot <copilot@github.com>

styles/base/typography.css

@@ -40,7 +40,7 @@
 */
 
 @theme {
-  --font-sans:   "Raleway", sans-serif;
+  --font-sans:   "Poppins", sans-serif;
   --line-height: 1.6;
 
   --text-base: 1rem;

styles/components/site-header.css

@@ -2,21 +2,29 @@
 
 .site-header {
 	/* Site header styles */
+    background: linear-gradient(90.15deg, #0773AC -39.25%, #032F46 100%);
+
+    .header__nav-main {
+        max-width: 80.5rem;
+    }
+
 	.nav-aux__container {
-		a {
+        background: linear-gradient(90.17deg, #2189C0 -51.3%, #0773AC 55.75%);
+
+        .header__nav-aux {
+
+        }
+
+        a {
 			/* Link styles */
-			color: var(--color-primary-600);
+			color: var(--color-white);
 			text-decoration: none;
 			font-weight: 500;
 			transition: color 0.3s ease;
 
-			&:hover {
-				color: var(--color-primary-800);
-			}
+			&:hover { color: var(--color-primary-800); }
 		}
 
-		#globalSearch {
-			@apply text-14px text-light;
-		}
+		#globalSearch { @apply text-14px text-light; }
 	}
 }

styles/navigation/nav-main-default.css

@@ -12,56 +12,58 @@
 
 /* desktop */
 @media screen and (min-width: 62.5rem) {
-  .nav-main .menu-vdi {
-    @apply flex items-center justify-end p-0 m-0;
+    .nav-main .menu-vdi {
+        @apply flex items-end justify-end p-0 m-0;
 
-    >li {
-      >a,
-      >.menu-vdi__toggle {
-        /* text*/
-        @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
-        /* spacing & display */
-        @apply mx-4 p-0 no-underline;
-      }
+        >li {
+            >a,
+            >.menu-vdi__toggle {
+                /* text styles */
+                @apply font-semibold text-20px text-white hover:text-light no-underline leading-snug;
+
+                /* spacing & display */
+                @apply mx-2 p-0 no-underline;
+            }
+
+            &.menu-vdi__item--contact {
+                >a {
+                    background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
+                    border-radius: 20px 4px;
+                    padding: .5rem 2rem;
+                }
+            }
+        }
     }
-  }
 }
 
 @media screen and (min-width: 62.5rem) {
-  .menu-vdi {
-    .menu-vdi__toggle {
-      @apply flex items-center gap-2;
-    }
+    .menu-vdi {
+        .menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }
 
-    .menu-vdi__item--parent {
-      @apply relative;
-    }
+        .menu-vdi__item--parent { @apply relative; }
 
-    .menu-vdi__submenu {
-      @apply bg-white shadow-lg left-4 w-64 flex-col;
-      top: calc(100% + 1rem);
+        .menu-vdi__submenu {
+            top: calc(100% + 1rem);
 
-      >li {
-        @apply w-full;
-      }
+            @apply bg-white shadow-lg left-4 w-64 flex-col;
 
-      .menu-vdi__item {
-        /* text */
-        @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
-        /* spacing & display */
-        @apply block w-full;
-        /* interaction */
-        @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+            >li { @apply w-full; }
 
-        a {
-          @apply block w-full;
+            .menu-vdi__item {
+                /* text styles */
+                @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
+
+                /* spacing & display */
+                @apply block w-full;
+
+                /* interaction */
+                @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+
+                a { @apply block w-full; }
+            }
+
+            a.menu-vdi__item,
+            .menu-vdi__item a { @apply p-4; }
         }
-      }
-
-      a.menu-vdi__item,
-      .menu-vdi__item a {
-        @apply p-4;
-      }
     }
-  }
 }