redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

git add .!

Browse source
This commit is contained in:
Web-serfer 2026-04-05 18:12:49 +05:00
parent 12cb596e5e
commit 1d8cb94085
7 changed files with 1414 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/components/layout/footer/Footer.astro
View file

@ -3,13 +3,20 @@
const sectionsLinks = [
{ label: 'Главная', href: '/' },
{ label: 'Услуги', href: '/services' },
{ label: 'Блог', href: '#' },
{ label: 'Контакты', href: '/contacts' },
];
const legalLinks = [
{ label: 'Privacy Policy', href: '#' },
{ label: 'Terms of Service', href: '#' },
{ label: 'Legal Disclaimer', href: '#' },
{ label: 'Cookie Settings', href: '#' },
{ label: 'Политика конфиденциальности', href: '/privacy' },
{ label: 'Условия использования', href: '/terms' },
];
const infoLinks = [
{ label: 'Часто задаваемые вопросы', href: '/faq' },
{ label: 'Политика конфиденциальности', href: '/privacy' },
{ label: 'Условия использования', href: '/terms' },
{ label: 'Возврат средств', href: '#' },
];
---
@ -29,7 +36,7 @@ const legalLinks = [
</p>
</div>
<!-- Колонка 2: Разделы и Блог -->
<!-- Колонка 2: Разделы -->
<div class="footer-col">
<h4 class="col-title">Разделы</h4>
<ul class="footer-links">
@ -37,18 +44,13 @@ const legalLinks = [
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
<h4 class="col-title mt-4">Блог</h4>
<ul class="footer-links">
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
<!-- Колонка 3: Правовая информация -->
<div class="footer-col">
<h4 class="col-title">Правовая информация</h4>
<ul class="footer-links">
{legalLinks.map(link => (
{infoLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
@ -77,7 +79,11 @@ const legalLinks = [
<!-- Нижняя часть футера (Копирайт) -->
<div class="footer-bottom">
<p class="copyright">© 2026 Автоюрист086. Все права защищены.</p>
<p class="developer">Designed for Justice</p>
<ul class="footer-bottom-links">
{legalLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
</div>
</div>
@ -88,8 +94,7 @@ const legalLinks = [
.footer {
background-color: #031529; /* Темно-синий фон */
color: #8c9bb0; /* Приглушенный серо-голубой цвет текста */
/* Используем шрифт с засечками (serif), как на макете */
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
padding: 4rem 0 1.5rem 0;
}
@ -128,10 +133,6 @@ const legalLinks = [
letter-spacing: 0.5px;
}
.mt-4 {
margin-top: 1.5rem;
}
/* Списки ссылок */
.footer-links {
list-style: none;
@ -205,6 +206,25 @@ const legalLinks = [
margin: 0;
}
.footer-bottom-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1.5rem;
}
.footer-bottom-links a {
color: #8c9bb0;
text-decoration: none;
font-size: 0.75rem;
transition: color 0.2s ease;
}
.footer-bottom-links a:hover {
color: #d1b06b;
}
/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.footer-top {

527
frontend/src/components/layout/header/Header.astro
View file

@ -1,278 +1,335 @@
---
import Logo from './Logo.astro';
import Navbar from './Navbar.astro';
import MobileMenu from './MobileMenu.astro';
import { COMPANY } from '@constants';
import Logo from "./Logo.astro";
import Navbar from "./Navbar.astro";
import MobileMenu from "./MobileMenu.astro";
import { COMPANY } from "@constants";
---
<header class="header-wrapper" id="header">
<!-- 1. Контейнер шапки -->
<div class="site-container header-container">
<div class="header-column header-left animate-load" data-delay="0">
<Logo />
</div>
<!--Navbar -->
<div class="header-column header-center desktop-nav animate-load" data-delay="100">
<Navbar />
</div>
<!-- Phone -->
<div class="header-column header-right animate-load" data-delay="200">
<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>
<button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</button>
</div>
<!-- 1. Контейнер шапки -->
<div class="site-container header-container">
<div class="header-column header-left animate-load" data-delay="0">
<Logo />
</div>
<!-- 2. Линия прогресса (теперь под контейнером, с высоким z-index) -->
<div class="header-progress-container animate-load" data-delay="300">
<div class="header-progress-bar" id="progress-bar"></div>
<!--Navbar -->
<div
class="header-column header-center desktop-nav animate-load"
data-delay="100"
>
<Navbar />
</div>
<!-- Phone -->
<div class="header-column header-right animate-load" data-delay="200">
<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>
<button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</button>
</div>
</div>
<!-- 2. Линия прогресса (теперь под контейнером, с высоким z-index) -->
<div class="header-progress-container animate-load" data-delay="300">
<div class="header-progress-bar" id="progress-bar"></div>
</div>
</header>
<MobileMenu />
<style>
.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-light);
z-index: 1000;
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 {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-light);
z-index: 1000;
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-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-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 80px;
transition: height 0.3s ease;
}
.header-wrapper.scrolled .header-container {
height: 70px;
}
.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-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 {
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: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::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%;
}
.header-phone:hover::after {
left: 100%;
}
.phone-icon {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.phone-icon {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.header-phone:hover .phone-icon {
transform: scale(1.1);
}
.header-phone:hover .phone-icon {
transform: scale(1.1);
}
.phone-number {
font-weight: 700;
}
.phone-number {
font-weight: 700;
}
/* ПОЛОСА ПРОГРЕССА */
.header-progress-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(234, 194, 110, 0.1);
z-index: 1001; /* Выше фона шапки */
overflow: hidden;
}
/* ПОЛОСА ПРОГРЕССА */
.header-progress-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(234, 194, 110, 0.1);
z-index: 1001; /* Выше фона шапки */
overflow: hidden;
}
.header-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #eac26e 0%, #f0d68a 50%, #eac26e 100%);
box-shadow: 0 0 10px rgba(234, 194, 110, 0.5);
}
.header-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #eac26e 0%, #f0d68a 50%, #eac26e 100%);
box-shadow: 0 0 10px rgba(234, 194, 110, 0.5);
}
/* БУРГЕР */
.burger-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 18px;
background: transparent;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.burger-line {
width: 100%; height: 2.5px;
background-color: #1e3050;
border-radius: 4px;
}
/* БУРГЕР */
.burger-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 18px;
background: transparent;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.burger-line {
width: 100%;
height: 2.5px;
background-color: #1e3050;
border-radius: 4px;
}
/* Скрытие гамбургера при открытом меню */
.burger-btn.active {
opacity: 0;
pointer-events: none;
}
/* Скрытие гамбургера при открытом меню */
.burger-btn.active {
opacity: 0;
pointer-events: none;
}
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
/* --- АНИМАЦИИ ПРИ ЗАГРУЗКЕ --- */
.animate-load {
opacity: 0;
transform: translateY(-20px);
transition:
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Задержки для последовательного появления */
.header-left[data-delay="0"] {
transition-delay: 0s;
}
.header-center[data-delay="100"] {
transition-delay: 0.1s;
}
.header-right[data-delay="200"] {
transition-delay: 0.2s;
}
.header-progress-container[data-delay="300"] {
transition-delay: 0.3s;
}
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
opacity: 1;
transform: none;
transition: none;
}
}
.animate-load.is-visible {
opacity: 1;
transform: translateY(0);
@media (max-width: 992px) {
.header-container {
display: flex;
justify-content: space-between;
height: 70px;
}
/* Задержки для последовательного появления */
.header-left[data-delay="0"] { transition-delay: 0s; }
.header-center[data-delay="100"] { transition-delay: 0.1s; }
.header-right[data-delay="200"] { transition-delay: 0.2s; }
.header-progress-container[data-delay="300"] { transition-delay: 0.3s; }
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.animate-load {
opacity: 1;
transform: none;
transition: none;
}
.header-center {
display: none;
}
@media (max-width: 992px) {
.header-container { display: flex; justify-content: space-between; height: 70px; }
.header-center { display: none; }
.header-right { gap: 0.75rem; }
.header-phone {
display: none;
}
.burger-btn { display: flex; }
.header-right {
gap: 0.75rem;
}
@media (min-width: 993px) {
.header-phone {
display: flex;
}
.header-phone {
display: none;
}
@media (max-width: 767px) {
.header-container { height: 64px; padding: 0 1rem; }
.burger-btn {
display: flex;
}
}
@media (min-width: 993px) {
.header-phone {
display: flex;
}
}
@media (max-width: 767px) {
.header-container {
height: 64px;
padding: 0 1rem;
}
}
</style>
<script>
// Анимация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
const animatedElements = document.querySelectorAll('.animate-load');
// Анимация при загрузке страницы
document.addEventListener("DOMContentLoaded", () => {
const animatedElements = document.querySelectorAll(".animate-load");
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || '0');
animatedElements.forEach((el) => {
const delay = parseInt((el as HTMLElement).dataset.delay || "0");
setTimeout(() => {
el.classList.add('is-visible');
}, delay);
});
setTimeout(() => {
el.classList.add("is-visible");
}, delay);
});
});
document.addEventListener("DOMContentLoaded", () => {
const burgerBtn = document.getElementById("burger-btn");
const mobileMenuOverlay = document.getElementById("mobile-menu-overlay");
const progressBar = document.getElementById("progress-bar");
const header = document.getElementById("header");
function updateScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
if (progressBar && docHeight > 0) {
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.style.width = `${Math.min(100, Math.max(0, scrollPercent))}%`;
}
if (scrollTop > 10) header?.classList.add("scrolled");
else header?.classList.remove("scrolled");
}
window.addEventListener("scroll", updateScroll, { passive: true });
// Открытие меню - добавляем active к бургеру для скрытия
burgerBtn?.addEventListener("click", () => {
mobileMenuOverlay?.classList.add("active");
burgerBtn?.classList.add("active");
document.body.style.overflow = "hidden";
});
document.addEventListener('DOMContentLoaded', () => {
const burgerBtn = document.getElementById('burger-btn');
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
const progressBar = document.getElementById('progress-bar');
const header = document.getElementById('header');
function updateScroll() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const docHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && docHeight > 0) {
const scrollPercent = (scrollTop / docHeight) * 100;
progressBar.style.width = `${Math.min(100, Math.max(0, scrollPercent))}%`;
}
if (scrollTop > 10) header?.classList.add('scrolled');
else header?.classList.remove('scrolled');
}
window.addEventListener('scroll', updateScroll, { passive: true });
// Открытие меню - добавляем active к бургеру для скрытия
burgerBtn?.addEventListener('click', () => {
mobileMenuOverlay?.classList.add('active');
burgerBtn?.classList.add('active');
document.body.style.overflow = 'hidden';
});
updateScroll();
});
</script>
updateScroll();
});
</script>

1
frontend/src/components/layout/header/MobileMenu.astro
View file

@ -434,7 +434,6 @@ import { NAV_LINKS, COMPANY } from '@constants';
}
</style>
// Внутри MobileMenu.astro
<script>
document.addEventListener('DOMContentLoaded', () => {
const overlay = document.getElementById('mobile-menu-overlay');

95
frontend/src/layouts/Layout.astro
View file

@ -1,15 +1,15 @@
---
import '@styles/global.css';
import { SITE_TITLE_SUFFIX } from '@constants';
import "@styles/global.css";
import { SITE_TITLE_SUFFIX } from "@constants";
import Header from "@components/layout/header/Header.astro";
import Footer from "@components/layout/footer/Footer.astro";
import ConsultationModal from "@components/base/ConsultationModal.astro";
export interface Props {
title: string;
description: string;
canonicalLink?: string;
title: string;
description: string;
canonicalLink?: string;
}
const { title, description, canonicalLink } = Astro.props;
@ -17,54 +17,57 @@ const { title, description, canonicalLink } = Astro.props;
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
<link rel="icon" href="/favicons/favicon.ico" />
<title>{title} {SITE_TITLE_SUFFIX}</title>
<meta name="description" content={description} />
{canonicalLink && <link rel="canonical" href={canonicalLink} />}
<!-- Yandex верификация -->
<meta name="yandex-verification" content="be3edfd138348e43" />
</head>
<body>
<Header />
<main class="main-content">
<slot />
</main>
<Footer />
<ConsultationModal />
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
<link rel="icon" href="/favicons/favicon.ico" />
<title>{title} {SITE_TITLE_SUFFIX}</title>
<meta name="description" content={description} />
{canonicalLink && <link rel="canonical" href={canonicalLink} />}
<!-- Yandex верификация -->
<meta name="yandex-verification" content="be3edfd138348e43" />
</head>
<body>
<Header />
<main class="main-content">
<slot />
</main>
<Footer />
<ConsultationModal />
</body>
</html>
<style>
/* Отступ сверху для фиксированного хедера - убираем, т.к. Hero секция сама компенсирует */
.main-content {
padding-top: 0;
}
.main-content {
padding-top: 0;
}
</style>
<script>
// Клиентский скрипт для открытия модального окна
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('consultation-btn');
// Клиентский скрипт для открытия модального окна
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("consultation-btn");
btn?.addEventListener('click', () => {
window.dispatchEvent(new CustomEvent('open-modal', {
detail: 'consultation-modal'
}));
});
});
btn?.addEventListener("click", () => {
window.dispatchEvent(
new CustomEvent("open-modal", {
detail: "consultation-modal",
}),
);
});
});
// Для Astro View Transitions
document.addEventListener('astro:page-load', () => {
const btn = document.getElementById('consultation-btn');
// Для Astro View Transitions
document.addEventListener("astro:page-load", () => {
const btn = document.getElementById("consultation-btn");
btn?.addEventListener('click', () => {
window.dispatchEvent(new CustomEvent('open-modal', {
detail: 'consultation-modal'
}));
});
});
btn?.addEventListener("click", () => {
window.dispatchEvent(
new CustomEvent("open-modal", {
detail: "consultation-modal",
}),
);
});
});
</script>

