Yashas
009153fc0c
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>
89 lines
2.5 KiB
CSS
89 lines
2.5 KiB
CSS
.card { max-height: min(82vh, 720px); }
|
|
|
|
.card__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding: 20px 20px 16px 22px;
|
|
border-bottom: 1px solid var(--zk-line-soft);
|
|
}
|
|
|
|
.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: 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;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 28px; height: 28px;
|
|
cursor: pointer;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--zk-muted);
|
|
}
|
|
.card__head button svg { width: 14px; height: 14px; }
|
|
.card__head button:hover { background: var(--zk-tint); color: var(--zk-ink); }
|
|
.card__head button:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
|
|
|
|
.card__body { overflow-y: auto; padding: 18px 22px 20px; }
|
|
|
|
.card__body section + section { margin-top: 20px; }
|
|
|
|
.card__body h4 {
|
|
margin: 0 0 8px;
|
|
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: 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 {
|
|
padding: 11px 13px;
|
|
border: 1px solid var(--zk-line);
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-white);
|
|
}
|
|
.card__tools code {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: var(--fs-2xs);
|
|
font-weight: 600;
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
.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. */
|
|
.card__none {
|
|
padding: 11px 13px;
|
|
border-radius: var(--r-md);
|
|
background: var(--zk-tint);
|
|
border: 1px solid var(--zk-line-soft);
|
|
}
|
|
|
|
.card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.card__kb li {
|
|
font-size: var(--fs-2xs);
|
|
padding: 4px 11px;
|
|
border-radius: var(--r-pill);
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
|
|
.card__foot {
|
|
margin-top: 20px !important;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--zk-line-soft);
|
|
font-size: var(--fs-2xs) !important;
|
|
color: var(--zk-grey) !important;
|
|
}
|