save

2026-08-13 15:46:04 +02:00
parent 920b1da4b0
commit 2c1a8ae9b5
178 changed files with 10289 additions and 0 deletions
@@ -0,0 +1,169 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* ------------------------------------------------------------------ */
+/*  GebOS design tokens                                                */
+/*  Sampled from the GebOS Klarpreis + landing page designs:           */
+/*  – teal brand, deep navy type, cool off-white surfaces,             */
+/*    soft shadows, generous radii, pill badges, gradient CTA bands.   */
+/* ------------------------------------------------------------------ */
+
+:root {
+  /* surfaces */
+  --background: #f4f8f9;
+  --foreground: #071a3f;
+  --card: #ffffff;
+  --card-foreground: #071a3f;
+  --popover: #ffffff;
+  --popover-foreground: #071a3f;
+
+  /* brand */
+  --primary: #009b9a;
+  --primary-foreground: #ffffff;
+  --secondary: #eaf3f4;
+  --secondary-foreground: #071a3f;
+  --muted: #edf3f4;
+  --muted-foreground: #516078;
+  --accent: #e0f4f0;
+  --accent-foreground: #006c79;
+
+  /* feedback */
+  --destructive: #dc3439;
+  --destructive-foreground: #ffffff;
+
+  /* lines & focus */
+  --border: #e2eceb;
+  --input: #d7e3e4;
+  --ring: #009b9a;
+
+  /* charts (donut / bars in visuals) */
+  --chart-1: #009b9a;
+  --chart-2: #34e0d4;
+  --chart-3: #cdeee8;
+  --chart-4: #071a3f;
+  --chart-5: #94a9b8;
+
+  /* brand scale */
+  --brand-50: #eefaf7;
+  --brand-100: #d8f2ec;
+  --brand-200: #b5ece6;
+  --brand-300: #7ce0d6;
+  --brand-400: #34e0d4;
+  --brand-500: #03aaa4;
+  --brand-600: #009b9a;
+  --brand-700: #007d89;
+  --brand-800: #006c79;
+  --brand-900: #06474e;
+  --navy: #071a3f;
+
+  --radius: 0.75rem;
+}
+
+@theme inline {
+  --font-sans:
+    "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-brand-50: var(--brand-50);
+  --color-brand-100: var(--brand-100);
+  --color-brand-200: var(--brand-200);
+  --color-brand-300: var(--brand-300);
+  --color-brand-400: var(--brand-400);
+  --color-brand-500: var(--brand-500);
+  --color-brand-600: var(--brand-600);
+  --color-brand-700: var(--brand-700);
+  --color-brand-800: var(--brand-800);
+  --color-brand-900: var(--brand-900);
+  --color-navy: var(--navy);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* soft layered card shadows from the designs */
+  --shadow-card: 0 1px 2px rgb(19 41 60 / 0.04), 0 8px 24px rgb(19 41 60 / 0.06);
+  --shadow-card-lg:
+    0 2px 4px rgb(19 41 60 / 0.04), 0 16px 48px rgb(19 41 60 / 0.1);
+  --shadow-band: 0 16px 40px rgb(10 100 89 / 0.28);
+  --shadow-pill: 0 1px 2px rgb(19 41 60 / 0.06);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    font-feature-settings:
+      "liga" 1,
+      "calt" 1,
+      "cv05" 1;
+  }
+
+  ::selection {
+    @apply bg-brand-200 text-navy;
+  }
+}
+
+/* teal gradient band used for CTA banners and total-cost bar */
+@utility bg-brand-gradient {
+  background-image: linear-gradient(
+    105deg,
+    var(--brand-800) 0%,
+    var(--brand-700) 35%,
+    var(--brand-600) 70%,
+    var(--brand-500) 100%
+  );
+}
+
+/* radial page glow behind heroes (subtle white vignette on cool bg) */
+@utility bg-hero-glow {
+  background-image:
+    radial-gradient(
+      60rem 32rem at 85% -10%,
+      rgb(15 155 140 / 0.09),
+      transparent 60%
+    ),
+    radial-gradient(
+      50rem 28rem at 10% 0%,
+      rgb(255 255 255 / 0.9),
+      transparent 65%
+    );
+}
+
+/* dotted connector line used by process steppers */
+@utility border-dotted-brand {
+  border-color: var(--brand-300);
+  border-style: dotted;
+}