.

src/views/home/HomeView.vue

@@ -82,6 +82,15 @@ let bannerTimer: number | undefined
 
 const banner = computed(() => banners.value[bannerIndex.value] ?? FALLBACK_BANNER)
 
+const heroHasCopy = computed(() => {
+  const item = banner.value
+  return (
+    (item.showTitle !== false && item.title) ||
+    (item.showSubtitle !== false && item.subtitle) ||
+    (item.showCta !== false && item.ctaLabel)
+  )
+})
+
 function slideStyle(item: AppBannerDto) {
   if (!item.imageUrl) return undefined
   return { '--hero-image': `url("${item.imageUrl}")` }
@@ -231,7 +240,12 @@ async function toggleFavorite(productId: string) {
       <template v-else>
       <section class="hero-banner" :aria-label="banner.title">
         <TransitionGroup :name="heroAnim" tag="div" class="hero-banner__stage">
-          <article :key="banner.id" class="hero-slide" :style="slideStyle(banner)">
+          <article
+            :key="banner.id"
+            class="hero-slide"
+            :class="{ 'hero-slide--copy': heroHasCopy }"
+            :style="slideStyle(banner)"
+          >
             <div class="hero-slide__media" aria-hidden="true" />
             <div class="hero-banner__content">
               <h2 v-if="banner.showTitle !== false" class="hero-banner__title">
@@ -486,9 +500,16 @@ async function toggleFavorite(productId: string) {
   position: absolute;
   inset: 0;
   z-index: 0;
-  background:
-    linear-gradient(120deg, rgba(var(--color-accent-navy-rgb), 0.72), rgba(var(--color-primary-rgb), 0.45)),
-    var(--hero-image) center / cover no-repeat;
+  background: var(--hero-image) center / cover no-repeat;
+  background-color: #8a7a65;
+}
+
+.hero-slide--copy .hero-slide__media::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, transparent 52%);
+  pointer-events: none;
 }
 
 .hero-banner__content {