Skiply.ai/skiply/skiply.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;
  container-type: inline-size;
}

/* 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: 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%);
  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: clamp(28px, 7.04cqw, 71px);
  height: clamp(28px, 7.04cqw, 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: -5.95cqw;
  bottom: 100%;
  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;
}

.step-label--inspect::before {
  left: 0;
  top: -0.99cqw;
  width: 1.5px;
  height: 35.71cqw;
  background-color: var(--navy);
  border: none;
}

.step-label--sort::before {
  left: 0;
  bottom: 100%;
  width: 1.5px;
  height: 39.68cqw;
  background-color: var(--navy);
  border: none;
}

.step-label--hold::before {
  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;
}

.step-label--route::before {
  left: 0;
  bottom: 100%;
  width: 1.5px;
  height: 29.76cqw;
  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: clamp(120px, 18.35cqw, 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: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .main-area {
    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: 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;
  }
}