feat: cinematic backdrop bleed with vignette and bottom fade on detail pages
This commit is contained in:
parent
1c128fd902
commit
8d5e495be2
1 changed files with 17 additions and 1 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue