Yashas
ee57184fa2
Full styling reset to the approved mockup — from scratch, no functional change. - PALETTE: clean white ground, warm near-black ink, ONE confident magenta-pink accent (#e5227f) reserved for action and active state. The accent keeps the --zk-blue-* token names it always had; only the values changed. Teal is the customer, amber a person; pink is "act / here", nothing else. Neutrals warmed, shadows softened to a plum-ink low alpha. - TYPE: Plus Jakarta Sans — geometric-humanist, bold on headings (page title 800, panel titles and figures 700+), the modern-product register assured has. - SHAPE: the flat single-canvas is gone; back to clean rounded cards that float a little on the off-white — panels, metric tiles (money in the accent tint), the stage rail, the facts rail. Status ribbon in teal, the primary action a pink pill with an accent glow. Same components, same data, same behaviour — only the surface. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
249 lines
8.4 KiB
CSS
249 lines
8.4 KiB
CSS
/* ── Zurich Kotak brand typeface ───────────────────────────── */
|
|
@font-face {
|
|
font-family: 'Zurich Sans';
|
|
src: url('./assets/fonts/ZurichSans-Light.otf') format('opentype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Zurich Sans';
|
|
src: url('./assets/fonts/ZurichSans-Regular.otf') format('opentype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: 'Zurich Sans';
|
|
src: url('./assets/fonts/ZurichSans-Medium.otf') format('opentype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
/* ── PALETTE — assured-inspired ──────────────────────────────
|
|
A clean white ground, warm near-black ink, and ONE confident accent:
|
|
a magenta-pink, reserved for action and active state. The token names
|
|
keep their history (the accent still lives under the --zk-blue-* names
|
|
the whole app references), but the values are the new scheme. Teal is
|
|
the customer, amber a person; the pink is "act / here", nothing else. */
|
|
--zk-blue: #e5227f; /* THE ACCENT (was brand blue) — pink */
|
|
--zk-blue-dark: #c30f68;
|
|
--zk-blue-deep: #c30f68;
|
|
--zk-navy: #2a1d3d; /* a deep plum-ink for the logo / darkest text */
|
|
--zk-blue-mid: #ee5fa0;
|
|
--zk-blue-light: #f6cfe3; /* pink hairline / ring */
|
|
--zk-cyan: #fdebf4; /* pink-soft */
|
|
--zk-teal: #0e9e8f;
|
|
--zk-teal-ink: #0a6b60;
|
|
--zk-teal-tint: #e2f5f2;
|
|
--zk-teal-line: #bfe6e1;
|
|
--zk-good: #18a558;
|
|
|
|
--zk-ink: #1c1626; /* warm near-black */
|
|
--zk-muted: #645d72;
|
|
--zk-grey: #a49dae;
|
|
--zk-line: #e3e1ea;
|
|
--zk-line-soft: #ececf1;
|
|
--zk-tint: #faf9fb; /* off-white section ground */
|
|
--zk-sunk: #f5f3f8; /* a touch deeper — hover / inset */
|
|
--zk-tint-blue: #fdebf4; /* pink-soft (was tint-blue) */
|
|
--zk-white: #fff;
|
|
--zk-danger: #d64545;
|
|
|
|
--zk-amber: #c77d1a;
|
|
--zk-amber-ink: #9a5d10;
|
|
--zk-amber-tint: #fbf0dd;
|
|
--zk-amber-line: #ecd3a3;
|
|
--zk-danger-ink: #b23636;
|
|
--zk-danger-tint: #fbeaea;
|
|
--zk-danger-line: #f0c9c9;
|
|
|
|
/* ── Shape, depth, motion ────────────────────────────────────
|
|
Rounder than before and softer shadows — the assured cards read as
|
|
objects that float a little, on a warm plum-ink low alpha rather than
|
|
generic grey haze. */
|
|
--r-xs: 8px;
|
|
--r-sm: 10px;
|
|
--r-md: 14px;
|
|
--r-lg: 18px;
|
|
--r-xl: 22px;
|
|
--r-pill: 999px;
|
|
|
|
--sh-xs: 0 1px 2px rgba(28, 22, 38, 0.04);
|
|
--sh-sm: 0 1px 2px rgba(28, 22, 38, 0.04), 0 4px 14px -8px rgba(28, 22, 38, 0.10);
|
|
--sh-md: 0 1px 2px rgba(28, 22, 38, 0.04), 0 8px 24px -10px rgba(28, 22, 38, 0.12);
|
|
--sh-lg: 0 2px 6px rgba(28, 22, 38, 0.06), 0 24px 48px -16px rgba(28, 22, 38, 0.22);
|
|
--sh-accent: 0 6px 20px -6px rgba(229, 34, 127, 0.42);
|
|
|
|
--ring: 0 0 0 3px rgba(229, 34, 127, 0.16);
|
|
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--t-fast: 0.14s var(--ease);
|
|
--t: 0.2s var(--ease);
|
|
|
|
--grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-dark) 100%);
|
|
--grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, #a80c59 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. */
|
|
/* Shifted up one notch after an audit found 124 of ~200 sizings sitting at
|
|
12-13px — the "meta" tier had quietly become the body size, so the whole
|
|
app read tiny and uniform with nothing for the eye to land on. Body is 14
|
|
now, values 15, emphasis 16; 12px stays for uppercase eyebrows only. */
|
|
--fs-3xs: 0.75rem; /* 12px — uppercase eyebrows only */
|
|
--fs-2xs: 0.875rem; /* 14px — was 13; the app's dominant size, now comfortable */
|
|
--fs-xs: 0.9375rem; /* 15px — field labels */
|
|
--fs-sm: 1rem; /* 16px — body, field values */
|
|
--fs-md: 1.0625rem; /* 17px — 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;
|
|
--fw-bold: 700;
|
|
--fw-x: 800;
|
|
|
|
/* ── 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;
|
|
|
|
/* Display and body are the SAME brand face — Zurich Sans has no bold,
|
|
so headings and figures lean on weight 500 and tighter tracking, set per
|
|
use, not on a second family. */
|
|
--font-display: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
|
|
--font-zurich: 'Plus Jakarta Sans', 'Geist', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 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: var(--lh-normal);
|
|
color: var(--zk-ink);
|
|
/* ONE CANVAS. The app used to be white cards floating on a grey-blue
|
|
ground — the generic admin-template look. The content ground is white
|
|
now; the sidebar is the only tinted surface, and sections are separated
|
|
by hairlines and space rather than boxed in shadowed cards. */
|
|
background: var(--zk-white);
|
|
-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-white);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/* One focus treatment for the whole console: a soft brand ring, never the
|
|
browser's default outline halfway through a card's rounded corner. */
|
|
:focus-visible {
|
|
outline: 2px solid var(--zk-blue);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--zk-tint-blue);
|
|
color: var(--zk-blue-dark);
|
|
}
|
|
|
|
/* Scrollbars, toned to the palette. Chrome/Safari take the ::-webkit rules,
|
|
Firefox the standard properties. */
|
|
* {
|
|
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 translateY here promoted every element it touched to a GPU
|
|
layer, and text composited on a transformed layer renders blurry in Chrome
|
|
on Linux — which made the whole app look soft. The fade alone gives the
|
|
entrance without ever moving text onto a fractional-pixel layer. */
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes zk-shimmer {
|
|
from { background-position: -420px 0; }
|
|
to { background-position: 420px 0; }
|
|
}
|
|
|
|
/* Motion is decoration here — every animation is an entrance or a hover, so
|
|
dropping them costs nothing. */
|
|
@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;
|
|
}
|
|
}
|