.home-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
color: var(--wp--preset--color--custom-white, #fff);
background: var(--wp--preset--color--custom-default, #000);
overflow: hidden;
}
.home-hero__swiper {
height: 100vh;
height: 100dvh;
min-height: inherit;
}
.home-hero__swiper .swiper-wrapper,
.home-hero__slide {
height: 100%;
}
.home-hero__slide {
position: relative;
display: flex;
align-items: flex-end;
}
.home-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.home-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.15) 0%,
rgba(0, 0, 0, 0.35) 45%,
rgba(0, 0, 0, 0.55) 100%
);
pointer-events: none;
}
.home-hero__content {
position: relative;
z-index: 1;
width: 100%;
box-sizing: border-box;
padding:
var(--wp--preset--spacing--7, 8rem)
max(0px, calc((100% - var(--wp--style--global--wide-size, 1456px)) / 2))
calc(var(--wp--preset--spacing--6, 5rem) + 4rem);
}
.home-hero__title {
margin: 0;
max-width: 13ch;
font-family: var(--wp--preset--font-family--outfit);
font-size: var(--wp--preset--font-size--9);
font-weight: 400;
line-height: 1;
color: var(--wp--preset--color--custom-white, #fff);
}
.home-hero__footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--3, 2rem);
width: 100%;
box-sizing: border-box;
margin: 0;
padding:
0
max(0px, calc((100% - var(--wp--style--global--wide-size, 1456px)) / 2))
var(--wp--preset--spacing--4, 3rem);
pointer-events: none;
}
.home-hero__pagination,
.home-hero__footer .wp-block-buttons {
pointer-events: auto;
}
.home-hero .home-hero__pagination.swiper-pagination {
position: static !important;
display: flex;
align-items: center;
gap: 10px;
width: auto !important;
}
.home-hero .home-hero__bullet.swiper-pagination-bullet {
position: relative;
display: block;
width: 8px;
height: 8px;
margin: 0 !important;
padding: 0;
border: 0;
border-radius: 8px;
background: var(--wp--preset--color--custom-white, #fff);
opacity: 1;
cursor: pointer;
overflow: hidden;
transition: width 0.35s ease, background-color 0.25s ease;
}
.home-hero .home-hero__bullet.swiper-pagination-bullet-active {
width: 56px;
background: var(--wp--preset--color--custom-bg-2, #c1c1c1);
opacity: 1;
}
.home-hero .home-hero__bullet-progress {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--wp--preset--color--custom-white, #fff);
border-radius: 8px;
}
.home-hero .home-hero__bullet.swiper-pagination-bullet-active .home-hero__bullet-progress {
animation-name: home-hero-progress;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes home-hero-progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
@media (max-width: 768px) {
.home-hero,
.home-hero__swiper {
min-height: 100svh;
height: 100svh;
}
.home-hero__content {
padding-bottom: calc(var(--wp--preset--spacing--5, 4rem) + 5rem);
}
.home-hero__title {
max-width: none;
}
.home-hero__footer {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--2, 1.5rem);
padding-bottom: var(--wp--preset--spacing--3, 2rem);
}
.home-hero__footer .wp-block-buttons {
align-self: flex-end;
}
.home-hero .home-hero__bullet.swiper-pagination-bullet-active {
width: 44px;
}
}