hotel: add the hotel v7 mockup as the design reference
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Yuriy Panov
co-authored by
Claude Opus 5
Claude Opus 5
parent
d13feb7df8
commit
7ce8bee320
@@ -0,0 +1,17 @@
|
||||
EXO Hotel — server codebase v7
|
||||
|
||||
Upload the contents of this folder to the target web directory while preserving the structure:
|
||||
- index.html
|
||||
- styles.css
|
||||
- script.js
|
||||
- assets/
|
||||
|
||||
Lead form endpoint used by the page: /api/leads/hotels
|
||||
Phone: +7 927 789-60-71
|
||||
|
||||
|
||||
v8 changes:
|
||||
- Area range updated to 12–36 m².
|
||||
- Added anchor scroll offsets for fixed header.
|
||||
- Improved CTA text contrast.
|
||||
- Refined mobile heading sizes and narrow-screen header spacing.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
@@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
|
||||
<title>ЭкзоОтель — пространство восстановления для гостей | Экзо Групп</title>
|
||||
<meta content="ЭкзоОтель — готовое пространство восстановления внутри отеля: 4 аппарата, формат с одним специалистом, форматы размещения, меню программ. Дополнительный сервис для выручки, LTV и привлечения гостей." name="description"/>
|
||||
<meta content="#0A2540" name="theme-color"/>
|
||||
<meta content="index,follow" name="robots"/>
|
||||
<link href="https://exodevices.ru/hotels" rel="canonical"/>
|
||||
<link href="assets/asset_3036e10217a4.png" rel="icon" type="image/png"/>
|
||||
<link href="assets/asset_3036e10217a4.png" rel="apple-touch-icon"/>
|
||||
<meta content="website" property="og:type"/>
|
||||
<meta content="ru_RU" property="og:locale"/>
|
||||
<meta content="https://exodevices.ru/hotels" property="og:url"/>
|
||||
<meta content="Экзо Групп" property="og:site_name"/>
|
||||
<meta content="ЭкзоОтель: пространство восстановления для гостей" property="og:title"/>
|
||||
<meta content="Готовое wellness-tech пространство для дополнительной выручки, роста ценности проживания, LTV и привлечения гостей." property="og:description"/>
|
||||
<meta content="assets/asset_137e83a9f909.jpg" property="og:image"/>
|
||||
<meta content="1200" property="og:image:width"/>
|
||||
<meta content="630" property="og:image:height"/>
|
||||
<meta content="Премиальное пространство ЭкзоОтель с оборудованием Экзо Групп" property="og:image:alt"/>
|
||||
<meta content="summary_large_image" name="twitter:card"/>
|
||||
<script>document.documentElement.classList.add('js')</script>
|
||||
<link rel="stylesheet" href="styles.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="header" id="siteHeader">
|
||||
<div class="container header__inner">
|
||||
<a aria-label="Экзо Групп — на первый экран" class="brand" href="#top">
|
||||
<img alt="Экзо Групп — российские технологии реабилитации" class="exo-master-logo exo-master-logo--header" height="204" src="assets/asset_161e92b250ee.png" width="420"/>
|
||||
</a>
|
||||
<nav aria-label="Основная навигация" class="header__nav">
|
||||
<a href="#hotel-economics">Экономика</a>
|
||||
<a href="#guests">Для гостя</a>
|
||||
<a href="#formats">Интерьер</a>
|
||||
<a href="#equipment">Сервис</a>
|
||||
</nav>
|
||||
<div class="header__actions"><a aria-label="Позвонить в Экзо Групп" class="btn btn--secondary btn--header btn--call" href="tel:+79277896071"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.35 1.78.68 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.25a2 2 0 0 1 2.11-.45c.84.33 1.72.56 2.62.68A2 2 0 0 1 22 16.92Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg><span>Звонок</span></a><a class="btn btn--primary btn--header" href="#proposal">Получить предложение</a></div></div>
|
||||
</header>
|
||||
<main>
|
||||
<section aria-labelledby="hero-title" class="hero" id="top">
|
||||
<div aria-hidden="true" class="hero__glow"></div>
|
||||
<div class="container">
|
||||
<div class="hero__content">
|
||||
<div class="hero__kicker reveal"><i aria-hidden="true"></i> Готовый формат внутри отеля</div>
|
||||
<h1 class="reveal delay-1" id="hero-title">ЭкзоОтель: Пространство восстановления для гостей</h1>
|
||||
<p class="hero__subtitle reveal delay-2">Кабинет восстановления, расслабления и дополнительной выручки внутри отеля</p>
|
||||
<div class="hero__actions reveal delay-2">
|
||||
<a class="btn btn--primary" href="#proposal">
|
||||
Получить предложение
|
||||
<svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div aria-label="Ключевая экономика сценария" class="hero__facts reveal delay-3">
|
||||
<div class="hero-fact"><strong>2 500 ₽</strong><span>средний чек сеанса по данным «ЭкзоКлиник»</span></div>
|
||||
<div class="hero-fact"><strong>600 000 ₽ / мес.</strong><span>сценарий: 8 сеансов в день × 30 дней</span></div>
|
||||
<div class="hero-fact"><strong>7,2 млн ₽ / год</strong><span>тот же сценарий, до вычета расходов</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section--light" id="benefits">
|
||||
<div class="container">
|
||||
<div class="section-head section-head--split reveal">
|
||||
<div>
|
||||
<div class="eyebrow">Бизнес-логика</div>
|
||||
<h2>Почему это выгодно именно вашему отелю</h2>
|
||||
</div>
|
||||
<p class="lead">Монетизируйте усталость гостя в моменте её проявления. Зачастую гость не планирует расслабление за месяц до отпуска. Эта потребность рождается внутри отеля — после активного дня или дороги, позволяя вам собирать дополнительную выручку без сложных предварительных продаж.</p>
|
||||
</div>
|
||||
<div aria-label="Преимущества для отеля" class="benefit-grid scroll-cards">
|
||||
<article class="benefit-card reveal">
|
||||
<span class="benefit-card__num">01</span>
|
||||
<h3>Новый источник выручки на текущем потоке гостей</h3>
|
||||
<p>Дополнительная точка продаж внутри существующей инфраструктуры отеля.</p>
|
||||
</article>
|
||||
<article class="benefit-card reveal delay-1">
|
||||
<span class="benefit-card__num">02</span>
|
||||
<h3>Премиальный сервис без расширения номерного фонда</h3>
|
||||
<p>Современная зона дополняет SPA, wellness или фитнес-пространство.</p>
|
||||
</article>
|
||||
<article class="benefit-card reveal delay-2">
|
||||
<span class="benefit-card__num">03</span>
|
||||
<h3>Причина остаться в SPA / фитнес-зоне дольше</h3>
|
||||
<p>Готовое меню программ и дополнительные услуги к проживанию.</p>
|
||||
</article>
|
||||
<article class="benefit-card reveal delay-3">
|
||||
<span class="benefit-card__num">04</span>
|
||||
<h3>Стимул для LTV и привлечения новых гостей</h3>
|
||||
<p>Заметный wellness-tech сервис создаёт дополнительный повод выбрать отель, купить больше услуг во время проживания и вернуться за знакомым форматом отдыха.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div aria-hidden="true" class="scroll-hint">
|
||||
<svg fill="none" viewbox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg>
|
||||
Листайте карточки в сторону
|
||||
</div>
|
||||
<div aria-label="Рынок отелей 2025–2026" class="market-panel reveal">
|
||||
<div class="market-panel__top">
|
||||
<h3>Загрузка отелей снижается — ценность каждого гостя становится важнее</h3>
|
||||
<p>Гостевой поток ещё растёт, но предложение увеличивается быстрее, средняя загрузка в прогнозе 2026г. снижается с 62,0% до 59,1%, а рост RevPAR отстаёт от роста ADR. Отелю сложнее расти только за счёт номера.</p>
|
||||
</div>
|
||||
<div class="market-grid">
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__label"><span>Гостевой поток, 2025</span><strong class="metric-card__value">92 млн</strong></div>
|
||||
<svg aria-label="Рост гостевого потока с 48 до 92 миллионов гостей с 2021 по 2025 год" role="img" viewbox="0 0 280 90">
|
||||
<line class="chart-gridline" x1="8" x2="272" y1="74" y2="74"></line><line class="chart-gridline" x1="8" x2="272" y1="42" y2="42"></line>
|
||||
<polyline class="chart-line" points="14,69 76,47 138,31 200,22 266,18"></polyline>
|
||||
<circle class="chart-dot" cx="14" cy="69" r="3"></circle><circle class="chart-dot" cx="76" cy="47" r="3"></circle><circle class="chart-dot" cx="138" cy="31" r="3"></circle><circle class="chart-dot" cx="200" cy="22" r="3"></circle><circle class="chart-dot" cx="266" cy="18" r="4"></circle>
|
||||
</svg>
|
||||
<div class="metric-card__foot"><span>2021 · 48</span><span>+2,2% г/г</span></div>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__label"><span>Предложение на рынке</span><strong class="metric-card__value">+14%</strong></div>
|
||||
<svg aria-label="Рост предложения с более чем 33 до 38 тысяч объектов" role="img" viewbox="0 0 280 90">
|
||||
<line class="chart-gridline" x1="8" x2="272" y1="78" y2="78"></line>
|
||||
<rect class="chart-bar chart-bar--muted" height="51" rx="7" width="62" x="58" y="27"></rect><rect class="chart-bar" height="60" rx="7" width="62" x="165" y="18"></rect>
|
||||
<text fill="rgba(255,255,255,.58)" font-size="10" text-anchor="middle" x="89" y="23">>33</text><text fill="#39E0D2" font-size="10" text-anchor="middle" x="196" y="14">38</text>
|
||||
</svg>
|
||||
<div class="metric-card__foot"><span>2024</span><span>2025 · тыс. объектов</span></div>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__label"><span>Средняя загрузка, 2026г.</span><strong class="metric-card__value">−2,9 п.п.</strong></div>
|
||||
<svg aria-label="Снижение средней загрузки с 62,0 до 59,1 процента" role="img" viewbox="0 0 280 90">
|
||||
<line class="chart-gridline" x1="8" x2="272" y1="78" y2="78"></line>
|
||||
<rect class="chart-bar chart-bar--muted" height="63" rx="7" width="62" x="58" y="15"></rect><rect class="chart-bar" height="58" rx="7" width="62" x="165" y="20"></rect>
|
||||
<text fill="rgba(255,255,255,.58)" font-size="10" text-anchor="middle" x="89" y="12">62,0%</text><text fill="#39E0D2" font-size="10" text-anchor="middle" x="196" y="17">59,1%</text>
|
||||
</svg>
|
||||
<div class="metric-card__foot"><span>2025г.</span><span>2026г.</span></div>
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-card__label"><span>Доходность номера, 2026г.</span><strong class="metric-card__value">разрыв роста</strong></div>
|
||||
<svg aria-label="Рост средней цены номера на 5,2 процента и выручки на номер на 2,5 процента" role="img" viewbox="0 0 280 90">
|
||||
<line class="chart-gridline" x1="8" x2="272" y1="78" y2="78"></line>
|
||||
<rect class="chart-bar chart-bar--muted" height="60" rx="7" width="62" x="58" y="18"></rect><rect class="chart-bar" height="29" rx="7" width="62" x="165" y="49"></rect>
|
||||
<text fill="rgba(255,255,255,.58)" font-size="10" text-anchor="middle" x="89" y="15">+5,2%</text><text fill="#39E0D2" font-size="10" text-anchor="middle" x="196" y="46">+2,5%</text>
|
||||
</svg>
|
||||
<div class="metric-card__foot"><span>ADR</span><span>RevPAR</span></div>
|
||||
</article>
|
||||
</div>
|
||||
<div aria-label="Что снижение загрузки означает для бизнеса отеля" class="market-implication">
|
||||
<div class="market-implication__item"><strong>LTV текущего гостя</strong><span>Больше поводов купить SPA / wellness-услугу, включить восстановление в пакет проживания и вернуться за повторным опытом.</span></div>
|
||||
<div class="market-implication__item"><strong>Новые гости</strong><span>Выразительное пространство восстановления усиливает предложение отеля и становится дополнительным аргументом при выборе поездки.</span></div>
|
||||
<div class="market-implication__item"><strong>Текущий поток</strong><span>Дополнительная точка выручки внутри действующей инфраструктуры — без расширения номерного фонда.</span></div>
|
||||
</div>
|
||||
<p class="source-note">Показатели и формулировки — из презентации «ЭкзоОтель», 2025–2026г.. Влияние на LTV и привлечение гостей зависит от упаковки, продвижения и операционной загрузки.</p><div aria-label="Расшифровка гостиничных показателей" class="market-glossary">
|
||||
<div><strong>RevPAR</strong><span>Revenue per Available Room — выручка на один доступный номер.</span></div>
|
||||
<div><strong>ADR</strong><span>Average Daily Rate — средняя цена проданного номера.</span></div>
|
||||
<div><strong>LTV</strong><span>Lifetime Value — совокупная ценность гостя за весь период отношений с отелем.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section exo-econ exo-econ--hotel" id="hotel-economics">
|
||||
<div class="container">
|
||||
<header class="exo-econ__head reveal">
|
||||
<span class="exo-econ__eyebrow">Экономика текущего гостевого потока</span>
|
||||
<h2>Номер уже продан. Следующая выручка — внутри маршрута гостя</h2>
|
||||
<p>Средняя загрузка снижается с 62,0% до 59,1%, а средняя цена проданного номера растёт быстрее выручки на один доступный номер. Это означает, что повышение стоимости проживания не полностью превращается в рост доходности. ЭкзоОтель добавляет отдельный платный сервис к уже существующему гостевому потоку.</p>
|
||||
</header>
|
||||
<div aria-label="Ключевые показатели экономики отеля" class="exo-econ__metrics reveal">
|
||||
<article class="exo-econ__metric"><strong>−2,9</strong><span>процентного пункта снижения загрузки</span><small>с 62,0% до 59,1% в прогнозе на 2026 год</small></article>
|
||||
<article class="exo-econ__metric"><strong>2,7</strong><span>процентного пункта — разрыв темпов роста</span><small>цена проданного номера +5,2%; выручка на доступный номер +2,5%</small></article>
|
||||
<article class="exo-econ__metric"><strong>+14%</strong><span>рост предложения</span><small>конкуренция за гостя усиливается</small></article>
|
||||
<article class="exo-econ__metric"><strong>92 млн</strong><span>гостевой поток 2025</span><small>спрос есть — важна глубина монетизации</small></article>
|
||||
</div>
|
||||
<div class="exo-econ__compare">
|
||||
<article class="exo-econ__panel exo-econ__panel--loss reveal">
|
||||
<h3 class="exo-econ__panel-title"><i>↘</i>Где деньги остаются нереализованными</h3>
|
||||
<div class="exo-econ__list">
|
||||
<div class="exo-econ__item"><b>01</b><div><strong>Доход зависит в основном от номера</strong><span>При снижении загрузки пустой номер уже нельзя компенсировать одним повышением средней цены проданного номера.</span></div></div>
|
||||
<div class="exo-econ__item"><b>02</b><div><strong>Потребность возникает, но не продаётся</strong><span>Усталость после дороги, лыж, прогулок или тренировок появляется уже в отеле — без recovery-меню чек не возникает.</span></div></div>
|
||||
<div class="exo-econ__item"><b>03</b><div><strong>Дополнительный расход уходит наружу</strong><span>Гость покупает массаж и восстановление вне отеля либо вовсе отказывается от услуги.</span></div></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="exo-econ__panel exo-econ__panel--gain reveal">
|
||||
<h3 class="exo-econ__panel-title"><i>↗</i>На чём зарабатывает отель с Экзо</h3>
|
||||
<div class="exo-econ__list">
|
||||
<div class="exo-econ__item"><b>01</b><div><strong>Разовые программы в момент спроса</strong><span>Гость покупает понятный сценарий: после дороги, для ног, спины, SPA или активного дня.</span></div></div>
|
||||
<div class="exo-econ__item"><b>02</b><div><strong>Пакеты и upgrade к проживанию</strong><span>Recovery добавляется к SPA, фитнесу, premium-тарифу номера или программе активного отдыха.</span></div></div>
|
||||
<div class="exo-econ__item"><b>03</b><div><strong>Повторный опыт и рост LTV</strong><span>Знакомый wellness-ритуал становится причиной купить больше услуг и вернуться в отель.</span></div></div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="exo-econ__bridge reveal">
|
||||
<strong>Операционная база уже позволяет строить отдельную точку выручки</strong>
|
||||
<div class="exo-econ__ops">
|
||||
<div class="exo-econ__op"><b>4 аппарата</b><span>разные сценарии гостя</span></div>
|
||||
<div class="exo-econ__op"><b>1 оператор</b><span>основное участие — ЭкзоТекар</span></div>
|
||||
<div class="exo-econ__op"><b>12 часов</b><span>базовый режим расписания</span></div>
|
||||
<div class="exo-econ__op"><b>до 48</b><span>аппарат-часов в день до учёта буферов</span></div>
|
||||
</div>
|
||||
<p>48 аппарат-часов — технический ориентир: 4 аппарата × 12 часов. Фактическая пропускная способность зависит от меню программ, сочетания процедур, санитарных интервалов и участия специалиста.</p>
|
||||
</div>
|
||||
<div class="exo-econ__calc reveal" data-econ-calc="hotel">
|
||||
<div class="exo-econ__calc-head"><span>Калькулятор сценария</span><h3>Посчитайте дополнительную выручку на своих тарифах</h3><p>Введите фактическое число оплаченных сеансов, средний чек сеанса и рабочие дни.</p></div>
|
||||
<div class="exo-econ__calc-grid">
|
||||
<div class="exo-econ__fields">
|
||||
<div class="exo-econ__field"><label for="hotelPrograms">Сеансов в день</label><input id="hotelPrograms" inputmode="decimal" min="0" placeholder="например, 8" type="number"/></div>
|
||||
<div class="exo-econ__field"><label for="hotelCheck">Средний чек сеанса, ₽</label><input id="hotelCheck" inputmode="numeric" min="0" placeholder="например, 2500" type="number"/></div>
|
||||
<div class="exo-econ__field"><label for="hotelDays">Рабочих дней в месяц</label><input id="hotelDays" inputmode="numeric" min="1" type="number" value="30"/></div>
|
||||
</div>
|
||||
<div class="exo-econ__results">
|
||||
<div class="exo-econ__result"><span>Дополнительная выручка / месяц</span><strong data-econ-month="">—</strong><small data-econ-volume="">Введите сеансы и чек</small></div>
|
||||
<div class="exo-econ__result"><span>Дополнительная выручка / год</span><strong data-econ-year="">—</strong><small>до вычета расходов</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<div aria-label="Ориентир среднего чека" class="exo-econ__benchmark">
|
||||
<span class="exo-econ__benchmark-label">Ориентир для расчёта</span>
|
||||
<p>Средний чек сеанса составляет <strong>2 500 ₽</strong>, по данным нашей клиники «ЭкзоКлиник» в городе Тольятти за период 2025г.–2026г.</p>
|
||||
<b>Средний чек сеанса может меняться в зависимости от региона и сезонных предложений.</b>
|
||||
</div><div class="exo-econ__actions">
|
||||
<a class="btn btn--primary exo-econ__consult" href="#proposal">
|
||||
Получить консультацию
|
||||
<svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
</a>
|
||||
</div><p class="exo-econ__disclaimer">Сценарный калькулятор, а не финансовая гарантия. CAPEX, ФОТ, налоги, расходники, тарифы и фактическая загрузка рассчитываются после аудита отеля.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section--white section--compact" id="guests">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<div class="eyebrow">Потребность гостя</div>
|
||||
<h2>Портрет гостя отеля</h2>
|
||||
<p class="lead">Кабинет востребован у гостей, которые хотят восстановиться, не меняя привычный маршрут отдыха или поездки.</p>
|
||||
</div>
|
||||
<div class="portrait-grid scroll-cards">
|
||||
<article class="portrait-card reveal">
|
||||
<div class="portrait-card__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M3 12h18M5 8h4l2-4h2l2 4h4l2 4-2 4h-4l-2 4h-2l-2-4H5l-2-4 2-4Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.7"></path></svg></div>
|
||||
<h3>Гость после дороги</h3>
|
||||
<p>После перелёта или длительной поездки хочет снять усталость, напряжение в теле и быстрее включиться в отдых.</p>
|
||||
</article>
|
||||
<article class="portrait-card reveal delay-1">
|
||||
<div class="portrait-card__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M13 5.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM10 22l1-6-3-3 2-5 4 1 2 3h4M5 22l2-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></div>
|
||||
<h3>Активный гость</h3>
|
||||
<p>Выбирает лыжи, прогулки, экскурсии, бассейн, тренировки или хайкинг и восстанавливается между активностями.</p>
|
||||
</article>
|
||||
<article class="portrait-card reveal delay-2">
|
||||
<div class="portrait-card__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M12 21c4.5-3 7-6.2 7-10a7 7 0 0 0-14 0c0 3.8 2.5 7 7 10Z" stroke="currentColor" stroke-width="1.7"></path><path d="M9 11c1.8.1 3.2-.9 4-3 1.8 1.4 2.4 3.2 1.5 5.3-1 2.2-3.3 3.1-5.5 2" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"></path></svg></div>
|
||||
<h3>Wellness-гость</h3>
|
||||
<p>Посещает SPA, массаж, бассейн или банный комплекс и воспринимает кабинет как дополнительный сервис восстановления.</p>
|
||||
</article>
|
||||
<article class="portrait-card reveal delay-3">
|
||||
<div class="portrait-card__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" stroke="currentColor" stroke-width="1.7"></path><path d="M3 13h18M10 13v2h4v-2" stroke="currentColor" stroke-width="1.7"></path></svg></div>
|
||||
<h3>Деловой гость</h3>
|
||||
<p>Ценит возможность уделить время себе, не выезжая из отеля и не перестраивая график встреч или командировки.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div aria-hidden="true" class="scroll-hint">
|
||||
<svg fill="none" viewbox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg>
|
||||
Листайте карточки в сторону
|
||||
</div>
|
||||
</div>
|
||||
</section><section class="section section--white section--compact" id="formats">
|
||||
<div class="container">
|
||||
<div class="section-head section-head--split reveal">
|
||||
<div>
|
||||
<div class="eyebrow">Решение для вашего бизнеса</div>
|
||||
<h2>Отель — не больница. Пространство восстановления должно продолжать интерьер</h2>
|
||||
</div>
|
||||
<p class="lead">Оборудование Экзо Групп интегрируется в SPA, wellness- или фитнес-зону и оформляется в стилистике вашего отеля. На фотографиях ниже — варианты интерьера и размещения, где аппараты становятся частью премиального сервиса, а не выглядят как медицинский кабинет.</p>
|
||||
</div>
|
||||
<div class="scenario-grid scroll-cards">
|
||||
<article class="scenario-card reveal">
|
||||
<img alt="Приватный SPA-кабинет с оборудованием Экзо Групп" height="640" loading="lazy" src="assets/asset_60f552085ea3.webp" width="960"/>
|
||||
<div class="scenario-card__content"><span class="scenario-card__index">01 · SPA</span><h3>SPA-зона</h3><p>Формат 3-в-1 или приватный кабинет, где гость проходит несколько процедур подряд по записи.</p></div>
|
||||
</article>
|
||||
<article class="scenario-card reveal delay-1">
|
||||
<img alt="ЭкзоВодород в wellness-зоне отдыха" height="640" loading="lazy" src="assets/asset_81ce9b240c75.webp" width="960"/>
|
||||
<div class="scenario-card__content"><span class="scenario-card__index">02 · Wellness</span><h3>Wellness-зона</h3><p>ЭкзоВодород или ЭкзоПресс в комнате отдыха, у бассейна, перед SPA или как персональный сервис в номер.</p></div>
|
||||
</article>
|
||||
<article class="scenario-card reveal delay-2">
|
||||
<img alt="Стеклянная recovery-зона рядом с фитнесом" height="640" loading="lazy" src="assets/asset_85faea2da9e3.webp" width="960"/>
|
||||
<div class="scenario-card__content"><span class="scenario-card__index">03 · Recovery</span><h3>Recovery-зона</h3><p>Мягкая или стеклянная капсула рядом с фитнесом и SPA: технология заметна гостю, но процедура сохраняет приватность.</p></div>
|
||||
</article>
|
||||
<article class="scenario-card reveal delay-3">
|
||||
<img alt="ЭкзоТерапия рядом с фитнес-зоной" height="640" loading="lazy" src="assets/asset_c43355207f6f.webp" width="960"/>
|
||||
<div class="scenario-card__content"><span class="scenario-card__index">04 · Active day</span><h3>После активного дня</h3><p>Готовые программы после лыж, хайкинга, прогулок, бассейна, тренировки или экскурсии.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
<div aria-hidden="true" class="scroll-hint">
|
||||
<svg fill="none" viewbox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg>
|
||||
Листайте сценарии в сторону
|
||||
</div>
|
||||
<div aria-label="Пример меню программ для гостей отеля" class="program-menu reveal">
|
||||
<div class="program-menu__head">
|
||||
<h3>Продавать не аппарат, а понятную программу гостю</h3>
|
||||
<p>Названия меню говорят языком сценария поездки: дорога, ноги, спина, активный день, SPA и время для себя.</p>
|
||||
</div>
|
||||
<div class="program-grid scroll-cards">
|
||||
<article class="program-card"><span class="program-card__time">40–60 минут</span><h4>Восстановление после дороги</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоВодород</strong><span>40-минутная автономная пауза в wellness-зоне после перелёта или длительной поездки.</span></div><div class="program-device"><strong>ЭкзоПресс</strong><span>Пассивный этап для ног после длительного сидения, дороги и перелёта.</span></div></div></article>
|
||||
<article class="program-card"><span class="program-card__time">20–30 минут</span><h4>Лёгкость в ногах</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоПресс</strong><span>Компрессионный, тепловой или холодовой формат после прогулок, экскурсий, лыж и долгого дня на ногах.</span></div><div class="program-device"><strong>ЭкзоТекар</strong><span>Помогает снять мышечное напряжение и ощущение тяжести, улучшить локальное восстановление мягких тканей после длительной ходьбы, активного дня или нагрузки на ноги.</span></div></div></article>
|
||||
<article class="program-card"><span class="program-card__time">45–70 минут</span><h4>После активного дня</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоТекар</strong><span>Индивидуальная работа специалиста с локальными зонами после лыж, хайкинга, тренировки или бассейна.</span></div><div class="program-device"><strong>ЭкзоПресс</strong><span>Пассивный этап для ног после продолжительной физической нагрузки.</span></div></div></article>
|
||||
<article class="program-card"><span class="program-card__time">35–50 минут</span><h4>Спина и шея</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоТекар</strong><span>Индивидуальная работа специалиста с областью спины, шеи и плеч по предварительной записи.</span></div><div class="program-device"><strong>ЭкзоТерапия</strong><span>Короткий 10-минутный этап, который можно встроить в персональную программу гостя.</span></div></div></article>
|
||||
<article class="program-card"><span class="program-card__time">60–80 минут</span><h4>Время для себя</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоТерапия</strong><span>Короткий премиальный этап восстановления внутри SPA-маршрута.</span></div><div class="program-device"><strong>ЭкзоВодород</strong><span>Автономная 40-минутная wellness-пауза в кресле.</span></div><div class="program-device"><strong>ЭкзоПресс</strong><span>Пассивная процедура, которую удобно сочетать со SPA и отдыхом.</span></div></div></article>
|
||||
<article class="program-card"><span class="program-card__time">до 90 минут</span><h4>Индивидуальная программа</h4><div class="program-devices"><div class="program-device"><strong>ЭкзоТерапия</strong><span>Короткий флагманский этап программы.</span></div><div class="program-device"><strong>ЭкзоТекар</strong><span>Индивидуальная работа специалиста с выбранными зонами.</span></div><div class="program-device"><strong>ЭкзоПресс</strong><span>Потоковый пассивный формат для ног.</span></div><div class="program-device"><strong>ЭкзоВодород</strong><span>Автономная wellness-пауза; состав и последовательность выбираются под сценарий гостя и формат отеля.</span></div></div></article>
|
||||
</div>
|
||||
<div aria-hidden="true" class="scroll-hint">
|
||||
<svg fill="none" viewbox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg>
|
||||
Листайте программы в сторону
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section--dark equipment-shell" id="equipment">
|
||||
<div class="container">
|
||||
<div class="section-head section-head--split reveal">
|
||||
<div>
|
||||
<div class="eyebrow">Модель работы</div>
|
||||
<h2>Как работает сервис восстановления для гостя</h2>
|
||||
</div>
|
||||
<p class="lead">Ниже показана логика работы каждой технологии: для какого сценария гостя она подходит, сколько длится сеанс и требуется ли участие специалиста. Так отель заранее понимает, как встроить сервис в SPA-меню, расписание и загрузку команды.</p>
|
||||
</div>
|
||||
<div class="equipment-grid scroll-cards">
|
||||
<article class="equipment-card reveal">
|
||||
<div class="equipment-card__media"><img alt="ЭкзоТерапия в премиальной SPA-капсуле" height="720" loading="lazy" src="assets/asset_3dfdc4cd8cad.webp" width="1080"/></div>
|
||||
<div class="equipment-card__body">
|
||||
<div class="equipment-card__top"><h3>ЭкзоТерапия</h3><div class="equipment-role">Флагман SPA</div></div>
|
||||
<span class="equipment-duration">10–15 минут</span><p class="equipment-tech">Высокоинтенсивная импульсная магнитотерапия.</p>
|
||||
<p>Короткий сеанс 10–15 минут для гостя после дороги, лыж или долгой прогулки. Подходит как флагманская процедура SPA-зоны.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="equipment-card reveal delay-1">
|
||||
<div class="equipment-card__media"><img alt="ЭкзоТекар в кабинете премиальных процедур" height="720" loading="lazy" src="assets/asset_f1caee108e8a.webp" width="1080"/></div>
|
||||
<div class="equipment-card__body">
|
||||
<div class="equipment-card__top"><h3>ЭкзоТекар</h3><div class="equipment-role">Работа специалиста</div></div>
|
||||
<span class="equipment-duration">20–30 минут</span><p class="equipment-tech">Текар-терапия + ударно-волновая терапия + ультразвуковая терапия.</p>
|
||||
<p>Индивидуальная работа специалиста после активного дня — для шеи, спины, плеч или ног. Процедура занимает отдельный слот в расписании.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="equipment-card reveal delay-2">
|
||||
<div class="equipment-card__media"><img alt="ЭкзоПресс у бассейна в SPA-зоне" height="720" loading="lazy" src="assets/asset_c34203bef747.webp" width="1080"/></div>
|
||||
<div class="equipment-card__body">
|
||||
<div class="equipment-card__top"><h3>ЭкзоПресс</h3><div class="equipment-role">Потоковый формат</div></div>
|
||||
<span class="equipment-duration">20–30 минут</span><p class="equipment-tech">Компрессионная терапия + тепловая терапия + холодовая терапия.</p>
|
||||
<p>Компрессия + тепло / холод для ног после дороги, перелёта, экскурсий и лыж. Потоковый формат, который не требует отдельного кабинета.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="equipment-card reveal delay-3">
|
||||
<div class="equipment-card__media"><img alt="ЭкзоВодород в спокойной wellness-зоне" height="720" loading="lazy" src="assets/asset_9378703be548.webp" width="1080"/></div>
|
||||
<div class="equipment-card__body">
|
||||
<div class="equipment-card__top"><h3>ЭкзоВодород</h3><div class="equipment-role">Автономная пауза</div></div>
|
||||
<span class="equipment-duration">30–60 минут</span><p class="equipment-tech">Ингаляция молекулярным водородом</p>
|
||||
<p>Комфортная пауза 30–60 минут в кресле с минимальным участием оператора. Сочетается с SPA, бассейном и ожиданием процедур.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div aria-hidden="true" class="scroll-hint" style="color:rgba(255,255,255,.52)">
|
||||
<svg fill="none" viewbox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"></path></svg>
|
||||
Листайте оборудование в сторону
|
||||
</div>
|
||||
<div aria-label="Операционная модель кабинета восстановления в отеле" class="hotel-model reveal">
|
||||
<div class="hotel-model__head">
|
||||
<h3>Как работает кабинет внутри отеля</h3>
|
||||
<p>Отель получает не просто четыре аппарата, а рабочую модель: помещение, расписание, меню программ, обучение команды и измеримые показатели пилота.</p>
|
||||
</div>
|
||||
<div class="hotel-model__grid">
|
||||
<div class="hotel-model__card"><strong>12–36 м²</strong><span>Отдельная recovery-комната, SPA-кабинет или зона рядом с фитнесом и бассейном.</span></div>
|
||||
<div class="hotel-model__card"><strong>1 оператор</strong><span>Основное активное участие требуется на ЭкзоТекар; остальные процедуры после запуска работают практически автономно.</span></div>
|
||||
<div class="hotel-model__card"><strong>12 часов</strong><span>Расписание с буферами на подготовку места, сопровождение гостя и санитарную обработку.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipment-note reveal">Гость покупает не название технологии, а понятный сервис: восстановление, лёгкость и премиальный опыт внутри отеля. Медицинские формулировки и протоколы применяются только при наличии лицензии, профильных специалистов и утверждённых протоколов.</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section section--light" id="why-exo">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<div class="eyebrow">Партнёр внедрения</div>
|
||||
<h2>Почему Экзо Групп</h2>
|
||||
<p class="lead">Отель получает четыре аппарата, визуальную концепцию, меню программ, расчёт экономики, формат с одним специалистом, обучение, чек-листы запуска и сценарии для SPA и ресепшен.</p>
|
||||
</div>
|
||||
<div class="why-layout">
|
||||
<div class="why-visual reveal">
|
||||
<div class="why-visual__caption">
|
||||
<strong>Не просто оборудование — готовое направление внутри отеля</strong>
|
||||
<span>Визуальная концепция, меню программ, формат с одним специалистом, обучение, чек-листы и сценарии для SPA и ресепшен.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="why-list">
|
||||
<article class="why-item reveal">
|
||||
<div class="why-item__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M12 3 3 7.5 12 12l9-4.5L12 3Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.7"></path><path d="M5 11v5.5L12 21l7-4.5V11" stroke="currentColor" stroke-linejoin="round" stroke-width="1.7"></path></svg></div>
|
||||
<div><strong>Российские технологии</strong><p>Технологичный формат восстановления и премиального сервиса для гостиничной инфраструктуры.</p></div>
|
||||
</article>
|
||||
<article class="why-item reveal delay-1">
|
||||
<div class="why-item__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M3 21V9l5 3V7l5 3V3h8v18H3Z" stroke="currentColor" stroke-linejoin="round" stroke-width="1.7"></path><path d="M16 7h2M16 11h2M7 16h2M12 16h2M17 16h2" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"></path></svg></div>
|
||||
<div><strong>Собственное производство в Тольятти</strong><p>Оборудование, визуальная концепция и модель внедрения собраны в единую систему Экзо Групп.</p></div>
|
||||
</article>
|
||||
<article class="why-item reveal delay-2">
|
||||
<div class="why-item__icon"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M4 4h16v16H4V4Z" stroke="currentColor" stroke-width="1.7"></path><path d="m8 12 2.5 2.5L16 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7"></path></svg></div>
|
||||
<div><strong>Готовая модель запуска</strong><p>Подбор формата, включение услуг в SPA-прайс и приложение, обучение операторов и ресепшен, сценарии продаж и материалы запуска.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Названия Marriott, Cosmosstay, «Адонис», «Углич», «Предгорье Кавказа» и «Красная Поляна» не выведены: подтверждение этих объектов отсутствует в приложенных презентациях. Добавлять логотипы и названия следует только после проверки кейсов и права использования брендов. -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="section cta-section" id="proposal">
|
||||
<div class="container cta-grid">
|
||||
<div class="cta-copy reveal">
|
||||
<div class="eyebrow">Следующий шаг</div>
|
||||
<h2>Подберём решение под формат вашего отеля</h2>
|
||||
<p class="lead">Оставьте контакты — наш специалист свяжется с Вами, ответит на вопросы и подготовит коммерческое предложение, исходя из <strong>доступной площади, специфики инфраструктуры и ваших бизнес-задач.</strong></p>
|
||||
</div>
|
||||
<form class="lead-form reveal delay-1" data-endpoint="/api/leads/hotels" id="leadForm" novalidate="" onsubmit="return submitLead(event)">
|
||||
<div class="form-grid">
|
||||
<div class="field">
|
||||
<label for="name">Имя</label>
|
||||
<input autocomplete="name" id="name" minlength="2" name="name" placeholder="Как к вам обращаться" required="" type="text"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="company">Компания / отель</label>
|
||||
<input autocomplete="organization" id="company" minlength="2" name="company" placeholder="Название отеля" type="text"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="phone">Телефон</label>
|
||||
<input autocomplete="tel" id="phone" inputmode="tel" name="phone" placeholder="+7 900 000-00-00" required="" type="tel"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input autocomplete="email" id="email" name="email" placeholder="name@hotel.ru" type="email"/>
|
||||
</div>
|
||||
<div class="field field--full">
|
||||
<label for="comment">Комментарий</label>
|
||||
<textarea id="comment" name="comment" placeholder="Город, категория отеля, наличие SPA / фитнес-зоны"></textarea>
|
||||
</div>
|
||||
<div aria-hidden="true" class="honeypot">
|
||||
<label for="website">Не заполнять</label>
|
||||
<input autocomplete="off" id="website" name="website" tabindex="-1" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<p class="form-consent">Нажимая кнопку, вы подтверждаете согласие на обработку данных для подготовки предложения.</p>
|
||||
<button class="btn btn--primary form-submit" id="submitButton" type="submit">
|
||||
<span>Получить предложение</span>
|
||||
<svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
</button>
|
||||
<div aria-live="polite" class="form-status" id="formStatus" role="status"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="container footer__inner">
|
||||
<img alt="Экзо Групп — российские технологии реабилитации" class="exo-master-logo exo-master-logo--footer" height="204" src="assets/asset_161e92b250ee.png" width="420"/>
|
||||
<div class="footer__right"><span>ЭкзоОтель · пространство восстановления для гостей</span><span>© <span id="year"></span> ООО «Экзо Групп»</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
<!-- EXO callback modal -->
|
||||
<div class="exo-callback" id="exoCallbackModal" aria-hidden="true">
|
||||
<div class="exo-callback__backdrop" data-callback-close></div>
|
||||
<section class="exo-callback__dialog" role="dialog" aria-modal="true" aria-labelledby="exoCallbackTitle">
|
||||
<button class="exo-callback__close" type="button" aria-label="Закрыть форму" data-callback-close>×</button>
|
||||
<div class="exo-callback__eyebrow">Обратный звонок</div>
|
||||
<h2 id="exoCallbackTitle">Перезвоним вам</h2>
|
||||
<p class="exo-callback__intro">Оставьте имя и телефон — наш специалист свяжется с вами и ответит на вопросы. Или позвоните сами: <a href="tel:+79277896071">+7 927 789-60-71</a>.</p>
|
||||
<form id="exoCallbackForm" data-endpoint="/api/leads/hotels" novalidate>
|
||||
<div class="exo-callback__field">
|
||||
<label for="exoCallbackName">Имя *</label>
|
||||
<input id="exoCallbackName" name="name" autocomplete="name" placeholder="Ваше имя" minlength="2" required>
|
||||
</div>
|
||||
<div class="exo-callback__field">
|
||||
<label for="exoCallbackPhone">Телефон *</label>
|
||||
<input id="exoCallbackPhone" name="phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="+7 999 000-00-00" required>
|
||||
</div>
|
||||
<label class="exo-callback__consent">
|
||||
<input id="exoCallbackConsent" name="consent" type="checkbox" required>
|
||||
<span>Согласен на обработку персональных данных и получение обратного звонка.</span>
|
||||
</label>
|
||||
<button class="exo-callback__submit" id="exoCallbackSubmit" type="submit">Жду звонка →</button>
|
||||
<p class="exo-callback__status" id="exoCallbackStatus" role="status" aria-live="polite"></p>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,237 @@
|
||||
|
||||
(() => {
|
||||
const header = document.getElementById('siteHeader');
|
||||
const revealItems = document.querySelectorAll('.reveal');
|
||||
const year = document.getElementById('year');
|
||||
year.textContent = new Date().getFullYear();
|
||||
|
||||
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 18);
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
const observer = new IntersectionObserver((entries, obs) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
obs.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
|
||||
revealItems.forEach(item => observer.observe(item));
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', event => {
|
||||
const id = link.getAttribute('href');
|
||||
const target = id && document.querySelector(id);
|
||||
if (!target) return;
|
||||
event.preventDefault();
|
||||
const offset = header.offsetHeight + 8;
|
||||
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
function collectAttribution() {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'yclid', 'gclid'];
|
||||
return keys.reduce((acc, key) => {
|
||||
if (params.get(key)) acc[key] = params.get(key);
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
async function submitLead(event) {
|
||||
event.preventDefault();
|
||||
const form = event.currentTarget;
|
||||
const status = document.getElementById('formStatus');
|
||||
const button = document.getElementById('submitButton');
|
||||
const originalLabel = button.querySelector('span').textContent;
|
||||
|
||||
status.className = 'form-status';
|
||||
status.textContent = '';
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return false;
|
||||
}
|
||||
if (form.website.value) return false;
|
||||
|
||||
const payload = Object.fromEntries(new FormData(form).entries());
|
||||
delete payload.website;
|
||||
payload.page = '/hotels';
|
||||
payload.source = 'exo-hotel-landing';
|
||||
payload.attribution = collectAttribution();
|
||||
payload.submitted_at = new Date().toISOString();
|
||||
|
||||
button.disabled = true;
|
||||
button.setAttribute('aria-busy', 'true');
|
||||
button.querySelector('span').textContent = 'Отправляем…';
|
||||
|
||||
try {
|
||||
const endpoint = form.dataset.endpoint || '/api/leads/hotels';
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
credentials: 'same-origin'
|
||||
});
|
||||
if (!response.ok) throw new Error('HTTP ' + response.status);
|
||||
|
||||
form.reset();
|
||||
status.className = 'form-status success show';
|
||||
status.textContent = 'Спасибо. Заявка отправлена — специалист подготовит предложение и свяжется с вами.';
|
||||
} catch (error) {
|
||||
console.error('Lead form error:', error);
|
||||
status.className = 'form-status error show';
|
||||
status.textContent = 'Не удалось отправить форму. Проверьте подключение обработчика /api/leads/hotels и попробуйте ещё раз.';
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.removeAttribute('aria-busy');
|
||||
button.querySelector('span').textContent = originalLabel;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/* ---- merged script block ---- */
|
||||
|
||||
|
||||
(function(){
|
||||
const money = new Intl.NumberFormat('ru-RU',{maximumFractionDigits:0});
|
||||
const val = (root, selector) => {
|
||||
const el=root.querySelector(selector); if(!el) return 0;
|
||||
return Number(String(el.value||'').replace(/\s/g,'').replace(',','.'))||0;
|
||||
};
|
||||
document.querySelectorAll('[data-econ-calc]').forEach(root=>{
|
||||
const type=root.getAttribute('data-econ-calc');
|
||||
const update=()=>{
|
||||
let month=0, volume=0, ready=false;
|
||||
if(type==='hotel'){
|
||||
const programs=val(root,'#hotelPrograms'), check=val(root,'#hotelCheck'), days=val(root,'#hotelDays');
|
||||
ready=programs>0&&check>0&&days>0; volume=programs*days; month=volume*check;
|
||||
}else{
|
||||
const members=val(root,'#fitMembers'), share=val(root,'#fitShare'), spend=val(root,'#fitSpend');
|
||||
ready=members>0&&share>0&&spend>0; volume=Math.round(members*Math.min(share,100)/100); month=volume*spend;
|
||||
}
|
||||
const monthEl=root.querySelector('[data-econ-month]'), yearEl=root.querySelector('[data-econ-year]'), volumeEl=root.querySelector('[data-econ-volume]');
|
||||
if(!ready){monthEl.textContent='—';yearEl.textContent='—';return;}
|
||||
monthEl.textContent=money.format(month)+' ₽';yearEl.textContent=money.format(month*12)+' ₽';
|
||||
volumeEl.textContent=type==='hotel'?money.format(volume)+' сеансов в месяц':money.format(volume)+' покупателей recovery';
|
||||
};
|
||||
root.querySelectorAll('input').forEach(input=>input.addEventListener('input',update)); update();
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
/* === EXO callback modal === */
|
||||
(function(){
|
||||
const modal=document.getElementById('exoCallbackModal');
|
||||
const form=document.getElementById('exoCallbackForm');
|
||||
if(!modal||!form) return;
|
||||
|
||||
const triggers=[...document.querySelectorAll('.btn--call,.header-call')];
|
||||
const closeEls=modal.querySelectorAll('[data-callback-close]');
|
||||
const nameInput=document.getElementById('exoCallbackName');
|
||||
const phoneInput=document.getElementById('exoCallbackPhone');
|
||||
const submit=document.getElementById('exoCallbackSubmit');
|
||||
const status=document.getElementById('exoCallbackStatus');
|
||||
let lastFocused=null;
|
||||
|
||||
function setStatus(message,type){
|
||||
status.textContent=message;
|
||||
status.className='exo-callback__status is-show '+(type==='success'?'is-success':'is-error');
|
||||
}
|
||||
function clearStatus(){
|
||||
status.textContent='';
|
||||
status.className='exo-callback__status';
|
||||
}
|
||||
function openModal(event){
|
||||
if(event) event.preventDefault();
|
||||
lastFocused=document.activeElement;
|
||||
clearStatus();
|
||||
modal.classList.add('is-open');
|
||||
modal.setAttribute('aria-hidden','false');
|
||||
document.body.classList.add('exo-callback-open');
|
||||
setTimeout(()=>nameInput && nameInput.focus(),60);
|
||||
}
|
||||
function closeModal(){
|
||||
modal.classList.remove('is-open');
|
||||
modal.setAttribute('aria-hidden','true');
|
||||
document.body.classList.remove('exo-callback-open');
|
||||
if(lastFocused && typeof lastFocused.focus==='function') lastFocused.focus();
|
||||
}
|
||||
|
||||
triggers.forEach(el=>el.addEventListener('click',openModal));
|
||||
closeEls.forEach(el=>el.addEventListener('click',closeModal));
|
||||
document.addEventListener('keydown',e=>{
|
||||
if(e.key==='Escape' && modal.classList.contains('is-open')) closeModal();
|
||||
});
|
||||
|
||||
function formatPhone(){
|
||||
let d=phoneInput.value.replace(/\D/g,'').slice(0,11);
|
||||
if(!d){phoneInput.value='';return}
|
||||
if(d[0]==='8') d='7'+d.slice(1);
|
||||
if(d[0]!=='7') d='7'+d;
|
||||
let value='+7';
|
||||
if(d.length>1) value+=' '+d.slice(1,4);
|
||||
if(d.length>=5) value+=' '+d.slice(4,7);
|
||||
if(d.length>=8) value+='-'+d.slice(7,9);
|
||||
if(d.length>=10) value+='-'+d.slice(9,11);
|
||||
phoneInput.value=value;
|
||||
}
|
||||
phoneInput.addEventListener('input',formatPhone);
|
||||
|
||||
form.addEventListener('submit',async function(event){
|
||||
event.preventDefault();
|
||||
clearStatus();
|
||||
|
||||
if(!form.checkValidity()){
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
const phoneDigits=phoneInput.value.replace(/\D/g,'');
|
||||
if(phoneDigits.length<11){
|
||||
setStatus('Укажите полный номер телефона.','error');
|
||||
phoneInput.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const payload=Object.fromEntries(new FormData(form).entries());
|
||||
delete payload.consent;
|
||||
payload.lead_type='callback';
|
||||
payload.source='header-call-popup';
|
||||
payload.page_url=location.href;
|
||||
payload.page_title=document.title;
|
||||
payload.created_at=new Date().toISOString();
|
||||
|
||||
const original=submit.textContent;
|
||||
submit.disabled=true;
|
||||
submit.textContent='Отправляем…';
|
||||
|
||||
try{
|
||||
if(location.protocol==='file:') throw new Error('preview');
|
||||
const endpoint=form.dataset.endpoint;
|
||||
const response=await fetch(endpoint,{
|
||||
method:'POST',
|
||||
headers:{'Content-Type':'application/json','Accept':'application/json'},
|
||||
body:JSON.stringify(payload),
|
||||
credentials:'same-origin'
|
||||
});
|
||||
if(!response.ok) throw new Error('HTTP '+response.status);
|
||||
setStatus('Спасибо. Заявка отправлена — специалист свяжется с вами.','success');
|
||||
form.reset();
|
||||
}catch(error){
|
||||
console.warn('Callback form:',error);
|
||||
if(location.protocol==='file:' || location.hostname==='localhost'){
|
||||
setStatus('Демонстрационный режим: форма работает. После загрузки на сервер заявка будет отправляться в подключённый обработчик.','success');
|
||||
}else{
|
||||
setStatus('Не удалось отправить заявку. Попробуйте ещё раз или позвоните нам по номеру +7 927 789-60-71.','error');
|
||||
}
|
||||
}finally{
|
||||
submit.disabled=false;
|
||||
submit.textContent=original;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,853 @@
|
||||
|
||||
:root {
|
||||
--navy: #0A2540;
|
||||
--navy-2: #061B2F;
|
||||
--navy-3: #0E3352;
|
||||
--teal: #00C4B4;
|
||||
--teal-2: #39E0D2;
|
||||
--ice: #EAFBF8;
|
||||
--white: #FFFFFF;
|
||||
--text: #0A2540;
|
||||
--muted: #60778B;
|
||||
--line: rgba(10, 37, 64, .12);
|
||||
--glass: rgba(255, 255, 255, .10);
|
||||
--shadow: 0 28px 90px rgba(3, 26, 43, .18);
|
||||
--radius-xl: 32px;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 18px;
|
||||
--container: 1200px;
|
||||
--section-y: clamp(68px, 8vw, 112px);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; background: var(--navy-2); }
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background: #F5FAFB;
|
||||
font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body.menu-open { overflow: hidden; }
|
||||
img { display: block; max-width: 100%; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input, textarea { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
::selection { background: rgba(0, 196, 180, .28); color: var(--navy); }
|
||||
|
||||
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
|
||||
.section { padding: var(--section-y) 0; position: relative; }
|
||||
.section--light { background: #F5FAFB; }
|
||||
.section--white { background: var(--white); }
|
||||
.section--dark { background: var(--navy); color: var(--white); }
|
||||
.section--compact { --section-y: clamp(60px, 6vw, 88px); }
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 0 16px;
|
||||
color: #008F84;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.eyebrow::before {
|
||||
content: "";
|
||||
width: 26px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--teal);
|
||||
}
|
||||
.section--dark .eyebrow { color: var(--teal-2); }
|
||||
|
||||
h1, h2, h3, p { margin-top: 0; }
|
||||
h1, h2, h3 { text-wrap: balance; }
|
||||
h1 {
|
||||
margin-bottom: 22px;
|
||||
font-size: clamp(42px, 8vw, 86px);
|
||||
line-height: .98;
|
||||
letter-spacing: -.055em;
|
||||
font-weight: 760;
|
||||
max-width: 900px;
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: clamp(34px, 5vw, 58px);
|
||||
line-height: 1.03;
|
||||
letter-spacing: -.045em;
|
||||
font-weight: 740;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: clamp(21px, 2.4vw, 28px);
|
||||
line-height: 1.14;
|
||||
letter-spacing: -.025em;
|
||||
}
|
||||
.lead {
|
||||
max-width: 760px;
|
||||
margin-bottom: 0;
|
||||
color: var(--muted);
|
||||
font-size: clamp(18px, 2vw, 22px);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.section--dark .lead { color: rgba(255,255,255,.72); }
|
||||
.section-head { margin-bottom: clamp(34px, 5vw, 54px); }
|
||||
.section-head--split { display: grid; gap: 18px; }
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 50;
|
||||
padding: 14px 0;
|
||||
transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
|
||||
}
|
||||
.header.scrolled {
|
||||
background: rgba(6, 27, 47, .86);
|
||||
box-shadow: 0 12px 40px rgba(3, 20, 34, .18);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
|
||||
.brand { display: inline-flex; align-items: center; min-width: 0; }
|
||||
.brand img { width: clamp(150px, 19vw, 215px); height: auto; }
|
||||
.header__nav { display: none; align-items: center; gap: 30px; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 650; }
|
||||
.header__nav a { transition: color .2s ease; }
|
||||
.header__nav a:hover { color: var(--white); }
|
||||
|
||||
.btn {
|
||||
min-height: 52px;
|
||||
padding: 0 22px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-weight: 760;
|
||||
line-height: 1;
|
||||
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); }
|
||||
.btn:active { transform: translateY(0); }
|
||||
.btn--primary {
|
||||
color: var(--navy);
|
||||
background: var(--teal);
|
||||
box-shadow: 0 16px 45px rgba(0,196,180,.26);
|
||||
}
|
||||
.btn--primary:hover { background: var(--teal-2); box-shadow: 0 20px 55px rgba(0,196,180,.34); }
|
||||
.btn--secondary {
|
||||
color: var(--white);
|
||||
background: rgba(255,255,255,.08);
|
||||
border-color: rgba(255,255,255,.26);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.btn--secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }
|
||||
.btn--header { min-height: 44px; padding-inline: 17px; font-size: 13px; }
|
||||
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 760px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 122px 0 48px;
|
||||
overflow: hidden;
|
||||
color: var(--white);
|
||||
background: var(--navy-2);
|
||||
isolation: isolate;
|
||||
}
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -3;
|
||||
background-image: url("assets/asset_55bf368cd062.webp");
|
||||
background-size: cover;
|
||||
background-position: 60% center;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(4,21,35,.44) 0%, rgba(4,21,35,.18) 32%, rgba(4,21,35,.86) 100%),
|
||||
linear-gradient(90deg, rgba(4,21,35,.92) 0%, rgba(4,21,35,.69) 46%, rgba(4,21,35,.10) 100%);
|
||||
}
|
||||
.hero__glow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
right: -220px;
|
||||
bottom: -180px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,196,180,.38);
|
||||
filter: blur(100px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero__content { width: min(100%, 950px); }
|
||||
.hero__kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 22px;
|
||||
padding: 9px 13px;
|
||||
border: 1px solid rgba(255,255,255,.22);
|
||||
border-radius: 999px;
|
||||
color: rgba(255,255,255,.84);
|
||||
background: rgba(5,30,47,.36);
|
||||
backdrop-filter: blur(14px);
|
||||
font-size: 12px;
|
||||
font-weight: 780;
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(0,196,180,.14); }
|
||||
.hero__subtitle {
|
||||
max-width: 730px;
|
||||
margin-bottom: 30px;
|
||||
color: rgba(255,255,255,.82);
|
||||
font-size: clamp(19px, 2.2vw, 27px);
|
||||
line-height: 1.42;
|
||||
}
|
||||
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
|
||||
.hero__facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
max-width: 700px;
|
||||
}
|
||||
.hero-fact {
|
||||
min-height: 82px;
|
||||
padding: 15px 16px;
|
||||
border: 1px solid rgba(255,255,255,.16);
|
||||
border-radius: 18px;
|
||||
background: rgba(5,29,47,.42);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.hero-fact strong { display: block; margin-bottom: 3px; font-size: clamp(19px, 2.55vw, 27px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
|
||||
.hero-fact span { color: rgba(255,255,255,.62); font-size: 12px; }
|
||||
|
||||
.benefit-grid, .portrait-grid, .scenario-grid, .equipment-grid { display: grid; gap: 16px; }
|
||||
.scroll-cards {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(82%, 1fr);
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: inline mandatory;
|
||||
scrollbar-width: none;
|
||||
padding: 2px 1px 18px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
.scroll-cards::-webkit-scrollbar { display: none; }
|
||||
.scroll-cards > * { scroll-snap-align: start; }
|
||||
|
||||
.benefit-card {
|
||||
position: relative;
|
||||
min-height: 190px;
|
||||
padding: 25px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--white);
|
||||
box-shadow: 0 15px 50px rgba(10,37,64,.055);
|
||||
}
|
||||
.benefit-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
bottom: -65px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,196,180,.10);
|
||||
filter: blur(4px);
|
||||
}
|
||||
.benefit-card__num { display: block; margin-bottom: 28px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
|
||||
.benefit-card h3 { max-width: 290px; }
|
||||
.benefit-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
|
||||
|
||||
.market-panel {
|
||||
margin-top: 24px;
|
||||
padding: clamp(22px, 3vw, 34px);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--white);
|
||||
background:
|
||||
radial-gradient(circle at 85% 15%, rgba(0,196,180,.22), transparent 34%),
|
||||
linear-gradient(135deg, var(--navy), var(--navy-2));
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.market-panel__top { display: grid; gap: 12px; margin-bottom: 28px; }
|
||||
.market-panel__top h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
|
||||
.market-panel__top p { margin: 0; color: rgba(255,255,255,.68); max-width: 760px; }
|
||||
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.metric-card {
|
||||
min-height: 190px;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
border-radius: 19px;
|
||||
background: rgba(255,255,255,.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
.metric-card__label { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 44px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; }
|
||||
.metric-card__value { color: var(--teal-2); font-size: 16px; font-weight: 820; white-space: nowrap; }
|
||||
.metric-card svg { width: 100%; height: 88px; overflow: visible; }
|
||||
.metric-card__foot { display: flex; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.44); font-size: 10px; }
|
||||
.chart-gridline { stroke: rgba(255,255,255,.10); stroke-width: 1; }
|
||||
.chart-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
|
||||
.chart-dot { fill: var(--teal-2); opacity: 0; transform-origin: center; transition: opacity .35s ease .65s; }
|
||||
.chart-bar { fill: var(--teal); transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
|
||||
.chart-bar--muted { fill: rgba(255,255,255,.32); }
|
||||
.is-visible .chart-line { stroke-dashoffset: 0; }
|
||||
.is-visible .chart-dot { opacity: 1; }
|
||||
.is-visible .chart-bar { transform: scaleY(1); }
|
||||
.source-note { margin: 14px 0 0; color: rgba(255,255,255,.42); font-size: 11px; }
|
||||
|
||||
.market-implication {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.market-implication__item {
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255,255,255,.11);
|
||||
border-radius: 17px;
|
||||
background: rgba(255,255,255,.055);
|
||||
}
|
||||
.market-implication__item strong {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--teal-2);
|
||||
font-size: 13px;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.market-implication__item span {
|
||||
display: block;
|
||||
color: rgba(255,255,255,.67);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hotel-model {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 26px;
|
||||
padding: clamp(22px, 3vw, 32px);
|
||||
border: 1px solid rgba(255,255,255,.13);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255,255,255,.06);
|
||||
box-shadow: 0 24px 70px rgba(0,0,0,.14);
|
||||
}
|
||||
.hotel-model__head {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
.hotel-model__head h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
|
||||
.hotel-model__head p { margin: 0; max-width: 820px; color: rgba(255,255,255,.67); }
|
||||
.hotel-model__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.hotel-model__card {
|
||||
min-height: 132px;
|
||||
padding: 17px;
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
border-radius: 18px;
|
||||
background: rgba(3,21,35,.28);
|
||||
}
|
||||
.hotel-model__card strong {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--teal-2);
|
||||
font-size: clamp(21px, 3vw, 29px);
|
||||
line-height: 1;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
.hotel-model__card span { display: block; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.5; }
|
||||
.hotel-model__kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
|
||||
.hotel-model__kpi {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
border-radius: 999px;
|
||||
color: rgba(255,255,255,.63);
|
||||
background: rgba(255,255,255,.045);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.program-menu {
|
||||
margin-top: clamp(34px, 5vw, 54px);
|
||||
padding: clamp(22px, 3vw, 32px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-xl);
|
||||
background: linear-gradient(145deg, #F7FCFC, #FFFFFF);
|
||||
box-shadow: 0 18px 60px rgba(10,37,64,.06);
|
||||
}
|
||||
.program-menu__head { display: grid; gap: 9px; margin-bottom: 20px; }
|
||||
.program-menu__head h3 { margin: 0; font-size: clamp(25px, 3vw, 36px); }
|
||||
.program-menu__head p { margin: 0; max-width: 800px; color: var(--muted); }
|
||||
.program-grid { display: grid; gap: 12px; }
|
||||
.program-card {
|
||||
min-height: 150px;
|
||||
padding: 19px;
|
||||
border: 1px solid rgba(0,196,180,.23);
|
||||
border-radius: 19px;
|
||||
background: var(--white);
|
||||
}
|
||||
.program-card__time {
|
||||
display: inline-flex;
|
||||
margin-bottom: 14px;
|
||||
padding: 6px 9px;
|
||||
border-radius: 999px;
|
||||
color: #007E75;
|
||||
background: rgba(0,196,180,.11);
|
||||
font-size: 11px;
|
||||
font-weight: 780;
|
||||
}
|
||||
.program-card h4 { margin: 0 0 7px; color: var(--navy); font-size: 17px; line-height: 1.2; }
|
||||
.program-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
|
||||
|
||||
.portrait-card {
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(0,196,180,.28);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(145deg, #FFFFFF, #F0FBFA);
|
||||
}
|
||||
.portrait-card__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 15px;
|
||||
color: var(--navy);
|
||||
background: rgba(0,196,180,.14);
|
||||
}
|
||||
.portrait-card__icon svg { width: 24px; height: 24px; }
|
||||
.portrait-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
|
||||
|
||||
.equipment-shell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 10% 20%, rgba(0,196,180,.20), transparent 27%),
|
||||
linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
|
||||
}
|
||||
.equipment-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -10% -160px;
|
||||
height: 320px;
|
||||
background: rgba(0,196,180,.12);
|
||||
filter: blur(100px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.equipment-grid { position: relative; z-index: 1; }
|
||||
.equipment-card {
|
||||
position: relative;
|
||||
min-height: 475px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,.13);
|
||||
border-radius: 26px;
|
||||
background: rgba(255,255,255,.07);
|
||||
box-shadow: 0 24px 70px rgba(0,0,0,.18);
|
||||
}
|
||||
.equipment-card__media { position: relative; height: 230px; overflow: hidden; }
|
||||
.equipment-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,27,47,.86)); }
|
||||
.equipment-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
|
||||
.equipment-card:hover .equipment-card__media img { transform: scale(1.045); }
|
||||
.equipment-card__body { padding: 2px 22px 23px; }
|
||||
.equipment-card__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -26px; position: relative; z-index: 2; }
|
||||
.equipment-card h3 { margin: 0; font-size: 27px; }
|
||||
.equipment-role { max-width: 132px; padding: 7px 10px; border: 1px solid rgba(0,196,180,.28); border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.10); font-size: 11px; font-weight: 790; line-height: 1.2; text-align: center; }
|
||||
.equipment-duration { display: inline-flex; margin: 15px 0 14px; padding: 7px 10px; border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.12); font-size: 12px; font-weight: 750; }
|
||||
.equipment-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; }
|
||||
.equipment-note {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 22px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid rgba(255,255,255,.13);
|
||||
border-radius: 16px;
|
||||
color: rgba(255,255,255,.60);
|
||||
background: rgba(255,255,255,.06);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
position: relative;
|
||||
min-height: 330px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--white);
|
||||
isolation: isolate;
|
||||
box-shadow: 0 20px 60px rgba(10,37,64,.14);
|
||||
}
|
||||
.scenario-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform .7s ease; }
|
||||
.scenario-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(6,27,47,.04) 25%, rgba(6,27,47,.90) 100%); }
|
||||
.scenario-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; z-index: -1; background: var(--teal); transform: scaleX(.22); transform-origin: left; transition: transform .45s ease; }
|
||||
.scenario-card:hover img { transform: scale(1.04); }
|
||||
.scenario-card:hover::after { transform: scaleX(1); }
|
||||
.scenario-card__content { position: absolute; inset: auto 0 0; padding: 24px; }
|
||||
.scenario-card__index { display: block; margin-bottom: 9px; color: var(--teal-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
|
||||
.scenario-card h3 { margin-bottom: 8px; }
|
||||
.scenario-card p { margin: 0; color: rgba(255,255,255,.70); font-size: 13px; }
|
||||
|
||||
.why-layout { display: grid; gap: 30px; align-items: stretch; }
|
||||
.why-visual {
|
||||
position: relative;
|
||||
min-height: 360px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--navy);
|
||||
box-shadow: var(--shadow);
|
||||
isolation: isolate;
|
||||
}
|
||||
.why-visual::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-image: url("assets/asset_85faea2da9e3.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.why-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, rgba(6,27,47,.18), rgba(6,27,47,.88)); }
|
||||
.why-visual__caption { position: absolute; inset: auto 24px 24px; max-width: 410px; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: var(--white); background: rgba(6,27,47,.62); backdrop-filter: blur(14px); }
|
||||
.why-visual__caption strong { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.2; }
|
||||
.why-visual__caption span { color: rgba(255,255,255,.66); font-size: 13px; }
|
||||
.why-list { display: grid; gap: 12px; }
|
||||
.why-item { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
|
||||
.why-item__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--navy); background: var(--ice); }
|
||||
.why-item__icon svg { width: 23px; height: 23px; }
|
||||
.why-item strong { display: block; margin-bottom: 4px; font-size: 16px; }
|
||||
.why-item p { margin: 0; color: var(--muted); font-size: 13px; }
|
||||
|
||||
.cta-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 8% 15%, rgba(0,196,180,.22), transparent 28%),
|
||||
radial-gradient(circle at 92% 88%, rgba(0,196,180,.18), transparent 30%),
|
||||
linear-gradient(135deg, var(--navy), var(--navy-2));
|
||||
color: var(--white);
|
||||
}
|
||||
.cta-section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: .23;
|
||||
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
|
||||
background-size: 52px 52px;
|
||||
mask-image: linear-gradient(to bottom, black, transparent 76%);
|
||||
}
|
||||
.cta-grid { position: relative; display: grid; gap: 34px; align-items: start; }
|
||||
.cta-copy { padding-top: 4px; }
|
||||
.cta-copy h2 { max-width: 660px; }
|
||||
.cta-copy .lead { max-width: 620px; }
|
||||
.cta-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
|
||||
.cta-pill { padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: 12px; }
|
||||
|
||||
.lead-form {
|
||||
padding: clamp(22px, 4vw, 34px);
|
||||
border: 1px solid rgba(255,255,255,.15);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255,255,255,.09);
|
||||
box-shadow: 0 32px 90px rgba(0,0,0,.20);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.form-grid { display: grid; gap: 14px; }
|
||||
.field { display: grid; gap: 7px; }
|
||||
.field label { color: rgba(255,255,255,.74); font-size: 12px; font-weight: 680; }
|
||||
.field input, .field textarea {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255,255,255,.18);
|
||||
border-radius: 14px;
|
||||
outline: none;
|
||||
color: var(--white);
|
||||
background: rgba(4,22,36,.44);
|
||||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||||
}
|
||||
.field input { height: 52px; padding: 0 15px; }
|
||||
.field textarea { min-height: 105px; padding: 13px 15px; resize: vertical; }
|
||||
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.34); }
|
||||
.field input:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,196,180,.13); background: rgba(4,22,36,.62); }
|
||||
.field--full { grid-column: 1 / -1; }
|
||||
.form-consent { margin: 12px 0 16px; color: rgba(255,255,255,.48); font-size: 11px; }
|
||||
.form-submit { width: 100%; border: 0; }
|
||||
.form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; }
|
||||
.form-status.show { display: block; }
|
||||
.form-status.success { color: #BFFBF4; background: rgba(0,196,180,.14); border: 1px solid rgba(0,196,180,.25); }
|
||||
.form-status.error { color: #FFD5D5; background: rgba(255,95,95,.12); border: 1px solid rgba(255,95,95,.24); }
|
||||
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
|
||||
|
||||
.footer { padding: 26px 0; color: rgba(255,255,255,.50); background: #041421; font-size: 12px; }
|
||||
.footer__inner { display: flex; flex-direction: column; gap: 17px; align-items: flex-start; }
|
||||
.footer img { width: 170px; }
|
||||
.footer__right { display: flex; flex-wrap: wrap; gap: 14px 20px; }
|
||||
|
||||
.reveal { opacity: 1; transform: none; }
|
||||
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
|
||||
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
|
||||
.delay-1 { transition-delay: .08s; }
|
||||
.delay-2 { transition-delay: .16s; }
|
||||
.delay-3 { transition-delay: .24s; }
|
||||
|
||||
.scroll-hint { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 11px; }
|
||||
.scroll-hint svg { width: 16px; height: 16px; }
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container { width: min(calc(100% - 48px), var(--container)); }
|
||||
.hero { min-height: 820px; padding-bottom: 60px; }
|
||||
.hero__facts { gap: 12px; }
|
||||
.scroll-cards { grid-auto-columns: minmax(43%, 1fr); margin-right: -24px; }
|
||||
.market-grid { gap: 14px; }
|
||||
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.header { padding: 18px 0; }
|
||||
.header__nav { display: flex; }
|
||||
.hero { min-height: 790px; align-items: center; padding: 150px 0 78px; }
|
||||
.hero::after { background: linear-gradient(90deg, rgba(4,21,35,.95) 0%, rgba(4,21,35,.68) 48%, rgba(4,21,35,.08) 100%); }
|
||||
.section-head--split { grid-template-columns: 1.02fr .78fr; align-items: end; }
|
||||
.section-head--split .lead { justify-self: end; }
|
||||
.benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.portrait-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.equipment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.scroll-cards { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-bottom: 0; }
|
||||
.scroll-hint { display: none; }
|
||||
.market-panel__top { grid-template-columns: 1fr 1.15fr; align-items: end; }
|
||||
.market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.market-implication { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.hotel-model__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.why-layout { grid-template-columns: 1.08fr .92fr; }
|
||||
.cta-grid { grid-template-columns: .95fr 1.05fr; gap: clamp(44px, 6vw, 88px); }
|
||||
.equipment-card { min-height: 510px; }
|
||||
.equipment-card__media { height: 245px; }
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.hero__facts { grid-template-columns: 1fr; max-width: 330px; }
|
||||
.hero-fact { min-height: auto; display: grid; grid-template-columns: minmax(118px, auto) 1fr; align-items: center; gap: 10px; }
|
||||
.hero-fact strong { margin: 0; font-size: 18px; white-space: nowrap; }
|
||||
.btn { width: 100%; }
|
||||
.btn--header { width: auto; }
|
||||
.market-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
.reveal { opacity: 1; transform: none; }
|
||||
.chart-line { stroke-dashoffset: 0; }
|
||||
.chart-dot { opacity: 1; }
|
||||
.chart-bar { transform: scaleY(1); }
|
||||
}
|
||||
|
||||
|
||||
/* final hotel updates */
|
||||
.header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
|
||||
.btn--call{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
|
||||
.btn--call:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38)}
|
||||
.btn--call svg{width:16px;height:16px}
|
||||
.exo-master-logo{display:block!important;height:auto!important;object-fit:contain;object-position:left center;flex:0 0 auto}
|
||||
.brand .exo-master-logo--header,.header .exo-master-logo--header{width:clamp(172px,20vw,232px)!important;max-width:100%}
|
||||
.footer .exo-master-logo--footer{width:clamp(150px,16vw,180px)!important;max-width:min(50vw,180px)!important;height:auto!important;object-fit:contain}
|
||||
.market-glossary{display:grid;gap:8px;margin-top:14px;padding:14px 16px;border:1px solid rgba(10,37,64,.10);border-radius:16px;background:#fff}
|
||||
.market-glossary div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;font-size:12px;line-height:1.45;color:var(--muted)}
|
||||
.market-glossary strong{color:var(--navy);font-weight:820}
|
||||
.equipment-card__top{align-items:center!important;flex-wrap:wrap}
|
||||
.equipment-role{width:150px!important;max-width:150px!important;min-height:34px;display:flex!important;align-items:center;justify-content:center;padding:7px 10px!important;border-radius:12px!important;white-space:normal!important;overflow-wrap:anywhere;flex:0 0 150px;font-size:11px!important;line-height:1.15!important}
|
||||
.equipment-tech{margin:0 0 10px!important;color:#fff!important;font-size:13px!important;font-weight:760;line-height:1.45!important}
|
||||
.program-card{min-height:220px!important}
|
||||
.program-devices{display:grid;gap:10px;margin-top:12px}
|
||||
.program-device{padding-top:10px;border-top:1px solid rgba(10,37,64,.09);display:grid;gap:3px}
|
||||
.program-device:first-child{padding-top:0;border-top:0}
|
||||
.program-device strong{color:var(--navy);font-size:13px;font-weight:800}
|
||||
.program-device span{color:var(--muted);font-size:12px;line-height:1.5}
|
||||
.hotel-model__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
|
||||
@media(max-width:780px){.hotel-model__grid{grid-template-columns:1fr!important}.market-glossary div{grid-template-columns:1fr;gap:2px}}
|
||||
@media(max-width:620px){.header__actions{gap:6px}.btn--call{padding-inline:12px}.btn--call span{display:none}.btn--call svg{width:18px;height:18px}.brand .exo-master-logo--header{width:150px!important}.equipment-role{width:142px!important;max-width:142px!important;flex-basis:142px}}
|
||||
|
||||
|
||||
/* Hotel economics refinements */
|
||||
.exo-econ__benchmark{
|
||||
margin-top:18px;
|
||||
padding:18px 20px;
|
||||
border:1px solid rgba(0,196,180,.28);
|
||||
border-radius:18px;
|
||||
background:linear-gradient(135deg,rgba(0,196,180,.08),rgba(255,255,255,.04));
|
||||
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
|
||||
}
|
||||
.exo-econ__benchmark-label{
|
||||
display:block;
|
||||
margin-bottom:7px;
|
||||
color:var(--teal,#00C4B4);
|
||||
font-size:11px;
|
||||
font-weight:800;
|
||||
letter-spacing:.11em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.exo-econ__benchmark p{
|
||||
margin:0;
|
||||
color:inherit;
|
||||
font-size:14px;
|
||||
line-height:1.55;
|
||||
}
|
||||
.exo-econ__benchmark p strong{
|
||||
color:var(--teal,#00C4B4);
|
||||
font-size:1.08em;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.exo-econ__benchmark b{
|
||||
display:block;
|
||||
margin-top:7px;
|
||||
color:inherit;
|
||||
font-size:12px;
|
||||
line-height:1.45;
|
||||
opacity:.72;
|
||||
}
|
||||
.exo-econ__actions{
|
||||
display:flex;
|
||||
justify-content:flex-start;
|
||||
margin-top:18px;
|
||||
}
|
||||
.exo-econ__consult{
|
||||
min-width:230px;
|
||||
justify-content:center;
|
||||
}
|
||||
.exo-econ__consult svg{
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
@media(max-width:640px){
|
||||
.exo-econ__benchmark{padding:16px}
|
||||
.exo-econ__actions{display:block}
|
||||
.exo-econ__consult{width:100%;min-width:0}
|
||||
}
|
||||
|
||||
|
||||
/* ---- merged style block ---- */
|
||||
|
||||
|
||||
/* ===== EXO economics blocks: Hotel + Fitness ===== */
|
||||
.exo-econ{--ee-navy:#0A2540;--ee-deep:#061B2F;--ee-teal:#00C4B4;--ee-teal-2:#39E0D2;--ee-ice:#EAF9F7;--ee-red:#F0656B;--ee-muted:#60778B;position:relative;overflow:hidden;background:#F4FAFB;color:var(--ee-navy)}
|
||||
.exo-econ::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-260px;top:-270px;background:rgba(0,196,180,.13);filter:blur(18px);pointer-events:none}
|
||||
.exo-econ__head{position:relative;z-index:1;display:grid;gap:14px;margin-bottom:28px;max-width:920px}
|
||||
.exo-econ__eyebrow{display:flex;align-items:center;gap:10px;color:#008F84;font-size:11px;font-weight:850;letter-spacing:.095em;text-transform:uppercase}
|
||||
.exo-econ__eyebrow::before{content:"";width:28px;height:2px;border-radius:3px;background:var(--ee-teal)}
|
||||
.exo-econ__head h2{margin:0;color:var(--ee-navy);font-size:clamp(31px,5vw,58px);line-height:1.02;letter-spacing:-.048em}
|
||||
.exo-econ__head p{max-width:860px;margin:0;color:var(--ee-muted);font-size:clamp(15px,1.55vw,19px);line-height:1.55}
|
||||
.exo-econ__metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
|
||||
.exo-econ__metric{min-width:0;padding:17px 16px;border:1px solid rgba(0,196,180,.26);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 36px rgba(4,31,50,.055)}
|
||||
.exo-econ__metric strong{display:block;color:#00A99A;font-size:clamp(22px,3vw,34px);line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
|
||||
.exo-econ__metric span{display:block;margin-top:7px;color:var(--ee-navy);font-size:12px;font-weight:760;line-height:1.32}
|
||||
.exo-econ__metric small{display:block;margin-top:4px;color:var(--ee-muted);font-size:10px;line-height:1.35}
|
||||
.exo-econ__compare{position:relative;z-index:1;display:grid;gap:14px}
|
||||
.exo-econ__panel{min-width:0;padding:22px;border-radius:25px}
|
||||
.exo-econ__panel--loss{color:#fff;background:radial-gradient(circle at 8% 0%,rgba(240,101,107,.16),transparent 30%),linear-gradient(145deg,var(--ee-deep),var(--ee-navy));box-shadow:0 24px 60px rgba(4,25,41,.16)}
|
||||
.exo-econ__panel--gain{border:1px solid rgba(0,196,180,.34);background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(4,31,50,.075)}
|
||||
.exo-econ__panel-title{display:flex;align-items:center;gap:11px;margin:0 0 17px;font-size:20px;line-height:1.15;letter-spacing:-.025em}
|
||||
.exo-econ__panel-title i{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:17px}
|
||||
.exo-econ__panel--loss .exo-econ__panel-title{color:#fff}.exo-econ__panel--loss .exo-econ__panel-title i{color:#FFD7D9;background:rgba(240,101,107,.16)}
|
||||
.exo-econ__panel--gain .exo-econ__panel-title{color:var(--ee-navy)}.exo-econ__panel--gain .exo-econ__panel-title i{color:#008F84;background:var(--ee-ice)}
|
||||
.exo-econ__list{display:grid;gap:9px}
|
||||
.exo-econ__item{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:13px;border-radius:16px}
|
||||
.exo-econ__panel--loss .exo-econ__item{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045)}
|
||||
.exo-econ__panel--gain .exo-econ__item{border:1px solid rgba(10,37,64,.095);background:linear-gradient(180deg,#fff,#F7FBFB)}
|
||||
.exo-econ__item b{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-size:11px}
|
||||
.exo-econ__panel--loss .exo-econ__item b{color:#FFD7D9;background:rgba(240,101,107,.16)}
|
||||
.exo-econ__panel--gain .exo-econ__item b{color:#008F84;background:var(--ee-ice)}
|
||||
.exo-econ__item strong{display:block;margin:1px 0 4px;font-size:14px;line-height:1.25}
|
||||
.exo-econ__item span{display:block;font-size:11px;line-height:1.43}
|
||||
.exo-econ__panel--loss .exo-econ__item span{color:rgba(255,255,255,.65)}
|
||||
.exo-econ__panel--gain .exo-econ__item span{color:var(--ee-muted)}
|
||||
.exo-econ__bridge{position:relative;z-index:1;margin:14px 0;padding:16px 18px;border-radius:19px;border:1px solid rgba(0,196,180,.28);background:linear-gradient(115deg,rgba(0,196,180,.12),rgba(255,255,255,.94));display:grid;gap:10px}
|
||||
.exo-econ__bridge strong{color:var(--ee-navy);font-size:16px;line-height:1.25}
|
||||
.exo-econ__bridge p{margin:0;color:var(--ee-muted);font-size:11px;line-height:1.5}
|
||||
.exo-econ__ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
|
||||
.exo-econ__op{padding:11px 12px;border-radius:14px;background:#fff;border:1px solid rgba(0,196,180,.22)}
|
||||
.exo-econ__op b{display:block;color:#00A99A;font-size:17px;line-height:1.05}.exo-econ__op span{display:block;margin-top:4px;color:var(--ee-muted);font-size:9px;line-height:1.25}
|
||||
.exo-econ__calc{position:relative;z-index:1;margin-top:14px;padding:22px;border-radius:25px;color:#fff;background:radial-gradient(circle at 90% 0%,rgba(0,196,180,.25),transparent 34%),linear-gradient(135deg,var(--ee-navy),var(--ee-deep));box-shadow:0 25px 70px rgba(4,25,41,.18)}
|
||||
.exo-econ__calc-head{display:grid;gap:6px;margin-bottom:17px}.exo-econ__calc-head span{color:var(--ee-teal-2);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.exo-econ__calc-head h3{margin:0;color:#fff;font-size:22px;line-height:1.15}.exo-econ__calc-head p{margin:0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.45}
|
||||
.exo-econ__calc-grid{display:grid;gap:13px}
|
||||
.exo-econ__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
|
||||
.exo-econ__field{display:grid;gap:6px;min-width:0}.exo-econ__field label{color:rgba(255,255,255,.72);font-size:10px;font-weight:760}.exo-econ__field input{width:100%;min-width:0;height:48px;padding:0 13px;border-radius:13px;border:1px solid rgba(255,255,255,.17);outline:none;color:#fff;background:rgba(255,255,255,.075);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.exo-econ__field input::placeholder{color:rgba(255,255,255,.28)}.exo-econ__field input:focus{border-color:var(--ee-teal);box-shadow:0 0 0 3px rgba(0,196,180,.13)}
|
||||
.exo-econ__results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exo-econ__result{min-width:0;padding:15px;border-radius:16px;border:1px solid rgba(0,196,180,.28);background:rgba(0,196,180,.09)}.exo-econ__result span{display:block;color:rgba(255,255,255,.56);font-size:9px;text-transform:uppercase;letter-spacing:.055em}.exo-econ__result strong{display:block;margin-top:6px;color:var(--ee-teal-2);font-size:clamp(19px,3vw,29px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}.exo-econ__result small{display:block;margin-top:4px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.3}
|
||||
.exo-econ__disclaimer{margin:13px 0 0;color:rgba(255,255,255,.43);font-size:9px;line-height:1.45}
|
||||
@media(min-width:640px){.exo-econ__metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__ops{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
||||
@media(min-width:900px){.exo-econ__compare{grid-template-columns:repeat(2,minmax(0,1fr))}.exo-econ__panel{padding:27px}.exo-econ__calc{padding:28px}.exo-econ__calc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}.exo-econ__results{align-self:stretch}.exo-econ__result{display:flex;flex-direction:column;justify-content:center}}
|
||||
@media(max-width:480px){.exo-econ__head h2{font-size:34px}.exo-econ__metric{padding:15px 13px}.exo-econ__panel{padding:18px}.exo-econ__fields,.exo-econ__results{grid-template-columns:1fr}.exo-econ__result strong{white-space:normal}.exo-econ__ops{grid-template-columns:1fr 1fr}}
|
||||
|
||||
|
||||
/* v6 typography refinement */
|
||||
#formats .section-head h2{font-size:clamp(28px,3.25vw,48px)!important;line-height:1.06!important;letter-spacing:-.025em!important;max-width:760px}
|
||||
@media(max-width:760px){#formats .section-head h2{font-size:clamp(26px,8vw,36px)!important;line-height:1.08!important}}
|
||||
|
||||
|
||||
/* v8: visual QA + anchor/nav refinement */
|
||||
section[id]{scroll-margin-top:96px}
|
||||
.cta-section .lead{color:rgba(255,255,255,.76)}
|
||||
@media(max-width:620px){
|
||||
section[id]{scroll-margin-top:82px}
|
||||
h1{font-size:clamp(36px,10vw,40px);line-height:1.01;letter-spacing:-.045em}
|
||||
h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06;letter-spacing:-.035em}
|
||||
.hero__subtitle{font-size:18px;line-height:1.46}
|
||||
#formats .section-head h2{font-size:clamp(29px,8.3vw,33px)!important;line-height:1.06!important;letter-spacing:-.035em!important}
|
||||
.equipment-shell .section-head h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06}
|
||||
.exo-econ__head h2{font-size:32px;line-height:1.04;letter-spacing:-.038em}
|
||||
.cta-copy h2{font-size:34px;line-height:1.04;letter-spacing:-.035em}
|
||||
.lead{font-size:17px;line-height:1.52}
|
||||
}
|
||||
@media(max-width:380px){
|
||||
.brand .exo-master-logo--header{width:132px!important}
|
||||
.btn--header{padding-inline:13px;font-size:12px}
|
||||
.header__actions{gap:5px}
|
||||
.hero-fact{grid-template-columns:minmax(105px,auto) 1fr}
|
||||
.hero-fact strong{font-size:17px}
|
||||
}
|
||||
|
||||
|
||||
/* === EXO callback modal === */
|
||||
body.exo-callback-open{overflow:hidden}
|
||||
.exo-callback{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}
|
||||
.exo-callback.is-open{display:flex}
|
||||
.exo-callback__backdrop{position:absolute;inset:0;background:rgba(3,18,31,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
||||
.exo-callback__dialog{position:relative;width:min(100%,460px);max-height:calc(100svh - 32px);overflow:auto;padding:30px;border:1px solid rgba(10,37,64,.10);border-radius:26px;background:#fff;color:#0A2540;box-shadow:0 34px 100px rgba(2,20,34,.30)}
|
||||
.exo-callback__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(10,37,64,.10);border-radius:50%;background:#fff;color:#61798B;font-size:24px;line-height:1;cursor:pointer;transition:.2s ease}
|
||||
.exo-callback__close:hover{color:#0A2540;border-color:rgba(10,37,64,.25);transform:rotate(3deg)}
|
||||
.exo-callback__eyebrow{margin:0 46px 10px 0;color:#00AFA2;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
|
||||
.exo-callback__dialog h2{margin:0 46px 10px 0;font-size:clamp(27px,5vw,34px);line-height:1.04;letter-spacing:-.035em}
|
||||
.exo-callback__intro{margin:0 0 22px;color:#61798B;font-size:14px;line-height:1.55}
|
||||
.exo-callback__intro a{color:#0A2540;font-weight:800;text-decoration:underline;text-decoration-color:rgba(0,196,180,.45);text-underline-offset:3px}
|
||||
.exo-callback__field{display:grid;gap:7px;margin-bottom:14px}
|
||||
.exo-callback__field label{font-size:12px;font-weight:800;color:#0A2540}
|
||||
.exo-callback__field input{width:100%;height:50px;padding:0 14px;border:1px solid rgba(10,37,64,.14);border-radius:13px;background:#F7FAFB;color:#0A2540;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
|
||||
.exo-callback__field input::placeholder{color:#91A3AF}
|
||||
.exo-callback__field input:focus{background:#fff;border-color:#00C4B4;box-shadow:0 0 0 4px rgba(0,196,180,.10)}
|
||||
.exo-callback__consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 16px;color:#7B8D99;font-size:10px;line-height:1.45;cursor:pointer}
|
||||
.exo-callback__consent input{width:15px;height:15px;margin:1px 0 0;accent-color:#00C4B4;flex:0 0 auto}
|
||||
.exo-callback__submit{width:100%;min-height:52px;border:0;border-radius:999px;background:#00C4B4;color:#061B2F;font:800 14px/1 Inter,Manrope,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(0,196,180,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
|
||||
.exo-callback__submit:hover{transform:translateY(-1px);background:#3BE4D6;box-shadow:0 16px 36px rgba(0,196,180,.28)}
|
||||
.exo-callback__submit:disabled{opacity:.62;cursor:wait;transform:none}
|
||||
.exo-callback__status{display:none;margin:14px 0 0;padding:11px 12px;border-radius:11px;font-size:12px;line-height:1.45}
|
||||
.exo-callback__status.is-show{display:block}
|
||||
.exo-callback__status.is-success{color:#075B53;background:#E4FAF7;border:1px solid rgba(0,196,180,.22)}
|
||||
.exo-callback__status.is-error{color:#8C2E2E;background:#FFF0F0;border:1px solid rgba(204,69,69,.18)}
|
||||
@media(max-width:520px){
|
||||
.exo-callback{padding:12px}
|
||||
.exo-callback__dialog{padding:24px 18px 20px;border-radius:22px}
|
||||
.exo-callback__dialog h2{font-size:27px}
|
||||
.exo-callback__intro{font-size:13px}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user