@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

package/build/src/styles/presets/foundry/theme/Navbar/Bridge/style.css

@@ -1,5 +1,9 @@
 /**
- * Foundry — Navbar (Bridge) variant visual styling.
+ * Foundry - `Navbar/Bridge` theme overlay.
+ *
+ * Sticky split-layout bar on the foundry surface with brand left, navigation
+ * items center, and action buttons right. Subtle border-bottom hairline,
+ * primary on hover for links and buttons.
  *
  * @since 0.15.0
  */
@@ -11,18 +15,21 @@
 .navbar {
   position: sticky;
   top: 0;
+  z-index: 200;
+
+  padding-block: 0.75rem;
+
   background: var(--nova-foundry-surface-overlay);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-bottom: 1px solid var(--nova-foundry-border-subtle);
-  z-index: 200;
 }
 
 [data-theme="dark"] .navbar {
   border-bottom-color: rgba(255, 255, 255, 0.08);
 }
 
-.nova-navbar-bridge {
+.nova-navbar-bridge > .nova-container {
   height: 3.75rem;
 }
 
@@ -38,7 +45,7 @@
   font-family: var(--nova-font-display);
   font-size: 1.125rem;
   font-weight: 700;
-  color: var(--nova-color-neutral-900);
+  color: var(--nova-color-text);
   text-decoration: none;
   letter-spacing: -0.02em;
   transition: opacity var(--nova-motion-duration) ease;
@@ -46,18 +53,16 @@
 
 .nova-navbar-bridge-brand a:hover,
 .nova-navbar-bridge-brand a:focus-visible {
-  color: var(--nova-color-neutral-900);
   text-decoration: none;
   opacity: 0.85;
 }
 
 [data-theme="dark"] .nova-navbar-bridge-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-brand a:hover,
 [data-theme="dark"] .nova-navbar-bridge-brand a:focus-visible {
-  color: var(--nova-color-neutral-50);
   opacity: 0.85;
 }
 
@@ -84,51 +89,74 @@
 }
 
 .nova-navbar-bridge-items a,
-.nova-navbar-bridge-items button {
+.nova-navbar-bridge-items button,
+.nova-navbar-bridge-items .nova-navbar-more-summary {
   display: inline-flex;
   align-items: center;
+  min-height: 2.25rem;
   padding: 0.375rem 0.75rem;
   font-family: var(--nova-font-body);
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-color-text-muted);
   text-decoration: none;
   border-radius: var(--nova-shape-radius);
   transition: color var(--nova-motion-duration) ease,
               background-color var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-bridge-items a:hover,
-.nova-navbar-bridge-items a:focus-visible,
+.nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):hover,
+.nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 .nova-navbar-bridge-items button:hover,
-.nova-navbar-bridge-items button:focus-visible {
-  color: var(--nova-color-neutral-900);
-  background-color: var(--nova-color-neutral-50);
+.nova-navbar-bridge-items button:focus-visible,
+.nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
+.nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
+.nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+  color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 95%);
   text-decoration: none;
 }
 
 [data-theme="dark"] .nova-navbar-bridge-items a,
-[data-theme="dark"] .nova-navbar-bridge-items button {
-  color: var(--nova-color-neutral-400);
+[data-theme="dark"] .nova-navbar-bridge-items button,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more-summary {
+  color: var(--nova-color-text-muted);
 }
 
-[data-theme="dark"] .nova-navbar-bridge-items a:hover,
-[data-theme="dark"] .nova-navbar-bridge-items a:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):hover,
+[data-theme="dark"] .nova-navbar-bridge-items a:not(.navbar__link--active):not([aria-current="page"]):focus-visible,
 [data-theme="dark"] .nova-navbar-bridge-items button:hover,
-[data-theme="dark"] .nova-navbar-bridge-items button:focus-visible {
-  color: var(--nova-color-neutral-100);
-  background-color: rgba(255, 255, 255, 0.06);
+[data-theme="dark"] .nova-navbar-bridge-items button:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:hover,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"])) > .nova-navbar-more-summary:focus-visible,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:not(:has(a.navbar__link--active)):not(:has(a[aria-current="page"]))[open] > .nova-navbar-more-summary {
+  color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
 }
 
