From c3f072b159aaeba229be4acf727e7dddacfb7ce4 Mon Sep 17 00:00:00 2001
From: Dongho Kim <dongho.kim@tum.de>
Date: Sun, 7 Jun 2026 00:51:46 +0200
Subject: [PATCH] update

---
 src/style.css | 72 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/style.css b/src/style.css
index 190e058..300d2f7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,11 +7,19 @@
   --bg-card:      #ffffff;
   --bg-card-hover:#f8fafc;
   --bg-header:    #e2e8f0;
+  --bg-controls:  rgba(255, 255, 255, 0.85);
+  --bg-element:   rgba(0, 0, 0, 0.04);
+  --bg-element-hover: rgba(0, 0, 0, 0.08);
   --border:       rgba(0,0,0,0.08);
   --border-hover: rgba(0,0,0,0.15);
+  --border-light: rgba(0,0,0,0.06);
   --text-primary: #0f172a;
   --text-secondary: #334155;
   --text-muted:   rgba(15,23,42,0.6);
+  --text-faint:   rgba(15,23,42,0.35);
+  --shadow-lg:    0 24px 56px rgba(15,23,42,0.15), 0 0 0 1px rgba(0,0,0,0.04);
+  --shadow-md:    0 4px 20px rgba(15,23,42,0.1);
+  --shadow-header:0 4px 32px rgba(15,23,42,0.1);
   --gold:         #d4af37;
   --gold-glow:    rgba(212,175,55,0.2);
   --pitch-1:      #2e7d32;
@@ -28,11 +36,19 @@
   --bg-card:      #0d1424;
   --bg-card-hover:#111c30;
   --bg-header:    #060a12;
+  --bg-controls:  rgba(8, 12, 20, 0.85);
+  --bg-element:   rgba(255, 255, 255, 0.04);
+  --bg-element-hover: rgba(255, 255, 255, 0.08);
   --border:       rgba(255,255,255,0.07);
   --border-hover: rgba(255,255,255,0.15);
+  --border-light: rgba(255,255,255,0.06);
   --text-primary: #f0f4ff;
   --text-secondary: #cbd5e1;
   --text-muted:   rgba(240,244,255,0.5);
+  --text-faint:   rgba(240,244,255,0.25);
+  --shadow-lg:    0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
+  --shadow-md:    0 4px 20px rgba(0,0,0,0.25);
+  --shadow-header:0 4px 32px rgba(0,0,0,0.5);
   --gold:         #ffd700;
   --gold-glow:    rgba(255,215,0,0.3);
   --pitch-1:      #1a4f21;
@@ -156,7 +172,7 @@ body {
 }
 .site-dates {
   font-size: 13px;
-  color: rgba(240,244,255,0.35);
+  color: var(--text-faint);
   letter-spacing: 1px;
   margin-bottom: 32px;
 }
