forked from vyla-entertainment/home-frontend
109 lines
2.4 KiB
CSS
109 lines
2.4 KiB
CSS
.hero {
|
|
position: relative;
|
|
padding: clamp(6rem, 14vh, 8.5rem) 0 clamp(3rem, 6vh, 5rem);
|
|
overflow: hidden;
|
|
isolation: isolate;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-atmosphere {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
-webkit-mask-image: linear-gradient(to bottom,
|
|
black 0%,
|
|
black 48%,
|
|
rgba(0, 0, 0, 0.5) 80%,
|
|
transparent 96%);
|
|
mask-image: linear-gradient(to bottom,
|
|
black 0%,
|
|
black 48%,
|
|
rgba(0, 0, 0, 0.5) 80%,
|
|
transparent 96%);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-repeat: no-repeat;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.hero-atmosphere-video {
|
|
position: absolute;
|
|
inset: -6%;
|
|
width: 112%;
|
|
height: 112%;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
transform: translateZ(0) scale(1.04);
|
|
}
|
|
|
|
.hero-atmosphere-sheen {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.18), transparent 46%),
|
|
linear-gradient(116deg, transparent 18%, rgba(255, 255, 255, 0.06) 37%, transparent 51%);
|
|
mix-blend-mode: soft-light;
|
|
opacity: 0.8;
|
|
animation: hero-sheen 16s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.hero-atmosphere-vignette {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, transparent 15%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.95) 100%),
|
|
radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
|
|
}
|
|
|
|
#hero-byte-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.9;
|
|
mix-blend-mode: screen;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes hero-sheen {
|
|
0% {
|
|
transform: translate3d(-4%, 0, 0) scale(1.04);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(5%, 1%, 0) scale(1.1);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#hero-byte-overlay {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-atmosphere-sheen {
|
|
animation: none;
|
|
}
|
|
|
|
.hero-atmosphere-video,
|
|
#hero-byte-overlay {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero {
|
|
padding-top: 8rem;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-height: 600px) {
|
|
.hero {
|
|
height: auto;
|
|
min-height: 100svh;
|
|
padding-top: 5rem;
|
|
}
|
|
} |