style cleanup

2025-11-29 02:20:03 +01:00
parent f72bdf8bc5
commit 4af0528e76
7 changed files with 1112 additions and 1044 deletions
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -0,0 +1,136 @@
+:root {
+  /* Brand Colors */
+  --brand-blue: #3a6ff8;
+  --deep-gray: #0f1f3d;
+  --silver: #d9e1f2;
+  --green-check: #1fce88;
+  --error-red: #f46666;
+  --amber-yellow: #ffb347;
+  --light-gray: #edf2fb;
+  --very-light-gray: #f9fbff;
+  --off-white: #ffffff;
+
+  /* Radii & Shadows */
+  --radius-lg: 16px;
+  --radius-pill: 999px;
+  --shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15);
+
+  /* Fonts */
+  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-heading: 'Montserrat', system-ui, sans-serif;
+}
+
+/* =====================================================================
+   Global Reset & Base
+   ===================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  color: #1f2a44;
+  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%);
+}
+
+/* Layout helpers */
+
+.container {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* =====================================================================
+   Buttons & Avatar (global nutzbar)
+   ===================================================================== */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-pill);
+  border: none;
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: 0.95rem;
+  padding: 0.6rem 1.4rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    transform 0.08s ease,
+    box-shadow 0.08s ease,
+    background 0.1s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--brand-blue), #2a73ff);
+  color: #fff;
+  box-shadow: 0 12px 24px rgba(0, 81, 255, 0.35);
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 32px rgba(0, 81, 255, 0.4);
+}
+
+.btn-outline {
+  border: 1px solid var(--silver);
+  background: #fff;
+  color: #333;
+}
+
+.btn-outline:hover {
+  background: var(--very-light-gray);
+}
+
+.btn-ghost {
+  border-radius: var(--radius-pill);
+  padding-inline: 1.2rem;
+  background: transparent;
+  border: 1px solid transparent;
+  color: #333;
+}
+
+.btn-ghost:hover {
+  border-color: var(--silver);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.btn-disabled {
+  background: var(--light-gray);
+  color: #888;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Avatar */
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--deep-gray);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: 0.9rem;
+}