.ev-hero-slider,
.ev-hero-slider * ,
.ev-quote-slider,
.ev-quote-slider * {
box-sizing: border-box;
}
.ev-hero-slider {
position: relative;
width: 100vw;
height: 100vh;
min-height: 500px;
max-height: 940px;
overflow: hidden;
background: #34428d;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.ev-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 700ms ease;
}
.ev-hero-slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
.ev-hero-slide__link {
display: block;
position: relative;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}
.ev-hero-slide__image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: var(--pos-desktop-x, 50%) var(--pos-desktop-y, 50%);
transform: scale(1);
}
.ev-hero-slide.is-active .ev-hero-slide__image {
animation: evHeroBgScale 7s ease-in-out forwards;
}
.ev-hero-slide__content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}
.ev-hero-slide__date,
.ev-hero-slide__title,
.ev-hero-slide__place {
width: 100%;
padding-left: clamp(16px, 2vw, 32px);
padding-right: clamp(16px, 2vw, 32px);
color: #fff;
background: rgba(129, 137, 141, 0.31);
border-top: 2px solid rgba(255,255,255,.95);
text-transform: uppercase;
font-family: Anton, sans-serif;
font-weight: 400;
letter-spacing: .01em;
opacity: 0;
transform: scale(.96) translateY(14px);
white-space: nowrap;
overflow: hidden;
}
.ev-hero-slide__date {
font-size: clamp(2rem, 3vw, 4rem);
line-height: 1;
padding-top: .22em;
padding-bottom: .22em;
text-transform: none;
}
.ev-hero-slide__title {
font-size: clamp(3rem, 5.4vw, 6.6rem);
line-height: .95;
padding-top: .18em;
padding-bottom: .18em;
}
.ev-hero-slide__place {
border-bottom: 2px solid rgba(255,255,255,.95);
font-size: clamp(1.35rem, 2vw, 2.8rem);
line-height: 1;
padding-top: .28em;
padding-bottom: .28em;
}
.ev-hero-slide.is-active .ev-hero-slide__date {
animation: evTextZoomIn 520ms ease forwards 160ms;
}
.ev-hero-slide.is-active .ev-hero-slide__title {
animation: evTextZoomIn 520ms ease forwards 260ms;
}
.ev-hero-slide.is-active .ev-hero-slide__place {
animation: evTextZoomIn 520ms ease forwards 360ms;
}
.ev-hero-slider__arrow {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
border: 0;
background: transparent;
color: rgba(255,255,255,.55);
font-size: 4.5rem;
line-height: 1;
cursor: pointer;
}
.ev-hero-slider__arrow--prev { left: 24px; }
.ev-hero-slider__arrow--next { right: 24px; }
.ev-hero-slider__dots {
position: absolute;
left: 50%;
bottom: 4px;
z-index: 10;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.ev-hero-slider__dot {
width: 11px;
height: 11px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.35);
cursor: pointer;
padding: 0;
}
.ev-hero-slider__dot.is-active { background: rgba(255,255,255,.95); }
.ev-quote-slider {
position: relative;
min-height: 360px;
padding: clamp(60px, 9vw, 140px) clamp(32px, 8vw, 140px);
background: #c9c9c9;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ev-quote-slide {
display: none;
max-width: 1500px;
text-align: center;
}
.ev-quote-slide.is-active {
display: block;
animation: evQuoteFadeIn 600ms ease forwards;
}
.ev-quote-slide blockquote { margin: 0; }
.ev-quote-slide p,
.ev-quote-slide cite {
font-family: "Bree Serif", Georgia, "Times New Roman", serif;
font-weight: 400;
line-height: 1.5;
color: #000;
}
.ev-quote-slide p {
margin: 0;
font-size: clamp(1.25rem, 1.7vw, 2rem);
}
.ev-quote-slide cite {
display: block;
margin-top: .35em;
font-size: clamp(1.25rem, 1.7vw, 2rem);
font-style: normal;
}
.ev-quote-slider__arrow {
position: absolute;
top: 50%;
z-index: 3;
transform: translateY(-50%);
border: 0;
background: transparent;
color: rgba(255,255,255,.65);
font-size: clamp(3rem, 4vw, 5rem);
line-height: 1;
cursor: pointer;
}
.ev-quote-slider__arrow--prev { left: 28px; }
.ev-quote-slider__arrow--next { right: 28px; }
@keyframes evHeroBgScale {
from { transform: scale(1); }
to { transform: scale(1.025); }
}
@keyframes evTextZoomIn {
from {
opacity: 0;
transform: scale(.96) translateY(14px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes evQuoteFadeIn {
from {
opacity: 0;
transform: scale(.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
.ev-hero-slider {
width: 100%;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 320 / 445;
margin-left: 0;
margin-right: 0;
}
.ev-hero-slide__image {
object-position: var(--pos-mobile-x, var(--pos-desktop-x, 50%)) var(--pos-mobile-y, var(--pos-desktop-y, 50%));
}
.ev-hero-slide__date { font-size: clamp(1.45rem, 7vw, 2rem); }
.ev-hero-slide__title { font-size: clamp(1.9rem, 9vw, 2.8rem); }
.ev-hero-slide__place { font-size: clamp(.82rem, 4.4vw, 1.25rem); }
.ev-hero-slider__arrow { display: none; }
.ev-hero-slider__dots { bottom: 3px; }
.ev-quote-slider {
min-height: 280px;
padding: 56px 34px;
}
.ev-quote-slide p,
.ev-quote-slide cite {
font-size: clamp(1.35rem, 6vw, 2rem);
}
.ev-quote-slider__arrow--prev { left: 10px; }
.ev-quote-slider__arrow--next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ev-hero-slide,
.ev-hero-slide__image,
.ev-hero-slide__date,
.ev-hero-slide__title,
.ev-hero-slide__place,
.ev-quote-slide {
animation: none !important;
transition: none !important;
}
.ev-hero-slide.is-active .ev-hero-slide__date,
.ev-hero-slide.is-active .ev-hero-slide__title,
.ev-hero-slide.is-active .ev-hero-slide__place {
opacity: 1;
transform: none;
}
}