refactor(about): structure the career journey

src/components/RiverJourney.module.css

@@ -66,15 +66,33 @@
 
 .stepsList {
   position: absolute;
-  inset: 0;
+  top: 5.5rem;
+  right: var(--layout-page-gutter);
   z-index: 3;
+  display: flex;
+  flex-direction: column;
+  width: min(33rem, 46vw);
+  gap: var(--space-3);
+  padding-left: 3.5rem;
   list-style: none;
 }
 
-.stepCard {
+.stepsList::before {
+  content: '';
   position: absolute;
+  top: 1.25rem;
+  bottom: 1.25rem;
+  left: 1.25rem;
+  width: 2px;
+  border-radius: var(--radius-pill);
+  background: var(--border-strong);
+}
+
+.stepCard {
+  position: relative;
   display: flex;
-  width: 15.625rem;
+  width: 100%;
+  min-height: 6.125rem;
   gap: var(--space-3);
   padding: var(--space-4);
   border: 1px solid var(--border-default);
@@ -82,23 +100,28 @@
   background: var(--overlay-contact);
   box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
   backdrop-filter: blur(8px);
-  transition:
-    border-color var(--motion-duration-fast) ease,
-    transform var(--motion-duration-default) var(--motion-ease-out);
+  transition: border-color var(--motion-duration-fast) ease;
 }
 
-.step05 { top: 7.25rem; right: 2.875rem; }
-.step04 { top: 20.875rem; right: 15.625rem; }
-.step03 { top: 31.25rem; left: 48%; }
-.step02 { top: 43.125rem; left: 25%; }
-.step01 { top: 51.625rem; left: 4.375rem; }
-
-.stepNumber {
-  flex: 0 0 auto;
+.stepIcon {
+  position: absolute;
+  top: 1rem;
+  left: -3.5rem;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  background: var(--bg-raised);
   color: var(--accent-default);
-  font-size: 1.25rem;
-  font-weight: 800;
-  line-height: 1.75rem;
+  box-shadow: 0 0.375rem 1rem var(--shadow-color);
+}
+
+.stepContent {
+  min-width: 0;
 }
 
 .stepTitle {
@@ -120,15 +143,11 @@
     top: 5rem;
   }
 
-  .stepCard {
-    width: 14.375rem;
+  .stepsList {
+    top: 4.5rem;
+    right: 2rem;
+    width: min(28rem, 45vw);
   }
-
-  .step05 { top: 5.625rem; right: 2rem; }
-  .step04 { top: 18.75rem; right: 10%; }
-  .step03 { top: 30.625rem; left: 48%; }
-  .step02 { top: 43.125rem; left: 24%; }
-  .step01 { top: 53.125rem; left: 2rem; }
 }
 
 @media (max-width: 760px) {
@@ -167,12 +186,14 @@
 
   .stepsList {
     position: relative;
-    inset: auto;
+    top: auto;
+    right: auto;
     display: flex;
     flex-direction: column;
+    width: 100%;
     gap: var(--space-3);
     margin-top: 13.75rem;
-    padding-left: 1.5rem;
+    padding-left: 3.25rem;
   }
 
   .stepsList::before {
@@ -180,17 +201,12 @@
     position: absolute;
     top: 1.25rem;
     bottom: 1.25rem;
-    left: 0.5rem;
+    left: 1.125rem;
     width: 2px;
     background: var(--border-strong);
   }
 
-  .stepCard,
-  .step05,
-  .step04,
-  .step03,
-  .step02,
-  .step01 {
+  .stepCard {
     position: relative;
     inset: auto;
     width: 100%;
@@ -199,17 +215,9 @@
     backdrop-filter: blur(6px);
   }
 
-  .stepCard::before {
-    content: '';
-    position: absolute;
-    top: 1.375rem;
-    left: -1rem;
-    width: 0.625rem;
-    height: 0.625rem;
-    transform: translateX(-50%);
-    border: 3px solid var(--bg-page);
-    border-radius: 50%;
-    background: var(--accent-default);
+  .stepIcon {
+    top: 0.75rem;
+    left: -3.25rem;
   }
 }
 
@@ -226,10 +234,3 @@
   }
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .stepCard:hover {
-    border-color: var(--accent-default);
-    transform: translateY(-2px);
-  }
-}
-