Улучшение коÐда мобильного меню
This commit is contained in:
Web-serfer
parent
4883a52b88
commit
d5286ab980
9 changed files with 800 additions and 580 deletions
|
|
@ -1,48 +1,35 @@
|
||||||
---
|
---
|
||||||
import Button from '@components/base/Button.astro';
|
import Button from '@components/base/Button.astro';
|
||||||
|
|
||||||
// Текстовые константы для удобного редактирования
|
|
||||||
const badgeText = "ЗАЩИТА ПРАВ ВОДИТЕЛЕЙ В СУРГУТЕ";
|
const badgeText = "ЗАЩИТА ПРАВ ВОДИТЕЛЕЙ В СУРГУТЕ";
|
||||||
const titleWhite = "Защитите свои права";
|
const titleWhite = "Защитите свои права";
|
||||||
const titleGold = "и водительское удостоверение";
|
const titleGold = "и водительское удостоверение";
|
||||||
const description = "Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры.";
|
const description = "Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры.";
|
||||||
|
|
||||||
const btnPrimary = "Бесплатная консультация";
|
const btnPrimary = "Бесплатная консультация";
|
||||||
const btnSecondary = "Наши услуги";
|
const btnSecondary = "Наши услуги";
|
||||||
|
|
||||||
// Пути к изображениям (замените на свои локальные файлы в папке public/ или src/assets/)
|
|
||||||
// Для демо я использую плейсхолдеры
|
|
||||||
const bgImageUrl = "/images/home/bg_hero.png";
|
const bgImageUrl = "/images/home/bg_hero.png";
|
||||||
const lawyerImageUrl = "/images/home/heroImg.jpg";
|
const lawyerImageUrl = "/images/home/heroImg.jpg";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<!-- Оверлей для синего оттенка фона -->
|
|
||||||
<div class="hero-overlay"></div>
|
<div class="hero-overlay"></div>
|
||||||
|
|
||||||
<div class="site-container hero-grid">
|
<div class="site-container hero-grid">
|
||||||
|
|
||||||
<!-- Левая колонка: Текст -->
|
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<!-- Верхняя плашка -->
|
|
||||||
<div class="badge">
|
<div class="badge">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<span class="status-dot"></span>
|
||||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
||||||
</svg>
|
|
||||||
{badgeText}
|
{badgeText}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Заголовок -->
|
|
||||||
<h1 class="hero-title">
|
<h1 class="hero-title">
|
||||||
<span class="text-white">{titleWhite}</span>
|
<span class="text-white">{titleWhite}</span>
|
||||||
<br />
|
<br />
|
||||||
<span class="text-gold">{titleGold}</span>
|
<span class="text-gold">{titleGold}</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<!-- Описание -->
|
|
||||||
<p class="hero-description">{description}</p>
|
<p class="hero-description">{description}</p>
|
||||||
|
|
||||||
<!-- Кнопки -->
|
|
||||||
<div class="hero-actions">
|
<div class="hero-actions">
|
||||||
<Button variant="gold" size="lg" id="consultation-btn" data-modal-target="consultation-modal">
|
<Button variant="gold" size="lg" id="consultation-btn" data-modal-target="consultation-modal">
|
||||||
{btnPrimary}
|
{btnPrimary}
|
||||||
|
|
@ -51,275 +38,139 @@ const lawyerImageUrl = "/images/home/heroImg.jpg";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Правая колонка: Изображение -->
|
|
||||||
<div class="hero-image-wrapper">
|
<div class="hero-image-wrapper">
|
||||||
|
|
||||||
<!-- Композиция с фото -->
|
|
||||||
<div class="image-composition">
|
<div class="image-composition">
|
||||||
<img src={lawyerImageUrl} alt="Юрист" class="main-image" />
|
<img src={lawyerImageUrl} alt="Юрист" class="main-image" />
|
||||||
|
|
||||||
<!-- Плавающая плашка с опытом -->
|
|
||||||
<div class="experience-badge">
|
<div class="experience-badge">
|
||||||
<span class="exp-number">20+</span>
|
<span class="exp-number">20+</span>
|
||||||
<span class="exp-text">ЛЕТ ОПЫТА В ХМАО</span>
|
<span class="exp-text">ЛЕТ ОПЫТА В ХМАО</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
|
<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
|
||||||
/* Основная секция с фоном */
|
|
||||||
.hero-section {
|
.hero-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 85vh; /* Высота на весь экран или минимум 85% */
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-image: var(--bgImageUrl);
|
background-image: var(--bgImageUrl);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
font-family: system-ui, -apple-system, sans-serif;
|
|
||||||
overflow: hidden; /* Чтобы декоративные элементы не вылазили */
|
/* ГЛАВНОЕ ИСПРАВЛЕНИЕ GAP */
|
||||||
|
margin: 0 !important;
|
||||||
|
padding-top: 80px; /* Соответствует высоте Header на десктопе */
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Темно-синий оверлей поверх картинки */
|
|
||||||
.hero-overlay {
|
.hero-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0; left: 0; width: 100%; height: 100%;
|
||||||
left: 0;
|
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
/* Градиент от плотного синего к чуть прозрачному */
|
|
||||||
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.85) 50%, rgba(10, 37, 64, 0.6) 100%);
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Сетка для контента Hero */
|
|
||||||
.hero-grid {
|
.hero-grid {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2; /* Поверх оверлея */
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4rem;
|
gap: 3rem;
|
||||||
padding: 2rem;
|
padding-bottom: 4rem;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Левая часть (Текст) --- */
|
.hero-content { flex: 1.2; max-width: 700px; }
|
||||||
.hero-content {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 650px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Плашка сверху (Badge) */
|
|
||||||
.badge {
|
.badge {
|
||||||
display: inline-flex;
|
display: inline-flex; align-items: center; gap: 0.6rem;
|
||||||
align-items: center;
|
background-color: rgba(234, 194, 110, 0.15);
|
||||||
gap: 0.5rem;
|
border: 1px solid rgba(234, 194, 110, 0.3);
|
||||||
background-color: rgba(209, 176, 107, 0.15); /* Прозрачный золотой фон */
|
color: #eac26e; padding: 0.5rem 1rem; border-radius: 6px;
|
||||||
border: 1px solid rgba(209, 176, 107, 0.3);
|
font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 2.5rem;
|
||||||
color: #d1b06b;
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Заголовок */
|
/* Мерцающая точка "На связи" */
|
||||||
.hero-title {
|
.status-dot {
|
||||||
font-size: clamp(2.5rem, 4vw, 4rem); /* Адаптивный размер шрифта */
|
width: 10px;
|
||||||
line-height: 1.1;
|
height: 10px;
|
||||||
margin: 0 0 1.5rem 0;
|
background: #22c55e;
|
||||||
font-weight: 800;
|
border-radius: 50%;
|
||||||
letter-spacing: -1px;
|
animation: pulse 2s ease-in-out infinite;
|
||||||
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-white {
|
@keyframes pulse {
|
||||||
color: #ffffff;
|
0% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(0.95);
|
||||||
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gold {
|
.hero-title { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.15; margin: 0 0 2rem 0; font-weight: 800; }
|
||||||
color: #e2c07b; /* Золотистый/желтый цвет из макета */
|
.text-white { color: #ffffff; }
|
||||||
}
|
.text-gold { color: #eac26e; }
|
||||||
|
|
||||||
/* Описание */
|
.hero-description { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; line-height: 1.6; margin-bottom: 3.5rem; max-width: 580px; }
|
||||||
.hero-description {
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
font-size: 1.05rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
max-width: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Блок кнопок */
|
.hero-actions { display: flex; gap: 1.5rem; align-items: center; }
|
||||||
.hero-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(180deg, #eac26e 0%, #ce9f40 100%);
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
box-shadow: 0 4px 15px rgba(206, 159, 64, 0.4);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background-color: rgba(255, 255, 255, 0.08); /* Полупрозрачный синий/белый */
|
display: inline-flex; padding: 1rem 2rem; background-color: rgba(255, 255, 255, 0.05);
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(10px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: #ffffff;
|
border-radius: 6px; font-weight: 600; text-decoration: none; transition: 0.3s;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-secondary:hover {
|
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
|
||||||
background-color: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Правая часть (Картинка) --- */
|
.hero-image-wrapper { flex: 1; display: flex; justify-content: flex-end; position: relative; }
|
||||||
.hero-image-wrapper {
|
.image-composition { position: relative; width: 100%; max-width: 480px; }
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Обертка для фото и белой подложки */
|
|
||||||
.image-composition {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 450px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Имитация повернутой белой карточки на заднем фоне */
|
|
||||||
.image-composition::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -15px;
|
|
||||||
left: 25px;
|
|
||||||
right: -25px;
|
|
||||||
bottom: 15px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 12px;
|
|
||||||
transform: rotate(4deg);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Основное фото */
|
|
||||||
.main-image {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 6px solid #ffffff; /* Белая рамка */
|
|
||||||
filter: grayscale(100%); /* Делаем фото черно-белым, как на макете */
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Плашка "15+ лет" */
|
|
||||||
.experience-badge {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
left: -40px; /* Сдвигаем влево за пределы фото */
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 1.2rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
|
||||||
z-index: 3;
|
|
||||||
min-width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-number {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 900;
|
|
||||||
color: #1e3050; /* Темно-синий */
|
|
||||||
line-height: 1;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exp-text {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #6c7a8c;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Адаптивность --- */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.hero-grid {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center; /* Центрируем контент на планшетах */
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-description {
|
|
||||||
margin: 0 auto 3rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-actions {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-image-wrapper {
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.experience-badge {
|
|
||||||
left: -10px; /* Сдвигаем внутрь, чтобы не вылазило за экран */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.hero-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-composition::before {
|
.image-composition::before {
|
||||||
display: none; /* Убираем повернутую подложку на мобилках для простоты */
|
content: ''; position: absolute; top: -10px; left: 20px; right: -20px; bottom: 10px;
|
||||||
|
background-color: #ffffff; border-radius: 12px; transform: rotate(3deg); z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-image { width: 100%; border-radius: 12px; border: 8px solid #ffffff; filter: grayscale(100%); box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
|
||||||
|
|
||||||
.experience-badge {
|
.experience-badge {
|
||||||
bottom: -20px;
|
position: absolute; bottom: 30px; left: -30px; background: #ffffff; padding: 1.5rem;
|
||||||
left: 20px;
|
border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); min-width: 180px;
|
||||||
right: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.exp-number { font-size: 2.2rem; font-weight: 900; color: #1e3050; line-height: 1; display: block; }
|
||||||
|
.exp-text { font-size: 0.7rem; font-weight: 800; color: #535e6c; text-transform: uppercase; }
|
||||||
|
|
||||||
|
/* АДАПТИВНОСТЬ ПОД ВЫСОТУ ШАПКИ */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.hero-section { padding-top: 70px; min-height: auto; }
|
||||||
|
.hero-grid { flex-direction: column; text-align: center; padding: 1.5rem 1.5rem 4rem; }
|
||||||
|
.hero-content { align-items: center; }
|
||||||
|
.hero-actions { justify-content: center; }
|
||||||
|
.hero-image-wrapper { margin-top: 3rem; justify-content: center; }
|
||||||
|
.experience-badge { left: 0; bottom: -20px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.hero-section { padding-top: 64px; }
|
||||||
|
.hero-title { font-size: 1.8rem; }
|
||||||
|
.hero-actions { flex-direction: column; width: 100%; }
|
||||||
|
.hero-actions > * { width: 100%; }
|
||||||
|
.image-composition::before { display: none; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,33 @@
|
||||||
---
|
---
|
||||||
import Logo from './Logo.astro';
|
import Logo from './Logo.astro';
|
||||||
import LoginButton from './LoginButton.astro';
|
|
||||||
import Navbar from './Navbar.astro';
|
import Navbar from './Navbar.astro';
|
||||||
import MobileMenu from './MobileMenu.astro';
|
import MobileMenu from './MobileMenu.astro';
|
||||||
|
import { COMPANY } from '@constants';
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="header-wrapper" id="header">
|
<header class="header-wrapper" id="header">
|
||||||
<div class="header-progress-container">
|
<!-- 1. Контейнер шапки -->
|
||||||
<div class="header-progress-bar" id="progress-bar"></div>
|
<div class="site-container header-container">
|
||||||
|
<div class="header-column header-left">
|
||||||
|
<Logo />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="site-container header-container">
|
<!--Navbar -->
|
||||||
<Logo />
|
<div class="header-column header-center">
|
||||||
<Navbar />
|
<Navbar class="desktop-nav" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Phone -->
|
||||||
|
<div class="header-column header-right">
|
||||||
|
<div class="header-actions">
|
||||||
|
<a href={`tel:${COMPANY.phone}`} class="header-phone">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="phone-icon">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="phone-number">{COMPANY.phone}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="contact-block">
|
|
||||||
<LoginButton />
|
|
||||||
<button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
|
<button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
|
||||||
<span class="burger-line"></span>
|
<span class="burger-line"></span>
|
||||||
<span class="burger-line"></span>
|
<span class="burger-line"></span>
|
||||||
|
|
@ -23,6 +35,11 @@ import MobileMenu from './MobileMenu.astro';
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Линия прогресса (теперь под контейнером, с высоким z-index) -->
|
||||||
|
<div class="header-progress-container">
|
||||||
|
<div class="header-progress-bar" id="progress-bar"></div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<MobileMenu />
|
<MobileMenu />
|
||||||
|
|
@ -31,88 +48,30 @@ import MobileMenu from './MobileMenu.astro';
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const burgerBtn = document.getElementById('burger-btn');
|
const burgerBtn = document.getElementById('burger-btn');
|
||||||
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
||||||
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
|
||||||
const mobileNavLinks = mobileMenuOverlay?.querySelectorAll('.mobile-nav-link');
|
|
||||||
const progressBar = document.getElementById('progress-bar');
|
const progressBar = document.getElementById('progress-bar');
|
||||||
const header = document.getElementById('header');
|
const header = document.getElementById('header');
|
||||||
|
|
||||||
// Обработка прогресса скролла
|
function updateScroll() {
|
||||||
function updateProgressBar() {
|
|
||||||
if (!progressBar) return;
|
|
||||||
|
|
||||||
// Получаем высоту документа и окна
|
|
||||||
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||||
|
|
||||||
// Избегаем деления на ноль
|
if (progressBar && docHeight > 0) {
|
||||||
if (docHeight <= 0) {
|
|
||||||
progressBar.style.width = '0%';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Вычисляем процент прокрутки (0-100)
|
|
||||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||||
|
progressBar.style.width = `${Math.min(100, Math.max(0, scrollPercent))}%`;
|
||||||
// Ограничиваем значения от 0 до 100
|
|
||||||
const clampedPercent = Math.min(100, Math.max(0, scrollPercent));
|
|
||||||
|
|
||||||
// Применяем ширину
|
|
||||||
progressBar.style.width = `${clampedPercent}%`;
|
|
||||||
|
|
||||||
// Добавляем/убираем класс visible для дополнительных эффектов
|
|
||||||
if (scrollTop > 5) {
|
|
||||||
header?.classList.add('scrolled');
|
|
||||||
} else {
|
|
||||||
header?.classList.remove('scrolled');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Оптимизация через requestAnimationFrame
|
if (scrollTop > 10) header?.classList.add('scrolled');
|
||||||
let ticking = false;
|
else header?.classList.remove('scrolled');
|
||||||
function handleScroll() {
|
}
|
||||||
if (!ticking) {
|
|
||||||
window.requestAnimationFrame(() => {
|
window.addEventListener('scroll', updateScroll, { passive: true });
|
||||||
updateProgressBar();
|
|
||||||
ticking = false;
|
burgerBtn?.addEventListener('click', () => {
|
||||||
});
|
mobileMenuOverlay?.classList.toggle('active');
|
||||||
ticking = true;
|
burgerBtn?.classList.toggle('active');
|
||||||
}
|
document.body.style.overflow = mobileMenuOverlay?.classList.contains('active') ? 'hidden' : '';
|
||||||
}
|
|
||||||
|
|
||||||
// Инициализация и слушатели
|
|
||||||
updateProgressBar();
|
|
||||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
||||||
window.addEventListener('resize', updateProgressBar);
|
|
||||||
|
|
||||||
// Мобильное меню
|
|
||||||
function openMenu() {
|
|
||||||
mobileMenuOverlay?.classList.add('active');
|
|
||||||
document.body.style.overflow = 'hidden';
|
|
||||||
burgerBtn?.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeMenu() {
|
|
||||||
mobileMenuOverlay?.classList.remove('active');
|
|
||||||
document.body.style.overflow = '';
|
|
||||||
burgerBtn?.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
burgerBtn?.addEventListener('click', openMenu);
|
|
||||||
mobileMenuClose?.addEventListener('click', closeMenu);
|
|
||||||
|
|
||||||
mobileMenuOverlay?.addEventListener('click', (e) => {
|
|
||||||
if (e.target === mobileMenuOverlay) closeMenu();
|
|
||||||
});
|
|
||||||
|
|
||||||
mobileNavLinks?.forEach(link => {
|
|
||||||
link.addEventListener('click', closeMenu);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && mobileMenuOverlay?.classList.contains('active')) {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
updateScroll();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -121,119 +80,152 @@ import MobileMenu from './MobileMenu.astro';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
width: 100%;
|
||||||
background-color: #d1d9e4;
|
background-color: var(--color-light);
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
margin: 0 !important; /* Убираем любые отступы */
|
||||||
|
padding: 0 !important;
|
||||||
|
border-bottom: 1px solid rgba(30, 48, 80, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Контейнер прогресс-бара */
|
.header-wrapper.scrolled {
|
||||||
|
background-color: rgba(209, 217, 228, 0.98);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
|
align-items: center;
|
||||||
|
/* ФИКСИРОВАННЫЕ ВЫСОТЫ (важно для Hero) */
|
||||||
|
height: 80px;
|
||||||
|
transition: height 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper.scrolled .header-container {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-column { display: flex; align-items: center; }
|
||||||
|
.header-left { justify-content: flex-start; }
|
||||||
|
.header-center { justify-content: center; }
|
||||||
|
.header-right { justify-content: flex-end; gap: 1.5rem; }
|
||||||
|
|
||||||
|
/* НОМЕР ТЕЛЕФОНА В ШАПКЕ */
|
||||||
|
.header-phone {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: #1e3050;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: transparent;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-phone:hover {
|
||||||
|
color: #0a1a2e;
|
||||||
|
background: rgba(30, 48, 80, 0.05);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Эффект перелива при наведении */
|
||||||
|
.header-phone::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(234, 194, 110, 0.1), transparent);
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-phone:hover::after {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-phone:hover .phone-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-number {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ПОЛОСА ПРОГРЕССА */
|
||||||
.header-progress-container {
|
.header-progress-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: rgba(212, 175, 55, 0.1);
|
background: rgba(234, 194, 110, 0.1);
|
||||||
|
z-index: 1001; /* Выше фона шапки */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Сама линия прогресса */
|
|
||||||
.header-progress-bar {
|
.header-progress-bar {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
background: linear-gradient(90deg, #d4af37 0%, #e8c547 50%, #d4af37 100%);
|
background: linear-gradient(90deg, var(--color-gold) 0%, #f0d68a 50%, var(--color-gold) 100%);
|
||||||
background-size: 200% 100%;
|
box-shadow: 0 0 10px rgba(234, 194, 110, 0.5);
|
||||||
transition: width 0.1s linear;
|
|
||||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
|
|
||||||
animation: shimmer 2s infinite linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Эффект мерцания градиента */
|
/* БУРГЕР */
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: 200% 0; }
|
|
||||||
100% { background-position: -200% 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Состояние при скролле */
|
|
||||||
.header-wrapper.scrolled {
|
|
||||||
background-color: rgba(209, 217, 228, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.2rem 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-block {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Кнопка гамбургера */
|
|
||||||
.burger-btn {
|
.burger-btn {
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 30px;
|
width: 28px;
|
||||||
height: 21px;
|
height: 18px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
|
||||||
z-index: 1001;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.burger-line {
|
.burger-line {
|
||||||
width: 100%;
|
width: 100%; height: 2.5px;
|
||||||
height: 3px;
|
background-color: var(--color-primary);
|
||||||
background: linear-gradient(90deg, #1e3050 0%, #2a4266 100%);
|
border-radius: 4px; transition: 0.3s;
|
||||||
border-radius: 2px;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.burger-btn.active .burger-line:nth-child(1) {
|
.burger-btn.active .burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
|
||||||
transform: rotate(45deg) translate(5px, 5px);
|
.burger-btn.active .burger-line:nth-child(2) { opacity: 0; }
|
||||||
}
|
.burger-btn.active .burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
|
||||||
|
|
||||||
.burger-btn.active .burger-line:nth-child(2) {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-btn.active .burger-line:nth-child(3) {
|
|
||||||
transform: rotate(-45deg) translate(5px, -5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.burger-btn {
|
.header-container { display: flex; justify-content: space-between; height: 70px; }
|
||||||
display: flex;
|
.header-center { display: none; }
|
||||||
}
|
.header-right { gap: 0.75rem; }
|
||||||
|
.header-phone {
|
||||||
.login-btn {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.burger-btn { display: flex; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
@media (min-width: 993px) {
|
||||||
.contact-block {
|
.header-phone {
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
align-items: flex-end;
|
}
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
@media (max-width: 767px) {
|
||||||
padding: 0 1rem;
|
.header-container { height: 64px; padding: 0 1rem; }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -95,4 +95,11 @@ const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}
|
||||||
.login-text {
|
.login-text {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Скрываем на мобильных разрешениях */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.login-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,12 @@
|
||||||
---
|
---
|
||||||
import { NAV_LINKS } from '../../../constants/index.ts';
|
import { NAV_LINKS } from '@constants';
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="mobile-menu-overlay" id="mobile-menu-overlay">
|
<div class="mobile-menu-overlay" id="mobile-menu-overlay">
|
||||||
|
<div class="mobile-menu-container">
|
||||||
<div class="mobile-menu">
|
<div class="mobile-menu">
|
||||||
<!-- Кнопка закрытия -->
|
<!-- Шапка меню - убрана кнопка входа -->
|
||||||
<button class="mobile-menu-close" id="mobile-menu-close" aria-label="Закрыть меню">
|
<div class="mobile-menu-header">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Логотип -->
|
|
||||||
<a href="/" class="mobile-logo">
|
<a href="/" class="mobile-logo">
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<div class="logo-icon">
|
<div class="logo-icon">
|
||||||
|
|
@ -33,50 +27,76 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<button class="mobile-menu-close" id="mobile-menu-close" aria-label="Закрыть меню">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Навигация -->
|
<!-- Навигация -->
|
||||||
<nav class="mobile-nav">
|
<nav class="mobile-nav">
|
||||||
<ul class="mobile-nav-list">
|
<ul class="mobile-nav-list">
|
||||||
{NAV_LINKS.map((link, index) => (
|
{NAV_LINKS.map((link, index) => {
|
||||||
<li style={`--item-index: ${index}`}>
|
const isActive = Astro.url.pathname === link.url;
|
||||||
<a href={link.url} class="mobile-nav-link">
|
return (
|
||||||
{link.name}
|
<li style={`--item-index: ${index}`} class="mobile-nav-item">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="link-arrow">
|
<a href={link.url} class={`mobile-nav-link ${isActive ? 'active' : ''}`}>
|
||||||
|
<span class="mobile-nav-text">
|
||||||
|
<span class="mobile-nav-number">{String(index + 1).padStart(2, '0')}</span>
|
||||||
|
<span class="mobile-nav-name">{link.name}</span>
|
||||||
|
</span>
|
||||||
|
<div class="mobile-nav-icon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<polyline points="9 18 15 12 9 6"></polyline>
|
<polyline points="9 18 15 12 9 6"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<div class="mobile-nav-ripple"></div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Контакты -->
|
<!-- Контакты - кнопка входа ОСТАВЛЕНА ВНИЗУ -->
|
||||||
<div class="mobile-contacts">
|
<div class="mobile-contacts">
|
||||||
|
<div class="mobile-contact-card">
|
||||||
|
<div class="contact-icon">📞</div>
|
||||||
<a href="tel:+73462000000" class="mobile-phone">+7 (3462) 00-00-00</a>
|
<a href="tel:+73462000000" class="mobile-phone">+7 (3462) 00-00-00</a>
|
||||||
|
<span class="contact-label">Ежедневно 9:00–21:00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Кнопка входа ОСТАВЛЕНА ВНИЗУ -->
|
||||||
<a href="/login" class="mobile-login-btn">
|
<a href="/login" class="mobile-login-btn">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
||||||
<polyline points="10 17 15 12 10 7"></polyline>
|
<polyline points="10 17 15 12 10 7"></polyline>
|
||||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Вход в кабинет</span>
|
<span>Вход в личный кабинет</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* Оверлей */
|
||||||
.mobile-menu-overlay {
|
.mobile-menu-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(3, 21, 41, 0.95);
|
background: rgba(3, 21, 41, 0.98);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(12px);
|
||||||
z-index: 1000;
|
z-index: 2000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: opacity 0.4s ease, visibility 0.4s ease;
|
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||||
|
visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-overlay.active {
|
.mobile-menu-overlay.active {
|
||||||
|
|
@ -84,53 +104,49 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu {
|
.mobile-menu-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 450px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(180deg, #0a2540 0%, #031529 100%);
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-overlay.active .mobile-menu {
|
.mobile-menu-overlay.active .mobile-menu-container {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Кнопка закрытия */
|
.mobile-menu {
|
||||||
.mobile-menu-close {
|
position: relative;
|
||||||
position: absolute;
|
width: 100%;
|
||||||
top: 1rem;
|
height: 100%;
|
||||||
right: 1rem;
|
background: linear-gradient(135deg, #0a2540 0%, #031529 100%);
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #8c9bb0;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-header {
|
||||||
|
padding: 1.5rem 1.5rem 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
transition: all 0.3s ease;
|
margin-bottom: 1rem;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-close:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #eac26e;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Логотип */
|
|
||||||
.mobile-logo {
|
.mobile-logo {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-bottom: 2.5rem;
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-logo:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
|
|
@ -147,6 +163,7 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
.shield {
|
.shield {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
|
|
@ -169,9 +186,34 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Навигация */
|
.mobile-menu-close {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: none;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-close:hover {
|
||||||
|
background: rgba(234, 194, 110, 0.2);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-close:active {
|
||||||
|
transform: rotate(90deg) scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-nav {
|
.mobile-nav {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding: 0 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav-list {
|
.mobile-nav-list {
|
||||||
|
|
@ -183,97 +225,183 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav-list li {
|
.mobile-nav-item {
|
||||||
|
position: relative;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateX(20px);
|
transform: translateX(30px);
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition-delay: calc(0.05s * var(--item-index));
|
transition-delay: calc(0.05s * var(--item-index, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-overlay.active .mobile-nav-list li {
|
.mobile-menu-overlay.active .mobile-nav-item {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav-link {
|
.mobile-nav-link {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1rem 0.75rem;
|
padding: 1rem 1rem;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-number {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #eac26e;
|
||||||
|
font-weight: 700;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-name {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-icon {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
color: #eac26e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav-link:hover {
|
.mobile-nav-link:hover {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(234, 194, 110, 0.1);
|
||||||
color: #eac26e;
|
transform: translateX(8px);
|
||||||
|
padding-left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-nav-link:hover .link-arrow {
|
.mobile-nav-link:hover .mobile-nav-number {
|
||||||
transform: translateX(4px);
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-arrow {
|
.mobile-nav-link:hover .mobile-nav-name {
|
||||||
opacity: 0;
|
transform: translateX(4px);
|
||||||
transition: all 0.3s ease;
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link:hover .mobile-nav-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link.active {
|
||||||
|
background: linear-gradient(90deg, rgba(234, 194, 110, 0.15), transparent);
|
||||||
|
border-left: 3px solid #eac26e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link.active .mobile-nav-number {
|
||||||
|
opacity: 1;
|
||||||
color: #eac26e;
|
color: #eac26e;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Контакты */
|
.mobile-nav-ripple {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(234, 194, 110, 0.3), transparent);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.6s, height 0.6s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link:active + .mobile-nav-ripple {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Контакты - кнопка входа ВНИЗУ */
|
||||||
.mobile-contacts {
|
.mobile-contacts {
|
||||||
margin-top: 2rem;
|
padding: 1.5rem;
|
||||||
padding-top: 2rem;
|
margin-top: auto;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-contact-card {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-contact-card:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-phone {
|
.mobile-phone {
|
||||||
|
display: block;
|
||||||
color: #eac26e;
|
color: #eac26e;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
margin-bottom: 0.25rem;
|
||||||
padding: 0.75rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(234, 194, 110, 0.1);
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-phone:hover {
|
.mobile-phone:hover {
|
||||||
background: rgba(234, 194, 110, 0.2);
|
transform: scale(1.05);
|
||||||
|
color: #f0d68a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contact-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Кнопка входа ВНИЗУ */
|
||||||
.mobile-login-btn {
|
.mobile-login-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.5rem;
|
gap: 0.75rem;
|
||||||
padding: 0.875rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
background: linear-gradient(135deg, #1e3050 0%, #2a4266 100%);
|
background: linear-gradient(135deg, #eac26e 0%, #d4af37 100%);
|
||||||
color: #ffffff;
|
color: #1e3050;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
box-shadow: 0 4px 12px rgba(30, 48, 80, 0.3);
|
box-shadow: 0 4px 15px rgba(234, 194, 110, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-login-btn:hover {
|
.mobile-login-btn:hover {
|
||||||
box-shadow: 0 6px 20px rgba(30, 48, 80, 0.5);
|
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 25px rgba(234, 194, 110, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-login-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
|
||||||
.mobile-menu::-webkit-scrollbar {
|
.mobile-menu::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu::-webkit-scrollbar-track {
|
.mobile-menu::-webkit-scrollbar-track {
|
||||||
|
|
@ -281,11 +409,82 @@ import { NAV_LINKS } from '../../../constants/index.ts';
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu::-webkit-scrollbar-thumb {
|
.mobile-menu::-webkit-scrollbar-thumb {
|
||||||
background: rgba(234, 194, 110, 0.3);
|
background: rgba(234, 194, 110, 0.5);
|
||||||
border-radius: 3px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu::-webkit-scrollbar-thumb:hover {
|
@keyframes pulse {
|
||||||
background: rgba(234, 194, 110, 0.5);
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link.active .mobile-nav-number {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
// Внутри MobileMenu.astro
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const overlay = document.getElementById('mobile-menu-overlay');
|
||||||
|
const closeBtn = document.getElementById('mobile-menu-close');
|
||||||
|
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
|
||||||
|
|
||||||
|
// Находим кнопку бургера из Header, чтобы сбрасывать её состояние
|
||||||
|
const burgerBtn = document.getElementById('burger-btn');
|
||||||
|
|
||||||
|
function openMenu() {
|
||||||
|
overlay?.classList.add('active');
|
||||||
|
burgerBtn?.classList.add('active'); // Синхронизируем бургер
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
overlay?.classList.remove('active');
|
||||||
|
|
||||||
|
// ВАЖНО: Находим кнопку бургера и убираем у неё класс "active"
|
||||||
|
// чтобы крестик снова стал гамбургером
|
||||||
|
burgerBtn?.classList.remove('active');
|
||||||
|
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
document.body.style.position = '';
|
||||||
|
document.body.style.width = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Закрытие по кнопке "Крестик" внутри меню
|
||||||
|
closeBtn?.addEventListener('click', closeMenu);
|
||||||
|
|
||||||
|
// Закрытие при клике на темную область (оверлей)
|
||||||
|
overlay?.addEventListener('click', (e) => {
|
||||||
|
if (e.target === overlay) closeMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Закрытие по клавише Escape
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') closeMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Закрытие при клике на пункты меню
|
||||||
|
mobileNavLinks?.forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
setTimeout(closeMenu, 150);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Логика свайпа для закрытия
|
||||||
|
let touchStartX = 0;
|
||||||
|
const menuContainer = document.querySelector('.mobile-menu-container');
|
||||||
|
menuContainer?.addEventListener('touchstart', (e) => {
|
||||||
|
touchStartX = (e as TouchEvent).changedTouches[0].screenX;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
menuContainer?.addEventListener('touchend', (e) => {
|
||||||
|
let touchEndX = (e as TouchEvent).changedTouches[0].screenX;
|
||||||
|
if (touchEndX - touchStartX < -50) closeMenu(); // Свайп влево
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -5,6 +5,7 @@ export interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultLinks = [
|
const defaultLinks = [
|
||||||
|
{ name: 'Главная', url: '/' },
|
||||||
{ name: 'Услуги', url: '/services' },
|
{ name: 'Услуги', url: '/services' },
|
||||||
{ name: 'Кейсы', url: '/cases' },
|
{ name: 'Кейсы', url: '/cases' },
|
||||||
{ name: 'Блог', url: '/blog' },
|
{ name: 'Блог', url: '/blog' },
|
||||||
|
|
@ -16,49 +17,225 @@ const {
|
||||||
links = defaultLinks,
|
links = defaultLinks,
|
||||||
class: className = '',
|
class: className = '',
|
||||||
}: Props = Astro.props;
|
}: Props = Astro.props;
|
||||||
|
|
||||||
|
// Определяем текущую страницу
|
||||||
|
const currentPath = Astro.url.pathname;
|
||||||
|
const isHomePage = currentPath === '/' || currentPath === '';
|
||||||
|
|
||||||
|
// Фильтруем ссылки: убираем "Главная" если мы на главной странице
|
||||||
|
const filteredLinks = isHomePage
|
||||||
|
? links.filter(link => link.url !== '/')
|
||||||
|
: links;
|
||||||
---
|
---
|
||||||
|
|
||||||
<nav class={className}>
|
<nav class={className}>
|
||||||
<ul class="nav-list">
|
<ul class="nav-list">
|
||||||
{links.map((link) => (
|
{filteredLinks.map((link, index) => {
|
||||||
<li>
|
const isActive = currentPath === link.url ||
|
||||||
<a href={link.url} class="nav-link">{link.name}</a>
|
(link.url !== '/' && currentPath.startsWith(link.url));
|
||||||
|
return (
|
||||||
|
<li class="nav-item" style={{ '--item-index': index } as any}>
|
||||||
|
<a
|
||||||
|
href={link.url}
|
||||||
|
class={`nav-link ${isActive ? 'active' : ''}`}
|
||||||
|
data-text={link.name}
|
||||||
|
>
|
||||||
|
<span class="nav-link-text">{link.name}</span>
|
||||||
|
<span class="nav-indicator"></span>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
)})}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.nav-list {
|
.nav-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2.5rem;
|
gap: 0.5rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
position: relative;
|
||||||
|
perspective: 500px;
|
||||||
|
/* Убираем анимацию появления */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: #535e6c;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
/* Цвет текста как в логотипе (logo-name) */
|
||||||
|
color: #1e3050;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
transition: color 0.2s ease, background-position 0.3s ease;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
background-image: linear-gradient(to right, #1e3050 0%, #1e3050 100%);
|
border-radius: 10px;
|
||||||
background-size: 0% 2px;
|
overflow: hidden;
|
||||||
background-repeat: no-repeat;
|
letter-spacing: 0.3px;
|
||||||
background-position: left bottom;
|
cursor: pointer;
|
||||||
padding-bottom: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Текст с анимацией */
|
||||||
|
.nav-link-text {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Индикатор под пунктом */
|
||||||
|
.nav-indicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #eac26e, #d4af37, #eac26e);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover эффекты */
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
color: #1e3050;
|
/* При наведении цвет становится насыщеннее */
|
||||||
background-size: 100% 2px;
|
color: #0a1a2e;
|
||||||
|
background: rgba(30, 48, 80, 0.05);
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Адаптив: скрываем меню на мобильных */
|
.nav-link:hover .nav-link-text {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover .nav-indicator {
|
||||||
|
width: 70%;
|
||||||
|
opacity: 1;
|
||||||
|
animation: indicatorPulse 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Активное состояние - улучшенная видимость */
|
||||||
|
.nav-link.active {
|
||||||
|
/* Используем темно-синий цвет вместо золотого для лучшей читаемости */
|
||||||
|
color: #1e3050;
|
||||||
|
background: linear-gradient(135deg, rgba(234, 194, 110, 0.25), rgba(234, 194, 110, 0.12));
|
||||||
|
position: relative;
|
||||||
|
font-weight: 700;
|
||||||
|
/* Добавляем небольшую тень для выделения */
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active .nav-indicator {
|
||||||
|
width: 80%;
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(90deg, #eac26e, #f0d68a, #eac26e);
|
||||||
|
height: 3px;
|
||||||
|
bottom: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Дополнительный эффект для активного пункта - полужирный */
|
||||||
|
.nav-link.active .nav-link-text {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ripple эффект при клике */
|
||||||
|
.nav-link::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(234, 194, 110, 0.3), transparent);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.6s, height 0.6s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:active::before {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Анимация индикатора */
|
||||||
|
@keyframes indicatorPulse {
|
||||||
|
0% {
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
width: 85%;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 70%;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Дополнительный эффект свечения при наведении */
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(234, 194, 110, 0.1), transparent);
|
||||||
|
transition: left 0.5s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::after {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптив */
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.nav-list {
|
.nav-list {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Добавляем дополнительные эффекты для активной ссылки
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Находим все активные ссылки
|
||||||
|
const activeLinks = document.querySelectorAll('.nav-link.active');
|
||||||
|
|
||||||
|
activeLinks.forEach(link => {
|
||||||
|
// Добавляем дополнительный класс для стилизации
|
||||||
|
link.classList.add('active-animated');
|
||||||
|
|
||||||
|
// Создаем эффект пульсации для активного индикатора
|
||||||
|
const indicator = link.querySelector('.nav-indicator');
|
||||||
|
if (indicator) {
|
||||||
|
(indicator as HTMLElement).style.animation = 'indicatorPulse 1s ease-out infinite';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Добавляем поддержку touch-устройств
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.addEventListener('touchstart', function(this: HTMLElement) {
|
||||||
|
// Убираем эффект наведения на touch-устройствах
|
||||||
|
this.classList.add('touch-active');
|
||||||
|
|
||||||
|
// Убираем класс через таймаут
|
||||||
|
setTimeout(() => {
|
||||||
|
this.classList.remove('touch-active');
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -1,2 +1,25 @@
|
||||||
export const SITE_URL = 'https://avtourist-surgut.ru/';
|
export const SITE_URL = 'https://avtourist-surgut.ru/';
|
||||||
export const SITE_TITLE_SUFFIX = ' | Автоюрист Сургут';
|
export const SITE_TITLE_SUFFIX = ' | Автоюрист Сургут';
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// КОНСТАНТЫ САЙТА "Автоюрист 086"
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Основная информация о компании
|
||||||
|
export const COMPANY = {
|
||||||
|
name: 'Автоюрист 086',
|
||||||
|
fullName: 'Центр защиты прав водителей "Автоюрист 086"',
|
||||||
|
phone: '+7 (922) 253-83-75',
|
||||||
|
email: 'info@avtourist086.ru',
|
||||||
|
address: 'г. Сургут, ул. Примерная, д. 1',
|
||||||
|
workHours: 'Пн-Пт: 9:00 - 18:00',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
// Навигация
|
||||||
|
export const NAV_LINKS = [
|
||||||
|
{ name: 'Услуги', url: '/services' },
|
||||||
|
{ name: 'Кейсы', url: '/cases' },
|
||||||
|
{ name: 'Блог', url: '/blog' },
|
||||||
|
{ name: 'Отзывы', url: '/reviews' },
|
||||||
|
{ name: 'Контакты', url: '/contacts' },
|
||||||
|
] as const;
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
// ============================================
|
|
||||||
// КОНСТАНТЫ САЙТА "Автоюрист 086"
|
|
||||||
// ============================================
|
|
||||||
|
|
||||||
// Основная информация о компании
|
|
||||||
export const COMPANY = {
|
|
||||||
name: 'Автоюрист 086',
|
|
||||||
fullName: 'Центр защиты прав водителей "Автоюрист 086"',
|
|
||||||
phone: '+7 (999) 999-99-99',
|
|
||||||
email: 'info@avtourist086.ru',
|
|
||||||
address: 'г. Сургут, ул. Примерная, д. 1',
|
|
||||||
workHours: 'Пн-Пт: 9:00 - 18:00',
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
// Навигация
|
|
||||||
export const NAV_LINKS = [
|
|
||||||
{ name: 'Услуги', url: '/services' },
|
|
||||||
{ name: 'Кейсы', url: '/cases' },
|
|
||||||
{ name: 'Блог', url: '/blog' },
|
|
||||||
{ name: 'Отзывы', url: '/reviews' },
|
|
||||||
{ name: 'Контакты', url: '/contacts' },
|
|
||||||
] as const;
|
|
||||||
|
|
@ -39,9 +39,9 @@ const { title, description, canonicalLink } = Astro.props;
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Отступ сверху для фиксированного хедера */
|
/* Отступ сверху для фиксированного хедера - убираем, т.к. Hero секция сама компенсирует */
|
||||||
.main-content {
|
.main-content {
|
||||||
padding-top: 80px; /* Высота хедера + отступ */
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,28 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ САЙТА "Автоюрист 086"
|
|
||||||
============================================ */
|
|
||||||
:root {
|
:root {
|
||||||
/* Основные цвета */
|
|
||||||
--color-primary: #1e3050; /* Тёмно-синий */
|
|
||||||
--color-secondary: #535e6c; /* Серый */
|
|
||||||
--color-gold: #eac26e; /* Золотой */
|
|
||||||
--color-gold-dark: #ce9f40; /* Тёмно-золотой */
|
|
||||||
--color-light: #d1d9e4; /* Серо-голубой фон */
|
|
||||||
--color-white: #ffffff; /* Белый */
|
|
||||||
|
|
||||||
/* Дополнительные оттенки */
|
|
||||||
--color-primary-dark: #152238; /* Тёмно-синий тёмный */
|
|
||||||
--color-gray-light: #f0f2f5; /* Светло-серый фон */
|
|
||||||
--color-gray-border: #e0e4e8; /* Цвет границ */
|
|
||||||
--color-text-muted: #9ca3af; /* Приглушённый текст */
|
|
||||||
|
|
||||||
/* Функциональные цвета */
|
|
||||||
--color-success: #10b981; /* Успех */
|
|
||||||
--color-error: #ef4444; /* Ошибка */
|
|
||||||
--color-warning: #f59e0b; /* Предупреждение */
|
|
||||||
|
|
||||||
/* Ширина контейнера сайта */
|
|
||||||
--site-max-width: 1400px;
|
--site-max-width: 1400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Единый контейнер для всех компонентов */
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-color: var(--color-white); /* Цвет фона страницы */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. Исправленный контейнер */
|
||||||
.site-container {
|
.site-container {
|
||||||
|
width: 100%;
|
||||||
max-width: var(--site-max-width);
|
max-width: var(--site-max-width);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 2rem;
|
padding: 0 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.site-container {
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue