susovan sarkar
d5ea271eb6
- Removed container-type from .road-container - Fixed dimensions for .road-car and .step-icon to fixed sizes - Adjusted positioning and dimensions for step labels - Updated padding and flex properties in .side-panel for better alignment - Refined font size variables for improved scaling on smaller screens
654 lines
13 KiB
CSS
654 lines
13 KiB
CSS
/* =============================================
|
||
Skiply.ai — Styles
|
||
Figma: Skiply.ai / node 172-173
|
||
============================================= */
|
||
|
||
/* ── Keyframes ──────────────────────────────── */
|
||
@keyframes truckBounce {
|
||
from {
|
||
transform: translate(-50%, -50%) translateY(0px);
|
||
}
|
||
|
||
to {
|
||
transform: translate(-50%, -50%) translateY(-8px);
|
||
}
|
||
}
|
||
|
||
@keyframes dashFlow {
|
||
to {
|
||
stroke-dashoffset: -48;
|
||
}
|
||
}
|
||
|
||
@keyframes pulseGlow {
|
||
|
||
0%,
|
||
100% {
|
||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
|
||
}
|
||
|
||
50% {
|
||
filter: drop-shadow(0 4px 20px rgba(100, 160, 240, 0.55));
|
||
}
|
||
}
|
||
|
||
/* ── Reset & Tokens ─────────────────────────── */
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--navy: #0a1a37;
|
||
--navy-mid: #0d2247;
|
||
--light-bg: #f6f6f6;
|
||
--road-blue: #b8c8e8;
|
||
--road-blue-dark: #8fa8d0;
|
||
--text-dark: #0a1a37;
|
||
--text-white: #ffffff;
|
||
|
||
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
|
||
/* Typography scale matching Figma */
|
||
--fs-intro: 2.2rem;
|
||
/* "From" / "We take only" */
|
||
--fs-number: 11rem;
|
||
/* "30" */
|
||
--fs-number-lg: 12.5rem;
|
||
/* "15" */
|
||
--fs-unit: 3.1rem;
|
||
/* "Days" / "Seconds" */
|
||
--fs-desc: 1.5rem;
|
||
/* sub-description */
|
||
--fs-step-title: 1.5rem;
|
||
/* "Receive", "Inspect" … */
|
||
--fs-step-desc: 1.05rem;
|
||
/* descriptor text */
|
||
|
||
--panel-w: 312px;
|
||
--screen-h: 769px;
|
||
}
|
||
|
||
html {
|
||
font-family: var(--font-main);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body {
|
||
background: var(--light-bg);
|
||
color: var(--text-white);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── Screen wrapper ─────────────────────────── */
|
||
.screen {
|
||
position: sticky;
|
||
top: 0;
|
||
width: 1320px;
|
||
height: var(--screen-h);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Side Panel ─────────────────────────────── */
|
||
.side-panel {
|
||
flex-shrink: 0;
|
||
width: var(--panel-w);
|
||
height: 100%;
|
||
background: var(--navy);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 48px 40px 48px 36px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.side-panel__intro {
|
||
font-size: var(--fs-intro);
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
.side-panel__number {
|
||
font-size: var(--fs-number);
|
||
font-weight: 300;
|
||
line-height: 0.85;
|
||
letter-spacing: -0.04em;
|
||
margin-bottom: 2px;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
.side-panel__number--lg {
|
||
font-size: var(--fs-number-lg);
|
||
}
|
||
|
||
.side-panel__unit {
|
||
font-size: var(--fs-unit);
|
||
font-weight: 400;
|
||
line-height: 1;
|
||
margin-bottom: 24px;
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
.side-panel__desc {
|
||
font-size: var(--fs-desc);
|
||
font-weight: 400;
|
||
line-height: 1.45;
|
||
color: rgba(255, 255, 255, 0.65);
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
/* ── Main Content Area ──────────────────────── */
|
||
.main-area {
|
||
flex: 1;
|
||
height: 100%;
|
||
background: var(--light-bg);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Background Decorative Blobs ────────────── */
|
||
.bg-blobs {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
opacity: 0.35;
|
||
filter: blur(60px);
|
||
}
|
||
|
||
.screen--prob1 .blob--1 {
|
||
width: 600px;
|
||
height: 500px;
|
||
background: radial-gradient(ellipse, #a8bfe8 0%, transparent 70%);
|
||
right: -100px;
|
||
top: -80px;
|
||
}
|
||
|
||
.screen--prob1 .blob--2 {
|
||
width: 400px;
|
||
height: 350px;
|
||
background: radial-gradient(ellipse, #c0d4f0 0%, transparent 70%);
|
||
left: 100px;
|
||
bottom: -60px;
|
||
}
|
||
|
||
.screen--prob1 .blob--3 {
|
||
width: 350px;
|
||
height: 300px;
|
||
background: radial-gradient(ellipse, #d4e4f8 0%, transparent 70%);
|
||
right: 200px;
|
||
bottom: 100px;
|
||
}
|
||
|
||
.screen--prob2 .blob--1 {
|
||
width: 550px;
|
||
height: 450px;
|
||
background: radial-gradient(ellipse, #b0c8ec 0%, transparent 70%);
|
||
right: -80px;
|
||
top: -60px;
|
||
}
|
||
|
||
.screen--prob2 .blob--2 {
|
||
width: 380px;
|
||
height: 300px;
|
||
background: radial-gradient(ellipse, #c8daf4 0%, transparent 70%);
|
||
left: 60px;
|
||
bottom: -40px;
|
||
}
|
||
|
||
.screen--prob2 .blob--3 {
|
||
width: 300px;
|
||
height: 260px;
|
||
background: radial-gradient(ellipse, #e0eaf8 0%, transparent 70%);
|
||
left: 250px;
|
||
top: 120px;
|
||
}
|
||
|
||
/* ── Background shoe image (Prob 2) ─────────── */
|
||
.shoe-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.shoe-bg__img {
|
||
position: absolute;
|
||
width: 180%;
|
||
max-width: none;
|
||
left: -10%;
|
||
top: -10%;
|
||
opacity: 0.18;
|
||
filter: blur(3px);
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════
|
||
PROB 1 — Road / Journey Layout
|
||
════════════════════════════════════════════ */
|
||
.road-container {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
/* SVG Road */
|
||
.road-svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.road-fill {
|
||
filter: drop-shadow(0 4px 12px rgba(100, 140, 200, 0.3));
|
||
}
|
||
|
||
.road-dashes {
|
||
animation: dashFlow 2s linear infinite;
|
||
}
|
||
|
||
.flow-dashes {
|
||
animation: dashFlow 2s linear infinite;
|
||
}
|
||
|
||
/* Removed SVG connector class */
|
||
|
||
/* ── Road SVG fills the container vertically centred ── */
|
||
.road-svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ── Moving Car (truck) ────────────────────── */
|
||
.road-car {
|
||
position: absolute;
|
||
width: 88px;
|
||
height: 88px;
|
||
z-index: 10;
|
||
/* JS will set left/top via transform */
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
will-change: transform;
|
||
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
.road-car__img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* ── Step Icons ─────────────────────────────── */
|
||
.step-icon {
|
||
position: absolute;
|
||
width: 71px;
|
||
height: 71px;
|
||
z-index: 5;
|
||
transform: translate(-50%, -50%);
|
||
opacity: 0;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.step-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.step-icon:hover {
|
||
transform: translate(-50%, -50%) scale(1.12);
|
||
}
|
||
|
||
/*
|
||
Icon positions anchored to the real path geometry.
|
||
Road SVG viewBox = 983 × 473, rendered inside 983×769 area.
|
||
xMidYMid meet => rendered SVG height = 473px, top offset = (769-473)/2 = 148px.
|
||
|
||
screen_top% = (svgY + 148) / 769 * 100
|
||
Receive : (384+148)/769 = 69.2%
|
||
Sort : (449+148)/769 = 77.6%
|
||
Inspect : (100+148)/769 = 32.3%
|
||
Hold : ( 24+148)/769 = 22.4%
|
||
Route : (178+148)/769 = 42.4%
|
||
|
||
JS will override these with precise pixel positions after render.
|
||
These are fallback values only.
|
||
*/
|
||
.step-icon--receive {
|
||
left: 11.3%;
|
||
top: 69.2%;
|
||
}
|
||
|
||
.step-icon--sort {
|
||
left: 36.7%;
|
||
top: 77.6%;
|
||
}
|
||
|
||
.step-icon--inspect {
|
||
left: 49.5%;
|
||
top: 32.3%;
|
||
}
|
||
|
||
.step-icon--hold {
|
||
left: 75.2%;
|
||
top: 22.4%;
|
||
}
|
||
|
||
.step-icon--route {
|
||
left: 87.7%;
|
||
top: 42.4%;
|
||
}
|
||
|
||
/* ── Step Labels ─────────────────────────────── */
|
||
.step-label {
|
||
position: absolute;
|
||
z-index: 6;
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
}
|
||
|
||
.step-label--inspect,
|
||
.step-label--sort,
|
||
.step-label--route {
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.step-label::before {
|
||
content: "";
|
||
position: absolute;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.step-label--receive::before {
|
||
right: -60px;
|
||
bottom: 100%;
|
||
width: calc(100% + 60px);
|
||
height: 190px;
|
||
border-bottom: 1.5px solid var(--navy);
|
||
border-right: 1.5px solid var(--navy);
|
||
background-color: transparent;
|
||
}
|
||
|
||
.step-label--inspect::before {
|
||
left: 0;
|
||
top: -10px;
|
||
width: 1.5px;
|
||
height: 360px;
|
||
background-color: var(--navy);
|
||
border: none;
|
||
}
|
||
|
||
.step-label--sort::before {
|
||
left: 0;
|
||
bottom: 100%;
|
||
width: 1.5px;
|
||
height: 400px;
|
||
background-color: var(--navy);
|
||
border: none;
|
||
}
|
||
|
||
.step-label--hold::before {
|
||
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;
|
||
}
|
||
|
||
.step-label--route::before {
|
||
left: 0;
|
||
bottom: 100%;
|
||
width: 1.5px;
|
||
height: 300px;
|
||
background-color: var(--navy);
|
||
border: none;
|
||
}
|
||
|
||
.step-label__title {
|
||
display: block;
|
||
font-size: var(--fs-step-title);
|
||
font-weight: 600;
|
||
color: var(--text-dark);
|
||
line-height: 1;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.step-label__desc {
|
||
display: block;
|
||
font-size: var(--fs-step-desc);
|
||
font-weight: 400;
|
||
color: var(--text-dark);
|
||
line-height: 1.45;
|
||
max-width: 185px;
|
||
}
|
||
|
||
/*
|
||
Label positions (pre-computed, same logic as icons).
|
||
Bottom labels (receive, sort, route): icon top% + ~5.7% (44px/769)
|
||
Top labels (inspect, hold): icon top% - ~11.7% (90px/769)
|
||
*/
|
||
.step-label--receive {
|
||
left: 7%;
|
||
top: 74.9%;
|
||
}
|
||
|
||
/* 69.2 + 5.7 */
|
||
.step-label--sort {
|
||
left: 33%;
|
||
top: 83.3%;
|
||
}
|
||
|
||
/* 77.6 + 5.7 */
|
||
.step-label--inspect {
|
||
left: 46%;
|
||
top: 20.6%;
|
||
}
|
||
|
||
/* 32.3 - 11.7 */
|
||
.step-label--hold {
|
||
left: 71%;
|
||
top: 10.7%;
|
||
}
|
||
|
||
/* 22.4 - 11.7 */
|
||
.step-label--route {
|
||
left: 84%;
|
||
top: 48.1%;
|
||
}
|
||
|
||
/* 42.4 + 5.7 */
|
||
|
||
/* ════════════════════════════════════════════
|
||
PROB 2 — Scan → Decision Flow Layout
|
||
════════════════════════════════════════════ */
|
||
.flow-container {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
/* SVG Flow Path */
|
||
.flow-svg {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* ── Shoe icon in center ────────────────────── */
|
||
.flow-shoe-icon {
|
||
position: absolute;
|
||
width: 96px;
|
||
height: 96px;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) rotate(-2.69deg);
|
||
z-index: 8;
|
||
opacity: 0;
|
||
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
|
||
}
|
||
|
||
.flow-shoe-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* ── Flow Nodes ─────────────────────────────── */
|
||
.flow-node {
|
||
position: absolute;
|
||
width: 71px;
|
||
height: 71px;
|
||
z-index: 7;
|
||
transform: translate(-50%, -50%);
|
||
opacity: 0;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.flow-node img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.flow-node:hover {
|
||
transform: translate(-50%, -50%) scale(1.12);
|
||
}
|
||
|
||
/* Positions (% within 983px × 769px main area) */
|
||
.flow-node--scan {
|
||
left: 29%;
|
||
top: 61%;
|
||
}
|
||
|
||
.flow-node--decision {
|
||
left: 67%;
|
||
top: 37%;
|
||
}
|
||
|
||
/* ── Flow Labels ─────────────────────────────── */
|
||
.flow-label {
|
||
position: absolute;
|
||
z-index: 8;
|
||
opacity: 0;
|
||
transform: translateY(8px);
|
||
padding-left: 12px;
|
||
}
|
||
|
||
.flow-label::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
width: 1.5px;
|
||
background-color: var(--navy);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.flow-label--scan::before {
|
||
top: -45px;
|
||
height: 45px;
|
||
}
|
||
|
||
.flow-label--decision::before {
|
||
bottom: -45px;
|
||
height: 45px;
|
||
}
|
||
|
||
.flow-label--scan {
|
||
left: 22%;
|
||
top: 70%;
|
||
}
|
||
|
||
.flow-label--decision {
|
||
left: 60%;
|
||
top: 20%;
|
||
}
|
||
|
||
/* ── Spacing between two screens ─────────────── */
|
||
.screen+.screen {
|
||
margin-top: 0;
|
||
border-top: 2px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════
|
||
Responsive – scale for smaller viewports
|
||
═══════════════════════════════════════════════ */
|
||
@media (max-width: 1340px) {
|
||
.screen {
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 1320 / 769;
|
||
}
|
||
|
||
:root {
|
||
--fs-number: 8vw;
|
||
--fs-number-lg: 9vw;
|
||
--fs-unit: 2.2vw;
|
||
--fs-intro: 1.6vw;
|
||
--fs-desc: 1.1vw;
|
||
--fs-step-title: 1.1vw;
|
||
--fs-step-desc: 0.8vw;
|
||
--panel-w: 23.6%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.screen {
|
||
flex-direction: column;
|
||
height: auto;
|
||
aspect-ratio: unset;
|
||
width: 100%;
|
||
}
|
||
|
||
.side-panel {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 40px 32px;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.main-area {
|
||
min-height: 420px;
|
||
width: 100%;
|
||
}
|
||
|
||
: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;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|