/* ===================================================== ПСА — Промышленные системы автоматизации Шаблон: new_design | Базируется на: HTML5 UP Editorial Цветовая схема: тёмная | Акцент: #e86b2a Шрифты: Oswald (заголовки) / Inter (текст) ===================================================== */ /* ─── ПЕРЕМЕННЫЕ ────────────────────────────────────── */ :root { --accent: #e86b2a; --accent-hover: #d45c1e; --accent-light: rgba(232, 107, 42, 0.15); --bg-dark: #0f1117; --bg-card: #1a1d27; --bg-sidebar: #13151f; --border: rgba(255,255,255,0.08); --text-main: #c8cdd8; --text-light: #8a909e; --text-heading: #edf0f5; --white: #ffffff; --sidebar-w: 300px; --transition: 0.25s ease; --radius: 8px; } /* ─── RESET ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7; -webkit-text-size-adjust: none; } body.is-preload *, body.is-preload *::before, body.is-preload *::after, body.is-resizing *, body.is-resizing *::before, body.is-resizing *::after { transition: none !important; animation: none !important; } /* ─── ТИПОГРАФИКА ───────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; color: var(--text-heading); font-weight: 600; line-height: 1.25; margin: 0 0 0.75em; text-transform: uppercase; letter-spacing: 0.03em; } h1 { font-size: 2.8em; } h2 { font-size: 1.9em; } h3 { font-size: 1.3em; } h4 { font-size: 1.1em; } p { margin: 0 0 1.4em; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } strong, b { color: var(--text-heading); font-weight: 600; } .accent { color: var(--accent); } @media (max-width: 980px) { h1 { font-size: 2.2em; } h2 { font-size: 1.6em; } } @media (max-width: 480px) { h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } } /* ─── GRID (упрощённая версия HTML5UP) ──────────────── */ .row { display: flex; flex-wrap: wrap; margin: 0 -1em; } .row > * { padding: 0 1em; } .col-4 { width: 33.333%; } .col-6 { width: 50%; } .col-8 { width: 66.666%; } .col-12 { width: 100%; } .gtr-uniform > * { margin-bottom: 1.5em; } @media (max-width: 736px) { .col-12-small { width: 100% !important; } } @media (max-width: 480px) { .col-12-xsmall { width: 100% !important; } } /* ─── ОБЁРТКА (Editorial layout) ────────────────────── */ #wrapper { display: flex; min-height: 100vh; } /* ─── SIDEBAR ───────────────────────────────────────── */ #sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); width: var(--sidebar-w); min-width: var(--sidebar-w); position: sticky; top: 0; height: 100vh; overflow: hidden; transition: width var(--transition), min-width var(--transition), transform 0.4s ease; z-index: 100; } #sidebar .inner { height: 100%; overflow-y: auto; padding: 2em 1.5em; display: flex; flex-direction: column; gap: 2em; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #sidebar .inner::-webkit-scrollbar { width: 4px; } #sidebar .inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Кнопка toggle (добавляется через JS из main.js) */ #sidebar .toggle { display: none; position: absolute; right: -3em; top: 1em; width: 3em; height: 3em; background: var(--bg-sidebar); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--radius) var(--radius) 0; text-indent: -9999px; overflow: hidden; cursor: pointer; align-items: center; justify-content: center; } #sidebar .toggle::before { content: '\f0c9'; font-family: 'Font Awesome 6 Free'; font-weight: 900; text-indent: 0; position: absolute; font-size: 1.1em; color: var(--text-light); } /* Лого в сайдбаре */ #sidebar-logo { padding-bottom: 1.5em; border-bottom: 1px solid var(--border); } .sidebar-logo-link { display: flex; align-items: center; gap: 0.8em; text-decoration: none; color: inherit; } .sidebar-logo-icon { width: 44px; height: 44px; background: var(--accent); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.3em; color: #fff; flex-shrink: 0; } .sidebar-logo-text strong { display: block; font-family: 'Oswald', sans-serif; font-size: 1.2em; color: var(--text-heading); letter-spacing: 0.05em; } .sidebar-logo-text small { font-size: 0.72em; color: var(--text-light); line-height: 1.3; } /* Меню в сайдбаре */ #menu header.major { margin-bottom: 0.75em; } #menu header.major h2 { font-size: 0.65em; letter-spacing: 0.2em; color: var(--text-light); border-bottom: 1px solid var(--border); padding-bottom: 0.5em; margin-bottom: 0.75em; } #menu ul { list-style: none; } #menu ul li a { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.75em; border-radius: var(--radius); color: var(--text-main); font-size: 0.9em; font-weight: 500; transition: background var(--transition), color var(--transition); text-decoration: none; border-bottom: none; } #menu ul li a i { width: 18px; text-align: center; color: var(--text-light); transition: color var(--transition); } #menu ul li a:hover { background: var(--accent-light); color: var(--accent); } #menu ul li a:hover i { color: var(--accent); } /* Контакты в сайдбаре */ #sidebar-contacts header.major h2 { font-size: 0.65em; letter-spacing: 0.2em; color: var(--text-light); border-bottom: 1px solid var(--border); padding-bottom: 0.5em; margin-bottom: 0.75em; } .sidebar-contact-item { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85em; color: var(--text-main); margin-bottom: 0.5em !important; } .sidebar-contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; } .sidebar-contact-item a { color: var(--text-main); } .sidebar-contact-item a:hover { color: var(--accent); } .sidebar-icons { display: flex; gap: 0.5em; list-style: none; margin-top: 0.75em; } .sidebar-icons li a { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 0.9em; transition: background var(--transition), color var(--transition), border-color var(--transition); text-decoration: none; } .sidebar-icons li a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .sidebar-icons .label { display: none; } /* Футер сайдбара */ #sidebar-footer { margin-top: auto; padding-top: 1em; border-top: 1px solid var(--border); font-size: 0.75em; color: var(--text-light); } /* ─── ОСНОВНАЯ ОБЛАСТЬ ──────────────────────────────── */ #main { flex: 1; min-width: 0; overflow: hidden; } #main > .inner { max-width: 1100px; margin: 0 auto; padding: 2em 3em; } /* Мобильная шапка (скрыта на десктопе) */ #topbar { display: none; } /* ─── SECTION HEADERS ───────────────────────────────── */ header.major { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 2px solid var(--accent); } header.major h2 { margin-bottom: 0; position: relative; } header.major h2::after { content: ''; display: block; width: 3em; height: 3px; background: var(--accent); margin-top: 0.4em; border-radius: 2px; } section { margin-bottom: 3.5em; } /* ─── HERO / BANNER ─────────────────────────────────── */ #banner { display: flex; align-items: center; gap: 3em; padding: 3em 0 2em; margin-bottom: 3.5em; } #banner .content { flex: 1; } #banner .content header h1 { font-size: 2.8em; margin-bottom: 0.3em; line-height: 1.15; } #banner .content header p { font-size: 1em; color: var(--accent); letter-spacing: 0.1em; font-weight: 500; margin-bottom: 1.5em; font-family: 'Oswald', sans-serif; } #banner .content > p { color: var(--text-main); font-size: 0.95em; line-height: 1.8; margin-bottom: 2em; } .hero-image { width: 380px; min-width: 280px; height: 320px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); } .hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-card) 0%, #20243a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; color: var(--text-light); } .hero-placeholder i { font-size: 4em; color: var(--accent); opacity: 0.6; } .hero-placeholder p { font-size: 0.85em; text-align: center; line-height: 1.5; } @media (max-width: 980px) { #banner { flex-direction: column; } .hero-image { width: 100%; min-width: unset; } } /* ─── БРЕНДЫ ────────────────────────────────────────── */ .brands-grid { display: flex; flex-wrap: wrap; gap: 1em; } .brand-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75em 1.25em; display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; font-weight: 500; color: var(--text-main); transition: border-color var(--transition), color var(--transition); cursor: default; } .brand-item i { color: var(--accent); } .brand-item:hover { border-color: var(--accent); color: var(--text-heading); } /* ─── FEATURES (услуги) ─────────────────────────────── */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em; } .features article { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5em; display: flex; gap: 1.2em; transition: border-color var(--transition), transform var(--transition); } .features article:hover { border-color: var(--accent); transform: translateY(-3px); } .features article .icon { width: 48px; height: 48px; background: var(--accent-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.3em; color: var(--accent); flex-shrink: 0; } .features article .content h3 { font-size: 1em; margin-bottom: 0.4em; } .features article .content p { font-size: 0.88em; margin: 0; color: var(--text-main); } @media (max-width: 736px) { .features { grid-template-columns: 1fr; } } /* ─── ABOUT — статистика ────────────────────────────── */ .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; list-style: none; margin-top: 2em; } .about-stats li { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1em; text-align: center; } .stat-number { display: block; font-family: 'Oswald', sans-serif; font-size: 2em; color: var(--accent); font-weight: 700; } .stat-label { font-size: 0.78em; color: var(--text-light); } /* About scheme */ .about-scheme { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5em; } .scheme-step { display: flex; align-items: center; gap: 1em; padding: 0.75em 0; } .scheme-num { width: 36px; height: 36px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 0.85em; color: #fff; font-weight: 700; flex-shrink: 0; } .scheme-step--last .scheme-num { background: var(--accent-hover); } .scheme-text { font-size: 0.9em; color: var(--text-main); font-weight: 500; } .scheme-arrow { text-align: left; padding-left: 1em; color: var(--text-light); font-size: 0.75em; } /* ─── POSTS (продукты / новости) ────────────────────── */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; } .posts article { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5em; display: flex; flex-direction: column; transition: border-color var(--transition), transform var(--transition); } .posts article:hover { border-color: var(--accent); transform: translateY(-3px); } .posts article h3 { font-size: 1em; margin-bottom: 0.6em; } .posts article p { font-size: 0.88em; flex: 1; margin-bottom: 1em; } .product-icon { width: 48px; height: 48px; background: var(--accent-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.4em; color: var(--accent); margin-bottom: 1em; } .news-date { display: inline-block; font-size: 0.75em; color: var(--accent); font-family: 'Oswald', sans-serif; letter-spacing: 0.05em; margin-bottom: 0.5em; } @media (max-width: 980px) { .posts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .posts { grid-template-columns: 1fr; } } /* ─── CTA BLOCK ─────────────────────────────────────── */ .cta-block { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); border-radius: var(--radius); padding: 3em; text-align: center; margin: 2em 0 3.5em; } .cta-block h2 { color: #fff; margin-bottom: 0.5em; } .cta-block p { color: rgba(255,255,255,0.85); margin-bottom: 2em; font-size: 0.95em; } .cta-block .button { background: #fff; color: var(--accent); } .cta-block .button:hover { background: rgba(255,255,255,0.9); } .cta-block .button.primary { background: rgba(0,0,0,0.2); color: #fff; border-color: rgba(255,255,255,0.4); } .cta-block .button.primary:hover { background: rgba(0,0,0,0.35); } /* ─── CONTACTS ──────────────────────────────────────── */ ul.contact { list-style: none; font-size: 0.9em; } ul.contact li { padding: 0.75em 0; border-bottom: 1px solid var(--border); display: flex; gap: 0.75em; align-items: flex-start; } ul.contact li::before { display: none; } ul.contact li.icon::before { content: ''; display: none; } /* Иконки через FA класс на li */ ul.contact li[class*="fa-"] { padding-left: 0; } ul.contact li[class*="fa-"]::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--accent); width: 20px; flex-shrink: 0; margin-top: 2px; } ul.contact li.icon.fa-map-marker-alt::before { content: '\f3c5'; } ul.contact li.icon.fa-phone::before { content: '\f095'; } ul.contact li.icon.fa-envelope::before { content: '\f0e0'; } ul.contact li.icon.fa-clock::before { content: '\f017'; } ul.contact li strong { display: block; color: var(--text-heading); font-size: 0.85em; margin-bottom: 0.2em; } ul.contact li a { color: var(--text-main); } ul.contact li a:hover { color: var(--accent); } /* ─── ФОРМА ─────────────────────────────────────────── */ .feedback-form input, .feedback-form select, .feedback-form textarea { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 0.9em; padding: 0.75em 1em; transition: border-color var(--transition); -webkit-appearance: none; appearance: none; } .feedback-form input::placeholder, .feedback-form textarea::placeholder { color: var(--text-light); } .feedback-form input:focus, .feedback-form select:focus, .feedback-form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-light); } .feedback-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238a909e' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.5em; cursor: pointer; } .feedback-form select option { background: var(--bg-card); color: var(--text-main); } .feedback-form textarea { resize: vertical; min-height: 100px; } .form-message { padding: 1em 1.25em; border-radius: var(--radius); margin-bottom: 1.5em; display: flex; align-items: flex-start; gap: 0.75em; font-size: 0.9em; } .form-message i { font-size: 1.2em; flex-shrink: 0; margin-top: 1px; } .form-message--success { background: rgba(39, 174, 96, 0.12); border: 1px solid rgba(39, 174, 96, 0.3); color: #27ae60; } .form-message--error { background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.3); color: #e74c3c; } .form-note { display: block; font-size: 0.78em; color: var(--text-light); margin-top: 0.5em; } .form-note a { color: var(--text-light); text-decoration: underline; } /* ─── КНОПКИ ────────────────────────────────────────── */ .actions { display: flex; flex-wrap: wrap; gap: 0.75em; list-style: none; align-items: center; } .button { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.65em 1.5em; border: 2px solid var(--border); border-radius: var(--radius); font-family: 'Oswald', sans-serif; font-size: 0.85em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-heading); background: transparent; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); text-decoration: none; } .button:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .button.big { padding: 0.85em 2em; font-size: 0.95em; } /* ─── МОБИЛЬНЫЙ ТОП-БАР (<=large breakpoint 1280px) ─── */ @media (max-width: 1280px) { #sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(0); z-index: 200; } #sidebar.inactive { transform: translateX(-100%); } #sidebar .toggle { display: flex; } #main { margin-left: 0; width: 100%; } #topbar { display: flex; align-items: center; justify-content: space-between; padding: 1em 1.5em; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar-logo { display: flex; align-items: center; gap: 0.6em; font-family: 'Oswald', sans-serif; font-size: 1.1em; color: var(--text-heading); text-decoration: none; letter-spacing: 0.05em; } .topbar-logo i { color: var(--accent); } .topbar-phone { display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: var(--text-main); text-decoration: none; } .topbar-phone i { color: var(--accent); } .topbar-phone:hover { color: var(--accent); } #main > .inner { padding: 1.5em; } } @media (max-width: 480px) { #main > .inner { padding: 1em; } .cta-block { padding: 2em 1.25em; } .about-stats { grid-template-columns: repeat(2, 1fr); } .row { margin: 0; } .row > * { padding: 0; margin-bottom: 1.5em; } } /* ─── БИТРИКС: панель администратора ──────────────────────── CSS шаблона подключается ПОСЛЕ панели в header.php, поэтому здесь никаких переопределений не требуется. ─────────────────────────────────────────────────────────── */ /* ─── УТИЛИТЫ ───────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ======================================================================= ВСТАВЬТЕ ЭТОТ БЛОК В САМЫЙ КОНЕЦ ВАШЕГО style.css Полностью заменяет все предыдущие дополнения (если были). ======================================================================= */ /* ── ПЕРЕМЕННЫЕ ──────────────────────────────────────────────────────── */ :root { --bx-panel-h: 0px; /* Высота панели Битрикса — обновляется JS */ --header-h: 72px; /* Высота шапки сайта */ --nav-w: 300px; /* Ширина выдвижного меню */ --accent: #e86b2a; --accent-dk: #c55820; --bg: #0f1117; --bg-card: #1a1d26; --text: #f0f2f8; --muted: #8b92a8; --border: rgba(255,255,255,0.08); } /* ── СМЕЩЕНИЕ КОНТЕНТА ───────────────────────────────────────────────── */ body { margin: 0; padding: 0; } #page-content { padding-top: calc(var(--header-h) + var(--bx-panel-h)); min-height: 60vh; } /* ── ШАПКА ───────────────────────────────────────────────────────────── */ /*.site-header { position: fixed !important; /* Всегда фиксирована, никогда не скроллится */ top: var(--bx-panel-h) !important; left: 0; right: 0; z-index: 500; /* Ниже панели Битрикса (z-index ~9999) */ height: var(--header-h); background: rgba(15,17,23,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: box-shadow .3s ease; } */ .site-header.is-scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.55); border-bottom-color: rgba(232,107,42,.2); } .header-inner { display: flex; align-items: center; gap: 16px; max-width: 1360px; margin: 0 auto; padding: 0 24px; height: 100%; } /* ── ЛЕВАЯ ЧАСТЬ ШАПКИ ───────────────────────────────────────────────── */ .header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* БУРГЕР */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; } .nav-toggle:hover { background: rgba(232,107,42,.14); border-color: var(--accent); } .burger-line { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; pointer-events: none; } .nav-toggle[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ЛОГОТИП */ .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .logo-name { display: block; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .04em; line-height: 1; color: var(--text); } .logo-tagline { display: block; font-family: 'Inter', sans-serif; font-size: 10px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; line-height: 1; margin-top: 3px; } /* ── КОНТАКТЫ В ШАПКЕ ────────────────────────────────────────────────── */ .header-contacts { display: flex; align-items: center; gap: 28px; margin: 0 auto; } .header-contact-item { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); transition: color .2s; } .header-contact-item:hover { color: var(--accent); } .contact-icon { color: var(--accent); flex-shrink: 0; } .contact-col { display: flex; flex-direction: column; line-height: 1.2; } .contact-label { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .contact-value { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--text); } /* ── CTA В ШАПКЕ ─────────────────────────────────────────────────────── */ .header-right { flex-shrink: 0; } .btn-header-cta { display: inline-block; padding: 10px 22px; background: var(--accent); color: #fff !important; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-radius: 4px; white-space: nowrap; transition: background .2s, transform .15s, box-shadow .2s; } .btn-header-cta:hover { background: var(--accent-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,107,42,.35); } /* ── НАВИГАЦИОННОЕ МЕНЮ (DRAWER) ─────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--nav-w); z-index: 1000; background: #131620; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; /* ЗАКРЫТО по умолчанию — ключевое! */ transform: translateX(-100%); visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; } .site-nav.is-open { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; } .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: var(--header-h); border-bottom: 1px solid var(--border); flex-shrink: 0; } .nav-title { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .nav-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text); transition: background .2s, border-color .2s, color .2s; } .nav-close:hover { background: rgba(232,107,42,.12); border-color: var(--accent); color: var(--accent); } .nav-list { list-style: none; margin: 0; padding: 10px 0; flex: 1; } .nav-list li { margin: 0; } .nav-link { display: block; padding: 12px 20px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; } .nav-link:hover, .nav-link.is-active { background: rgba(232,107,42,.1); color: var(--accent); border-left-color: var(--accent); } /* Подпункты (подуслуги) — чуть мельче и сдвинуты */ .nav-sub { padding-left: 32px; font-size: 13px; color: var(--muted); } .nav-sub:hover { color: var(--accent); } .nav-footer { padding: 16px 20px 28px; border-top: 1px solid var(--border); } .nav-phone { display: block; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; color: var(--accent); text-decoration: none; margin-bottom: 6px; letter-spacing: .02em; } .nav-footer-note { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); margin: 0; } /* ── ОВЕРЛЕЙ ─────────────────────────────────────────────────────────── */ .nav-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.65); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .nav-overlay.is-visible { opacity: 1; pointer-events: auto; } /* ── ЗАГОЛОВКИ СЕКЦИЙ — ПО ЦЕНТРУ ────────────────────────────────────── */ .section-tag, .section-title, .section-desc { text-align: center; } section > div > h2, section > h2 { text-align: center; } /* ── ПОДВАЛ ──────────────────────────────────────────────────────────── */ .site-footer { background: #0a0c12; border-top: 1px solid var(--border); padding-top: 56px; } /* 4 колонки в ряд */ .footer-inner { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.8fr; gap: 48px 40px; max-width: 1360px; margin: 0 auto; padding: 0 24px 48px; align-items: start; } .footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; } .footer-logo-name { font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: .05em; } .footer-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 14px; max-width: 280px; } .footer-since { display: inline-block; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; } .footer-since b { color: var(--accent); font-weight: 600; } .footer-col-title { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-family: 'Inter', sans-serif; font-size: 14px; color: #c8ccd8; text-decoration: none; transition: color .2s, padding-left .2s; } .footer-links a:hover { color: var(--accent); padding-left: 4px; } .footer-contacts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .footer-contacts-list li { display: flex; align-items: flex-start; gap: 10px; } .footer-contacts-list li > div { display: flex; flex-direction: column; gap: 2px; } .fc-lbl { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .footer-contacts-list a, .footer-contacts-list span:not(.fc-lbl) { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); text-decoration: none; line-height: 1.4; transition: color .2s; } .footer-contacts-list a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1360px; margin: 0 auto; padding: 16px 24px; border-top: 1px solid var(--border); } .footer-copy { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); margin: 0; } .footer-top-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 4px; padding: 5px 12px; transition: color .2s, border-color .2s, background .2s; } .footer-top-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(232,107,42,.08); } /* ── АДАПТИВНОСТЬ ────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 1024px) { .header-contacts { gap: 18px; } } @media (max-width: 768px) { :root { --header-h: 60px; } .header-contacts { display: none; } .logo-tagline { display: none; } .btn-header-cta { padding: 7px 14px; font-size: 12px; } .footer-inner { grid-template-columns: 1fr; gap: 24px; } .footer-brand { grid-column: auto; } } @media (max-width: 480px) { .header-right { display: none; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } }