From a9743025a71f2f8872f9af3f1472a04a95defe67 Mon Sep 17 00:00:00 2001 From: nitrix Date: Mon, 9 Mar 2026 18:13:57 +0100 Subject: [PATCH] Fix hero image transition on event detail page Replace hard-edged color overlay with CSS mask-image fade-out and increase hero height to 420px for a seamless blend into the aurora mesh background. Co-Authored-By: Claude Opus 4.6 --- frontend/src/views/EventDetailView.vue | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue index 36a8cbd..646ab09 100644 --- a/frontend/src/views/EventDetailView.vue +++ b/frontend/src/views/EventDetailView.vue @@ -268,15 +268,19 @@ onMounted(fetchEvent) .detail__hero { position: relative; width: 100%; - height: 260px; - overflow: hidden; + height: 420px; + overflow: visible; flex-shrink: 0; } .detail__hero-img { + position: absolute; + inset: 0; width: 100%; height: 100%; object-fit: cover; + mask-image: linear-gradient(to bottom, black 40%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%); } .detail__hero-overlay { @@ -284,9 +288,8 @@ onMounted(fetchEvent) inset: 0; background: linear-gradient( to bottom, - rgba(0, 0, 0, 0.4) 0%, - transparent 50%, - var(--color-gradient-start) 100% + rgba(27, 23, 48, 0.4) 0%, + transparent 50% ); }