gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: a type scale, so size can carry meaning again

Browse Source 
The app had FIFTY-FOUR distinct font sizes and forty of them sat between
0.58rem and 0.95rem — a three-pixel band. The most-used size was 0.78rem, so
body copy was 12.5px. That is not a hierarchy, it is a fog of small grey text,
and it is the main reason the screen read as a decade old: nothing could be
emphasised because everything was already the same size.

Nine steps now, with real jumps. 12px is the floor and is reserved for
uppercase eyebrows — every one of the 53 declarations sitting there that was
not an eyebrow has been lifted off it. The surfaces people actually read — the
trail's entries, WhatsApp bubbles, field values, table cells — are at body size
rather than meta size.

The hairline cages are gone with them. The lead metrics and the overview KPIs
were seven equal cells in a 1px grid, every value the same size as its label,
which left the reader to do the prioritising themselves on every lead. They are
separated by whitespace now, values at 22px against 12px labels, with premium
and commission larger again: size does the prioritising instead.

Panels breathe at 32px rather than 24, radii went 10/14 -> 12/16/20, borders
dropped to the softer line, and the stage rail, the queue table and the cards
were rebuilt on the same spacing rhythm.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-08 23:36:21 +05:30
parent b27141b797
commit 009153fc0c
15 changed files with 356 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/ActivityForm.css
View File

