/* ============================================================ CHARLESGATE CAPITAL · COLORS & TYPE The visual foundation of every CG Capital surface. Brand-aligned: deep navy primary, white paper, coral accent with sky-blue · yellow · deep-navy as supporting accents. ============================================================ */ /* ---- Webfonts ------------------------------------------- */ /* Cohesion-first type strategy: • Satoshi — primary sans (matches charlesgate.com body) • Poppins — the all-caps wordmark + eyebrow voice (matches website) • Newsreader — NEW. Editorial serif for display & pull-quote moments. Newsreader's optical-size italic is the "upscaled" lift. • JetBrains Mono — monospace for tabular numerics + technical labels. */ /* fonts loaded via in index.html */ /* Satoshi — vendored locally (woff2 from Fontshare CDN) so the brand sans works offline and in exports. Variable axis 300–900 + italic. */ @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('brand/fonts/satoshi-italic-variable.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; } /* ============================================================ 1 · COLOR TOKENS Matched to the Charlesgate brand guideline palette (Primary slate #566374 → deepened to #243A4D for upscale feel, White, Cool Grey #A1A1A1, Coral #E4866D, Yellow #FBEA87, Sky-Blue #E0EAF8, Deep Navy #1E4258). Variable names preserved (--cg-ink, --cg-paper, --cg-brass) so existing components re-theme in place. ============================================================ */ :root { /* --- INK (deep navy primary — the "deeper, upscale" tone) -- The original brand primary #566374 is preserved at ink-60. */ --cg-ink: #243A4D; /* primary fg / brand · deep navy */ --cg-ink-90: #2D4658; --cg-ink-80: #3D5366; --cg-ink-60: #566374; /* original brand primary slate */ --cg-ink-40: #7F8A98; --cg-ink-20: #B5BCC6; --cg-ink-10: #D4D9E0; --cg-ink-05: #EDEFF2; /* --- PAPER (white-leaning neutrals — brand white base) --- */ --cg-paper: #FFFFFF; /* primary bg · pure white */ --cg-paper-deep: #F4F6FA; /* sunken · faint sky-blue cast */ --cg-paper-soft: #FAFBFD; /* raised / hover */ --cg-page: #FFFFFF; /* lightest */ --cg-bone: #DDE2E8; /* hairline borders · cool grey */ /* --- BRASS (now CORAL — the warm distinguishing accent) --- Variable kept as --cg-brass for compatibility; semantic role is the same: single sparing accent, never on primary CTAs. Brand coral #E4866D anchors the palette. */ --cg-brass: #E4866D; /* brand coral */ --cg-brass-90: #C76851; /* deeper coral · for text on light */ --cg-brass-70: #EAA08C; --cg-brass-40: #F3C9BD; --cg-brass-20: #F8E0D6; --cg-brass-tint: #FCF0EB; /* --- SUPPORTING BRAND ACCENTS (use sparingly) ----------- */ --cg-navy-deep: #1E4258; /* brand deep navy · dark surfaces */ --cg-navy-deep-90: #173447; --cg-skyblue: #E0EAF8; /* brand pale blue · surfaces, tags */ --cg-skyblue-90: #B8C8E0; /* deeper version for text/borders */ --cg-yellow: #FBEA87; /* brand yellow · highlights */ --cg-yellow-90: #E8D26B; --cg-grey: #A1A1A1; /* brand cool grey */ /* --- DATA / SEMANTIC ------------------------------------ */ --cg-positive: #2E5D44; /* evergreen — up, gain */ --cg-positive-tint:#D9E4DC; --cg-negative: #C76851; /* deep coral — down, alert */ --cg-negative-tint:#F3D9CF; --cg-caution: #B89026; /* deep yellow — attention */ --cg-caution-tint: #F7ECB5; --cg-info: #1E4258; /* deep navy — informational */ --cg-info-tint: #D5DDE7; /* --- DATA VIZ PALETTE ----------------------------------- */ /* Brand-derived, ordered by emphasis. Analytical, not promotional. */ --cg-data-1: #243A4D; /* primary navy */ --cg-data-2: #1E4258; /* deep navy */ --cg-data-3: #E4866D; /* coral */ --cg-data-4: #E8D26B; /* deep yellow */ --cg-data-5: #566374; /* slate */ --cg-data-6: #A1A1A1; /* cool grey */ /* --- SEMANTIC ROLES (use these in components) ----------- */ --cg-fg: var(--cg-ink); --cg-fg-muted: var(--cg-ink-60); --cg-fg-quiet: var(--cg-ink-40); --cg-fg-inverse: var(--cg-paper); --cg-bg: var(--cg-paper); --cg-bg-raised: var(--cg-paper-soft); --cg-bg-sunken: var(--cg-paper-deep); --cg-bg-inverse: var(--cg-navy-deep); /* deepest for inverse */ --cg-border: var(--cg-bone); --cg-border-strong:var(--cg-ink-20); --cg-rule: var(--cg-ink); /* editorial hairline */ --cg-accent: var(--cg-brass); --cg-accent-soft: var(--cg-brass-tint); /* --- SPACING SCALE (8pt base, with editorial 12 + 24) --- */ --cg-space-1: 4px; --cg-space-2: 8px; --cg-space-3: 12px; --cg-space-4: 16px; --cg-space-5: 24px; --cg-space-6: 32px; --cg-space-7: 48px; --cg-space-8: 64px; --cg-space-9: 96px; --cg-space-10: 128px; /* --- RADII (tight, document-like, never pillowy) -------- */ --cg-radius-0: 0px; --cg-radius-1: 2px; --cg-radius-2: 4px; --cg-radius-3: 8px; --cg-radius-pill: 999px; /* --- BORDERS -------------------------------------------- */ --cg-hairline: 1px solid var(--cg-bone); --cg-rule-1: 1px solid var(--cg-ink); --cg-rule-2: 2px solid var(--cg-ink); /* --- SHADOWS (used sparingly — document aesthetic) ------ */ --cg-shadow-0: none; --cg-shadow-1: 0 1px 0 rgba(36,58,77,0.05), 0 1px 2px rgba(36,58,77,0.04); --cg-shadow-2: 0 2px 4px rgba(36,58,77,0.06), 0 8px 16px rgba(36,58,77,0.06); --cg-shadow-3: 0 8px 24px rgba(36,58,77,0.10), 0 24px 60px rgba(36,58,77,0.10); --cg-shadow-inset: inset 0 1px 0 rgba(36,58,77,0.04); /* --- MOTION --------------------------------------------- */ --cg-ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* deliberate */ --cg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* settled */ --cg-duration-1: 120ms; /* @kind other */ --cg-duration-2: 220ms; /* @kind other */ --cg-duration-3: 420ms; /* @kind other */ /* --- TYPE TOKENS ---------------------------------------- Cohesion-first: Satoshi (body) + Poppins (caps wordmark) match the existing charlesgate.com surfaces. Newsreader is the new editorial serif — the upscale lift for display moments. */ --cg-font-sans: 'Satoshi', 'Söhne', system-ui, sans-serif; --cg-font-serif: 'Newsreader', 'Spectral', 'Source Serif Pro', Georgia, serif; --cg-font-wordmark: 'Poppins', 'Satoshi', sans-serif; --cg-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* --- TYPE SCALE (modular, document-feel) ---------------- */ /* Tightly-packed editorial scale, slight ratio of ~1.2-1.25 */ --cg-text-3xs: 10px; --cg-text-2xs: 11px; --cg-text-xs: 12px; --cg-text-sm: 13px; --cg-text-base: 15px; --cg-text-md: 17px; --cg-text-lg: 20px; --cg-text-xl: 24px; --cg-text-2xl: 30px; --cg-text-3xl: 38px; --cg-text-4xl: 48px; --cg-text-5xl: 64px; --cg-text-6xl: 88px; --cg-text-7xl: 120px; /* --- LINE HEIGHTS --------------------------------------- */ --cg-lh-tight: 1.05; /* @kind other */ --cg-lh-snug: 1.2; /* @kind other */ --cg-lh-normal: 1.45; /* @kind other */ --cg-lh-relaxed: 1.6; /* @kind other */ --cg-lh-loose: 1.75; /* @kind other */ /* --- TRACKING (letter-spacing — distinctive to CG) ------ */ /* CG caps treatment runs in Poppins with 18–22% tracking — refined, not industrial. Lower-cased body never gets letter-spacing. */ --cg-track-eyebrow: 0.22em; /* "01 · SECTION" */ --cg-track-label: 0.14em; /* small caps tags */ --cg-track-display: -0.01em; /* Newsreader display — tight */ --cg-track-tight: -0.015em; --cg-track-normal: 0; /* @kind spacing */ } /* ============================================================ 2 · BASELINE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--cg-bg); color: var(--cg-fg); font-family: var(--cg-font-sans); font-size: var(--cg-text-base); line-height: var(--cg-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11', 'kern'; font-variant-numeric: oldstyle-nums proportional-nums; } /* Letter-spaced uppercase strings need word-spacing so multi-word strings ("T H E O A S I S") don't collapse into one block once letter-spacing eats the inter-word gap. This rule covers any inline-styled positive tracking commonly used in this system. */ [style*="letter-spacing: 0.12em"], [style*="letter-spacing: 0.14em"], [style*="letter-spacing: 0.16em"], [style*="letter-spacing: 0.18em"], [style*="letter-spacing: 0.20em"], [style*="letter-spacing: 0.2em"], [style*="letter-spacing: 0.22em"], [style*="letter-spacing: 0.24em"], [style*="letter-spacing: 0.28em"], [style*="letter-spacing: 0.32em"], [style*="letter-spacing:0.18em"], [style*="letter-spacing:0.22em"], [style*="letter-spacing:0.24em"], [style*="letter-spacing:0.32em"] { word-spacing: 0.4em; } /* When inline letter-spacing is paired with text-transform: uppercase, default that string to the Poppins wordmark voice. Honor any explicit font-family that overrides it (mono, serif, etc). */ [style*="text-transform:uppercase"][style*="letter-spacing"]:not([style*="font-family"]), [style*="text-transform: uppercase"][style*="letter-spacing"]:not([style*="font-family"]) { font-family: var(--cg-font-wordmark); } /* ============================================================ 3 · TYPE STYLES (semantic + utility) ============================================================ */ /* --- DISPLAY (cover hero, big editorial moments) --------- */ .cg-display, h1.cg-display { font-family: var(--cg-font-serif); font-weight: 400; font-style: italic; /* signature editorial flourish */ font-size: var(--cg-text-6xl); line-height: var(--cg-lh-tight); letter-spacing: -0.02em; /* Newsreader italic looks best tighter */ color: var(--cg-ink); font-optical-sizing: auto; } .cg-display-sans { font-family: var(--cg-font-sans); font-weight: 600; font-size: var(--cg-text-6xl); line-height: var(--cg-lh-tight); letter-spacing: var(--cg-track-tight); } /* --- HEADINGS ------------------------------------------- */ h1, .cg-h1 { font-family: var(--cg-font-sans); font-weight: 500; font-size: var(--cg-text-4xl); line-height: var(--cg-lh-snug); letter-spacing: var(--cg-track-tight); color: var(--cg-ink); text-wrap: balance; } h2, .cg-h2 { font-family: var(--cg-font-sans); font-weight: 500; font-size: var(--cg-text-3xl); line-height: var(--cg-lh-snug); letter-spacing: var(--cg-track-tight); color: var(--cg-ink); text-wrap: balance; } h3, .cg-h3 { font-family: var(--cg-font-sans); font-weight: 500; font-size: var(--cg-text-2xl); line-height: var(--cg-lh-snug); color: var(--cg-ink); } h4, .cg-h4 { font-family: var(--cg-font-sans); font-weight: 500; font-size: var(--cg-text-xl); line-height: var(--cg-lh-snug); color: var(--cg-ink); } h5, .cg-h5 { font-family: var(--cg-font-sans); font-weight: 600; font-size: var(--cg-text-md); line-height: var(--cg-lh-snug); color: var(--cg-ink); } /* --- EYEBROW (signature CG element — Poppins, caps, tracked) --- */ /* "CHARLESGATE is always written in all caps." Same caps voice carries into every section eyebrow, label, and footer mark. */ .cg-eyebrow { font-family: var(--cg-font-wordmark); font-weight: 500; font-size: var(--cg-text-xs); line-height: 1; letter-spacing: var(--cg-track-eyebrow); word-spacing: 0.4em; text-transform: uppercase; color: var(--cg-ink); } .cg-eyebrow-muted { color: var(--cg-fg-muted); } .cg-eyebrow-brass { color: var(--cg-brass-90); } /* --- LABEL (slightly looser tracking, used in tables) --- */ .cg-label { font-family: var(--cg-font-wordmark); font-weight: 500; font-size: var(--cg-text-2xs); letter-spacing: var(--cg-track-label); word-spacing: 0.3em; text-transform: uppercase; color: var(--cg-fg-muted); } /* --- BODY ---------------------------------------------- */ p, .cg-body { font-family: var(--cg-font-sans); font-weight: 400; font-size: var(--cg-text-base); line-height: var(--cg-lh-normal); color: var(--cg-ink-90); text-wrap: pretty; } .cg-body-lg { font-size: var(--cg-text-md); line-height: var(--cg-lh-relaxed); } .cg-body-sm { font-size: var(--cg-text-sm); line-height: var(--cg-lh-normal); color: var(--cg-ink-80); } .cg-caption { font-size: var(--cg-text-xs); line-height: var(--cg-lh-normal); color: var(--cg-fg-muted); } /* --- PULL QUOTE / EDITORIAL ITALIC --------------------- */ .cg-quote { font-family: var(--cg-font-serif); font-style: italic; font-weight: 400; font-size: var(--cg-text-2xl); line-height: var(--cg-lh-snug); color: var(--cg-ink); text-wrap: balance; } .cg-quote-sm { font-family: var(--cg-font-serif); font-style: italic; font-weight: 400; font-size: var(--cg-text-md); line-height: var(--cg-lh-relaxed); color: var(--cg-ink); } /* --- MONO / TABULAR ------------------------------------ */ .cg-mono { font-family: var(--cg-font-mono); font-feature-settings: 'tnum', 'zero'; font-variant-numeric: tabular-nums; } .cg-num { font-family: var(--cg-font-sans); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; } .cg-num-display { font-family: var(--cg-font-sans); font-weight: 400; font-size: var(--cg-text-5xl); line-height: 1; letter-spacing: var(--cg-track-tight); font-variant-numeric: tabular-nums lining-nums; color: var(--cg-ink); } /* --- LINKS --------------------------------------------- */ a, .cg-link { color: var(--cg-ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; transition: background-size var(--cg-duration-2) var(--cg-ease); } a:hover, .cg-link:hover { background-size: 100% 2px; color: var(--cg-brass-90); } /* --- LETTER-SPACED CAPS HELPER (Poppins wordmark voice) ---- Use on inline strings that should render in the CG wordmark voice. This is the canonical way to write "CHARLESGATE" — always all-caps, tracked, in Poppins to match the website wordmark. */ .cg-spaced, .cg-wordmark { font-family: var(--cg-font-wordmark); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; word-spacing: 0.5em; } .cg-wordmark-lg { font-family: var(--cg-font-wordmark); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; word-spacing: 0.45em; } /* --- RULES (editorial hairlines) ----------------------- */ .cg-rule { border-top: var(--cg-rule-1); } .cg-rule-thick { border-top: var(--cg-rule-2); } .cg-rule-hairline { border-top: var(--cg-hairline); }