+/* Active navbar link - matches `.nova-locale-dropdown-item--active` chrome
+   so the navbar items, More popover, and locale popover all read the same
+   on hover/active.
+
+   The `:has()` rule promotes the More trigger to the active style whenever
+   an item inside the popover is the current page - the trigger reflects
+   that one of its hidden items is active, mirroring how a clicked nav
+   item would highlight if it had stayed inline. */
 .nova-navbar-bridge-items a[aria-current="page"],
-.nova-navbar-bridge-items a.navbar__link--active {
-  color: var(--nova-color-primary-600);
+.nova-navbar-bridge-items a.navbar__link--active,
+.nova-navbar-bridge-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
+.nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
   font-weight: 600;
+  color: var(--nova-color-primary-600);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-items a[aria-current="page"],
-[data-theme="dark"] .nova-navbar-bridge-items a.navbar__link--active {
+[data-theme="dark"] .nova-navbar-bridge-items a.navbar__link--active,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:has(a[aria-current="page"]) > .nova-navbar-more-summary,
+[data-theme="dark"] .nova-navbar-bridge-items .nova-navbar-more:has(a.navbar__link--active) > .nova-navbar-more-summary {
   color: var(--nova-color-primary-400);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 85%);
 }
 
 /* ============================
@@ -143,8 +171,8 @@
   font-family: var(--nova-font-body);
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-500);
-  background-color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text-muted);
+  background-color: var(--nova-color-surface-raised);
   border: 1px solid var(--nova-foundry-border);
   border-radius: var(--nova-shape-radius);
 }
@@ -157,7 +185,6 @@
 }
 
 [data-theme="dark"] .nova-color-mode-toggle {
-  color: var(--nova-color-neutral-400);
   background-color: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.08);
 }
@@ -173,7 +200,7 @@
  * 5. Animations
  * ============================ */
 
-.nova-navbar-bridge {
+.nova-navbar-bridge > .nova-container {
   transition: background-color var(--nova-motion-duration) ease,
               border-color var(--nova-motion-duration) ease,
               backdrop-filter var(--nova-motion-duration) ease;
@@ -187,8 +214,8 @@
   font-family: var(--nova-font-body);
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-500);
-  background-color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text-muted);
+  background-color: var(--nova-color-surface-raised);
   border: 1px solid var(--nova-foundry-border);
   border-radius: var(--nova-shape-radius);
 }
@@ -201,7 +228,7 @@
 }
 
 [data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle {
-  color: var(--nova-color-neutral-400);
+  color: var(--nova-color-text-muted);
   background-color: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.08);
 }
