/* ======================================================================== GBM AM TRACKER — DESIGN TOKENS ------------------------------------------------------------------------ Visual refresh inspired by gbmsecurities.com — sober, institutional, navy-led. Anchor color #1E2761 unchanged; everything around it has been re-tuned: cooler neutrals, navy-tinted accent, four distinct lane hues. To re-skin any page in the app: …then remove that page's own :root block (or override only what's page-specific). Conventions: --ink-* foreground text / icons (cooler than before) --paper-* surfaces (subtle cool tint) --line-* borders / dividers --navy-* brand anchor + ramp --accent-* interactive focus / link (navy-tinted, NOT indigo) --lane-* kanban lane semantics --ok/warn/info status colors (sober, slightly desaturated) --shadow-* elevation tiers --radius-* border-radius scale ===================================================================== */ :root { /* ── Ink / text ──────────────────────────────────────────────────── */ --ink: #0B1426; /* primary text, page titles */ --ink-2: #2A3447; /* body copy, secondary text */ --ink-3: #5A6478; /* labels, metadata */ --ink-4: #95A0B4; /* hints, placeholders, mono numerals */ /* ── Paper / surfaces ────────────────────────────────────────────── */ --paper: #FFFFFF; /* cards, modals, inputs */ --paper-2: #F7F8FB; /* page background */ --paper-3: #EEF1F6; /* hover surfaces, tag chip rest */ --paper-4: #E4E8F0; /* subtle dividers */ /* ── Lines ───────────────────────────────────────────────────────── */ --line: #E4E8F0; /* card border, table border */ --line-2: #C6CEDB; /* input border, button border */ /* ── Navy ramp (brand) ───────────────────────────────────────────── */ --navy: #1E2761; /* ANCHOR — page title, primary fill */ --navy-2: #2D3878; /* hover */ --navy-3: #131A47; /* pressed / deep emphasis */ --navy-tint: #EEF0F8; /* very pale navy bg (active filter rows) */ --navy-tint-2:#DCE0EE; /* slightly stronger tint */ /* ── Accent (interactive states) ─────────────────────────────────── */ /* Navy-tinted blue replaces the old indigo. Focus rings + links. */ --accent: #2D3878; --accent-2: #1E2761; --accent-ring:rgba(45, 56, 120, .14); --accent-tint:rgba(45, 56, 120, .06); /* ── Lane hues ───────────────────────────────────────────────────── */ /* The four lanes harmonize: each shares a desaturated, institutional palette while staying instantly distinguishable. Used as both border accents on cards AND as fill in their status chips. */ /* Ours — navy. Action lives with us. */ --lane-ours: #1E2761; --lane-ours-bg: #EEF0F8; --lane-ours-border: #C7CEE3; /* Theirs — amber. Waiting on counterparty. */ --lane-theirs: #B45309; --lane-theirs-bg: #FBF1DD; --lane-theirs-border: #ECD5A4; /* Joint — teal. Hybrid effort. */ --lane-joint: #0F7C7C; --lane-joint-bg: #DDEDED; --lane-joint-border: #A8D2D2; /* Sequenced — slate cool grey. Not active now. */ --lane-seq: #4D5B72; --lane-seq-bg: #E9EDF3; --lane-seq-border: #C1C9D7; /* Done — sober blue. Marked complete. */ --lane-done: #0E5BA6; --lane-done-bg: #DEEAF6; --lane-done-border: #B6CFE7; /* ── Tag group dot colors ────────────────────────────────────────── */ /* Used as small dot indicators in active filter chips so users can see at a glance which group an active filter belongs to. */ --tag-owner: #1E2761; /* navy */ --tag-domain: #1D4ED8; /* blue */ --tag-vendor: #B45309; /* amber */ --tag-cadence: #0F7C7C; /* teal */ --tag-status: #4D5B72; /* slate */ /* ── Semantic ────────────────────────────────────────────────────── */ --warn: #B91C1C; --warn-bg: #FCE9E9; --ok: #15803D; --ok-bg: #DDF0E2; --info: #0E5BA6; --info-bg: #DEEAF6; /* ── Shadows (tighter, more institutional than default Tailwind) ─── */ --shadow-xs: 0 1px 0 rgba(11, 20, 38, .025); --shadow-sm: 0 1px 2px rgba(11, 20, 38, .04), 0 1px 0 rgba(11, 20, 38, .025); --shadow-md: 0 4px 12px -4px rgba(11, 20, 38, .08), 0 1px 2px rgba(11, 20, 38, .04); --shadow-lg: 0 24px 48px -12px rgba(11, 20, 38, .14), 0 4px 12px -2px rgba(11, 20, 38, .06); /* ── Radius ──────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; /* ── Type ────────────────────────────────────────────────────────── */ /* IBM Plex Sans — neo-grotesque with a touch of seriousness, reads well at small sizes, suits institutional/financial UI. Loaded from Google Fonts in the host page. */ --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Spacing rhythm ──────────────────────────────────────────────── */ --gap-xs: 4px; --gap-sm: 8px; --gap-md: 12px; --gap-lg: 16px; --gap-xl: 24px; } /* ======================================================================== BASE ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper-2); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================================================== BUTTONS — same shape language across pages ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .08s, border-color .08s, color .08s; box-shadow: var(--shadow-xs); white-space: nowrap; } .btn:hover { background: var(--paper-3); border-color: var(--line-2); } .btn.primary { background: var(--navy); color: var(--paper); border-color: var(--navy); box-shadow: var(--shadow-sm); } .btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); } .btn.primary:active { background: var(--navy-3); border-color: var(--navy-3); } .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-3); box-shadow: none; } .btn.ghost:hover { background: var(--paper-3); color: var(--ink); } .btn.danger { color: var(--warn); border-color: var(--warn-bg); background: var(--paper); } .btn.danger:hover { background: var(--warn-bg); } .btn.danger-filled { background: var(--warn); color: var(--paper); border-color: var(--warn); } .btn.mini { font-size: 11.5px; padding: 4px 10px; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ======================================================================== FORMS — share input language across pages ===================================================================== */ .input { width: 100%; box-sizing: border-box; padding: 9px 12px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .08s, box-shadow .08s; } .input::placeholder { color: var(--ink-4); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* ======================================================================== MODAL OVERLAY ===================================================================== */ .overlay { position: fixed; inset: 0; background: rgba(11, 20, 38, .48); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 100; } .overlay.hidden { display: none; } /* ======================================================================== SCROLLBAR — quiet on cool surfaces ===================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--paper-4); border-radius: 10px; border: 2px solid var(--paper-2); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }