zurich_kotak/src/index.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-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: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --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%);

  --font-zurich: 'Zurich Sans', Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  font-family: var(--font-zurich);
  font-size: 16px;
  line-height: 1.5;
  color: var(--zk-ink);
  background: var(--zk-tint);
  -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: 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 {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@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;
  }
}