@ -6,7 +6,7 @@
.af__loading { .af__loading {
color: var(--zk-muted); color: var(--zk-muted);
font-size: 0.86rem; font-size: var(--fs-xs);
} }
.af__grid { .af__grid {
@ -26,7 +26,7 @@
} }
.af__field > span { .af__field > span {
font-size: 0.74rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.03em; letter-spacing: 0.03em;
color: var(--zk-muted); color: var(--zk-muted);
@ -37,7 +37,7 @@
.af__req { .af__req {
font-style: normal; font-style: normal;
font-size: 0.58rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@ -51,7 +51,7 @@
.af select, .af select,
.af textarea { .af textarea {
font: inherit; font: inherit;
font-size: 0.88rem; font-size: var(--fs-xs);
padding: 10px 12px; padding: 10px 12px;
border-radius: var(--r-md); border-radius: var(--r-md);
border: 1px solid var(--zk-line); border: 1px solid var(--zk-line);
@ -100,7 +100,7 @@
.af__chip { .af__chip {
font: inherit; font: inherit;
font-size: 0.78rem; font-size: var(--fs-2xs);
padding: 6px 13px; padding: 6px 13px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
cursor: pointer; cursor: pointer;
@ -133,7 +133,7 @@
.af__submit { .af__submit {
font: inherit; font: inherit;
font-size: 0.88rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
padding: 10px 26px; padding: 10px 26px;
border-radius: var(--r-md); border-radius: var(--r-md);
@ -164,7 +164,7 @@
.af__ghost { .af__ghost {
font: inherit; font: inherit;
font-size: 0.88rem; font-size: var(--fs-xs);
padding: 10px 20px; padding: 10px 20px;
border-radius: var(--r-md); border-radius: var(--r-md);
cursor: pointer; cursor: pointer;
@ -186,7 +186,7 @@
border-left: 3px solid var(--zk-danger); border-left: 3px solid var(--zk-danger);
border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs); border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs);
padding: 12px 16px; padding: 12px 16px;
font-size: 0.84rem; font-size: var(--fs-xs);
color: var(--zk-ink); color: var(--zk-ink);
animation: zk-rise 0.2s var(--ease) both; animation: zk-rise 0.2s var(--ease) both;
} }
@ -203,13 +203,13 @@
.af__err p { .af__err p {
margin: 7px 0 0; margin: 7px 0 0;
font-size: 0.8rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
line-height: 1.55; line-height: 1.55;
} }
.af__auto { .af__auto {
font-size: 0.88rem; font-size: var(--fs-xs);
padding: 10px 12px; padding: 10px 12px;
border-radius: var(--r-md); border-radius: var(--r-md);
min-height: 41px; min-height: 41px;
@ -223,7 +223,7 @@
} }
.af__auto span { .af__auto span {
font-size: 0.58rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.09em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
@ -247,7 +247,7 @@
.ff__btn { .ff__btn {
font: inherit; font: inherit;
font-size: 0.84rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
padding: 14px 14px; padding: 14px 14px;
border-radius: var(--r-md); border-radius: var(--r-md);
@ -273,7 +273,7 @@
} }
.ff__got { .ff__got {
font-size: 0.78rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -293,7 +293,7 @@
} }
.ff__readlabel { .ff__readlabel {
font-size: 0.6rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@ -302,7 +302,7 @@
} }
.ff__read div { .ff__read div {
font-size: 0.8rem; font-size: var(--fs-2xs);
color: var(--zk-ink); color: var(--zk-ink);
} }
@ -311,11 +311,11 @@
color: var(--zk-grey); color: var(--zk-grey);
text-transform: capitalize; text-transform: capitalize;
margin-right: 6px; margin-right: 6px;
font-size: 0.72rem; font-size: var(--fs-2xs);
} }
.ff__err { .ff__err {
font-size: 0.78rem; font-size: var(--fs-2xs);
color: var(--zk-danger-ink); color: var(--zk-danger-ink);
background: var(--zk-danger-tint); background: var(--zk-danger-tint);
border: 1px solid var(--zk-danger-line); border: 1px solid var(--zk-danger-line);

18
src/components/AgentCard.css
View File

@ -8,12 +8,12 @@
border-bottom: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft);
} }
.card__disc { width: 38px !important; height: 38px !important; font-size: 0.86rem !important; flex: none; } .card__disc { width: 38px !important; height: 38px !important; font-size: var(--fs-xs) !important; flex: none; }
.card__head > div { flex: 1; min-width: 0; } .card__head > div { flex: 1; min-width: 0; }
.card__head h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 500; color: var(--zk-ink); } .card__head h3 { margin: 0 0 3px; font-size: var(--fs-md); font-weight: 500; color: var(--zk-ink); }
.card__head p { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--zk-muted); } .card__head p { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
.card__head button { .card__head button {
flex: none; flex: none;
@ -36,14 +36,14 @@
.card__body h4 { .card__body h4 {
margin: 0 0 8px; margin: 0 0 8px;
font-size: 0.64rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-grey); color: var(--zk-grey);
} }
.card__body p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--zk-muted); } .card__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--zk-muted); }
.card__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .card__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.card__tools li { .card__tools li {
@ -55,11 +55,11 @@
.card__tools code { .card__tools code {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0.78rem; font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
} }
.card__tools span { font-size: 0.81rem; line-height: 1.5; color: var(--zk-muted); } .card__tools span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
/* "No tools" is the most reassuring fact about an agent writing into an /* "No tools" is the most reassuring fact about an agent writing into an
insurance file. An empty section would read as missing data instead. */ insurance file. An empty section would read as missing data instead. */
@ -72,7 +72,7 @@
.card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.card__kb li { .card__kb li {
font-size: 0.78rem; font-size: var(--fs-2xs);
padding: 4px 11px; padding: 4px 11px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
background: var(--zk-tint-blue); background: var(--zk-tint-blue);
@ -83,6 +83,6 @@
margin-top: 20px !important; margin-top: 20px !important;
padding-top: 14px; padding-top: 14px;
border-top: 1px solid var(--zk-line-soft); border-top: 1px solid var(--zk-line-soft);
font-size: 0.75rem !important; font-size: var(--fs-2xs) !important;
color: var(--zk-grey) !important; color: var(--zk-grey) !important;
} }

6
src/components/AgentChip.css
View File

@ -8,17 +8,17 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
font-size: 0.58rem; font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: #fff; color: #fff;
user-select: none; user-select: none;
} }
.who--md .who__disc { width: 26px; height: 26px; font-size: 0.66rem; } .who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }
.who__name { .who__name {
font-size: 0.76rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-muted); color: var(--zk-muted);
white-space: nowrap; white-space: nowrap;

14
src/components/ClampText.css
View File

@ -7,7 +7,7 @@
.clamp__text { .clamp__text {
margin: 0; margin: 0;
font-size: 0.86rem; font-size: var(--fs-sm);
line-height: 1.6; line-height: 1.6;
color: var(--zk-ink); color: var(--zk-ink);
white-space: pre-wrap; white-space: pre-wrap;
@ -26,7 +26,7 @@
.clamp__more { .clamp__more {
font: inherit; font: inherit;
font-size: 0.76rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -54,7 +54,7 @@
is that the finding can be read without opening anything. */ is that the finding can be read without opening anything. */
.clamp__lead { .clamp__lead {
margin: 0; margin: 0;
font-size: 0.9rem; font-size: var(--fs-sm);
line-height: 1.5; line-height: 1.5;
color: var(--zk-ink); color: var(--zk-ink);
font-weight: 500; font-weight: 500;
@ -66,7 +66,7 @@
can be read without opening anything. */ can be read without opening anything. */
.clamp__lead { .clamp__lead {
margin: 0; margin: 0;
font-size: 0.9rem; font-size: var(--fs-sm);
line-height: 1.5; line-height: 1.5;
font-weight: 500; font-weight: 500;
color: var(--zk-ink); color: var(--zk-ink);
@ -114,7 +114,7 @@
.prose__head h3 { .prose__head h3 {
margin: 0; margin: 0;
font-size: 0.95rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
line-height: 1.35; line-height: 1.35;
color: var(--zk-ink); color: var(--zk-ink);
@ -143,7 +143,7 @@
.prose__body p { .prose__body p {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 0.875rem; font-size: var(--fs-xs);
line-height: 1.62; line-height: 1.62;
color: var(--zk-muted); color: var(--zk-muted);
white-space: pre-wrap; white-space: pre-wrap;
@ -153,7 +153,7 @@
/* The finding, kept at the top and kept emphasised: a reader who opened this /* The finding, kept at the top and kept emphasised: a reader who opened this
to check one thing should not have to find it again. */ to check one thing should not have to find it again. */
.prose__lead { .prose__lead {
font-size: 0.92rem !important; font-size: var(--fs-sm) !important;
font-weight: 500; font-weight: 500;
color: var(--zk-ink) !important; color: var(--zk-ink) !important;
padding-bottom: 12px; padding-bottom: 12px;

10
src/components/Conversation.css
View File

@ -12,7 +12,7 @@
margin: 0; margin: 0;
padding: 24px 0; padding: 24px 0;
text-align: center; text-align: center;
font-size: 0.85rem; font-size: var(--fs-xs);
color: var(--zk-grey); color: var(--zk-grey);
} }
@ -26,7 +26,7 @@
.bub p { .bub p {
margin: 0; margin: 0;
font-size: 0.86rem; font-size: var(--fs-sm);
line-height: 1.5; line-height: 1.5;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -35,7 +35,7 @@
.bub span { .bub span {
display: block; display: block;
margin-top: 4px; margin-top: 4px;
font-size: 0.66rem; font-size: var(--fs-2xs);
opacity: 0.65; opacity: 0.65;
} }
@ -57,7 +57,7 @@
margin: 0; margin: 0;
padding: 12px 22px 18px; padding: 12px 22px 18px;
border-top: 1px solid var(--zk-line-soft); border-top: 1px solid var(--zk-line-soft);
font-size: 0.72rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-grey); color: var(--zk-grey);
} }
@ -68,7 +68,7 @@
margin: 0; margin: 0;
padding: 14px 16px; padding: 14px 16px;
font: inherit; font: inherit;
font-size: 0.82rem; font-size: var(--fs-2xs);
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere; overflow-wrap: anywhere;

8
src/components/LeadFileDialog.css
View File

@ -4,7 +4,7 @@
.lfd__sub { .lfd__sub {
margin: 4px 0 0; margin: 4px 0 0;
font-size: 0.78rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -40,7 +40,7 @@
outline: none; outline: none;
background: none; background: none;
font: inherit; font: inherit;
font-size: 0.84rem; font-size: var(--fs-xs);
color: var(--zk-ink); color: var(--zk-ink);
} }
@ -48,7 +48,7 @@
.lfd__count { .lfd__count {
flex: none; flex: none;
font-size: 0.74rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@ -60,6 +60,6 @@
margin: 0; margin: 0;
padding: 44px 24px; padding: 44px 24px;
text-align: center; text-align: center;
font-size: 0.86rem; font-size: var(--fs-xs);
color: var(--zk-grey); color: var(--zk-grey);
} }

2
src/components/NewLeadDialog.css
View File

@ -5,7 +5,7 @@
.nld__sub { .nld__sub {
margin: 4px 0 0; margin: 4px 0 0;
font-size: 0.78rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
max-width: 62ch; max-width: 62ch;

34
src/components/StageRail.css
View File

@ -3,12 +3,13 @@
.rail { .rail {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: var(--sp-6);
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20px; margin-bottom: var(--sp-5);
padding: 16px 22px; padding: var(--sp-6) var(--sp-7);
border-radius: var(--r-lg); border-radius: var(--r-lg);
border: 1px solid var(--zk-line); border: 1px solid var(--zk-line-soft);
box-shadow: var(--sh-sm);
background: var(--zk-white); background: var(--zk-white);
} }
@ -27,24 +28,26 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 7px; gap: var(--sp-3);
flex: 1; flex: 1;
min-width: 0; min-width: 0;
text-align: center; text-align: center;
} }
.rail__dot { .rail__dot {
width: 11px; width: 14px;
height: 11px; height: 14px;
border-radius: 50%; border-radius: 50%;
flex: none; flex: none;
background: var(--zk-white); background: var(--zk-white);
border: 2px solid var(--zk-line); border: 2px solid var(--zk-line);
z-index: 1; z-index: 1;
transition: background var(--t-fast), border-color var(--t-fast);
} }
.rail__l { .rail__l {
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
color: var(--zk-grey); color: var(--zk-grey);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -55,7 +58,7 @@
/* The connector sits behind the dots, drawn from each step to the next. */ /* The connector sits behind the dots, drawn from each step to the next. */
.rail__bar { .rail__bar {
position: absolute; position: absolute;
top: 4.5px; top: 6px;
left: 50%; left: 50%;
width: 100%; width: 100%;
height: 2px; height: 2px;
@ -69,19 +72,24 @@
.is-here .rail__dot { .is-here .rail__dot {
background: var(--zk-blue); background: var(--zk-blue);
border-color: var(--zk-blue); border-color: var(--zk-blue);
box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.16); box-shadow: 0 0 0 5px rgba(33, 103, 174, 0.15);
}
.is-here .rail__l {
color: var(--zk-blue-dark);
font-weight: var(--fw-semi);
font-size: var(--fs-xs);
} }
.is-here .rail__l { color: var(--zk-blue-dark); font-weight: 600; }
/* Off the path — Parked, Referred, Lost, Declined. Named rather than drawn /* Off the path — Parked, Referred, Lost, Declined. Named rather than drawn
into the row: these are departures, not points every lead passes. */ into the row: these are departures, not points every lead passes. */
.rail__off { .rail__off {
flex: none; flex: none;
font-size: 0.78rem; font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--zk-amber-ink); color: var(--zk-amber-ink);
background: var(--zk-amber-tint); background: var(--zk-amber-tint);
border: 1px solid var(--zk-amber-line); border: 1px solid var(--zk-amber-line);
padding: 6px 14px; padding: var(--sp-2) var(--sp-4);
border-radius: var(--r-pill); border-radius: var(--r-pill);
} }
.rail__off.is-closed { .rail__off.is-closed {

42
src/components/Timeline.css
View File

@ -7,7 +7,7 @@
.tl__loading, .tl__loading,
.tl__err { .tl__err {
color: var(--zk-muted); color: var(--zk-muted);
font-size: 0.86rem; font-size: var(--fs-xs);
padding: 14px 2px; padding: 14px 2px;
} }
@ -17,7 +17,7 @@
.tl__item { .tl__item {
position: relative; position: relative;
padding: 0 0 18px 26px; padding: 0 0 var(--sp-6) var(--sp-7);
border-left: 2px solid var(--zk-line-soft); border-left: 2px solid var(--zk-line-soft);
} }
@ -88,13 +88,13 @@
} }
.tl__what { .tl__what {
font-size: 0.89rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
color: var(--zk-ink); color: var(--zk-ink);
} }
.tl__who { .tl__who {
font-size: 0.66rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.03em; letter-spacing: 0.03em;
padding: 3px 9px; padding: 3px 9px;
@ -119,12 +119,12 @@
} }
.tl__stage { .tl__stage {
font-size: 0.78rem; font-size: var(--fs-2xs);
color: var(--zk-blue); color: var(--zk-blue);
} }
.tl__when { .tl__when {
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
} }
@ -142,7 +142,7 @@
.tl__saylabel { .tl__saylabel {
display: block; display: block;
font-size: 0.62rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@ -152,10 +152,10 @@
.tl__say p { .tl__say p {
margin: 0; margin: 0;
font-size: 0.84rem; font-size: var(--fs-sm);
line-height: 1.55; line-height: var(--lh-normal);
color: var(--zk-muted); color: var(--zk-muted);
max-width: 78ch; max-width: 76ch;
} }
.tl__figs { .tl__figs {
@ -166,7 +166,7 @@
} }
.tl__figs span { .tl__figs span {
font-size: 0.8rem; font-size: var(--fs-2xs);
color: var(--zk-ink); color: var(--zk-ink);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
padding: 4px 11px; padding: 4px 11px;
@ -177,7 +177,7 @@
.tl__figs em { .tl__figs em {
font-style: normal; font-style: normal;
font-size: 0.68rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
text-transform: capitalize; text-transform: capitalize;
margin-right: 5px; margin-right: 5px;
@ -186,7 +186,7 @@
/* ---- system noise ---- */ /* ---- system noise ---- */
.tl__toggle { .tl__toggle {
font: inherit; font: inherit;
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
margin-bottom: 14px; margin-bottom: 14px;
@ -219,7 +219,7 @@
.tl__docshead { .tl__docshead {
display: block; display: block;
font-size: 0.74rem; font-size: var(--fs-3xs);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-transform: uppercase; text-transform: uppercase;
@ -233,7 +233,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
font-size: 0.78rem; font-size: var(--fs-2xs);
text-decoration: none; text-decoration: none;
padding: 4px 10px 4px 8px; padding: 4px 10px 4px 8px;
border-radius: var(--r-pill, 999px); border-radius: var(--r-pill, 999px);
@ -253,14 +253,14 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 0.9rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
color: #0f7b45; color: #0f7b45;
} }
.tl__wa svg { width: 15px; height: 15px; } .tl__wa svg { width: 15px; height: 15px; }
.tl__n { .tl__n {
font-size: 0.72rem; font-size: var(--fs-2xs);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--zk-muted); color: var(--zk-muted);
padding: 1px 8px; padding: 1px 8px;
@ -274,7 +274,7 @@
.tl__open { .tl__open {
font: inherit; font: inherit;
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@ -303,7 +303,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-blue); color: var(--zk-blue);
} }
@ -335,7 +335,7 @@
.tl__wrote dt { .tl__wrote dt {
flex: none; flex: none;
width: 42%; width: 42%;
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -344,7 +344,7 @@
margin: 0; margin: 0;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
font-size: 0.75rem; font-size: var(--fs-2xs);
color: var(--zk-ink); color: var(--zk-ink);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }

56
src/index.css
View File

@ -55,10 +55,11 @@
One scale, used everywhere. The palette above is untouched; every shadow One scale, used everywhere. The palette above is untouched; every shadow
below is the brand navy at low alpha, so depth reads as part of the brand below is the brand navy at low alpha, so depth reads as part of the brand
rather than as generic grey haze. */ rather than as generic grey haze. */
--r-xs: 4px; --r-xs: 6px;
--r-sm: 6px; --r-sm: 8px;
--r-md: 10px; --r-md: 12px;
--r-lg: 14px; --r-lg: 16px;
--r-xl: 20px;
--r-pill: 999px; --r-pill: 999px;
--sh-xs: 0 1px 2px rgba(35, 54, 111, 0.05); --sh-xs: 0 1px 2px rgba(35, 54, 111, 0.05);
@ -75,12 +76,57 @@
--grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-deep) 100%); --grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-deep) 100%);
--grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, var(--zk-navy) 100%); --grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, var(--zk-navy) 100%);
/* ── TYPE SCALE ───────────────────────────────────────────────
The app had FIFTY-FOUR distinct font sizes, and forty of them sat
between 0.58rem and 0.95rem — a three-pixel band. The most-used size
was 0.78rem, which is 12.5px of body copy. That is not a hierarchy;
it is a fog of small grey text, and it is exactly why the screen read
as a decade-old enterprise tool. Nothing could be emphasised, because
everything was already the same size.
Nine steps, with real jumps between them. Body sits at 15px, labels
at 14, and 12px is the FLOOR — reserved for uppercase eyebrows, never
for anything a person has to read. Size does the prioritising so the
reader does not have to. */
--fs-3xs: 0.75rem; /* 12px — uppercase eyebrows only */
--fs-2xs: 0.8125rem; /* 13px — timestamps, meta */
--fs-xs: 0.875rem; /* 14px — field labels */
--fs-sm: 0.9375rem; /* 15px — body, field values */
--fs-md: 1rem; /* 16px — emphasis */
--fs-lg: 1.125rem; /* 18px — panel titles */
--fs-xl: 1.375rem; /* 22px — section headings */
--fs-2xl: 1.75rem; /* 28px — page title */
--fs-3xl: 2.25rem; /* 36px — the one number that matters */
--lh-tight: 1.25;
--lh-snug: 1.4;
--lh-normal: 1.55;
--fw-normal: 400;
--fw-medium: 500;
--fw-semi: 600;
/* ── SPACING ──────────────────────────────────────────────────
One rhythm. Panels breathe at 24-28px rather than 14-18px, which is
the other half of why this felt cramped. */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 32px;
--sp-8: 40px;
--sp-9: 56px;
--font-zurich: 'Zurich Sans', Arial, Helvetica, sans-serif; --font-zurich: 'Zurich Sans', Arial, Helvetica, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
font-family: var(--font-zurich); font-family: var(--font-zurich);
/* The root MUST stay an absolute size — every --fs-* token is rem, so
sizing the root from one of them is circular. */
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: var(--lh-normal);
color: var(--zk-ink); color: var(--zk-ink);
background: var(--zk-tint); background: var(--zk-tint);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

20
src/layout/Shell.css
View File

@ -46,14 +46,14 @@
} }
.shell__brandtext strong { .shell__brandtext strong {
font-size: 0.95rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
letter-spacing: -0.005em; letter-spacing: -0.005em;
color: var(--zk-ink); color: var(--zk-ink);
} }
.shell__brandtext span { .shell__brandtext span {
font-size: 0.7rem; font-size: var(--fs-3xs);
font-weight: 400; font-weight: 400;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@ -88,7 +88,7 @@
.shell__navlabel { .shell__navlabel {
margin: 0 0 10px; margin: 0 0 10px;
padding: 0 10px; padding: 0 10px;
font-size: 0.64rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@ -129,7 +129,7 @@
border-radius: var(--r-md); border-radius: var(--r-md);
text-decoration: none; text-decoration: none;
color: var(--zk-muted); color: var(--zk-muted);
font-size: 0.845rem; font-size: var(--fs-xs);
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
} }
@ -246,7 +246,7 @@
margin: 0 0 8px; margin: 0 0 8px;
padding: 9px 12px; padding: 9px 12px;
border-radius: var(--r-sm); border-radius: var(--r-sm);
font-size: 14px; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
color: var(--zk-ink); color: var(--zk-ink);
text-decoration: none; text-decoration: none;
@ -272,7 +272,7 @@
padding: 1px 6px; padding: 1px 6px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
text-align: center; text-align: center;
font-size: 0.74rem; font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
@ -291,7 +291,7 @@
it is in the queue, it is not your work. */ it is in the queue, it is not your work. */
.shell__auto { .shell__auto {
font-style: normal; font-style: normal;
font-size: 0.7rem; font-size: var(--fs-2xs);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--zk-blue-mid); color: var(--zk-blue-mid);
} }
@ -324,7 +324,7 @@
} }
.shell__grouptally { .shell__grouptally {
font-size: 0.68rem; font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@ -346,7 +346,7 @@
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
padding: 0 10px 10px; padding: 0 10px 10px;
font-size: 0.64rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@ -355,7 +355,7 @@
.shell__closed > summary::-webkit-details-marker { display: none; } .shell__closed > summary::-webkit-details-marker { display: none; }
.shell__closed > summary:hover { color: var(--zk-muted); } .shell__closed > summary:hover { color: var(--zk-muted); }
.shell__closed > summary b { .shell__closed > summary b {
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0; letter-spacing: 0;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;

16
src/layout/UserMenu.css
View File

@ -40,7 +40,7 @@
place-items: center; place-items: center;
background: var(--grad-blue); background: var(--grad-blue);
color: var(--zk-white); color: var(--zk-white);
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.03em; letter-spacing: 0.03em;
box-shadow: var(--sh-xs); box-shadow: var(--sh-xs);
@ -49,7 +49,7 @@
.um__avatar--lg { .um__avatar--lg {
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size: 0.86rem; font-size: var(--fs-xs);
} }
.um__id { .um__id {
@ -60,12 +60,12 @@
} }
.um__id strong { .um__id strong {
font-size: 0.85rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
} }
.um__id > span { .um__id > span {
font-size: 0.7rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -112,12 +112,12 @@
} }
.um__headid strong { .um__headid strong {
font-size: 0.87rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
} }
.um__headid span { .um__headid span {
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -125,7 +125,7 @@
.um__headid .um__roles { .um__headid .um__roles {
margin-top: 4px; margin-top: 4px;
align-self: flex-start; align-self: flex-start;
font-size: 0.68rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
background: var(--zk-tint-blue); background: var(--zk-tint-blue);
@ -139,7 +139,7 @@
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 0.82rem; font-size: var(--fs-2xs);
padding: 10px 11px; padding: 10px 11px;
border-radius: var(--r-sm); border-radius: var(--r-sm);
background: none; background: none;

28
src/pages/Login.css
View File

@ -68,7 +68,7 @@
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
color: var(--zk-cyan); color: var(--zk-cyan);
font-size: 13px; font-size: var(--fs-2xs);
font-weight: 400; font-weight: 400;
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
@ -81,7 +81,7 @@
.login__headline { .login__headline {
/* Zurich Kotak set their hero in Zurich Sans Light */ /* Zurich Kotak set their hero in Zurich Sans Light */
margin: 26px 0 0; margin: 26px 0 0;
font-size: 44px; font-size: var(--fs-3xl);
font-weight: 300; font-weight: 300;
line-height: 1.16; line-height: 1.16;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -104,7 +104,7 @@
margin: 16px 0 0; margin: 16px 0 0;
max-width: 430px; max-width: 430px;
text-wrap: balance; text-wrap: balance;
font-size: 16px; font-size: var(--fs-md);
font-weight: 300; font-weight: 300;
line-height: 1.5; line-height: 1.5;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
@ -144,7 +144,7 @@
.login__features strong { .login__features strong {
display: block; display: block;
font-size: 15px; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
letter-spacing: 0.005em; letter-spacing: 0.005em;
} }
@ -152,7 +152,7 @@
.login__features em { .login__features em {
display: block; display: block;
margin-top: 3px; margin-top: 3px;
font-size: 14px; font-size: var(--fs-xs);
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
color: rgba(255, 255, 255, 0.74); color: rgba(255, 255, 255, 0.74);
@ -178,7 +178,7 @@
.login__title { .login__title {
margin: 0; margin: 0;
font-size: 30px; font-size: var(--fs-2xl);
font-weight: 500; font-weight: 500;
letter-spacing: -0.015em; letter-spacing: -0.015em;
color: var(--zk-navy); color: var(--zk-navy);
@ -186,7 +186,7 @@
.login__subtitle { .login__subtitle {
margin: 8px 0 0; margin: 8px 0 0;
font-size: 14px; font-size: var(--fs-xs);
font-weight: 300; font-weight: 300;
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -201,7 +201,7 @@
.login__field span { .login__field span {
display: block; display: block;
margin-bottom: 7px; margin-bottom: 7px;
font-size: 13px; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-ink); color: var(--zk-ink);
} }
@ -212,7 +212,7 @@
border: 1px solid var(--zk-line); border: 1px solid var(--zk-line);
border-radius: 8px; border-radius: 8px;
background: var(--zk-white); background: var(--zk-white);
font-size: 14px; font-size: var(--fs-xs);
font-weight: 400; font-weight: 400;
color: var(--zk-ink); color: var(--zk-ink);
transition: transition:
@ -232,7 +232,7 @@
.login__error { .login__error {
margin: -4px 0 0; margin: -4px 0 0;
font-size: 13px; font-size: var(--fs-2xs);
color: var(--zk-danger); color: var(--zk-danger);
} }
@ -247,7 +247,7 @@
border-radius: 8px; border-radius: 8px;
background: var(--zk-blue); background: var(--zk-blue);
color: var(--zk-white); color: var(--zk-white);
font-size: 14px; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: transition:
@ -277,7 +277,7 @@
.login__powered { .login__powered {
margin: 26px 0 0; margin: 26px 0 0;
text-align: center; text-align: center;
font-size: 12px; font-size: var(--fs-2xs);
font-weight: 300; font-weight: 300;
color: var(--zk-grey); color: var(--zk-grey);
} }
@ -296,11 +296,11 @@
} }
.login__headline { .login__headline {
font-size: 36px; font-size: var(--fs-3xl);
} }
.login__lede { .login__lede {
font-size: 15px; font-size: var(--fs-sm);
} }
} }

4
src/screens/Lead.jsx
View File

@ -427,12 +427,12 @@ export default function Lead() {
<strong className="lm__v">{dwell === null ? '—' : dwell === 0 ? '<1d' : dwell + 'd'}</strong> <strong className="lm__v">{dwell === null ? '—' : dwell === 0 ? '<1d' : dwell + 'd'}</strong>
<span className="lm__s">last activity {row.updated_at ? fmtWhen(row.updated_at) : '—'}</span> <span className="lm__s">last activity {row.updated_at ? fmtWhen(row.updated_at) : '—'}</span>
</div> </div>
<div className="lm"> <div className="lm lm--hero">
<span className="lm__l">Premium</span> <span className="lm__l">Premium</span>
<strong className="lm__v">{premium ?? '—'}</strong> <strong className="lm__v">{premium ?? '—'}</strong>
<span className="lm__s">{premium ? 'quoted' : 'not yet rated'}</span> <span className="lm__s">{premium ? 'quoted' : 'not yet rated'}</span>
</div> </div>
<div className="lm"> <div className="lm lm--hero">
<span className="lm__l">Commission</span> <span className="lm__l">Commission</span>
<strong className="lm__v">{commission ?? '—'}</strong> <strong className="lm__v">{commission ?? '—'}</strong>
<span className="lm__s"> <span className="lm__s">

320
src/screens/screens.css
View File

@ -9,8 +9,8 @@
.page__title { .page__title {
margin: 0; margin: 0;
font-size: 1.7rem; font-size: var(--fs-2xl);
font-weight: 500; font-weight: var(--fw-semi);
letter-spacing: -0.022em; letter-spacing: -0.022em;
line-height: 1.2; line-height: 1.2;
color: var(--zk-ink); color: var(--zk-ink);
@ -19,7 +19,7 @@
.page__sub { .page__sub {
margin: 6px 0 0; margin: 6px 0 0;
max-width: 72ch; max-width: 72ch;
font-size: 0.855rem; font-size: var(--fs-xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -40,7 +40,7 @@
} }
.page__count strong { .page__count strong {
font-size: 1.6rem; font-size: var(--fs-2xl);
font-weight: 500; font-weight: 500;
line-height: 1.1; line-height: 1.1;
color: var(--zk-blue); color: var(--zk-blue);
@ -48,7 +48,7 @@
} }
.page__count span { .page__count span {
font-size: 0.6rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@ -58,7 +58,7 @@
.empty { .empty {
margin: 0; margin: 0;
color: var(--zk-muted); color: var(--zk-muted);
font-size: 0.88rem; font-size: var(--fs-xs);
text-align: center; text-align: center;
padding: 44px 24px; padding: 44px 24px;
border-radius: var(--r-lg); border-radius: var(--r-lg);
@ -84,13 +84,13 @@
.notice p { .notice p {
margin: 0 0 6px; margin: 0 0 6px;
font-size: 0.86rem; font-size: var(--fs-xs);
color: var(--zk-muted); color: var(--zk-muted);
line-height: 1.55; line-height: 1.55;
} }
.notice__detail { .notice__detail {
font-size: 0.76rem !important; font-size: var(--fs-2xs) !important;
color: var(--zk-grey) !important; color: var(--zk-grey) !important;
} }
@ -120,7 +120,7 @@
min-width: 1000px; min-width: 1000px;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
font-size: 0.86rem; font-size: var(--fs-sm);
} }
.grid th { .grid th {
@ -128,11 +128,11 @@
top: 0; top: 0;
z-index: 1; z-index: 1;
text-align: left; text-align: left;
font-size: 0.65rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: var(--fw-semi);
letter-spacing: 0.1em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-muted); color: var(--zk-grey);
padding: 12px 16px; padding: 12px 16px;
background: var(--zk-tint); background: var(--zk-tint);
border-bottom: 1px solid var(--zk-line); border-bottom: 1px solid var(--zk-line);
@ -140,9 +140,9 @@
} }
.grid td { .grid td {
padding: 13px 16px; padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft);
vertical-align: top; vertical-align: middle;
} }
.grid tbody tr { .grid tbody tr {
@ -176,7 +176,7 @@
} }
.grid__sub { .grid__sub {
font-size: 0.76rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
margin-top: 3px; margin-top: 3px;
} }
@ -223,7 +223,7 @@
.chip { .chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 0.72rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
padding: 3px 10px; padding: 3px 10px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
@ -290,7 +290,7 @@
} }
.door strong { .door strong {
font-size: 1.02rem; font-size: var(--fs-md);
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: var(--zk-ink); color: var(--zk-ink);
@ -298,7 +298,7 @@
.door p { .door p {
margin: 0; margin: 0;
font-size: 0.82rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
line-height: 1.55; line-height: 1.55;
} }
@ -310,31 +310,32 @@
/* ---- panel ---- */ /* ---- panel ---- */
.panel { .panel {
background: var(--zk-white); background: var(--zk-white);
border: 1px solid var(--zk-line); border: 1px solid var(--zk-line-soft);
border-radius: var(--r-lg); border-radius: var(--r-lg);
box-shadow: var(--sh-sm); box-shadow: var(--sh-sm);
padding: 24px 26px; padding: var(--sp-7);
margin-bottom: 22px; margin-bottom: var(--sp-5);
} }
.panel__head { .panel__head {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: var(--sp-5);
margin-bottom: 18px; margin-bottom: var(--sp-6);
} }
.panel__title { .panel__title {
margin: 0; margin: 0;
font-size: 1.06rem; font-size: var(--fs-lg);
font-weight: 500; font-weight: var(--fw-semi);
letter-spacing: -0.012em; letter-spacing: -0.018em;
line-height: var(--lh-tight);
} }
.panel__sub { .panel__sub {
margin: 5px 0 0; margin: 5px 0 0;
font-size: 0.82rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
max-width: 62ch; max-width: 62ch;
line-height: 1.55; line-height: 1.55;
@ -377,12 +378,12 @@
} }
.act strong { .act strong {
font-size: 0.885rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
} }
.act__by { .act__by {
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -416,13 +417,13 @@
} }
.doing strong { .doing strong {
font-size: 0.95rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
} }
.doing span { .doing span {
font-size: 0.82rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
} }
@ -470,7 +471,7 @@
align-self: flex-start; align-self: flex-start;
margin-top: 9px; margin-top: 9px;
font: inherit; font: inherit;
font-size: 0.82rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
padding: 7px 15px; padding: 7px 15px;
@ -503,7 +504,7 @@
.said p { .said p {
flex: 1; flex: 1;
margin: 0; margin: 0;
font-size: 0.88rem; font-size: var(--fs-xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-ink); color: var(--zk-ink);
} }
@ -511,7 +512,7 @@
.said button { .said button {
flex: none; flex: none;
font: inherit; font: inherit;
font-size: 1.1rem; font-size: var(--fs-lg);
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
padding: 2px 6px; padding: 2px 6px;
@ -531,7 +532,7 @@
.page__stage { .page__stage {
display: block; display: block;
margin-top: 4px; margin-top: 4px;
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
} }
@ -669,14 +670,14 @@
} }
.prop dt { .prop dt {
font-size: 0.78rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
line-height: 1.45; line-height: 1.45;
} }
.prop dd { .prop dd {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: var(--fs-xs);
color: var(--zk-ink); color: var(--zk-ink);
line-height: 1.45; line-height: 1.45;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -708,7 +709,7 @@
.prop--note dt { .prop--note dt {
margin-bottom: 7px; margin-bottom: 7px;
font-size: 0.66rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.09em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
@ -731,7 +732,7 @@
.lead__stagelabel { .lead__stagelabel {
display: block; display: block;
font-size: 0.6rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
@ -739,12 +740,12 @@
} }
.lead__closed { .lead__closed {
font-size: 0.7rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
} }
.lead__stage strong { .lead__stage strong {
font-size: 0.9rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
padding: 6px 14px; padding: 6px 14px;
@ -764,7 +765,7 @@
.due { .due {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-size: 0.75rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
padding: 3px 10px; padding: 3px 10px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
@ -815,7 +816,7 @@
} }
.lead__meta dt { .lead__meta dt {
font-size: 0.6rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@ -824,7 +825,7 @@
.lead__meta dd { .lead__meta dd {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: var(--fs-xs);
color: var(--zk-ink); color: var(--zk-ink);
} }
@ -834,7 +835,7 @@
} }
.lead__meta--money dd { .lead__meta--money dd {
font-size: 1rem; font-size: var(--fs-md);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
@ -848,44 +849,56 @@
.stamp { .stamp {
flex: none; flex: none;
align-self: center; align-self: center;
font-size: 11.5px; font-size: var(--fs-3xs);
letter-spacing: .04em; letter-spacing: .04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-grey); color: var(--zk-grey);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
/* KPI strip. Tabular figures so the row does not jitter as it refreshes. */ /* KPI strip. Whitespace rather than rules — see .lmetrics for why the cage
went. Tabular figures so the row does not jitter as it refreshes. */
.kpis { .kpis {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
gap: 1px; gap: var(--sp-5) var(--sp-7);
background: var(--zk-line); padding: var(--sp-6) var(--sp-7);
border: 1px solid var(--zk-line); background: var(--zk-white);
border-radius: var(--r-md); border: 1px solid var(--zk-line-soft);
overflow: hidden; border-radius: var(--r-lg);
margin-bottom: 26px; box-shadow: var(--sh-sm);
margin-bottom: var(--sp-6);
} }
.kpi { background: var(--zk-white); padding: 16px 18px 14px; }
.kpi { min-width: 0; }
.kpi__l { .kpi__l {
display: block; display: block;
font-size: 11px; margin-bottom: var(--sp-2);
font-weight: 500; font-size: var(--fs-3xs);
letter-spacing: .07em; font-weight: var(--fw-semi);
letter-spacing: .08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-grey); color: var(--zk-grey);
} }
.kpi__v { .kpi__v {
display: block; display: block;
margin: 7px 0 3px; margin-bottom: var(--sp-1);
font-size: 26px; font-size: var(--fs-3xl);
font-weight: 400; font-weight: var(--fw-semi);
line-height: 1.05; line-height: var(--lh-tight);
color: var(--zk-navy); color: var(--zk-navy);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
letter-spacing: -.02em; letter-spacing: -.028em;
}
.kpi__s {
display: block;
font-size: var(--fs-2xs);
line-height: var(--lh-snug);
color: var(--zk-muted);
} }
.kpi__s { display: block; font-size: 12px; color: var(--zk-muted); }
/* Two columns on a desk, one on anything narrower. The distribution is the /* Two columns on a desk, one on anything narrower. The distribution is the
half that survives being pushed below the fold. */ half that survives being pushed below the fold. */
@ -896,14 +909,14 @@
align-items: baseline; align-items: baseline;
gap: 10px; gap: 10px;
margin: 0 0 12px; margin: 0 0 12px;
font-size: 12px; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: .07em; letter-spacing: .07em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-muted); color: var(--zk-muted);
} }
.split > div > .sec:not(:first-child) { margin-top: 30px; } .split > div > .sec:not(:first-child) { margin-top: 30px; }
.sec__hint { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); } .sec__hint { font-size: var(--fs-2xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); }
/* Work queues. A row rather than a card: five of them as cards is a wall. */ /* Work queues. A row rather than a card: five of them as cards is a wall. */
.qlist { display: flex; flex-direction: column; gap: 6px; } .qlist { display: flex; flex-direction: column; gap: 6px; }
@ -921,12 +934,12 @@
transition: border-color .12s, background .12s; transition: border-color .12s, background .12s;
} }
.q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); } .q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
.q__n { font-size: 20px; font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; } .q__n { font-size: var(--fs-xl); font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; }
.q__t { font-size: 14px; color: var(--zk-ink); } .q__t { font-size: var(--fs-xs); color: var(--zk-ink); }
.q__t em { display: block; font-style: normal; font-size: 12px; color: var(--zk-muted); margin-top: 1px; } .q__t em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
.q__age { font-size: 12px; color: var(--zk-grey); font-variant-numeric: tabular-nums; } .q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
.q__ro { .q__ro {
font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase;
color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: 3px; padding: 1px 5px; color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: 3px; padding: 1px 5px;
} }
/* Only a queue with work in it earns weight. The eye should land on the /* Only a queue with work in it earns weight. The eye should land on the
@ -942,8 +955,8 @@
border-radius: var(--r-sm); border-radius: var(--r-sm);
background: var(--zk-white); background: var(--zk-white);
} }
.bucket strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; } .bucket strong { display: block; font-size: var(--fs-xl); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bucket span { display: block; margin-top: 2px; font-size: 12px; color: var(--zk-muted); } .bucket span { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--zk-muted); }
.bucket--lapsed { border-left-color: var(--zk-danger); } .bucket--lapsed { border-left-color: var(--zk-danger); }
.bucket--lapsed strong { color: var(--zk-danger-ink); } .bucket--lapsed strong { color: var(--zk-danger-ink); }
.bucket--urgent { border-left-color: var(--zk-amber); } .bucket--urgent { border-left-color: var(--zk-amber); }
@ -965,7 +978,7 @@
color: inherit; color: inherit;
} }
.dist__r:hover { background: var(--zk-tint); } .dist__r:hover { background: var(--zk-tint); }
.dist__l { font-size: 12.5px; color: var(--zk-ink); } .dist__l { font-size: var(--fs-2xs); color: var(--zk-ink); }
.dist__bar { height: 6px; border-radius: 3px; background: var(--zk-line-soft); overflow: hidden; } .dist__bar { height: 6px; border-radius: 3px; background: var(--zk-line-soft); overflow: hidden; }
.dist__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; } .dist__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; }
.dist__f--needs { background: var(--zk-amber); } .dist__f--needs { background: var(--zk-amber); }
@ -973,7 +986,7 @@
.dist__f--auto { background: var(--zk-blue-light); } .dist__f--auto { background: var(--zk-blue-light); }
.dist__f--waiting { background: var(--zk-grey); } .dist__f--waiting { background: var(--zk-grey); }
.dist__f--end { background: var(--zk-line); } .dist__f--end { background: var(--zk-line); }
.dist__n { font-size: 12.5px; text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; } .dist__n { font-size: var(--fs-2xs); text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; }
.dist__r.is-zero .dist__l, .dist__r.is-zero .dist__n { color: var(--zk-grey); } .dist__r.is-zero .dist__l, .dist__r.is-zero .dist__n { color: var(--zk-grey); }
.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; } .grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
@ -989,32 +1002,65 @@
The same strip as the portfolio KPIs, at lead scale. Age and dwell time are The same strip as the portfolio KPIs, at lead scale. Age and dwell time are
computed rather than stored, and they are the two figures that answer "is computed rather than stored, and they are the two figures that answer "is
this moving?" — a question the record itself cannot answer. */ this moving?" — a question the record itself cannot answer. */
/* ── The numbers that matter ──────────────────────────────────────────────
This was a 1px-gap hairline grid — seven equal cells in a cage, every
value the same size as every label. The cage is a 2015 device and the
equality was the real fault: if nothing is bigger, the reader has to do
the prioritising themselves, seven times, on every lead.
Whitespace separates the cells now instead of rules, and the values are
22px against 12px labels. Premium and commission — the two numbers
anyone actually came for — are bigger again. */
.lmetrics { .lmetrics {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
gap: 1px; gap: var(--sp-5) var(--sp-7);
background: var(--zk-line); padding: var(--sp-6) var(--sp-7);
border: 1px solid var(--zk-line); background: var(--zk-white);
border-radius: var(--r-md); border: 1px solid var(--zk-line-soft);
overflow: hidden; border-radius: var(--r-lg);
margin-bottom: 22px; box-shadow: var(--sh-sm);
margin-bottom: var(--sp-5);
} }
.lm { background: var(--zk-white); padding: 13px 15px 12px; }
.lm { min-width: 0; }
.lm__l { .lm__l {
display: block; display: block;
font-size: 10.5px; font-weight: 500; letter-spacing: .07em; margin-bottom: var(--sp-2);
text-transform: uppercase; color: var(--zk-grey); font-size: var(--fs-3xs);
font-weight: var(--fw-semi);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--zk-grey);
} }
.lm__v { .lm__v {
display: block; margin: 6px 0 2px; display: block;
font-size: 19px; font-weight: 400; line-height: 1.1; margin-bottom: var(--sp-1);
color: var(--zk-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-size: var(--fs-xl);
font-weight: var(--fw-semi);
line-height: var(--lh-tight);
color: var(--zk-navy);
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
} }
.lm__v--sm { font-size: 16px; }
/* Money leads. Size does the prioritising so the reader does not have to. */
.lm--hero .lm__v { font-size: var(--fs-2xl); }
.lm__v--sm { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.lm__s { .lm__s {
display: block; font-size: 11.5px; color: var(--zk-muted); display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2xs);
line-height: var(--lh-snug);
color: var(--zk-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
/* The countdown carries its own tone here, the same one the queues use, so a /* The countdown carries its own tone here, the same one the queues use, so a
lapsed renewal reads the same wherever it appears. */ lapsed renewal reads the same wherever it appears. */
.lm__v.due--lapsed { color: var(--zk-danger-ink); } .lm__v.due--lapsed { color: var(--zk-danger-ink); }
@ -1039,8 +1085,8 @@
transition: background .12s, border-color .12s, box-shadow .12s; transition: background .12s, border-color .12s, box-shadow .12s;
} }
.step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 2px 10px rgba(33,103,174,.25); } .step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 2px 10px rgba(33,103,174,.25); }
.step__btn strong { display: block; font-size: 15px; font-weight: 500; } .step__btn strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
.step__btn span { display: block; margin-top: 2px; font-size: 12px; opacity: .85; } .step__btn span { display: block; margin-top: 2px; font-size: var(--fs-2xs); opacity: .85; }
.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); } .step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); }
/* Decline sits beside Clear as an equal — an underwriter is choosing between /* Decline sits beside Clear as an equal — an underwriter is choosing between
@ -1062,13 +1108,13 @@
border-radius: var(--r-sm); border-radius: var(--r-sm);
background: var(--zk-white); background: var(--zk-white);
color: var(--zk-ink); color: var(--zk-ink);
font-size: 13px; font-size: var(--fs-2xs);
cursor: pointer; cursor: pointer;
transition: border-color .12s, background .12s; transition: border-color .12s, background .12s;
} }
.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); } .alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); } .alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); }
.alt__btn em { font-style: normal; margin-left: 7px; font-size: 11.5px; color: var(--zk-grey); } .alt__btn em { font-style: normal; margin-left: 7px; font-size: var(--fs-2xs); color: var(--zk-grey); }
.alt__btn--exit { color: var(--zk-danger-ink); } .alt__btn--exit { color: var(--zk-danger-ink); }
.alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); } .alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
@ -1076,7 +1122,7 @@
.stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; } .stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; }
.stuck > summary { .stuck > summary {
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
list-style: none; list-style: none;
display: inline-flex; display: inline-flex;
@ -1084,10 +1130,10 @@
gap: 6px; gap: 6px;
} }
.stuck > summary::-webkit-details-marker { display: none; } .stuck > summary::-webkit-details-marker { display: none; }
.stuck > summary::before { content: '▸'; font-size: 10px; color: var(--zk-grey); } .stuck > summary::before { content: '▸'; font-size: var(--fs-2xs); color: var(--zk-grey); }
.stuck[open] > summary::before { content: '▾'; } .stuck[open] > summary::before { content: '▾'; }
.stuck > summary:hover { color: var(--zk-blue-dark); } .stuck > summary:hover { color: var(--zk-blue-dark); }
.stuck__why { margin: 10px 0 0; font-size: 12.5px; color: var(--zk-muted); max-width: 64ch; } .stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); max-width: 64ch; }
/* ── The row IS the control ─────────────────────────────────────────────── /* ── The row IS the control ───────────────────────────────────────────────
An "Open" button was a ~90px target inside a 1000px row that already reads An "Open" button was a ~90px target inside a 1000px row that already reads
@ -1119,7 +1165,7 @@
something is happening right now; `waiting` is steady because it is normal; something is happening right now; `waiting` is steady because it is normal;
`stalled` is red because a lead three hours into a two-minute step is the `stalled` is red because a lead three hours into a two-minute step is the
thing this console exists to catch. */ thing this console exists to catch. */
.run { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; line-height: 1.3; } .run { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); line-height: 1.3; }
.run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.run--working { color: var(--zk-blue-dark); } .run--working { color: var(--zk-blue-dark); }
@ -1150,7 +1196,7 @@
align-items: center; align-items: center;
gap: 5px; gap: 5px;
max-width: 100%; max-width: 100%;
font-size: 0.8rem; font-size: var(--fs-2xs);
text-decoration: none; text-decoration: none;
padding: 3px 10px; padding: 3px 10px;
border-radius: var(--r-pill, 999px); border-radius: var(--r-pill, 999px);
@ -1168,7 +1214,7 @@
.q__auto { .q__auto {
display: block; display: block;
font-weight: 400; font-weight: 400;
font-size: 0.72rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
margin-top: 2px; margin-top: 2px;
} }
@ -1201,7 +1247,7 @@
gap: 7px; gap: 7px;
flex: none; flex: none;
font: inherit; font: inherit;
font-size: 0.78rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
padding: 6px 12px; padding: 6px 12px;
@ -1213,7 +1259,7 @@
} }
.panel__act svg { width: 13px; height: 13px; opacity: .75; } .panel__act svg { width: 13px; height: 13px; opacity: .75; }
.panel__act b { .panel__act b {
font-size: 0.68rem; font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
padding: 1px 6px; padding: 1px 6px;
@ -1235,7 +1281,7 @@
border-bottom: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft);
} }
.crew__l { .crew__l {
font-size: 0.64rem; font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@ -1272,7 +1318,7 @@
.appr__n { .appr__n {
flex: none; flex: none;
min-width: 46px; min-width: 46px;
font-size: 1.9rem; font-size: var(--fs-2xl);
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: -0.02em; letter-spacing: -0.02em;
@ -1287,13 +1333,13 @@
gap: 3px; gap: 3px;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
font-size: 0.95rem; font-size: var(--fs-sm);
font-weight: 500; font-weight: 500;
color: var(--zk-ink); color: var(--zk-ink);
} }
.appr__t em { .appr__t em {
font-style: normal; font-style: normal;
font-size: 0.78rem; font-size: var(--fs-2xs);
font-weight: 400; font-weight: 400;
line-height: 1.45; line-height: 1.45;
color: var(--zk-muted); color: var(--zk-muted);
@ -1301,7 +1347,7 @@
.appr__go { .appr__go {
flex: none; flex: none;
font-size: 0.76rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
white-space: nowrap; white-space: nowrap;
} }
@ -1324,7 +1370,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 7px; gap: 7px;
font-size: 0.78rem; font-size: var(--fs-2xs);
color: var(--zk-muted); color: var(--zk-muted);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -1352,7 +1398,7 @@
padding: 9px 16px; padding: 9px 16px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
text-decoration: none; text-decoration: none;
font-size: 0.84rem; font-size: var(--fs-xs);
font-weight: 500; font-weight: 500;
color: var(--zk-white); color: var(--zk-white);
background: var(--grad-blue); background: var(--grad-blue);
@ -1385,7 +1431,7 @@
} }
.fgroup { .fgroup {
padding: 12px 15px 14px; padding: var(--sp-5);
border: 1px solid var(--zk-line-soft); border: 1px solid var(--zk-line-soft);
border-radius: var(--r-md); border-radius: var(--r-md);
background: var(--zk-white); background: var(--zk-white);
@ -1394,20 +1440,20 @@
.fgroup h3 { .fgroup h3 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--sp-2);
margin: 0 0 9px; margin: 0 0 var(--sp-4);
padding-bottom: 7px; padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--zk-line-soft); border-bottom: 1px solid var(--zk-line-soft);
font-size: 0.64rem; font-size: var(--fs-3xs);
font-weight: 600; font-weight: var(--fw-semi);
letter-spacing: 0.1em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
} }
.fgroup h3 span { .fgroup h3 span {
margin-left: auto; margin-left: auto;
font-size: 0.62rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
letter-spacing: 0; letter-spacing: 0;
color: var(--zk-grey); color: var(--zk-grey);
@ -1422,10 +1468,10 @@
.file360 .prop { .file360 .prop {
display: grid; display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
gap: 12px; gap: var(--sp-4);
align-items: baseline; align-items: baseline;
margin: 0; margin: 0;
padding: 3px 0; padding: var(--sp-2) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
} }
@ -1433,14 +1479,14 @@
.file360 .prop:hover { background: transparent; } .file360 .prop:hover { background: transparent; }
.file360 .prop dt { .file360 .prop dt {
font-size: 0.71rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-grey); color: var(--zk-grey);
margin: 0; margin: 0;
} }
.file360 .prop dd { .file360 .prop dd {
font-size: 0.8rem; font-size: var(--fs-2xs);
line-height: 1.5; line-height: 1.5;
color: var(--zk-ink); color: var(--zk-ink);
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -1464,7 +1510,7 @@
.fnote__l { .fnote__l {
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 0.66rem; font-size: var(--fs-3xs);
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
color: var(--zk-grey); color: var(--zk-grey);
@ -1474,7 +1520,7 @@
one fact among fifty, so it drops to body weight and two lines. */ one fact among fifty, so it drops to body weight and two lines. */
.file360 .clamp__lead, .file360 .clamp__lead,
.file360 .clamp__text { .file360 .clamp__text {
font-size: 0.78rem; font-size: var(--fs-2xs);
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
@ -1485,7 +1531,7 @@
overflow: hidden; overflow: hidden;
} }
.file360 .clamp__more { margin-top: 3px; font-size: 0.7rem; } .file360 .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
/* ── at a glance ────────────────────────────────────────────────────────── /* ── at a glance ──────────────────────────────────────────────────────────
The same card as the full file uses, so opening the drawer feels like more The same card as the full file uses, so opening the drawer feels like more
@ -1504,24 +1550,24 @@
.glance .prop { .glance .prop {
display: grid; display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
gap: 12px; gap: var(--sp-4);
align-items: baseline; align-items: baseline;
margin: 0; margin: 0;
padding: 3px 0; padding: var(--sp-2) 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
} }
.glance .prop:hover { background: transparent; } .glance .prop:hover { background: transparent; }
.glance .prop dt { font-size: 0.71rem; line-height: 1.5; color: var(--zk-grey); margin: 0; } .glance .prop dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
.glance .prop dd { font-size: 0.8rem; line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; } .glance .prop dd { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
/* Same de-weighting as the full file: at a glance a reason is one fact among /* Same de-weighting as the full file: at a glance a reason is one fact among
a dozen, not the entry it is in the trail. */ a dozen, not the entry it is in the trail. */
.glance .clamp__lead, .glance .clamp__lead,
.glance .clamp__text { .glance .clamp__text {
font-size: 0.78rem; font-size: var(--fs-2xs);
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: var(--zk-muted); color: var(--zk-muted);
@ -1532,7 +1578,7 @@
overflow: hidden; overflow: hidden;
} }
.glance .clamp__more { margin-top: 3px; font-size: 0.7rem; } .glance .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
/* An action that belongs to one card, not to the panel. Quiet until hovered: /* An action that belongs to one card, not to the panel. Quiet until hovered:
the notes above it are the answer most of the time, and the transcript is the notes above it are the answer most of the time, and the transcript is
@ -1548,7 +1594,7 @@
background: var(--zk-white); background: var(--zk-white);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 0.74rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
transition: background var(--t-fast), border-color var(--t-fast); transition: background var(--t-fast), border-color var(--t-fast);
@ -1574,7 +1620,7 @@
background: none; background: none;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
font-size: 0.82rem; font-size: var(--fs-2xs);
font-weight: 500; font-weight: 500;
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
transition: background var(--t-fast); transition: background var(--t-fast);
@ -1587,14 +1633,14 @@
.glance__all b { .glance__all b {
margin-left: auto; margin-left: auto;
font-weight: 400; font-weight: 400;
font-size: 0.74rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.panel__meta { .panel__meta {
flex: none; flex: none;
font-size: 0.74rem; font-size: var(--fs-2xs);
color: var(--zk-grey); color: var(--zk-grey);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }