diff --git a/assets/road-path-new-2.svg b/assets/road-path-new-2.svg new file mode 100644 index 0000000..60dd8ef --- /dev/null +++ b/assets/road-path-new-2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/road-path-new-3.svg b/assets/road-path-new-3.svg new file mode 100644 index 0000000..335874e --- /dev/null +++ b/assets/road-path-new-3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/skiply/skiply-fade.html b/skiply/skiply-fade.html index a274507..d496355 100644 --- a/skiply/skiply-fade.html +++ b/skiply/skiply-fade.html @@ -47,22 +47,22 @@ - + - - - - + + + + - - - - - + + + + + @@ -165,25 +165,19 @@
- - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/skiply/skiply.css b/skiply/skiply.css index 5319b78..58a6511 100644 --- a/skiply/skiply.css +++ b/skiply/skiply.css @@ -246,7 +246,6 @@ body { .road-container { position: absolute; inset: 0; - container-type: inline-size; } /* SVG Road */ @@ -282,8 +281,8 @@ body { /* ── Moving Car (truck) ────────────────────── */ .road-car { position: absolute; - width: clamp(36px, 8.73cqw, 88px); - height: clamp(36px, 8.73cqw, 88px); + width: 88px; + height: 88px; z-index: 10; /* JS will set left/top via transform */ transform: translate(-50%, -50%); @@ -302,8 +301,8 @@ body { /* ── Step Icons ─────────────────────────────── */ .step-icon { position: absolute; - width: clamp(28px, 7.04cqw, 71px); - height: clamp(28px, 7.04cqw, 71px); + width: 71px; + height: 71px; z-index: 5; transform: translate(-50%, -50%); opacity: 0; @@ -381,10 +380,10 @@ body { } .step-label--receive::before { - right: -5.95cqw; + right: -60px; bottom: 100%; - width: calc(100% + 5.95cqw); - height: 18.85cqw; + width: calc(100% + 60px); + height: 190px; border-bottom: 1.5px solid var(--navy); border-right: 1.5px solid var(--navy); background-color: transparent; @@ -392,9 +391,9 @@ body { .step-label--inspect::before { left: 0; - top: -0.99cqw; + top: -10px; width: 1.5px; - height: 35.71cqw; + height: 360px; background-color: var(--navy); border: none; } @@ -403,16 +402,16 @@ body { left: 0; bottom: 100%; width: 1.5px; - height: 39.68cqw; + height: 400px; background-color: var(--navy); border: none; } .step-label--hold::before { - right: -5.95cqw; - top: -0.99cqw; - width: calc(100% + 5.95cqw); - height: 22.82cqw; + right: -60px; + top: -10px; + width: calc(100% + 60px); + height: 230px; border-top: 1.5px solid var(--navy); border-right: 1.5px solid var(--navy); background-color: transparent; @@ -422,7 +421,7 @@ body { left: 0; bottom: 100%; width: 1.5px; - height: 29.76cqw; + height: 300px; background-color: var(--navy); border: none; } @@ -442,7 +441,7 @@ body { font-weight: 400; color: var(--text-dark); line-height: 1.45; - max-width: clamp(120px, 18.35cqw, 185px); + max-width: 185px; } /* @@ -625,50 +624,26 @@ body { .side-panel { width: 100%; height: auto; - padding: 32px 24px; - flex-direction: column; - align-items: flex-start; - gap: 0; + padding: 40px 32px; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 8px; } .main-area { - flex: 0 0 auto; + min-height: 420px; 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: 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; + --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; } }