Add Mobile Integration

Author: Modelized

docs/assets/css/style.css

@@ -14,6 +14,12 @@
   --radius-lg: 26px;
   --radius-md: 16px;
   --container: 1240px;
+  --nav-pill-height-mobile: 56px;
+  --nav-pill-height-desktop: 46px;
+  --nav-top-gap: 12px;
+  --nav-shadow: 0 16px 36px -26px rgba(17, 19, 23, 0.42);
+  --nav-shadow-scrolled: 0 20px 40px -22px rgba(17, 19, 23, 0.52);
+  --nav-mobile-offset: calc(env(safe-area-inset-top, 0px) + var(--nav-top-gap) + var(--nav-pill-height-mobile) + 18px);
   --nav-h: 74px;
   --heading-font: "Unbounded", "Arial", sans-serif;
   --body-font: "Space Grotesk", "Segoe UI", sans-serif;
@@ -33,6 +39,8 @@
     --button-text: #111317;
     --highlight: rgba(241, 241, 235, 0.08);
     --highlight-strong: rgba(241, 241, 235, 0.18);
+    --nav-shadow: 0 16px 38px -26px rgba(0, 0, 0, 0.58);
+    --nav-shadow-scrolled: 0 22px 44px -22px rgba(0, 0, 0, 0.66);
   }
 }
 
@@ -295,31 +303,46 @@ a {
 
 .site-nav {
   position: fixed;
-  top: 14px;
+  top: calc(env(safe-area-inset-top, 0px) + var(--nav-top-gap));
   left: 0;
   right: 0;
   z-index: 1000;
+  pointer-events: none;
+}
+
+.site-nav * {
+  pointer-events: auto;
 }
 
 .nav-frame {
   width: min(1320px, calc(100% - 1.5rem));
   margin: 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.68rem 0.95rem;
+  display: block;
+  padding: 0;
   border-radius: 999px;
   border: 1px solid var(--line);
   background: var(--surface);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  transition: border-color 220ms ease, transform 220ms ease, background-color 220ms ease;
+  box-shadow: var(--nav-shadow);
+  overflow: hidden;
+  transition: border-color 220ms ease, transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
+}
+
+.nav-row {
+  min-height: var(--nav-pill-height-desktop);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.58rem 0.95rem;
 }
 
-body.nav-scrolled .nav-frame {
+body.nav-scrolled .nav-frame,
+body.nav--scrolled .nav-frame {
   transform: translateY(-1px);
   border-color: var(--line-strong);
   background: var(--surface-strong);
+  box-shadow: var(--nav-shadow-scrolled);
 }
 
 .brand {
@@ -333,8 +356,12 @@ body.nav-scrolled .nav-frame {
   height: 30px;
 }
 
+.nav-links-desktop {
+  margin-left: auto;
+}
+
 .nav-links {
-  margin: 0 0 0 auto;
+  margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
@@ -396,6 +423,60 @@ body.nav-scrolled .nav-frame {
   transform: translateY(-3.5px) rotate(-45deg);
 }
 
+.nav-sheet {
+  display: none;
+}
+
+.nav-sheet-inner {
+  overflow: hidden;
+}
+
+.nav-mobile-links {
+  list-style: none;
+  margin: 0;
+  padding: 0.2rem 0.4rem 0.7rem;
+}
+
+.nav-mobile-links li {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.nav-mobile-links a {
+  display: block;
+  min-height: 42px;
+  padding: 0.62rem 0.78rem;
+  border-radius: 14px;
+  text-decoration: none;
+  font-size: 0.92rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  transition: color 180ms ease, background-color 180ms ease;
+}
+
+.nav-mobile-links a:hover,
+.nav-mobile-links a.is-active {
+  color: var(--text);
+  background: var(--highlight);
+}
+
+.site-nav.nav-open .nav-mobile-links li {
+  animation: nav-mobile-in 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: var(--menu-delay, 0s);
+}
+
+@keyframes nav-mobile-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .hero {
   min-height: min(900px, 100vh);
   display: flex;
@@ -727,52 +808,6 @@ body.nav-scrolled .nav-frame {
 }
 
 @media (max-width: 980px) {
-  .site-nav {
-    top: 12px;
-  }
-
-  .nav-frame {
-    flex-wrap: wrap;
-    border-radius: 24px;
-    gap: 0.5rem;
-    padding: 0.6rem;
-  }
-
-  .nav-toggle {
-    display: inline-flex;
-  }
-
-  .nav-links {
-    width: 100%;
-    margin: 0;
-    order: 3;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.3rem;
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(-8px);
-    transition:
-      max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 220ms ease,
-      transform 240ms ease;
-  }
-
-  .site-nav.nav-open .nav-links {
-    max-height: 280px;
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(0);
-  }
-
-  .nav-links a {
-    width: 100%;
-    justify-content: flex-start;
-    min-height: 42px;
-  }
-
   .page-wrap {
     padding-top: 98px;
   }
@@ -816,6 +851,62 @@ body.nav-scrolled .nav-frame {
   }
 }
 
+@media (max-width: 980px) and (orientation: portrait) {
+  .site-nav {
+    top: calc(env(safe-area-inset-top, 0px) + var(--nav-top-gap));
+  }
+
+  .nav-frame {
+    width: calc(100% - 1.2rem);
+    border-radius: calc(var(--nav-pill-height-mobile) / 2);
+  }
+
+  .nav-row {
+    min-height: var(--nav-pill-height-mobile);
+    padding: 0.52rem 0.72rem;
+  }
+
+  .nav-links-desktop {
+    display: none;
+  }
+
+  .nav-toggle {
+    display: inline-flex;
+  }
+
+  .nav-sheet {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .site-nav.nav-open .nav-sheet {
+    grid-template-rows: 1fr;
+  }
+
+  .nav-mobile-links a {
+    font-size: 0.9rem;
+  }
+
+  .page-wrap {
+    padding-top: var(--nav-mobile-offset);
+  }
+}
+
+@media (max-width: 980px) and (orientation: landscape) {
+  .nav-toggle {
+    display: none !important;
+  }
+
+  .nav-sheet {
+    display: none !important;
+  }
+
+  .nav-links-desktop {
+    display: flex;
+  }
+}
+
 @media (max-width: 680px) {
   .container,
   .projects-shell {
@@ -838,6 +929,7 @@ body.nav-scrolled .nav-frame {
 
   .ambient-orb,
   .ambient-grain,
+  .site-nav.nav-open .nav-mobile-links li,
   .hero-line > span,
   .button,
   .discipline-card,