kalugin66/hotel777
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновление проекта

Browse Source
This commit is contained in:
kalugin66
2026-05-01 16:45:01 +05:00
parent 5c074a8edf
commit fd8151f7a5
3 changed files with 216 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
public/index.html
View File

@@ -4,74 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel 777 | Отдых в Абхазии</title>
<style>
/* --- БАЗОВЫЕ СТИЛИ И ПЕРЕМЕННЫЕ --- */
:root {
--primary: #005f73;
--secondary: #0a9396;
--light: #e9d8a6;
--dark: #001219;
--bg: #f8f9fa;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--bg); color: var(--dark); line-height: 1.6; overflow-x: hidden; }
/* --- АНИМАЦИИ --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
/* --- ШАПКА И HERO СЕКЦИЯ --- */
header { background: rgba(0, 18, 25, 0.9); color: white; padding: 1rem 5%; position: fixed; width: 100%; z-index: 100; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(5px); }
.logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; display: flex; align-items: center; gap: 20px;}
/* Селектор языка */
.lang-switch { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.5); padding: 5px 10px; border-radius: 5px; cursor: pointer; outline: none; font-size: 0.9rem; }
.lang-switch option { background: var(--dark); color: white; }
nav { display: flex; gap: 20px; align-items: center; }
nav a { color: white; text-decoration: none; transition: color 0.3s; }
nav a:hover { color: var(--light); }
.hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img/h777.webp') center/cover; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 0 20px; }
.hero h1 { font-size: 4rem; margin-bottom: 10px; text-transform: uppercase; }
.hero p { font-size: 1.5rem; margin-bottom: 30px; }
.btn { padding: 12px 30px; background: var(--secondary); color: white; text-decoration: none; border-radius: 25px; font-weight: bold; transition: background 0.3s, transform 0.3s; border: none; cursor: pointer; }
.btn:hover { background: var(--primary); transform: scale(1.05); }
/* --- СЕКЦИИ КОНТЕНТА --- */
section { padding: 5rem 5%; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: var(--primary); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; }
.about-img { width: 100%; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s; }
.about-img:hover { transform: translateY(-10px); }
.signpost-img { max-height: 500px; width: auto; display: block; margin: 0 auto; }
/* --- ФОРМА И 152-ФЗ --- */
.booking-form { max-width: 600px; margin: 0 auto; background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #555; }
.checkbox-group input { width: auto; margin-top: 4px; }
/* --- КУКИ УВЕДОМЛЕНИЕ --- */
.cookie-banner { position: fixed; bottom: -100px; left: 0; width: 100%; background: var(--dark); color: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; transition: bottom 0.5s ease-in-out; z-index: 1000; box-shadow: 0 -5px 10px rgba(0,0,0,0.2); }
.cookie-banner.show { bottom: 0; }
.cookie-btn { background: var(--light); color: var(--dark); border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
/* --- ФУТЕР --- */
footer { background: var(--dark); color: white; text-align: center; padding: 2rem 5%; margin-top: 2rem; }
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
HOTEL 777
<select class="lang-switch" id="langSwitch" onchange="changeLanguage(this.value)">
<select class="lang-switch" id="langSwitch">
<option value="ru">Русский</option>
<option value="ab">Аҧсуа</option>
<option value="en">English</option>
@@ -79,7 +19,8 @@
</div>
<nav>
<a href="#about" data-i18n="nav_about">О нас</a>
<a href="#location" data-i18n="nav_location">Расположение</a>
<a href="#food" data-i18n="nav_food">Кухня</a>
<a href="#location" data-i18n="nav_location">Где мы</a>
<a href="#booking" data-i18n="nav_booking">Бронь</a>
</nav>
</header>
@@ -95,181 +36,75 @@
<div class="about-grid">
<div class="animate delay-1">
<h3 data-i18n="about_subtitle">Бескрайние пляжи Гудауты</h3>
<p data-i18n="about_text">Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу. Наслаждайтесь шумом прибоя и ласковым абхазским солнцем вдали от городской суеты.</p>
<p data-i18n="about_text">Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.</p>
</div>
<div>
<img src="img/XXXL.webp" alt="Пляж" class="about-img animate delay-2">
<div class="about-image-wrapper animate delay-2">
<img src="img/XXXL.webp" alt="Пляж" class="about-img">
</div>
</div>
</section>
<section id="location" style="background: white;">
<section id="food" class="white-bg">
<h2 class="section-title animate" data-i18n="food_title">Вкус Абхазии</h2>
<div class="about-grid">
<div class="about-image-wrapper animate">
<img src="img/food.webp" alt="Абхазская кухня" class="about-img">
</div>
<div class="animate delay-1">
<h3 data-i18n="food_subtitle">Домашняя кухня из местных продуктов</h3>
<p data-i18n="food_text">Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.</p>
</div>
</div>
</section>
<section id="location">
<h2 class="section-title animate" data-i18n="loc_title">Удобное расположение</h2>
<div class="about-grid">
<div>
<img src="img/znak.webp" alt="Указатель" class="about-img signpost-img animate delay-1" style="box-shadow:none; border-radius:0;">
<div class="animate delay-1">
<img src="img/znak.webp" alt="Указатель" class="signpost-img">
</div>
<div class="animate delay-2">
<h3 data-i18n="loc_subtitle">Все красоты Абхазии рядом</h3>
<p data-i18n="loc_address"><strong>Наш адрес:</strong> Гудаутский район, село Мгудзырхуа, Набережная улица, 1.</p>
<br>
<ul style="list-style-type: none;">
<li data-i18n="loc_dist1">🚗 Гудаута — 10 км</li>
<li data-i18n="loc_dist2">🚗 Лыхны — 15 км</li>
<li data-i18n="loc_dist3">🚗 Новый Афон — 25 км</li>
<li data-i18n="loc_dist4">🚗 Сухум — 51 км</li>
<p data-i18n="loc_address"><strong>Адрес:</strong> Мгудзырхуа, Набережная улица, 1.</p>
<ul class="dist-list">
<li>🚗 Гудаута — 10 км</li>
<li>🚗 Новый Афон — 25 км</li>
<li>🚗 Сухум — 51 км</li>
</ul>
<p style="margin-top: 15px;" data-i18n="loc_exc">Отправляйтесь на экскурсии прямо из нашего отеля!</p>
</div>
</div>
</section>
<section id="booking">
<section id="booking" class="white-bg">
<h2 class="section-title animate" data-i18n="book_title">Забронировать отдых</h2>
<div class="booking-form animate delay-1">
<form action="#" method="POST" id="bookingForm">
<form id="bookingForm">
<div class="form-group">
<label for="name" data-i18n="label_name">Ваше имя</label>
<input type="text" id="name" required placeholder="Иван Иванов" data-i18n-ph="ph_name">
<label data-i18n="label_name">Ваше имя</label>
<input type="text" id="name" required data-i18n-ph="ph_name">
</div>
<div class="form-group">
<label for="phone" data-i18n="label_phone">Номер телефона</label>
<label data-i18n="label_phone">Номер телефона</label>
<input type="tel" id="phone" required placeholder="+7 (999) 000-00-00">
</div>
<div class="checkbox-group">
<input type="checkbox" id="fz152" required>
<label for="fz152" data-i18n="fz152">
Я даю согласие на обработку моих персональных данных в соответствии с требованиями <a href="#" style="color:var(--primary);">Федерального закона от 27.07.2006 г. № 152-ФЗ «О персональных данных»</a>.
</label>
<label for="fz152" data-i18n="fz152">Согласие на обработку данных (152-ФЗ)</label>
</div>
<button type="submit" class="btn" style="width: 100%; margin-top: 20px;" data-i18n="book_btn">Отправить заявку</button>
<button type="submit" class="btn full-width" data-i18n="book_btn">Отправить заявку</button>
</form>
</div>
</section>
<footer>
<p data-i18n="footer_text">&copy; 2026 Hotel 777. Абхазия, Мгудзырхуа. Все права защищены.</p>
<p data-i18n="footer_text">&copy; 2026 Hotel 777. Абхазия, Мгудзырхуа.</p>
</footer>
<div class="cookie-banner" id="cookieBanner">
<p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта и аналитики. Продолжая использовать сайт, вы соглашаетесь с нашей политикой использования cookie.</p>
<p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта.</p>
<button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
</div>
<script>
// --- СЛОВАРЬ ПЕРЕВОДОВ ---
const translations = {
ru: {
nav_about: "О нас", nav_location: "Расположение", nav_booking: "Бронь",
hero_title: "Добро пожаловать", hero_subtitle: "Ваш идеальный отдых на берегу Черного моря", hero_btn: "Забронировать номер",
about_title: "Море в шаговой доступности", about_subtitle: "Бескрайние пляжи Гудауты",
about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу. Наслаждайтесь шумом прибоя и ласковым абхазским солнцем вдали от городской суеты.",
loc_title: "Удобное расположение", loc_subtitle: "Все красоты Абхазии рядом",
loc_address: "<strong>Наш адрес:</strong> Гудаутский район, село Мгудзырхуа, Набережная улица, 1.",
loc_dist1: "🚗 Гудаута — 10 км", loc_dist2: "🚗 Лыхны — 15 км", loc_dist3: "🚗 Новый Афон — 25 км", loc_dist4: "🚗 Сухум — 51 км",
loc_exc: "Отправляйтесь на экскурсии прямо из нашего отеля!",
book_title: "Забронировать отдых", label_name: "Ваше имя", label_phone: "Номер телефона", ph_name: "Иван Иванов",
fz152: "Я даю согласие на обработку моих персональных данных в соответствии с требованиями <a href='#' style='color:var(--primary);'>Федерального закона от 27.07.2006 г. № 152-ФЗ «О персональных данных»</a>.",
book_btn: "Отправить заявку", footer_text: "&copy; 2026 Hotel 777. Абхазия, Мгудзырхуа. Все права защищены.",
cookie_text: "Мы используем файлы cookie для улучшения работы сайта и аналитики. Продолжая использовать сайт, вы соглашаетесь с нашей политикой.",
cookie_btn: "Согласен", alert_msg: "Спасибо! Заявка отправлена."
},
en: {
nav_about: "About Us", nav_location: "Location", nav_booking: "Booking",
hero_title: "Welcome", hero_subtitle: "Your perfect holiday on the Black Sea coast", hero_btn: "Book a room",
about_title: "The sea is just steps away", about_subtitle: "Endless beaches of Gudauta",
about_text: "Our hotel is located in the picturesque village of Mgudzyrkhua. We offer comfortable rooms and direct access to a wide, clean pebble and sand beach. Enjoy the sound of the surf and the gentle Abkhazian sun away from the city bustle.",
loc_title: "Convenient location", loc_subtitle: "All the beauties of Abkhazia are nearby",
loc_address: "<strong>Our address:</strong> Gudauta district, Mgudzyrkhua village, Naberezhnaya street, 1.",
loc_dist1: "🚗 Gudauta — 10 km", loc_dist2: "🚗 Lykhny — 15 km", loc_dist3: "🚗 New Athos — 25 km", loc_dist4: "🚗 Sukhum — 51 km",
loc_exc: "Go on excursions right from our hotel!",
book_title: "Book your holiday", label_name: "Your name", label_phone: "Phone number", ph_name: "John Doe",
fz152: "I consent to the processing of my personal data in accordance with <a href='#' style='color:var(--primary);'>Federal Law No. 152-FZ</a>.",
book_btn: "Send request", footer_text: "&copy; 2026 Hotel 777. Abkhazia, Mgudzyrkhua. All rights reserved.",
cookie_text: "We use cookies to improve site performance and analytics. By continuing to use the site, you agree to our cookie policy.",
cookie_btn: "I agree", alert_msg: "Thank you! Your request has been sent."
},
ab: {
nav_about: "Ҳазкы", nav_location: "Аҭыҧ", nav_booking: "Аанкылара",
hero_title: "Бзиала шәаабеит", hero_subtitle: "Амшын Еиқәа аԥшаҳәаҿы ишәзалыршаз адырра", hero_btn: "Ауада аанкылара",
about_title: "Амшын азааигәара", about_subtitle: "Гәдоуҭа аԥшаҳәақәа",
about_text: "Ҳасасааирҭа шьаҭакәуп Мгәыӡырхәа ақыҭаҿы. Ишәыдаҳгалоит ауада бзиақәа, амшын ахь анеирҭа мариа. Ақалақь ахылаԥшра аҟынтә шәхы иақәиҭтәны амшын аԥшӡара шәзырхәыц.",
loc_title: "Иманшәалоу аҭыҧ", loc_subtitle: "Аԥсны аԥшӡарақәа зегьы азааигәара иҟоуп",
loc_address: "<strong>Ҳадрес:</strong> Гәдоуҭа араион, Мгәыӡырхәа ақыҭа, Набережная амҩа, 1.",
loc_dist1: "🚗 Гәдоуҭа — 10 км", loc_dist2: "🚗 Лыхны — 15 км", loc_dist3: "🚗 Афон Ҿыц — 25 км", loc_dist4: "🚗 Аҟәа — 51 км",
loc_exc: "Аекскурсиақәа рыхь ҳасасааирҭа аҟынтә шәца!",
book_title: "Адырра аанкылара", label_name: "Шәхьӡ", label_phone: "Ателефон аномер", ph_name: "Иван Иванов",
fz152: "Сара сықәшаҳаҭуп хаҭала сдыррақәа рхархәаразы <a href='#' style='color:var(--primary);'>Азакәан 152-ФЗ</a> инақәыршәаны.",
book_btn: "Азҳәара адәықәҵара", footer_text: "&copy; 2026 Hotel 777. Аԥсны, Мгәыӡырхәа. Азинқәа зегьы хьчаруп.",
cookie_text: "Асаит ахархәара аус аиӷьтәразы cookie ахархәара ауп. Асаит ахархәара шәацҵозар, уи шәара шәақәшаҳаҭуп.",
cookie_btn: "Сықәшаҳаҭуп", alert_msg: "Ишәҭабуп! Азҳәара дәықәҵоуп."
}
};
// --- ЛОГИКА СМЕНЫ ЯЗЫКА ---
let currentLang = localStorage.getItem('siteLang') || 'ru';
document.getElementById('langSwitch').value = currentLang;
function changeLanguage(lang) {
currentLang = lang;
localStorage.setItem('siteLang', lang); // Сохраняем выбор в браузере
// Перевод текста
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
if (translations[lang][key]) {
element.innerHTML = translations[lang][key];
}
});
// Перевод плейсхолдеров
document.querySelectorAll('[data-i18n-ph]').forEach(element => {
const key = element.getAttribute('data-i18n-ph');
if (translations[lang][key]) {
element.setAttribute('placeholder', translations[lang][key]);
}
});
document.documentElement.lang = lang; // Обновляем атрибут html
}
// Обработка формы с учетом языка
document.getElementById('bookingForm').addEventListener('submit', function(e) {
e.preventDefault();
alert(translations[currentLang].alert_msg);
});
// Запуск перевода при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
changeLanguage(currentLang);
});
// --- ЛОГИКА COOKIE И АНИМАЦИИ ---
document.addEventListener("DOMContentLoaded", () => {
const banner = document.getElementById('cookieBanner');
if (!localStorage.getItem('cookiesAccepted')) {
setTimeout(() => { banner.classList.add('show'); }, 1000);
}
});
function acceptCookies() {
localStorage.setItem('cookiesAccepted', 'true');
document.getElementById('cookieBanner').classList.remove('show');
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate').forEach(el => {
el.style.animationPlayState = 'paused';
observer.observe(el);
});
</script>
<script src="scripts.js"></script>
</body>
</html>

