From 7cb8b02b1d9f04d366f46bcf94158829862a226d Mon Sep 17 00:00:00 2001
From: OlgunR <OlgunR@DD-PC-ENT05N>
Date: Tue, 9 Dec 2025 10:58:53 +0100
Subject: [PATCH] Revamp UI colors and fonts for warmer, modern look

Switched to "Red Hat Text" and "Teko" fonts via Google Fonts. Updated color palette from cool blues to warm reds and yellows, including backgrounds, accents, and error states. Refreshed button, top bar, and card styles for improved visual hierarchy and softer appearance.
---
 .../wwwroot/css/app.css                       | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
index 12714836..65787737 100644
--- a/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css
@@ -1,21 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;600;700&family=Teko:wght@500;600&display=swap');
+
 :root {
-    --bg: #f6f7fb;
-    --bg-strong: #eef2fb;
-    --text: #0f172a;
-    --muted: #475569;
-    --border: #e2e8f0;
-    --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+    --bg: #f7f7f8;
+    --bg-strong: #fff6f6;
+    --text: #474747;
+    --muted: #777777;
+    --border: #e7e7e7;
+    --shadow: 0 18px 55px rgba(20, 20, 20, 0.08);
     --card: #ffffff;
-    --accent: #2563eb;
-    --accent-strong: #1d4ed8;
-    --accent-soft: #e8efff;
-    --danger: #dc2626;
+    --accent: #a52431;
+    --accent-strong: #8d1e2a;
+    --accent-soft: #f8e5e8;
+    --highlight: #ffd62f;
+    --danger: #a52431;
 }
 
 body {
     margin: 0;
-    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
-    background: radial-gradient(120% 120% at 10% 20%, #ffffff 0%, #f3f6ff 45%, #eef2fb 80%);
+    font-family: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
+    background: radial-gradient(120% 120% at 6% 12%, var(--bg-strong) 0%, #fffdf7 45%, var(--bg) 85%);
     color: var(--text);
     line-height: 1.5;
 }
@@ -28,14 +31,17 @@ body {
     display: flex;
     align-items: center;
     padding: 14px 24px;
-    background: var(--card);
-    border-bottom: 1px solid var(--border);
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+    background: var(--accent);
+    border-bottom: 1px solid var(--accent-strong);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    color: #ffd62f;
 }
 
 .top-bar .brand {
-    font-weight: 800;
-    letter-spacing: 0.4px;
+    font-family: "Teko", "Red Hat Text", sans-serif;
+    font-weight: 600;
+    letter-spacing: 0.6px;
+    color: #ffd62f;
 }
 
 .content {
@@ -51,6 +57,8 @@ body {
 h1 {
     margin: 0 0 10px;
     letter-spacing: 0.2px;
+    font-family: "Teko", "Red Hat Text", sans-serif;
+    font-weight: 600;
 }
 
 .controls {
@@ -63,20 +71,20 @@ h1 {
 }
 
 .btn {
-    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
+    background: #4a4a4a;
     color: #ffffff;
-    border: none;
-    padding: 10px 14px;
-    border-radius: 10px;
+    border: 1px solid #404040;
+    padding: 10px 15px;
+    border-radius: 12px;
     font-weight: 700;
     cursor: pointer;
-    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
-    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
+    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
 }
 
 .btn:hover:not(:disabled) {
     transform: translateY(-1px);
-    filter: brightness(1.02);
+    background: #3f3f3f;
 }
 
 .btn:disabled {
@@ -86,12 +94,17 @@ h1 {
 }
 
 .btn.secondary {
-    background: var(--accent-soft);
-    color: var(--accent-strong);
-    border: 1px solid var(--border);
+    background: #f4f4f4;
+    color: #474747;
+    border: 1px solid #d3d3d3;
     box-shadow: none;
 }
 
+.btn.secondary:hover:not(:disabled) {
+    background: #e9e9e9;
+    transform: translateY(-1px);
+}
+
 .drop-hint {
     padding: 26px;
     border: 1px dashed var(--border);
@@ -101,15 +114,16 @@ h1 {
     background: #ffffff;
     width: min(1100px, 100%);
     margin: 0 auto;
+    box-shadow: 0 8px 18px rgba(165, 36, 49, 0.06);
 }
 
 .error-banner {
     margin-top: 10px;
     padding: 12px 14px;
     border-radius: 10px;
-    background: #fff1f2;
-    border: 1px solid #fecdd3;
-    color: #b91c1c;
+    background: #fcebec;
+    border: 1px solid #f3c6cd;
+    color: var(--accent-strong);
 }
 
 .document-shell {
@@ -137,7 +151,7 @@ canvas {
     border-radius: 10px;
     padding: 8px;
     background: rgba(255, 255, 255, 0.96);
-    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.15);
+    box-shadow: 0 12px 30px rgba(165, 36, 49, 0.15);
     user-select: none;
     touch-action: none;
 }
@@ -163,7 +177,7 @@ canvas {
     border-radius: 8px;
     padding: 6px 10px;
     cursor: pointer;
-    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
+    box-shadow: 0 6px 16px rgba(165, 36, 49, 0.16);
 }
 
 .overlay-input {