Differences

This shows you the differences between two versions of the page.

--- testing:nav [2026/09/19 02:01] – ayush
+++ testing:nav [2026/09/19 02:06] (current) – ayush
@@ Line 5: / Line 5: @@
  * SPP 2115 adaptive primary navigation
  *
- * Bootstrap keeps responsibility for interaction semantics. Flexbox,
+ * Bootstrap remains responsible for interaction semantics. Flexbox,
- * intrinsic fit measurement, and site-local styling replace its legacy
+ * intrinsic measurement, and site-local styling replace its legacy
- * float layout and fixed responsive breakpoint.
+ * float-based layout and fixed responsive breakpoint.
  */
 #dw__navbar {
-    /* Dimensions */
+    /* Component dimensions */
     --spp-navbar-height: 50px;
     --spp-navbar-touch-target: 44px;
-    --spp-navbar-radius: 0.375rem;
     /* Typography — sourced from tokens.css */
-    --spp-navbar-font-size: var(--table-size);
+    --spp-navbar-font-size: var(--caption-size);
-    --spp-navbar-font-size-compact: var(--font-size-base);
+    --spp-navbar-line-height: var(--caption-line-height);
-    --spp-navbar-font-size-secondary: var(--caption-size);
-    --spp-navbar-line-height: var(--table-line-height);
-    --spp-navbar-line-height-compact: var(--line-height-base);
-    --spp-navbar-line-height-secondary: var(--caption-line-height);
     --spp-navbar-weight: var(--font-weight-medium);
     --spp-navbar-weight-strong: var(--font-weight-semibold);
@@ Line 60: / Line 55: @@
 }
-#dw__navbar .navbar-nav > li > a {
+/*
+ * Keep every font metric identical across all interaction states.
+ *
+ * Bootstrap adds .active and .open classes during interaction. None of
+ * those states may change font size, weight, line height, or spacing,
+ * because doing so causes visible text expansion and layout movement.
+ */
+#dw__navbar .navbar-nav > li > a,
+#dw__navbar .navbar-nav > li > a:hover,
+#dw__navbar .navbar-nav > li > a:focus,
+#dw__navbar .navbar-nav > .active > a,
+#dw__navbar .navbar-nav > .active > a:hover,
+#dw__navbar .navbar-nav > .active > a:focus,
+#dw__navbar .navbar-nav > .open > a,
+#dw__navbar .navbar-nav > .open > a:hover,
+#dw__navbar .navbar-nav > .open > a:focus {
     font-size: var(--spp-navbar-font-size);
     font-weight: var(--spp-navbar-weight);
@@ Line 69: / Line 80: @@
         color var(--spp-navbar-duration-fast) ease,
         background-color var(--spp-navbar-duration-fast) ease;
-}
-#dw__navbar .navbar-nav > :is(.active, .open) > a {
-    font-weight: var(--spp-navbar-weight-strong);
 }
 #dw__navbar .dropdown-menu > li > a {
-    font-size: var(--spp-navbar-font-size-secondary);
+    font-size: var(--spp-navbar-font-size);
     font-weight: var(--font-weight-regular);
-    line-height: var(--spp-navbar-line-height-secondary);
+    line-height: var(--spp-navbar-line-height);
     letter-spacing: 0;
 }
 #dw__navbar .dropdown-header {
-    font-size: var(--spp-navbar-font-size-secondary);
+    font-size: var(--spp-navbar-font-size);
     font-weight: var(--spp-navbar-weight-strong);
-    line-height: var(--spp-navbar-line-height-secondary);
+    line-height: var(--spp-navbar-line-height);
     letter-spacing: 0;
 }
@@ Line 123: / Line 130: @@
 #dw__navbar .dropdown.open > .dropdown-toggle .caret {
     transform: rotate(180deg);
-}
-/* -------------------------------------------------------------------------
- * Safe pre-initialisation state
- * ---------------------------------------------------------------------- */
-#dw__navbar:not([data-spp-nav-mode]) .navbar-header {
-    float: none;
-}
-#dw__navbar:not([data-spp-nav-mode]) .navbar-toggle {
-    display: block;
-}
-#dw__navbar:not([data-spp-nav-mode]) .navbar-collapse.collapse {
-    display: none !important;
 }
@@ Line 144: / Line 135: @@
  * Intrinsic measurement
  *
- * navbar.js applies this state for one synchronous layout read. It restores
+ * navbar.js temporarily changes data-spp-nav-mode to "measuring" while
- * the rendered mode before the browser paints.
+ * this state is active. Consequently, neither the desktop nor compact
+ * layout rules compete with these measurement rules.
+ *
+ * The state exists only during a synchronous layout read and is restored
+ * before the browser paints.
  * ---------------------------------------------------------------------- */
