/* ══════════════════════════════════════════════════════════════ Northbound — Editorial Intelligence Theme Inspired by Bloomberg Terminal × Financial Times × The Economist Applied via [data-theme="northbound"] on ══════════════════════════════════════════════════════════════ */ /* ── Google Fonts injection (Instrument Serif + JetBrains Mono + Inter) ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap'); /* ── Core palette — warm paper + orange accent ── */ html[data-theme="northbound"] { /* Surface palette — papery warm whites */ --color-bg: #FAFAF5; --color-surface: #FFFFFF; --color-surface-2: #F5F4EF; --color-border: #D6D5CE; --color-border-subtle: #E8E7E1; --color-border-emphasis: #C4C3BC; /* Text — ink-on-paper warmth */ --color-text: #1A1A1A; --color-text-muted: #4A4A4A; --color-text-light: #737370; /* Accent — Northbound orange */ --color-accent: #FF6600; --color-accent-hover: #E85D00; --color-accent-subtle: rgba(255, 102, 0, 0.06); --color-accent-light: rgba(255, 102, 0, 0.12); /* Status — functional only */ --color-green: #006D32; --color-green-subtle: rgba(0, 109, 50, 0.07); --color-green-surface: #E8F5EE; --color-green-text: #005426; --color-amber: #CA8A04; --color-amber-subtle: rgba(202, 138, 4, 0.07); --color-amber-surface: #FEF9C3; --color-amber-text: #854D0E; --color-red: #D4262C; --color-red-subtle: rgba(212, 38, 44, 0.06); --color-red-surface: #FDEAEA; --color-red-text: #991B1B; --color-blue: #1A73E8; --color-blue-surface: #E8F0FE; --color-blue-text: #1E40AF; --color-blue-light: #EFF6FF; --color-teal: #0D9488; --color-teal-surface: #CCFBF1; --color-teal-text: #115E59; --color-pink-surface: #FCE7F3; --color-pink-text: #9D174D; /* Font families — readable editorial stack */ --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* Type scale — editorial hierarchy */ --t-2xs: 0.5625rem; /* 9px — micro labels, category tags */ --t-xs: 0.6875rem; /* 11px — card headers, table heads */ --t-sm: 0.8125rem; /* 13px — body, metadata */ --t-base: 0.875rem; /* 14px — primary body */ --t-md: 1.125rem; /* 18px — section headings */ --t-lg: 1.375rem; /* 22px — page titles */ --t-xl: 1.75rem; /* 28px — hero values, scores */ /* Weights */ --w-normal: 400; --w-medium: 500; --w-semibold: 600; /* Tracking */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; /* Radii — sharp, editorial */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; /* Shadows — subtle, warm */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02); --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.06); /* Easing */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ══════════════════════════════════════════════════════════════ Typography — Editorial feel Instrument Serif italic for headlines, IBM Plex for everything else ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] body { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.55; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } /* Headlines — Instrument Serif italic */ [data-theme="northbound"] h1 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: var(--color-text); } [data-theme="northbound"] h2 { font-family: var(--font-display); font-size: var(--t-md); font-weight: 400; font-style: italic; letter-spacing: -0.01em; } [data-theme="northbound"] h3 { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; } /* Data text — monospaced for tabular scanning */ [data-theme="northbound"] .snapshot-value, [data-theme="northbound"] .score-number, [data-theme="northbound"] .kpi-value, [data-theme="northbound"] td, [data-theme="northbound"] input[type="number"], [data-theme="northbound"] .pipeline-value, [data-theme="northbound"] .dc-value, [data-theme="northbound"] .dc-score-chip, [data-theme="northbound"] .mc-day { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════ Page Layout — Warm paper canvas ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .page { padding: 20px 24px 28px; background: var(--color-bg); } [data-theme="northbound"] .page-header { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); } [data-theme="northbound"] .page-header h1 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; font-style: italic; letter-spacing: -0.01em; } [data-theme="northbound"] .page-subtitle { margin-bottom: 18px; font-size: var(--t-xs); color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ Cards — Clean white surfaces with hairline borders ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .card { background: var(--color-surface); border: none; border-radius: 0; box-shadow: var(--shadow-sm); padding: 14px 16px; margin-bottom: 10px !important; transition: box-shadow 200ms var(--ease-out-quart); } [data-theme="northbound"] .card:hover { box-shadow: var(--shadow-md); border-color: transparent; } /* Card headers — uppercase mono labels */ [data-theme="northbound"] .card-header { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-subtle); } [data-theme="northbound"] .card-header h3 { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600; color: var(--color-text-light); text-transform: uppercase; letter-spacing: var(--ls-wide); } /* Primary cards — orange left accent */ [data-theme="northbound"] .col-main > .card:nth-child(2), [data-theme="northbound"] .col-main > .card:nth-child(3), [data-theme="northbound"] .col-main > .card:nth-child(5), [data-theme="northbound"] .col-main > .card:nth-child(6), [data-theme="northbound"] .card:has(.action-row), [data-theme="northbound"] .card:has(#companyDesc) { border-left: 2px solid var(--color-accent); } /* Primary card headers — darker */ [data-theme="northbound"] .col-main > .card .card-header h3 { color: var(--color-text-muted); } /* Side column — receded */ [data-theme="northbound"] .col-side > .card .card-header h3 { color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ Buttons — Sharp, decisive ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .btn { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; padding: 5px 12px; border-radius: 0; letter-spacing: 0.02em; text-transform: uppercase; transition: all 120ms var(--ease-out-quart); } [data-theme="northbound"] .btn:active { transform: scale(0.97); } [data-theme="northbound"] .btn-primary { background: var(--color-accent); color: #fff; border: none; } [data-theme="northbound"] .btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 2px 8px rgba(255, 102, 0, 0.2); } [data-theme="northbound"] .btn-secondary { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } [data-theme="northbound"] .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-accent); color: var(--color-accent); } [data-theme="northbound"] .btn-ghost { padding: 3px 6px; text-transform: none; letter-spacing: 0; } [data-theme="northbound"] .btn-ghost:hover { color: var(--color-accent); background: var(--color-accent-subtle); } [data-theme="northbound"] .btn-sm { padding: 3px 8px; font-size: var(--t-2xs); } [data-theme="northbound"] .btn-danger { border: 1px solid var(--color-red); color: var(--color-red); } [data-theme="northbound"] .btn-danger:hover { background: var(--color-red-subtle); } /* ══════════════════════════════════════════════════════════════ Inputs — Clean, sharp edges ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] input, [data-theme="northbound"] textarea { font-family: var(--font-body); font-size: var(--t-sm); border-radius: 0; border: 1px solid var(--color-border); padding: 6px 10px; transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart); } [data-theme="northbound"] select { font-family: var(--font-body); font-size: var(--t-sm); border-radius: 0; border: 1px solid var(--color-border); padding: 6px 28px 6px 10px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737370' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart); } [data-theme="northbound"] input:focus, [data-theme="northbound"] textarea:focus, [data-theme="northbound"] select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1); } [data-theme="northbound"] label { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-light); margin-bottom: 3px; } /* ══════════════════════════════════════════════════════════════ Badges — Sharp rectangles, functional colors ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .badge { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.04em; border-radius: 0; padding: 1px 7px; text-transform: uppercase; } [data-theme="northbound"] .badge-green { background: var(--color-green-surface); color: var(--color-green-text); } [data-theme="northbound"] .badge-amber { background: var(--color-amber-surface); color: var(--color-amber-text); } [data-theme="northbound"] .badge-red { background: var(--color-red-surface); color: var(--color-red-text); } [data-theme="northbound"] .badge-blue { background: var(--color-accent-subtle); color: #C45000; } [data-theme="northbound"] .badge-accent { background: var(--color-accent-subtle); color: #C45000; } [data-theme="northbound"] .badge-muted { background: var(--color-surface-2); color: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ Snapshot Bar — Editorial data strip ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .snapshot-bar { padding: 10px 16px; gap: 16px; margin-bottom: 16px; border-radius: 0; border: none; box-shadow: var(--shadow-sm); border-bottom: 2px solid var(--color-accent); } [data-theme="northbound"] .snapshot-label { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-wide); color: var(--color-text-light); text-transform: uppercase; } [data-theme="northbound"] .snapshot-value { font-family: var(--font-mono); font-size: var(--t-base); font-weight: 600; } /* Emphasize Score + Stage */ [data-theme="northbound"] .snapshot-item:nth-child(1) .snapshot-value { color: var(--color-accent); font-weight: 700; } [data-theme="northbound"] .snapshot-item:nth-child(1) .snapshot-label { color: var(--color-accent); } [data-theme="northbound"] .snapshot-divider { height: 28px; background: var(--color-border-subtle); opacity: 0.5; } /* ══════════════════════════════════════════════════════════════ Tables — Dense, scannable, editorial ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] th { font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-light); border-bottom: 2px solid var(--color-border); padding: 6px 8px; } [data-theme="northbound"] td { font-size: var(--t-sm); padding: 6px 8px; border-bottom: 1px solid var(--color-border-subtle); } [data-theme="northbound"] tr:hover td { background: rgba(255, 102, 0, 0.02); } /* ══════════════════════════════════════════════════════════════ Score Display — Bold mono numbers ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .score-number { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--ls-tight); } [data-theme="northbound"] .score-number.green { color: var(--color-green); } [data-theme="northbound"] .score-number.amber { color: var(--color-amber); } [data-theme="northbound"] .score-number.red { color: var(--color-red); } /* ══════════════════════════════════════════════════════════════ Modal — Sharp editorial overlay ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .modal-overlay { background: rgba(26, 26, 26, 0.4); } [data-theme="northbound"] .modal { border-radius: 0; border: none; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); padding: 18px 22px; } [data-theme="northbound"] .modal-header h2 { font-family: var(--font-display); font-size: var(--t-md); font-weight: 400; font-style: italic; } [data-theme="northbound"] .modal-header { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 12px; margin-bottom: 16px; } @keyframes nb-modal-in { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } [data-theme="northbound"] .modal { animation: nb-modal-in 250ms var(--ease-out-expo) both; } /* ══════════════════════════════════════════════════════════════ Toast — Orange accent stripe ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .toast { border-radius: 0; box-shadow: var(--shadow-md); font-size: var(--t-sm); } [data-theme="northbound"] .toast.success { border-left: 3px solid var(--color-green); } [data-theme="northbound"] .toast.error { border-left: 3px solid var(--color-red); } @keyframes nb-toast-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } [data-theme="northbound"] .toast { animation: nb-toast-in 200ms var(--ease-out-expo) both; } /* ══════════════════════════════════════════════════════════════ Accordion — Clean editorial collapse ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .accordion-item { border-radius: 0; border: 1px solid var(--color-border-subtle); margin-bottom: 4px; } [data-theme="northbound"] .accordion-header { padding: 8px 14px; font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="northbound"] .accordion-header:hover { background: var(--color-accent-subtle); color: var(--color-accent); } [data-theme="northbound"] .accordion-content { transition: max-height 300ms var(--ease-in-out), padding 200ms var(--ease-out-quart); } /* ══════════════════════════════════════════════════════════════ Signal Pills — Mono-spaced, sharp ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .signal-pill { font-family: var(--font-mono); font-size: var(--t-xs); border-radius: 0; padding: 2px 8px; border: 1px solid var(--color-border); } [data-theme="northbound"] .signal-pill:hover { border-color: var(--color-accent); color: var(--color-accent); } /* ══════════════════════════════════════════════════════════════ MEDDPICC Letters — Sharp squares ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .meddpicc-letter { border-radius: 0; width: 20px; height: 20px; font-family: var(--font-mono); font-size: var(--t-2xs); font-weight: 700; transition: transform 100ms var(--ease-out-quart); } [data-theme="northbound"] .meddpicc-letter:not(.filled) { opacity: 0.3; background: var(--color-surface-2); } [data-theme="northbound"] .meddpicc-letter.filled { background: var(--color-accent-light); color: #C45000; opacity: 1; } [data-theme="northbound"] .meddpicc-letter:hover { transform: scale(1.1); } /* ══════════════════════════════════════════════════════════════ Links — Orange accent ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] a { color: var(--color-accent); transition: color 120ms var(--ease-out-quart); } [data-theme="northbound"] a:hover { color: var(--color-accent-hover); } /* ══════════════════════════════════════════════════════════════ Focus — Orange ring ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } [data-theme="northbound"] input:focus-visible, [data-theme="northbound"] textarea:focus-visible, [data-theme="northbound"] select:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1); } /* ══════════════════════════════════════════════════════════════ Scrollbar — Thin, warm ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] ::-webkit-scrollbar { width: 4px; } [data-theme="northbound"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="northbound"] ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 0; } [data-theme="northbound"] ::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); } /* ══════════════════════════════════════════════════════════════ Distill — Remove noise, let content breathe ══════════════════════════════════════════════════════════════ */ /* Cards — borderless, shadow-only separation */ [data-theme="northbound"] .card { border-color: transparent; } [data-theme="northbound"] .card:hover { border-color: transparent; } /* Cards with accent stripe keep their left border */ [data-theme="northbound"] .col-main > .card:nth-child(2), [data-theme="northbound"] .col-main > .card:nth-child(3), [data-theme="northbound"] .col-main > .card:nth-child(5), [data-theme="northbound"] .col-main > .card:nth-child(6), [data-theme="northbound"] .card:has(.action-row), [data-theme="northbound"] .card:has(#companyDesc) { border-left: 2px solid var(--color-accent); } /* Hairline separators throughout */ [data-theme="northbound"] .card-header { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 5px; margin-bottom: 6px; } /* Remove heavy dividers */ [data-theme="northbound"] .section-line { display: none; } [data-theme="northbound"] .dc-sep { display: none; } [data-theme="northbound"] .deal-card { border-color: transparent !important; border-radius: 0 !important; } [data-theme="northbound"] .deal-card:hover { border-color: var(--color-accent) !important; box-shadow: var(--shadow-md); } /* Entry items — no borders, spacing separation */ [data-theme="northbound"] .entry-item { border-bottom: none !important; } [data-theme="northbound"] .milestone-row { border-bottom: none !important; } [data-theme="northbound"] .contact-card { border-bottom: none !important; } /* Composer footer — hide until focused */ [data-theme="northbound"] .composer-footer { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 150ms var(--ease-out-quart), max-height 150ms var(--ease-out-quart); } [data-theme="northbound"] .composer:focus-within .composer-footer { opacity: 1; max-height: 40px; } /* Add-row — hide until hovered */ [data-theme="northbound"] .ai-add-row { opacity: 0; max-height: 0; padding: 0 16px !important; overflow: hidden; transition: opacity 200ms var(--ease-out-quart), max-height 200ms var(--ease-out-quart), padding 200ms var(--ease-out-quart); } [data-theme="northbound"] .ai-group:hover .ai-add-row, [data-theme="northbound"] .ai-add-row:focus-within { opacity: 1; max-height: 50px; padding: 6px 16px !important; } /* ══════════════════════════════════════════════════════════════ Micro-interactions — Smooth, professional ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .btn { transition: background 100ms var(--ease-out-quart), border-color 100ms var(--ease-out-quart), transform 80ms var(--ease-out-quart), box-shadow 100ms var(--ease-out-quart), color 100ms var(--ease-out-quart); } [data-theme="northbound"] .entry-item { transition: background 100ms var(--ease-out-quart); border-radius: 0; margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; } [data-theme="northbound"] .entry-item:hover { background: var(--color-accent-subtle); } [data-theme="northbound"] .contact-card { transition: background 100ms var(--ease-out-quart); margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; } [data-theme="northbound"] .contact-card:hover { background: var(--color-accent-subtle); } [data-theme="northbound"] .milestone-row { transition: background 100ms var(--ease-out-quart); } [data-theme="northbound"] .milestone-row:hover { background: var(--color-accent-subtle); } /* ══════════════════════════════════════════════════════════════ Normalize — Dashboard & page-specific overrides ══════════════════════════════════════════════════════════════ */ /* KPI cards */ [data-theme="northbound"] .kpi-label { font-family: var(--font-mono); font-size: var(--t-2xs) !important; letter-spacing: var(--ls-wide); text-transform: uppercase; } [data-theme="northbound"] .kpi-value { font-family: var(--font-mono); font-size: var(--t-xl) !important; font-weight: 700; letter-spacing: var(--ls-tight); } [data-theme="northbound"] .kpi-card { padding: 10px 14px !important; border-radius: 0 !important; } /* Deal cards — readable sizes */ [data-theme="northbound"] .deal-card { padding: 12px 16px !important; } [data-theme="northbound"] .dc-name { font-family: var(--font-body) !important; /* Inter — not serif */ font-size: 0.95rem !important; /* 15.2px — clear and readable */ font-weight: 600 !important; font-style: normal !important; letter-spacing: -0.01em; } [data-theme="northbound"] .dc-value { font-family: var(--font-mono); font-size: var(--t-base) !important; font-weight: 700; color: #FF6600 !important; } [data-theme="northbound"] .dc-meta-item { font-size: var(--t-sm) !important; } /* 13px — was 11px */ [data-theme="northbound"] .dc-score-chip { font-size: var(--t-sm) !important; } /* 13px — was 11px */ [data-theme="northbound"] .dc-actions-chip { font-size: var(--t-sm) !important; } /* 13px — was 11px */ [data-theme="northbound"] .dc-product-pill { font-size: var(--t-xs) !important; } /* 11px — was 9px */ [data-theme="northbound"] .dc-next-step { font-size: var(--t-sm) !important; } /* 13px — was 11px */ [data-theme="northbound"] .dc-footer { font-size: var(--t-sm) !important; } /* 13px — was 11px */ /* Stage/forecast badges */ [data-theme="northbound"] .stage-badge, [data-theme="northbound"] .forecast-badge, [data-theme="northbound"] .mc-type-badge, [data-theme="northbound"] .mc-ai-badge, [data-theme="northbound"] .tier-badge, [data-theme="northbound"] .tp-status-badge, [data-theme="northbound"] .cc-tag, [data-theme="northbound"] .org-node-tag, [data-theme="northbound"] .pc-model-badge, [data-theme="northbound"] .pc-cat-badge, [data-theme="northbound"] .q-status { font-family: var(--font-mono) !important; font-size: var(--t-xs) !important; /* 11px — was 9px */ font-weight: 600 !important; padding: 2px 8px !important; /* slightly bigger padding */ border-radius: 0 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } /* Section headers */ [data-theme="northbound"] .section-label { font-family: var(--font-mono); font-size: var(--t-xs) !important; letter-spacing: var(--ls-wide); text-transform: uppercase; } /* Upcoming bar */ [data-theme="northbound"] .upcoming-bar { border-color: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--color-accent) !important; padding: 6px 14px !important; } [data-theme="northbound"] .upcoming-label { font-size: var(--t-2xs) !important; } [data-theme="northbound"] .uc-day { font-size: var(--t-base) !important; } [data-theme="northbound"] .uc-mon { font-size: var(--t-2xs) !important; } [data-theme="northbound"] .uc-name { font-size: var(--t-sm) !important; } [data-theme="northbound"] .uc-countdown { font-size: var(--t-xs) !important; } /* Action items */ [data-theme="northbound"] .ai-title { font-size: var(--t-sm) !important; } [data-theme="northbound"] .ai-desc { font-size: var(--t-xs) !important; } [data-theme="northbound"] .ai-priority { font-size: var(--t-2xs) !important; font-weight: 700; } [data-theme="northbound"] .ai-due { font-size: var(--t-xs) !important; } [data-theme="northbound"] .ai-btn { font-size: var(--t-xs) !important; } [data-theme="northbound"] .ai-sub-title { font-size: var(--t-xs) !important; } [data-theme="northbound"] .ai-sub-del { font-size: var(--t-2xs) !important; } [data-theme="northbound"] .ai-group-label { font-size: var(--t-xs) !important; } /* Summary template */ [data-theme="northbound"] .milestone-title { font-size: var(--t-sm) !important; } [data-theme="northbound"] .milestone-date { font-size: var(--t-xs) !important; } [data-theme="northbound"] .compact-item { font-size: var(--t-sm) !important; } [data-theme="northbound"] .editable-area { font-size: var(--t-sm) !important; } [data-theme="northbound"] .sf-label { font-size: var(--t-xs) !important; } [data-theme="northbound"] .poi-name { font-size: var(--t-sm) !important; font-weight: 600; } [data-theme="northbound"] .poi-price { font-size: var(--t-xs) !important; } /* Contact names */ [data-theme="northbound"] .contact-name, [data-theme="northbound"] .contact-info .name, [data-theme="northbound"] .cc-name { font-size: var(--t-sm) !important; font-weight: 500 !important; } [data-theme="northbound"] .contact-title-text, [data-theme="northbound"] .contact-info .title-text, [data-theme="northbound"] .cc-title { font-size: var(--t-xs) !important; color: var(--color-text-light) !important; } /* Meetings */ [data-theme="northbound"] .mc-title { font-size: var(--t-sm) !important; font-weight: 600; } [data-theme="northbound"] .mc-sub { font-size: var(--t-xs) !important; } [data-theme="northbound"] .mc-day { font-size: var(--t-md) !important; font-weight: 600; } [data-theme="northbound"] .mc-month { font-size: var(--t-2xs) !important; } /* Meeting cards — sharp */ [data-theme="northbound"] .meeting-card { border-radius: 0 !important; transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); } [data-theme="northbound"] .meeting-card:hover { box-shadow: var(--shadow-md) !important; } [data-theme="northbound"] .meeting-card:first-child { border-left: 2px solid var(--color-accent); } [data-theme="northbound"] .meeting-card.expanded { border-color: var(--color-accent) !important; } /* Modals — unified */ [data-theme="northbound"] .modal, [data-theme="northbound"] .ai-modal, [data-theme="northbound"] .action-modal, [data-theme="northbound"] .sf-modal, [data-theme="northbound"] .confirm-box { padding: 16px 18px !important; border-radius: 0 !important; } [data-theme="northbound"] .modal-header h2, [data-theme="northbound"] .ai-modal h3, [data-theme="northbound"] .action-modal h3 { font-family: var(--font-display) !important; font-size: var(--t-md) !important; font-weight: 400 !important; font-style: italic !important; } /* Tabs — sharp, orange active */ [data-theme="northbound"] .view-tab, [data-theme="northbound"] .tp-subnav-btn { font-size: var(--t-sm) !important; font-weight: 500 !important; border-radius: 0 !important; } [data-theme="northbound"] .view-tab.active, [data-theme="northbound"] .tp-subnav-btn.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; font-weight: 600 !important; } /* Product cards, result cards — sharp */ [data-theme="northbound"] .product-card, [data-theme="northbound"] .summary-card, [data-theme="northbound"] .result-card, [data-theme="northbound"] .q-card { border-radius: 0 !important; padding: 10px 14px !important; } [data-theme="northbound"] .product-card:hover, [data-theme="northbound"] .q-card:hover { box-shadow: var(--shadow-md); } [data-theme="northbound"] .product-card.selected { border-color: var(--color-accent) !important; } [data-theme="northbound"] .result-card { border-bottom: 2px solid var(--color-accent) !important; } /* SWOT cards — warm functional colors */ [data-theme="northbound"] .swot-card { border-radius: 0 !important; padding: 10px 14px !important; } [data-theme="northbound"] .swot-card.strengths { background: var(--color-green-subtle) !important; border-color: rgba(0, 109, 50, 0.15) !important; } [data-theme="northbound"] .swot-card.weaknesses { background: var(--color-red-subtle) !important; border-color: rgba(212, 38, 44, 0.15) !important; } [data-theme="northbound"] .swot-card.opportunities { background: var(--color-accent-subtle) !important; border-color: rgba(255, 102, 0, 0.15) !important; } [data-theme="northbound"] .swot-card.threats { background: var(--color-amber-subtle) !important; border-color: rgba(202, 138, 4, 0.15) !important; } /* Chips */ [data-theme="northbound"] .chip { border-radius: 0 !important; font-size: var(--t-xs) !important; } [data-theme="northbound"] .chip.selected { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; } /* Inline select — compact */ [data-theme="northbound"] .inline-select { font-size: var(--t-sm); border-radius: 0; } /* Checkbox — orange accent */ [data-theme="northbound"] .checkbox { width: 14px; height: 14px; accent-color: #FF6600; border-radius: 0; } /* Loading spinner — orange */ [data-theme="northbound"] .spinner { width: 20px; height: 20px; border-top-color: #FF6600; } /* Rich content bullets — orange */ [data-theme="northbound"] .rich-content .rc-bullet::before { color: #FF6600; } /* Two-column — tighter gap */ [data-theme="northbound"] .two-col { gap: 12px; } /* Empty state */ [data-theme="northbound"] .empty-state { padding: 24px 14px; } [data-theme="northbound"] .empty-state h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; } [data-theme="northbound"] .empty-state p { font-size: var(--t-sm); } /* SF link row — clean */ [data-theme="northbound"] .sf-link-row { border-top: none !important; } /* Vault */ [data-theme="northbound"] .vault-header-row { font-size: var(--t-xs) !important; } [data-theme="northbound"] .vault-group { border-radius: 0 !important; } /* Ghost action buttons — unified */ [data-theme="northbound"] .ai-btn, [data-theme="northbound"] .action-edit-btn, [data-theme="northbound"] .action-del, [data-theme="northbound"] .mc-header-actions button, [data-theme="northbound"] .milestone-actions button { font-size: var(--t-xs) !important; padding: 2px 5px !important; border-radius: 0 !important; transition: all 120ms var(--ease-out-quart) !important; } /* Copy buttons */ [data-theme="northbound"] .copy-btn { font-family: var(--font-mono); font-size: var(--t-xs) !important; border-radius: 0 !important; } /* Reminders panel */ [data-theme="northbound"] .reminders-panel { background: var(--color-surface) !important; border-color: var(--color-border) !important; border-radius: 0 !important; } [data-theme="northbound"] .reminders-header { background: var(--color-accent-subtle) !important; border-bottom-color: var(--color-border) !important; } /* POI chips */ [data-theme="northbound"] .poi-chip { border-radius: 0 !important; } /* Select arrow — handled in the main select rule above */ /* Rich toolbar */ [data-theme="northbound"] .rich-toolbar { border-radius: 0 !important; border-bottom: none !important; } /* ══════════════════════════════════════════════════════════════ Shell — Dark Bloomberg masthead + Editorial navigation These override the inline styles in index.html ══════════════════════════════════════════════════════════════ */ /* Dark top bar — Bloomberg-style black masthead */ [data-theme="northbound"] .topbar { background: #0D0D0D !important; border-bottom: none !important; } [data-theme="northbound"] .topbar-brand { padding: 6px 20px !important; } /* App name — orange + mono, Bloomberg style */ [data-theme="northbound"] .app-name { font-family: var(--font-mono) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.2em !important; color: #FF6600 !important; } [data-theme="northbound"] .brand-sep { background: #333 !important; } /* Deal dropdown — dark variant */ [data-theme="northbound"] .deal-dropdown-trigger { background: #1A1A1A !important; border-color: #333 !important; color: #ccc !important; border-radius: 0 !important; font-family: var(--font-mono) !important; font-size: 0.75rem !important; } [data-theme="northbound"] .deal-dropdown-trigger:hover { border-color: #555 !important; } [data-theme="northbound"] .deal-dropdown-trigger.open { border-color: #FF6600 !important; } [data-theme="northbound"] .deal-dropdown-menu { background: #1A1A1A !important; border-color: #333 !important; border-radius: 0 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } [data-theme="northbound"] .deal-dropdown-item { color: #ccc !important; font-family: var(--font-body) !important; } [data-theme="northbound"] .deal-dropdown-item:hover { background: #2A2A2A !important; color: #fff !important; } [data-theme="northbound"] .deal-dropdown-item.active { color: #FF6600 !important; } [data-theme="northbound"] .deal-dropdown-group { color: #666 !important; font-family: var(--font-mono) !important; } [data-theme="northbound"] .deal-dropdown-divider { background: #333 !important; } /* Deal button — dark variant */ [data-theme="northbound"] .deal-btn { background: #1A1A1A !important; border-color: #333 !important; color: #999 !important; border-radius: 0 !important; font-family: var(--font-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } [data-theme="northbound"] .deal-btn:hover { border-color: #FF6600 !important; color: #FF6600 !important; } /* Global search — dark variant */ [data-theme="northbound"] .global-search input { background: #1A1A1A !important; border-color: #333 !important; color: #ccc !important; border-radius: 0 !important; font-family: var(--font-body) !important; } [data-theme="northbound"] .global-search input:focus { border-color: #FF6600 !important; } [data-theme="northbound"] .global-search input::placeholder { color: #555 !important; } [data-theme="northbound"] .global-search-results { background: #1A1A1A !important; border-color: #333 !important; border-radius: 0 !important; } [data-theme="northbound"] .search-result-item:hover, [data-theme="northbound"] .search-result-item.highlighted { background: #2A2A2A !important; } [data-theme="northbound"] .search-result-item .sr-title { color: #eee !important; } [data-theme="northbound"] .search-result-item .sr-context { color: #888 !important; } [data-theme="northbound"] .search-result-group { color: #666 !important; font-family: var(--font-mono) !important; } [data-theme="northbound"] .search-no-results { color: #666 !important; } /* Font size buttons — dark */ [data-theme="northbound"] .font-btn { background: #1A1A1A !important; border-color: #333 !important; color: #888 !important; border-radius: 0 !important; font-family: var(--font-mono) !important; } [data-theme="northbound"] .font-btn:hover { color: #ccc !important; border-color: #555 !important; } /* Design badge — dark */ [data-theme="northbound"] .design-badge { background: #1A1A1A !important; border-color: #333 !important; color: #888 !important; border-radius: 0 !important; font-family: var(--font-mono) !important; } [data-theme="northbound"] .design-badge:hover { border-color: #FF6600 !important; color: #FF6600 !important; } /* Version — dark */ [data-theme="northbound"] .version { color: #555 !important; font-family: var(--font-mono) !important; } /* Logout — dark */ [data-theme="northbound"] .logout-link { color: #666 !important; font-family: var(--font-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.04em !important; } [data-theme="northbound"] .logout-link:hover { color: #D4262C !important; } /* Navigation bar — dark with editorial style */ [data-theme="northbound"] .topbar-nav { border-top-color: #222 !important; background: #0D0D0D !important; } /* Nav menu triggers — monospaced, dark */ [data-theme="northbound"] .nav-menu-trigger { font-family: var(--font-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #999 !important; padding: 8px 14px !important; } [data-theme="northbound"] .nav-menu-trigger:hover { color: #ccc !important; } [data-theme="northbound"] .nav-menu-trigger.has-active { color: #FF6600 !important; border-bottom-color: #FF6600 !important; } [data-theme="northbound"] .nav-menu-trigger.open { color: #ccc !important; background: #1A1A1A !important; } /* Nav dropdown — dark */ [data-theme="northbound"] .nav-menu-dropdown { background: #1A1A1A !important; border-color: #333 !important; border-radius: 0 !important; box-shadow: 0 6px 20px rgba(0,0,0,0.4) !important; } /* Nav tabs — dark */ [data-theme="northbound"] .nav-tab { font-family: var(--font-body) !important; font-size: 0.78rem !important; color: #999 !important; } [data-theme="northbound"] .nav-tab:hover { color: #fff !important; background: #2A2A2A !important; } [data-theme="northbound"] .nav-tab.active { color: #FF6600 !important; } /* Direct nav tabs — same as triggers */ [data-theme="northbound"] .nav-tab-direct { font-family: var(--font-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #999 !important; } [data-theme="northbound"] .nav-tab-direct:hover { color: #ccc !important; } [data-theme="northbound"] .nav-tab-direct.active { color: #FF6600 !important; border-bottom-color: #FF6600 !important; } /* Deal name label in nav */ [data-theme="northbound"] .deal-name-nav { color: #FF6600 !important; font-family: var(--font-mono) !important; } /* Ladybird FAB — editorial */ [data-theme="northbound"] .ladybird-fab { border-radius: 0 !important; border-color: var(--color-border) !important; } [data-theme="northbound"] .ladybird-fab:hover { border-color: #D4262C !important; } /* Bug type buttons */ [data-theme="northbound"] .bug-type-btn { border-radius: 0 !important; font-family: var(--font-mono) !important; } /* Main content iframe background */ [data-theme="northbound"] .main-content { background: #FAFAF5 !important; } /* ══════════════════════════════════════════════════════════════ Dashboard page — Editorial overrides ══════════════════════════════════════════════════════════════ */ /* Page header */ [data-theme="northbound"] .page-header h1 { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } /* KPI cards — editorial data display */ [data-theme="northbound"] .kpi-card { border-radius: 0 !important; border-color: transparent !important; box-shadow: var(--shadow-sm) !important; } [data-theme="northbound"] .kpi-label { font-family: var(--font-mono) !important; font-size: var(--t-2xs) !important; letter-spacing: var(--ls-wide) !important; text-transform: uppercase !important; } [data-theme="northbound"] .kpi-value { font-family: var(--font-mono) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* Deal cards — sharp editorial */ [data-theme="northbound"] .deal-card { border-radius: 0 !important; border-color: transparent !important; box-shadow: var(--shadow-sm) !important; transition: box-shadow 200ms var(--ease-out-quart), border-color 200ms var(--ease-out-quart) !important; } [data-theme="northbound"] .deal-card:hover { box-shadow: var(--shadow-md) !important; border-color: #FF6600 !important; } /* Upcoming bar — editorial accent */ [data-theme="northbound"] .upcoming-bar { border-radius: 0 !important; border-color: transparent !important; border-bottom: 2px solid #FF6600 !important; box-shadow: var(--shadow-sm) !important; } /* Section headers */ [data-theme="northbound"] .section-header h3, [data-theme="northbound"] .section-header .section-label { font-family: var(--font-mono) !important; } /* Actions section */ [data-theme="northbound"] .actions-section { border-radius: 0 !important; border-color: transparent !important; box-shadow: var(--shadow-sm) !important; } /* Deals grid — tighter gap */ [data-theme="northbound"] .deals-grid { gap: 8px !important; } /* Empty dashboard */ [data-theme="northbound"] .empty-dashboard h3 { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; } /* ══════════════════════════════════════════════════════════════ Summary page — Editorial data presentation ══════════════════════════════════════════════════════════════ */ /* Composer */ [data-theme="northbound"] .composer { border-radius: 0 !important; } [data-theme="northbound"] .composer textarea { border-radius: 0 !important; } /* Editable areas */ [data-theme="northbound"] .editable { border-radius: 0 !important; } [data-theme="northbound"] .editable:hover { background: rgba(255, 102, 0, 0.03) !important; } [data-theme="northbound"] .editable:focus { border-color: #FF6600 !important; } /* Confirm dialog */ [data-theme="northbound"] .confirm-box { border-radius: 0 !important; } /* ══════════════════════════════════════════════════════════════ Territory page ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .tp-card { border-radius: 0 !important; } [data-theme="northbound"] .tp-subnav-btn { border-radius: 0 !important; font-family: var(--font-mono) !important; } [data-theme="northbound"] .tp-subnav-btn.active { color: #FF6600 !important; border-bottom-color: #FF6600 !important; } /* Territory selects — proper arrow spacing */ [data-theme="northbound"] .tp-year-select, [data-theme="northbound"] #statusSelect { border-radius: 0 !important; padding-right: 28px !important; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737370' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-color: var(--color-surface) !important; } /* ══════════════════════════════════════════════════════════════ Discovery / MEDDPICC page ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] .discovery-card { border-radius: 0 !important; } [data-theme="northbound"] .discovery-section { border-radius: 0 !important; } /* ══════════════════════════════════════════════════════════════ Grain texture overlay — papery feel on body ══════════════════════════════════════════════════════════════ */ [data-theme="northbound"] body::after { content: ''; position: fixed; inset: 0; opacity: 0.012; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; }