/* ============================================================ Rolutec GmbH — Design Tokens Colors & Typography ============================================================ */ /* Webfont — Manrope Variable, self-hosted (DSGVO: keine Google-Fonts-CDN) Eine WOFF2 deckt alle Weights von 200 bis 800 ab. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-variable.woff2') format('woff2-variations'), url('fonts/manrope-variable.woff2') format('woff2'); } :root { /* ------- BRAND CORE ------- */ --rolutec-blue: #0E0BB3; /* primary highlight (user-confirmed) */ --rolutec-blue-deep: #08086E; /* pressed / dark blue */ --rolutec-blue-soft: #2825D8; /* hover / lighter */ --rolutec-orange: #FC5A11; /* secondary highlight (user brief) */ --rolutec-orange-deep: #D34509; /* pressed orange */ --rolutec-blue-faint: #E8E7FA; /* tint backgrounds */ --rolutec-orange-faint:#FFE5D8; /* ------- BACKGROUNDS ------- */ --bg-warm-white: #FBF8F3; /* primary page background — warm white */ --bg-warm-white-2: #F5F1EA; /* slightly deeper card panel */ --bg-cream: #FAF6EE; /* alt section bg */ --bg-ink: #0C0A1F; /* near-black blue ink for footer / dark sections */ --bg-ink-2: #14122B; /* ------- NEUTRALS ------- */ --neutral-0: #FFFFFF; --neutral-50: #F8F6F1; --neutral-100: #EFEAE0; --neutral-200: #D9D2C5; --neutral-300: #BCB3A1; --neutral-400: #908774; --neutral-500: #6B6357; --neutral-600: #4A453E; --neutral-700: #2E2B26; --neutral-800: #1A1814; --neutral-900: #0C0A07; /* ------- SEMANTIC FOREGROUND ------- */ --fg-1: var(--neutral-900); /* primary text */ --fg-2: var(--neutral-600); /* secondary text */ --fg-3: var(--neutral-400); /* muted / captions */ --fg-on-blue: #FFFFFF; --fg-on-dark: #FFFFFF; --fg-on-orange:#FFFFFF; --fg-eyebrow: var(--rolutec-orange); /* small eyebrow / kicker label */ /* ------- BORDERS / DIVIDERS ------- */ --border-1: rgba(12, 10, 31, 0.08); --border-2: rgba(12, 10, 31, 0.14); --border-on-dark: rgba(255,255,255,0.12); /* ------- STATE ------- */ --hover-overlay: rgba(12, 10, 31, 0.04); --press-overlay: rgba(12, 10, 31, 0.10); --focus-ring: 0 0 0 3px rgba(21,17,231,0.30); /* ------- SHADOW SYSTEM ------- */ --shadow-xs: 0 1px 2px rgba(12,12,13,0.05); --shadow-sm: 0 1px 4px rgba(12,12,13,0.05), 0 1px 4px rgba(12,12,13,0.10); --shadow-md: 0 6px 18px rgba(12,12,13,0.08), 0 2px 4px rgba(12,12,13,0.05); --shadow-lg: 0 18px 40px rgba(12,12,13,0.10), 0 4px 12px rgba(12,12,13,0.06); --shadow-blue: 0 12px 32px rgba(21,17,231,0.28); /* ------- RADII ------- Brand rule: maximum 4px corners everywhere. Pills (999px) reserved for circular/elliptical UI only (avatars, dot indicators) — NOT for buttons. */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 4px; --r-xl: 4px; --r-2xl: 4px; --r-pill: 999px; /* circles / dots only */ /* ------- SPACING (8px base) ------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ------- TYPE FAMILIES ------- */ --font-display: "Manrope", system-ui, -apple-system, sans-serif; --font-body: "Manrope", system-ui, -apple-system, sans-serif; --font-ui: "Manrope", system-ui, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", monospace; /* ------- SEMANTIC TYPE TOKENS ------- */ --display-1-size: 128px; --display-1-lh: 1.05; --display-1-tr: -0.02em; --display-2-size: 88px; --display-2-lh: 1.05; --display-2-tr: -0.01em; --h1-size: 57px; --h1-lh: 1.02; --h2-size: 44px; --h2-lh: 1.05; --h3-size: 31px; --h3-lh: 1.25; --h4-size: 24px; --h4-lh: 1.35; --eyebrow-size: 18px; --eyebrow-lh: 1.33; --eyebrow-tr: 0.02em; --body-lg-size: 17px; --body-lg-lh: 1.65; --body-size: 16px; --body-lh: 1.6; --body-sm-size: 14px; --body-sm-lh: 1.55; --caption-size: 12px; --caption-lh: 1.4; } /* ============================================================ Base typography (semantic classes) ============================================================ */ html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-warm-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-1, .display-2, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: -0.025em; color: var(--fg-1); margin: 0; } .eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; margin: 0; } .display-1 { font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-tr); } .display-2 { font-size: var(--display-2-size); line-height: var(--display-2-lh); } h1, .h1 { font-size: var(--h1-size); line-height: var(--h1-lh); } h2, .h2 { font-size: var(--h2-size); line-height: var(--h2-lh); } h3, .h3 { font-size: var(--h3-size); line-height: var(--h3-lh); } h4, .h4 { font-size: var(--h4-size); line-height: var(--h4-lh); } .eyebrow { font-size: var(--eyebrow-size); line-height: var(--eyebrow-lh); letter-spacing: var(--eyebrow-tr); color: var(--fg-eyebrow); text-transform: uppercase; } p, .body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-2); margin: 0; } .body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); letter-spacing: -0.01em; } .body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); } .caption { font-family: var(--font-body); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--fg-3); } .ui { font-family: var(--font-ui); font-weight: 500; font-size: 16px; } /* utility: blue link */ .link { color: var(--rolutec-blue); text-decoration: none; border-bottom: 1px solid currentColor; transition: color 120ms ease; } .link:hover { color: var(--rolutec-blue-deep); }