/* MG Studio — секція «Як дістатись» (3D-маршрут). Власні стилі, а не Tailwind-класи: збірка сайту пурджиться, тож класів, яких немає в styles-*.css, використовувати не можна. Значення підібрані під ті самі токени, що й решта сторінки (zinc / red-600, Inter). */ /* ---------- пункт у шапці ---------- */ /* Шапка переповнена ще без нас. Десктопне меню розкривається з 768px, а рядку «логотип + пункти + мова + кнопка» стає тісно значно раніше, ніж він перестає вміщатись. Кнопка «Пробне — 250 ₴» — єдине, що вміє переноситись, тож на оригіналі вона стоїть у 2-3 рядки аж до ~870px, а логотип там розчавлений по ширині (800px → 28x35 замість 453:120). Три правила нижче лікують це, не чіпаючи розмітки. Четверте — про те, де саме перемикатись на бургер. Коли зʼявляться вихідники, все це замінює одне слово в компоненті: перенести розкриття меню з md на потрібний поріг. */ /* 1. Написи в шапці не переносяться — ані наш пункт, ані кнопка. */ a[data-mgr-nav] { white-space: nowrap; } header a[class*="bg-red-600"] { white-space: nowrap; } /* 2. Логотип не розчавлюється. має max-width:100% з преflight, висоту прибито утилітою, а обгортка — flex-елемент, якому через цей max-width дозволено стискатись до нуля: картинка тягнулась за нею по ширині при незмінній висоті. max-width:none повертає натуральний мінімум, і пропорція 3.775 тримається на всіх ширинах. У шапці одне зображення. */ header img { max-width: none; } /* 3. Бургер до 940px. Горизонтальне меню вмикаємо лише там, де воно вміщається з повітрям, а не впритул. Заміряно: з гарантованими 24px до логотипа і до перемикача мов рядок перестає вилазити за екран рівно з 940px (на 925 це ще +12px, на 910 — +27px). Панель мобільного меню існує в DOM тільки відкритою, тож display:block не показує її передчасно; пункт «Як дістатись» кладе туди та сама addNavLink(). По суті це зсув порога шапки з 768 на 940 — коли зʼявляться вихідники, це один рядок у компоненті. */ @media (min-width: 768px) and (max-width: 939px) { header nav[class*="md:flex"] { display: none; } header nav[class*="md:hidden"] { display: block; } header button[class*="md:hidden"] { display: flex; } } /* 4. Пункти не притуляються до логотипа і до перемикача мов. Рядок вирівняний justify-between, тож власного зазору в нього немає — поки є запас, вільне місце ділиться порівну, а щойно стає тісно, зазор падає в нуль. margin працює як гарантований мінімум: там, де місця вдосталь, він нічого не міняє (з 1200px природний зазор і так 59px). */ .mgr-has-route { margin-inline: 1.5rem; } /* 5. Проміжок між пунктами росте разом із шириною — стільки, скільки вміщається при тих самих 24px по краях. З 1200px — штатні сайтові. */ @media (min-width: 940px) and (max-width: 999px) { .mgr-has-route { gap: .5rem; } } @media (min-width: 1000px) and (max-width: 1099px) { .mgr-has-route { gap: 1rem; } } @media (min-width: 1100px) and (max-width: 1199px) { .mgr-has-route { gap: 1.5rem; } } /* Змінні — на :root, а не на #route. Модалка з туром додається в , тобто поза секцією: коли змінні жили на #route, у ній усе через var() ставало порожнім, color падав до успадкованого від body (а він чорний), і панель виходила чорним по чорному — не було видно ні ✕, ні заголовка, ні посилання. Імена з префіксом --mgr-, тож із токенами сайту не зіткнуться. */ :root { --mgr-zinc-900: #18181b; --mgr-zinc-800: #27272a; --mgr-zinc-700: #3f3f46; --mgr-zinc-500: #71717a; --mgr-zinc-400: #a1a1aa; --mgr-zinc-50: #fafafa; --mgr-red-600: #dc2626; --mgr-red-500: #ef4444; } #route { position: relative; scroll-margin-top: 4rem; /* фіксована шапка h-16 */ } /* ---------- вертикальний ритм сторінки ---------- */ /* Між сусідніми секціями було 256px: padding складаються, по 128px у кожної (py-24 sm:py-32). На довгих секціях це непомітно — галерея 1844px, наша секція 1750px, — але коротким припадало половиною їхньої висоти: contacts 528px, booking 682px, faq 893px. Зменшуємо padding з 8rem до 6rem — проміжок стає 192px замість 256; на вузьких екранах 5rem, тобто 160px. Однаково для всіх: різні відступи в сусідніх секціях читаються не як задум, а як недогляд. Селектор по [id]: у першої секції (герой) id немає і власного padding теж — їй додавати нічого не можна, там повноекранна композиція. Це зміна дизайну всієї сторінки, а не нашої секції: місце їй у вихідниках Angular. Тут вона живе перекриттям — прибирається одним блоком. Разом із ним #route лишається без padding-block і бере ці ж значення. */ main > section[id] { padding-block: 5rem; } @media (min-width: 640px) { main > section[id] { padding-block: 6rem; } } /* Роздільник угорі секції. Раніше тут стояли класи Tailwind (absolute inset-x-0 -top-3 flex, h-px flex-1 bg-zinc-900, opacity-70) — вони працювали лише тому, що є в зібраному styles-*.css сайту. Це суперечило правилу з шапки цього файлу й ламало секцію будь-де поза сайтом: без .absolute роздільник ставав блоком у потоці й додавав 29px, а лінії обабіч не малювались зовсім. Тепер стилі свої. */ .mgr-divider { pointer-events: none; position: absolute; left: 0; right: 0; top: -.75rem; display: flex; align-items: center; gap: 1rem; } .mgr-divider-line { height: 1px; flex: 1 1 0%; background: var(--mgr-zinc-900); } .mgr-divider svg { opacity: .7; } .mgr-wrap { margin-inline: auto; max-width: 80rem; padding-inline: 1.5rem; } /* ---------- заголовок ---------- */ .mgr-head { max-width: 42rem; } .mgr-eyebrow { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: var(--mgr-red-600); } .mgr-h2 { margin: 1rem 0 0; font-size: 2.25rem; line-height: 1.05; font-weight: 900; letter-spacing: -.025em; } @media (min-width: 640px) { .mgr-h2 { font-size: 3.75rem; } } .mgr-lead { margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 1.75; color: var(--mgr-zinc-400); } /* ---------- велика картка туру ---------- */ .mgr-cover { display: block; position: relative; width: 100%; margin-top: 3.5rem; padding: 0; border: 1px solid var(--mgr-zinc-800); border-radius: 1rem; overflow: hidden; background: none; color: inherit; font: inherit; cursor: pointer; transition: border-color .3s ease-out, transform .3s ease-out; } .mgr-cover:hover, .mgr-cover:focus-visible { border-color: rgba(220, 38, 38, .5); transform: translateY(-.25rem); } .mgr-cover:focus-visible { outline: 2px solid var(--mgr-red-600); outline-offset: 3px; } .mgr-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s ease-out; } @media (max-width: 639px) { .mgr-cover img { aspect-ratio: 4 / 3; } } .mgr-cover:hover img { transform: scale(1.04); } .mgr-cover-shade { position: absolute; inset: 0; background: linear-gradient(to top, #09090b 0%, rgba(9, 9, 11, .35) 45%, rgba(9, 9, 11, .1) 100%); } .mgr-badge { position: absolute; top: 1.25rem; left: 1.25rem; border-radius: 9999px; background: var(--mgr-red-600); padding: .3rem .75rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mgr-zinc-50); } .mgr-cover-cta { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .75rem; text-align: left; } .mgr-cover-go { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--mgr-red-600); transition: background-color .3s ease-out, transform .3s ease-out; } .mgr-cover:hover .mgr-cover-go { background: var(--mgr-red-500); transform: scale(1.06); } .mgr-cover-go svg { width: 1.1rem; height: 1.1rem; fill: var(--mgr-zinc-50); } .mgr-cover-title { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--mgr-zinc-50); } .mgr-cover-sub { display: block; margin-top: .15rem; font-size: .8125rem; line-height: 1.4; color: var(--mgr-zinc-400); } /* ---------- стрічка орієнтирів ---------- */ .mgr-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; } @media (min-width: 768px) { .mgr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mgr-step { display: flex; flex-direction: column; border: 1px solid var(--mgr-zinc-800); border-radius: 1rem; background: rgba(24, 24, 27, .4); overflow: hidden; transition: border-color .3s ease-out, background-color .3s ease-out, transform .3s ease-out; } .mgr-step:hover { border-color: rgba(220, 38, 38, .5); background: rgba(24, 24, 27, .7); transform: translateY(-.25rem); } .mgr-step-media { position: relative; overflow: hidden; } .mgr-step-media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s ease-out; } .mgr-step:hover .mgr-step-media img { transform: scale(1.05); } .mgr-step-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 9, 11, .85), rgba(9, 9, 11, .1) 55%, transparent); } .mgr-step-num { position: absolute; bottom: .9rem; left: 1.25rem; z-index: 1; font-size: .8125rem; font-weight: 700; color: var(--mgr-red-600); } .mgr-step-body { padding: 1.25rem 1.5rem 1.5rem; } .mgr-step-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .mgr-step-text { margin: .5rem 0 0; font-size: .875rem; line-height: 1.65; color: var(--mgr-zinc-400); } /* ---------- кнопки ---------- */ .mgr-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } .mgr-btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: 1rem 2rem; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out, transform .3s ease-out; } .mgr-btn-primary { background: var(--mgr-red-600); color: var(--mgr-zinc-50); } .mgr-btn-primary:hover { background: var(--mgr-red-500); transform: scale(1.02); } .mgr-btn-ghost { border-color: var(--mgr-zinc-800); color: var(--mgr-zinc-50); } .mgr-btn-ghost:hover { border-color: var(--mgr-zinc-700); transform: scale(1.02); } /* ---------- поява при скролі (аналог директиви [reveal]) ---------- */ .mgr-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease-out, transform .7s ease-out; } .mgr-reveal.mgr-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mgr-reveal { opacity: 1; transform: none; transition: none; } .mgr-cover, .mgr-cover img, .mgr-step, .mgr-step-media img, .mgr-btn { transition: none; } } /* ---------- модалка з туром ---------- */ .mgr-modal { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #09090b; } .mgr-modal[hidden] { display: none; } .mgr-modal-bar { flex: none; display: flex; align-items: center; gap: 1rem; height: 3.5rem; padding-inline: 1rem; border-bottom: 1px solid var(--mgr-zinc-800); background: rgba(9, 9, 11, .9); backdrop-filter: blur(12px); } .mgr-modal-title { font-size: .875rem; font-weight: 600; color: var(--mgr-zinc-50); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Посилання на окрему вкладку і ✕ — одна родина: однакова висота, рамка й скруглення. Посилання з підписом, бо сам по собі значок не пояснює, куди веде; ✕ без підпису, бо хрестик зрозумілий і має лишатись головним у панелі — тому він яскравіший (zinc-50 проти zinc-400). Нижче 600px підпис ховається, і посилання стискається в таке саме коло, як ✕: на телефоні панель вузька, а окрема вкладка потрібна найчастіше саме там. Зміст тоді читається з title і aria-label. */ .mgr-modal-link { flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding-inline: .875rem; border-radius: 9999px; border: 1px solid var(--mgr-zinc-800); font-size: .8125rem; color: var(--mgr-zinc-400); text-decoration: none; white-space: nowrap; transition: border-color .3s ease-out, color .3s ease-out; } .mgr-modal-close { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid var(--mgr-zinc-800); background: none; color: var(--mgr-zinc-50); cursor: pointer; transition: border-color .3s ease-out; } .mgr-modal-link:hover { color: var(--mgr-zinc-50); } .mgr-modal-link:hover, .mgr-modal-close:hover { border-color: var(--mgr-zinc-700); } .mgr-modal-link svg, .mgr-modal-close svg { flex: none; width: 1rem; height: 1rem; } @media (max-width: 599px) { .mgr-modal-link { width: 2.5rem; padding-inline: 0; justify-content: center; } .mgr-modal-link span { display: none; } } .mgr-modal-frame { flex: 1 1 auto; min-height: 0; position: relative; background: #09090b; } .mgr-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .4s ease-out; } /* Екран завантаження самого туру — білий. Тримаємо iframe прозорим, поки тур не збереться, інакше на темному сайті блимає біле полотно. */ .mgr-modal-frame.mgr-ready iframe { opacity: 1; } .mgr-modal-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: .875rem; color: var(--mgr-zinc-500); } .mgr-modal-frame.mgr-ready .mgr-modal-loading { display: none; } @media (prefers-reduced-motion: reduce) { .mgr-modal-frame iframe { transition: none; } } .mgr-lock { overflow: hidden; }