/* ============================================================================= Rep Pipeline — Design tokens ----------------------------------------------------------------------------- The palette is derived directly from the Wholesale Payments logo mark, whose three bars run cyan -> blue and cyan -> jade: #2FBCDA cyan (top of every bar) #35A3CF azure #3A6BB2 deep blue (foot of the tall bar) #59B68B jade #48A07D deep jade (foot of the wide bar) #328038 mint @47% (the translucent bars) Those hues span H 156deg -> 216deg. Everything in the UI lives inside that band: the neutrals are tinted toward the blue end rather than being pure grey, and the saturated end of the ramp is spent only on hairlines, rails, dots, meters and focus rings -- never on large filled areas. ========================================================================== */ :root { color-scheme: light dark; /* --- Brand ------------------------------------------------------------- */ --brand-cyan: #2FBCDA; --brand-azure: #35A3CF; --brand-blue: #3A6BB2; --brand-blue-deep: #2563AC; --brand-jade: #59B68B; --brand-jade-deep: #48A07D; --brand-mint: #328038; /* The signature gradient. Used at low opacity for hairlines and rails, at full strength only inside the logo, meters and micro-charts. */ --brand-sweep: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-azure) 28%, var(--brand-blue) 58%, var(--brand-jade) 100%); --brand-sweep-v: linear-gradient(180deg, var(--brand-cyan) 0%, var(--brand-azure) 30%, var(--brand-blue) 100%); --brand-sweep-jade: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-jade) 70%, var(--brand-jade-deep) 100%); /* --- Type -------------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", "Liberation Mono", monospace; /* Apple's type ladder, transposed to a dense operational UI. Optical tracking tightens as size grows, the way SF Pro Display does. */ --t-display: 700 2.125rem/1.12 var(--font-display); /* 34 */ --t-title-1: 700 1.75rem/1.16 var(--font-display); /* 28 */ --t-title-2: 650 1.375rem/1.25 var(--font-display); /* 22 */ --t-title-3: 600 1.0625rem/1.35 var(--font-display); /* 17 */ --t-headline: 600 0.9375rem/1.4 var(--font-sans); /* 15 */ --t-body: 400 0.875rem/1.5 var(--font-sans); /* 14 */ --t-callout: 400 0.8125rem/1.46 var(--font-sans); /* 13 */ --t-caption: 400 0.75rem/1.36 var(--font-sans); /* 12 */ --t-caption-2:400 0.6875rem/1.3 var(--font-sans); /* 11 */ --tr-display: -0.022em; --tr-title-1: -0.02em; --tr-title-2: -0.017em; --tr-title-3: -0.012em; --tr-headline: -0.008em; --tr-body: -0.005em; --tr-overline: 0.062em; /* --- Space (4pt grid) --------------------------------------------------- */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px; --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 64px; --s-13: 80px; /* --- Radius (Apple's continuous-corner feel: generous, never pill-y) ---- */ --r-1: 5px; --r-2: 8px; --r-3: 10px; --r-4: 14px; --r-5: 18px; --r-6: 24px; --r-full: 999px; /* --- Chrome ------------------------------------------------------------ */ --sidebar-w: 252px; --sidebar-w-collapsed: 76px; /* wide enough for a count badge beside the icon */ --topbar-h: 56px; --content-max: 1440px; --ease: cubic-bezier(.32, .72, 0, 1); /* Apple's spring-ish ease */ --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms; --dur-4: 420ms; } /* ============================================================================= Light — the default. A near-white canvas with a whisper of the brand blue in it, so the whole page sits inside the logo's hue band without ever showing a block of colour. ========================================================================== */ :root, :root[data-theme="light"] { --canvas: #F6F8FA; --canvas-tint: radial-gradient(1200px 620px at 18% -12%, rgba(47,188,218,.055), transparent 62%), radial-gradient(1000px 560px at 96% 4%, rgba(89,182,139,.045), transparent 58%); --surface: #FFFFFF; --surface-2: #F2F5F8; --surface-3: #E9EEF3; --surface-sunken:#EDF1F5; --overlay: rgba(255,255,255,.82); /* How much of a hue gets mixed *into* a surface. Every tinted panel on the site reads from these two, so the whole system is tuned from one place — and because the tint is mixed against --surface rather than layered over it, a vivid tone and a muted one land at the same lightness. */ --wash: 9%; --wash-soft: 4.5%; --line: rgba(22,52,82,.10); --line-soft: rgba(22,52,82,.06); --line-strong: rgba(22,52,82,.17); --ink: #0F1A24; --ink-2: #37485A; --ink-muted: #485664; /* AA on every light surface (>=6.4:1) */ --ink-faint: #5B6D7E; /* AA on every light surface (>=4.5:1) */ --ink-inverse: #FFFFFF; --accent: #1D6FB0; --accent-hover: #175F98; --accent-ink: #FFFFFF; --accent-wash: rgba(29,111,176,.075); --accent-wash-2: rgba(29,111,176,.13); --accent-line: rgba(29,111,176,.26); --positive: #157A55; --positive-wash: rgba(21,122,85,.085); --positive-line: rgba(21,122,85,.24); --warn: #8A5B0C; --warn-wash: rgba(176,120,26,.10); --warn-line: rgba(176,120,26,.28); --danger: #AE2438; --danger-wash: rgba(174,36,56,.075); --danger-line: rgba(174,36,56,.24); --neutral-wash: rgba(22,52,82,.05); --shadow-1: 0 1px 2px rgba(16,38,60,.05), 0 1px 1px rgba(16,38,60,.03); --shadow-2: 0 2px 4px rgba(16,38,60,.05), 0 6px 16px -6px rgba(16,38,60,.10); --shadow-3: 0 8px 24px -8px rgba(16,38,60,.16), 0 2px 6px rgba(16,38,60,.05); --shadow-4: 0 24px 60px -18px rgba(12,30,48,.28), 0 4px 12px rgba(12,30,48,.07); /* A seam, not a drawn rule: it fades out at both ends so it never reads as a stripe laid across the card. */ --hairline: linear-gradient(90deg, transparent, rgba(47,188,218,.30) 12%, rgba(58,107,178,.20) 58%, rgba(89,182,139,.14) 84%, transparent); --scrim: rgba(14,26,38,.34); } /* ============================================================================= Dark — same hue band, inverted. Surfaces keep a blue cast so the brand reads as the room's light source rather than as applied paint. ========================================================================== */ :root[data-theme="dark"] { --canvas: #0A0F14; --canvas-tint: radial-gradient(1200px 620px at 18% -12%, rgba(47,188,218,.075), transparent 62%), radial-gradient(1000px 560px at 96% 4%, rgba(89,182,139,.05), transparent 58%); --surface: #121A22; --surface-2: #172029; --surface-3: #1D2833; --surface-sunken:#0E151B; --overlay: rgba(18,26,34,.86); --wash: 16%; --wash-soft: 8%; --line: rgba(150,190,225,.13); --line-soft: rgba(150,190,225,.07); --line-strong: rgba(150,190,225,.22); --ink: #E7EEF5; --ink-2: #BDCBD9; --ink-muted: #94A6B7; --ink-faint: #808FA0; /* AA on every dark surface (>=4.5:1) */ --ink-inverse: #08121A; --accent: #59B2E8; --accent-hover: #7CC5F2; --accent-ink: #06131E; --accent-wash: rgba(89,178,232,.10); --accent-wash-2: rgba(89,178,232,.17); --accent-line: rgba(89,178,232,.32); --positive: #5CCB9B; --positive-wash: rgba(92,203,155,.10); --positive-line: rgba(92,203,155,.28); --warn: #E3B45C; --warn-wash: rgba(227,180,92,.10); --warn-line: rgba(227,180,92,.28); --danger: #FF7B87; --danger-wash: rgba(255,123,135,.10); --danger-line: rgba(255,123,135,.28); --neutral-wash: rgba(150,190,225,.06); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.34), 0 8px 20px -8px rgba(0,0,0,.5); --shadow-3: 0 10px 28px -10px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.34); --shadow-4: 0 28px 64px -20px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.4); --hairline: linear-gradient(90deg, transparent, rgba(47,188,218,.38) 12%, rgba(89,150,220,.26) 58%, rgba(89,182,139,.18) 84%, transparent); --scrim: rgba(3,8,12,.6); } /* Follow the OS when the user has not chosen a theme explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #0A0F14; --canvas-tint: radial-gradient(1200px 620px at 18% -12%, rgba(47,188,218,.075), transparent 62%), radial-gradient(1000px 560px at 96% 4%, rgba(89,182,139,.05), transparent 58%); --surface: #121A22; --surface-2: #172029; --surface-3: #1D2833; --surface-sunken:#0E151B; --overlay: rgba(18,26,34,.86); --wash: 16%; --wash-soft: 8%; --line: rgba(150,190,225,.13); --line-soft: rgba(150,190,225,.07); --line-strong: rgba(150,190,225,.22); --ink: #E7EEF5; --ink-2: #BDCBD9; --ink-muted: #94A6B7; --ink-faint: #808FA0; /* AA on every dark surface (>=4.5:1) */ --ink-inverse: #08121A; --accent: #59B2E8; --accent-hover: #7CC5F2; --accent-ink: #06131E; --accent-wash: rgba(89,178,232,.10); --accent-wash-2: rgba(89,178,232,.17); --accent-line: rgba(89,178,232,.32); --positive: #5CCB9B; --positive-wash: rgba(92,203,155,.10); --positive-line: rgba(92,203,155,.28); --warn: #E3B45C; --warn-wash: rgba(227,180,92,.10); --warn-line: rgba(227,180,92,.28); --danger: #FF7B87; --danger-wash: rgba(255,123,135,.10); --danger-line: rgba(255,123,135,.28); --neutral-wash: rgba(150,190,225,.06); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.34), 0 8px 20px -8px rgba(0,0,0,.5); --shadow-3: 0 10px 28px -10px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.34); --shadow-4: 0 28px 64px -20px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.4); --hairline: linear-gradient(90deg, transparent, rgba(47,188,218,.38) 12%, rgba(89,150,220,.26) 58%, rgba(89,182,139,.18) 84%, transparent); --scrim: rgba(3,8,12,.6); } }