75
public/scripts.js Normal file
View File

@@ -0,0 +1,75 @@
const translations = {
ru: {
nav_about: "О нас", nav_food: "Кухня", nav_location: "Где мы", nav_booking: "Бронь",
hero_title: "Добро пожаловать", hero_subtitle: "Ваш идеальный отдых на берегу Черного моря", hero_btn: "Забронировать номер",
about_title: "Море в шаговой доступности", about_subtitle: "Бескрайние пляжи Гудауты", about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к морю.",
food_title: "Вкус Абхазии", food_subtitle: "Домашняя кухня из местных продуктов", food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино.",
loc_title: "Удобное расположение", book_title: "Забронировать отдых", label_name: "Ваше имя", label_phone: "Номер телефона", ph_name: "Иван Иванов",
fz152: "Согласие на обработку данных (152-ФЗ)", book_btn: "Отправить заявку", footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа.",
cookie_text: "Мы используем файлы cookie для улучшения работы сайта.", cookie_btn: "Согласен", alert_msg: "Спасибо! Ваша заявка принята."
},
en: {
nav_about: "About", nav_food: "Kitchen", nav_location: "Location", nav_booking: "Booking",
hero_title: "Welcome", hero_subtitle: "Your perfect vacation on the Black Sea", hero_btn: "Book a room",
about_title: "Sea at your doorstep", food_title: "Taste of Abkhazia", food_subtitle: "Local home cooking",
alert_msg: "Thank you! Your request has been received."
},
ab: {
nav_about: "Ҳазкы", nav_food: "Афатә", nav_location: "Аҭыԥ", nav_booking: "Аанкылара",
hero_title: "Бзиала шәаабеит", hero_subtitle: "Амшын аԥшаҳәаҿы адырра", hero_btn: "Ауада аанкылара",
food_title: "Аԥсны аҳамҭа", alert_msg: "Ишәҭабуп! Азҳәара дәықәҵоуп."
}
};
document.addEventListener("DOMContentLoaded", () => {
// Прогрессивная загрузка фона
const hero = document.querySelector('.hero');
const imgHD = new Image();
imgHD.src = 'img/h777.webp';
imgHD.onload = () => { hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${imgHD.src}')`; };
// Локализация
const langSelect = document.getElementById('langSwitch');
let currentLang = localStorage.getItem('siteLang') || 'ru';
const updateText = (lang) => {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (translations[lang][key]) el.innerHTML = translations[lang][key];
});
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
const key = el.getAttribute('data-i18n-ph');
if (translations[lang][key]) el.placeholder = translations[lang][key];
});
localStorage.setItem('siteLang', lang);
};
langSelect.value = currentLang;
updateText(currentLang);
langSelect.onchange = (e) => updateText(e.target.value);
// Cookie
if (!localStorage.getItem('cookiesAccepted')) {
setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
}
// Форма
document.getElementById('bookingForm').onsubmit = (e) => {
e.preventDefault();
alert(translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
};
// Анимации при скролле
const obs = new IntersectionObserver(entries => {
entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
});
document.querySelectorAll('.animate').forEach(el => {
el.style.animationPlayState = 'paused';
obs.observe(el);
});
});
function acceptCookies() {
localStorage.setItem('cookiesAccepted', 'true');
document.getElementById('cookieBanner').classList.remove('show');
}