@@ -221,7 +248,7 @@
 }
 
 /* ============================
- * 7. Mobile Menu — Overlay
+ * 7. Mobile Menu - Overlay
  * ============================ */
 
 .nova-navbar-bridge-menu-overlay {
@@ -230,7 +257,7 @@
 }
 
 /* ============================
- * 8. Mobile Menu — Panel
+ * 8. Mobile Menu - Panel
  * ============================ */
 
 .nova-navbar-bridge-menu-panel {
@@ -241,7 +268,7 @@
 
 @media (min-width: 576px) {
   .nova-navbar-bridge-menu-panel {
-    border: 1px solid var(--nova-foundry-border-subtle);
+    border: 1px solid var(--nova-foundry-border);
     border-radius: var(--nova-shape-radius);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
   }
@@ -249,21 +276,18 @@
 
 [data-theme="dark"] .nova-navbar-bridge-menu-panel {
   border-color: rgba(255, 255, 255, 0.08);
-}
-
-[data-theme="dark"] .nova-navbar-bridge-menu-panel {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
 /* ============================
- * 9. Mobile Menu — Brand
+ * 9. Mobile Menu - Brand
  * ============================ */
 
 .nova-navbar-bridge-menu-brand a {
   font-family: var(--nova-font-display);
   font-size: 1.125rem;
   font-weight: 700;
-  color: var(--nova-color-neutral-900);
+  color: var(--nova-color-text);
   letter-spacing: -0.02em;
 
   transition: opacity var(--nova-motion-duration) ease;
@@ -271,54 +295,55 @@
 
 .nova-navbar-bridge-menu-brand a:hover,
 .nova-navbar-bridge-menu-brand a:focus-visible {
-  color: var(--nova-color-neutral-900);
   text-decoration: none;
   opacity: 0.85;
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-brand a:hover,
 [data-theme="dark"] .nova-navbar-bridge-menu-brand a:focus-visible {
-  color: var(--nova-color-neutral-50);
   opacity: 0.85;
 }
 
 /* ============================
- * 10. Mobile Menu — Close
+ * 10. Mobile Menu - Close
  * ============================ */
 
 .nova-navbar-bridge-menu-close {
-  color: var(--nova-color-neutral-500);
-
+  color: var(--nova-color-text-muted);
+  background-color: var(--nova-color-surface-raised);
+  border: 1px solid var(--nova-foundry-border);
   border-radius: var(--nova-shape-radius);
 
   transition: color var(--nova-motion-duration) ease,
-              background-color var(--nova-motion-duration) ease;
+              background-color var(--nova-motion-duration) ease,
+              border-color var(--nova-motion-duration) ease;
 }
 
 .nova-navbar-bridge-menu-close:hover,
 .nova-navbar-bridge-menu-close:focus-visible {
-  color: var(--nova-color-neutral-900);
-
-  background-color: var(--nova-color-neutral-50);
+  color: var(--nova-color-primary-600);
+  border-color: var(--nova-color-primary-300);
+  background-color: var(--nova-color-primary-50);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-close {
-  color: var(--nova-color-neutral-400);
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-close:hover,
 [data-theme="dark"] .nova-navbar-bridge-menu-close:focus-visible {
-  color: var(--nova-color-neutral-100);
-
-  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--nova-color-primary-400);
+  border-color: var(--nova-color-primary-700);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 90%);
 }
 
 /* ============================
- * 10. Mobile Menu — Items (Vertical List)
+ * 11. Mobile Menu - Items (Vertical List)
  * ============================ */
 
 .nova-navbar-bridge-menu-items {
@@ -330,8 +355,9 @@
 
   font-family: var(--nova-font-body);
   font-size: 1rem;
-  font-weight: 500;
-  color: var(--nova-color-neutral-700);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--nova-color-text);
 
   border-radius: var(--nova-shape-radius);
 
@@ -343,11 +369,11 @@
 .nova-navbar-bridge-menu-item:focus-visible {
   color: var(--nova-color-primary-600);
 
-  background-color: var(--nova-color-neutral-50);
+  background-color: var(--nova-color-surface-raised);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item {
-  color: var(--nova-color-neutral-300);
+  color: var(--nova-color-text);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item:hover,
@@ -357,10 +383,11 @@
   background-color: rgba(255, 255, 255, 0.06);
 }
 
-/* Active mobile menu item — current page indicator. */
+/* Active mobile menu item - current page indicator. The bare-class rule
+   above already sets font-weight: 600; only the color shift is the
+   active-state delta. */
 .nova-navbar-bridge-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-600);
-  font-weight: 600;
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item[aria-current="page"] {
@@ -368,24 +395,16 @@
 }
 
 /* ============================
- * 11. Mobile Menu — Staggered Reveal
+ * 12. Mobile Menu - Staggered Reveal
+ *
+ * Reuses preset-level `foundry-blur-in` (filter blur 8px -> 0 + opacity)
+ * to echo the panel's frosted-glass treatment. Easing + duration tokens
+ * align with the system motion scale.
  * ============================ */
 
-@keyframes nova-navbar-bridge-menu-reveal {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .nova-navbar-bridge-menu-item {
   opacity: 0;
 
-  animation: nova-navbar-bridge-menu-reveal 300ms ease forwards;
+  animation: foundry-blur-in var(--nova-motion-duration) var(--nova-motion-easing) forwards;
   animation-delay: calc(var(--nova-item-index, 0) * 50ms + 50ms);
 }