/* ============================================================ Capacity Compliance Partners — Colors & Type The single source of truth for tokens. Import this everywhere. ============================================================ */ /* ---------- Webfonts (Google Fonts substitutes) ---------- Brand spec calls for Neue Haas Grotesk (display/marketing) and Inter (digital/UI). Neue Haas Grotesk is a licensed Monotype family; we substitute Inter Tight for display and keep Inter for UI. See README → "Type substitutions" — provide TTFs to upgrade. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ----------------------------------------------------------- COLOR — Brand palette (from Visual Identity System, page 1) ----------------------------------------------------------- */ --ccp-ink: #0A0F1A; /* deep navy/black — primary surface */ --ccp-blue: #1D4ED8; /* royal blue — primary action */ --ccp-blue-deep: #0A4C78; /* dark blue — secondary, charts */ --ccp-blue-bright: #2563EB; /* hover / link / focus glow */ --ccp-slate: #64748B; /* metadata, secondary text on light */ --ccp-slate-light: #CBD5E1; /* divider / muted on dark */ --ccp-paper: #F5F7FA; /* off-white surface */ --ccp-paper-2: #EEF1F6; /* alternate paper */ --ccp-go: #22C55E; /* "ON TRACK" / positive */ --ccp-warn: #F59E0B; /* medium exposure */ --ccp-alert: #EF4444; /* high exposure / critical */ --ccp-line: #7FB3FF; /* blueprint stroke (logo, schematics) */ /* ----------------------------------------------------------- COLOR — Dark surface scale (the default Capacity surface) ----------------------------------------------------------- */ --surface-0: #06090F; /* deepest — page bg */ --surface-1: #0A0F1A; /* primary panel */ --surface-2: #111827; /* raised card */ --surface-3: #1A2233; /* hover row, popover */ --surface-4: #232C40; /* highest elevation */ --hairline: rgba(127,179,255,0.14); /* blueprint hairline */ --hairline-strong: rgba(127,179,255,0.28); /* ----------------------------------------------------------- COLOR — Light surface scale (deliverables, PDFs, docs) ----------------------------------------------------------- */ --paper-0: #FFFFFF; --paper-1: #F5F7FA; --paper-2: #EEF1F6; --paper-3: #E2E8F0; --rule: #CBD5E1; --rule-soft: #E2E8F0; /* ----------------------------------------------------------- COLOR — Semantic foreground tokens ----------------------------------------------------------- */ --fg-on-dark-1: #F5F7FA; /* high-emphasis text on dark */ --fg-on-dark-2: #CBD5E1; /* secondary text on dark */ --fg-on-dark-3: #94A3B8; /* tertiary / meta */ --fg-on-dark-4: #64748B; /* disabled / footnote */ --fg-on-light-1: #0A0F1A; /* primary text on paper */ --fg-on-light-2: #334155; /* secondary on paper */ --fg-on-light-3: #64748B; /* meta on paper */ /* ----------------------------------------------------------- COLOR — Status (compliance exposure ladder) ----------------------------------------------------------- */ --status-ok: #22C55E; --status-ok-bg: rgba(34,197,94,0.12); --status-warn: #F59E0B; --status-warn-bg: rgba(245,158,11,0.12); --status-alert: #EF4444; --status-alert-bg: rgba(239,68,68,0.12); --status-info: #2563EB; --status-info-bg: rgba(37,99,235,0.14); /* ----------------------------------------------------------- TYPE — Families ----------------------------------------------------------- */ --font-display: "Inter Tight", "Neue Haas Grotesk Display Pro", "Helvetica Neue", system-ui, sans-serif; --font-text: "Inter", "Neue Haas Grotesk Text Pro", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* ----------------------------------------------------------- TYPE — Scale (10–80px). Display sizes use --font-display, body sizes use --font-text. See "Type in use" preview card. ----------------------------------------------------------- */ --t-display-xl: clamp(56px, 6vw, 80px); --t-display-lg: clamp(40px, 4vw, 56px); --t-display-md: clamp(32px, 3vw, 40px); --t-h1: 28px; --t-h2: 22px; --t-h3: 18px; --t-body-lg: 17px; --t-body: 15px; --t-body-sm: 13px; --t-meta: 12px; --t-eyebrow: 11px; /* uppercase, tracked */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-eyebrow: 0.18em; /* the brand's signature wide-tracked uppercase */ /* ----------------------------------------------------------- SHAPE — Radii / borders / shadows ----------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; /* default for cards on dark */ --radius-lg: 10px; /* deliverable card */ --radius-pill: 999px; --border-hairline: 1px solid var(--hairline); --border-rule: 1px solid var(--hairline-strong); --border-paper: 1px solid var(--rule); --shadow-card-dark: 0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 40px -20px rgba(0,0,0,0.7); --shadow-card-paper: 0 1px 2px rgba(10,15,26,0.06), 0 8px 24px -16px rgba(10,15,26,0.18); --glow-blue: 0 0 0 1px rgba(127,179,255,0.35), 0 0 24px rgba(29,78,216,0.25); /* ----------------------------------------------------------- SPACE — 4px grid. Use these for padding/gap, not raw px. ----------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ----------------------------------------------------------- MOTION — calm, evidence-backed. No bounces. ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC ELEMENT STYLES These set sensible defaults so unstyled markup looks "on-brand". ============================================================ */ html, body { background: var(--surface-0); color: var(--fg-on-dark-1); font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); margin: 0; } h1 { font-size: var(--t-display-md); letter-spacing: 0.02em; } h2 { font-size: var(--t-h1); } h3 { font-size: var(--t-h2); } h4 { font-size: var(--t-h3); } p { margin: 0 0 var(--s-4); color: var(--fg-on-dark-2); } small, .meta { font-size: var(--t-meta); color: var(--fg-on-dark-3); } /* The brand's signature wide-tracked uppercase eyebrow: "BRAND STRATEGY", "OUR MISSION", "OUR OFFERS"... */ .eyebrow { font-family: var(--font-text); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2); } .eyebrow--accent { color: var(--ccp-line); } .eyebrow--on-light { color: var(--ccp-blue-deep); } code, pre, .mono { font-family: var(--font-mono); font-size: 13px; } a { color: var(--ccp-blue-bright); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } a:hover { border-color: currentColor; } hr { border: 0; border-top: 1px solid var(--hairline-strong); margin: var(--s-6) 0; } /* Light-surface override — wrap any deliverable in .on-paper */ .on-paper { background: var(--paper-1); color: var(--fg-on-light-1); } .on-paper p { color: var(--fg-on-light-2); } .on-paper small, .on-paper .meta { color: var(--fg-on-light-3); } .on-paper hr { border-top-color: var(--rule); }