@cbnventures/docusaurus-preset-nova 0.17.0 → 0.18.0

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

@@ -1,5 +1,9 @@
 /**
- * Sentinel — Navbar (Bridge) variant visual styling.
+ * Sentinel - `Navbar/Bridge` theme overlay.
+ *
+ * Sticky split-layout bar on a near-white surface with brand left, navigation
+ * items center, and action buttons right. Watchtower-deep dark inverts the
+ * surface; teal-cast hairline border below.
  *
  * @since 0.15.0
  */
@@ -11,19 +15,21 @@
 .navbar {
   position: sticky;
   top: 0;
-  background-color: rgba(255, 255, 255, 0.95);
+  z-index: 200;
+
+  padding-block: 0.75rem;
+
+  background-color: var(--nova-sentinel-chrome-bg-translucent);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--nova-color-neutral-200);
-  z-index: 200;
+  border-bottom: 1px solid var(--nova-color-border);
 }
 
 [data-theme="dark"] .navbar {
-  background-color: rgba(3, 7, 10, 0.95);
-  border-bottom-color: var(--nova-color-neutral-800);
+  border-bottom-color: var(--nova-color-border);
 }
 
-.nova-navbar-bridge {
+.nova-navbar-bridge > .nova-container {
   height: 3.75rem;
 }
 
@@ -39,12 +45,12 @@
   font-family: var(--nova-font-display);
   font-size: 1.125rem;
   font-weight: 700;
-  color: var(--nova-color-neutral-900);
+  color: var(--nova-sentinel-text);
   text-decoration: none;
 }
 
 [data-theme="dark"] .nova-navbar-bridge-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 .nova-navbar-bridge-brand img {
@@ -68,51 +74,69 @@
 }
 
 .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-size: 0.875rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-sentinel-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 {
+.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-700);
-  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+  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-primary-300);
+[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 92%);
 }
 
+/* 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. `:has()` promotes the More trigger when an item inside
+   is the current page. */
 .nova-navbar-bridge-items a[aria-current="page"],
-.nova-navbar-bridge-items a.navbar__link--active {
+.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-700);
   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 90%);
+  background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 88%);
 }
 
 /* ============================
@@ -128,9 +152,9 @@
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-sentinel-text-muted);
   background: none;
-  border: 1px solid var(--nova-color-neutral-300);
+  border: 1px solid var(--nova-color-border);
   border-radius: var(--nova-shape-radius);
 }
 
@@ -142,8 +166,8 @@
 }
 
 [data-theme="dark"] .nova-color-mode-toggle {
-  color: var(--nova-color-neutral-400);
-  border-color: var(--nova-color-neutral-700);
+  color: var(--nova-color-text-muted);
+  border-color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-color-mode-toggle:hover,
@@ -162,9 +186,9 @@
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-sentinel-text-muted);
   background: none;
-  border: 1px solid var(--nova-color-neutral-300);
+  border: 1px solid var(--nova-color-border);
   border-radius: var(--nova-shape-radius);
 }
 
@@ -176,8 +200,8 @@
 }
 
 [data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle {
-  color: var(--nova-color-neutral-400);
-  border-color: var(--nova-color-neutral-700);
+  color: var(--nova-color-text-muted);
+  border-color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-navbar-bridge .nova-hamburger-toggle:hover,
@@ -194,7 +218,7 @@
 }
 
 /* ============================
- * 6. Mobile Menu — Overlay
+ * 6. Mobile Menu - Overlay
  * ============================ */
 
 .nova-navbar-bridge-menu-overlay {
@@ -203,48 +227,47 @@
 }
 
 /* ============================
- * 7. Mobile Menu — Panel
+ * 7. Mobile Menu - Panel
  * ============================ */
 
 .nova-navbar-bridge-menu-panel {
-  background-color: rgba(255, 255, 255, 0.97);
+  background-color: var(--nova-sentinel-chrome-bg-translucent);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 
 @media (min-width: 576px) {
   .nova-navbar-bridge-menu-panel {
-    border: 1px solid var(--nova-color-neutral-200);
+    border: 1px solid var(--nova-color-border);
     border-radius: var(--nova-shape-radius);
   }
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-panel {
-  background-color: rgba(3, 7, 10, 0.97);
-  border-color: var(--nova-color-neutral-800);
+  border-color: var(--nova-color-border);
 }
 
 /* ============================
- * 8. Mobile Menu — Brand
+ * 8. 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-sentinel-text);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-brand a {
-  color: var(--nova-color-neutral-50);
+  color: var(--nova-color-text);
 }
 
 /* ============================
- * 9. Mobile Menu — Close
+ * 9. Mobile Menu - Close
  * ============================ */
 
 .nova-navbar-bridge-menu-close {
-  color: var(--nova-color-neutral-600);
+  color: var(--nova-sentinel-text-muted);
   border-radius: var(--nova-shape-radius);
   transition: color var(--nova-motion-duration) ease,
               background-color var(--nova-motion-duration) ease;
@@ -257,7 +280,7 @@
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-close {
-  color: var(--nova-color-neutral-400);
+  color: var(--nova-color-text-muted);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-close:hover,
@@ -267,7 +290,7 @@
 }
 
 /* ============================
- * 10. Mobile Menu — Items
+ * 10. Mobile Menu - Items
  * ============================ */
 
 .nova-navbar-bridge-menu-items {
@@ -276,22 +299,26 @@
 
 .nova-navbar-bridge-menu-item {
   gap: 0.75rem;
-  font-size: 1rem;
+  font-family: var(--nova-font-display);
+  font-size: 0.875rem;
   font-weight: 500;
-  color: var(--nova-color-neutral-700);
+  letter-spacing: -0.005em;
+  color: var(--nova-color-text);
   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,
+              box-shadow var(--nova-motion-duration) ease;
 }
 
 .nova-navbar-bridge-menu-item:hover,
 .nova-navbar-bridge-menu-item:focus-visible {
   color: var(--nova-color-primary-700);
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 94%);
+  box-shadow: inset 0 0 0 1px var(--nova-color-primary-500);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item {
-  color: var(--nova-color-neutral-300);
+  color: var(--nova-color-border);
 }
 
 [data-theme="dark"] .nova-navbar-bridge-menu-item:hover,
@@ -300,7 +327,7 @@
   background-color: color-mix(in srgb, var(--nova-color-primary-500), transparent 92%);
 }
 
-/* Active mobile menu item — current page indicator. */
+/* Active mobile menu item - current page indicator. */
 .nova-navbar-bridge-menu-item[aria-current="page"] {
   color: var(--nova-color-primary-700);
   font-weight: 600;
@@ -311,19 +338,21 @@
 }
 
 /* ============================
- * 11. Mobile Menu — Fade
+ * 11. Mobile Menu - Panel Fade + Item Slide-up (Unison)
+ *
+ * Panel reuses preset-level `sentinel-fade-in`. Items reuse `sentinel-slide-up`
+ * (translateY(8->0) + opacity, 350ms ease) - the same pattern sentinel uses
+ * for stat reveals on the homepage. Sentinel declares
+ * `motion.staggeredReveals: false`, so all items rise together rather than
+ * cascading.
  * ============================ */
 
-@keyframes nova-navbar-bridge-menu-reveal {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+.nova-navbar-bridge-menu-panel {
+  animation: sentinel-fade-in var(--nova-motion-duration) ease;
 }
 
-.nova-navbar-bridge-menu-panel {
-  animation: nova-navbar-bridge-menu-reveal 200ms ease;
+.nova-navbar-bridge-menu-item {
+  opacity: 0;
+
+  animation: sentinel-slide-up 350ms ease forwards;
 }