HTML
<div class="depart-stage">
<div class="depart-board">
<div class="depart-headrow">
<span>Time</span><span>Flight</span><span>Destination</span><span>Term</span><span>Gate</span><span>Status</span>
</div>
<div class="depart-row">
<span class="depart-time">06:15</span>
<span class="depart-num">AA 2847</span>
<span class="depart-dest">New York <small>JFK</small></span>
<span class="depart-term">T3</span>
<span class="depart-gate">B12</span>
<span class="depart-status depart-departed">Departed</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">American Airlines</div><div class="depart-flightnum">AA 2847</div></div>
<span class="depart-badge depart-badge-departed">Departed</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">5h 22m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">JFK</div><div class="depart-city">New York</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B737-800</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">162</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Departed 06:09 · 6 min early</span><span>T3 · Gate B12</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">07:40</span>
<span class="depart-num">UA 5512</span>
<span class="depart-dest">Chicago <small>ORD</small></span>
<span class="depart-term">T7</span>
<span class="depart-gate">C04</span>
<span class="depart-status depart-ontime">On Time</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">United Airlines</div><div class="depart-flightnum">UA 5512</div></div>
<span class="depart-badge depart-badge-ontime">On Time</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">3h 55m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">ORD</div><div class="depart-city">Chicago</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A320neo</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">150</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Wi-Fi</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Boards 07:10 · Gate closes 07:25</span><span>T7 · Gate C04</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">08:20</span>
<span class="depart-num">DL 8831</span>
<span class="depart-dest">London <small>LHR</small></span>
<span class="depart-term">TB</span>
<span class="depart-gate">A22</span>
<span class="depart-status depart-boarding">Boarding</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">Delta Air Lines</div><div class="depart-flightnum">DL 8831</div></div>
<span class="depart-badge depart-badge-boarding">Boarding</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">10h 15m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">LHR</div><div class="depart-city">London</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">B767-400</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">245</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">F / J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">Yes</div></div>
</div>
<div class="depart-foot"><span>Now boarding all groups · Final call</span><span>TB · Gate A22</span></div>
</div>
</div>
<div class="depart-row">
<span class="depart-time">10:30</span>
<span class="depart-num">SQ 7736</span>
<span class="depart-dest">Singapore <small>SIN</small></span>
<span class="depart-term">TB</span>
<span class="depart-gate">B44</span>
<span class="depart-status depart-delayed">Delayed 45m</span>
<div class="depart-tip">
<div class="depart-tip-head">
<div><div class="depart-airline">Singapore Airlines</div><div class="depart-flightnum">SQ 7736</div></div>
<span class="depart-badge depart-badge-delayed">Delayed 45m</span>
</div>
<div class="depart-route">
<div class="depart-airport"><div class="depart-code">LAX</div><div class="depart-city">Los Angeles</div></div>
<div class="depart-arrow"><div class="depart-arrow-line"><div class="depart-duration">17h 30m</div></div><div class="depart-plane">→</div></div>
<div class="depart-airport"><div class="depart-code">SIN</div><div class="depart-city">Singapore</div></div>
</div>
<div class="depart-grid">
<div class="depart-cell"><div class="depart-cell-label">Aircraft</div><div class="depart-cell-val">A350-900ULR</div></div>
<div class="depart-cell"><div class="depart-cell-label">Seats</div><div class="depart-cell-val">161</div></div>
<div class="depart-cell"><div class="depart-cell-label">Class</div><div class="depart-cell-val">J / Y</div></div>
<div class="depart-cell"><div class="depart-cell-label">Meals</div><div class="depart-cell-val">2× hot</div></div>
</div>
<div class="depart-foot"><span>Late inbound aircraft · New ETD 11:15</span><span>TB · Gate B44</span></div>
</div>
</div>
</div>
</div> CSS
.depart-stage {
background: #111111;
/* Bottom room — flight detail cards drop down from each row, ~280px
tall. The board sits high so the tooltips render inside the card. */
padding: 36px 28px 320px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.depart-board {
max-width: 720px;
margin: 0 auto;
background: #181818;
border: 1px solid #2a2a2a;
border-radius: 4px;
}
.depart-headrow {
display: grid;
grid-template-columns: 60px 90px 1fr 50px 50px 90px;
padding: 10px 18px;
border-bottom: 1px solid #222;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #3a3a3a;
gap: 12px;
}
.depart-row {
display: grid;
grid-template-columns: 60px 90px 1fr 50px 50px 90px;
align-items: center;
padding: 13px 18px;
border-bottom: 1px solid #1d1d1d;
gap: 12px;
cursor: help;
position: relative;
transition: background 0.12s;
}
.depart-row:last-child { border-bottom: none; }
.depart-row:hover { background: rgba(255, 255, 255, 0.025); }
.depart-time {
font-size: 16px;
font-weight: 500;
color: #e8a020;
letter-spacing: 0.06em;
}
.depart-num { font-size: 12px; color: #8a8a8a; }
.depart-dest { font-size: 13px; color: #e0e0e0; letter-spacing: 0.02em; }
.depart-dest small { font-size: 10px; color: #444; margin-left: 6px; }
.depart-term { font-size: 12px; color: #6a6a6a; }
.depart-gate { font-size: 13px; font-weight: 500; color: #c08010; }
.depart-status { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; }
.depart-ontime { color: #30b860; }
.depart-boarding { color: #e8a020; animation: depart-blink 1.2s ease-in-out infinite; }
.depart-delayed { color: #e05030; }
.depart-departed { color: #404040; }
@keyframes depart-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.depart-tip {
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%) translateY(6px);
z-index: 100;
width: 360px;
background: #1c1c1c;
border: 1px solid #2e2e2e;
border-radius: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
overflow: hidden;
}
.depart-row:hover .depart-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.depart-tip-head {
background: #222;
padding: 13px 16px;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #2a2a2a;
}
.depart-airline { font-size: 10px; color: #5a5a5a; letter-spacing: 0.08em; }
.depart-flightnum {
font-size: 18px;
font-weight: 500;
color: #e8a020;
margin-top: 2px;
}
.depart-badge {
font-size: 9.5px;
padding: 3px 9px;
border-radius: 3px;
letter-spacing: 0.08em;
font-weight: 500;
}
.depart-badge-ontime { background: rgba(48, 184, 96, 0.12); color: #30b860; border: 1px solid rgba(48, 184, 96, 0.2); }
.depart-badge-boarding { background: rgba(232, 160, 32, 0.12); color: #e8a020; border: 1px solid rgba(232, 160, 32, 0.2); }
.depart-badge-delayed { background: rgba(224, 80, 48, 0.12); color: #e05030; border: 1px solid rgba(224, 80, 48, 0.2); }
.depart-badge-departed { background: rgba(80, 80, 80, 0.1); color: #505050; border: 1px solid #282828; }
.depart-route {
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #242424;
}
.depart-airport { text-align: center; }
.depart-code { font-size: 20px; font-weight: 500; color: #c0c0c0; letter-spacing: 0.04em; }
.depart-city { font-size: 8.5px; color: #444; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.depart-arrow {
flex: 1;
display: flex;
align-items: center;
position: relative;
}
.depart-arrow-line {
height: 1px;
flex: 1;
background: linear-gradient(to right, #2a2a2a, #3a3a3a, #2a2a2a);
position: relative;
}
.depart-duration {
font-size: 8.5px;
color: #404040;
text-align: center;
position: absolute;
top: -13px;
width: 100%;
letter-spacing: 0.08em;
}
.depart-plane { font-size: 13px; color: #505050; flex-shrink: 0; }
.depart-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid #242424;
}
.depart-cell {
padding: 9px 14px;
border-right: 1px solid #242424;
}
.depart-cell:last-child { border-right: none; }
.depart-cell-label {
font-size: 7.5px;
color: #383838;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 4px;
}
.depart-cell-val { font-size: 11.5px; color: #808080; }
.depart-foot {
padding: 9px 16px;
font-size: 8.5px;
color: #303030;
display: flex;
justify-content: space-between;
letter-spacing: 0.06em;
}