@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.2

package/src/styles/static-navbar.scss

@@ -1,28 +1,101 @@
 // Shared navbar + theme toggle (frontend Angular, marketing Astro, backend Django).
+@use 'drakkar-buttons' as *;
+
+@mixin viking-navbar-search-shell-focus {
+  outline: var(--viking-ring-width, 2px) solid var(--viking-ring, var(--viking-ring));
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
+@mixin viking-navbar-utility-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--viking-control-height, 40px);
+  height: var(--viking-control-height, 40px);
+  min-width: var(--viking-control-height, 40px);
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  background: var(--viking-surface, var(--card-bg));
+  color: var(--viking-text, var(--text-color));
+  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
+  cursor: pointer;
+  transition: var(--viking-transition-interactive, all 0.25s ease);
+
+  &:hover {
+    border-color: var(--viking-accent-strong, var(--viking-ring));
+    background: var(--viking-surface-alt, var(--viking-charcoal-700));
+    color: var(--viking-text, var(--text-color));
+    box-shadow: var(--viking-shadow-md, var(--shadow-md));
+  }
+
+  &:focus-visible {
+    @include viking-navbar-search-shell-focus;
+  }
+}
+
+@mixin viking-navbar-search-shell {
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-1, 8px);
+  min-height: var(--viking-control-height, 40px);
+  padding: 0 var(--viking-space-2, 16px);
+  background: var(--viking-surface, var(--card-bg));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
+  transition: var(--viking-transition-interactive, border-color 0.25s ease, box-shadow 0.25s ease);
+
+  &:hover {
+    border-color: color-mix(in srgb, var(--viking-accent-strong, var(--viking-ring)) 55%, var(--viking-border-strong, var(--border)));
+    box-shadow: var(--viking-shadow-md, var(--shadow-md));
+  }
+}
+
+@mixin viking-navbar-search-panel {
+  margin: 0;
+  padding: var(--viking-space-1, 8px);
+  background: var(--viking-surface, var(--card-bg));
+  border: 1px solid var(--viking-border-strong, var(--border));
+  border-radius: var(--viking-radius, 8px);
+  box-shadow: var(--viking-shadow-md, var(--shadow-md));
+  max-height: 288px;
+  overflow: auto;
+  font-family: var(--viking-font-family, inherit);
+}
 
 .navbar {
   position: sticky;
   top: 0;
   z-index: 50;
   width: 100%;
-  min-height: var(--navbar-height, 64px);
-  background-color: var(--navbar-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border-layout);
+  min-height: var(--viking-navbar-height, 64px);
+  background-color: var(--navbar-bg, var(--viking-surface));
+  border-bottom: 1px solid var(--border-layout, var(--viking-border));
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  padding: 9px 24px;
+  padding: 0 var(--viking-space-2, 16px);
   box-sizing: border-box;
+  overflow: visible;
+  container-type: inline-size;
+  container-name: viking-navbar;
+
+  @media (min-width: 768px) {
+    padding-inline: var(--viking-space-3, 24px);
+  }
+  box-shadow: var(--viking-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.2));
+  isolation: isolate;
 }
 
 .navbar-brand {
-  margin-right: 8px;
+  margin-right: var(--viking-space-1, 8px);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--viking-space-1, 8px);
   text-decoration: none;
   overflow: visible;
   flex-shrink: 0;
@@ -45,7 +118,7 @@
   width: 36px;
   height: 36px;
   line-height: 1;
-  color: var(--color-primary);
+  color: var(--color-primary, var(--viking-accent));
   overflow: visible;
   flex-shrink: 0;
   display: inline-flex;
@@ -53,6 +126,11 @@
   justify-content: center;
 }
 
+.navbar-brand .navbar-logo,
+.navbar-brand viking-icon.navbar-logo {
+  color: var(--color-primary, var(--viking-accent)) !important;
+}
+
 // Angular mat-icon defaults to overflow:hidden — clips ligature glyphs at tight sizes.
 .navbar-brand .navbar-logo.mat-icon,
 .navbar-brand mat-icon.navbar-logo {
@@ -69,75 +147,158 @@
 }
 
 .navbar-content {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--viking-space-1, 8px);
   width: 100%;