103
public/style.css Normal file
View File

@@ -0,0 +1,103 @@
:root {
--primary: #005f73;
--secondary: #0a9396;
--light: #e9d8a6;
--dark: #001219;
--bg: #f8f9fa;
--white: #ffffff;
--input-bg: #f0f4f5;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; }
html { font-size: 16px; scroll-behavior: smooth; }
@media (min-width: 2000px) { html { font-size: 22px; } }
body { background: var(--bg); color: var(--dark); line-height: 1.6; }
/* ШАПКА */
header {
background: rgba(0, 18, 25, 0.95);
color: var(--white);
padding: 1rem 5%;
position: fixed;
width: 100%;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
box-shadow: 0 2px 15px rgba(0,0,0,0.2);
}
.lang-switch {
background: rgba(255,255,255,0.1);
color: var(--white);
border: 1px solid rgba(255,255,255,0.3);
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
outline: none;
}
.lang-switch option { background: var(--dark); color: var(--white); }
nav a { color: var(--white); text-decoration: none; margin-left: clamp(10px, 2vw, 20px); font-weight: 500; transition: 0.3s; font-size: 0.9rem; }
nav a:hover { color: var(--secondary); }
/* HERO */
.hero {
height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; color: var(--white); padding: 0 20px;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/h777-tiny.webp') center/cover;
}
.hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; }
/* СЕКЦИИ */
section { padding: 6rem 10%; }
.white-bg { background: var(--white); }
.section-title { font-size: clamp(2rem, 5vw, 3rem); color: var(--primary); margin-bottom: 3.5rem; text-align: center; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--secondary); margin: 15px auto; border-radius: 2px; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 992px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.about-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.about-image-wrapper:hover .about-img { transform: scale(1.05); }
.signpost-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* ФОРМА */
.booking-form {
max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
border-radius: 30px; box-shadow: 0 30px 60px rgba(0,18,25,0.1); border: 1px solid rgba(0,0,0,0.05);
}
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); }
.form-group input {
width: 100%; padding: 14px; border: 2px solid transparent;
background: var(--input-bg); border-radius: 12px; transition: 0.3s;
}
.form-group input:focus { outline: none; border-color: var(--secondary); background: var(--white); }
.btn {
display: inline-block; padding: 16px 30px; background: var(--secondary);
color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s;
}
.btn:hover { background: var(--primary); transform: translateY(-3px); }
.full-width { width: 100%; }
/* COOKIE & ANIMATIONS */
.cookie-banner {
position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px;
background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px; transition: 0.6s; z-index: 1000;
}
.cookie-banner.show { bottom: 20px; }
.cookie-btn { background: var(--light); border: none; padding: 8px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: center; padding: 3rem; }