/* ============================================================ OFE Brand System – Design Tokens strom-geld.de · Oliver Fritz Energielösungen ------------------------------------------------------------ Single source of truth for color, type, spacing, radius, shadow and motion tokens. Drop this file at the top of any stylesheet (or import from Tailwind via @import) and the rest of the system "just works". ============================================================ */ :root { /* — Brand: Primärgrün ————————————————————————————————— */ --ofe-green: oklch(75.5% 0.177 125.8); /* #94C22B — Hero/CTA/Accent */ --ofe-green-dark: oklch(62.0% 0.177 125.8); /* Hover / Aktiv */ --ofe-green-deep: oklch(50.0% 0.120 125.8); /* Text auf Tint, Eyebrow-Variante */ --ofe-green-light: oklch(88.0% 0.120 125.8); /* Light fill */ --ofe-green-tint: oklch(94.0% 0.010 125.8); /* Pill / Soft-Background */ --ofe-green-glow: oklch(75.5% 0.177 125.8 / 0.20); /* Shadow tint */ /* — Neutrals (warmgrau, ohne Blaustich) ————————————————— */ --ofe-bg: oklch(99.0% 0 0); /* Page background */ --ofe-surface: oklch(98.0% 0 0); /* Section alt */ --ofe-card: oklch(100% 0 0); /* Card bg */ --ofe-border: oklch(91.0% 0.002 285.9); /* Hairline */ --ofe-border-soft: oklch(95.0% 0 0); /* Divider */ --ofe-gray: oklch(59.7% 0.003 285.9); /* #7F7F81 */ /* — Foreground / Text —————————————————————————————————— */ --ofe-ink: oklch(18.0% 0.005 285.9); /* Headline / Body strong */ --ofe-text: oklch(30.0% 0.005 285.9); /* Body */ --ofe-text-muted: oklch(50.0% 0.003 285.9); /* Sub-copy, captions */ --ofe-text-soft: oklch(65.0% 0.003 285.9); /* Tertiary */ /* — Dark surfaces (für Sections, Slides, Hero-Overlays) —— */ --ofe-charcoal: oklch(25.0% 0.005 285.9); /* mid-dark */ --ofe-dark: oklch(18.0% 0.005 285.9); /* primary dark section */ --ofe-deep: oklch(12.0% 0.005 285.9); /* footer / deepest */ --ofe-on-dark: oklch(80.0% 0.003 285.9); /* body text on dark */ --ofe-on-dark-mute: oklch(65.0% 0.003 285.9); /* muted on dark */ /* — Semantic ———————————————————————————————————————————— */ --ofe-success: oklch(70.0% 0.150 150.0); --ofe-warning: oklch(78.0% 0.160 85.0); --ofe-danger: oklch(57.7% 0.245 27.3); --ofe-info: oklch(65.0% 0.110 240.0); /* — Charts / Datenviz (5er-Set, brand-kohärent) ————————— */ --ofe-chart-1: oklch(75.5% 0.177 125.8); /* Primary green */ --ofe-chart-2: oklch(62.0% 0.177 125.8); /* Deeper green */ --ofe-chart-3: oklch(45.0% 0.080 125.8); /* Forest */ --ofe-chart-4: oklch(59.7% 0.003 285.9); /* Gray */ --ofe-chart-5: oklch(25.0% 0.005 285.9); /* Charcoal */ /* — Sub-Brand-Themes ——————————————————————————————————— */ /* Oliver Fritz Energielösungen (default): Gray header */ --ofe-brand-ofe-bg: var(--ofe-gray); --ofe-brand-ofe-fg: #fff; /* flexibilitee: Green header */ --ofe-brand-flex-bg: var(--ofe-green); --ofe-brand-flex-fg: var(--ofe-ink); /* batteree: Dark header */ --ofe-brand-batt-bg: var(--ofe-dark); --ofe-brand-batt-fg: #fff; /* Generischer Header-Slot — eine Komponente, alle Marken. Default = OFE (grauer Header, weiße Marke); pro Sub-Brand via [data-brand=…] unten überschrieben. */ --ofe-brand-header-bg: var(--ofe-brand-ofe-bg); --ofe-brand-header-fg: var(--ofe-brand-ofe-fg); /* — Typography ————————————————————————————————————————— */ --ofe-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ofe-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ofe-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Web/Slide-Skala (px-basiert, 1920×1080-tauglich) */ --ofe-fs-display: 4.5rem; /* 72 Slide-Title / Hero-Display */ --ofe-fs-h1: 3.5rem; /* 56 */ --ofe-fs-h2: 2.5rem; /* 40 */ --ofe-fs-h3: 1.75rem; /* 28 */ --ofe-fs-h4: 1.375rem; /* 22 */ --ofe-fs-h5: 1.125rem; /* 18 */ --ofe-fs-eyebrow: 0.75rem; /* 12 uppercase tracking-widest */ --ofe-fs-body-l: 1.125rem; /* 18 */ --ofe-fs-body: 1rem; /* 16 */ --ofe-fs-body-s: 0.875rem; /* 14 */ --ofe-fs-caption: 0.75rem; /* 12 */ --ofe-lh-display: 1.05; --ofe-lh-heading: 1.12; --ofe-lh-body: 1.55; --ofe-lh-tight: 1.3; --ofe-tracking-tight: -0.02em; /* Headlines */ --ofe-tracking-normal: 0; --ofe-tracking-wide: 0.04em; --ofe-tracking-widest: 0.16em; /* Eyebrows */ /* — Spacing-Skala ———————————————————————————————————— */ --ofe-space-1: 0.25rem; /* 4 */ --ofe-space-2: 0.5rem; /* 8 */ --ofe-space-3: 0.75rem; /* 12 */ --ofe-space-4: 1rem; /* 16 */ --ofe-space-5: 1.25rem; /* 20 */ --ofe-space-6: 1.5rem; /* 24 */ --ofe-space-8: 2rem; /* 32 */ --ofe-space-10: 2.5rem; /* 40 */ --ofe-space-12: 3rem; /* 48 */ --ofe-space-16: 4rem; /* 64 */ --ofe-space-20: 5rem; /* 80 */ --ofe-space-24: 6rem; /* 96 */ --ofe-space-32: 8rem; /* 128 */ /* — Radius —————————————————————————————————————————— */ --ofe-radius-sm: 0.25rem; /* 4 Pills, kleine Tags */ --ofe-radius-md: 0.375rem; /* 6 Inputs */ --ofe-radius-lg: 0.5rem; /* 8 Buttons (default), Cards */ --ofe-radius-xl: 0.75rem; /* 12 Card-Variante */ --ofe-radius-2xl: 1rem; /* 16 Hero-Image, Feature-Card */ --ofe-radius-3xl: 1.5rem; /* 24 CTA-Banner */ --ofe-radius-full: 9999px; /* — Elevation / Shadows ——————————————————————————————— */ --ofe-shadow-sm: 0 1px 2px 0 oklch(18% 0.005 285.9 / 0.05); --ofe-shadow-md: 0 4px 12px -2px oklch(18% 0.005 285.9 / 0.08), 0 2px 4px -2px oklch(18% 0.005 285.9 / 0.04); --ofe-shadow-lg: 0 12px 24px -8px oklch(18% 0.005 285.9 / 0.10), 0 4px 8px -4px oklch(18% 0.005 285.9 / 0.06); --ofe-shadow-xl: 0 24px 48px -12px oklch(18% 0.005 285.9 / 0.16); --ofe-shadow-2xl:0 32px 64px -16px oklch(18% 0.005 285.9 / 0.22); /* CTA-Glow: dezent grün */ --ofe-shadow-cta: 0 8px 20px -6px var(--ofe-green-glow); /* — Motion ————————————————————————————————————————————— */ --ofe-dur-fast: 180ms; --ofe-dur-base: 300ms; --ofe-dur-slow: 550ms; --ofe-ease-out: cubic-bezier(0.21, 0.6, 0.35, 1); --ofe-ease-in: cubic-bezier(0.55, 0, 0.85, 0.4); --ofe-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* — Layout ——————————————————————————————————————————— */ --ofe-container: 1280px; /* max-Inhaltsbreite */ --ofe-container-narrow: 960px; --ofe-gutter: 1.5rem; /* 24px */ --ofe-section-y: 6rem; /* 96px Standard-Sektionsabstand */ --ofe-section-y-tight: 4rem; /* 64px */ } /* — Dark-Section Helper — Klasse statt Variable, damit sich Buttons/Borders in dunklen Sections automatisch umstellen. — */ .ofe-on-dark { color: var(--ofe-on-dark); --ofe-card: oklch(100% 0 0 / 0.05); --ofe-border: oklch(100% 0 0 / 0.10); --ofe-text: var(--ofe-on-dark); --ofe-text-muted: var(--ofe-on-dark-mute); --ofe-ink: #fff; } /* ============================================================ SUB-BRAND-OVERRIDES — eine Basis (OFE), zwei feine Nuancen ------------------------------------------------------------ Aktivierung: data-brand="flexibilitee" | "batteree" auf einem Wrapper (z. B. oder einer Section). Ohne data-brand = OFE. Überschrieben wird NUR das Nötige: Akzent-Grün + Header-Fläche. Alles andere — Manrope-Headlines, helle Canvas, runde Ecken, Signatur-Pattern, Spacing, Schatten — erbt von der OFE-Basis. ============================================================ */ /* flexibilitee — eigener Grünton (#9DC13C, quasi OFE-Familie), grüner Header */ [data-brand="flexibilitee"] { --ofe-green: oklch(72% 0.18 128); /* #9DC13C */ --ofe-green-dark: oklch(60% 0.18 128); /* Hover / Aktiv */ --ofe-green-glow: oklch(72% 0.18 128 / 0.20); /* CTA-Glow */ --ofe-chart-1: oklch(72% 0.18 128); /* Primär-Chart = Akzent */ --ofe-brand-header-bg: var(--ofe-green); /* grüner Header */ --ofe-brand-header-fg: var(--ofe-ink); /* dunkle Wortmarke */ } /* batteree — helleres Lime (#A4D65E), dunkler Header, grüner Logo-Akzent */ [data-brand="batteree"] { --ofe-green: oklch(80% 0.20 130); /* #A4D65E */ --ofe-green-dark: oklch(66% 0.20 130); /* Hover / Aktiv */ --ofe-green-glow: oklch(80% 0.20 130 / 0.20); /* CTA-Glow */ --ofe-chart-1: oklch(80% 0.20 130); /* Primär-Chart = Akzent */ --ofe-brand-header-bg: var(--ofe-dark); /* dunkler Header */ --ofe-brand-header-fg: #fff; /* grüner Logo-Akzent auf dunkel */ }