console: a type scale, so size can carry meaning again
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:
parent
b27141b797
commit
009153fc0c
@ -6,7 +6,7 @@
|
||||
|
||||
.af__loading {
|
||||
color: var(--zk-muted);
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
.af__grid {
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
.af__field > span {
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--zk-muted);
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
.af__req {
|
||||
font-style: normal;
|
||||
font-size: 0.58rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@ -51,7 +51,7 @@
|
||||
.af select,
|
||||
.af textarea {
|
||||
font: inherit;
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--zk-line);
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
.af__chip {
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
padding: 6px 13px;
|
||||
border-radius: var(--r-pill);
|
||||
cursor: pointer;
|
||||
@ -133,7 +133,7 @@
|
||||
|
||||
.af__submit {
|
||||
font: inherit;
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
padding: 10px 26px;
|
||||
border-radius: var(--r-md);
|
||||
@ -164,7 +164,7 @@
|
||||
|
||||
.af__ghost {
|
||||
font: inherit;
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--r-md);
|
||||
cursor: pointer;
|
||||
@ -186,7 +186,7 @@
|
||||
border-left: 3px solid var(--zk-danger);
|
||||
border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs);
|
||||
padding: 12px 16px;
|
||||
font-size: 0.84rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-ink);
|
||||
animation: zk-rise 0.2s var(--ease) both;
|
||||
}
|
||||
@ -203,13 +203,13 @@
|
||||
|
||||
.af__err p {
|
||||
margin: 7px 0 0;
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.af__auto {
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--r-md);
|
||||
min-height: 41px;
|
||||
@ -223,7 +223,7 @@
|
||||
}
|
||||
|
||||
.af__auto span {
|
||||
font-size: 0.58rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
@ -247,7 +247,7 @@
|
||||
|
||||
.ff__btn {
|
||||
font: inherit;
|
||||
font-size: 0.84rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
padding: 14px 14px;
|
||||
border-radius: var(--r-md);
|
||||
@ -273,7 +273,7 @@
|
||||
}
|
||||
|
||||
.ff__got {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -293,7 +293,7 @@
|
||||
}
|
||||
|
||||
.ff__readlabel {
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@ -302,7 +302,7 @@
|
||||
}
|
||||
|
||||
.ff__read div {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
@ -311,11 +311,11 @@
|
||||
color: var(--zk-grey);
|
||||
text-transform: capitalize;
|
||||
margin-right: 6px;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
}
|
||||
|
||||
.ff__err {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-danger-ink);
|
||||
background: var(--zk-danger-tint);
|
||||
border: 1px solid var(--zk-danger-line);
|
||||
|
||||
@ -8,12 +8,12 @@
|
||||
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 h3 { margin: 0 0 3px; font-size: 1rem; 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 h3 { margin: 0 0 3px; font-size: var(--fs-md); font-weight: 500; color: var(--zk-ink); }
|
||||
.card__head p { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
|
||||
|
||||
.card__head button {
|
||||
flex: none;
|
||||
@ -36,14 +36,14 @@
|
||||
|
||||
.card__body h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.64rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
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 li {
|
||||
@ -55,11 +55,11 @@
|
||||
.card__tools code {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
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
|
||||
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 li {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
padding: 4px 11px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--zk-tint-blue);
|
||||
@ -83,6 +83,6 @@
|
||||
margin-top: 20px !important;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--zk-line-soft);
|
||||
font-size: 0.75rem !important;
|
||||
font-size: var(--fs-2xs) !important;
|
||||
color: var(--zk-grey) !important;
|
||||
}
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
font-size: 0.58rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #fff;
|
||||
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 {
|
||||
font-size: 0.76rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-muted);
|
||||
white-space: nowrap;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
.clamp__text {
|
||||
margin: 0;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.6;
|
||||
color: var(--zk-ink);
|
||||
white-space: pre-wrap;
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.clamp__more {
|
||||
font: inherit;
|
||||
font-size: 0.76rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -54,7 +54,7 @@
|
||||
is that the finding can be read without opening anything. */
|
||||
.clamp__lead {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-ink);
|
||||
font-weight: 500;
|
||||
@ -66,7 +66,7 @@
|
||||
can be read without opening anything. */
|
||||
.clamp__lead {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink);
|
||||
@ -114,7 +114,7 @@
|
||||
|
||||
.prose__head h3 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--zk-ink);
|
||||
@ -143,7 +143,7 @@
|
||||
|
||||
.prose__body p {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.875rem;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.62;
|
||||
color: var(--zk-muted);
|
||||
white-space: pre-wrap;
|
||||
@ -153,7 +153,7 @@
|
||||
/* 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. */
|
||||
.prose__lead {
|
||||
font-size: 0.92rem !important;
|
||||
font-size: var(--fs-sm) !important;
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink) !important;
|
||||
padding-bottom: 12px;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
margin: 0;
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.bub p {
|
||||
margin: 0;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
@ -35,7 +35,7 @@
|
||||
.bub span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 0.66rem;
|
||||
font-size: var(--fs-2xs);
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
margin: 0;
|
||||
padding: 12px 22px 18px;
|
||||
border-top: 1px solid var(--zk-line-soft);
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
@ -68,7 +68,7 @@
|
||||
margin: 0;
|
||||
padding: 14px 16px;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.lfd__sub {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
outline: none;
|
||||
background: none;
|
||||
font: inherit;
|
||||
font-size: 0.84rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
.lfd__count {
|
||||
flex: none;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@ -60,6 +60,6 @@
|
||||
margin: 0;
|
||||
padding: 44px 24px;
|
||||
text-align: center;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.nld__sub {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
max-width: 62ch;
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
.rail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
gap: var(--sp-6);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 22px;
|
||||
margin-bottom: var(--sp-5);
|
||||
padding: var(--sp-6) var(--sp-7);
|
||||
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);
|
||||
}
|
||||
|
||||
@ -27,24 +28,26 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
gap: var(--sp-3);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rail__dot {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
background: var(--zk-white);
|
||||
border: 2px solid var(--zk-line);
|
||||
z-index: 1;
|
||||
transition: background var(--t-fast), border-color var(--t-fast);
|
||||
}
|
||||
|
||||
.rail__l {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--zk-grey);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -55,7 +58,7 @@
|
||||
/* The connector sits behind the dots, drawn from each step to the next. */
|
||||
.rail__bar {
|
||||
position: absolute;
|
||||
top: 4.5px;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
@ -69,19 +72,24 @@
|
||||
.is-here .rail__dot {
|
||||
background: 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
|
||||
into the row: these are departures, not points every lead passes. */
|
||||
.rail__off {
|
||||
flex: none;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: var(--fw-medium);
|
||||
color: var(--zk-amber-ink);
|
||||
background: var(--zk-amber-tint);
|
||||
border: 1px solid var(--zk-amber-line);
|
||||
padding: 6px 14px;
|
||||
padding: var(--sp-2) var(--sp-4);
|
||||
border-radius: var(--r-pill);
|
||||
}
|
||||
.rail__off.is-closed {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
.tl__loading,
|
||||
.tl__err {
|
||||
color: var(--zk-muted);
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-xs);
|
||||
padding: 14px 2px;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
.tl__item {
|
||||
position: relative;
|
||||
padding: 0 0 18px 26px;
|
||||
padding: 0 0 var(--sp-6) var(--sp-7);
|
||||
border-left: 2px solid var(--zk-line-soft);
|
||||
}
|
||||
|
||||
@ -88,13 +88,13 @@
|
||||
}
|
||||
|
||||
.tl__what {
|
||||
font-size: 0.89rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
.tl__who {
|
||||
font-size: 0.66rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 3px 9px;
|
||||
@ -119,12 +119,12 @@
|
||||
}
|
||||
|
||||
.tl__stage {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-blue);
|
||||
}
|
||||
|
||||
.tl__when {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
|
||||
.tl__saylabel {
|
||||
display: block;
|
||||
font-size: 0.62rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@ -152,10 +152,10 @@
|
||||
|
||||
.tl__say p {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.55;
|
||||
font-size: var(--fs-sm);
|
||||
line-height: var(--lh-normal);
|
||||
color: var(--zk-muted);
|
||||
max-width: 78ch;
|
||||
max-width: 76ch;
|
||||
}
|
||||
|
||||
.tl__figs {
|
||||
@ -166,7 +166,7 @@
|
||||
}
|
||||
|
||||
.tl__figs span {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding: 4px 11px;
|
||||
@ -177,7 +177,7 @@
|
||||
|
||||
.tl__figs em {
|
||||
font-style: normal;
|
||||
font-size: 0.68rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
text-transform: capitalize;
|
||||
margin-right: 5px;
|
||||
@ -186,7 +186,7 @@
|
||||
/* ---- system noise ---- */
|
||||
.tl__toggle {
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-bottom: 14px;
|
||||
@ -219,7 +219,7 @@
|
||||
|
||||
.tl__docshead {
|
||||
display: block;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
@ -233,7 +233,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
text-decoration: none;
|
||||
padding: 4px 10px 4px 8px;
|
||||
border-radius: var(--r-pill, 999px);
|
||||
@ -253,14 +253,14 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: #0f7b45;
|
||||
}
|
||||
.tl__wa svg { width: 15px; height: 15px; }
|
||||
|
||||
.tl__n {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-muted);
|
||||
padding: 1px 8px;
|
||||
@ -274,7 +274,7 @@
|
||||
|
||||
.tl__open {
|
||||
font: inherit;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
@ -303,7 +303,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue);
|
||||
}
|
||||
@ -335,7 +335,7 @@
|
||||
.tl__wrote dt {
|
||||
flex: none;
|
||||
width: 42%;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@ -344,7 +344,7 @@
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-ink);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@ -55,10 +55,11 @@
|
||||
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
|
||||
rather than as generic grey haze. */
|
||||
--r-xs: 4px;
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
--r-xs: 6px;
|
||||
--r-sm: 8px;
|
||||
--r-md: 12px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 20px;
|
||||
--r-pill: 999px;
|
||||
|
||||
--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-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-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
|
||||
|
||||
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;
|
||||
line-height: 1.5;
|
||||
line-height: var(--lh-normal);
|
||||
color: var(--zk-ink);
|
||||
background: var(--zk-tint);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@ -46,14 +46,14 @@
|
||||
}
|
||||
|
||||
.shell__brandtext strong {
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
.shell__brandtext span {
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@ -88,7 +88,7 @@
|
||||
.shell__navlabel {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 10px;
|
||||
font-size: 0.64rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@ -129,7 +129,7 @@
|
||||
border-radius: var(--r-md);
|
||||
text-decoration: none;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -246,7 +246,7 @@
|
||||
margin: 0 0 8px;
|
||||
padding: 9px 12px;
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink);
|
||||
text-decoration: none;
|
||||
@ -272,7 +272,7 @@
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--r-pill);
|
||||
text-align: center;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-blue-dark);
|
||||
@ -291,7 +291,7 @@
|
||||
it is in the queue, it is not your work. */
|
||||
.shell__auto {
|
||||
font-style: normal;
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-blue-mid);
|
||||
}
|
||||
@ -324,7 +324,7 @@
|
||||
}
|
||||
|
||||
.shell__grouptally {
|
||||
font-size: 0.68rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@ -346,7 +346,7 @@
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 0 10px 10px;
|
||||
font-size: 0.64rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@ -355,7 +355,7 @@
|
||||
.shell__closed > summary::-webkit-details-marker { display: none; }
|
||||
.shell__closed > summary:hover { color: var(--zk-muted); }
|
||||
.shell__closed > summary b {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
place-items: center;
|
||||
background: var(--grad-blue);
|
||||
color: var(--zk-white);
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.03em;
|
||||
box-shadow: var(--sh-xs);
|
||||
@ -49,7 +49,7 @@
|
||||
.um__avatar--lg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
.um__id {
|
||||
@ -60,12 +60,12 @@
|
||||
}
|
||||
|
||||
.um__id strong {
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.um__id > span {
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
|
||||
@ -112,12 +112,12 @@
|
||||
}
|
||||
|
||||
.um__headid strong {
|
||||
font-size: 0.87rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.um__headid span {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@ -125,7 +125,7 @@
|
||||
.um__headid .um__roles {
|
||||
margin-top: 4px;
|
||||
align-self: flex-start;
|
||||
font-size: 0.68rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
background: var(--zk-tint-blue);
|
||||
@ -139,7 +139,7 @@
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--r-sm);
|
||||
background: none;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--zk-cyan);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
.login__headline {
|
||||
/* Zurich Kotak set their hero in Zurich Sans Light */
|
||||
margin: 26px 0 0;
|
||||
font-size: 44px;
|
||||
font-size: var(--fs-3xl);
|
||||
font-weight: 300;
|
||||
line-height: 1.16;
|
||||
letter-spacing: -0.01em;
|
||||
@ -104,7 +104,7 @@
|
||||
margin: 16px 0 0;
|
||||
max-width: 430px;
|
||||
text-wrap: balance;
|
||||
font-size: 16px;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
@ -144,7 +144,7 @@
|
||||
|
||||
.login__features strong {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
@ -152,7 +152,7 @@
|
||||
.login__features em {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-xs);
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
@ -178,7 +178,7 @@
|
||||
|
||||
.login__title {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--zk-navy);
|
||||
@ -186,7 +186,7 @@
|
||||
|
||||
.login__subtitle {
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 300;
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
@ -201,7 +201,7 @@
|
||||
.login__field span {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
@ -212,7 +212,7 @@
|
||||
border: 1px solid var(--zk-line);
|
||||
border-radius: 8px;
|
||||
background: var(--zk-white);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 400;
|
||||
color: var(--zk-ink);
|
||||
transition:
|
||||
@ -232,7 +232,7 @@
|
||||
|
||||
.login__error {
|
||||
margin: -4px 0 0;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-danger);
|
||||
}
|
||||
|
||||
@ -247,7 +247,7 @@
|
||||
border-radius: 8px;
|
||||
background: var(--zk-blue);
|
||||
color: var(--zk-white);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
@ -277,7 +277,7 @@
|
||||
.login__powered {
|
||||
margin: 26px 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 300;
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
@ -296,11 +296,11 @@
|
||||
}
|
||||
|
||||
.login__headline {
|
||||
font-size: 36px;
|
||||
font-size: var(--fs-3xl);
|
||||
}
|
||||
|
||||
.login__lede {
|
||||
font-size: 15px;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -427,12 +427,12 @@ export default function Lead() {
|
||||
<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>
|
||||
</div>
|
||||
<div className="lm">
|
||||
<div className="lm lm--hero">
|
||||
<span className="lm__l">Premium</span>
|
||||
<strong className="lm__v">{premium ?? '—'}</strong>
|
||||
<span className="lm__s">{premium ? 'quoted' : 'not yet rated'}</span>
|
||||
</div>
|
||||
<div className="lm">
|
||||
<div className="lm lm--hero">
|
||||
<span className="lm__l">Commission</span>
|
||||
<strong className="lm__v">{commission ?? '—'}</strong>
|
||||
<span className="lm__s">
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
|
||||
.page__title {
|
||||
margin: 0;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: -0.022em;
|
||||
line-height: 1.2;
|
||||
color: var(--zk-ink);
|
||||
@ -19,7 +19,7 @@
|
||||
.page__sub {
|
||||
margin: 6px 0 0;
|
||||
max-width: 72ch;
|
||||
font-size: 0.855rem;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
.page__count strong {
|
||||
font-size: 1.6rem;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: var(--zk-blue);
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.page__count span {
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@ -58,7 +58,7 @@
|
||||
.empty {
|
||||
margin: 0;
|
||||
color: var(--zk-muted);
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
text-align: center;
|
||||
padding: 44px 24px;
|
||||
border-radius: var(--r-lg);
|
||||
@ -84,13 +84,13 @@
|
||||
|
||||
.notice p {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.notice__detail {
|
||||
font-size: 0.76rem !important;
|
||||
font-size: var(--fs-2xs) !important;
|
||||
color: var(--zk-grey) !important;
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
min-width: 1000px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: 0.86rem;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
.grid th {
|
||||
@ -128,11 +128,11 @@
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
text-align: left;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-muted);
|
||||
color: var(--zk-grey);
|
||||
padding: 12px 16px;
|
||||
background: var(--zk-tint);
|
||||
border-bottom: 1px solid var(--zk-line);
|
||||
@ -140,9 +140,9 @@
|
||||
}
|
||||
|
||||
.grid td {
|
||||
padding: 13px 16px;
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
border-bottom: 1px solid var(--zk-line-soft);
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.grid tbody tr {
|
||||
@ -176,7 +176,7 @@
|
||||
}
|
||||
|
||||
.grid__sub {
|
||||
font-size: 0.76rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
margin-top: 3px;
|
||||
}
|
||||
@ -223,7 +223,7 @@
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--r-pill);
|
||||
@ -290,7 +290,7 @@
|
||||
}
|
||||
|
||||
.door strong {
|
||||
font-size: 1.02rem;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--zk-ink);
|
||||
@ -298,7 +298,7 @@
|
||||
|
||||
.door p {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
@ -310,31 +310,32 @@
|
||||
/* ---- panel ---- */
|
||||
.panel {
|
||||
background: var(--zk-white);
|
||||
border: 1px solid var(--zk-line);
|
||||
border: 1px solid var(--zk-line-soft);
|
||||
border-radius: var(--r-lg);
|
||||
box-shadow: var(--sh-sm);
|
||||
padding: 24px 26px;
|
||||
margin-bottom: 22px;
|
||||
padding: var(--sp-7);
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.panel__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 18px;
|
||||
gap: var(--sp-5);
|
||||
margin-bottom: var(--sp-6);
|
||||
}
|
||||
|
||||
.panel__title {
|
||||
margin: 0;
|
||||
font-size: 1.06rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.012em;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: -0.018em;
|
||||
line-height: var(--lh-tight);
|
||||
}
|
||||
|
||||
.panel__sub {
|
||||
margin: 5px 0 0;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
max-width: 62ch;
|
||||
line-height: 1.55;
|
||||
@ -377,12 +378,12 @@
|
||||
}
|
||||
|
||||
.act strong {
|
||||
font-size: 0.885rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.act__by {
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
|
||||
@ -416,13 +417,13 @@
|
||||
}
|
||||
|
||||
.doing strong {
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
}
|
||||
|
||||
.doing span {
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
@ -470,7 +471,7 @@
|
||||
align-self: flex-start;
|
||||
margin-top: 9px;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 7px 15px;
|
||||
@ -503,7 +504,7 @@
|
||||
.said p {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 0.88rem;
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
@ -511,7 +512,7 @@
|
||||
.said button {
|
||||
flex: none;
|
||||
font: inherit;
|
||||
font-size: 1.1rem;
|
||||
font-size: var(--fs-lg);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
@ -531,7 +532,7 @@
|
||||
.page__stage {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
@ -669,14 +670,14 @@
|
||||
}
|
||||
|
||||
.prop dt {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.prop dd {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-ink);
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
@ -708,7 +709,7 @@
|
||||
|
||||
.prop--note dt {
|
||||
margin-bottom: 7px;
|
||||
font-size: 0.66rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
@ -731,7 +732,7 @@
|
||||
|
||||
.lead__stagelabel {
|
||||
display: block;
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@ -739,12 +740,12 @@
|
||||
}
|
||||
|
||||
.lead__closed {
|
||||
font-size: 0.7rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
.lead__stage strong {
|
||||
font-size: 0.9rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
padding: 6px 14px;
|
||||
@ -764,7 +765,7 @@
|
||||
.due {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--r-pill);
|
||||
@ -815,7 +816,7 @@
|
||||
}
|
||||
|
||||
.lead__meta dt {
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@ -824,7 +825,7 @@
|
||||
|
||||
.lead__meta dd {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
@ -834,7 +835,7 @@
|
||||
}
|
||||
|
||||
.lead__meta--money dd {
|
||||
font-size: 1rem;
|
||||
font-size: var(--fs-md);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@ -848,44 +849,56 @@
|
||||
.stamp {
|
||||
flex: none;
|
||||
align-self: center;
|
||||
font-size: 11.5px;
|
||||
font-size: var(--fs-3xs);
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--zk-line);
|
||||
border: 1px solid var(--zk-line);
|
||||
border-radius: var(--r-md);
|
||||
overflow: hidden;
|
||||
margin-bottom: 26px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
|
||||
gap: var(--sp-5) var(--sp-7);
|
||||
padding: var(--sp-6) var(--sp-7);
|
||||
background: var(--zk-white);
|
||||
border: 1px solid var(--zk-line-soft);
|
||||
border-radius: var(--r-lg);
|
||||
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 {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .07em;
|
||||
margin-bottom: var(--sp-2);
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
.kpi__v {
|
||||
display: block;
|
||||
margin: 7px 0 3px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 1.05;
|
||||
margin-bottom: var(--sp-1);
|
||||
font-size: var(--fs-3xl);
|
||||
font-weight: var(--fw-semi);
|
||||
line-height: var(--lh-tight);
|
||||
color: var(--zk-navy);
|
||||
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
|
||||
half that survives being pushed below the fold. */
|
||||
@ -896,14 +909,14 @@
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: .07em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-muted);
|
||||
}
|
||||
.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. */
|
||||
.qlist { display: flex; flex-direction: column; gap: 6px; }
|
||||
@ -921,12 +934,12 @@
|
||||
transition: border-color .12s, background .12s;
|
||||
}
|
||||
.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__t { font-size: 14px; color: var(--zk-ink); }
|
||||
.q__t em { display: block; font-style: normal; font-size: 12px; color: var(--zk-muted); margin-top: 1px; }
|
||||
.q__age { font-size: 12px; color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
||||
.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: var(--fs-xs); color: var(--zk-ink); }
|
||||
.q__t em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
|
||||
.q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
|
||||
.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;
|
||||
}
|
||||
/* Only a queue with work in it earns weight. The eye should land on the
|
||||
@ -942,8 +955,8 @@
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--zk-white);
|
||||
}
|
||||
.bucket strong { display: block; font-size: 21px; 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 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: var(--fs-2xs); color: var(--zk-muted); }
|
||||
.bucket--lapsed { border-left-color: var(--zk-danger); }
|
||||
.bucket--lapsed strong { color: var(--zk-danger-ink); }
|
||||
.bucket--urgent { border-left-color: var(--zk-amber); }
|
||||
@ -965,7 +978,7 @@
|
||||
color: inherit;
|
||||
}
|
||||
.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__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; }
|
||||
.dist__f--needs { background: var(--zk-amber); }
|
||||
@ -973,7 +986,7 @@
|
||||
.dist__f--auto { background: var(--zk-blue-light); }
|
||||
.dist__f--waiting { background: var(--zk-grey); }
|
||||
.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); }
|
||||
|
||||
.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
|
||||
computed rather than stored, and they are the two figures that answer "is
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--zk-line);
|
||||
border: 1px solid var(--zk-line);
|
||||
border-radius: var(--r-md);
|
||||
overflow: hidden;
|
||||
margin-bottom: 22px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
|
||||
gap: var(--sp-5) var(--sp-7);
|
||||
padding: var(--sp-6) var(--sp-7);
|
||||
background: var(--zk-white);
|
||||
border: 1px solid var(--zk-line-soft);
|
||||
border-radius: var(--r-lg);
|
||||
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 {
|
||||
display: block;
|
||||
font-size: 10.5px; font-weight: 500; letter-spacing: .07em;
|
||||
text-transform: uppercase; color: var(--zk-grey);
|
||||
margin-bottom: var(--sp-2);
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
.lm__v {
|
||||
display: block; margin: 6px 0 2px;
|
||||
font-size: 19px; font-weight: 400; line-height: 1.1;
|
||||
color: var(--zk-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
|
||||
display: block;
|
||||
margin-bottom: var(--sp-1);
|
||||
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 {
|
||||
display: block; font-size: 11.5px; color: var(--zk-muted);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
display: block;
|
||||
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
|
||||
lapsed renewal reads the same wherever it appears. */
|
||||
.lm__v.due--lapsed { color: var(--zk-danger-ink); }
|
||||
@ -1039,8 +1085,8 @@
|
||||
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 strong { display: block; font-size: 15px; font-weight: 500; }
|
||||
.step__btn span { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
|
||||
.step__btn strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
|
||||
.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); }
|
||||
|
||||
/* Decline sits beside Clear as an equal — an underwriter is choosing between
|
||||
@ -1062,13 +1108,13 @@
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--zk-white);
|
||||
color: var(--zk-ink);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-2xs);
|
||||
cursor: pointer;
|
||||
transition: border-color .12s, background .12s;
|
||||
}
|
||||
.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 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: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 > summary {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
list-style: none;
|
||||
display: inline-flex;
|
||||
@ -1084,10 +1130,10 @@
|
||||
gap: 6px;
|
||||
}
|
||||
.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 > 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 ───────────────────────────────────────────────
|
||||
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;
|
||||
`stalled` is red because a lead three hours into a two-minute step is the
|
||||
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--working { color: var(--zk-blue-dark); }
|
||||
@ -1150,7 +1196,7 @@
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
max-width: 100%;
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--fs-2xs);
|
||||
text-decoration: none;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--r-pill, 999px);
|
||||
@ -1168,7 +1214,7 @@
|
||||
.q__auto {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
@ -1201,7 +1247,7 @@
|
||||
gap: 7px;
|
||||
flex: none;
|
||||
font: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 6px 12px;
|
||||
@ -1213,7 +1259,7 @@
|
||||
}
|
||||
.panel__act svg { width: 13px; height: 13px; opacity: .75; }
|
||||
.panel__act b {
|
||||
font-size: 0.68rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
padding: 1px 6px;
|
||||
@ -1235,7 +1281,7 @@
|
||||
border-bottom: 1px solid var(--zk-line-soft);
|
||||
}
|
||||
.crew__l {
|
||||
font-size: 0.64rem;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@ -1272,7 +1318,7 @@
|
||||
.appr__n {
|
||||
flex: none;
|
||||
min-width: 46px;
|
||||
font-size: 1.9rem;
|
||||
font-size: var(--fs-2xl);
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
@ -1287,13 +1333,13 @@
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--fs-sm);
|
||||
font-weight: 500;
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
.appr__t em {
|
||||
font-style: normal;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
color: var(--zk-muted);
|
||||
@ -1301,7 +1347,7 @@
|
||||
|
||||
.appr__go {
|
||||
flex: none;
|
||||
font-size: 0.76rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1324,7 +1370,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@ -1352,7 +1398,7 @@
|
||||
padding: 9px 16px;
|
||||
border-radius: var(--r-pill);
|
||||
text-decoration: none;
|
||||
font-size: 0.84rem;
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-white);
|
||||
background: var(--grad-blue);
|
||||
@ -1385,7 +1431,7 @@
|
||||
}
|
||||
|
||||
.fgroup {
|
||||
padding: 12px 15px 14px;
|
||||
padding: var(--sp-5);
|
||||
border: 1px solid var(--zk-line-soft);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--zk-white);
|
||||
@ -1394,20 +1440,20 @@
|
||||
.fgroup h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 9px;
|
||||
padding-bottom: 7px;
|
||||
gap: var(--sp-2);
|
||||
margin: 0 0 var(--sp-4);
|
||||
padding-bottom: var(--sp-3);
|
||||
border-bottom: 1px solid var(--zk-line-soft);
|
||||
font-size: 0.64rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: 0.09em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-blue-dark);
|
||||
}
|
||||
|
||||
.fgroup h3 span {
|
||||
margin-left: auto;
|
||||
font-size: 0.62rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
color: var(--zk-grey);
|
||||
@ -1422,10 +1468,10 @@
|
||||
.file360 .prop {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
gap: var(--sp-4);
|
||||
align-items: baseline;
|
||||
margin: 0;
|
||||
padding: 3px 0;
|
||||
padding: var(--sp-2) 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@ -1433,14 +1479,14 @@
|
||||
.file360 .prop:hover { background: transparent; }
|
||||
|
||||
.file360 .prop dt {
|
||||
font-size: 0.71rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-grey);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.file360 .prop dd {
|
||||
font-size: 0.8rem;
|
||||
font-size: var(--fs-2xs);
|
||||
line-height: 1.5;
|
||||
color: var(--zk-ink);
|
||||
overflow-wrap: anywhere;
|
||||
@ -1464,7 +1510,7 @@
|
||||
.fnote__l {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
font-size: 0.66rem;
|
||||
font-size: var(--fs-3xs);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
@ -1474,7 +1520,7 @@
|
||||
one fact among fifty, so it drops to body weight and two lines. */
|
||||
.file360 .clamp__lead,
|
||||
.file360 .clamp__text {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
@ -1485,7 +1531,7 @@
|
||||
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 ──────────────────────────────────────────────────────────
|
||||
The same card as the full file uses, so opening the drawer feels like more
|
||||
@ -1504,24 +1550,24 @@
|
||||
|
||||
.glance .prop {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
|
||||
gap: var(--sp-4);
|
||||
align-items: baseline;
|
||||
margin: 0;
|
||||
padding: 3px 0;
|
||||
padding: var(--sp-2) 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.glance .prop:hover { background: transparent; }
|
||||
.glance .prop dt { font-size: 0.71rem; 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 dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
|
||||
.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
|
||||
a dozen, not the entry it is in the trail. */
|
||||
.glance .clamp__lead,
|
||||
.glance .clamp__text {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--zk-muted);
|
||||
@ -1532,7 +1578,7 @@
|
||||
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:
|
||||
the notes above it are the answer most of the time, and the transcript is
|
||||
@ -1548,7 +1594,7 @@
|
||||
background: var(--zk-white);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
transition: background var(--t-fast), border-color var(--t-fast);
|
||||
@ -1574,7 +1620,7 @@
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
color: var(--zk-blue-dark);
|
||||
transition: background var(--t-fast);
|
||||
@ -1587,14 +1633,14 @@
|
||||
.glance__all b {
|
||||
margin-left: auto;
|
||||
font-weight: 400;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.panel__meta {
|
||||
flex: none;
|
||||
font-size: 0.74rem;
|
||||
font-size: var(--fs-2xs);
|
||||
color: var(--zk-grey);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user