Techniques
Red second-hand sweep
The signature clock motion — a sweep that overshoots a full turn then pauses at top, like Hilfiker's impulse clock.
.clock-second {
position: absolute;
inset: 0;
margin: auto;
width: 2px;
height: 50%;
background: #EB0000;
transform-origin: bottom center;
animation: sbb-sweep 60s steps(60, end) infinite;
}
.clock-second::after {
content: "";
position: absolute;
top: 12%;
left: 50%;
width: 14px;
height: 14px;
border-radius: 9999px;
background: #EB0000;
transform: translateX(-50%);
}
@keyframes sbb-sweep {
to { transform: rotate(360deg); }
}
Hairline keyline frame
The bordered-surface idiom — flat white panels separated only by 1px black rules, no shadow.
.sbb-panel {
background: #FFFFFF;
border: 1px solid #1A1A1A;
border-radius: 0;
box-shadow: none;
}
.sbb-panel + .sbb-panel {
border-top: none; /* shared hairline, like timetable rows */
}
Signal-red lead accent
Exactly one red element per view, set against pure black-and-white to read as direction, not decoration.
.sbb-lead {
color: #EB0000;
border-left: 4px solid #EB0000;
padding-left: 12px;
font-weight: 700;
letter-spacing: -0.02em;
}