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>
This commit is contained in:
Claude Dev
2026-03-14 17:31:42 -04:00
parent 9a12deeed3
commit 56bd303254
2 changed files with 23 additions and 2 deletions

View File

@@ -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

View File

@@ -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">