@@ -164,7 +180,7 @@ body {
 .stats-bar {
   display: inline-flex;
   align-items: center;
-  background: rgba(255,255,255,0.04);
+  background: var(--bg-element);
   border: 1px solid var(--border);
   border-radius: 50px;
   padding: 12px 24px;
@@ -181,12 +197,12 @@ body {
 /* ── Controls Bar ─────────────────────────────────────────────────────────── */
 .controls-bar {
   position: sticky; top: 0; z-index: 100;
-  background: rgba(8,12,20,0.85);
+  background: var(--bg-controls);
   backdrop-filter: blur(20px) saturate(180%);
   border-bottom: 1px solid var(--border);
   transition: box-shadow var(--transition);
 }
-.controls-bar.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,0.5); }
+.controls-bar.scrolled { box-shadow: var(--shadow-header); }
 .controls-inner {
   max-width: 1400px; margin: 0 auto; padding: 12px 24px;
   display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
@@ -195,7 +211,7 @@ body {
 .search-wrap { position: relative; flex-shrink: 0; }
 .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
 .search-input {
-  background: rgba(255,255,255,0.06);
+  background: var(--bg-element);
   border: 1px solid var(--border);
   border-radius: 24px;
   color: var(--text-primary);
@@ -207,14 +223,14 @@ body {
 .search-input::placeholder { color: var(--text-muted); }
 .search-input:focus {
   border-color: rgba(255,215,0,0.4);
-  background: rgba(255,255,255,0.09);
+  background: var(--bg-element-hover);
   box-shadow: 0 0 0 3px rgba(255,215,0,0.1);
   width: 220px;
 }
 
 .filter-nav { display: flex; gap: 6px; flex-wrap: wrap; }
 .filter-btn {
-  background: rgba(255,255,255,0.05);
+  background: var(--bg-element);
   border: 1px solid var(--border);
   border-radius: 20px;
   color: var(--text-muted);
@@ -225,7 +241,7 @@ body {
   white-space: nowrap;
 }
 .filter-btn:hover {
-  background: rgba(255,255,255,0.09);
+  background: var(--bg-element-hover);
   border-color: var(--border-hover);
   color: var(--text-primary);
   transform: translateY(-1px);
@@ -269,7 +285,7 @@ body {
   border-color: var(--border-hover);
   background: var(--bg-card-hover);
   transform: translateY(-6px);
-  box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
+  box-shadow: var(--shadow-lg);
 }
 .group-card:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
 
@@ -294,7 +310,7 @@ body {
   border-radius: var(--radius-sm);
   transition: background var(--transition);
 }
-.team-card:hover { background: rgba(255,255,255,0.04); }
+.team-card:hover { background: var(--bg-element); }
 .team-flag {
   font-size: 26px; line-height: 1; flex-shrink: 0;
   filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
@@ -345,15 +361,15 @@ body {
 
 .modal-box {
   position: relative; z-index: 1;
-  background: #0d1424;
-  border: 1px solid rgba(255,255,255,0.1);
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
   border-radius: 20px;
   width: 100%;
   max-width: 640px;
   max-height: 85vh;
   overflow: hidden;
   display: flex; flex-direction: column;
-  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
+  box-shadow: var(--shadow-lg);
   animation: modal-in 0.3s cubic-bezier(0.34,1.56,0.64,1);
 }
 @keyframes modal-in {
@@ -365,7 +381,7 @@ body {
 .modal-header {
   padding: 24px 24px 20px;
   background: linear-gradient(135deg, color-mix(in srgb, var(--group-color) 18%, transparent), color-mix(in srgb, var(--group-color) 4%, transparent));
-  border-bottom: 1px solid rgba(255,255,255,0.07);
+  border-bottom: 1px solid var(--border-light);
   position: relative;
   flex-shrink: 0;
 }
@@ -379,8 +395,8 @@ body {
 .modal-teams-row { display: flex; gap: 8px; flex-wrap: wrap; }
 .modal-team-chip {
   display: flex; align-items: center; gap: 6px;
-  background: rgba(255,255,255,0.07);
-  border: 1px solid rgba(255,255,255,0.1);
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
   border-radius: 24px;
   padding: 5px 12px;
   font-size: 13px; font-weight: 600;
@@ -389,8 +405,8 @@ body {
 
 .modal-close {
   position: absolute; top: 18px; right: 18px;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.12);
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
   border-radius: 50%;
   color: var(--text-muted);
   cursor: pointer;
@@ -399,13 +415,13 @@ body {
   display: flex; align-items: center; justify-content: center;
   transition: all var(--transition);
 }
-.modal-close:hover { background: rgba(255,255,255,0.15); color: var(--text-primary); transform: scale(1.1); }
+.modal-close:hover { background: var(--bg-element-hover); color: var(--text-primary); transform: scale(1.1); }
 
 /* Modal body */
 .modal-body { overflow-y: auto; padding: 20px 24px 24px; flex: 1; }
 .modal-body::-webkit-scrollbar { width: 4px; }
 .modal-body::-webkit-scrollbar-track { background: transparent; }
-.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
+.modal-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
 
 /* Modal Tabs */
 .modal-tabs {
@@ -413,7 +429,7 @@ body {
   gap: 12px;
   padding: 0 24px;
   margin-bottom: 16px;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+  border-bottom: 1px solid var(--border-light);
 }
 
 .modal-tab {
@@ -608,17 +624,17 @@ body {
 
 /* ── Match accordion card ─────────────────────────────────────────────────── */
 .match-card {
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid var(--border-light);
   border-radius: 14px;
   overflow: hidden;
   margin-bottom: 8px;
   transition: border-color var(--transition), box-shadow var(--transition);
-  background: rgba(255,255,255,0.02);
+  background: var(--bg-element);
 }
 .match-card:last-child { margin-bottom: 0; }
 .match-card:hover {
-  border-color: rgba(255,255,255,0.14);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-md);
 }
 .match-card.expanded {
   border-color: var(--match-color, rgba(255,215,0,0.4));
@@ -639,7 +655,7 @@ body {
   gap: 8px;
   transition: background var(--transition);
 }
-.match-summary:hover { background: rgba(255,255,255,0.03); }
+.match-summary:hover { background: var(--bg-element); }
 
 .match-team-col {
   display: flex;
@@ -678,7 +694,7 @@ body {
   font-size: 9px;
   font-weight: 900;
   letter-spacing: 2px;
-  color: rgba(240,244,255,0.25);
+  color: var(--text-faint);
   text-transform: uppercase;
 }
 
@@ -769,7 +785,7 @@ body {
   font-size: 13px;
   background: linear-gradient(to top, rgba(255,215,0,0.02), transparent);
 }
-.footer-main   { font-weight: 600; color: rgba(240,244,255,0.6); margin-bottom: 6px; }
+.footer-main   { font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
 .footer-sub    { margin-bottom: 6px; }
 .footer-debut  { color: rgba(255,215,0,0.5); font-size: 12px; }