/* ═══════════════════════════════════════════════════════════════════════════
PUNCH CLOCK — Lucian Labs look C
LED readout bolted to a steel box. One number rules the screen, and a
binary state says whether it's moving. Shipped in Time Warrior
(web + SwiftUI menu-bar app — see apps/mac Theme.swift for the native port).
Spec: https://lucianlabs.ca/branding/punch-clock.md
Rules: https://lucianlabs.ca/branding/AGENT.md
Fonts (add to ):
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* surfaces — flat and opaque. Nothing here is translucent or blurred. */
--bg: #0e0e10;
--panel: #1a1a1e;
--panel-2: #232329; /* inputs and neutral buttons sit one step up */
--line: #33333a;
/* ink */
--ink: #ededf0;
--dim: #666666;
--muted: var(--dim);
/* signals — these are semantic, not decorative. See the spec. */
--green: #3fcc60; /* money, running, yours-to-keep */
--red: #cc4040; /* stop, punch out, delete */
--cyan: #5fb5ff; /* focus and interactive affordance */
--orange: #cc8020; /* warning, held back, owed */
--accent: var(--green);
/* form */
--border: 2px; /* not a hairline — this look is chunky on purpose */
--radius: 0;
/* type */
--font-display: 'Micro 5', monospace; /* every numeral in the product */
--font-body: 'Finlandica', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: 'Inconsolata', 'IBM Plex Mono', monospace;
}
/* Square corners are load-bearing, same as Console. The one exception is the
live orb, which opts back in explicitly. */
* {
box-sizing: border-box;
border-radius: 0 !important;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
padding: 24px 20px 60px;
}
.wrap { max-width: 760px; margin: 0 auto; }
/* ── type ────────────────────────────────────────────────────────────────── */
/* Every number the user watches is Micro 5, tabular. Never body sans. */
.m5 {
font-family: var(--font-display);
letter-spacing: 0.02em;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* Section headings are dim, tracked, lowercase — not big and bold. */
h2 {
font-size: 13px;
letter-spacing: 0.14em;
color: var(--dim);
font-weight: 600;
margin: 28px 0 8px;
}
.brand { font-size: 13px; letter-spacing: 0.18em; color: var(--dim); }
.lab { font-size: 10px; letter-spacing: 0.04em; color: var(--dim); margin-bottom: 3px; }
.tiny { font-size: 11px; color: var(--dim); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--dim); }
a { color: var(--cyan); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
/* ── the hero readout ────────────────────────────────────────────────────── */
/* One per screen. If two numbers are this big, neither is the headline. */
.hero { text-align: center; padding: 12px 0 4px; }
.hero .lab { font-size: 12px; letter-spacing: 0.16em; margin-bottom: 6px; }
.hero .figure {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: 84px;
line-height: 0.9;
color: var(--green);
}
.hero .sub { font-size: 12px; color: var(--dim); margin-top: 10px; }
@media (max-width: 640px) {
.hero .figure { font-size: 60px; }
}
/* ── panels & tiles ──────────────────────────────────────────────────────── */
.panel,
.tile {
background: var(--panel);
border: var(--border) solid var(--line);
padding: 10px 8px;
}
.tile .val { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.tile .val.keep { color: var(--green); }
.tile .val.owed { color: var(--orange); }
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 8px;
}
/* ── buttons ─────────────────────────────────────────────────────────────── */
/* Neutral until hover, where the button and its border take the accent. */
.btn {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: var(--panel-2);
border: var(--border) solid var(--line);
padding: 8px 11px;
cursor: pointer;
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.btn:hover { color: var(--cyan); border-color: var(--cyan); }
.btn:focus { outline: none; border-color: var(--cyan); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.stop:hover { color: var(--red); border-color: var(--red); }
/* Solid = the committing action. Near-black label on a signal fill. */
.btn.solid {
color: #0b0b0e;
border-color: transparent;
background: var(--green);
}
.btn.solid.stop { background: var(--red); }
.btn.solid:hover { filter: brightness(1.08); color: #0b0b0e; }
/* The big one. Full width, tracked, unmissable. */
.punch {
display: block;
width: 100%;
font-family: var(--font-body);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.1em;
padding: 16px;
border: none;
cursor: pointer;
transition: opacity 150ms ease;
}
.punch.in { background: var(--green); color: #04140a; }
.punch.out { background: var(--red); color: #150404; }
/* Press feedback: this look presses down. See "motion" in the spec — it is
the one house look where a transform on :active is correct. */
.punch:active { transform: scale(0.96); opacity: 0.85; }
/* ── forms ───────────────────────────────────────────────────────────────── */
input, select, textarea {
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
background: var(--panel-2);
border: var(--border) solid var(--line);
padding: 8px 10px;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--cyan);
}
::placeholder { color: var(--dim); }
/* ── tables ──────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: var(--border) solid var(--line); }
th { color: var(--dim); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td {
font-weight: 600;
color: var(--ink);
border-top: var(--border) solid var(--line);
border-bottom: none;
}
/* ── the live pixel ──────────────────────────────────────────────────────── */
/* A breathing square marks anything currently on the clock. Square, never a
dot — the round orb below is the only circle in the look. */
.pulse {
display: inline-block;
width: 8px;
height: 8px;
background: var(--green);
vertical-align: middle;
margin-right: 7px;
animation: pulse-breathe 0.9s ease-in-out infinite alternate;
}
@keyframes pulse-breathe {
from { opacity: 0.35; }
to { opacity: 1; }
}
/* The attention orb — the single deliberate circle. Use at most one. */
.orb {
position: fixed;
top: 16px;
right: 16px;
width: 13px;
height: 13px;
border-radius: 50% !important;
background: var(--green);
cursor: pointer;
z-index: 100;
}
.orb.pinging::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50% !important;
background: var(--green);
animation: orb-ping 1.7s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes orb-ping {
0% { transform: scale(1); opacity: 0.65; }
80%, 100% { transform: scale(2.9); opacity: 0; }
}
.orb.done { background: var(--dim); }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
.punch:active { transform: none; }
}