Design language

src/lib/styles/layout.css

@@ -3,7 +3,75 @@ header {
   z-index: 100;
   isolation: isolate;
   overflow: visible;
-  background: var(--gw-green);
+  background: linear-gradient(to bottom, #f7f7f5 0%, #ffffff 100%);
+  box-shadow: 0 2px 16px rgba(17, 20, 24, 0.08);
+}
+
+.nav-ribbon {
+  width: 100%;
+  background: var(--yellow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 11px 24px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.nav-ribbon-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-head);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gw-green);
+  white-space: nowrap;
+  padding: 0 28px;
+}
+
+.nav-ribbon-item .icon {
+  font-size: 14px;
+}
+
+.nav-ribbon-divider {
+  width: 1px;
+  height: 14px;
+  background: rgba(33, 48, 33, 0.2);
+  flex: none;
+}
+
+@media (max-width: 768px) {
+  .nav-ribbon {
+    padding: 10px 16px;
+  }
+
+  .nav-ribbon-item {
+    flex: 1;
+    justify-content: center;
+    padding: 0;
+    gap: 6px;
+    font-size: 9px;
+    letter-spacing: 0.04em;
+  }
+
+  .nav-ribbon-item .icon {
+    font-size: 13px;
+  }
+
+  /* Hide the third ribbon item and its preceding divider on mobile */
+  .nav-ribbon > :nth-child(4),
+  .nav-ribbon > :nth-child(5) {
+    display: none;
+  }
+
+  .nav-ribbon-divider {
+    height: 12px;
+    flex: none;
+  }
 }
 
 nav,
@@ -41,8 +109,12 @@ nav {
 }
 
 .nav-links > li > a {
-  color: #fff;
-  font-weight: 500;
+  color: var(--gw-green);
+  font-family: var(--font-head);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -53,12 +125,12 @@ nav {
 }
 
 .nav-links > li > a:hover {
-  background: #fff;
+  background: rgba(33, 48, 33, 0.09);
   color: var(--gw-green);
 }
 
 .nav-links > li > a.nav-link-active {
-  background: #fff;
+  background: rgba(33, 48, 33, 0.11);
   color: var(--gw-green);
 }
 
@@ -264,7 +336,7 @@ nav {
 }
 
 .instagram-icon {
-  color: #fff;
+  color: var(--gw-green);
   font-size: 26px;
   line-height: 1;
   display: flex;
@@ -273,34 +345,13 @@ nav {
 }
 
 .instagram-icon:hover {
-  color: var(--yellow);
+  color: var(--gw-green);
+  opacity: 0.7;
 }
 
+.mobile-menu-shell,
 .mobile-menu {
   display: none;
-  flex-direction: column;
-  gap: 0;
-  background: #fff;
-  padding: 0 0 18px;
-}
-
-.mobile-menu.open {
-  display: flex;
-}
-
-.mobile-menu a {
-  color: #0a304e;
-  font-weight: 700;
-  opacity: 0;
-}
-
-.mobile-menu a:hover {
-  color: #0a304e;
-}
-
-.mobile-menu a.mobile-link-active {
-  background: #eadbbf;
-  color: #0a304e;
 }
 
 .hamburger {