/* ============================================================ Xpand2B — Colors & Type foundations YOUR MARKET ENTRY & SALES AGENT FOR GERMANY Source of truth: Xpand2B-CI.md (Stand 06.11.2026) Built originally with Inter + Tailwind-style tokens. ============================================================ */ @import url("fonts/inter.css"); :root { /* ---------- BRAND PALETTE (base) ---------- */ --navy: #1B2E50; /* Primary. Trust · stability · expertise */ --gold: #C9A84C; /* Accent. Wealth · prestige · success */ --warmgrey: #F0EDE6; /* Background. Neutral · inviting */ --midblue: #3B6EA5; /* Links · hover (CI-Platzhalter, noch zu bestätigen) */ --anthracite: #33322F; /* Fließtext (CI-Platzhalter, noch zu bestätigen) */ --anthracite-80: #5F5E5C; /* Sekundärtext · Captions */ --line: #E2DED5; /* Hairline zwischen hellen Flächen */ --white: #FFFFFF; /* Cards · surfaces (use sparingly) */ --ink: #10192B; /* Sehr dunkle Betonung (CI-Platzhalter) */ /* ---------- NAVY / GOLD ALPHAS (overlays, borders) ---------- */ --navy-90: rgba(27,46,80,0.90); --navy-88: rgba(27,46,80,0.88); --navy-85: rgba(27,46,80,0.85); --navy-70: rgba(27,46,80,0.70); --navy-30: rgba(27,46,80,0.30); --navy-15: rgba(27,46,80,0.15); --navy-08: rgba(27,46,80,0.08); --gold-60: rgba(201,168,76,0.60); --gold-15: rgba(201,168,76,0.15); /* ---------- SEMANTIC SURFACE / TEXT ---------- */ --bg: var(--warmgrey); /* page background */ --surface: var(--white); /* cards on warm-grey */ --surface-warm: rgba(240,237,230,0.30); /* tinted card on white */ --surface-dark: var(--navy); /* dark cards / sections */ --fg1: var(--anthracite); /* primary body text */ --fg2: var(--anthracite-80); /* secondary body */ --fg3: var(--anthracite-80); /* muted body / captions */ --fg4: var(--anthracite-80); /* labels over light */ --fg-on-navy: var(--white); --fg-on-navy-2: rgba(255,255,255,0.80); --fg-on-navy-3: rgba(255,255,255,0.70); --fg-on-navy-4: rgba(255,255,255,0.50); --fg-on-navy-faint: rgba(255,255,255,0.40); --heading: var(--navy); /* H1–H4 on light */ --accent: var(--gold); /* eyebrows, rules, CTAs */ --link: var(--midblue); --border: var(--navy-08); /* hairline on light cards */ --border-strong: var(--navy-15); /* inputs */ --border-on-navy: rgba(255,255,255,0.10); /* ---------- TYPE FAMILY ---------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---------- TYPE SCALE (px values from the source) ---------- */ --fs-display: 76.8px; /* hero H1 */ --fs-h1: 44px; /* section H2 (largest in body) */ --fs-h2: 36px; --fs-h3: 20px; /* card title */ --fs-h4: 17px; /* small heading */ --fs-lead: 20.8px; /* hero paragraph */ --fs-body: 17px; /* default paragraph */ --fs-body-sm: 15px; /* card body */ --fs-meta: 14px; /* nav / labels */ --fs-eyebrow: 12.8px; /* tracked overline */ --fs-caption: 11.2px; /* tiny label */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed:1.75; /* card body */ --lh-loose: 1.8; /* default paragraph */ --ls-display: -0.768px; --ls-eyebrow: 1.28px; --ls-pill: 1.2px; --ls-caption: 0.56px; --ls-nav: 0.35px; /* ---------- SPACING (8pt base; section rhythm) ---------- */ --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-32: 128px; /* standard section vertical padding */ --gutter: 48px; /* page side padding */ --content-max: 1184px; /* inner content width (1280 − 48·2) */ /* ---------- RADII ---------- */ --r-xs: 0; /* hero buttons */ --r-sm: 0; /* inputs, small icons, form buttons */ --r-md: 0; /* cards, pills-on-cards */ --r-pill: 0;/* badges, step circles */ /* ---------- SHADOWS (Tailwind-derived) ---------- */ --shadow-sm: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 200ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .x-display { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg-on-navy); } .x-h1, .x-h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-snug); color: var(--heading); } .x-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--heading); } .x-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: 1.5; color: var(--heading); } .x-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-eyebrow); line-height: 1.5; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy); /* Gold nur auf Navy */ } .x-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg-on-navy-2); } .x-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg2); } .x-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--fg3); } .x-meta { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-meta); letter-spacing: var(--ls-nav); color: var(--fg2); } .x-caption { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.5; letter-spacing: var(--ls-caption); color: var(--fg4); } /* Gold rule used under section eyebrows/headings */ .x-rule { width: 64px; height: 2px; background: var(--gold); border: 0; } .x-rule--lg { width: 80px; }