From f90d5db40a45ee54810fe0e15fc4d73de754ea51 Mon Sep 17 00:00:00 2001 From: Tom Hempel Date: Fri, 17 Jul 2026 17:21:48 +0200 Subject: [PATCH] adjust color palette --- website/css/style.css | 180 +++++++++++++++++++++--------------------- website/index.html | 5 +- 2 files changed, 95 insertions(+), 90 deletions(-) diff --git a/website/css/style.css b/website/css/style.css index 816521d..a629287 100644 --- a/website/css/style.css +++ b/website/css/style.css @@ -1,99 +1,101 @@ :root { color-scheme: light; - --bg: #eef2f7; + /* Vivo / NAT-Trauma palette: navy #414463, crimson #D01C41 */ + --bg: #f4f5f8; --surface: #ffffff; - --surface-raised: #f8fafc; - --surface-hover: #f1f5f9; - --surface-muted: #f8fafc; + --surface-raised: #fafbfc; + --surface-hover: #e8eaf0; + --surface-muted: #fafbfc; --surface-input: #ffffff; - --surface-elevated: #f8fafc; - --primary: #2563eb; - --primary-hover: #1d4ed8; - --primary-subtle: rgba(37, 99, 235, 0.1); - --primary-border: rgba(37, 99, 235, 0.28); - --primary-text: #1d4ed8; - --danger: #dc2626; - --danger-hover: #b91c1c; - --danger-subtle: rgba(220, 38, 38, 0.08); - --danger-subtle-hover: rgba(220, 38, 38, 0.14); - --danger-border: rgba(220, 38, 38, 0.35); - --danger-text: #b91c1c; - --danger-focus-ring: rgba(220, 38, 38, 0.25); + --surface-elevated: #fafbfc; + --primary: #414463; + --primary-hover: #343752; + --primary-subtle: rgba(65, 68, 99, 0.1); + --primary-border: rgba(65, 68, 99, 0.28); + --primary-text: #414463; + --accent: #414463; + --danger: #d01c41; + --danger-hover: #b01738; + --danger-subtle: rgba(208, 28, 65, 0.08); + --danger-subtle-hover: rgba(208, 28, 65, 0.14); + --danger-border: rgba(208, 28, 65, 0.35); + --danger-text: #d01c41; + --danger-focus-ring: rgba(208, 28, 65, 0.25); --success: #16a34a; - --warning: #d97706; - --text: #0f172a; - --text-secondary: #64748b; + --warning: #d01c41; + --text: #414463; + --text-secondary: #6b7088; --text-on-primary: #ffffff; - --border: #e2e8f0; + --border: #d5d8e2; --radius: 8px; --radius-lg: 12px; - --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); - --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); + --shadow: 0 1px 2px rgba(65, 68, 99, 0.06), 0 1px 3px rgba(65, 68, 99, 0.08); + --shadow-lg: 0 8px 24px rgba(65, 68, 99, 0.08), 0 2px 6px rgba(65, 68, 99, 0.04); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85); - --focus-ring: rgba(37, 99, 235, 0.22); + --focus-ring: rgba(65, 68, 99, 0.22); --sidebar-width: 240px; - --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - --table-header-bg: #f1f5f9; - --table-stripe-bg: rgba(241, 245, 249, 0.85); - --row-hover-bg: #e8eef5; - --sticky-shadow: rgba(15, 23, 42, 0.08); - --atmosphere-blue: rgba(37, 99, 235, 0.09); - --atmosphere-indigo: rgba(79, 70, 229, 0.06); - --grid-line: rgba(100, 116, 139, 0.1); - --accent-gradient: linear-gradient(135deg, #2563eb 0%, #3b5bdb 45%, #4f46e5 100%); - --accent-gradient-soft: linear-gradient(90deg, rgba(37, 99, 235, 0.55), rgba(79, 70, 229, 0.4)); - --accent-glow: 0 4px 18px rgba(37, 99, 235, 0.18); + --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + --table-header-bg: #e8eaf0; + --table-stripe-bg: rgba(232, 234, 240, 0.85); + --row-hover-bg: #e8eaf0; + --sticky-shadow: rgba(65, 68, 99, 0.08); + --atmosphere-blue: rgba(65, 68, 99, 0.09); + --atmosphere-indigo: rgba(65, 68, 99, 0.05); + --grid-line: rgba(107, 112, 136, 0.12); + --accent-gradient: linear-gradient(135deg, #414463 0%, #52567a 45%, #5a5e7a 100%); + --accent-gradient-soft: linear-gradient(90deg, rgba(65, 68, 99, 0.55), rgba(90, 94, 122, 0.4)); + --accent-glow: 0 4px 18px rgba(65, 68, 99, 0.18); --shine-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); - /* Incomplete translation highlight */ - --trans-missing-bg: #fffbeb; - --trans-missing-bg-hover: #fef3c7; - --trans-missing-border: #fcd34d; - --trans-missing-accent: #d97706; - --trans-missing-placeholder: #92400e; + /* Incomplete translation highlight — crimson reminders */ + --trans-missing-bg: #fce8ed; + --trans-missing-bg-hover: #f5c5d0; + --trans-missing-border: #e85a74; + --trans-missing-accent: #d01c41; + --trans-missing-placeholder: #8a1230; /* Status badges */ - --badge-draft-bg: #f1f5f9; - --badge-draft-fg: #64748b; + --badge-draft-bg: #e8eaf0; + --badge-draft-fg: #6b7088; --badge-active-bg: rgba(22, 163, 74, 0.12); --badge-active-fg: #15803d; - --badge-archived-bg: rgba(217, 119, 6, 0.12); - --badge-archived-fg: #b45309; + --badge-archived-bg: rgba(208, 28, 65, 0.12); + --badge-archived-fg: #d01c41; --badge-in-progress-bg: var(--primary-subtle); --badge-in-progress-fg: var(--primary-text); --badge-pending-bg: var(--badge-draft-bg); --badge-pending-fg: var(--badge-draft-fg); - --badge-admin-bg: rgba(109, 40, 217, 0.1); - --badge-admin-fg: #6d28d9; - --badge-supervisor-bg: rgba(190, 24, 93, 0.1); - --badge-supervisor-fg: #be185d; + --badge-admin-bg: rgba(65, 68, 99, 0.12); + --badge-admin-fg: #414463; + --badge-supervisor-bg: rgba(208, 28, 65, 0.1); + --badge-supervisor-fg: #d01c41; --badge-coach-bg: rgba(22, 163, 74, 0.1); --badge-coach-fg: #15803d; --badge-you-bg: var(--primary-subtle); --badge-you-fg: var(--primary-text); - --badge-warn-bg: rgba(217, 119, 6, 0.12); - --badge-warn-fg: #b45309; + --badge-warn-bg: rgba(208, 28, 65, 0.12); + --badge-warn-fg: #d01c41; --badge-q-bg: var(--primary-subtle); --badge-q-fg: var(--primary-text); - --badge-opt-bg: #f1f5f9; - --badge-opt-fg: #475569; + --badge-opt-bg: #e8eaf0; + --badge-opt-fg: #52567a; --badge-app-bg: rgba(22, 163, 74, 0.1); --badge-app-fg: #15803d; - --badge-str-bg: rgba(109, 40, 217, 0.1); - --badge-str-fg: #6d28d9; - --badge-branch-bg: rgba(109, 40, 217, 0.1); - --badge-branch-fg: #6d28d9; + --badge-str-bg: rgba(65, 68, 99, 0.1); + --badge-str-fg: #414463; + --badge-branch-bg: rgba(65, 68, 99, 0.1); + --badge-branch-fg: #414463; --lang-chip-fixed-bg: var(--primary-subtle); --lang-chip-fixed-border: var(--primary-border); --toast-success-bg: #ecfdf5; --toast-success-fg: #166534; --toast-success-border: #86efac; - --toast-error-bg: #fef2f2; - --toast-error-fg: #991b1b; - --toast-error-border: #fca5a5; - --toast-info-bg: #eff6ff; - --toast-info-fg: #1e40af; - --toast-info-border: #93c5fd; + --toast-error-bg: #fce8ed; + --toast-error-fg: #8a1230; + --toast-error-border: #e85a74; + --toast-info-bg: #e8eaf0; + --toast-info-fg: #414463; + --toast-info-border: #b8bcc8; --save-flash-bg: var(--primary-subtle); - --progress-track: #e2e8f0; + --progress-track: #d5d8e2; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -175,7 +177,7 @@ body.logged-in:not(.login-active) .layout::after { left: 0; bottom: 0; z-index: 100; - box-shadow: 2px 0 16px rgba(15, 23, 42, 0.06); + box-shadow: 2px 0 16px rgba(65, 68, 99, 0.06); } .sidebar-brand { position: relative; @@ -185,7 +187,7 @@ body.logged-in:not(.login-active) .layout::after { font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.02em; - background: linear-gradient(180deg, rgba(37, 99, 235, 0.06) 0%, transparent 100%); + background: linear-gradient(180deg, rgba(65, 68, 99, 0.06) 0%, transparent 100%); } .sidebar-brand::before { content: ''; @@ -196,7 +198,7 @@ body.logged-in:not(.login-active) .layout::after { width: 3px; border-radius: 0 2px 2px 0; background: var(--accent-gradient); - box-shadow: 0 0 8px rgba(37, 99, 235, 0.25); + box-shadow: 0 0 8px rgba(65, 68, 99, 0.25); } .sidebar-brand small { display: block; @@ -241,7 +243,7 @@ body.logged-in:not(.login-active) .layout::after { } .sidebar-nav a.active svg { color: var(--primary); - filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2)); + filter: drop-shadow(0 0 4px rgba(65, 68, 99, 0.2)); } .sidebar-footer { padding: 16px 20px; @@ -391,12 +393,12 @@ body.logged-in .btn-home:hover svg { .btn-primary { background: var(--accent-gradient); color: var(--text-on-primary); - border-color: rgba(79, 70, 229, 0.35); - box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2); + border-color: rgba(65, 68, 99, 0.35); + box-shadow: 0 1px 2px rgba(65, 68, 99, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .btn-primary:hover { - background: linear-gradient(135deg, #2563eb 0%, #4338ca 45%, #4f46e5 100%); - border-color: rgba(67, 56, 202, 0.45); + background: linear-gradient(135deg, #414463 0%, #52567a 45%, #5a5e7a 100%); + border-color: rgba(52, 55, 82, 0.45); box-shadow: var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-danger { @@ -656,7 +658,7 @@ body.logged-in .page-header-titles::before { width: 3px; border-radius: 2px; background: var(--accent-gradient); - box-shadow: 0 0 8px rgba(37, 99, 235, 0.2); + box-shadow: 0 0 8px rgba(65, 68, 99, 0.2); } .page-header h1 { font-size: 1.5rem; @@ -1149,7 +1151,7 @@ body.login-active .main-content { border-color: rgba(148, 163, 184, 0.34); border-radius: 16px; background: rgba(255, 255, 255, 0.94); - box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06); + box-shadow: 0 18px 50px rgba(65, 68, 99, 0.10), 0 2px 8px rgba(65, 68, 99, 0.06); } .login-card::before { content: ''; @@ -1235,7 +1237,7 @@ body.login-active .main-content { .login-sso__button { min-height: 50px; background: #ffffff; - border-color: rgba(37, 99, 235, 0.34); + border-color: rgba(65, 68, 99, 0.34); color: var(--primary-text); font-weight: 600; } @@ -1325,7 +1327,7 @@ body.login-active .main-content { font-size: .875rem; font-weight: 500; line-height: 1.45; - box-shadow: var(--shadow-lg), 0 8px 24px rgba(15, 23, 42, 0.1); + box-shadow: var(--shadow-lg), 0 8px 24px rgba(65, 68, 99, 0.1); opacity: 0; transform: translateX(40px); transition: opacity .3s, transform .3s; @@ -1442,10 +1444,10 @@ body.login-active .main-content { height: 26px; border: 2px solid var(--border); border-top-color: var(--primary); - border-right-color: #4f46e5; + border-right-color: #5a5e7a; border-radius: 50%; animation: spin .7s linear infinite; - box-shadow: 0 0 10px rgba(37, 99, 235, 0.12); + box-shadow: 0 0 10px rgba(65, 68, 99, 0.12); } #app > .spinner, .main-content > .spinner, @@ -1762,7 +1764,7 @@ table.data-table tbody tr.row-orphan-category td { border-radius: var(--radius); font-size: .875rem; color: var(--primary-text); - box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); + box-shadow: 0 0 0 1px rgba(65, 68, 99, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Tabs */ @@ -1795,7 +1797,7 @@ table.data-table tbody tr.row-orphan-category td { .tab-bar button.active { color: var(--primary-text); background: var(--primary-subtle); - box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(37, 99, 235, 0.08); + box-shadow: inset 0 0 0 1px var(--primary-border), 0 1px 3px rgba(65, 68, 99, 0.08); } /* Metadata form in editor */ @@ -1923,8 +1925,8 @@ table.data-table tbody tr.row-orphan-category td { justify-content: center; padding: 16px; background: - radial-gradient(ellipse 70% 50% at 50% 40%, rgba(37, 99, 235, 0.06), transparent 70%), - color-mix(in srgb, var(--bg) 50%, rgba(15, 23, 42, 0.35)); + radial-gradient(ellipse 70% 50% at 50% 40%, rgba(65, 68, 99, 0.06), transparent 70%), + color-mix(in srgb, var(--bg) 50%, rgba(65, 68, 99, 0.35)); backdrop-filter: blur(4px); } .modal-overlay[hidden] { @@ -3223,7 +3225,7 @@ body.logged-in .insights-chart-card.card { } body.logged-in .insights-chart-card.card:hover { border-color: var(--primary-border); - box-shadow: var(--shadow-lg), 0 0 16px rgba(37, 99, 235, 0.06); + box-shadow: var(--shadow-lg), 0 0 16px rgba(65, 68, 99, 0.06); } .insights-chart-hint { margin: 0 0 14px; @@ -3309,7 +3311,7 @@ body.logged-in .insights-chart-card.card:hover { background: linear-gradient(90deg, var(--primary), var(--primary-hover)); } .insights-hchart-fill--warn { - background: linear-gradient(90deg, #d97706, var(--warning)); + background: linear-gradient(90deg, #d01c41, var(--warning)); } .insights-hchart-fill--muted { background: var(--border); @@ -3478,12 +3480,12 @@ body.logged-in .insights-chart-card.card:hover { } .table-row-actions .reset-client-btn { - color: #b45309; - border-color: color-mix(in srgb, #b45309 35%, transparent); + color: #d01c41; + border-color: color-mix(in srgb, #d01c41 35%, transparent); } .table-row-actions .reset-client-btn:hover { - background: color-mix(in srgb, #b45309 10%, transparent); + background: color-mix(in srgb, #d01c41 10%, transparent); } .table-row-actions .delete-client-btn { @@ -4272,8 +4274,8 @@ select:disabled { } .band-badge.band-green { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .band-badge.band-yellow { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; } -.band-badge.band-red { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } -.band-badge.band-none { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; } +.band-badge.band-red { background: #fce8ed; color: #d01c41; border: 1px solid #e85a74; } +.band-badge.band-none { background: #e8eaf0; color: #6b7088; border: 1px solid #d5d8e2; } /* Client list — scoring profiles */ .client-scoring-legend { diff --git a/website/index.html b/website/index.html index a13f1b1..660e041 100644 --- a/website/index.html +++ b/website/index.html @@ -4,8 +4,11 @@ - + BW Schützt - NAT-AS + + +