/** * LAUTERTUN PARTNERS — Brand Identity System * CSS Custom Properties * ───────────────────────────────────────────────────────────────────────────── * Import or link this file to apply the full brand token set to any web project. * All tokens are defined on :root for global scope. * * Google Fonts import (include in or at top of your main CSS): * @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap'); * * Tagline: Restructuring · Advisory · Financial Leadership & Management */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap'); :root { /* ── COLORS ─────────────────────────────────────────────────────────────── */ --color-ink-navy: #1A2535; /* Primary — headlines, wordmark part 1, dark bg */ --color-gold: #B8934A; /* Primary — accents, rules, wordmark part 2 */ --color-steel: #3A5472; /* Secondary — body copy, secondary text */ --color-sage: #4A7868; /* Tertiary — use sparingly */ --color-parchment: #F6F2EB; /* Surface — highlight boxes, section bgs */ --color-cream: #FAF8F4; /* Surface — page/card backgrounds */ --color-light-rule: #E8E4DC; /* Utility — table borders, dividers */ --color-white: #FFFFFF; --color-black: #000000; /* Semantic aliases */ --color-text-primary: var(--color-ink-navy); --color-text-body: var(--color-steel); --color-text-muted: var(--color-light-rule); --color-accent: var(--color-gold); --color-bg-page: var(--color-cream); --color-bg-surface: var(--color-parchment); --color-border: var(--color-light-rule); /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */ --font-serif: "Cormorant Garamond", Georgia, serif; --font-sans: "DM Sans", system-ui, sans-serif; --font-legal: "Times New Roman", Times, serif; /* Scale */ --text-xs: 0.6875rem; /* 11px — tagline / overlines */ --text-sm: 0.75rem; /* 12px — footnotes / captions */ --text-base: 0.875rem; /* 14px — standard body */ --text-md: 1rem; /* 16px — slightly larger body */ --text-lg: 1.125rem; /* 18px — lead / intro */ --text-xl: 1.5rem; /* 24px — subsection heads */ --text-2xl: 2rem; /* 32px — section heads */ --text-3xl: 2.75rem; /* 44px — display */ --text-4xl: 4rem; /* 64px — hero / cover title */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-legal: 1.0; /* single-spaced legal docs */ /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* wordmark / all-caps labels */ /* ── SPACING (base-8) ───────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ── BORDERS & RULES ────────────────────────────────────────────────────── */ --border-hairline: 1px solid var(--color-light-rule); --border-thin: 1px solid var(--color-steel); --border-gold-rule: 3px solid var(--color-gold); --border-gold-thick: 4px solid var(--color-gold); /* highlight box left accent */ --border-radius-sm: 2px; --border-radius-md: 4px; --border-radius-lg: 8px; /* ── SHADOWS ────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(26, 37, 53, 0.08); --shadow-md: 0 4px 12px rgba(26, 37, 53, 0.10); --shadow-lg: 0 8px 24px rgba(26, 37, 53, 0.14); /* ── COMPONENT TOKENS ───────────────────────────────────────────────────── */ /* Highlight box (proposal section callouts) */ --highlight-bg: var(--color-parchment); --highlight-border-left: var(--border-gold-thick); --highlight-border-top: 1px solid var(--color-gold); --highlight-label-color: var(--color-gold); --highlight-padding: 16px 20px; /* Header / letterhead */ --header-rule-height: 3px; --header-rule-color: var(--color-gold); --header-bg: var(--color-white); /* Footer */ --footer-rule-color: var(--color-light-rule); --footer-text-color: var(--color-steel); --footer-accent-color: var(--color-gold); --footer-font-size: var(--text-xs); /* Tables — proposal */ --table-header-bg: var(--color-ink-navy); --table-header-text: var(--color-white); --table-row-alt-bg: var(--color-cream); --table-row-bg: var(--color-white); --table-border: var(--color-light-rule); /* Signature lines */ --sig-line-color: var(--color-ink-navy); --sig-line-width: 1px; /* ── LOGOMARK ───────────────────────────────────────────────────────────── */ /* Inline SVG as background-image; or use the src below in HTML */ --logomark-size-sm: 24px; --logomark-size-md: 36px; --logomark-size-lg: 48px; --logomark-size-hero: 120px; } /* ── UTILITY CLASSES ─────────────────────────────────────────────────────── */ /* Wordmark */ .ltp-wordmark { font-family: var(--font-serif); font-weight: var(--weight-regular); letter-spacing: var(--tracking-widest); color: var(--color-ink-navy); } .ltp-wordmark span { color: var(--color-gold); } /* Tagline */ .ltp-tagline { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wider); color: var(--color-steel); text-transform: none; } /* Section overline label (e.g. "KEY FINDINGS") */ .ltp-overline { font-family: var(--font-sans); font-size: 0.625rem; /* 10px */ font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); color: var(--color-gold); text-transform: uppercase; } /* Proposal section number + heading */ .ltp-section-number { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-gold); } .ltp-section-title { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-ink-navy); text-transform: uppercase; } /* Gold rule divider */ .ltp-gold-rule { border: none; border-bottom: var(--border-gold-rule); margin: var(--space-4) 0; } /* Thin rule divider */ .ltp-thin-rule { border: none; border-bottom: var(--border-hairline); margin: var(--space-4) 0; } /* Highlight / callout box */ .ltp-highlight-box { background: var(--highlight-bg); border-left: var(--highlight-border-left); border-top: var(--highlight-border-top); padding: var(--highlight-padding); } .ltp-highlight-box .ltp-overline { display: block; margin-bottom: var(--space-3); } .ltp-highlight-box li { list-style: none; padding: var(--space-1) 0; font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-steel); } .ltp-highlight-box li::before { content: "— "; color: var(--color-gold); font-weight: var(--weight-semibold); } /* Body copy */ .ltp-body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-steel); } /* Legal body */ .ltp-legal { font-family: var(--font-legal); font-size: var(--text-md); line-height: var(--leading-legal); color: var(--color-black); text-align: justify; } /* ── LOGOMARK USAGE ──────────────────────────────────────────────────────── */ /* Embed the logo as an using the base64 data URI, or inline the SVG.

Or inline the raw SVG from lautertun-brand.js: LOGOMARK_SVG */