From 442529261bc63aea4a32ef79db59924d9dde68b0 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@protonmail.ch>
Date: Fri, 9 Jan 2026 15:58:42 -0700
Subject: [PATCH] increase visibility on text with no frosted background

---
 resources/css/app.css          | 13 +++++++++++++
 resources/js/pages/Weather.vue | 16 ++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index fc26557..605a2ec 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -44,3 +44,16 @@
 .weeklyReport {
     margin-top: 1rem;
 }
+
+.text-shadow {
+    text-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.5),
+        0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.text-shadow-lg {
+    text-shadow:
+        0 2px 8px rgba(0, 0, 0, 0.6),
+        0 4px 16px rgba(0, 0, 0, 0.4),
+        0 8px 32px rgba(0, 0, 0, 0.2);
+}
diff --git a/resources/js/pages/Weather.vue b/resources/js/pages/Weather.vue
index ffb0ef5..137b71d 100644
--- a/resources/js/pages/Weather.vue
+++ b/resources/js/pages/Weather.vue
@@ -108,9 +108,9 @@ function parseWindSpeed(windSpeed: string | null): number {
         <!-- Main content -->
         <div class="relative z-10 mx-auto min-h-screen max-w-6xl p-6 lg:p-8">
             <!-- Header -->
-            <header class="mb-8 flex items-center justify-between">
+            <header class="text-shadow mb-8 flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                    <svg class="h-8 w-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="h-8 w-8 text-blue-400 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="getIconPath('cloud-sun')" />
                     </svg>
                     <span class="text-lg font-medium text-white/80">Weather</span>
@@ -126,26 +126,26 @@ function parseWindSpeed(windSpeed: string | null): number {
                 <div class="currentForecast">
                     <div class="forecast flex flex-col justify-center">
                         <div class="shortDescription">
-                            <h1 class="text-4xl font-light tracking-wide text-white md:text-5xl">
+                            <h1 class="text-shadow-lg text-4xl font-light tracking-wide text-white md:text-5xl">
                                 {{ current.shortForecast }}
                             </h1>
-                            <p class="mt-2 text-lg text-white/60">
+                            <p class="text-shadow mt-2 text-lg text-white/70">
                                 {{ current.detailedForecast || 'Current conditions' }}
                             </p>
                         </div>
 
                         <div class="currentTemp mt-8">
                             <div class="flex items-start">
-                                <span class="text-8xl font-thin tracking-tighter text-white md:text-9xl">
+                                <span class="text-shadow-lg text-8xl font-thin tracking-tighter text-white md:text-9xl">
                                     {{ current.temperature }}
                                 </span>
-                                <span class="mt-4 text-4xl font-thin text-white/60">
+                                <span class="text-shadow-lg mt-4 text-4xl font-thin text-white/70">
                                     °{{ current.temperatureUnit }}
                                 </span>
                             </div>
-                            <div class="mt-4 flex items-center gap-4 text-white/60">
+                            <div class="text-shadow mt-4 flex items-center gap-4 text-white/70">
                                 <span class="flex items-center gap-1">
-                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <svg class="h-4 w-4 drop-shadow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                     </svg>