Website Update

Author: Modelized

docs/assets/css/style.css

@@ -1027,11 +1027,11 @@ a {
   --hero-stage-offset: var(--page-top-offset);
   --hero-top-pad: clamp(1.3rem, 1.9vw, 2rem);
   --hero-stage-bottom-pad: clamp(1.55rem, 2.35vw, 2.25rem);
-  --hero-copy-bottom-offset: clamp(2.1rem, 3vw, 2.9rem);
+  --hero-copy-bottom-offset: clamp(2.45rem, 3.35vw, 3.3rem);
   --hero-stage-min: 0px;
   --home-transition-span: clamp(9rem, 16vh, 13rem);
   --home-transition-distance: var(--home-transition-span);
-  --hero-image-anchor-y: 47.7%;
+  --hero-image-anchor-y: 46.35%;
   --hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-stage-offset) - var(--hero-top-pad) - var(--hero-stage-bottom-pad));
   --hero-stage-reference: max(var(--hero-stage-height), var(--hero-stage-min));
   --hero-visual-height: calc(var(--hero-top-pad) + var(--hero-stage-reference) + var(--hero-stage-bottom-pad));
@@ -2401,7 +2401,7 @@ body.page-home #about {
   .hero {
     --hero-top-pad: clamp(1rem, 1.7vw, 1.4rem);
     --hero-stage-bottom-pad: clamp(1.4rem, 2.15vw, 1.95rem);
-    --hero-copy-bottom-offset: clamp(1.8rem, 2.9vw, 2.35rem);
+    --hero-copy-bottom-offset: clamp(2.05rem, 3.05vw, 2.6rem);
   }
 
   .hero-copy {
@@ -2467,11 +2467,11 @@ body.page-home #about {
   .hero {
     --hero-top-pad: 1.05rem;
     --hero-stage-bottom-pad: 1.1rem;
-    --hero-copy-bottom-offset: 1.72rem;
+    --hero-copy-bottom-offset: 1.98rem;
     --home-transition-span: clamp(8.5rem, 15vh, 11.5rem);
     --hero-image-size: clamp(29rem, calc(var(--hero-stage-reference) * 0.96), 52rem);
     --hero-image-max-inline: 110vw;
-    --hero-image-anchor-y: 43.95%;
+    --hero-image-anchor-y: 42.15%;
     --hero-tagline-base-size: clamp(2.25rem, min(calc(var(--hero-stage-reference) * 0.1), 11.2cqi), 3.35rem);
   }
 

docs/assets/js/shell.js

@@ -1291,17 +1291,17 @@
         stageReference * 1.78,
         viewportHeight * 1.42
       );
-      lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.022, 12), 22);
+      lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.016, 8), 16);
       const lowerLayerOverlap = Math.max(
-        Math.min(viewportHeight * 0.82, stageReference * 1.14),
-        viewportHeight * 0.66
+        Math.min(viewportHeight * 0.94, stageReference * 1.2),
+        viewportHeight * 0.78
       );
       hero.style.setProperty("--home-transition-distance", `${transitionDistance.toFixed(2)}px`);
       root.style.setProperty("--home-next-layer-overlap", `${lowerLayerOverlap.toFixed(2)}px`);
     };
 
     const setAtmosphere = (amount) => {
-      root.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
+      body.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
     };
 
     const setLowerLayer = (amount) => {
@@ -1323,8 +1323,8 @@
       const silhouetteFade = 1 - range(progress, 0.34, 0.58, easeInOutCubic);
       const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
       const heroUnitOpacity = Math.max(baseFade, silhouetteOpacity);
-      const atmosphereProgress = range(progress, 0.64, 0.9, easeInOutCubic);
-      const nextLayerProgress = range(progress, 0.5, 0.76, easeInOutCubic);
+      const atmosphereProgress = range(progress, 0.62, 0.84, easeInOutCubic);
+      const nextLayerProgress = range(progress, 0.76, 0.94, easeInOutCubic);
       const backdropSuppression = progress < 0.88 ? "1" : "0";
 
 	      root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));

docs/index.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="assets/css/style.css?v=20260418e">
+  <link rel="stylesheet" href="assets/css/style.css?v=20260418f">
 
   <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -228,6 +228,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
 
   <div id="footer-slot"></div>
 
-  <script src="assets/js/shell.js?v=20260418e" defer></script>
+  <script src="assets/js/shell.js?v=20260418f" defer></script>
 </body>
 </html>