feat: apply light theme redesign to admin panel

Replace dark sidebar and glass-panel aesthetic with clean light dashboard style: white sidebar (#FFFFFF) with indigo (#4361EE) accent, #F5F7FA page background, flat white cards, and scoped .admin-panel CSS overrides so the public landing page is not affected. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-10 16:57:13 +03:00
parent 8dae7f5d3b
commit 5412a70f83
5 changed files with 187 additions and 25 deletions
@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');
+
+:root {
+  --bg-light: #f8fafc;
+  --bg-lighter: #ffffff;
+  --bg-panel: rgba(255, 255, 255, 0.7);
+  --accent-yellow: #f59e0b; /* Warmer amber/yellow for light theme */
+  --accent-orange: #ea580c; /* Deep orange */
+  --accent-blue: #0ea5e9; /* Modern blue accent */
+  --text-main: #0f172a; /* Slate 900 */
+  --text-muted: #475569; /* Slate 600 */
+  --border-light: rgba(15, 23, 42, 0.05);
+  --glass-bg: rgba(255, 255, 255, 0.85);
+  --glass-border: rgba(255, 255, 255, 0.6);
+  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
+  
+  --font-heading: 'Montserrat', sans-serif;
+  --font-body: 'Roboto', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--bg-light);
+  color: var(--text-main);
+  line-height: 1.6;
+  overflow-x: hidden;
+  
+  /* Modern clean background pattern */
+  background-image: 
+    radial-gradient(var(--border-light) 2px, transparent 2px);
+  background-size: 30px 30px;
+  background-attachment: fixed;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  letter-spacing: -0.02em;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  cursor: pointer;
+  font-family: var(--font-heading);
+  font-weight: 600;
+  border: none;
+  outline: none;
+}
+
+/* Utilities */
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  box-shadow: var(--glass-shadow);
+}
+
+.text-accent-yellow {
+  color: var(--accent-yellow);
+}
+
+.text-accent-orange {
+  color: var(--accent-orange);
+}
+
+.text-accent-blue {
+  color: var(--accent-blue);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent-orange), #f97316);
+  color: #ffffff;
+  padding: 16px 36px;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 15px 30px rgba(234, 88, 12, 0.4);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--text-main);
+  border: 2px solid var(--border-light);
+  padding: 14px 34px;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+
+.btn-outline:hover {
+  border-color: var(--text-main);
+  background: rgba(15, 23, 42, 0.05);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+section {
+  padding: 100px 0;
+}
+
+/* ── Admin Panel Theme ─────────────────────────────────────── */
+.admin-panel {
+  --bg-light: #F5F7FA;
+  --bg-lighter: #FFFFFF;
+  --bg-panel: #FFFFFF;
+  --accent-blue: #4361EE;
+  --accent-yellow: #F59E0B;
+  --accent-orange: #F95959;
+  --text-main: #1E1E2D;
+  --text-muted: #8C9097;
+  --border-light: #E9ECEF;
+  --glass-bg: #FFFFFF;
+  --glass-border: #E9ECEF;
+  --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  background: #F5F7FA;
+}
+
+.admin-panel .glass-panel {
+  background: #FFFFFF;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: 1px solid #E9ECEF;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.admin-panel .btn-primary {
+  background: #4361EE;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.25);
+  padding: 8px 18px;
+  font-size: 0.88rem;
+  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+.admin-panel .btn-primary:hover {
+  background: #3451D1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.35);
+}
+
+.admin-panel .btn-outline {
+  border-radius: 8px;
+  border-color: #E9ECEF;
+}