body.home #main-content,
body.front-page #main-content {
padding-top: calc(var(--header-h, 78px) + clamp(0.25rem, 0.8vw, 0.75rem));
}
body.home .home-hero,
body.front-page .home-hero {
padding-top: clamp(0.25rem, 1vw, 0.9rem);
padding-bottom: clamp(0.85rem, 2.2vw, 1.8rem);
}
body.home .home-hero__heading,
body.front-page .home-hero__heading {
margin-bottom: clamp(0.3rem, 1vw, 0.75rem);
}
body.home .home-hero__description,
body.front-page .home-hero__description {
margin-bottom: clamp(0.85rem, 2vw, 1.35rem);
}
.yaroo-home-slider-section {
width: 100%;
margin: clamp(0.2rem, 0.8vw, 0.65rem) auto 0;
padding: 0 clamp(8px, 1.8vw, 28px);
}
.yaroo-home-slider {
position: relative;
width: min(96vw, 1800px);
margin: 0 auto;
isolation: isolate;
touch-action: pan-y;
}
.yaroo-home-slider__viewport {
position: relative;
overflow: hidden;
width: 100%;
border-radius: clamp(16px, 2vw, 26px);
background:
radial-gradient(circle at 20% 20%, rgba(255, 122, 0, 0.12), transparent 36%),
linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
.yaroo-home-slider--has-background .yaroo-home-slider__viewport {
background-image:
linear-gradient(180deg, rgba(11,11,13,0.24), rgba(11,11,13,0.34)),
var(--yaroo-slider-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 42px rgba(0,0,0,0.22);
}
.yaroo-home-slider__track {
display: flex;
width: 100%;
transform: translate3d(0, 0, 0);
transition: transform 1650ms cubic-bezier(.18, .82, .16, 1);
will-change: transform;
}
.yaroo-home-slider__track.is-resetting {
transition: none !important;
}
.yaroo-home-slider__slide {
flex: 0 0 100%;
min-width: 0;
min-height: clamp(350px, 46vw, 840px);
display: flex;
align-items: flex-end;
justify-content: center;
padding: clamp(42px, 5.6vw, 105px) clamp(30px, 4.6vw, 78px) 0;
}
.yaroo-home-slider__image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: clamp(250px, 36vw, 660px);
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
transform: translateX(clamp(-38px, -2vw, -12px)) translateY(clamp(-50px, -2.5vw, -20px));
user-select: none;
-webkit-user-drag: none;
}
.yaroo-home-slider__arrow {
position: absolute;
top: 50%;
z-index: 80;
width: clamp(42px, 4vw, 58px);
height: clamp(42px, 4vw, 58px);
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 122, 0, 0.32);
border-radius: 999px;
background: rgba(12, 12, 15, 0.76);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
pointer-events: auto;
transform: translateY(-50%);
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.yaroo-home-slider__arrow:hover,
.yaroo-home-slider__arrow:focus-visible {
background: var(--orange, #ff7a00);
border-color: var(--orange, #ff7a00);
transform: translateY(-50%) scale(1.06);
outline: none;
}
.yaroo-home-slider__arrow span {
display: block;
margin-top: -4px;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1;
}
.yaroo-home-slider__arrow--previous {
left: clamp(4px, 1.5vw, 22px);
}
.yaroo-home-slider__arrow--next {
right: clamp(4px, 1.5vw, 22px);
}
.yaroo-home-slider__arrow,
.yaroo-home-slider__dot {
pointer-events: auto !important;
}
.yaroo-home-slider__arrow {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.yaroo-home-slider__dots {
position: absolute;
left: 50%;
bottom: clamp(10px, 1.6vw, 20px);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transform: translateX(-50%);
}
.yaroo-home-slider__dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.34);
cursor: pointer;
transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}
.yaroo-home-slider__dot:hover,
.yaroo-home-slider__dot:focus-visible {
background: rgba(255, 255, 255, 0.74);
transform: scale(1.15);
outline: none;
}
.yaroo-home-slider__dot.is-active {
width: 32px;
background: var(--orange, #ff7a00);
}
.yaroo-home-slider--single .yaroo-home-slider__slide {
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 700px) {
body.home #main-content,
body.front-page #main-content {
padding-top: calc(var(--header-h, 78px) + 0.35rem);
}
body.home .home-hero,
body.front-page .home-hero {
padding-top: 0.35rem;
padding-bottom: 1rem;
}
.yaroo-home-slider-section {
margin-top: 0.35rem;
padding-left: 4px;
padding-right: 4px;
}
.yaroo-home-slider {
width: 98vw;
}
.yaroo-home-slider__slide {
min-height: clamp(295px, 82vw, 540px);
align-items: flex-end;
padding: 42px 30px 0;
}
.yaroo-home-slider__image {
max-height: clamp(220px, 64vw, 410px);
transform: translateX(clamp(-18px, -3vw, -8px)) translateY(clamp(-30px, -4.4vw, -14px));
}
.yaroo-home-slider__arrow {
width: 40px;
height: 40px;
background: rgba(12, 12, 15, 0.82);
}
}
@media (prefers-reduced-motion: reduce) {
.yaroo-home-slider__track,
.yaroo-home-slider__arrow,
.yaroo-home-slider__dot {
transition: none !important;
}
} .yaroo-home-slider__viewport,
.yaroo-home-slider--has-background .yaroo-home-slider__viewport {
background: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
}