From 56bd303254c26678042018aa585fe5431083c8c81e46e7beeee249cccd8e41a2 Mon Sep 17 00:00:00 2001
From: Claude Dev <support+claude@ezscale.cloud>
Date: Sat, 14 Mar 2026 17:31:42 -0400
Subject: [PATCH] Fix light mode contrast issues on marketing pages

Force white text inside .hero-dark-grid since its background is always
dark, and replace bg-surface-variant with the theme-aware section-alt-bg
class on the About page Values and Stats sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 website/resources/styles/_marketing.scss      | 21 +++++++++++++++++++
 .../resources/ts/Pages/Marketing/About.vue    |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/website/resources/styles/_marketing.scss b/website/resources/styles/_marketing.scss
index f063f02..40ac635 100644
--- a/website/resources/styles/_marketing.scss
+++ b/website/resources/styles/_marketing.scss
@@ -38,6 +38,27 @@
     background: radial-gradient(circle, rgba($primary, 0.15) 0%, transparent 70%);
     pointer-events: none;
   }
+
+  // Force light text since background is always dark
+  color: #fff;
+
+  .text-medium-emphasis {
+    color: rgba(255, 255, 255, 0.7) !important;
+  }
+
+  .text-disabled {
+    color: rgba(255, 255, 255, 0.4) !important;
+  }
+
+  .text-high-emphasis {
+    color: rgba(255, 255, 255, 0.9) !important;
+  }
+
+  // Outlined buttons need visible borders on dark bg
+  .v-btn--variant-outlined {
+    border-color: rgba(255, 255, 255, 0.5);
+    color: #fff;
+  }
 }
 
 // Glass morphism cards — theme-aware
diff --git a/website/resources/ts/Pages/Marketing/About.vue b/website/resources/ts/Pages/Marketing/About.vue
index c3f2ffa..d1a84ae 100644
--- a/website/resources/ts/Pages/Marketing/About.vue
+++ b/website/resources/ts/Pages/Marketing/About.vue
@@ -44,7 +44,7 @@ const stats = [
     </VContainer>
 
     <!-- Values -->
-    <div class="bg-surface-variant py-16">
+    <div class="section-alt-bg py-16">
       <VContainer>
         <SectionHeader
           label="Our Values"
@@ -97,7 +97,7 @@ const stats = [
     </VContainer>
 
     <!-- Stats -->
-    <div class="bg-surface-variant py-16">
+    <div class="section-alt-bg py-16">
       <VContainer>
         <VRow>
           <VCol v-for="stat in stats" :key="stat.label" cols="6" md="3">