/* * Design-System v2 "Vertikalo Brand" (Roadmap "CRM optisch überarbeiten nach * UI/UX Pro Max Designideen", Task #100). Ersetzt die erste, rein generische * "Data-Dense Dashboard"-Farbpalette (slate/sky, 1:1 Tailwind-Alias, nie mit echten * Markenfarben verknuepft) durch die tatsaechliche Vertikalo-Markenidentitaet aus * "Why Vertikalo.pdf" (schwarz/weiss + Signal-Pink) plus eine an Pipedrive angelehnte * Struktur (dunkle Sidebar, helle Arbeitsflaeche, klare Datentabellen). * * Strategie ueber den ui-ux-pro-max-Skill ermittelt (--design-system "B2B SaaS CRM * dashboard data-dense professional bold" -> Pattern "Data-Dense Dashboard" beibehalten, * Typografie-Paarung "Modern Professional" als Basis genommen, aber Body-Font auf Inter * getauscht statt Open Sans - bessere Ziffern-/Tabellen-Lesbarkeit in einer datendichten * CRM-Tabelle, Poppins fuer Headings/Buttons/Sidebar passt sehr nah an die geometrische, * runde Wortmarke aus dem Vertikalo-Pitchdeck). * * Markenfarbe: das Pink aus dem PDF (~#EE1163) wurde fuer Button-/Text-Einsatz auf * #E00D5C nachgedunkelt - WCAG-Kontrastpruefung ergab 4.29:1 fuer das PDF-Pink gegen * Weiss (unter dem 4.5:1-AA-Normaltext-Minimum), #E00D5C liefert 4.79:1 und bleibt * optisch praktisch identisch. Rot (Destructive/Fehler) bleibt bewusst vom Marken-Pink * getrennt (eigener Rotton), damit "Loeschen"/Fehler nicht mit der Markenfarbe verwechselt * werden koennen (color-not-only-Regel aus dem UX-Guide). * * Tailwind Play-CDN im unterstuetzt kein serverseitiges @apply - deshalb weiterhin * eine kleine Komponenten-Schicht in reinem CSS (.btn/.card/.input/.badge/.table-base/ * .topbar/...), die sowohl von den Jinja-Templates als auch von crud.js (generische * CRUD-Engine) verwendet wird. */ :root { /* Marke */ --color-primary: #e00d5c; /* Vertikalo-Pink, WCAG-sicher nachgedunkelt */ --color-primary-hover: #c10e52; --color-primary-light: #fde7ef; /* helles Pink fuer Badges/aktive Zustaende auf weissem Grund */ --color-primary-contrast: #ffffff; /* Sidebar (dunkel, an Pipedrive angelehnt, aber markenschwarz statt navy) */ --color-sidebar-bg: #0b0b0f; --color-sidebar-fg: #f4f4f6; --color-sidebar-muted: #9a9aa5; --color-sidebar-hover-bg: #1a1a21; --color-sidebar-active-bg: rgba(224, 13, 92, 0.16); /* Neutral/Oberflaeche */ --color-secondary: #334155; --color-background: #f7f7f9; --color-foreground: #17171c; --color-muted: #f1f1f4; --color-muted-foreground: #6b7280; --color-border: #e5e7eb; /* Semantische Zustaende - bewusst NICHT das Marken-Pink, siehe Kommentar oben */ --color-destructive: #dc2626; --color-destructive-hover: #b91c1c; --color-success: #16a34a; --color-warning: #d97706; --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.05), 0 1px 3px 0 rgb(15 23 42 / 0.06); --radius-md: 0.625rem; --radius-sm: 0.5rem; --radius-lg: 0.875rem; } body { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; background-color: var(--color-background); color: var(--color-foreground); } h1, h2, h3, h4, .font-heading, .brand-wordmark { font-family: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif; } /* Tabellarische/numerische Daten bekommen gleichbreite Ziffern (number-tabular-Regel aus dem UX-Guide: verhindert Zeilenversatz bei Betraegen/Zeiten/IDs). */ table, .font-data { font-variant-numeric: tabular-nums; } /* ---------- Markenschriftzug ---------- */ /* "Vertikal/o" - der Schraegstrich-Punkt-Akzent aus dem Pitchdeck-Logo wird hier als einfacher Pink-Punkt nach dem Wortende nachgebildet (kein Custom-Font/SVG-Logo vorhanden, siehe README - bewusst simple Annaeherung statt einer nicht autorisierten Logo-Nachbildung). */ .brand-wordmark { font-weight: 700; letter-spacing: -0.01em; } .brand-wordmark .brand-dot { color: var(--color-primary); } /* ---------- Sidebar-Navigation ---------- */ .nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); color: var(--color-sidebar-muted); white-space: nowrap; font-size: 0.875rem; font-weight: 500; transition: background-color 150ms ease, color 150ms ease; border-left: 2px solid transparent; } .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; } .nav-link:hover { background-color: var(--color-sidebar-hover-bg); color: var(--color-sidebar-fg); } .nav-link.active { background-color: var(--color-sidebar-active-bg); color: #fff; border-left-color: var(--color-primary); } /* ---------- Sidebar-Navigation: Flyout-Gruppen (Roadmap "Menü: Flyout-Struktur (Pipedrive-Stil)") ---------- */ .nav-group-toggle { cursor: pointer; background: none; border: none; border-left: 2px solid transparent; font: inherit; text-align: left; } .nav-group-chevron { width: 14px; height: 14px; flex-shrink: 0; margin-left: auto; transition: transform 150ms ease; } .nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(90deg); } .nav-group-toggle[aria-expanded="true"], .nav-group-toggle.active { background-color: var(--color-sidebar-hover-bg); color: var(--color-sidebar-fg); } .nav-group-toggle.active { border-left-color: var(--color-primary); } .nav-flyout { padding: 0.4rem; } /* Nur innerhalb der Desktop-Seitenleiste "poppt" das Flyout als eigenes, rechts daneben schwebendes Panel auf (Pipedrive-Stil) - 14rem entspricht der Sidebar-Breite (siehe base.html "md:w-56"). Im schmalen Mobile-Overlay (siehe #mobile-nav-backdrop in base.html) bleibt dasselbe Markup dagegen ein normales, inline aufklappendes Element - dort ist schlicht kein Platz fuer ein seitliches Flyout, und Pipedrive selbst macht auf Mobile ebenfalls kein Side-Flyout. */ aside .nav-flyout { position: fixed; left: 14rem; width: 14rem; background-color: var(--color-sidebar-bg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3); z-index: 60; } /* ---------- Topbar (neu: Seitentitel + Nutzer-Chip oberhalb des Inhalts, Pipedrive- inspiriert) ---------- */ .topbar { background-color: #fff; border-bottom: 1px solid var(--color-border); height: 3.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; gap: 1rem; } .topbar-user-chip { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-muted-foreground); } .topbar-avatar { width: 1.75rem; height: 1.75rem; border-radius: 9999px; background-color: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: "Poppins", "Inter", sans-serif; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease; white-space: nowrap; line-height: 1.25rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .btn-primary { background-color: var(--color-primary); color: var(--color-primary-contrast); } .btn-primary:hover:not(:disabled) { background-color: var(--color-primary-hover); } .btn-secondary { background-color: #fff; color: var(--color-foreground); border: 1px solid #d1d5db; } .btn-secondary:hover:not(:disabled) { background-color: #f9fafb; } /* Variante fuer Buttons auf dunklem Sidebar-Hintergrund (z.B. Logout-Button). */ .btn-secondary-dark { background-color: var(--color-sidebar-hover-bg); color: #fff; } .btn-secondary-dark:hover:not(:disabled) { background-color: #2a2a33; } .btn-danger { background-color: var(--color-destructive); color: #fff; } .btn-danger:hover:not(:disabled) { background-color: var(--color-destructive-hover); } /* ---------- Cards / Panels ---------- */ .card { background-color: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); } /* ---------- Formularfelder ---------- */ .input { border: 1px solid #d1d5db; border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.875rem; background-color: #fff; transition: border-color 150ms ease, box-shadow 150ms ease; } .input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(224 13 92 / 0.15); } /* ---------- Badges (Status-Pillen) ---------- */ .badge { display: inline-block; padding: 0.125rem 0.55rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; white-space: nowrap; } .badge-brand { background-color: var(--color-primary-light); color: var(--color-primary-hover); } /* Aktive Wiedergabegeschwindigkeit im Sprachnotiz-Player (siehe voice_recorder.js) - Klasse statt Inline-Style, damit classList.toggle() beim Wechsel zwischen 1x/1.5x/2x sauber greift. */ .btn-speed-active { background-color: var(--color-primary); } /* ---------- Fehler-/Hinweisbanner ---------- */ .alert-error { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: 0.875rem; } /* ---------- Tabellen (generische crud.js-Tabelle + users.html) ---------- */ .table-base thead { background-color: var(--color-muted); color: var(--color-muted-foreground); text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; } .table-base thead th { font-weight: 600; padding: 0.65rem 1rem; } .table-base tbody tr { border-top: 1px solid var(--color-border); transition: background-color 100ms ease; } .table-base tbody tr:hover { background-color: var(--color-muted); } .table-base td { padding: 0.6rem 1rem; } /* @-Erwaehnen von Nutzern (Roadmap "@-Erwaehnen von Nutzern in Kommentaren"): Badge-Darstellung fuer das @[Name](uuid)-Token, siehe crud.js::renderMentionText. Nutzt jetzt den hellen Marken-Pink-Ton statt generischem Blau, um @-Erwaehnungen klar als "Person/Aktion" von Status-Badges (gruen/rot/grau) zu unterscheiden. */ .mention-badge { background-color: var(--color-primary-light); color: var(--color-primary-hover); border-radius: 0.25rem; padding: 0 0.25rem; font-weight: 500; }