From a02233f01dc660e70901d24108db01d62dcc202b Mon Sep 17 00:00:00 2001
From: susovan sarkar <susovan.sarkar@sentientgeeks.com>
Date: Thu, 20 Aug 2026 11:51:24 +0530
Subject: [PATCH] Enhance responsiveness and layout for mobile devices; add
 responsive width setting and adjust CSS for better adaptability across screen
 sizes.

---
 skiply/path-animation-fullpage.js |  6 ++-
 skiply/skiply-fullpage.html       |  9 ++--
 skiply/skiply.css                 | 83 ++++++++++++++++++++-----------
 3 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/skiply/path-animation-fullpage.js b/skiply/path-animation-fullpage.js
index 7b85313..3c0d019 100644
--- a/skiply/path-animation-fullpage.js
+++ b/skiply/path-animation-fullpage.js
@@ -209,7 +209,11 @@ document.addEventListener('DOMContentLoaded', () => {
       scrollBar: true, // IMPORTANT: keeps native scroll so GSAP ScrollTrigger still works!
       scrollingSpeed: 700,
       fitToSection: true,
-      fitToSectionDelay: 1000
+      fitToSectionDelay: 1000,
+      // Below this width, drop section snapping in favour of normal scroll
+      // and let each .fp-auto-height-responsive section size to its content
+      // instead of being pinned to 100vh (which clips the stacked mobile layout).
+      responsiveWidth: 768
     });
   }
 });
diff --git a/skiply/skiply-fullpage.html b/skiply/skiply-fullpage.html
index c8d2ff4..a9566e9 100644
--- a/skiply/skiply-fullpage.html
+++ b/skiply/skiply-fullpage.html
@@ -25,13 +25,12 @@
       max-width: 100% !important;
     }
 
-    .main-area {
-      width: 1008px;
-      margin: 0 auto;
-    }
-
     .fp-is-overflow>.fp-overflow {
       overflow-y: hidden;
+
+      @media (max-width: 1199px) {
+        width: 100%;
+      }
     }
   </style>
 </head>
diff --git a/skiply/skiply.css b/skiply/skiply.css
index 58a6511..5319b78 100644
--- a/skiply/skiply.css
+++ b/skiply/skiply.css
@@ -246,6 +246,7 @@ body {
 .road-container {
   position: absolute;
   inset: 0;
+  container-type: inline-size;
 }
 
 /* SVG Road */
@@ -281,8 +282,8 @@ body {
 /* ── Moving Car (truck) ────────────────────── */
 .road-car {
   position: absolute;
-  width: 88px;
-  height: 88px;
+  width: clamp(36px, 8.73cqw, 88px);
+  height: clamp(36px, 8.73cqw, 88px);
   z-index: 10;
   /* JS will set left/top via transform */
   transform: translate(-50%, -50%);
@@ -301,8 +302,8 @@ body {
 /* ── Step Icons ─────────────────────────────── */
 .step-icon {
   position: absolute;
-  width: 71px;
-  height: 71px;
+  width: clamp(28px, 7.04cqw, 71px);
+  height: clamp(28px, 7.04cqw, 71px);
   z-index: 5;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -380,10 +381,10 @@ body {
 }
 
 .step-label--receive::before {
-  right: -60px; 
+  right: -5.95cqw;
   bottom: 100%;
-  width: calc(100% + 60px); 
-  height: 190px;
+  width: calc(100% + 5.95cqw);
+  height: 18.85cqw;
   border-bottom: 1.5px solid var(--navy);
   border-right: 1.5px solid var(--navy);
   background-color: transparent;
@@ -391,9 +392,9 @@ body {
 
 .step-label--inspect::before {
   left: 0;
-  top: -10px;
+  top: -0.99cqw;
   width: 1.5px;
-  height: 360px;
+  height: 35.71cqw;
   background-color: var(--navy);
   border: none;
 }
@@ -402,16 +403,16 @@ body {
   left: 0;
   bottom: 100%;
   width: 1.5px;
-  height: 400px;
+  height: 39.68cqw;
   background-color: var(--navy);
   border: none;
 }
 
 .step-label--hold::before {
-  right: -60px;
-  top: -10px;
-  width: calc(100% + 60px);
-  height: 230px; 
+  right: -5.95cqw;
+  top: -0.99cqw;
+  width: calc(100% + 5.95cqw);
+  height: 22.82cqw;
   border-top: 1.5px solid var(--navy);
   border-right: 1.5px solid var(--navy);
   background-color: transparent;
@@ -421,7 +422,7 @@ body {
   left: 0;
   bottom: 100%;
   width: 1.5px;
-  height: 300px;
+  height: 29.76cqw;
   background-color: var(--navy);
   border: none;
 }
@@ -441,7 +442,7 @@ body {
   font-weight: 400;
   color: var(--text-dark);
   line-height: 1.45;
-  max-width: 185px;
+  max-width: clamp(120px, 18.35cqw, 185px);
 }
 
 /*
@@ -624,26 +625,50 @@ body {
   .side-panel {
     width: 100%;
     height: auto;
-    padding: 40px 32px;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
+    padding: 32px 24px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
   }
 
   .main-area {
-    min-height: 420px;
+    flex: 0 0 auto;
     width: 100%;
+    min-height: 0;
+    /* Keep the same width:height ratio as the desktop design so the
+       road path, car and step-label overlays stay aligned at any width. */
+    aspect-ratio: 1008 / 769;
   }
 
   :root {
-    --fs-number: 20vw;
-    --fs-number-lg: 22vw;
-    --fs-unit: 8vw;
-    --fs-intro: 5vw;
-    --fs-desc: 3.5vw;
-    --fs-step-title: 3vw;
-    --fs-step-desc: 2.2vw;
+    --fs-number: 18vw;
+    --fs-number-lg: 20vw;
+    --fs-unit: 7vw;
+    --fs-intro: 4.5vw;
+    --fs-desc: 3.2vw;
+    --fs-step-title: 2.8vw;
+    --fs-step-desc: 2vw;
+    --panel-w: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .side-panel {
+    padding: 24px 20px;
+  }
+
+  .side-panel__desc {
+    max-width: 100%;
+  }
+
+  :root {
+    --fs-number: 22vw;
+    --fs-number-lg: 24vw;
+    --fs-unit: 9vw;
+    --fs-intro: 5.5vw;
+    --fs-desc: 4vw;
+    --fs-step-title: 3.4vw;
+    --fs-step-desc: 2.6vw;
   }
 }