gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
607693a04a
zurich_kotak/src/index.css
Yashas 79863e2a5f console: the Lead Desk redesign — one colour rule for who holds the work 
Implements the design in zurich-kotak-leaddesk across every screen.

Foundation: Source Sans 3 bundled from src/assets/fonts (no Google Fonts
request), 15px root, navy/blue/amber/teal/red palette where blue is the AI,
amber a person, teal the customer and red is reserved for risk; flat white
10px cards on a grey canvas, no shadows.

Shell: 56px navy masthead (Z wordmark, Lead Desk, user), 232px white nav
grouped Needs you / Scheduled / History with coloured count pills and the
closed stages folded.

Overview: the hero says who holds each open lead (stacked bar + legend)
beside the renewals-at-risk card; five KPIs incl. Closed to date; Waiting
on a person queue with owner dots and "N more with the AI"; Pipeline by
stage with owner-coloured bars; Renewal exposure with tabs, dropdown
filters and a Holding it column.

Lead: back button, id line, holder pill; one attention banner (amber your
turn / blocked, red stalled, blue with the AI, teal with the customer) that
carries its button; four facts with a confidence bar; navy steps rail
whose current step takes its holder's colour; timeline as an avatar
gutter with title, stage pill, by-line + AI tag and text-link actions
(See reasoning · N steps, Hear the call, Open thread); side column flows.

Lists: card with search + hide-closed toggle, columns Customer / Stage /
Renewal due / Holding it / Premium / Last activity, stalled rows get a red
inset, closed rows dim, person-gated queues split into Your turn / With the
AI group rows.

src/api/holder.js is the single rule for holder tone + label so the table
cells, the overview and the lead header cannot disagree.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-09 23:56:29 +05:30

178 lines
6.7 KiB
CSS
Raw Blame History

/* ── Typeface: Source Sans 3, self-hosted ───────────────────────────────────
Bundled from src/assets so Vite resolves the URLs under the sub-path mount;
an absolute /fonts/ path would 404 behind the BASE_HREF rewrite. */
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap;
src: url('./assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'),
url('./assets/fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 500; font-display: swap;
src: url('./assets/fonts/source-sans-3-latin-500-normal.woff2') format('woff2'),
url('./assets/fonts/source-sans-3-latin-ext-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-display: swap;
src: url('./assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'),
url('./assets/fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap;
src: url('./assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'),
url('./assets/fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2'); }
:root {
/* ── PALETTE — Lead Desk redesign ───────────────────────────────────────
Colour MEANS something here, and the meaning is fixed on every screen:
blue = the AI holds it amber = a person holds it
teal = the customer holds it red = risk, and nothing else
Navy is the masthead and the brand; blue is the one action colour.
The token NAMES keep their history — the whole app references --zk-blue
and friends — so remapping the values here re-themes every surface. */
--zk-navy: #0B2A5B;
--zk-navy-2: #12386F;
--zk-blue: #1F55A6; /* primary action; "with the AI" */
--zk-blue-dark: #12386F;
--zk-blue-deep: #0B2A5B;
--zk-blue-mid: #4E7FC4;
--zk-blue-light: #C3D3EC; /* hairline / ring */
--zk-cyan: #E4ECF9; /* blue-soft */
--zk-tint-blue: #E4ECF9; /* blue-soft */
--zk-teal: #137A66; /* the customer; issued */
--zk-teal-ink: #0F6353;
--zk-teal-tint: #DDF1EC;
--zk-teal-line: #B8DDD3;
--zk-good: #137A66;
--zk-amber: #A86A0B; /* a person holds it */
--zk-amber-ink: #8A5609;
--zk-amber-tint: #FBF0DC;
--zk-amber-line: #EAD6AE;
--zk-amber-bar: #D99A2B; /* the brighter amber for bars and legends */
--zk-danger: #C8102E; /* Kotak red: risk only */
--zk-danger-ink: #A30D25;
--zk-danger-tint: #FBE7EA;
--zk-danger-line: #F1C5CC;
--zk-ink: #152238;
--zk-muted: #4B5A72; /* ink-2 */
--zk-grey: #7A8699; /* ink-3 */
--zk-line: #D9DFE9;
--zk-line-soft: #E9EDF3;
--zk-tint: #F2F4F8; /* the canvas */
--zk-sunk: #E9EDF3;
--zk-white: #FFFFFF;
--zk-card: #FFFFFF;
/* ── Shape ────────────────────────────────────────────────────────────
Flat. Cards are white on the grey canvas with a 1px line and a 10px
radius; nothing floats, nothing casts a shadow. */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 10px;
--r-xl: 12px;
--r-pill: 999px;
--sh-xs: none;
--sh-sm: none;
--sh-md: none;
--sh-lg: 0 12px 32px -12px rgba(21, 34, 56, 0.28); /* dialogs only */
--sh-accent: none;
--ring: 0 0 0 3px rgba(31, 85, 166, 0.18);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 0.14s var(--ease);
--t: 0.2s var(--ease);
--grad-blue: var(--zk-blue);
--grad-blue-hover: var(--zk-navy-2);
/* ── TYPE SCALE — on a 15px root, so the rem steps land on the design's
pixel sizes: 12.5 eyebrows, 13.5 small, 14 labels, 15 body, 17 card
titles, 20 tab figures, 28 page title / KPI, 44 the one risk number. */
--fs-3xs: 0.8333rem; /* 12.5px — uppercase eyebrows, table heads */
--fs-2xs: 0.9rem; /* 13.5px — meta, pills, secondary lines */
--fs-xs: 0.9333rem; /* 14px — labels */
--fs-sm: 1rem; /* 15px — body */
--fs-md: 1.0667rem; /* 16px — emphasis */
--fs-lg: 1.1333rem; /* 17px — card titles */
--fs-xl: 1.3333rem; /* 20px — tab figures, small headings */
--fs-2xl: 1.8667rem; /* 28px — page title, KPI figures */
--fs-3xl: 2.9333rem; /* 44px — renewals at risk */
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-normal: 1.4;
--fw-normal: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--fw-x: 700;
--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-display: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--font-zurich: 'Source Sans 3', system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-family: var(--font-zurich);
/* Absolute on purpose: every --fs-* token is rem and sizing the root from
one of them would be circular. */
font-size: 15px;
line-height: var(--lh-normal);
color: var(--zk-ink);
background: var(--zk-tint);
font-feature-settings: 'tnum' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; background: var(--zk-tint); }
button, input, select, textarea { font: inherit; color: inherit; }
/* One focus treatment for the whole console. */
:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
::selection { background: var(--zk-tint-blue); color: var(--zk-navy); }
* { scrollbar-width: thin; scrollbar-color: var(--zk-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
border: 3px solid transparent; border-radius: var(--r-pill);
background-clip: content-box; background-color: var(--zk-line);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--zk-grey); }
@keyframes zk-rise {
/* Opacity only — a transform here composites text onto a GPU layer and it
renders soft in Chrome on Linux. */
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zk-shimmer {
from { background-position: -420px 0; }
to { background-position: 420px 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
Reference in New Issue View Git Blame Copy Permalink