improve nav design

assets/css/src/generic.css

@@ -2,6 +2,10 @@
   display: none;
 }
 
+.no-scroll {
+  overflow: hidden !important;
+}
+
 body {
   background-size: var(--unit--horizontal) var(--unit--vertical);
   background-image: linear-gradient(

assets/css/src/header.css

@@ -36,58 +36,6 @@
   transform: translateX(-2px) translateY(-2px);
 }
 
-/* #main-header {
-  position: fixed;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  width: calc(100vw - (2 * var(--unit--horizontal)));
-  height: calc(var(--unit--vertical) * 11.5);
-  padding: 0 var(--unit--horizontal);
-  padding-bottom: 0;
-  transition: height 0.2s ease-in-out;
-}
-#logo {
-  position: relative;
-  height: 100%;
-}
-
-#logo__link {
-  position: relative;
-  transform: translateY(-3rem);
-  display: block;
-  height: 100%;
-}
-
-#main-header.open #actuel {
-  color: var(--color-background);
-}
-
-#logo #actuel,
-#logo #inactuel {
-  position: absolute;
-  mix-blend-mode: difference;
-}
-#logo #actuel {
-  top: 0;
-  right: 0;
-}
-#logo #inactuel {
-  top: 15vw;
-  transition: all 0.3s ease-in-out;
-}
-
-#main-header.minimized #logo #inactuel {
-  top: 0.1vw;
-} */
-
-body {
-  --entry-btns-height: 10svh;
-}
-body[data-template="home"] {
-  --entry-btns-height: 15svh;
-}
-
 .page-cover {
   position: relative;
   height: calc(100svh - var(--entry-btns-height));
@@ -129,19 +77,6 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }
-button.open-nav::after {
-  margin-left: var(--unit--horizontal);
-}
-
-button.open-nav::after {
-  content: "";
-  position: absolute;
-  background-color: transparent;
-  height: var(--unit--vertical);
-  width: var(--unit--horizontal);
-  z-index: -1;
-  transition: all 0.5s var(--curve-sine);
-}
 
 #entry-btns.minimized {
   color: #000;

assets/css/src/nav.css

@@ -1,7 +1,16 @@
 /* ================= PANELS ================= */
-#desktop-nav {
+#nav-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: #000;
+  opacity: 0.7;
+  z-index: 2;
+  cursor: w-resize;
+}
+#nav-overlay:not(.nav-overlay--visible) {
   display: none;
 }
+
 .panel {
   display: none;
   position: fixed;
@@ -136,7 +145,11 @@ button.search__icon {
   overflow: hidden;
 }
 
-.panel-item-content__texts {
+button.see-more {
+  margin-bottom: var(--unit--vertical);
+}
+
+.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) {
   padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
@@ -146,21 +159,9 @@ button.search__icon {
 }
 
 @media screen and (min-width: 640px) {
-  #desktop-nav {
-    display: block;
-    position: fixed;
-    box-sizing: border-box;
-    z-index: 3;
-    bottom: 0;
-    left: 0;
-    width: var(--padding-body);
-    height: 29vh;
-    padding: var(--unit--vertical) var(--unit--horizontal);
+  nav.panel {
+    width: 40rem;
   }
-  #desktop-nav .empty {
-    height: calc(3 * var(--unit--vertical));
-  }
-
   #subscribe-btn-wrapper {
     height: 2.5rem;
     margin-bottom: 0.2rem;
@@ -194,7 +195,6 @@ button.search__icon {
   .panel {
     z-index: 4;
     width: var(--padding-body);
-    padding-top: var(--unit--vertical);
   }
 
   .panel-close {