-  max-width: none;
-  margin: 0;
+  max-width: var(--viking-container-max-width, 1260px);
+  margin-inline: auto;
+  min-width: 0;
+  min-height: var(--viking-navbar-height, 64px);
 }
 
 .navbar-left {
-  flex: 1;
+  grid-column: 1;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  flex: 0 1 auto;
+  min-width: 0;
+  flex-shrink: 0;
 }
 
 .navbar-right {
-  flex: 1;
+  grid-column: 3;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
+  flex: 0 0 auto;
+  gap: var(--viking-space-1, 8px);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.navbar-search,
+.navbar-search viking-button-wc,
+.navbar-right viking-theme-toggle-wc,
+.navbar-right .menu-toggle-btn,
+.navbar-right viking-button.menu-toggle-btn,
+.navbar-right viking-button-wc.menu-toggle-btn {
+  flex: 0 0 auto;
 }
 
 .navbar-center {
+  grid-column: 2;
   display: flex;
   justify-content: center;
+  align-items: center;
+  min-width: 0;
 }
 
 .desktop-nav {
   display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 12px;
-  padding: 4px 0;
+  gap: var(--viking-space-1, 8px);
+  padding: var(--viking-space-half, 4px) 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .desktop-auth {
   display: none;
   align-items: center;
-  gap: 8px;
+  flex-shrink: 0;
+  gap: var(--viking-space-1, 8px);
+
+  viking-button,
+  viking-button-wc {
+    min-width: auto;
+  }
 }
 
 .nav-btn {
   position: relative;
-  font-size: 1rem !important;
+  font-size: var(--viking-font-size-sm, 14px) !important;
   color: var(--nav-link-color, var(--text-muted)) !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
-  letter-spacing: 0.08em !important;
+  letter-spacing: 0.06em !important;
   transition:
     color 0.2s ease,
     background-color 0.2s ease,
     box-shadow 0.2s ease,
     transform 0.2s ease !important;
   border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0 !important;
-  padding: 0 16px !important;
-  height: 40px !important;
-  line-height: 40px !important;
+  padding: 0 var(--viking-space-1-5, 12px) !important;
+  height: var(--viking-control-height, 40px) !important;
+  line-height: var(--viking-control-height, 40px) !important;
   display: inline-flex !important;
   align-items: center !important;
-  gap: 8px !important;
+  gap: 6px !important;
   text-decoration: none;
   background: transparent;
   border: none;
   cursor: pointer;
   overflow: hidden;
+  flex-shrink: 1;
+  min-width: 0;
+  white-space: nowrap;
 }
 
-.nav-btn .material-icons {
+.nav-btn[hidden],
+.mobile-nav-btn[hidden] {
+  display: none !important;
+}
+
+.nav-btn .material-icons,
+.nav-btn svg,
+.nav-btn .viking-icon,
+.nav-btn [data-viking-icon],
+.mobile-nav-btn svg,
+.mobile-nav-btn [data-viking-icon],
+.auth-btn svg,
+.auth-btn [data-viking-icon],
+.theme-toggle-btn svg,
+.menu-toggle-btn svg,
+.navbar-search-trigger [data-viking-icon],
+.navbar-search-mobile-btn [data-viking-icon] {
   margin: 0;
+  flex-shrink: 0;
+}
+
+.nav-btn svg,
+.mobile-nav-btn svg,
+.auth-btn svg,
+.nav-btn [data-viking-icon] svg,
+.mobile-nav-btn [data-viking-icon] svg,
+.auth-btn [data-viking-icon] svg {
+  width: 16px;
+  height: 16px;
+}
+
+.theme-toggle-btn svg,
+.menu-toggle-btn svg,
+.navbar-search-trigger svg,
+.navbar-search-mobile-btn svg,
+.theme-toggle-btn [data-viking-icon] svg,
+.menu-toggle-btn [data-viking-icon] svg,
+.navbar-search-trigger [data-viking-icon] svg,
+.navbar-search-mobile-btn [data-viking-icon] svg {
+  width: 24px;
+  height: 24px;
+}
+
+.navbar-search-trigger [data-viking-icon] svg,
+.navbar-search-mobile-btn [data-viking-icon] svg {
+  width: 20px;
+  height: 20px;
+}
+
+.nav-btn .material-icons {
   font-size: var(--base-font-size);
   width: 16px;
   height: 16px;
@@ -152,7 +313,7 @@
   background: linear-gradient(
     90deg,
     transparent,
-    color-mix(in srgb, var(--crayola-blue) 80%, transparent),
+    color-mix(in srgb, var(--viking-accent) 80%, transparent),
     transparent
   );
   opacity: 0;
@@ -165,7 +326,7 @@
 
 .nav-btn:hover {
   color: var(--text-color) !important;
-  background-color: color-mix(in srgb, var(--crayola-blue) 10%, transparent) !important;
+  background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
   transform: translateY(-1px);
 }
 
@@ -175,27 +336,32 @@
 }
 
 html[data-theme='light'] {
-  --nav-link-color: color-mix(in srgb, var(--jet-black) 88%, var(--white));
+  --nav-link-color: color-mix(in srgb, var(--viking-charcoal-900) 88%, var(--white));
 
   .nav-btn,
-  .mobile-nav-btn,
-  .menu-toggle-btn,
-  .theme-toggle-btn {
+  .mobile-nav-btn {
     color: var(--nav-link-color) !important;
   }
 
+  .menu-toggle-btn,
+  .theme-toggle-btn,
+  .navbar-search-trigger,
+  .navbar-search-mobile-btn {
+    color: var(--viking-text, var(--text-color)) !important;
+  }
+
   .nav-btn:hover,
   .mobile-nav-btn:hover {
-    background-color: color-mix(in srgb, var(--crayola-blue) 10%, transparent) !important;
+    background-color: color-mix(in srgb, var(--viking-accent) 10%, transparent) !important;
   }
 }
 
 .nav-btn.active {
   color: var(--text-color) !important;
-  background-color: color-mix(in srgb, var(--crayola-blue) 14%, transparent) !important;
+  background-color: color-mix(in srgb, var(--viking-accent) 14%, transparent) !important;
   box-shadow:
-    inset 0 -2px 0 0 var(--crayola-blue),
-    0 0 12px color-mix(in srgb, var(--crayola-blue) 18%, transparent) !important;
+    inset 0 -2px 0 0 var(--viking-accent),
+    0 0 12px color-mix(in srgb, var(--viking-accent) 18%, transparent) !important;
 }
 
 .nav-btn.active::before {
@@ -205,66 +371,100 @@ html[data-theme='light'] {
 
 .navbar .theme-toggle-btn,
 .theme-toggle-btn {
-  position: static;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  min-width: 48px;
+  @include viking-navbar-utility-btn;
+  display: inline-grid;
+  place-items: center;
   padding: 0;
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: none;
-  flex-shrink: 0;
-  transition:
-    color 0.2s ease,
-    transform 0.2s ease,
-    background-color 0.2s ease;
+  border-color: color-mix(
+    in srgb,
+    var(--viking-accent, var(--viking-accent)) 32%,
+    var(--viking-border-strong, var(--border))
+  );
+  background: color-mix(
+    in srgb,
+    var(--viking-accent, var(--viking-accent)) 8%,
+    var(--viking-surface, var(--card-bg))
+  );
+  color: var(--viking-accent-strong, var(--viking-ring));
+
+  svg,
+  viking-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  &:hover {
+    border-color: var(--viking-accent-strong, var(--viking-ring));
+    background-color: color-mix(
+      in srgb,
+      var(--viking-accent, var(--viking-accent)) 14%,
+      var(--viking-surface, var(--card-bg))
+    );
+    color: var(--viking-accent-strong, var(--viking-ring));
+    box-shadow: var(--viking-shadow-md, var(--shadow-md));
+  }
+
+  &:active {
+    transform: scale(var(--viking-state-active-scale, 0.98));
+  }
 }
 
 .navbar .theme-toggle-btn .material-icons,
-.theme-toggle-btn .material-icons {
-  font-size: 24px;
+.navbar .theme-toggle-btn svg,
+.theme-toggle-btn .material-icons,
+.theme-toggle-btn svg {
   width: 24px;
   height: 24px;
-  line-height: 24px;
 }
 
-.navbar .theme-toggle-btn:hover,
-.theme-toggle-btn:hover {
-  color: var(--text-color);
-  transform: rotate(15deg);
-  background-color: rgba(33, 118, 255, 0.05);
-  box-shadow: none;
+.menu-toggle-btn,
+viking-button.menu-toggle-btn,
+viking-button-wc.menu-toggle-btn,
+#navbar-search-trigger {
+  @include viking-navbar-utility-btn;
+  display: inline-grid !important;
+  place-items: center;
+  padding: 0;
+
+  svg,
+  viking-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
 }
 
-.navbar .theme-toggle-btn:focus-visible,
-.theme-toggle-btn:focus-visible {
-  outline: 2px solid var(--color-primary-container);
-  outline-offset: 3px;
+.navbar-search viking-button-wc::part(control),
+viking-button-wc.menu-toggle-btn::part(control),
+.navbar-right viking-theme-toggle-wc::part(control) {
+  display: inline-grid;
+  place-items: center;
+  width: var(--viking-control-height, 40px);
+  min-width: var(--viking-control-height, 40px);
+  max-width: var(--viking-control-height, 40px);
+  height: var(--viking-control-height, 40px);
+  min-height: var(--viking-control-height, 40px);
+  padding: 0;
+  line-height: 1;
+  box-sizing: border-box;
 }
 
-.menu-toggle-btn {
-  display: inline-flex !important;
-  color: var(--text-muted) !important;
-  transition: color 0.2s;
-  background: transparent;
-  border: none;
-  cursor: pointer;
+.navbar-search viking-button-wc [data-viking-icon],
+viking-button-wc.menu-toggle-btn [data-viking-icon] {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+  width: var(--viking-icon-size-md, 20px);
+  height: var(--viking-icon-size-md, 20px);
+  line-height: 1;
 }
 
-.menu-toggle-btn:hover {
-  color: var(--text-color) !important;
+.menu-toggle-btn[aria-expanded='true'] {
+  border-color: var(--viking-accent, var(--viking-accent));
+  color: var(--viking-accent-strong, var(--viking-ring));
+  background: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent));
+  box-shadow: var(--viking-shadow-sm, var(--shadow-sm));
 }
 
 .divider {
@@ -274,62 +474,96 @@ html[data-theme='light'] {
   margin: 0 8px;
 }
 
-.auth-btn {
-  background: var(--color-dark-grey-btn-bg) !important;
-  color: var(--color-dark-grey-btn-text) !important;
-  font-weight: 600 !important;
-  border-radius: 96px !important;
-  padding: 0 16px !important;
-  box-shadow: var(--shadow-sm) !important;
+.auth-btn .material-icons {
+  margin: 0;
+  font-size: var(--viking-font-size-sm, 14px);
+  width: 16px;
+  height: 16px;
+}
+
+.auth-btn,
+a.auth-btn,
+button.auth-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: var(--viking-space-1, 8px) !important;
+  min-width: auto !important;
+  height: var(--viking-control-height, 40px) !important;
+  min-height: var(--viking-control-height, 40px) !important;
+  padding: 0 var(--viking-space-2, 16px) !important;
+  border-radius: var(--viking-radius, 8px) !important;
+  letter-spacing: var(--viking-letter-spacing-caps, 0.08em) !important;
   text-transform: uppercase !important;
-  letter-spacing: 0.1em !important;
+  white-space: nowrap !important;
+  line-height: 1 !important;
+}
+
+.auth-signout-btn {
+  background: transparent !important;
+  color: var(--text-muted) !important;
+  font-weight: 600 !important;
+  border-radius: var(--viking-radius, 8px) !important;
+  padding: 0 var(--viking-space-2, 16px) !important;
   border: 1px solid var(--border) !important;
-  transition: var(--transition-smooth) !important;
-  height: 40px !important;
-  line-height: 40px !important;
+  height: var(--viking-control-height, 40px) !important;
+  line-height: var(--viking-control-height, 40px) !important;
   display: inline-flex !important;
   align-items: center !important;
-  gap: 8px !important;
+  gap: var(--viking-space-1, 8px) !important;
   white-space: nowrap !important;
-  text-decoration: none;
+  text-transform: uppercase !important;
+  letter-spacing: 0.08em !important;
   cursor: pointer;
+  transition: var(--viking-transition-interactive) !important;
 }
 
-.auth-btn .material-icons {
-  margin: 0;
-  font-size: var(--base-font-size);
-  width: 16px;
-  height: 16px;
-  transition: transform 0.3s ease;
+.auth-signout-btn[hidden] {
+  display: none !important;
 }
 
-.auth-btn:hover {
-  transform: translateY(-2px) !important;
-  background-color: var(--crayola-blue) !important;
-  border-color: var(--crayola-blue) !important;
-  color: var(--white) !important;
-  box-shadow: var(--shadow-md) !important;
+.auth-signout-btn:hover {
+  color: var(--text-color) !important;
+  border-color: var(--viking-crimson-500) !important;
+  background: color-mix(in srgb, var(--viking-crimson-500) 10%, transparent) !important;
 }
 
-.auth-btn:hover .material-icons {
-  transform: translateX(2px);
+.mobile-menu:not(.open) {
+  display: none !important;
 }
 
 .mobile-menu {
   display: none;
   flex-direction: column;
   position: absolute;
-  top: 64px;
+  top: var(--viking-navbar-height, var(--navbar-height, 64px));
   left: 0;
   right: 0;
   width: auto;
-  background-color: var(--card-bg);
-  box-shadow: var(--shadow-md);
-  border-bottom: 1px solid var(--border);
-  padding: 24px;
+  max-height: calc(100dvh - var(--viking-navbar-height, var(--navbar-height, 64px)));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  background-color: var(--viking-surface, var(--card-bg));
+  box-shadow: var(--viking-shadow-md, var(--shadow-md));
+  border-bottom: 1px solid var(--viking-border, var(--border));
+  padding: var(--viking-space-3, 24px);
+  padding-bottom: calc(var(--viking-space-3, 24px) + env(safe-area-inset-bottom, 0px));
   box-sizing: border-box;
   z-index: 49;
-  gap: 8px;
+  gap: var(--viking-space-half, 4px);
+
+  viking-button {
+    width: 100%;
+  }
+
+  .mobile-auth-btn,
+  .auth-signout-btn {
+    flex-shrink: 0;
+    width: 100%;
+  }
+
   transform: translateY(-10px);
   opacity: 0;
   pointer-events: none;
@@ -348,16 +582,21 @@ html[data-theme='light'] {
 .mobile-nav-btn {
   width: 100% !important;
   justify-content: flex-start !important;
-  font-size: 1rem !important;
-  color: var(--text-muted) !important;
-  height: 40px !important;
-  line-height: 40px !important;
-  border-radius: var(--border-radius-sm) !important;
-  padding: 0 16px !important;
+  font-size: var(--viking-font-size-sm, 14px) !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.06em !important;
+  color: var(--viking-text-muted, var(--text-muted)) !important;
+  min-height: 44px !important;
+  border-radius: var(--viking-radius, 8px) !important;
+  padding: 0 var(--viking-space-2, 16px) !important;
   display: inline-flex !important;
   align-items: center !important;
-  gap: 8px !important;
+  gap: var(--viking-space-1, 8px) !important;
   text-decoration: none;
+  border: 1px solid transparent;
+  background: transparent;
+  transition: var(--viking-transition-interactive, all 0.25s ease);
 }
 
 .mobile-nav-btn .material-icons {
@@ -368,37 +607,31 @@ html[data-theme='light'] {
 }
 
 .mobile-nav-btn:hover {
-  color: var(--text-color) !important;
-  background-color: rgba(33, 118, 255, 0.05) !important;
+  color: var(--viking-text, var(--text-color)) !important;
+  background-color: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 8%, transparent)) !important;
 }
 
 .mobile-nav-btn.active {
-  color: var(--text-color) !important;
-  background-color: rgba(33, 118, 255, 0.1) !important;
-  box-shadow: inset 0 0 0 1px var(--crayola-blue) !important;
+  color: var(--viking-text, var(--text-color)) !important;
+  background-color: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent)) !important;
+  box-shadow: inset 0 0 0 1px var(--viking-accent-strong, var(--viking-ring)) !important;
 }
 
 .mobile-divider {
-  height: 0px;
-  background-color: var(--border);
-  margin: 8px 0;
+  height: 1px;
+  background-color: var(--viking-border, var(--border));
+  margin: var(--viking-space-2, 16px) 0 var(--viking-space-1, 8px);
+  flex-shrink: 0;
 }
 
-.mobile-auth-btn {
-  width: 100% !important;
-  height: 40px !important;
-  line-height: 40px !important;
-  justify-content: center !important;
-  border-radius: var(--border-radius-lg) !important;
-  background: var(--color-dark-grey-btn-bg) !important;
-  color: var(--color-dark-grey-btn-text) !important;
-  font-weight: 600 !important;
-  border: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  white-space: nowrap !important;
-  text-decoration: none;
+.mobile-menu .mobile-auth-btn {
+  margin-top: var(--viking-space-half, 4px);
+}
+
+.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn),
+.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn) span,
+.mobile-menu a.mobile-auth-btn:not(.auth-signout-btn) svg {
+  color: var(--viking-white-pure, var(--viking-white-pure)) !important;
 }
 
 .navbar-link {
@@ -416,7 +649,7 @@ html[data-theme='light'] {
 }
 
 .glowing-icon-sm {
-  color: var(--primary-text-color) !important;
+  color: var(--color-primary, var(--primary-text-color, var(--viking-accent))) !important;
   transition: all 0.3s ease;
 }
 
@@ -441,7 +674,451 @@ html[data-theme='light'] {
   filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 90%, transparent));
 }
 
+// Algolia Experiences autocomplete — aligned with viking-autocomplete + search-palette.
+
+.navbar-search {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  flex: 0 0 auto;
+  justify-content: center;
+  max-width: none;
+  min-width: 0;
+  min-height: var(--viking-control-height, 40px);
+  margin: 0;
+  line-height: 0;
+
+  viking-button,
+  viking-button-wc {
+    flex-shrink: 0;
+  }
+}
+
+.algolia-autocomplete-host {
+  display: none;
+  font-family: var(--viking-font-family, inherit);
+
+  --aa-font-family: var(--viking-font-family, inherit);
+  --aa-font-size: var(--viking-font-size-sm, 14px);
+  --aa-spacing: var(--viking-space-1, 8px);
+  --aa-spacing-half: var(--viking-space-half, 4px);
+  --aa-panel-max-height: 288px;
+  --aa-panel-shadow: var(--viking-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
+  --aa-icon-size: 20px;
+  --aa-icon-stroke-width: 2px;
+  --aa-primary-color-rgb: 20, 163, 168;
+  --aa-muted-color-rgb: 148, 163, 184;
+}
+
+// Command-palette modal — matches viking-search-palette on every breakpoint.
+.algolia-autocomplete-host.algolia-autocomplete-open {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: var(--viking-z-overlay, 10001);
+  padding: 10vh var(--viking-space-2, 16px) var(--viking-space-2, 16px);
+  background: var(--viking-overlay-backdrop, rgba(0, 0, 0, 0.55));
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border: none;
+  box-shadow: none;
+  max-width: none;
+  width: auto;
+  min-width: 0;
+
+  .aa-Autocomplete,
+  .aa-DetachedContainer {
+    max-width: 600px;
+    width: 100%;
+    border: 1px solid var(--viking-border-strong, var(--viking-border, var(--border)));
+    border-radius: var(--viking-radius-lg, 12px);
+    background: var(--viking-surface, var(--card-bg));
+    box-shadow: var(--viking-shadow-lg, var(--shadow-md));
+    overflow: hidden;
+    font-family: var(--viking-font-family, inherit);
+    color: var(--viking-text, var(--text-color));
+    position: relative;
+  }
+
+  .aa-Autocomplete::before,
+  .aa-DetachedContainer::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
+      transparent
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .aa-Form,
+  form {
+    @include viking-navbar-search-shell;
+    margin: 0 !important;
+    border: 0 !important;
+    border-bottom: 1px solid var(--viking-border, var(--border)) !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: color-mix(in srgb, var(--viking-bg, var(--bg-color)) 20%, transparent);
+
+    &:focus-within {
+      border-bottom-color: var(--viking-accent, var(--viking-accent)) !important;
+      box-shadow: inset 0 -2px 0 var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent)) !important;
+      outline: none;
+    }
+  }
+
+  .aa-Panel {
+    position: static;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    max-height: 50vh;
+    padding: var(--viking-space-2, 16px);
+  }
+
+  &::after {
+    content: '⌘K toggle · Esc close';
+    display: block;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+    padding: var(--viking-space-1, 8px) var(--viking-space-2, 16px);
+    border: 1px solid var(--viking-border, var(--border));
+    border-top: 1px solid var(--viking-border, var(--border));
+    border-radius: 0 0 var(--viking-radius-lg, 12px) var(--viking-radius-lg, 12px);
+    background: var(--viking-surface, var(--card-bg));
+    font-size: calc(var(--viking-font-size, 16px) * 0.85);
+    color: var(--viking-text-muted, var(--text-muted));
+    text-align: center;
+    letter-spacing: 0.01em;
+  }
+}
+
+.navbar-search-trigger,
+.navbar-search-mobile-btn {
+  @include viking-navbar-utility-btn;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-control-height, 40px);
+  height: var(--viking-control-height, 40px);
+  padding: 0;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.algolia-autocomplete-host .aa-Autocomplete,
+.algolia-autocomplete-host .aa-DetachedContainer {
+  width: 100%;
+}
+
+.algolia-autocomplete-host .aa-Form,
+.algolia-autocomplete-host form {
+  @include viking-navbar-search-shell;
+  margin: 0 !important;
+
+  &:focus-within {
+    @include viking-navbar-search-shell-focus;
+  }
+}
+
+.algolia-autocomplete-host .aa-InputWrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: var(--viking-space-1, 8px);
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.algolia-autocomplete-host .aa-InputWrapperPrefix,
+.algolia-autocomplete-host .aa-InputWrapperSuffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+  color: var(--viking-accent-strong, var(--viking-ring));
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  line-height: 1;
+}
+
+// Hide Algolia default purple branding; prefix uses theme accent at control size.
+.algolia-autocomplete-host .aa-SubmitButton,
+.algolia-autocomplete-host .aa-DetachedSearchButton,
+.algolia-autocomplete-host .aa-Label,
+.algolia-autocomplete-host .aa-PoweredBy {
+  display: none !important;
+}
+
+.algolia-autocomplete-host .aa-InputWrapperPrefix svg,
+.algolia-autocomplete-host .aa-InputWrapperSuffix svg,
+.algolia-autocomplete-host .aa-InputWrapperPrefix img,
+.algolia-autocomplete-host .aa-InputWrapperSuffix img {
+  width: 20px !important;
+  height: 20px !important;
+  max-width: 20px !important;
+  max-height: 20px !important;
+  color: var(--viking-accent-strong, var(--viking-ring)) !important;
+  fill: currentColor !important;
+  stroke: currentColor !important;
+}
+
+.algolia-autocomplete-host .aa-Input,
+.algolia-autocomplete-host input {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: 0 !important;
+  height: auto;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  background: transparent !important;
+  color: var(--viking-text, var(--text-color));
+  font: inherit;
+  font-size: var(--viking-font-size, 16px);
+  line-height: var(--viking-line-height-normal, 1.5);
+  box-shadow: none !important;
+}
+
+.algolia-autocomplete-host .aa-Input::placeholder,
+.algolia-autocomplete-host input::placeholder {
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.algolia-autocomplete-host .aa-Panel {
+  @include viking-navbar-search-panel;
+  position: absolute;
+  top: calc(100% + var(--viking-space-1, 8px));
+  left: 0;
+  right: 0;
+  z-index: var(--viking-z-overlay, 10001);
+}
+
+.algolia-autocomplete-host .aa-PanelLayout,
+.algolia-autocomplete-host .aa-Source {
+  margin: 0;
+}
+
+.algolia-autocomplete-host .aa-List {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.algolia-autocomplete-host .aa-SourceHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-1, 8px);
+  padding: var(--viking-space-1, 8px) var(--viking-space-1, 8px) 0;
+  margin: 0;
+}
+
+.algolia-autocomplete-host .aa-SourceHeaderTitle {
+  font-size: calc(var(--viking-font-size-sm, 14px) * 0.85);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--viking-text-muted, var(--text-muted));
+}
+
+.algolia-autocomplete-host .aa-SourceHeaderLine {
+  flex: 1;
+  height: 1px;
+  background: var(--viking-border, var(--border));
+}
+
+.algolia-autocomplete-host .aa-Item {
+  border-radius: calc(var(--viking-radius, 8px) / 1.5);
+  padding: 0;
+  margin: 0;
+}
+
+.algolia-autocomplete-host .aa-ItemLink,
+.algolia-autocomplete-host .aa-ItemWrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--viking-space-1-5, 12px);
+  min-height: var(--viking-control-height-sm, 36px);
+  padding: var(--viking-space-1-5, 12px);
+  border-radius: calc(var(--viking-radius, 8px) / 1.5);
+  color: var(--viking-text, var(--text-color));
+  text-decoration: none;
+  transition: var(--viking-transition-interactive, background-color 0.2s ease);
+}
+
+.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemLink,
+.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemWrapper,
+.algolia-autocomplete-host .aa-Item:hover .aa-ItemLink,
+.algolia-autocomplete-host .aa-Item:hover .aa-ItemWrapper {
+  background: var(--viking-accent-soft, color-mix(in srgb, var(--viking-accent) 12%, transparent));
+}
+
+.algolia-autocomplete-host .aa-ItemContent {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--viking-space-1-5, 12px);
+  min-width: 0;
+  flex: 1;
+}
+
+.algolia-autocomplete-host .aa-ItemIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--viking-space-5, 40px);
+  height: var(--viking-space-5, 40px);
+  margin-top: 2px;
+  border-radius: var(--viking-radius, 8px);
+  background: var(--viking-surface-alt, var(--viking-charcoal-700)) !important;
+  box-shadow: none !important;
+  color: var(--viking-accent-strong, var(--viking-ring));
+  overflow: hidden;
+
+  img,
+  svg {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+}
+
+.algolia-autocomplete-host .aa-Item[aria-selected='true'] .aa-ItemIcon,
+.algolia-autocomplete-host .aa-Item:hover .aa-ItemIcon {
+  color: var(--viking-accent, var(--viking-accent));
+}
+
+.algolia-autocomplete-host .aa-ItemContentBody {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--viking-space-1, 8px) / 2);
+  min-width: 0;
+  flex: 1;
+}
+
+.algolia-autocomplete-host .aa-ItemContentTitle {
+  font-size: var(--viking-font-size, 16px);
+  font-weight: 600;
+  color: var(--viking-text, var(--text-color));
+  line-height: 1.3;
+}
+
+.algolia-autocomplete-host .aa-ItemContentDescription {
+  font-size: var(--viking-font-size-sm, 14px);
+  color: var(--viking-text-muted, var(--text-muted));
+  line-height: var(--viking-line-height-relaxed, 1.625);
+  white-space: normal;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  text-overflow: ellipsis;
+}
+
+.algolia-autocomplete-host mark,
+.algolia-autocomplete-host .aa-ItemContentTitle mark,
+.algolia-autocomplete-host .aa-ItemContentDescription mark {
+  background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 20%, transparent);
+  color: var(--viking-accent, var(--viking-accent));
+  border-radius: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+.algolia-autocomplete-host .aa-ItemActions,
+.algolia-autocomplete-host .aa-GradientBottom,
+.algolia-autocomplete-host .aa-GradientTop {
+  display: none;
+}
+
+// Detached overlay (Algolia mobile / portal panel) — match search-palette modal.
+.aa-DetachedOverlay {
+  background: var(--viking-overlay-backdrop, rgba(0, 0, 0, 0.55)) !important;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.aa-DetachedContainer {
+  font-family: var(--viking-font-family, inherit);
+  border: 1px solid var(--viking-border, var(--border)) !important;
+  border-radius: var(--viking-radius-lg, 12px) !important;
+  background: var(--viking-surface, var(--card-bg)) !important;
+  box-shadow: var(--viking-shadow-lg, var(--shadow-md)) !important;
+}
+
+.aa-DetachedContainer .aa-Form,
+.aa-DetachedContainer form {
+  @include viking-navbar-search-shell;
+  margin: var(--viking-space-1, 8px) !important;
+  border-bottom: 1px solid var(--viking-border, var(--border)) !important;
+  border-radius: var(--viking-radius, 8px) var(--viking-radius, 8px) 0 0 !important;
+  box-shadow: none !important;
+}
+
+.aa-DetachedContainer .aa-Panel {
+  @include viking-navbar-search-panel;
+  position: static !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  max-height: 50vh !important;
+}
+
 @media (min-width: 768px) {
+  .navbar-content {
+    position: relative;
+  }
+
+  .navbar-center.desktop-nav {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    pointer-events: auto;
+    max-width: min(100% - 22rem, 42rem);
+    overflow: hidden;
+    justify-content: center;
+  }
+
+  .navbar-left {
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+  }
+
+  .navbar-right {
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+    min-width: 12.5rem;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+  }
+
   .desktop-nav {
     display: flex;
   }
@@ -450,11 +1127,50 @@ html[data-theme='light'] {
     display: flex;
   }
 
-  .menu-toggle-btn {
+  .menu-toggle-btn,
+  viking-button.menu-toggle-btn {
     display: none !important;
   }
 
-  .mobile-menu {
+  .mobile-menu:not(.open) {
     display: none !important;
   }
+
+  .navbar-right {
+    gap: var(--viking-space-2, 16px);
+  }
+
+  .desktop-nav {
+    gap: var(--viking-space-1, 8px);
+  }
+}
+
+// Compact desktop — icon-only nav labels when the bar is still tight.
+@container viking-navbar (min-width: 880px) and (max-width: 1120px) {
+  .nav-btn {
+    padding: 0 var(--viking-space-1, 8px) !important;
+    gap: 0 !important;
+  }
+
+  .nav-btn > span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+// Full desktop — restore nav link labels and spacing.
+@container viking-navbar (min-width: 1121px) {
+  .nav-btn {
+    padding: 0 var(--viking-space-2, 16px) !important;
+    gap: 8px !important;
+    font-size: var(--viking-font-size, 16px) !important;
+    letter-spacing: 0.08em !important;
+  }
 }