@@ Line 182: / Line 177: @@
     overflow: visible !important;
+    border-top: 0 !important;
+    box-shadow: none !important;
 }
@@ Line 299: / Line 297: @@
 #dw__navbar[data-spp-nav-mode="desktop"] .dropdown-menu {
-    min-width: max(12rem, 100%);
     margin-top: 0;
     padding-block: 0.375rem;
     border: 1px solid rgb(0 0 0 / 10%);
-    border-radius: 0 0 var(--spp-navbar-radius) var(--spp-navbar-radius);
+    border-radius: 0 0 0.375rem 0.375rem;
     box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%);
@@ Line 341: / Line 338: @@
     display: flex;
     align-items: center;
-    min-height: var(--spp-navbar-height);
     float: none;
@@ Line 370: / Line 365: @@
     border-color: rgb(255 255 255 / 14%);
-    border-radius: var(--spp-navbar-radius);
+    border-radius: 0.375rem;
     transition:
@@ Line 397: / Line 392: @@
 }
-/* Hamburger to close icon */
+/* Hamburger to close */
 #dw__navbar[data-spp-nav-mode="compact"]
@@ Line 423: / Line 418: @@
 #dw__navbar[data-spp-nav-mode="compact"] .navbar-collapse {
-    clear: both;
     width: auto;
-    margin-inline: -15px !important;
-    padding-inline: 15px;
     border-top: 1px solid rgb(255 255 255 / 10%);
-    background: inherit;
     box-shadow: none;
 }
@@ Line 449: / Line 439: @@
 /*
- * Bootstrap owns the inline height while this transition is running.
+ * Bootstrap assigns an inline height while transitioning. Retain that
+ * mechanism but replace its legacy timing with a smoother easing curve.
  */
@@ Line 464: / Line 455: @@
 /*
- * Animate content independently from the height transition.
+ * Animate the contents independently from the height transition.
  */
@@ Line 486: / Line 477: @@
 }
-/* Keep a fixed navbar inside the visual viewport. */
+/* Fixed-navbar viewport containment */
 #dw__navbar[data-spp-nav-mode="compact"].navbar-fixed-top
@@ Line 507: / Line 498: @@
     float: none !important;
-    width: auto;
     margin: 0 -15px;
-    padding-block: 0.5rem;
 }
@@ Line 521: / Line 510: @@
     min-height: var(--spp-navbar-touch-target);
-    padding: 0.625rem 1rem;
+    padding: 0.6875rem 1rem;
-    border-radius: 0;
+    font-size: var(--spp-navbar-font-size);
+    font-weight: var(--spp-navbar-weight);
-    font-size: var(--spp-navbar-font-size-compact);
+    line-height: var(--spp-navbar-line-height);
-    line-height: var(--spp-navbar-line-height-compact);
     white-space: normal;
-}
-#dw__navbar[data-spp-nav-mode="compact"]
-    .navbar-nav
-    > li
-    > .dropdown-toggle {
-    gap: 0.375rem;
-}
-#dw__navbar[data-spp-nav-mode="compact"]
-    .navbar-nav
-    > li
-    > .dropdown-toggle
-    .caret {
-    margin-left: auto;
 }
 /*
- * Bootstrap hides these labels outside its legacy XS breakpoint.
+ * Bootstrap hides these labels outside its legacy XS breakpoint. In the
+ * content-aware compact mode they should always be visible.
  */
@@ Line 562: / Line 536: @@
     float: none !important;
-    width: 100%;
     margin-inline: 0;
 }
@@ Line 571: / Line 544: @@
     border-top: 1px solid rgb(255 255 255 / 8%);
-}
-#dw__navbar[data-spp-nav-mode="compact"] .navbar-btn {
-    display: flex;
-    align-items: center;
-    min-height: var(--spp-navbar-touch-target);
-    margin-block: 0.25rem;
-    font-size: var(--spp-navbar-font-size-compact);
-    line-height: var(--spp-navbar-line-height-compact);
 }
@@ Line 597: / Line 559: @@
     width: auto;
-    margin: 0.125rem 0 0.375rem 1rem;
+    margin: 0 1rem 0.375rem;
     padding: 0.125rem 0 0.25rem 0.75rem;
@@ Line 623: / Line 585: @@
     font-size: var(--spp-navbar-font-size);
+    font-weight: var(--font-weight-regular);
     line-height: var(--spp-navbar-line-height);
     white-space: normal;
 }
+/* Expanded-panel separation */
 #dw__navbar[data-spp-nav-mode="compact"] .navbar-collapse.in,