Source Vault: phone menu matches the site's open menu

CHANGELOG.md

@@ -12,6 +12,7 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and
 
 ### Changed
 
+- Source Vault phone menu: it now opens exactly like the site's menu: full screen with the slat wipe, the SYS::OPEN chip, big outlined poster links with numbered captions (the section you're on fills with the gradient), and the split buttons at the bottom.
 - Source Vault menu: the links now follow the page, top to bottom: Prompts, Harmonic Map, Tracks, Credits (desktop nav and the phone menu).
 - Source Vault gate: the ACCESS REQUIRED card is much smaller (270 px: tag, one-line title, and the key field with a → button) and has no box, just four viewfinder corner ticks with the rain fading to dark behind it. The site's digital rain now runs behind it, streaming only public words (track titles and stem types) until the key is in.
 - Source Vault player: the dock now matches the site's player (borderless ▶ key, « » skips, title and chapter lines, the black bar), and the playing track's real waveform is the seek bar, with the times under it. The right-hand slot shows the tempo, key and Camelot code and opens a queue of all 20 files with their BPM; on phones it folds up like the site's dock.

src/vault/main.js

@@ -418,18 +418,20 @@ function startNav() {
   const burger = $("#burger"),
     menu = $("#vmenu");
   const setMenu = (o) => {
-    menu.hidden = !o;
+    menu.classList.toggle("is-open", o);
+    menu.setAttribute("aria-hidden", !o);
+    menu.inert = !o;
     burger.setAttribute("aria-expanded", o);
     burger.classList.toggle("is-open", o);
     burger.setAttribute("aria-label", o ? "Close menu" : "Open menu");
     document.body.classList.toggle("menu-open", o);
   };
-  burger.onclick = () => setMenu(menu.hidden);
+  burger.onclick = () => setMenu(!menu.classList.contains("is-open"));
   addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && !menu.hidden) setMenu(false);
+    if (e.key === "Escape" && menu.classList.contains("is-open")) setMenu(false);
   });
   addEventListener("resize", () => {
-    if (innerWidth >= 1024 && !menu.hidden) setMenu(false);
+    if (innerWidth >= 1024 && menu.classList.contains("is-open")) setMenu(false);
   });
   $$("[data-nav]").forEach((a) =>
     a.addEventListener("click", (e) => {

src/vault/vault.css

@@ -522,7 +522,7 @@ a {
 .snav {
   position: sticky;
   top: 0;
-  z-index: 40;
+  z-index: 58;
 }
 .snav .nav-glass {
   position: absolute;
@@ -573,61 +573,35 @@ a {
     display: flex;
   }
 }
+/* the open menu is the site's .e4-menu (overrides.css): full screen under the nav bar, over the dock */
 .vmenu {
   position: fixed;
-  left: 0;
-  right: 0;
-  top: var(--navh);
-  bottom: 0;
-  z-index: 55;
-  background: #000;
-  padding: 22px 16px calc(24px + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  inset: 0;
+  z-index: 56;
+  overflow: hidden;
 }
-.vmenu[hidden] {
-  display: none;
+@media (min-width: 1024px) {
+  .vmenu {
+    display: none;
+  }
 }
-.vmenu a[data-nav] {
+.vmenu .e4c-l {
   font-family: var(--head);
-  font-size: clamp(40px, 11vw, 56px);
-  line-height: 1.15;
-  color: var(--t2);
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  border-bottom: 1px solid var(--hair2);
-  padding: 8px 0;
-  text-decoration: none;
-}
-.vmenu a[data-nav] small {
-  font-family: var(--mono);
-  font-size: 9px;
-  letter-spacing: 0.24em;
-  color: var(--t4);
 }
-.vmenu a.on {
-  color: var(--ghost);
+.vmenu .e4c-link {
+  text-decoration: none;
 }
-.vmenu a.on span {
+.vmenu .e4c-link.on .e4c-l {
   background: var(--grad);
   -webkit-background-clip: text;
   background-clip: text;
+  -webkit-text-stroke: 0;
   color: transparent;
 }
 .vm-ft {
-  margin-top: auto;
   display: grid;
   gap: 8px;
 }
-.vm-ft .e-split {
-  width: 100%;
-}
-.vm-ft .e-split > * {
-  flex: 1;
-  min-height: 48px;
-}
 body.menu-open {
   overflow: hidden;
 }

vault/index.html

@@ -136,15 +136,47 @@ <h1 id="gate-h">ACCESS <span class="grad">REQUIRED.</span></h1>
         </div>
       </div>
     </nav>
-    <div class="vmenu" id="vmenu" hidden>
-      <a href="#prompts" data-nav="prompts"><span>PROMPTS</span><small>5 STYLES</small></a
-      ><a href="#hmap" data-nav="hmap"><span>HARMONIC MAP</span><small>5B · 6A · 6B</small></a
-      ><a href="#tracks" data-nav="tracks"><span>TRACKS</span><small>20 FILES</small></a
-      ><a href="#vfoot" data-nav="vfoot"><span>CREDITS</span><small>END</small></a>
-      <div class="vm-ft">
-        <span class="e-split"
-          ><span class="e-split-bk">Nº004</span><button class="e-split-dl" data-lock>LOCK ↺</button></span
-        ><span class="e-split"><button class="e-split-dl" data-dl="all">↓ ALL STEMS</button></span>
+    <!-- the site's open menu (Nav.jsx): slat wipe, SYS::OPEN chip, outlined poster links, split buttons -->
+    <div
+      class="vmenu e4-menu"
+      id="vmenu"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Vault navigation"
+      aria-hidden="true"
+      inert
+    >
+      <div class="e4-sl" style="--i: 0"></div>
+      <div class="e4-sl" style="--i: 1"></div>
+      <div class="e4-sl" style="--i: 2"></div>
+      <div class="e4-sl" style="--i: 3"></div>
+      <div class="e4-sl" style="--i: 4"></div>
+      <div class="e4-sl" style="--i: 5"></div>
+      <div class="e4-inner">
+        <div class="e4-sys">
+          <span class="e8c" style="--c: #ff00e5"><i></i><span>SYS::OPEN</span></span>
+        </div>
+        <nav class="e4-nav" aria-label="Vault navigation links">
+          <a href="#prompts" data-nav="prompts" class="e4c-link"
+            ><span class="e4c-l">PROMPTS</span><span class="e4c-s"><b>01</b>5 STYLES</span></a
+          >
+          <a href="#hmap" data-nav="hmap" class="e4c-link"
+            ><span class="e4c-l">HARMONIC MAP</span><span class="e4c-s"><b>02</b>5B · 6A · 6B</span></a
+          >
+          <a href="#tracks" data-nav="tracks" class="e4c-link"
+            ><span class="e4c-l">TRACKS</span><span class="e4c-s"><b>03</b>20 FILES</span></a
+          >
+          <a href="#vfoot" data-nav="vfoot" class="e4c-link"
+            ><span class="e4c-l">CREDITS</span><span class="e4c-s"><b>04</b>END</span></a
+          >
+        </nav>
+        <div class="vm-ft">
+          <span class="e-split e-split-menu"
+            ><span class="e-split-bk">Nº004</span><button class="e-split-dl" data-lock>LOCK ↺</button></span
+          ><span class="e-split e-split-menu"
+            ><button class="e-split-dl" data-dl="all">↓ ALL STEMS</button></span
+          >
+        </div>
       </div>
     </div>
     <div class="ruler" id="ruler" aria-hidden="true" hidden></div>