.route-map {
position: relative;
padding: 120px 0 150px;
background: #050805;
color: var(--color-ink);
overflow: hidden;
margin-top: -65px;
margin-bottom: -200px;
}
.route-map__text {
text-wrap: wrap;
width: 200px;}
.route-map__inner {
position: relative;
z-index: 2;
}
.route-map__header {
text-align: center;
padding-bottom: 40px;
}
.route-map__title {
font-size: clamp(54px, 6vw, 104px);
line-height: 0.9;
}
.route-map__title .u-italic {
font-size: 0.88em;
}
.route-map__body {
position: relative;
max-width: 1230px;
min-height: 690px;
margin: 90px auto 0;
}
.route-map__circle {
position: absolute;
right: 165px;
top: 50%;
width: 620px;
height: 620px;
border: 1px dashed #535C52;
border-radius: 50%;
transform: translateY(-50%);
}
.route-map__media {
position: absolute;
left: 50px;
top: 85px;
z-index: 4;
width: 720px;
height: 500px;
}
.route-map__photo {
position: absolute;
margin: 0;
padding: 18px 18px 90px;
background: #fff;
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35);
}
.route-map__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.route-map__photo--main {
left: 0;
top: 0;
width: 360px;
height: 480px;
transform: rotate(-5deg);
z-index: 2;
}
.route-map__photo--small {
left: 305px;
bottom: -28px;
width: 230px;
height: 330px;
padding: 14px 14px 62px;
transform: rotate(9deg);
z-index: 5;
}
.route-map__note {
position: absolute;
left: 180px;
top: 30px;
z-index: 1;
width: 600px;
min-height: 410px;
padding: 58px 80px 58px 222px;
color: var(--color-ink);
font-family: var(--font-family-secondary);
font-size: 20px;
line-height: 1.18;
font-style: italic;
background: url(../images/BG_21.png) no-repeat center / cover;
}
.route-map__points {
position: absolute;
right: 0;
top: 50%;
z-index: 5;
width: 620px;
height: 620px;
margin: 0;
padding: 0;
transform: translateY(-50%);
}
.route-map__point {
position: absolute;
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-family-secondary);
font-size: 30px;
line-height: 1;
font-style: italic;
color: rgba(165, 167, 164, 1);
white-space: nowrap;
transition: color 0.25s ease;
}
.route-map__point img {
display: none;
}
.route-map__dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: #b8c7b7;
transition:
transform 0.25s ease,
background-color 0.25s ease;
}
.route-map__point:hover {
color: var(--color-ink);
}
.route-map__point:hover .route-map__dot {
background: #535C52;
transform: scale(1.18);
}
.route-map__point--1 {
right: 0px;
top: 86px;
}
.route-map__point--2 {
right: -65px;
top: 220px;
}
.route-map__point--3 {
right: -62px;
top: 336px;
}
.route-map__point--4 {
right: -17px;
top: 456px
}
.route-map__point--5 {
right: 100px;
bottom: -4px;
}
@media (max-width: 1220px) {
.route-map {
padding: 80px 0 180px 0;
background: #1D231C
}
.route-map__title {
font-size: clamp(54px, 15vw, 84px);
}
.route-map__body {
max-width: 430px;
min-height: 1500px;
margin-top: 48px;
}
.route-map__circle,
.route-map__media {
display: none;
}
.route-map__points {
position: relative;
right: auto;
top: auto;
width: 100%;
height: auto;
transform: none;
}
.route-map__point {
position: relative;
right: auto;
top: auto;
bottom: auto;
display: block;
width: 100%;
min-height: 245px;
font-size: 24px;
white-space: normal;
}
.route-map__point img {
position: absolute;
display: block;
width: 150px;
height: 205px;
object-fit: cover;
padding: 9px 9px 42px;
background: #fff;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
.route-map__dot {
position: absolute;
width: 18px;
height: 18px;
}
.route-map__text {
position: absolute;
font-family: var(--font-family-secondary);
font-style: italic;
text-wrap: wrap;
width: 200px
}
.route-map__point--1 img {
left: 18px;
top: 0;
transform: rotate(-7deg);
}
.route-map__point--1 .route-map__dot {
right: 0;
top: 32%;
}
.route-map__point--1 .route-map__text {
right: 28px;
top: 30%;
width: 40%;
text-align: end;
}
.route-map__point--2 img {
right: 30px;
top: 32px;
transform: rotate(8deg);
}
.route-map__point--2 .route-map__dot {
left: 0;
top: 50%;
}
.route-map__point--2 .route-map__text {
left: 28px;
top: 47%;
}
.route-map__point--3 img {
left: 24px;
top: 34px;
transform: rotate(-4deg);
}
.route-map__point--3 .route-map__dot {
right: 0;
top: 53%;
}
.route-map__point--3 .route-map__text {
right: 28px;
top: 50%;
width: 40%;
text-align: end;
}
.route-map__point--4 img {
right: 0px;
top: 38px;
transform: rotate(7deg);
}
.route-map__point--4 .route-map__dot {
left: 0;
top: 50%;
}
.route-map__point--4 .route-map__text {
left: 28px;
top: 48%;
max-width: 130px;
}
.route-map__point--5 {
min-height: 330px;
}
.route-map__point--5 img {
left: 0;
top: 80px;
width: 140px;
height: 200px;
transform: rotate(-5deg);
}
.route-map__point--5 .route-map__dot {
right: 0;
top: 53%;
}
.route-map__point--5 .route-map__text {
right: 28px;
top: 50%;
max-width: 150px;
text-align: right;
}
.route-map::after {
content: "“Алтай — это место, где тишина гор учит слышать себя, а природа возвращает к подлинной жизни”";
display: block;
font-family: var(--font-family-secondary);
font-size: 16px;
line-height: 1.25;
font-style: italic;
position: absolute;
left: 0px;
bottom: 176px;
z-index: 1;
width: 90%;
min-height: 180px;
padding: 40px 110px 20px 20px;
color: var(--color-ink);
background: url(../images/BG_22.png) center / cover;
}
}
#wpcf7-f6-o1 > form > div.contacts-form > div.contacts__form-bottom > div.contacts-form__submit-wrap > input{
width: 100%;
}
/* Скрыто на ПК */
.tour-values__mobile-decor,
.tour-value-card__icon {
display: none;
}
/* Мобилка */
@media (max-width: 768px) {
.tour-values {
position: relative;
overflow: hidden;
}
.tour-values__mobile-decor {
display: block;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.tour-values__mobile-decor svg {
width: 100%;
height: 100%;
display: block;
}
.tour-values__inner {
position: relative;
z-index: 2;
}
.tour-values__cards {
position: relative;
z-index: 2;
}
.tour-value-card {
position: relative;
padding-top: 52px;
}
.tour-value-card__icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 18px;
left: 50%;
width: 24px;
height: 24px;
transform: translateX(-50%);
}
.tour-value-card__icon svg {
display: block;
width: 24px;
height: 24px;
}
}
.tour-ticket__title a,
.tour-ticket__inner > a {
text-decoration: none;
color: inherit; /* Чтобы ссылки не становились стандартного синего цвета, а сохраняли цвет текста заголовка */
}
/* ==========================================================================
БАЗОВОЕ СКРЫТИЕ МОБИЛЬНЫХ ЭЛЕМЕНТОВ НА ПК (ВНЕ МЕДИА-ЗАПРОСА)
========================================================================== */
.route-map__mobile-polaroid {
display: none;
}
/* ==========================================================================
ФИНАЛЬНАЯ СБОРКА ДЛЯ МОБИЛКИ (СТРОГО < 1220px)
========================================================================== */
@media (max-width: 1220px) {
/* Включаем отображение новой обертки поляроида из ACF */
.route-map__mobile-polaroid {
display: block !important;
}
/* Стилизуем рамки картинок из ACF */
.route-map__point .polaroid-frame {
position: absolute;
display: block;
width: 150px;
height: 205px;
padding: 9px 9px 42px;
background: #fff;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
box-sizing: border-box;
}
.route-map__point .polaroid-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Скрываем старую десктопную картинку на мобилке */
.route-map__point > img {
display: none !important;
}
/* Отключаем увеличение кружков по ховеру */
.route-map__point:hover .route-map__dot {
transform: none !important;
background: #b8c7b7 !important;
}
/* Кружки и текст поднимаем наверх */
.route-map__dot {
z-index: 5 !important;
}
.route-map__text {
text-wrap: wrap;
width: 200px;
z-index: 5 !important;
}
/* Базовый холст линии возвращаем на элемент точки */
.route-map__point::after {
content: '';
position: absolute;
z-index: 2;
left: 10px;
right: 10px;
width: calc(100% - 20px); /* Даем ширину, чтобы SVG не схлопывался */
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* --------------------------------------------------
МАТЕМАТИКА ТРАЕКТОРИЙ (ПРИВЯЗКА К ТВОИМ КООРДИНАТАМ ДОТОВ)
-------------------------------------------------- */
/* --- ШАГ 1: Горно-Алтайск -> Чемал --- */
.route-map__point--1 .polaroid-frame { left: 18px; top: 0; transform: rotate(-7deg); }
.route-map__point--1::after {
top: calc(32% + 9px);
bottom: -130px;
background-image: url('data:image/svg+xml;utf8,');
}
/* --- ШАГ 2: Чемал -> Чуйский тракт --- */
.route-map__point--2 .polaroid-frame { right: 30px; top: 32px; transform: rotate(8deg); }
.route-map__point--2::after {
top: calc(50% + 9px);
bottom: -140px;
background-image: url('data:image/svg+xml;utf8,');
}
/* --- ШАГ 3: Чуйский тракт -> Марс --- */
.route-map__point--3 .polaroid-frame { left: 24px; top: 34px; transform: rotate(-4deg); }
.route-map__point--3::after {
top: calc(53% + 9px);
bottom: -130px;
background-image: url('data:image/svg+xml;utf8,');
}
/* --- ШАГ 4: Марс -> Каракольская долина --- */
.route-map__point--4 .polaroid-frame { right: 0px; top: 38px; transform: rotate(7deg); }
.route-map__point--4::after {
top: calc(50% + 9px);
bottom: -145px;
background-image: url('data:image/svg+xml;utf8,');
}
/* --- ШАГ 5: Каракольская долина --- */
.route-map__point--5 .polaroid-frame { left: 0; top: 80px; width: 140px; height: 200px; transform: rotate(-5deg); }
.route-map__point--5::after {
display: none !important;
}
}