Peek-a-boo header strip

package.json

@@ -72,5 +72,6 @@
     "svgo": "3.3.2",
     "vite": "6.1.1",
     "vite-plugin-svgr": "4.3.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/legacy/components/site-header/_site-header.scss

@@ -1,5 +1,51 @@
 .site-header {
   display: flex;
+
+  &.docked {
+    backdrop-filter: blur(5px);
+    background-color: rgb(0 0 0 / 50%);
+    left: 0;
+    opacity: 0;
+    padding: 1rem 20px;
+    padding-bottom: 1rem;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateY(-100%);
+    z-index: 1;
+  }
+
+  &.docked.visible {
+    animation: site-header-slide-in 0.5s ease-in both;
+  }
+
+  &.docked.hidden {
+    animation: site-header-slide-out 0.5s ease-out both;
+  }
+
+  @keyframes site-header-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes site-header-slide-out {
+    from {
+      opacity: initial;
+      transform: initial;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+  }
 }
 
 //
@@ -17,6 +63,26 @@
       box-shadow: none;
     }
   }
+
+  .site-header.docked & {
+    margin: 0;
+    padding-right: 20px;
+    width: auto;
+
+    .site-branding--icon {
+      background-image: svg-load('icons/mltshp-icon.svg');
+      display: inline-block;
+      height: 2.475em; // approximated this comparing to label mixin height
+      width: 2.475em;
+    }
+
+    .site-branding--logo {
+      background-image: svg-load('icons/bookmark.svg');
+      display: none;
+      height: 60px;
+      width: auto;
+    }
+  }
 }
 
 .site-branding--logo {
@@ -33,4 +99,8 @@
   margin-top: 69px;
   position: relative;
   text-align: right;
+
+  .site-header.docked & {
+    margin-top: 0;
+  }
 }