From a3955da7f2c4ec63429779e8c186ee66ac53533e Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Wed, 12 Nov 2025 23:16:25 +0100
Subject: [PATCH] fix: Improve text visibility on match hero section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Strengthen background gradient overlay from 90/70/50% to 95/85/75% opacity
- Add stronger text shadows to score numbers (double shadow for depth)
- Increase team label opacity from 70% to 90%
- Increase metadata text from white/80 to white with drop-shadow
- Increase tabs background from black/30 to black/50
- Improve colon separator contrast

Fixes readability issues on bright maps like de_dust2.

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

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

diff --git a/src/routes/match/[id]/+layout.svelte b/src/routes/match/[id]/+layout.svelte
index 422c928..c3f563e 100644
--- a/src/routes/match/[id]/+layout.svelte
+++ b/src/routes/match/[id]/+layout.svelte
@@ -48,7 +48,8 @@
 	<!-- Background Image -->
 	<div class="absolute inset-0">
 		<img src={mapBg} alt={mapName} class="h-full w-full object-cover" onerror={handleImageError} />
-		<div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-black/50"></div>
+		<!-- 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>
 	</div>
 
 	<div class="container relative mx-auto px-4 py-8">
@@ -82,20 +83,28 @@
 		<!-- Score -->
 		<div class="mb-6 flex items-center justify-center gap-6">
 			<div class="text-center">
-				<div class="text-sm font-medium text-white/70">TERRORISTS</div>
-				<div class="font-mono text-5xl font-bold text-terrorist drop-shadow-lg">
+				<div class="text-sm font-medium text-white/90 drop-shadow-md">TERRORISTS</div>
+				<div
+					class="font-mono text-5xl font-bold text-terrorist"
+					style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
+				>
 					{match.score_team_a}
 				</div>
 			</div>
-			<div class="text-3xl font-bold text-white/40">:</div>
+			<div class="text-3xl font-bold text-white/60 drop-shadow-lg">:</div>
 			<div class="text-center">
-				<div class="text-sm font-medium text-white/70">COUNTER-TERRORISTS</div>
-				<div class="font-mono text-5xl font-bold text-ct drop-shadow-lg">{match.score_team_b}</div>
+				<div class="text-sm font-medium text-white/90 drop-shadow-md">COUNTER-TERRORISTS</div>
+				<div
+					class="font-mono text-5xl font-bold text-ct"
+					style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
+				>
+					{match.score_team_b}
+				</div>
 			</div>
 		</div>
 
 		<!-- Match Meta -->
-		<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white/80">
+		<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white drop-shadow-md">
 			<div class="flex items-center gap-2">
 				<Calendar class="h-4 w-4" />
 				<span>{formattedDate}</span>
@@ -111,7 +120,7 @@
 		</div>
 
 		<!-- Tabs -->
-		<div class="mt-6 rounded-lg bg-black/30 p-4 backdrop-blur-sm">
+		<div class="mt-6 rounded-lg bg-black/50 p-4 backdrop-blur-sm">
 			<Tabs {tabs} variant="bordered" size="md" />
 		</div>
 	</div>