/* ════════════════════════════════════════════════════════════════════════
MOBILE LAYER — Восток-Запад
Подключение: в
+ перед
════════════════════════════════════════════════════════════════════════ */
/* ──────────── BURGER (всегда в DOM, виден только на mobile) ──────────── */
.nav-burger {
display: none;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid currentColor;
background: #2C365A;
color: #EEE8DF;
cursor: pointer;
position: relative;
z-index: 220;
padding: 0;
align-items: center;
justify-content: center;
transition: background .3s, transform .3s;
flex-shrink: 0;
}
.nav-burger:hover { background: #1d2545; }
.nav-burger .burger-lines {
display: grid;
gap: 5px;
width: 18px;
}
.nav-burger .burger-lines span {
display: block;
height: 1.5px;
width: 100%;
background: currentColor;
border-radius: 2px;
transition: transform .35s ease, opacity .25s ease;
}
.nav-burger.is-open .burger-lines span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.nav-burger.is-open .burger-lines span:nth-child(2) { opacity: 0; }
.nav-burger.is-open .burger-lines span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
/* ──────────── MOBILE OVERLAY MENU ──────────── */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background: #2C365A;
color: #EEE8DF;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity .35s ease, transform .4s ease, visibility .35s;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.mobile-menu-inner {
min-height: 100%;
padding: 110px 28px 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
.mobile-menu-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
opacity: .55;
}
.mobile-menu-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(238,232,223,.16);
display: flex !important; /* перебить nav.top ul{display:flex;gap:28px} */
flex-direction: column !important;
gap: 0 !important;
}
.mobile-menu-list li {
border-bottom: 1px solid rgba(238,232,223,.16);
padding: 0 !important;
}
.mobile-menu-list li::after { display: none !important; }
.mobile-menu-list a {
display: flex !important;
align-items: baseline;
justify-content: space-between;
padding: 18px 4px;
text-decoration: none;
color: inherit;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 32px;
line-height: 1;
letter-spacing: -.01em;
text-transform: none;
font-weight: 400;
transition: color .3s, transform .3s;
}
.mobile-menu-list a:hover { color: #D67627; transform: translateX(6px); }
.mobile-menu-list .num {
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
opacity: .45;
}
.mobile-menu-list .is-active > a { color: #D67627; }
.mobile-menu-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
padding: 16px 18px 16px 24px;
background: #BE5C01;
color: #EEE8DF;
border-radius: 999px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
}
.mobile-menu-cta .arrow {
width: 32px; height: 32px;
border-radius: 50%;
background: #EEE8DF;
color: #2C365A;
display: grid;
place-items: center;
}
.mobile-menu-foot {
margin-top: auto;
padding-top: 24px;
border-top: 1px solid rgba(238,232,223,.16);
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
opacity: .65;
}
.mobile-menu-foot strong {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 18px;
letter-spacing: 0;
text-transform: none;
opacity: 1;
}
body.has-mobile-menu-open {
overflow: hidden !important;
padding-right: var(--scrollbar-w, 0px);
}
/* ════════════════════════════════════════════════════════════════════════
≤ 900px — мобильный режим
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ── NAV: бургер вместо ссылок ── */
nav.top {
padding: 0 14px !important;
gap: 8px !important;
top: 14px !important;
}
nav.top.scrolled { top: 8px !important; }
nav.top .nav-pill.nav-links-pill { display: none !important; }
nav.top ul { display: none !important; }
.nav-burger { display: inline-flex !important; }
/* Брендовая «таблетка» — тёмно-синяя ВСЕГДА (не меняется при скролле) */
nav.top .nav-pill.brand-pill {
height: 48px !important;
padding: 0 14px 0 6px !important;
background: #2C365A !important;
color: #EEE8DF !important;
border-color: #2C365A !important;
backdrop-filter: none !important;
}
nav.top.scrolled .nav-pill.brand-pill {
background: #2C365A !important;
color: #EEE8DF !important;
border-color: #2C365A !important;
backdrop-filter: none !important;
}
.nav-pill.brand-pill .brand-text { color: #EEE8DF !important; }
.nav-pill.brand-pill .brand-text small { color: #EEE8DF !important; opacity: .55 !important; }
.nav-pill.brand-pill .brand-mark { border-color: #EEE8DF !important; }
/* CTA «Заявка на тур» / «Войти» — тёмно-синяя ВСЕГДА */
nav.top .nav-cta,
nav.top.scrolled .nav-cta,
nav.top.dark .nav-cta,
nav.top .vz-user-btn,
nav.top.scrolled .vz-user-btn,
nav.top.dark .vz-user-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
padding: 0 16px !important;
font-size: 11px !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
gap: 6px !important;
background: #2C365A !important;
color: #EEE8DF !important;
border: 1px solid #2C365A !important;
border-radius: 999px !important;
backdrop-filter: none !important;
white-space: nowrap !important;
text-decoration: none !important;
}
nav.top .nav-cta:hover,
nav.top .vz-user-btn:hover {
background: #1d2545 !important;
color: #EEE8DF !important;
border-color: #1d2545 !important;
}
/* Если navbar.js обернул кнопку в .vz-right — даём контейнеру не ломать flex */
nav.top .vz-right { display: inline-flex !important; align-items: center !important; }
/* ── HERO главной ── */
.hero {
height: auto !important;
min-height: 600px !important;
margin: 88px 14px 0 !important;
border-radius: 22px !important;
overflow: hidden !important;
width: auto !important;
}
.hero-bg { border-radius: 22px !important; overflow: hidden !important; }
/* ════ ТЕКСТ «МИР ЖДЁТ» — позиция по вертикали ════
Чтобы поднять текст ВЫШЕ — уменьши значение padding-top ниже.
Чтобы опустить — увеличь.
Ориентир: 14vh — у самого верха, 30vh — середина, 50vh — низ. */
.hero-content {
padding: 0 22px !important;
align-items: flex-start !important;
text-align: left !important;
min-height: 600px !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
padding-top: 14vh !important; /* ← ВОТ ЭТО МЕНЯЙ для высоты текста */
padding-bottom: 110px !important; /* место под кнопкой */
position: relative !important;
}
/* h1 имеет inline width:680px — перебиваем */
.hero-title,
.hero h1.hero-title {
font-size: clamp(28px, 8.2vw, 36px) !important;
line-height: 1.1 !important;
width: 100% !important;
max-width: 100% !important;
letter-spacing: -.005em !important;
text-shadow: 0 2px 18px rgba(0,0,0,.22);
margin: 0 !important;
}
.hero-foot {
position: absolute !important;
left: 22px !important;
right: 22px !important;
bottom: 24px !important;
margin: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
.hero-cta,
.hero a.hero-cta {
width: 100% !important;
justify-content: space-between !important;
padding: 12px 12px 12px 22px !important;
font-size: 12px !important;
letter-spacing: .14em !important;
box-sizing: border-box !important;
}
.hero-cta .arrow { width: 34px !important; height: 34px !important; }
/* ── MARQUEE — прижата к hero (без зазора) ── */
.marquee {
margin-top: 14px !important;
padding: 12px 0 !important;
}
.marquee span { font-size: 20px !important; gap: 28px !important; }
.marquee-track { gap: 28px !important; }
/* ── SEARCH-CARD → одна колонка ── */
.search-section { padding: 60px 18px 50px !important; }
.section-head {
flex-direction: column !important;
align-items: flex-start !important;
gap: 18px !important;
margin-bottom: 28px !important;
}
.search-card {
grid-template-columns: 1fr !important;
padding: 8px !important;
gap: 6px !important;
}
.search-cell { padding: 14px 16px !important; }
.search-go {
width: 100% !important;
height: 52px !important;
}
/* ── HOT TOURS ── */
.hot-tours { padding: 60px 18px 50px !important; }
.hot-tours-head {
grid-template-columns: 1fr !important;
gap: 24px !important;
margin-bottom: 30px !important;
}
.lead-quote { grid-column: 1 !important; font-size: 19px !important; }
.tours-rail { padding: 6px 18px 20px 0 !important; margin-right: -18px !important; }
.tours-rail .tour { flex: 0 0 78vw !important; }
/* ── ABOUT ── */
.about { padding: 60px 0 60px 18px !important; }
.about-head {
grid-template-columns: 1fr !important;
gap: 22px !important;
padding-right: 18px !important;
margin-bottom: 32px !important;
}
.about-stats {
grid-template-columns: 1fr !important;
margin-right: 18px !important;
margin-bottom: 36px !important;
}
.about-stat {
border-right: 0 !important;
border-bottom: 1px solid var(--line);
padding: 18px 0 !important;
}
.about-stat:last-child { border-bottom: 0; }
.team-head {
flex-direction: column !important;
align-items: flex-start !important;
padding-right: 18px !important;
gap: 10px !important;
}
.team-scroll { padding: 6px 18px 18px 0 !important; }
.person { flex: 0 0 220px !important; }
/* ── DESTINATIONS ── */
.destinations { padding: 60px 18px !important; }
.dest-stage {
grid-template-columns: 1fr !important;
gap: 26px !important;
margin-top: 28px !important;
}
.dest-item h3 { font-size: 26px !important; }
.dest-slide-meta .name { font-size: 32px !important; }
/* ── MESSENGER ── */
.messenger { padding: 60px 18px !important; }
.msgr-btn { font-size: 17px !important; padding: 12px 18px 12px 12px !important; }
/* ── REVIEWS ── */
.reviews { padding: 60px 18px !important; }
.reviews-top {
grid-template-columns: 1fr !important;
gap: 22px !important;
margin-bottom: 28px !important;
}
.reviews-row { grid-template-columns: 1fr !important; gap: 14px !important; }
.review { padding: 22px 18px !important; }
/* ── CONTACT ── */
.contact { padding: 60px 18px 80px !important; }
.contact-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.contact-img { min-height: 280px !important; }
/* ── FOOTER ── */
footer { padding: 40px 18px 24px !important; }
.footer-mega { left: 18px !important; right: 18px !important; }
.footer-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
padding-bottom: 30px !important;
}
.footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
font-size: 10px !important;
}
/* Общие правила типографики секций */
.section-h { font-size: clamp(34px, 9vw, 48px) !important; }
}
/* ════════════════════════════════════════════════════════════════════════
≤ 480px — самые узкие экраны (iPhone SE / Mini)
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.brand-text { font-size: 13px !important; }
.brand-text small { display: none !important; }
nav.top .nav-pill.brand-pill { padding: 0 10px 0 4px !important; }
nav.top .nav-cta,
nav.top .vz-user-btn { padding: 0 14px !important; font-size: 10px !important; letter-spacing: .08em !important; }
.hero { margin: 84px 10px 0 !important; min-height: 560px !important; }
.hero-content { padding-top: 12vh !important; padding-bottom: 100px !important; } /* ← узкие экраны: высота текста */
.hero-title,
.hero h1.hero-title { font-size: clamp(24px, 7.6vw, 30px) !important; }
.mobile-menu-inner { padding: 100px 22px 32px; }
.mobile-menu-list a { font-size: 28px; padding: 16px 4px; }
}