From 8d5e495be27ab1f47b4e19abaf58d94c27dd2ef8 Mon Sep 17 00:00:00 2001 From: MiTHRAL Date: Fri, 1 May 2026 02:25:12 -0400 Subject: [PATCH] feat: cinematic backdrop bleed with vignette and bottom fade on detail pages --- themepo-elegantfin.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/themepo-elegantfin.css b/themepo-elegantfin.css index d976c23..c4fc0cc 100644 --- a/themepo-elegantfin.css +++ b/themepo-elegantfin.css @@ -88,9 +88,25 @@ body::after { } /* Make background transparent ONLY on item pages to reveal the backdrop */ -#itemDetailPage, +#itemDetailPage { + background-color: transparent !important; +} + .backgroundContainer.withBackdrop { background-color: transparent !important; + filter: saturate(0.75) brightness(0.9); +} + +/* Radial vignette + bottom fade: bleeds backdrop into obsidian base */ +.backgroundContainer.withBackdrop::after { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(ellipse at center, transparent 20%, rgba(8, 9, 12, 0.65) 100%), + linear-gradient(to bottom, transparent 40%, #08090C 100%); + pointer-events: none; + z-index: 1; } /* Allow the body background to be "pushed back" when a backdrop is present */