@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
:root {
--om-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
--om-white: #ffffff;
--om-black: #000000;
--om-border-radius: 16px;
--om-container-padding: 20px;
--om-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
--om-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
--om-transition-smooth: all 0.3s ease;
} .promo-main {
position: relative;
width: 100%;
max-width: calc(100% - var(--om-container-padding) * 2);
margin: 0 auto;
overflow: hidden;
border-radius: var(--om-border-radius);
background: #f5f5f5;
}
.promo-main--small {
height: 400px;
}
.promo-main--medium {
height: 550px;
}
.promo-main--large {
height: 650px;
}
.promo-main--fullheight {
height: 100vh;
min-height: 600px;
}
.promo-main__swiper {
width: 100%;
height: 100%;
border-radius: var(--om-border-radius);
} .promo-main__slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--om-border-radius);
}
.promo-main__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.promo-main__image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.1) 100%
);
z-index: 2;
transition: var(--om-transition-smooth);
}
.promo-main__image picture {
display: block;
width: 100%;
height: 100%;
}
.promo-main__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.swiper-slide-active .promo-main__image img {
transform: scale(1.05);
} .promo-main__content {
position: absolute;
z-index: 3;
width: 100%;
max-width: 1400px;
padding: 0 60px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 32px;
} .promo-main__content--top {
top: 60px;
}
.promo-main__content--middle {
top: 50%;
transform: translate(-50%, -48%);
}
.promo-main__content--bottom {
bottom: 110px;
top: auto;
} .promo-main__content--left {
align-items: flex-start;
text-align: left;
}
.promo-main__content--center {
align-items: center;
text-align: center;
}
.promo-main__content--right {
align-items: flex-end;
text-align: right;
} .promo-main__title {
font-family: var(--om-font-primary);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
margin: 0;
color: var(--om-white);
opacity: 0;
transform: translateY(30px);
animation: slideInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.swiper-slide-active .promo-main__title {
animation-delay: 0.2s;
}
.promo-main__title--xl {
font-size: clamp(48px, 6vw, 80px);
}
.promo-main__title--lg {
font-size: clamp(40px, 5vw, 64px);
}
.promo-main__title--md {
font-size: clamp(32px, 4vw, 52px);
}
.promo-main__title span {
font-style: italic;
font-weight: 400;
} .promo-main__btns {
display: flex;
gap: 16px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(30px);
animation: slideInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.swiper-slide-active .promo-main__btns {
animation-delay: 0.4s;
} .promo-main__btn {
font-family: var(--om-font-primary);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
padding: 15px 34px;
border-radius: 8px;
border: none;
position: relative;
overflow: hidden;
cursor: pointer;
transition: var(--om-transition-smooth);
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.promo-main__btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
}
.promo-main__btn:hover::before {
width: 300px;
height: 300px;
}
.promo-main__btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.promo-main__btn:active {
transform: translateY(0);
} .promo-main__navigation {
position: absolute !important;
bottom: 34px !important;
right: 34px !important;
left: auto !important;
top: auto !important;
z-index: 10;
display: flex !important;
gap: 14px;
}
.promo-main__nav-prev,
.promo-main__nav-next,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
width: 52px !important;
height: 52px !important;
background: rgba(55, 55, 55, 0.85) !important;
backdrop-filter: blur(10px);
border-radius: 10px !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--om-transition-smooth);
color: var(--om-white) !important;
border: none !important;
margin: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.promo-main__nav-prev::after,
.promo-main__nav-next::after,
.promo-main .swiper-button-prev::after,
.promo-main .swiper-button-next::after {
content: none !important;
}
.promo-main__nav-prev:hover,
.promo-main__nav-next:hover,
.promo-main .swiper-button-prev:hover,
.promo-main .swiper-button-next:hover {
background: rgba(70, 70, 70, 0.95) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.promo-main__nav-prev:active,
.promo-main__nav-next:active {
transform: scale(0.96);
}
.promo-main__nav-prev.swiper-button-disabled,
.promo-main__nav-next.swiper-button-disabled,
.promo-main .swiper-button-disabled {
opacity: 0.35 !important;
cursor: not-allowed;
}
.promo-main__nav-prev svg,
.promo-main__nav-next svg {
width: 24px !important;
height: 24px !important;
stroke-width: 2.5;
} .promo-main__pagination,
.promo-main .swiper-pagination {
position: absolute !important;
bottom: 34px !important;
right: 170px !important;
left: auto !important;
top: auto !important;
z-index: 10;
display: flex !important;
gap: 10px;
align-items: center;
width: auto !important;
text-align: left !important;
}
.promo-main__pagination .swiper-pagination-bullet,
.promo-main .swiper-pagination-bullet {
width: 11px !important;
height: 11px !important;
background: rgba(255, 255, 255, 0.6) !important;
border-radius: 50%;
opacity: 1 !important;
transition: var(--om-transition-smooth);
cursor: pointer;
border: none;
margin: 0 !important;
}
.promo-main__pagination .swiper-pagination-bullet-active,
.promo-main .swiper-pagination-bullet-active {
background: var(--om-white) !important;
width: 11px !important;
height: 11px !important;
}
.promo-main__pagination .swiper-pagination-bullet:hover,
.promo-main .swiper-pagination-bullet:hover {
background: rgba(255, 255, 255, 0.9) !important;
} @keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 1200px) {
.promo-main__content {
padding: 0 50px;
}
.promo-main__navigation,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
right: 28px !important;
bottom: 28px !important;
}
.promo-main__pagination,
.promo-main .swiper-pagination {
right: 140px !important;
bottom: 28px !important;
}
}
@media (max-width: 768px) {
:root {
--om-container-padding: 12px;
--om-border-radius: 14px;
}
.promo-main--small {
height: 500px;
}
.promo-main--medium,
.promo-main--large {
height: 550px;
}
.promo-main--fullheight {
min-height: 500px;
}
.promo-main__content {
padding: 0 30px;
gap: 24px;
}
.promo-main__content--top {
top: 40px;
}
.promo-main__content--bottom {
bottom: 70px;
}
.promo-main__content--middle {
transform: translate(-50%, -65%);
}
.promo-main__title--xl {
font-size: clamp(36px, 8vw, 56px);
}
.promo-main__title--lg {
font-size: clamp(32px, 7vw, 48px);
}
.promo-main__title--md {
font-size: clamp(28px, 6vw, 40px);
}
.promo-main__btns {
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 280px;
}
.promo-main__btn {
width: 100%;
padding: 14px 28px;
font-size: 13px;
}
.promo-main__navigation,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
right: 20px !important;
bottom: 20px !important;
gap: 12px;
}
.promo-main__nav-prev,
.promo-main__nav-next,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
width: 44px !important;
height: 44px !important;
border-radius: 7px !important;
}
.promo-main__nav-prev svg,
.promo-main__nav-next svg {
width: 16px !important;
height: 16px !important;
}
.promo-main__pagination,
.promo-main .swiper-pagination {
right: 120px !important;
bottom: 20px !important;
gap: 8px;
}
.promo-main__pagination .swiper-pagination-bullet,
.promo-main .swiper-pagination-bullet {
width: 9px !important;
height: 9px !important;
}
.promo-main__pagination .swiper-pagination-bullet-active,
.promo-main .swiper-pagination-bullet-active {
width: 9px !important;
height: 9px !important;
}
}
@media (max-width: 480px) {
.promo-main__content {
padding: 0 20px;
gap: 20px;
}
.promo-main__navigation,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
right: 16px !important;
bottom: 16px !important;
gap: 10px;
}
.promo-main__nav-prev,
.promo-main__nav-next,
.promo-main .swiper-button-prev,
.promo-main .swiper-button-next {
width: 42px !important;
height: 42px !important;
}
.promo-main__pagination,
.promo-main .swiper-pagination {
right: 108px !important;
bottom: 16px !important;
gap: 7px;
}
.promo-main__pagination .swiper-pagination-bullet,
.promo-main .swiper-pagination-bullet {
width: 8px !important;
height: 8px !important;
}
.promo-main__pagination .swiper-pagination-bullet-active,
.promo-main .swiper-pagination-bullet-active {
width: 8px !important;
height: 8px !important;
}
} @media (prefers-reduced-motion: reduce) {
.promo-main__image img,
.promo-main__title,
.promo-main__btns,
.promo-main__btn,
.promo-main__nav-prev,
.promo-main__nav-next {
animation: none !important;
transition: none !important;
}
} @media print {
.promo-main__navigation,
.promo-main__pagination {
display: none;
}
.promo-main__image::before {
display: none;
}
}