/* ============================================================ trippner.ai — Designsystem Abgeleitet aus dem FleetFlow24-Designguide (Material-3-Tokens). Eine Quelle der Wahrheit: Tokens + Basiskomponenten. Einbinden: Fonts: Hanken Grotesk + Material Symbols Outlined (im laden) ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Markenfarben (semantische Kürzel) */ --steel: #0A0A3A; /* primary / steel-marine — Aktion, aktiv, Logo */ --steel-soft: #151644; /* primary-container */ --red: #AD1F23; /* secondary / lobster-red — Akzent, SEHR sparsam */ --cream: #FEFDF8; /* claw-cream — Seitenhintergrund */ /* Material-3-Palette (vollständig, für Spezialfälle) */ --primary: #0A0A3A; --on-primary: #ffffff; --primary-container: #151644; --on-primary-container: #7e7fb3; --primary-fixed: #e1e0ff; --primary-fixed-dim: #c1c2fa; --on-primary-fixed: #151644; --on-primary-fixed-var: #414272; --inverse-primary: #c1c2fa; --secondary: #b52528; --on-secondary: #ffffff; --secondary-container: #fe5b56; --secondary-fixed: #ffdad6; --error: #ba1a1a; --error-container: #ffdad6; --on-error: #ffffff; --background: #fefdf8; --surface: #fefdf8; --surface-bright: #fefdf8; --surface-dim: #dbdad5; --surface-lowest: #ffffff; --surface-low: #f5f4ef; --surface-container: #efeee9; --surface-high: #e9e8e3; --surface-highest: #e3e3de; --surface-variant: #e3e3de; --on-surface: #1b1c19; --on-surface-variant: #47464f; --outline: #777680; --outline-variant: #c8c5d0; --inverse-surface: #30312e; --inverse-on-surface: #f2f1ec; /* Praktische Aliasse */ --t-strong: var(--on-surface); --t-medium: var(--on-surface-variant); --t-muted: var(--outline); --hairline: var(--surface-variant); --hairline-a: rgba(10,10,58,0.10); /* 1px-Linie auf Glas/Transparenz */ --hover: rgba(10,10,58,0.05); /* Typografie */ --font: "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* Radien (bewusst klein) */ --radius: 2px; --radius-lg: 4px; --radius-xl: 8px; --radius-2xl: 16px; --radius-full: 12px; /* Container-„full" laut Guide */ --radius-circle: 9999px; /* echte Kreise: Avatare, Punkte */ /* Spacing */ --gutter: 24px; --section-gap: 160px; --margin: 80px; --container-max: 1600px; /* Bewegung */ --dur-fast: 0.12s; --dur: 0.28s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* App-Schicht (Erweiterung fürs Desktop-Chrome / Acryl) */ --acrylic: rgba(254,253,248,0.74); --acrylic-solid: #ffffff; --app-shadow: 0 2rem 6rem rgba(10,10,40,0.30), 0 0 0 1px rgba(255,255,255,0.55) inset; } /* ---------- 2. BASIS ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font); font-weight: 400; background: var(--background); color: var(--on-surface); line-height: 1.5; } ::selection { background: var(--steel); color: #fff; } /* Material Symbols — dünn (wght 300, FILL 0) */ .ms { font-family: "Material Symbols Outlined"; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; line-height: 1; user-select: none; } .ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ---------- 3. TYPOGRAFIE-SKALA ---------- */ .ds-display { font-size: 72px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 300; color: var(--steel); } .ds-headline { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; color: var(--steel); } .ds-headline-m{ font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; font-weight: 500; color: var(--steel); } .ds-title { font-size: 20px; line-height: 1.4; letter-spacing: 0.01em; font-weight: 500; color: var(--steel); } .ds-body { font-size: 18px; line-height: 1.6; letter-spacing: 0.01em; font-weight: 400; color: var(--on-surface-variant); } .ds-body-sm { font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; font-weight: 400; color: var(--on-surface-variant); } .ds-label { font-size: 12px; line-height: 1; letter-spacing: 0.15em; font-weight: 600; text-transform: uppercase; color: var(--on-surface-variant); } @media (max-width: 768px) { .ds-display { font-size: 32px; line-height: 1.1; } .ds-headline { font-size: 32px; } } /* ---------- 4. KOMPONENTEN ---------- */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 14px 32px; border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn .ms { font-size: 18px; } .btn-primary { background: var(--steel); color: #fff; } .btn-primary:hover { background: rgba(10,10,58,0.9); } .btn-outline { background: transparent; color: var(--steel); border-color: var(--outline-variant); } .btn-outline:hover { background: var(--surface-container); } .btn-ghost { background: transparent; color: var(--on-surface-variant); } .btn-ghost:hover { color: var(--steel); } /* Nav-Link (Marketing-Top-Nav) */ .nav-link { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-surface-variant); padding-bottom: 4px; cursor: pointer; transition: color var(--dur) var(--ease); } .nav-link:hover { color: var(--steel); } .nav-link.active { color: var(--steel); border-bottom: 2px solid var(--steel); } /* Pill / Badge */ .pill { display: inline-flex; align-items: center; gap: 0.75rem; background: var(--surface-container); color: var(--on-surface); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-full); } .pill .dot { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--red); } /* Card */ .card { background: var(--surface-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius-2xl); padding: 24px; } /* Feature-Block (Icon + Titel + Text) */ .feature .ms { font-size: 36px; color: var(--steel); } .feature h3 { margin: 16px 0 12px; font-size: 20px; font-weight: 500; color: var(--steel); } .feature p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-surface-variant); } /* Schritt-Marker (Zahl im Steel-Container) */ .step-num { width: 80px; height: 80px; border-radius: var(--radius-circle); background: var(--steel); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 500; border: 6px solid var(--surface-lowest); } /* Eingabefeld */ .input { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-low); border: 1px solid transparent; border-radius: var(--radius-lg); color: var(--outline); } .input:focus-within { border-color: var(--hairline-a); } .input input { border: none; outline: none; background: transparent; width: 100%; font-family: var(--font); font-size: 15px; color: var(--on-surface); } .input input::placeholder { color: var(--outline); } /* Trennlinie */ .divider { height: 1px; background: var(--surface-variant); border: 0; } /* Hintergrund-Raster (dezent, Hero) */ .bg-grid { background-image: linear-gradient(to right, var(--surface-variant) 1px, transparent 1px), linear-gradient(to bottom, var(--surface-variant) 1px, transparent 1px); background-size: 64px 64px; }