<div class="scd-time">
  <div class="scd-time__stage">
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2021</span><h3>The Beginning</h3><p>First prototype shipped to ten beta users.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2023</span><h3>Going Public</h3><p>Launched the open platform to everyone.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2025</span><h3>Scale</h3><p>Crossed one million active accounts.</p></div></div>
    <div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2026</span><h3>What&#39;s Next</h3><p>Reimagining the experience from scratch.</p></div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&family=Schibsted+Grotesk:wght@400;500&display=swap');

.scd-time, .scd-time *, .scd-time *::before, .scd-time *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-time {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#fffaf0,#f0e8dc);
  font-family: 'Schibsted Grotesk', sans-serif;
}
.scd-time__stage {
  position: relative;
  width: 340px;
  padding-left: 40px;
}
.scd-time__stage::before {
  content: '';
  position: absolute;
  left: 14px; top: 10px; bottom: 10px;
  width: 3px;
  background: linear-gradient(#ff8a5c,#a83279);
  border-radius: 3px;
}
.scd-time__node { position: relative; margin-bottom: 14px; }
.scd-time__node::before {
  content: '';
  position: absolute;
  left: -33px; top: 18px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff8a5c;
  transition: transform .35s, background .35s;
}
.scd-time__card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 8px 20px rgba(120,60,80,.12);
  transition: transform .35s cubic-bezier(.3,.9,.3,1), box-shadow .35s;
  cursor: pointer;
}
.scd-time__yr { font-family: 'Bricolage Grotesque', sans-serif; color: #a83279; font-size: .8rem; letter-spacing: .08em; }
.scd-time__card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; color: #2a2024; margin: 2px 0 4px; }
.scd-time__card p { font-size: .85rem; color: #6a5a60; }
.scd-time__node:hover .scd-time__card { transform: translateX(12px); box-shadow: 0 14px 30px rgba(120,60,80,.2); }
.scd-time__node:hover::before { transform: scale(1.3); background: #a83279; }

@media (prefers-reduced-motion: reduce) {
  .scd-time__card, .scd-time__node::before { transition: none !important; }
}