HTML
<div class="tl17-scene">
<div class="tl17-wrap">
<div class="tl17-track" aria-hidden="true"><div class="tl17-track-fill"></div></div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q1</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jan — Mar 2025</span>
<span class="tl17-status tl17-done">Complete</span>
</div>
<h3 class="tl17-name">Core Infrastructure</h3>
<p class="tl17-text">Database sharding, API gateway redesign, and global CDN rollout completed 12 days ahead of schedule.</p>
<div class="tl17-progress-label"><span>Infrastructure</span><span>100%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q2</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Apr — Jun 2025</span>
<span class="tl17-status tl17-done">Complete</span>
</div>
<h3 class="tl17-name">Mobile Application</h3>
<p class="tl17-text">iOS and Android apps launched simultaneously. 4.8-star App Store rating within the first month of public availability.</p>
<div class="tl17-progress-label"><span>Mobile</span><span>100%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q3</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jul — Sep 2025</span>
<span class="tl17-status tl17-active">In Progress</span>
</div>
<h3 class="tl17-name">AI Integration Layer</h3>
<p class="tl17-text">Embedding the new intelligence pipeline into all major product surfaces. Search, recommendations, and auto-summarization on track.</p>
<div class="tl17-progress-label"><span>AI Layer</span><span>67%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:67%"></div></div>
</div>
</div>
<div class="tl17-row">
<div class="tl17-aside">
<div class="tl17-circle">Q4</div>
<div class="tl17-connector"></div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Oct — Dec 2025</span>
<span class="tl17-status tl17-plan">Planned</span>
</div>
<h3 class="tl17-name">Enterprise Platform</h3>
<p class="tl17-text">SSO, audit logging, custom data residency, and dedicated onboarding for Fortune 500 accounts entering the pipeline.</p>
<div class="tl17-progress-label"><span>Enterprise</span><span>12%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:12%"></div></div>
</div>
</div>
<div class="tl17-row tl17-last">
<div class="tl17-aside">
<div class="tl17-circle">Q1</div>
</div>
<div class="tl17-card">
<div class="tl17-top">
<span class="tl17-when">Jan — Mar 2026</span>
<span class="tl17-status tl17-plan">Planned</span>
</div>
<h3 class="tl17-name">Global Expansion</h3>
<p class="tl17-text">Localization into 14 new markets, regional data centers in Southeast Asia and South America, and a dedicated partner ecosystem.</p>
<div class="tl17-progress-label"><span>Expansion</span><span>0%</span></div>
<div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:0%"></div></div>
</div>
</div>
</div>
</div> CSS
.tl17-scene {
--tl17-bg: #0d0d10;
--tl17-accent: #e05c1a;
background: var(--tl17-bg);
padding: 2.5rem 1.5rem;
font-family: 'Inter', system-ui, sans-serif;
}
.tl17-wrap {
max-width: 720px;
margin: 0 auto;
position: relative;
}
.tl17-track {
position: absolute;
left: 24px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(255,255,255,0.06);
}
.tl17-track-fill {
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, var(--tl17-accent), rgba(224,92,26,0));
animation: tl17-track 2s ease forwards;
}
@keyframes tl17-track {
from { height: 0; }
to { height: 85%; }
}
.tl17-row {
display: flex;
gap: 1.5rem;
align-items: flex-start;
position: relative;
}
.tl17-aside {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
}
.tl17-circle {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(224,92,26,0.12);
border: 1px solid rgba(224,92,26,0.3);
display: flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, monospace;
font-size: 12.5px;
font-weight: 500;
color: var(--tl17-accent);
flex-shrink: 0;
position: relative;
z-index: 2;
transition: background 0.3s, box-shadow 0.3s;
}
.tl17-row:hover .tl17-circle {
background: rgba(224,92,26,0.25);
box-shadow: 0 0 20px rgba(224,92,26,0.3);
}
.tl17-connector {
width: 2px;
flex: 1;
background: linear-gradient(to bottom, rgba(224,92,26,0.3), transparent);
min-height: 30px;
}
.tl17-card {
flex: 1;
margin-bottom: 1.5rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 1.25rem;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.tl17-row:hover .tl17-card {
background: rgba(255,255,255,0.07);
border-color: rgba(224,92,26,0.25);
transform: translateX(4px);
}
.tl17-last .tl17-card { margin-bottom: 0; }
.tl17-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.7rem;
}
.tl17-when {
font-family: ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 1.5px;
color: var(--tl17-accent);
text-transform: uppercase;
}
.tl17-status {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 99px;
white-space: nowrap;
}
.tl17-done { background: rgba(26,122,74,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.tl17-active { background: rgba(224,92,26,0.2); color: var(--tl17-accent); border: 1px solid rgba(224,92,26,0.3); }
.tl17-plan { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }
.tl17-name {
font-size: 1rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.4rem;
}
.tl17-text {
font-size: 12.5px;
color: rgba(255,255,255,0.45);
line-height: 1.65;
margin: 0 0 0.9rem;
}
.tl17-progress-label {
display: flex;
justify-content: space-between;
font-family: ui-monospace, monospace;
font-size: 10px;
color: rgba(255,255,255,0.3);
margin-bottom: 0.35rem;
}
.tl17-progress-bar {
height: 3px;
background: rgba(255,255,255,0.07);
border-radius: 2px;
overflow: hidden;
}
.tl17-progress-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--tl17-accent), #f97316);
transition: width 1s ease;
}
@media (prefers-reduced-motion: reduce) {
.tl17-track-fill { animation: none; height: 85%; }
}