583
frontend/src/pages/privacy.astro Normal file
View file

@ -0,0 +1,583 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
---
<Layout
title="Политика конфиденциальности"
description="Политика конфиденциальности сайта Автоюрист086 — как мы собираем, используем и защищаем персональные данные пользователей."
canonicalLink={`${SITE_URL}/privacy`}
>
<div class="legal-page">
<!-- Hero -->
<header class="page-hero">
<div class="hero-pattern"></div>
<div class="hero-content">
<div class="hero-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<path d="m9 12 2 2 4-4"/>
</svg>
<span>Защита данных</span>
</div>
<h1>Политика конфиденциальности</h1>
<p class="hero-desc">Как мы собираем, используем и защищаем ваши персональные данные</p>
<span class="date-badge">Обновлено: 5 апреля 2026</span>
</div>
</header>
<!-- Навигация -->
<nav class="page-nav">
<a href="#general" class="nav-link">Общие положения</a>
<a href="#data" class="nav-link">Собираемые данные</a>
<a href="#purposes" class="nav-link">Цели обработки</a>
<a href="#security" class="nav-link">Защита данных</a>
<a href="#third-party" class="nav-link">Третьи лица</a>
<a href="#rights" class="nav-link">Ваши права</a>
<a href="#cookies" class="nav-link">Cookie</a>
<a href="#contacts" class="nav-link">Контакты</a>
</nav>
<!-- Контент -->
<div class="content">
<section id="general" class="content-block">
<div class="block-header">
<span class="block-number">01</span>
<h2>Общие положения</h2>
</div>
<p>Настоящая Политика конфиденциальности определяет порядок обработки и защиты персональных данных пользователей сайта «Автоюрист086» (далее — Сайт). Мы уважаем вашу конфиденциальность и стремимся к обеспечению максимальной защиты ваших персональных данных в соответствии с Федеральным законом № 152-ФЗ «О персональных данных».</p>
</section>
<section id="data" class="content-block">
<div class="block-header">
<span class="block-number">02</span>
<h2>Какие данные мы собираем</h2>
</div>
<p>В процессе использования Сайта мы можем собирать следующие данные:</p>
<ul class="data-list">
<li class="data-item">
<div class="data-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div>
<strong>Имя и фамилия</strong>
<span>для идентификации пользователя при обращении</span>
</div>
</li>
<li class="data-item">
<div class="data-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
</div>
<div>
<strong>Номер телефона</strong>
<span>для связи и предоставления консультации</span>
</div>
</li>
<li class="data-item">
<div class="data-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<div>
<strong>Email</strong>
<span>для отправки информационных материалов</span>
</div>
</li>
<li class="data-item">
<div class="data-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div>
<strong>Данные об обращении</strong>
<span>описание ситуации для оценки перспектив дела</span>
</div>
</li>
<li class="data-item">
<div class="data-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<div>
<strong>Технические данные</strong>
<span>IP-адрес, тип браузера, файлы cookie</span>
</div>
</li>
</ul>
</section>
<section id="purposes" class="content-block">
<div class="block-header">
<span class="block-number">03</span>
<h2>Цели обработки данных</h2>
</div>
<p>Мы используем ваши персональные данные исключительно для:</p>
<ul class="simple-list">
<li>Предоставления юридических консультаций и услуг</li>
<li>Связи с пользователем по его запросу</li>
<li>Улучшения качества обслуживания</li>
<li>Выполнения обязательств, вытекающих из соглашений с клиентом</li>
</ul>
</section>
<section id="security" class="content-block">
<div class="block-header">
<span class="block-number">04</span>
<h2>Защита данных</h2>
</div>
<p>Мы принимаем необходимые организационные и технические меры для защиты ваших персональных данных от несанкционированного доступа, изменения, раскрытия или уничтожения. Доступ к персональным данным имеют только уполномоченные сотрудники, обязанные соблюдать конфиденциальность.</p>
<div class="security-badges">
<div class="security-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>Шифрование данных</span>
</div>
<div class="security-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
<span>Контроль доступа</span>
</div>
<div class="security-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
<span>Мониторинг 24/7</span>
</div>
</div>
</section>
<section id="third-party" class="content-block">
<div class="block-header">
<span class="block-number">05</span>
<h2>Передача данных третьим лицам</h2>
</div>
<p>Мы не передаём ваши персональные данные третьим лицам, за исключением случаев, предусмотренных законодательством Российской Федерации, или когда это необходимо для исполнения обязательств перед пользователем (например, передача данных в суд при ведении дела).</p>
</section>
<section id="rights" class="content-block">
<div class="block-header">
<span class="block-number">06</span>
<h2>Права пользователя</h2>
</div>
<p>Вы имеете право:</p>
<ul class="simple-list">
<li>Получить информацию о хранящихся у нас персональных данных</li>
<li>Потребовать исправления неточных данных</li>
<li>Потребовать удаления ваших данных (за исключением случаев, когда хранение обязательно по закону)</li>
<li>Отозвать согласие на обработку персональных данных в любой момент</li>
</ul>
</section>
<section id="cookies" class="content-block">
<div class="block-header">
<span class="block-number">07</span>
<h2>Файлы cookie</h2>
</div>
<p>Сайт может использовать файлы cookie для улучшения качества обслуживания и персонализации контента. Вы можете настроить браузер на отказ от cookie, однако в этом случае некоторые функции Сайта могут работать некорректно.</p>
</section>
<section id="contacts" class="content-block highlight-block">
<div class="block-header">
<span class="block-number">08</span>
<h2>Контактная информация</h2>
</div>
<p>По всем вопросам, связанным с обработкой персональных данных, обращайтесь:</p>
<div class="contact-cards">
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>г. Сургут, ул. Мира, 15</span>
</div>
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<a href="tel:+73462000000">+7 (3462) 00-00-00</a>
</div>
</div>
</section>
</div>
</div>
</Layout>
<style>
/* Hero */
.page-hero {
position: relative;
background: linear-gradient(135deg, #0a2540 0%, #162d47 50%, #1e3050 100%);
padding: 4.5rem 2rem 3.5rem;
text-align: center;
overflow: hidden;
}
.hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 600px 400px at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-pattern::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.025;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L0 20h8l12-12 12 12h8L20 0zm0 40L0 20h8l12 12 12-12h8L20 40z' fill='%23d4af37' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.hero-content {
position: relative;
z-index: 2;
max-width: 650px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 100px;
color: #d4af37;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
}
.hero-badge svg {
width: 16px;
height: 16px;
}
.hero-content h1 {
font-size: clamp(1.6rem, 4vw, 2.5rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 0.75rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.hero-desc {
color: rgba(255, 255, 255, 0.65);
font-size: 1.05rem;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.date-badge {
display: inline-block;
padding: 0.4rem 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
/* Навигация */
.page-nav {
max-width: 860px;
margin: -1.5rem auto 2.5rem;
padding: 1.25rem 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
position: relative;
z-index: 3;
}
.nav-link {
padding: 0.5rem 1rem;
color: #1e3050;
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
border-radius: 6px;
transition: all 0.2s ease;
}
.nav-link:hover {
background: rgba(212, 175, 55, 0.1);
color: #b8951f;
}
/* Контент */
.content {
max-width: 860px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
.content-block {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
border: 1px solid #e8ecf1;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.content-block:hover {
border-color: rgba(212, 175, 55, 0.25);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.block-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #f0f2f5;
}
.block-number {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
background: linear-gradient(135deg, #0a2540, #1e3050);
color: #d4af37;
font-size: 0.75rem;
font-weight: 700;
border-radius: 8px;
letter-spacing: 0.5px;
}
.block-header h2 {
font-size: 1.2rem;
font-weight: 700;
color: #1e3050;
margin: 0;
}
.content-block p {
color: #475569;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1rem;
}
/* Список данных */
.data-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.75rem;
}
.data-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
transition: background 0.2s ease;
}
.data-item:hover {
background: #f1f5f9;
}
.data-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(234, 194, 110, 0.05));
border-radius: 8px;
color: #b8951f;
}
.data-icon svg {
width: 18px;
height: 18px;
}
.data-item strong {
display: block;
color: #1e3050;
font-size: 0.9rem;
margin-bottom: 0.15rem;
}
.data-item span {
color: #64748b;
font-size: 0.82rem;
}
/* Простой список */
.simple-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.6rem;
}
.simple-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
}
.simple-list li::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
background: #d4af37;
border-radius: 50%;
margin-top: 0.5rem;
}
/* Бейджи безопасности */
.security-badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.25rem;
}
.security-badge {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
background: rgba(212, 175, 55, 0.06);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 8px;
color: #1e3050;
font-size: 0.82rem;
font-weight: 500;
}
.security-badge svg {
width: 16px;
height: 16px;
color: #b8951f;
}
/* Выделенный блок контактов */
.highlight-block {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
color: #ffffff;
}
.highlight-block .block-header {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.highlight-block .block-number {
background: rgba(212, 175, 55, 0.2);
}
.highlight-block .block-header h2 {
color: #ffffff;
}
.highlight-block p {
color: rgba(255, 255, 255, 0.7);
}
.contact-cards {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.contact-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
transition: all 0.2s ease;
}
.contact-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-card svg {
width: 20px;
height: 20px;
color: #d4af37;
flex-shrink: 0;
}
.contact-card a {
color: #d4af37;
text-decoration: none;
font-weight: 600;
}
.contact-card a:hover {
text-decoration: underline;
}
/* Адаптивность */
@media (max-width: 768px) {
.page-hero {
padding: 3rem 1rem 3rem;
}
.page-nav {
margin: -1rem 1rem 2rem;
padding: 1rem;
gap: 0.35rem;
}
.nav-link {
font-size: 0.75rem;
padding: 0.4rem 0.75rem;
}
.content {
padding: 0 1rem 3rem;
}
.content-block {
padding: 1.5rem;
}
.block-header {
gap: 0.75rem;
}
.data-item {
flex-direction: column;
gap: 0.5rem;
}
.security-badges {
flex-direction: column;
}
.contact-cards {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.content-block,
.nav-link,
.data-item,
.contact-card {
transition: none;
}
}
</style>

451
frontend/src/pages/terms.astro Normal file
View file

@ -0,0 +1,451 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
---
<Layout
title="Условия использования"
description="Условия использования сайта Автоюрист086 — правила, ограничения и ответственность при использовании материалов сайта."
canonicalLink={`${SITE_URL}/terms`}
>
<div class="legal-page">
<!-- Hero -->
<header class="page-hero">
<div class="hero-pattern"></div>
<div class="hero-content">
<div class="hero-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
</svg>
<span>Документ</span>
</div>
<h1>Условия использования</h1>
<p class="hero-desc">Правила, ограничения и ответственность при использовании материалов сайта</p>
<span class="date-badge">Обновлено: 5 апреля 2026</span>
</div>
</header>
<!-- Навигация -->
<nav class="page-nav">
<a href="#general" class="nav-link">Общие положения</a>
<a href="#info" class="nav-link">Информация</a>
<a href="#materials" class="nav-link">Материалы</a>
<a href="#consultations" class="nav-link">Консультации</a>
<a href="#responsibility" class="nav-link">Ответственность</a>
<a href="#personal-data" class="nav-link">Персональные данные</a>
<a href="#changes" class="nav-link">Изменения</a>
<a href="#contacts" class="nav-link">Контакты</a>
</nav>
<!-- Контент -->
<div class="content">
<section id="general" class="content-block">
<div class="block-header">
<span class="block-number">01</span>
<h2>Общие положения</h2>
</div>
<p>Настоящие Условия использования (далее — Условия) регулируют порядок использования сайта «Автоюрист086» (далее — Сайт). Используя Сайт, вы подтверждаете своё согласие с настоящими Условиями. Если вы не согласны с какими-либо положениями, пожалуйста, прекратите использование Сайта.</p>
</section>
<section id="info" class="content-block">
<div class="block-header">
<span class="block-number">02</span>
<h2>Информация на Сайте</h2>
</div>
<p>Все материалы Сайта носят исключительно информационный характер и не являются публичной офертой. Информация не заменяет полноценную юридическую консультацию. Мы прилагаем усилия для обеспечения актуальности и точности данных, однако не гарантируем их полноту и безошибочность.</p>
</section>
<section id="materials" class="content-block">
<div class="block-header">
<span class="block-number">03</span>
<h2>Использование материалов</h2>
</div>
<p>Все материалы Сайта, включая тексты, изображения, логотипы и графические элементы, защищены законодательством об авторском праве.</p>
<div class="info-cards">
<div class="info-card allowed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
<div>
<strong>Допустимо</strong>
<span>Личное некоммерческое использование</span>
</div>
</div>
<div class="info-card forbidden">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
<div>
<strong>Запрещено</strong>
<span>Копирование без согласия правообладателя</span>
</div>
</div>
</div>
</section>
<section id="consultations" class="content-block">
<div class="block-header">
<span class="block-number">04</span>
<h2>Консультации</h2>
</div>
<p>Первичная консультация на Сайте проводится бесплатно и носит оценочный характер. Точные сроки, стоимость и перспективы дела определяются после изучения документов и обстоятельств конкретного случая. Окончательное решение о сотрудничестве принимается по обоюдному согласию сторон.</p>
</section>
<section id="responsibility" class="content-block">
<div class="block-header">
<span class="block-number">05</span>
<h2>Ответственность</h2>
</div>
<p>Администрация Сайта не несёт ответственности за:</p>
<ul class="simple-list">
<li>Прямой или косвенный ущерб, возникший в результате использования или невозможности использования Сайта</li>
<li>Результаты юридической помощи, оказанной на основании информации, полученной через Сайт</li>
<li>Содержание и доступность сторонних ресурсов, ссылки на которые могут размещаться на Сайте</li>
</ul>
</section>
<section id="personal-data" class="content-block">
<div class="block-header">
<span class="block-number">06</span>
<h2>Персональные данные</h2>
</div>
<p>Обработка персональных данных пользователей осуществляется в соответствии с <a href="/privacy">Политикой конфиденциальности</a>. Оставляя свои данные на Сайте, вы даёте согласие на их обработку.</p>
</section>
<section id="changes" class="content-block">
<div class="block-header">
<span class="block-number">07</span>
<h2>Изменение условий</h2>
</div>
<p>Администрация Сайта оставляет за собой право вносить изменения в настоящие Условия в любое время без предварительного уведомления. Новая редакция вступает в силу с момента публикации на Сайте. Рекомендуем периодически просматривать данную страницу для отслеживания изменений.</p>
</section>
<section id="contacts" class="content-block highlight-block">
<div class="block-header">
<span class="block-number">08</span>
<h2>Контактная информация</h2>
</div>
<p>По всем вопросам, связанным с настоящими Условиями, обращайтесь:</p>
<div class="contact-cards">
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>г. Сургут, ул. Мира, 15</span>
</div>
<div class="contact-card">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<a href="tel:+73462000000">+7 (3462) 00-00-00</a>
</div>
</div>
</section>
</div>
</div>
</Layout>
<style>
/* Hero */
.page-hero {
position: relative;
background: linear-gradient(135deg, #0a2540 0%, #162d47 50%, #1e3050 100%);
padding: 4.5rem 2rem 3.5rem;
text-align: center;
overflow: hidden;
}
.hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 600px 400px at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-pattern::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.025;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L0 20h8l12-12 12 12h8L20 0zm0 40L0 20h8l12 12 12-12h8L20 40z' fill='%23d4af37' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.hero-content {
position: relative;
z-index: 2;
max-width: 650px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 100px;
color: #d4af37;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
}
.hero-badge svg { width: 16px; height: 16px; }
.hero-content h1 {
font-size: clamp(1.6rem, 4vw, 2.5rem);
font-weight: 800;
color: #ffffff;
margin: 0 0 0.75rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.hero-desc {
color: rgba(255, 255, 255, 0.65);
font-size: 1.05rem;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.date-badge {
display: inline-block;
padding: 0.4rem 1rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
/* Навигация */
.page-nav {
max-width: 860px;
margin: -1.5rem auto 2.5rem;
padding: 1.25rem 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
position: relative;
z-index: 3;
}
.nav-link {
padding: 0.5rem 1rem;
color: #1e3050;
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
border-radius: 6px;
transition: all 0.2s ease;
}
.nav-link:hover {
background: rgba(212, 175, 55, 0.1);
color: #b8951f;
}
/* Контент */
.content {
max-width: 860px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
.content-block {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
border: 1px solid #e8ecf1;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.content-block:hover {
border-color: rgba(212, 175, 55, 0.25);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.block-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #f0f2f5;
}
.block-number {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
background: linear-gradient(135deg, #0a2540, #1e3050);
color: #d4af37;
font-size: 0.75rem;
font-weight: 700;
border-radius: 8px;
letter-spacing: 0.5px;
}
.block-header h2 {
font-size: 1.2rem;
font-weight: 700;
color: #1e3050;
margin: 0;
}
.content-block p {
color: #475569;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.content-block a {
color: #d4af37;
text-decoration: underline;
transition: color 0.2s ease;
}
.content-block a:hover { color: #b8951f; }
/* Карточки допустимо/запрещено */
.info-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.25rem;
}
.info-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: 10px;
}
.info-card svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.allowed {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.allowed svg { color: #16a34a; }
.forbidden {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.forbidden svg { color: #dc2626; }
.info-card strong {
display: block;
font-size: 0.88rem;
margin-bottom: 0.2rem;
}
.info-card span {
color: #64748b;
font-size: 0.82rem;
}
/* Простой список */
.simple-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.6rem;
}
.simple-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: #475569;
font-size: 0.95rem;
line-height: 1.5;
}
.simple-list li::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
background: #d4af37;
border-radius: 50%;
margin-top: 0.5rem;
}
/* Выделенный блок контактов */
.highlight-block {
background: linear-gradient(135deg, #0a2540, #1e3050);
border: none;
}
.highlight-block .block-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
.highlight-block .block-number { background: rgba(212, 175, 55, 0.2); }
.highlight-block .block-header h2 { color: #ffffff; }
.highlight-block p { color: rgba(255, 255, 255, 0.7); }
.contact-cards {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.contact-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
transition: all 0.2s ease;
}
.contact-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-card svg { width: 20px; height: 20px; color: #d4af37; flex-shrink: 0; }
.contact-card a { color: #d4af37; text-decoration: none; font-weight: 600; }
.contact-card a:hover { text-decoration: underline; }
/* Адаптивность */
@media (max-width: 768px) {
.page-hero { padding: 3rem 1rem 3rem; }
.page-nav {
margin: -1rem 1rem 2rem;
padding: 1rem;
gap: 0.35rem;
}
.nav-link { font-size: 0.75rem; padding: 0.4rem 0.75rem; }
.content { padding: 0 1rem 3rem; }
.content-block { padding: 1.5rem; }
.info-cards { grid-template-columns: 1fr; }
.contact-cards { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.content-block, .nav-link, .contact-card { transition: none; }
}
</style>

1
frontend/src/styles/global.css
View file

@ -2,6 +2,7 @@
:root {
--site-max-width: 1400px;
--color-light: #ffffff;
}
html, body {