.pesek-slider {
position: relative;
width: 100%;
height: var(--pesek-desktop-h, 50vh);
min-height: 300px;
max-height: none;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
background-color: #0d1b2a;
}
.pesek-slider-track {
position: relative;
width: 100%;
height: 100%;
}
.pesek-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease;
}
.pesek-slide.is-active {
opacity: 1;
visibility: visible;
z-index: 1;
}
.pesek-slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transform: scale(1);
transition: transform 8s linear;
}
.pesek-slide-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.18);
}
.pesek-slide.is-active .pesek-slide-bg {
transform: scale(1.15);
}
.pesek-overlay-image {
position: absolute;
height: auto;
z-index: 2;
left: var(--ov-l-d, 50%);
top: var(--ov-t-d, 50%);
width: var(--ov-w-d, 40%);
transform: translate(-50%, -50%);
}
.pesek-slide-content {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 3;
width: 100%;
max-width: 1200px;
padding: 0 6%;
color: #fff;
top: var(--txt-top-d, 50%);
transform: translateY(-50%) translateX(var(--txt-left-d, 0%));
}
.pesek-slide.pesek-align-left .pesek-slide-content { text-align: left; }
.pesek-slide.pesek-align-center .pesek-slide-content { text-align: center; }
.pesek-slide.pesek-align-right .pesek-slide-content { text-align: right; }
.pesek-eyebrow,
.pesek-headline,
.pesek-btn {
opacity: 0;
transform: translateY(14px);
}
.pesek-slide.is-active .pesek-eyebrow {
animation: pesekFadeUp 0.7s ease forwards;
animation-delay: 0.3s;
}
.pesek-slide.is-active .pesek-headline {
animation: pesekFadeUp 0.7s ease forwards;
animation-delay: 0.55s;
}
.pesek-slide.is-active .pesek-btn {
animation: pesekFadeUp 0.7s ease forwards;
animation-delay: 0.8s;
}
@keyframes pesekFadeUp {
to { opacity: 1; transform: translateY(0); }
}
.pesek-eyebrow { margin-bottom: 6px; }
.pesek-headline { margin-bottom: 18px; } .pesek-text-small {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
letter-spacing: 1px;
}
.pesek-text-big {
font-family: 'Anton', sans-serif;
font-size: 42px;
line-height: 1.1;
letter-spacing: 2px;
}
.pesek-btn {
display: inline-block;
font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
color: #1a517b;
background-color: #f6f7fb;
border: 1px solid #878f97;
border-radius: 40px;
padding: 10px 30px;
transition: all 300ms ease;
}
.pesek-btn:hover {
background-color: #1a517b;
color: #f6f7fb;
border-color: #1a517b;
} .pesek-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.pesek-nav:hover { background: rgba(0, 0, 0, 0.55); }
.pesek-nav-prev { left: 18px; }
.pesek-nav-next { right: 18px; }
.pesek-dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: 8px;
}
.pesek-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
padding: 0;
cursor: pointer;
}
.pesek-dot.is-active { background: #fff; } @media (min-width: 768px) and (max-width: 1024px) {
.pesek-slider {
height: var(--pesek-tablet-h, 650px);
min-height: var(--pesek-tablet-h, 650px);
max-height: var(--pesek-tablet-h, 650px);
}
.pesek-slide-content {
top: var(--txt-top-t, 50%);
transform: translateY(-50%) translateX(var(--txt-left-t, 0%));
}
.pesek-overlay-image {
left: var(--ov-l-t, 50%);
top: var(--ov-t-t, 50%);
width: var(--ov-w-t, 40%);
}
} @media (max-width: 767px) {
.pesek-slider {
height: var(--pesek-mobile-h, 620px);
min-height: var(--pesek-mobile-h, 620px);
max-height: var(--pesek-mobile-h, 620px);
}
.pesek-slide.pesek-align-left .pesek-slide-content,
.pesek-slide.pesek-align-right .pesek-slide-content,
.pesek-slide.pesek-align-center .pesek-slide-content {
text-align: center;
}
.pesek-slide-content {
top: var(--txt-top-m, 50%);
transform: translateY(-50%) translateX(var(--txt-left-m, 0%));
}
.pesek-overlay-image {
left: var(--ov-l-m, 50%);
top: var(--ov-t-m, 50%);
width: var(--ov-w-m, 50%);
}
.pesek-text-small { font-size: 17px; }
.pesek-text-big { font-size: 26px; }
.pesek-nav {
top: 16px;
transform: none;
width: 36px;
height: 36px;
font-size: 15px;
}
.pesek-dots { bottom: 12px; }
}
@media (max-width: 480px) {
.pesek-text-big { font-size: 21px; }
.pesek-text-small { font-size: 14px; }
.pesek-btn { font-size: 12px; padding: 8px 20px; }
}