/* ============================================================================ LEGACY ADVISORS CORPORATION — Design Tokens Colors + Type foundations. Import this file first in any artifact. Fonts are loaded from Google Fonts CDN (see @import below). If you are working offline or in production, self-host these families: - Spectral (display serif) https://fonts.google.com/specimen/Spectral - Archivo (sans / UI / body) https://fonts.google.com/specimen/Archivo - IBM Plex Mono (labels / spec data) https://fonts.google.com/specimen/IBM+Plex+Mono ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---------------------------------------------------------------------- */ /* BRAND CORE — pulled straight from the LA Legacy Advisors mark */ /* ---------------------------------------------------------------------- */ --navy: #1c3055; /* primary brand navy — the "L" / "A" in the mark */ --navy-ink: #14233f; /* deepest navy, near-black headings on paper */ --gold: #b0863c; /* brand gold / bronze — flourishes, accents */ --gold-deep: #8a6a2e; /* pressed / hover gold */ /* ---- Navy scale (primary) ------------------------------------------- */ --navy-900: #14233f; --navy-800: #1c3055; /* = --navy */ --navy-700: #243d6b; --navy-600: #2f4f86; --navy-500: #3c63a3; --navy-300: #8aa0c4; --navy-200: #c0cde0; --navy-100: #e2e9f3; --navy-50: #f1f4fa; /* ---- Gold scale (accent) -------------------------------------------- */ --gold-700: #6f5424; --gold-600: #8a6a2e; --gold-500: #b0863c; /* = --gold */ --gold-400: #c6a05c; --gold-300: #d9bd86; --gold-200: #ecdcb9; --gold-100: #f6ecd8; --gold-50: #faf5ea; /* ---- Warm neutrals — the "paper & concrete" greys ------------------- */ --paper: #f6f3ec; /* signature warm ivory page background */ --paper-2: #efeadf; /* slightly deeper paper for alternating sections */ --white: #ffffff; /* clean surface / cards */ --stone-900:#22262c; --stone-700:#3c4148; /* body text on paper */ --stone-600:#565d66; /* secondary text */ --stone-500:#787f88; /* muted / captions */ --stone-400:#a3a8af; /* disabled, hairline-on-dark */ --stone-300:#c9cbcb; --stone-200:#e3e1da; /* hairline borders on paper */ --stone-100:#eeece5; /* ---------------------------------------------------------------------- */ /* SEMANTIC SURFACE + TEXT */ /* ---------------------------------------------------------------------- */ --bg: var(--paper); --bg-alt: var(--paper-2); --bg-inverse: var(--navy-900); --surface: var(--white); --surface-sunken: var(--navy-50); --fg: var(--navy-ink); /* primary text / headings */ --fg-body: var(--stone-700); /* running body copy */ --fg-muted: var(--stone-600); /* secondary */ --fg-subtle: var(--stone-500); /* captions, meta */ --fg-on-navy: #eaf0f8; /* body text on navy */ --fg-on-navy-muted: #9fb1cd; /* secondary text on navy */ --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-text: var(--gold-700); /* gold text on paper (AA-safe) */ --border: var(--stone-200); --border-strong: #d2cfc6; --border-navy: rgba(255,255,255,0.14); /* hairline on navy */ --rule-gold: var(--gold-500); /* signature gold hairline rule */ /* ---- Status (muted, professional) ----------------------------------- */ --success: #2f7d52; --success-bg: #e8f1ea; --warning: #9a6b1a; --warning-bg: #f6ecd5; --error: #a8362f; --error-bg: #f6e6e3; --info: var(--navy-600); --info-bg: var(--navy-50); /* ---------------------------------------------------------------------- */ /* TYPE FAMILIES */ /* ---------------------------------------------------------------------- */ --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-sans: 'Archivo', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- Type scale (major-third-ish, tuned for editorial display) ------ */ --text-xs: 0.75rem; /* 12 — mono labels */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lead body */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 — h4 */ --text-2xl: 2.25rem; /* 36 — h3 */ --text-3xl: 3rem; /* 48 — h2 */ --text-4xl: 4rem; /* 64 — h1 */ --text-5xl: 5.25rem; /* 84 — hero display */ --leading-tight: 1.05; --leading-snug: 1.18; --leading-body: 1.62; --tracking-label: 0.18em; /* mono eyebrow letterspacing */ --tracking-tight: -0.02em; /* display headings */ /* ---------------------------------------------------------------------- */ /* SPACING — 4px base */ /* ---------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; /* ---- Radii — restrained, architectural --------------------------------*/ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---- Elevation — soft, navy-tinted shadows ---------------------------- */ --shadow-sm: 0 1px 2px rgba(20,35,63,0.06), 0 1px 1px rgba(20,35,63,0.04); --shadow-md: 0 4px 14px rgba(20,35,63,0.08), 0 2px 4px rgba(20,35,63,0.05); --shadow-lg: 0 18px 40px rgba(20,35,63,0.14), 0 6px 14px rgba(20,35,63,0.07); --shadow-xl: 0 30px 70px rgba(20,35,63,0.20); /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --maxw: 1200px; /* content container */ --maxw-prose: 68ch; } /* ========================================================================== SEMANTIC TYPOGRAPHY — apply these classes or copy the rules ========================================================================== */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-text); } .ds-display { font-family: var(--font-display); font-weight: 400; font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } h1, .ds-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); } h2, .ds-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg); } h3, .ds-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--fg); } h4, .ds-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); } h5, .ds-h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg); line-height: 1.3; color: var(--fg); } .ds-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg-muted); } body, .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg-body); } .ds-small { font-size: var(--text-sm); line-height: 1.5; color: var(--fg-subtle); } .ds-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); }