/* ============================================================ BEE KI-Beratung — Design Tokens (Colors & Type) Source of truth: bee-website/index.html ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); :root { /* ─── CORE PALETTE ────────────────────────────────────────── */ /* Anchor tones — the brand lives on a strict black/white/blue axis. */ --black: #0A0A0A; /* primary ink + dark hero surfaces */ --white: #FFFFFF; /* base surface */ /* Signature blue — used surgically for accent, CTA, emphasis. */ --blue: #E94B3C; /* primary brand red */ --blue-light: #FB5D4E; /* hover state / on-dark accents */ --blue-dark: #D7392A; /* pressed state / darker CTAs */ /* Neutrals — three steps only. No 10-step gray ramp. */ --gray: #7A7A8A; /* body-text secondary / muted copy */ --gray-mid: #E8E8EC; /* hairline borders, dividers */ --gray-light: #F5F5F7; /* subtle section background, card fill */ /* ─── SEMANTIC ALIASES ────────────────────────────────────── */ --fg-1: var(--black); /* primary text */ --fg-2: var(--gray); /* secondary / muted text */ --fg-on-dark: var(--white); /* text on black surfaces */ --fg-on-dark-muted: rgba(255,255,255,0.55); --fg-accent: var(--blue); /* link, highlight, emphasis */ --fg-accent-on-dark: var(--blue-light); --bg-base: var(--white); --bg-soft: var(--gray-light); /* alt section bg */ --bg-dark: var(--black); /* hero, CTA, footer */ --border-hairline: var(--gray-mid); --border-on-dark: rgba(255,255,255,0.08); /* Accent tints — translucent overlays of the brand blue. */ --blue-tint-08: rgba(233,75,60,0.08); --blue-tint-10: rgba(233,75,60,0.10); --blue-tint-12: rgba(233,75,60,0.12); --blue-tint-15: rgba(233,75,60,0.15); --blue-tint-20: rgba(233,75,60,0.20); --blue-tint-25: rgba(233,75,60,0.25); --blue-tint-30: rgba(233,75,60,0.30); /* ─── SPACING ─────────────────────────────────────────────── */ --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: 100px; --container-max: 1200px; --section-pad-y: 100px; --section-pad-x: 32px; /* ─── RADIUS ──────────────────────────────────────────────── */ --radius-sm: 8px; /* nav CTA, tags base */ --radius-md: 10px; /* buttons, inputs */ --radius-lg: 14px; /* inner cards, channel tiles */ --radius-xl: 16px; /* primary cards */ --radius-2xl: 20px; /* feature cards, profile card */ --radius-pill: 100px; /* badges, stat pills */ /* ─── ELEVATION ───────────────────────────────────────────── */ /* Shadows are rare and soft. Use on hover lift only. */ --shadow-lift: 0 20px 60px rgba(0,0,0,0.08); --shadow-subtle: 0 4px 16px rgba(0,0,0,0.04); /* ─── MOTION ──────────────────────────────────────────────── */ --ease: cubic-bezier(.2,.6,.2,1); --dur-fast: 0.2s; --dur-med: 0.25s; --dur-slow: 0.6s; /* ─── TYPOGRAPHY ──────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* weights used across the system */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-xbold: 800; --fw-black: 900; /* Type scale — anchored to the website. Headlines are heavy, tight. */ --fs-hero: clamp(42px, 6vw, 80px); --fs-section: clamp(32px, 4vw, 52px); --fs-h3: 38px; --fs-h4: 28px; --fs-h5: 22px; --fs-h6: 18px; --fs-body-lg: 18px; --fs-body: 15px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 12px; --fs-label: 11px; /* all-caps section labels */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --ls-hero: -2px; --ls-section: -1.5px; --ls-h: -1px; --ls-h-tight: -0.5px; --ls-body: 0; --ls-label: 2px; /* widely tracked uppercase */ } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .bee-hero { font-family: var(--font-sans); font-size: var(--fs-hero); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); color: var(--fg-on-dark); } .bee-h2, .bee-section-title { font-family: var(--font-sans); font-size: var(--fs-section); font-weight: var(--fw-black); line-height: var(--lh-snug); letter-spacing: var(--ls-section); color: var(--fg-1); } .bee-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-black); line-height: var(--lh-snug); letter-spacing: var(--ls-h); color: var(--fg-1); } .bee-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-black); line-height: var(--lh-snug); letter-spacing: var(--ls-h); color: var(--fg-1); } .bee-h5 { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: var(--fw-xbold); line-height: var(--lh-snug); letter-spacing: var(--ls-h-tight); color: var(--fg-1); } .bee-h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: var(--fw-xbold); line-height: var(--lh-snug); letter-spacing: var(--ls-h-tight); color: var(--fg-1); } .bee-body-lg, .bee-lead { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: var(--fw-regular); line-height: var(--lh-loose); color: var(--fg-2); } .bee-body, p { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-loose); color: var(--fg-2); } .bee-caption { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--fg-2); } .bee-label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-accent); } .bee-tag { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: 0.2px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--blue-tint-10); color: var(--blue); }