From 78c87aaedd295d55ec845cb0fd7abaf56c6f7b89 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Wed, 12 Nov 2025 23:24:31 +0100
Subject: [PATCH] refactor: Redesign match hero with modern translucent panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented comprehensive visual overhaul based on UX feedback:

Background & Framing:
- Replace single gradient with dual-layer system for depth
- Add top-to-bottom gradient (30% → transparent → 40%) for framing
- Add left-to-right gradient (70% → 40% → 70%) for content focus
- Creates natural vignette effect that draws eye to center

Hero Info Panel:
- Wrap score and metadata in translucent panel (black/40 + backdrop-blur)
- Add subtle border (white/10) for definition
- Center-align and constrain width (max-w-3xl) for focused composition
- Cleaner hierarchy with reduced text shadows (rely on panel for contrast)

Typography & Layout:
- Increase map title to text-5xl, remove badge duplication
- Score numbers to text-6xl for prominence
- Team labels to text-xs with reduced opacity (70%)
- Metadata with bullet separators (•) for cleaner inline layout
- Smaller icons (3.5) and tighter spacing

Download Demo Button:
- Ghost style with translucent background (white/15)
- Subtle border (white/25) instead of solid primary color
- Hover effect (white/25) for interaction feedback
- Hide text on mobile (icon only) for space efficiency

Navigation:
- Reduce tabs background to 35% opacity with stronger backdrop-blur-lg
- Add border (white/10) for subtle definition
- Maintains readability while showing more background

Result: Modern, cinematic interface with improved visual hierarchy
and readability on both dark and bright map backgrounds.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/match/[id]/+layout.svelte | 108 ++++++++++++---------------
 1 file changed, 47 insertions(+), 61 deletions(-)

diff --git a/src/routes/match/[id]/+layout.svelte b/src/routes/match/[id]/+layout.svelte
index b810020..6bac483 100644
--- a/src/routes/match/[id]/+layout.svelte
+++ b/src/routes/match/[id]/+layout.svelte
@@ -48,8 +48,9 @@
 	<!-- Background Image -->
 	<div class="absolute inset-0">
 		<img src={mapBg} alt={mapName} class="h-full w-full object-cover" onerror={handleImageError} />
-		<!-- Stronger gradient overlay for better text contrast -->
-		<div class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/85 to-black/75"></div>
+		<!-- Multi-layer gradient overlay for depth and framing -->
+		<div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/40"></div>
+		<div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-black/70"></div>
 	</div>
 
 	<div class="container relative mx-auto px-4 py-8">
@@ -65,84 +66,69 @@
 		</div>
 
 		<!-- Map Name -->
-		<div class="mb-4 flex items-center justify-between">
+		<div class="mb-6 flex items-center justify-between">
 			<div>
-				{#if match.map}
-					<Badge variant="default" size="lg">{match.map}</Badge>
-				{/if}
-				<h1
-					class="mt-2 text-4xl font-bold text-white"
-					style="text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);"
-				>
+				<h1 class="text-5xl font-bold text-white drop-shadow-2xl">
 					{mapName}
 				</h1>
 			</div>
 			{#if match.demo_parsed}
 				<button
-					class="btn gap-2 bg-primary/90 text-primary-content backdrop-blur-sm hover:bg-primary"
+					class="btn btn-ghost gap-2 border border-white/25 bg-white/15 text-white backdrop-blur-md hover:bg-white/25"
 				>
 					<Download class="h-4 w-4" />
-					Download Demo
+					<span class="hidden sm:inline">Download Demo</span>
 				</button>
 			{/if}
 		</div>
 
-		<!-- Score -->
-		<div class="mb-6 flex items-center justify-center gap-6">
-			<div class="text-center">
-				<div
-					class="text-sm font-medium uppercase tracking-wider text-white"
-					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
-				>
-					Terrorists
-				</div>
-				<div
-					class="font-mono text-5xl font-bold text-terrorist"
-					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
-				>
-					{match.score_team_a}
-				</div>
-			</div>
-			<div class="text-3xl font-bold text-white" style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);">
-				:
-			</div>
-			<div class="text-center">
-				<div
-					class="text-sm font-medium uppercase tracking-wider text-white"
-					style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
-				>
-					Counter-Terrorists
-				</div>
-				<div
-					class="font-mono text-5xl font-bold text-ct"
-					style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
-				>
-					{match.score_team_b}
-				</div>
-			</div>
-		</div>
-
-		<!-- Match Meta -->
+		<!-- Hero Info Panel with translucent background -->
 		<div
-			class="flex flex-wrap items-center justify-center gap-4 text-sm text-white"
-			style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
+			class="mx-auto max-w-3xl rounded-xl border border-white/10 bg-black/40 p-6 backdrop-blur-md"
 		>
-			<div class="flex items-center gap-2">
-				<Calendar class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
-				<span>{formattedDate}</span>
+			<!-- Score -->
+			<div class="mb-4 flex items-center justify-center gap-8">
+				<div class="text-center">
+					<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
+						Terrorists
+					</div>
+					<div class="font-mono text-6xl font-bold text-terrorist drop-shadow-lg">
+						{match.score_team_a}
+					</div>
+				</div>
+				<div class="text-4xl font-bold text-white/50">:</div>
+				<div class="text-center">
+					<div class="mb-1 text-xs font-medium uppercase tracking-wider text-white/70">
+						Counter-Terrorists
+					</div>
+					<div class="font-mono text-6xl font-bold text-ct drop-shadow-lg">
+						{match.score_team_b}
+					</div>
+				</div>
 			</div>
-			<div class="flex items-center gap-2">
-				<Clock class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
-				<span>{duration}</span>
+
+			<!-- Match Meta -->
+			<div class="flex flex-wrap items-center justify-center gap-3 text-sm text-white/90">
+				<div class="flex items-center gap-1.5">
+					<Calendar class="h-3.5 w-3.5" />
+					<span>{formattedDate}</span>
+				</div>
+				<span class="text-white/30">•</span>
+				<div class="flex items-center gap-1.5">
+					<Clock class="h-3.5 w-3.5" />
+					<span>{duration}</span>
+				</div>
+				<span class="text-white/30">•</span>
+				<span>MR12 ({match.max_rounds} rounds)</span>
+				{#if match.demo_parsed}
+					<span class="text-white/30">•</span>
+					<Badge variant="success" size="sm">Demo Parsed</Badge>
+				{/if}
 			</div>
-			<Badge variant="info" size="sm">MR12 ({match.max_rounds} rounds)</Badge>
-			{#if match.demo_parsed}
-				<Badge variant="success" size="sm">Demo Parsed</Badge>
-			{/if}
 		</div>
 
 		<!-- Tabs -->
-		<div class="mt-6 rounded-lg bg-black/70 p-4 backdrop-blur-md">
+		<div class="mt-6 rounded-lg border border-white/10 bg-black/35 p-4 backdrop-blur-lg">
 			<Tabs {tabs} variant="bordered" size="md" />
 		</div>
 	</div>