/* ============================================================================
SAVVY FINANCIALS — Portable Design Kit (savvy-theme.css)
Drop into any HTML page. Dark is default; data-theme="light" on flips.
REQUIRED in BEFORE this file:
============================================================================ */
/* ============================================================================
TOKENS — verbatim from theme.css. Do NOT alter values.
============================================================================ */
:root {
/* ---- Official brand palette ------------------------------------------- */
--sgg-red: #2D6BFF;
--light-red: #5B8EFF;
--dark-red: #1A4EC4;
--purple: #1E3A7A;
--violet: #0F1F4A;
--almost-black: #131929;
--black: #000002;
--warm-white: #EDEDE2;
/* ---- Surfaces & text (DARK = default) -------------------------------- */
--bg-0: #0B1020;
--bg-1: #131929;
--surface-1: #1A2238;
--surface-2: #222D48;
--surface-3: #293557;
--border: rgba(237, 237, 226, 0.10);
--border-strong: rgba(237, 237, 226, 0.18);
--text: #EDEDE2;
--text-muted: rgba(237, 237, 226, 0.66);
--text-faint: rgba(237, 237, 226, 0.42);
/* ---- Identity / chrome (blue here NEVER means "bad") ------------------ */
--brand: #2D6BFF;
--brand-2: #1E3A7A;
--brand-3: #0F1F4A;
--brand-bg: rgba(45, 107, 255, 0.16);
/* ---- Finance / semantic colours -------------------------------------- */
--pos: #2FB985;
--pos-bright: #54E0A6;
--neg: #E13140;
--neg-bright: #FF6671;
--warn: #E9A23B;
--info: #7EA4DD;
--info-bright: #9DB6E8;
--info-deep: #5083C9;
--pos-bg: rgba(47, 185, 133, 0.14);
--neg-bg: rgba(225, 49, 64, 0.16);
--warn-bg: rgba(233, 162, 59, 0.15);
--info-bg: rgba(80, 131, 201, 0.14);
--info-border: rgba(80, 131, 201, 0.40);
--chip-neutral-bg: rgba(237, 237, 226, 0.06);
/* ---- Lavender accent ------------------------------------------------- */
--accent-lav: #8B5FBF;
--accent-lav-bright: #C9A0EB;
--accent-lav-bg: rgba(139, 95, 191, 0.10);
/* ---- Interaction / structure ----------------------------------------- */
--focus: #2D6BFF;
--row-hover: rgba(34, 45, 72, 0.55);
--surface-sticky: #1C2940;
--track: rgba(0, 0, 2, 0.35);
--scrim: rgba(8, 6, 18, 0.45);
--child-row: rgba(0, 0, 2, 0.16);
--selection: rgba(45, 107, 255, 0.20);
/* ---- Page atmosphere ------------------------------------------------- */
--grad-hero:
radial-gradient(120% 120% at 15% 10%, rgba(45, 107, 255, 0.40), transparent 45%),
radial-gradient(120% 120% at 85% 20%, rgba(30, 58, 122, 0.55), transparent 50%),
radial-gradient(140% 140% at 60% 100%, rgba(15, 31, 74, 0.70), transparent 55%),
var(--bg-0);
--glow-red: 0 0 0 1px rgba(45, 107, 255, 0.40), 0 8px 30px rgba(45, 107, 255, 0.25);
/* ---- Chart palette --------------------------------------------------- */
/* Series colours (chrome, never finance semantics) */
--chart-1: #2D6BFF;
--chart-2: #1E3A7A;
--chart-3: #7BA4F0;
--chart-4: #5B8EFF;
--chart-5: #0F2355;
--chart-6: #2FB985;
--chart-7: #E9A23B;
--chart-8: #00C4D0;
--chart-9: #4A6FBF;
--chart-10: #C97A12;
--chart-11: #2E6B6B;
/* Chart structure */
--chart-grid: rgba(237, 237, 226, 0.08);
--chart-axis: rgba(237, 237, 226, 0.42);
--chart-tooltip-bg: #222D48;
--chart-tooltip-border: rgba(237, 237, 226, 0.18);
--chart-tooltip-text: #EDEDE2;
--chart-area-top-alpha: 0.32;
--chart-area-bottom-alpha: 0.02;
/* ---- Typography ------------------------------------------------------ */
--font-sans: "Inter", "Almarai", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-num: "Inter", system-ui, sans-serif;
--font-brand: "Rubik", "Inter", system-ui, sans-serif;
--fs-display: 40px;
--fs-h1: 28px;
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body: 15px;
--fs-small: 13px;
--fs-micro: 11px;
--fs-nano: 10px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-kpi: 650;
--lh-tight: 1.1;
--lh-base: 1.5;
--ls-tight: -0.01em;
--ls-caps: 0.08em;
--ls-chip: 0.06em;
/* ---- Spacing scale (4px base) ---------------------------------------- */
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 10px;
--space-6: 12px;
--space-7: 14px;
--space-8: 16px;
--space-9: 18px;
--space-10: 20px;
--space-11: 22px;
--space-12: 24px;
--space-14: 28px;
/* ---- Radii ----------------------------------------------------------- */
--r-control: 8px;
--r-card: 16px;
--r-hero: 24px;
--r-pill: 999px;
--r-btn: 6px;
--r-tip: 10px;
/* ---- Borders --------------------------------------------------------- */
--border-style: 1px solid var(--border);
/* ---- Shadows --------------------------------------------------------- */
--shadow-card: 0 1px 0 rgba(237, 237, 226, 0.04) inset, 0 10px 30px rgba(0, 0, 2, 0.45);
--shadow-pop: 0 12px 40px rgba(0, 0, 2, 0.55);
/* ---- Motion ---------------------------------------------------------- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--t-fast: 150ms;
--t-med: 220ms;
--t-slow: 180ms;
/* ---- Layout ---------------------------------------------------------- */
--sidebar-w: 248px;
--sidebar-w-rail: 64px;
--topbar-h: 64px;
/* ---- Cyan accent (secondary highlights, secondary chart series) ---------- */
--accent: #22D3EE;
--accent-dim: rgba(34, 211, 238, 0.14);
--accent-border: rgba(34, 211, 238, 0.28);
/* ---- Violet / invest (reserved for investments context ONLY) ------------- */
--invest: #A78BFA;
--invest-dim: rgba(167, 139, 250, 0.14);
--invest-border: rgba(167, 139, 250, 0.26);
/* ---- Semantic alias ------------------------------------------------------ */
--primary: var(--brand); /* #2D6BFF blue chrome and primary buttons */
}
/* ============================================================================
LIGHT THEME — complete override. Set data-theme="light" on .
============================================================================ */
[data-theme="light"] {
--bg-0: #E8EDF5;
--bg-1: #EEF2FA;
--surface-1: #F5F8FD;
--surface-2: #FFFFFF;
--surface-3: #E0E8F6;
--border: rgba(15, 31, 74, 0.14);
--border-strong: rgba(15, 31, 74, 0.26);
--text: #0F1F4A;
--text-muted: rgba(15, 31, 74, 0.74);
--text-faint: rgba(15, 31, 74, 0.62);
--brand-bg: rgba(45, 107, 255, 0.10);
--pos: #157347; --pos-bright: #0C5B3B;
--neg: #96000A; --neg-bright: #7A0008;
--warn: #9A5B00;
--info: #3A66A8; --info-bright: #2F568F; --info-deep: #3A66A8;
--pos-bg: rgba(21, 115, 71, 0.12);
--neg-bg: rgba(150, 0, 10, 0.10);
--warn-bg: rgba(154, 91, 0, 0.12);
--info-bg: rgba(58, 102, 168, 0.10);
--info-border: rgba(58, 102, 168, 0.35);
--chip-neutral-bg: rgba(15, 31, 74, 0.06);
--accent-lav: #6C3E94;
--accent-lav-bright: #5A2F80;
--accent-lav-bg: rgba(108, 62, 148, 0.10);
--row-hover: rgba(30, 58, 122, 0.07);
--surface-sticky: #DCE8F7;
--track: rgba(15, 31, 74, 0.10);
--scrim: rgba(11, 16, 32, 0.32);
--child-row: rgba(15, 31, 74, 0.045);
--grad-hero:
radial-gradient(120% 120% at 15% 10%, rgba(45, 107, 255, 0.08), transparent 45%),
radial-gradient(120% 120% at 85% 20%, rgba(30, 58, 122, 0.08), transparent 50%),
radial-gradient(140% 140% at 60% 100%, rgba(15, 31, 74, 0.06), transparent 55%),
var(--bg-0);
--glow-red: 0 0 0 1px rgba(45, 107, 255, 0.25), 0 6px 20px rgba(45, 107, 255, 0.12);
--chart-grid: rgba(15, 31, 74, 0.10);
--chart-axis: rgba(11, 16, 32, 0.62);
--chart-tooltip-bg: #FFFFFF;
--chart-tooltip-border: rgba(15, 31, 74, 0.26);
--chart-tooltip-text: #0F1F4A;
--chart-area-top-alpha: 0.16;
--chart-area-bottom-alpha: 0;
--shadow-card: 0 1px 2px rgba(11, 16, 32, 0.06), 0 8px 24px rgba(11, 16, 32, 0.08);
--shadow-pop: 0 12px 32px rgba(11, 16, 32, 0.18);
--accent: #0891B2;
--accent-dim: rgba(8, 145, 178, 0.10);
--accent-border: rgba(8, 145, 178, 0.28);
--invest: #6D28D9;
--invest-dim: rgba(109, 40, 217, 0.10);
--invest-border: rgba(109, 40, 217, 0.22);
}
/* ============================================================================
BASE RESET + BODY
============================================================================ */
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--text);
background: var(--bg-0);
}
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Tabular numerics for money figures */
.num, td.cell-num, .kpi__value {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ============================================================================
LAYOUT SHELL — 248px sidebar + main
============================================================================ */
.app-shell {
display: flex;
min-height: 100vh;
background: var(--grad-hero);
background-attachment: fixed;
}
.sidebar {
width: var(--sidebar-w);
min-width: var(--sidebar-w);
height: 100vh;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
background: var(--bg-1);
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
z-index: 10;
}
.sidebar__logo {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 20px var(--space-8);
border-bottom: 1px solid var(--border);
font-family: var(--font-brand);
font-size: var(--fs-h3);
font-weight: 700;
color: var(--text);
text-decoration: none;
}
.sidebar__logo-mark {
width: 32px;
height: 32px;
border-radius: var(--r-control);
background: var(--brand);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: var(--warm-white);
flex-shrink: 0;
}
.sidebar__section {
padding: var(--space-6) var(--space-4);
}
.sidebar__label {
font-size: var(--fs-nano);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
padding: var(--space-4) var(--space-4) var(--space-3);
}
.main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.topbar {
height: var(--topbar-h);
display: flex;
align-items: center;
gap: var(--space-8);
padding: 0 var(--space-12);
border-bottom: 1px solid var(--border);
background: rgba(11, 16, 32, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 9;
}
[data-theme="light"] .topbar {
background: rgba(232, 237, 245, 0.82);
}
.topbar__title {
margin: 0;
font-size: var(--fs-h3);
font-weight: 600;
flex: 1;
}
.page-content {
padding: var(--space-12) var(--space-12) 48px;
flex: 1;
}
/* ============================================================================
NAV ITEMS
============================================================================ */
.nav__item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: var(--space-4) var(--space-5);
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--text-muted);
font-size: var(--fs-small);
font-family: inherit;
text-align: left;
cursor: pointer;
text-decoration: none;
transition:
background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.nav__item:hover { background: var(--surface-3); color: var(--text); }
.nav__item[aria-current="page"] {
background: linear-gradient(90deg, rgba(45, 107, 255, 0.26), rgba(45, 107, 255, 0.06));
border-color: rgba(45, 107, 255, 0.45);
color: var(--text);
}
.nav__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.7;
}
.nav__item[aria-current="page"] .nav__icon { opacity: 1; }
/* ============================================================================
CARDS
============================================================================ */
.card {
position: relative;
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.card::after {
content: "";
position: absolute;
right: -60px;
bottom: -70px;
width: 220px;
height: 180px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(30, 58, 122, 0.35), transparent 70%);
pointer-events: none;
}
[data-theme="light"] .card::after {
background: radial-gradient(closest-side, rgba(30, 58, 122, 0.10), transparent 70%);
}
.card__head { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-8) 20px 0; }
.card__title { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.card__sub { font-size: var(--fs-micro); color: var(--text-muted); }
.card__body { padding: var(--space-8) 18px; position: relative; z-index: 1; }
.card__foot { padding: var(--space-5) 18px; border-top: var(--border-style); position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-4); }
/* Surface elevation variants */
.surface { background: var(--surface-1); border: var(--border-style); border-radius: var(--r-card); }
.surface--raised { background: var(--surface-2); border: var(--border-style); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
/* ============================================================================
KPI STAT TILES
============================================================================ */
.kpi {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: 108px;
padding: 14px var(--space-8) 12px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.kpi::after {
content: "";
position: absolute;
right: -42px;
bottom: -52px;
width: 150px;
height: 130px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(30, 58, 122, 0.35), transparent 70%);
pointer-events: none;
}
[data-theme="light"] .kpi::after {
background: radial-gradient(closest-side, rgba(30, 58, 122, 0.10), transparent 70%);
}
.kpi__label {
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-faint);
}
.kpi__value {
font-size: 24px;
font-weight: 650;
line-height: var(--lh-tight);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
color: var(--text);
}
.kpi__value .kpi__cur {
font-size: 12px;
font-weight: 500;
color: var(--text-faint);
margin-left: 4px;
}
.kpi__sub { font-size: var(--fs-micro); color: var(--text-muted); }
/* Delta rows inside KPI */
.kpi__delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--fs-micro);
font-weight: 600;
margin-top: auto;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.kpi__delta--up { color: var(--pos-bright); }
.kpi__delta--down { color: var(--neg-bright); }
[data-theme="light"] .kpi__delta--up { color: var(--pos); }
[data-theme="light"] .kpi__delta--down { color: var(--neg); }
/* Responsive KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1280px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: 1fr; } }
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 11px;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background: transparent;
color: var(--text-muted);
font-family: inherit;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.03em;
cursor: pointer;
transition:
background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn--square { width: 30px; height: 30px; padding: 0; justify-content: center; }
/* Ghost — alias of default */
.btn-ghost { composes: btn; }
/* Primary — solid brand fill */
.btn-primary,
.btn.btn--primary {
background: var(--brand);
color: var(--warm-white);
border-color: var(--brand);
box-shadow: 0 2px 10px rgba(45, 107, 255, 0.35);
}
.btn-primary:hover,
.btn.btn--primary:hover {
background: var(--light-red);
border-color: var(--light-red);
color: var(--warm-white);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.btn--primary {
box-shadow: 0 2px 10px rgba(45, 107, 255, 0.18);
}
/* ============================================================================
SEGMENTED CONTROL / TABS
============================================================================ */
.segmented {
display: inline-flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background: var(--surface-1);
}
.segmented__btn {
padding: var(--space-3) var(--space-8);
border: 0;
border-radius: var(--r-btn);
background: transparent;
color: var(--text-muted);
font-family: inherit;
font-size: var(--fs-small);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.segmented__btn:hover:not(.is-active) { color: var(--text); }
.segmented__btn.is-active {
background: var(--brand);
color: var(--warm-white);
box-shadow: 0 2px 10px rgba(45, 107, 255, 0.35);
}
/* ============================================================================
DATA TABLE (.ftable)
============================================================================ */
.ftable-wrap {
overflow-x: auto;
overflow-y: auto;
border-radius: var(--r-card);
border: 1px solid var(--border);
}
.ftable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-small);
}
/* Sticky opaque header */
.ftable thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg-1);
padding: 9px 12px;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
text-align: left;
white-space: nowrap;
border-bottom: 1px solid var(--border-strong);
}
.ftable thead th.cell-num { text-align: right; }
.ftable tbody td {
padding: 7px 12px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
vertical-align: middle;
}
.ftable td.col-line {
color: var(--text);
font-weight: 500;
white-space: nowrap;
}
.ftable td.cell-num {
text-align: right;
white-space: nowrap;
color: var(--text);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.ftable td.cell-num.is-neg { color: var(--neg-bright); }
[data-theme="light"] .ftable td.cell-num.is-neg { color: var(--neg); }
.ftable td.cell-num.is-pos { color: var(--pos-bright); }
[data-theme="light"] .ftable td.cell-num.is-pos { color: var(--pos); }
/* Row hover */
.ftable tbody tr:hover td { background: var(--row-hover); }
/* Zebra (optional) */
.ftable--zebra tbody tr:nth-child(even) td { background: var(--child-row); }
/* Subtotal rows */
.ftable tbody tr.row-subtotal td {
font-weight: 700;
color: var(--text);
background: rgba(45, 107, 255, 0.07);
border-top: 1px solid rgba(45, 107, 255, 0.55);
border-bottom: 1px solid var(--border-strong);
}
.ftable tbody tr.row-subtotal:hover td { background: rgba(45, 107, 255, 0.10); }
[data-theme="light"] .ftable tbody tr.row-subtotal td {
background: rgba(45, 107, 255, 0.06);
border-top-color: rgba(45, 107, 255, 0.45);
}
/* Total / sticky bottom rows */
.ftable tbody tr.row-total td {
position: sticky;
bottom: 0;
background: var(--surface-sticky);
font-weight: 700;
color: var(--text);
border-top: 1px solid var(--border-strong);
}
/* ============================================================================
BADGES / CHIPS / PILLS
NOTE: brand blue (.chip--brand) is IDENTITY, not info. Info = .chip--info.
============================================================================ */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: var(--r-pill);
border: 1px solid transparent;
white-space: nowrap;
font-family: inherit;
}
.chip--s { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; }
.chip--m { font-size: 11px; font-weight: 600; padding: 2px 9px; }
.chip--l { font-size: 13px; font-weight: 600; padding: 3px 10px; }
.chip--pos { color: var(--pos-bright); background: var(--pos-bg); border-color: var(--pos-bg); }
.chip--neg { color: var(--neg-bright); background: var(--neg-bg); border-color: var(--neg-bg); }
.chip--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bg); }
.chip--info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.chip--brand { color: var(--text); background: var(--brand-bg); border-color: rgba(45, 107, 255, 0.45); }
.chip--neutral { color: var(--text-muted); background: var(--chip-neutral-bg); }
.chip--lav { color: var(--accent-lav-bright); background: var(--accent-lav-bg); border-color: var(--accent-lav-bg); }
[data-theme="light"] .chip--pos { color: var(--pos); }
[data-theme="light"] .chip--neg { color: var(--neg); }
[data-theme="light"] .chip--lav { color: var(--accent-lav); }
.chip__dot {
width: 6px;
height: 6px;
border-radius: var(--r-pill);
background: currentColor;
box-shadow: 0 0 6px currentColor;
flex-shrink: 0;
}
[data-theme="light"] .chip__dot { box-shadow: 0 0 3px currentColor; }
/* ============================================================================
FORM INPUTS + SELECTS
============================================================================ */
.input,
input.input,
textarea.input {
appearance: none;
display: block;
width: 100%;
padding: var(--space-4) 12px;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background-color: var(--surface-1);
color: var(--text);
font-family: inherit;
font-size: var(--fs-small);
line-height: var(--lh-base);
transition: border-color var(--t-fast) var(--ease);
}
.input:hover { border-color: var(--brand); }
.input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--brand); }
.input::placeholder { color: var(--text-faint); }
.select {
appearance: none;
padding: var(--space-4) 32px var(--space-4) 12px;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background-color: var(--surface-1);
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
background-size: 5px 5px;
background-repeat: no-repeat;
color: var(--text);
font-family: inherit;
font-size: var(--fs-small);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease);
}
.select:hover { border-color: var(--brand); }
.select:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ============================================================================
CHART COLOR HELPER CLASSES
Use on SVG rects, circles, or any element that uses fill/stroke.
CSS custom properties are always accessible via getComputedStyle for JS charting.
============================================================================ */
/* Text colour helpers (for chart legends, labels) */
.text-chart-1 { color: var(--chart-1); }
.text-chart-2 { color: var(--chart-2); }
.text-chart-3 { color: var(--chart-3); }
.text-chart-4 { color: var(--chart-4); }
.text-chart-5 { color: var(--chart-5); }
.text-chart-6 { color: var(--chart-6); }
.text-chart-7 { color: var(--chart-7); }
.text-chart-8 { color: var(--chart-8); }
.text-chart-9 { color: var(--chart-9); }
.text-chart-10 { color: var(--chart-10); }
.text-chart-11 { color: var(--chart-11); }
/* Fill helpers (SVG elements) */
.fill-chart-1 { fill: var(--chart-1); }
.fill-chart-2 { fill: var(--chart-2); }
.fill-chart-3 { fill: var(--chart-3); }
.fill-chart-4 { fill: var(--chart-4); }
.fill-chart-5 { fill: var(--chart-5); }
.fill-chart-6 { fill: var(--chart-6); }
.fill-chart-7 { fill: var(--chart-7); }
.fill-chart-8 { fill: var(--chart-8); }
.fill-chart-9 { fill: var(--chart-9); }
.fill-chart-10 { fill: var(--chart-10); }
.fill-chart-11 { fill: var(--chart-11); }
/* Background swatch helpers (for legend dots, color previews) */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.swatch-1 { background: var(--chart-1); }
.swatch-2 { background: var(--chart-2); }
.swatch-3 { background: var(--chart-3); }
.swatch-4 { background: var(--chart-4); }
.swatch-5 { background: var(--chart-5); }
.swatch-6 { background: var(--chart-6); }
.swatch-7 { background: var(--chart-7); }
.swatch-8 { background: var(--chart-8); }
.swatch-9 { background: var(--chart-9); }
.swatch-10 { background: var(--chart-10); }
.swatch-11 { background: var(--chart-11); }
/* Semantic chart colour helpers */
.fill-pos { fill: var(--pos); }
.fill-neg { fill: var(--neg); }
.fill-warn { fill: var(--warn); }
.fill-info { fill: var(--info); }
/* ============================================================================
TOOLTIPS / POPOVERS
============================================================================ */
.tooltip, .popover {
position: fixed;
z-index: 75;
padding: 10px 11px;
border: 1px solid var(--border-strong);
border-radius: var(--r-tip);
background: var(--surface-2);
box-shadow: var(--shadow-pop);
color: var(--text);
font-size: 12px;
}
.tooltip__title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.tooltip__row { display: flex; justify-content: space-between; gap: 14px; margin-top: 3px; }
.tooltip__row .name { color: var(--text-muted); }
.tooltip__row .val { color: var(--text); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* ============================================================================
TYPOGRAPHY UTILITIES
============================================================================ */
.eyebrow {
font-size: var(--fs-nano);
font-weight: 600;
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--text-faint);
}
.text-display { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.text-h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.text-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.text-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.text-small { font-size: var(--fs-small); }
.text-micro { font-size: var(--fs-micro); }
.text-nano { font-size: var(--fs-nano); }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-pos { color: var(--pos-bright); }
.text-neg { color: var(--neg-bright); }
.text-warn { color: var(--warn); }
.text-brand { color: var(--brand); }
[data-theme="light"] .text-pos { color: var(--pos); }
[data-theme="light"] .text-neg { color: var(--neg); }
/* ============================================================================
SPACING / LAYOUT UTILITIES
============================================================================ */
.gap-section { margin-bottom: var(--space-12); }
.row { display: flex; align-items: center; gap: var(--space-4); }
.row--spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.col { display: flex; flex-direction: column; gap: var(--space-4); }
/* ============================================================================
PROGRESS / UTILITY BAR
============================================================================ */
.progress {
height: 6px;
border-radius: var(--r-pill);
background: var(--track);
overflow: hidden;
}
.progress__fill {
height: 100%;
border-radius: var(--r-pill);
background: var(--brand);
transition: width var(--t-med) var(--ease);
}
.progress__fill--pos { background: var(--pos); }
.progress__fill--warn { background: var(--warn); }
.progress__fill--neg { background: var(--neg); }
/* ============================================================================
DIVIDER
============================================================================ */
.divider {
border: none;
border-top: var(--border-style);
margin: var(--space-8) 0;
}
/* ============================================================================
LIVING ANIMATED BACKGROUND
Add .living-bg as a sibling before your .app-shell. Place 2-3 .blob children
inside it: .blob--blue, .blob--cyan, .blob--violet.
The ::after pseudo applies a subtle SVG feTurbulence grain overlay (~5%).
============================================================================ */
.living-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.living-bg::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
background-size: 200px 200px;
background-repeat: repeat;
pointer-events: none;
z-index: 10;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.blob--blue {
width: 640px;
height: 640px;
background: radial-gradient(closest-side, rgba(45, 107, 255, 0.50), transparent 70%);
top: -12%;
left: -14%;
animation: blob-drift-a 14s ease-in-out alternate infinite;
}
.blob--cyan {
width: 520px;
height: 520px;
background: radial-gradient(closest-side, rgba(34, 211, 238, 0.28), transparent 70%);
top: 28%;
right: -8%;
animation: blob-drift-b 18s ease-in-out alternate infinite;
}
.blob--violet {
width: 440px;
height: 440px;
background: radial-gradient(closest-side, rgba(167, 139, 250, 0.16), transparent 70%);
bottom: -6%;
left: 34%;
animation: blob-drift-c 22s ease-in-out alternate infinite;
}
@keyframes blob-drift-a {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes blob-drift-b {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-50px, 60px) scale(0.94); }
}
@keyframes blob-drift-c {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(40px, -50px) scale(1.06); }
}
[data-theme="light"] .blob--blue { opacity: 0.22; }
[data-theme="light"] .blob--cyan { opacity: 0.18; }
[data-theme="light"] .blob--violet { opacity: 0.10; }
/* ============================================================================
COLLAPSIBLE SIDEBAR — .nav / .nav--rail
Apply .nav to the .sidebar element. Toggle .nav--rail to collapse to 64px.
Wrap nav item text in for the fade.
============================================================================ */
.nav {
transition:
width 200ms cubic-bezier(0.4, 0, 0.2, 1),
min-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--rail {
width: var(--sidebar-w-rail);
min-width: var(--sidebar-w-rail);
}
.nav__label-text {
transition:
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
max-width 200ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
}
.nav--rail .nav__label-text {
opacity: 0;
max-width: 0;
}
.nav--rail .nav__item {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.nav--rail .sidebar__label {
opacity: 0;
pointer-events: none;
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
/* Blue glow on active item */
.nav__item[aria-current="page"],
.nav__item.is-active {
box-shadow:
0 0 0 1px rgba(45, 107, 255, 0.35),
inset 0 0 14px rgba(45, 107, 255, 0.06);
}
/* ============================================================================
SLIDE-OVER DRAWER — .drawer / .drawer--open
Attach .backdrop as a sibling. Open: add .drawer--open + .is-visible to backdrop.
Close: remove both. Esc key support is handled by the caller.
============================================================================ */
.drawer {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: min(520px, 92vw);
background: rgba(19, 25, 41, 0.82);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-left: 1px solid var(--border-strong);
box-shadow: -8px 0 40px rgba(0, 0, 2, 0.50);
z-index: 80;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
.drawer--open {
transform: translateX(0);
}
[data-theme="light"] .drawer {
background: rgba(238, 242, 250, 0.92);
box-shadow: -8px 0 40px rgba(11, 16, 32, 0.18);
}
.drawer__head {
display: flex;
align-items: center;
gap: var(--space-6);
padding: 20px var(--space-12);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.drawer__title {
margin: 0;
font-size: var(--fs-h3);
font-weight: 600;
}
.drawer__close {
margin-left: auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.drawer__close:hover { background: var(--surface-3); color: var(--text); }
.drawer__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.drawer__body {
flex: 1;
overflow-y: auto;
padding: var(--space-12);
}
.drawer__foot {
padding: var(--space-8) var(--space-12);
border-top: 1px solid var(--border);
display: flex;
gap: var(--space-6);
flex-shrink: 0;
}
/* Scrim backdrop */
.backdrop {
position: fixed;
inset: 0;
background: var(--scrim);
z-index: 79;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-med) var(--ease);
}
.backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* ============================================================================
MODAL — .modal-wrap / .modal-wrap--open
Centered, glass panel. Scale 0.96 -> 1 + fade on enter, 250ms ease-out.
============================================================================ */
.modal-wrap {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12);
background: var(--scrim);
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease-out;
}
.modal-wrap--open {
opacity: 1;
pointer-events: auto;
}
.modal {
position: relative;
width: min(540px, 100%);
background: rgba(19, 25, 41, 0.88);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--r-hero);
box-shadow: var(--shadow-pop);
transform: scale(0.96);
transition: transform 250ms ease-out;
}
.modal-wrap--open .modal {
transform: scale(1);
}
[data-theme="light"] .modal {
background: rgba(245, 248, 253, 0.94);
border-color: rgba(15, 31, 74, 0.12);
}
.modal__head {
display: flex;
align-items: center;
gap: var(--space-6);
padding: 20px var(--space-12);
border-bottom: 1px solid var(--border);
}
.modal__title {
margin: 0;
font-size: var(--fs-h3);
font-weight: 600;
}
.modal__close {
margin-left: auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-strong);
border-radius: var(--r-control);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.modal__close:hover { background: var(--surface-3); color: var(--text); }
.modal__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.modal__body { padding: var(--space-12); }
.modal__foot {
padding: var(--space-8) var(--space-12) 20px;
display: flex;
gap: var(--space-6);
justify-content: flex-end;
}
/* ============================================================================
INVESTMENTS ACCENT HELPERS — VIOLET
Use ONLY inside investments context (holdings, portfolio, tickers, alloc).
Never repurpose violet for general UI.
============================================================================ */
.accent-invest { color: var(--invest); }
.bg-invest { background: var(--invest-dim); border: 1px solid var(--invest-border); border-radius: var(--r-control); }
.text-accent { color: var(--accent); }
.text-invest { color: var(--invest); }
.text-primary { color: var(--primary); }
/* Chip variant */
.chip--invest {
color: var(--invest);
background: var(--invest-dim);
border-color: var(--invest-border);
}
[data-theme="light"] .chip--invest { color: var(--invest); }
/* Card bloom override for investments panels */
.card--invest::after {
background: radial-gradient(closest-side, rgba(167, 139, 250, 0.22), transparent 70%);
}
[data-theme="light"] .card--invest::after {
background: radial-gradient(closest-side, rgba(167, 139, 250, 0.10), transparent 70%);
}
/* Nav item -- violet active state (investments section) */
.nav__item--invest:hover {
color: var(--invest);
background: var(--invest-dim);
}
.nav__item--invest:hover .nav__icon { color: var(--invest); opacity: 1; }
.nav__item--invest[aria-current="page"],
.nav__item--invest.is-active {
background: linear-gradient(90deg, var(--invest-dim), rgba(167, 139, 250, 0.04));
border-color: var(--invest-border);
color: var(--text);
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.30), inset 0 0 14px rgba(167, 139, 250, 0.06);
}
.nav__item--invest[aria-current="page"] .nav__icon,
.nav__item--invest.is-active .nav__icon { color: var(--invest); opacity: 1; }
/* Chart swatch helpers for the three accent roles */
.swatch-primary { background: var(--primary); }
.swatch-accent { background: var(--accent); }
.swatch-invest { background: var(--invest); }
.fill-primary { fill: var(--primary); }
.fill-accent { fill: var(--accent); }
.fill-invest { fill: var(--invest); }