238 lines
7.4 KiB
CSS
238 lines
7.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 {
|
|
/* Brand palette lifted from zurichkotak.com */
|
|
--zk-blue: #2167ae;
|
|
--zk-blue-dark: #1a5490;
|
|
--zk-blue-deep: #1a528b;
|
|
--zk-navy: #23366f;
|
|
--zk-blue-mid: #5495cf;
|
|
--zk-blue-light: #91bfe3;
|
|
--zk-cyan: #c7ebf9;
|
|
--zk-teal: #0e7c74;
|
|
--zk-teal-ink: #0b5f59;
|
|
--zk-teal-tint: #e3f4f2;
|
|
--zk-teal-line: #a5d8d3;
|
|
--zk-good: #1f9d63;
|
|
|
|
--zk-ink: #2b2e31;
|
|
--zk-muted: #5d6162;
|
|
--zk-grey: #a6adaf;
|
|
--zk-line: #dde4e3;
|
|
--zk-line-soft: #eceeef;
|
|
--zk-tint: #f4f9fc;
|
|
--zk-tint-blue: #ebf3fb;
|
|
--zk-white: #fff;
|
|
--zk-danger: #d32f2f;
|
|
|
|
/* Amber and red accents already used for people / lapsed renewals, named so
|
|
they stop being magic hex literals scattered across four stylesheets. */
|
|
--zk-amber: #b5761f;
|
|
--zk-amber-ink: #93500f;
|
|
--zk-amber-tint: #fdf1e7;
|
|
--zk-amber-line: #f0c69a;
|
|
--zk-danger-ink: #a3261f;
|
|
--zk-danger-tint: #fdeceb;
|
|
--zk-danger-line: #f0c2bd;
|
|
|
|
/* ── Shape, depth, motion ────────────────────────────────────
|
|
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: 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);
|
|
--sh-sm: 0 1px 2px rgba(35, 54, 111, 0.05), 0 2px 6px -2px rgba(35, 54, 111, 0.07);
|
|
--sh-md: 0 1px 2px rgba(35, 54, 111, 0.05), 0 10px 24px -8px rgba(35, 54, 111, 0.14);
|
|
--sh-lg: 0 2px 6px rgba(35, 54, 111, 0.06), 0 20px 42px -14px rgba(35, 54, 111, 0.22);
|
|
|
|
--ring: 0 0 0 3px rgba(33, 103, 174, 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-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;
|
|
|
|
/* 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: '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-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;
|
|
}
|
|
}
|