/* ========================================================================= Лендинг «Сварочные работы в Ставрополе» — основной CSS Один файл (минифицируется на деплое). Критический CSS вынесен инлайном в index.html (токены, reset, шапка, hero) ради LCP/CLS. Здесь — остальные секции, компоненты, анимации. ========================================================================= */ /* ------------------------------------------------------------------------- 1. @font-face — self-hosted woff2 (скачаны в assets/fonts/) Manrope v20 и Oswald v57 поставляются как вариативные файлы с одним woff2 на подмножество символов, поэтому один файл обслуживает несколько весов в пределах диапазона. Подключаем cyrillic + latin подмножества. font-display: swap — текст виден сразу фолбэком, без FOIT. ------------------------------------------------------------------------- */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/oswald-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('../fonts/oswald-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------------- ВАЖНО: токены палитры (:root), базовый reset, стили .site-header и .hero продублированы инлайном в index.html как критический CSS. Здесь они повторены для случая standalone-страниц (privacy/consent), которые подключают только этот файл. ------------------------------------------------------------------------- */ :root { /* Палитра — ТЗ 3.2 */ --steel-900: #1c1f24; --steel-800: #24282f; --steel-700: #33383f; --steel-300: #9aa1a9; --steel-100: #e6e9ed; --flame-500: #f59e0b; --flame-400: #fbbf24; --flame-900: #7c4a02; --white: #ffffff; --success: #16a34a; --light-bg: #f7f8f9; /* Шрифты */ --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Раскладка */ --container: 1180px; --gutter: clamp(16px, 4vw, 32px); --radius: 14px; --radius-sm: 10px; /* Тени */ --shadow-card: 0 6px 24px rgba(0, 0, 0, .28); --shadow-flame: 0 8px 30px rgba(245, 158, 11, .28); --ease: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--steel-100); background: var(--steel-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--flame-400); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: .01em; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* Видимый фокус для клавиатуры (a11y) */ :focus-visible { outline: 3px solid var(--flame-400); outline-offset: 2px; border-radius: 4px; } /* Скрытый, но доступный скринридерам текст */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip-link */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--flame-500); color: var(--steel-900); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 8px; text-decoration: none; } /* ------------------------------------------------------------------------- 2. Сетка / контейнеры / секции ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* .section — базовый контейнер секции (переиспользуется на юр-страницах) */ .section { padding-block: clamp(56px, 8vw, 104px); position: relative; } .section--light { background: var(--light-bg); color: var(--steel-900); } .section--dark { background: var(--steel-900); color: var(--steel-100); } .section--steel { background: var(--steel-800); color: var(--steel-100); } .section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); } .section--center .section__head { margin-inline: auto; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--flame-500); margin-bottom: 14px; } .section--light .eyebrow { color: var(--flame-900); } h2 { font-size: clamp(30px, 4.4vw, 40px); } h3 { font-size: 22px; } .lead { color: var(--steel-300); font-size: clamp(17px, 2.2vw, 19px); } .section--light .lead { color: #525a63; } /* ------------------------------------------------------------------------- 3. Кнопки ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 26px; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--flame-500); color: var(--steel-900); } .btn--primary:hover { background: var(--flame-400); box-shadow: var(--shadow-flame); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--steel-100); border-color: var(--steel-700); } .btn--ghost:hover { border-color: var(--flame-500); color: var(--white); transform: translateY(-2px); } .section--light .btn--ghost { color: var(--steel-900); border-color: #c8ccd1; } .section--light .btn--ghost:hover { border-color: var(--flame-500); color: var(--steel-900); } .btn--wa { background: #25d366; color: #06351b; } .btn--wa:hover { background: #34e27a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.3); } .btn--tg { background: #2aabee; color: #04293a; } .btn--tg:hover { background: #45bdf9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42,171,238,.3); } .btn--block { width: 100%; } .btn--lg { min-height: 56px; padding: 16px 32px; font-size: 17px; } /* ------------------------------------------------------------------------- 4. Шапка (.site-header) — критический CSS, продублирован инлайном ------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(28, 31, 36, .55); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease); } .site-header.is-scrolled { background: rgba(20, 23, 27, .96); border-bottom-color: var(--steel-700); } .site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand:hover { text-decoration: none; } .brand__mark { flex: none; width: 38px; height: 38px; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .02em; color: var(--white); text-transform: uppercase; } .brand__tag { font-size: 11.5px; color: var(--steel-300); letter-spacing: .02em; } .main-nav { margin-inline: auto; } .main-nav__list { display: flex; gap: 28px; } .main-nav__link { color: var(--steel-100); font-weight: 500; font-size: 15px; padding: 6px 2px; position: relative; } .main-nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--flame-500); transition: width .2s var(--ease); } .main-nav__link:hover { text-decoration: none; color: var(--white); } .main-nav__link:hover::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; } .header-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--white); letter-spacing: .01em; white-space: nowrap; } .header-phone:hover { text-decoration: none; color: var(--flame-400); } .header-phone svg { width: 18px; height: 18px; } /* Иконочные кнопки (телефон/бургер) — мобайл */ .icon-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--steel-700); border-radius: var(--radius-sm); color: var(--steel-100); cursor: pointer; } .icon-btn svg { width: 22px; height: 22px; } .icon-btn:hover { border-color: var(--flame-500); color: var(--white); } /* Бургер-иконка анимация */ .burger-line { transition: transform .25s var(--ease), opacity .2s var(--ease); transform-origin: center; } .nav-toggle[aria-expanded="true"] .burger-line--1 { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .burger-line--2 { opacity: 0; } .nav-toggle[aria-expanded="true"] .burger-line--3 { transform: translateY(-6px) rotate(-45deg); } /* Мобильное меню (выезжающая панель) */ .mobile-menu { position: fixed; inset: 68px 0 0 0; z-index: 99; background: rgba(20, 23, 27, .98); backdrop-filter: blur(8px); padding: 24px var(--gutter) 40px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; overflow-y: auto; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-menu__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; } .mobile-menu__link { display: block; padding: 14px 4px; font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--steel-100); border-bottom: 1px solid var(--steel-800); } .mobile-menu__link:hover { text-decoration: none; color: var(--flame-400); } .mobile-menu .btn { width: 100%; } .mobile-menu__phone { margin-top: 14px; justify-content: center; } body.menu-open { overflow: hidden; } /* ------------------------------------------------------------------------- 5. Hero — критический CSS, продублирован инлайном ------------------------------------------------------------------------- */ .hero { position: relative; padding-top: clamp(110px, 16vw, 168px); padding-bottom: clamp(56px, 9vw, 96px); background: radial-gradient(1100px 540px at 78% -8%, rgba(245, 158, 11, .14), transparent 60%), linear-gradient(180deg, #15181c 0%, var(--steel-900) 60%, var(--steel-800) 100%); overflow: hidden; } /* Текстура «насечки металла» поверх фона */ .hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 9px); pointer-events: none; } .hero__inner { position: relative; z-index: 2; } .hero__content { max-width: 760px; } .hero h1 { font-size: clamp(33px, 6vw, 56px); font-weight: 600; letter-spacing: .005em; margin-bottom: 18px; } .hero h1 .accent { color: var(--flame-500); } .hero__sub { color: var(--steel-300); font-size: clamp(16px, 2.4vw, 19px); max-width: 540px; margin-bottom: 28px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 22px; border-top: 1px solid var(--steel-700); } .hero__fact { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--steel-100); } .hero__fact svg { width: 18px; height: 18px; flex: none; color: var(--flame-500); } /* Ambient-искры (CSS) — лёгкие точки, дрейфующие вверх */ .sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .spark { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--flame-400); box-shadow: 0 0 6px 1px rgba(251, 191, 36, .8); opacity: 0; animation: spark-rise var(--dur, 6s) var(--delay, 0s) linear infinite; } @keyframes spark-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 10% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translateY(-72vh) translateX(var(--drift, 20px)) scale(.3); opacity: 0; } } /* Staggered fade-up текста hero при загрузке */ .hero .fade-in { opacity: 0; transform: translateY(16px); animation: fade-up .7s var(--ease) forwards; } .hero .fade-in:nth-child(1) { animation-delay: .05s; } .hero__content > .fade-in:nth-child(2) { animation-delay: .14s; } .hero__content > .fade-in:nth-child(3) { animation-delay: .23s; } .hero__content > .fade-in:nth-child(4) { animation-delay: .32s; } .hero__content > .fade-in:nth-child(5) { animation-delay: .41s; } @keyframes fade-up { to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- 6. Сварной шов — разделитель секций (фишка 3.4) Используется как
между секциями + в «Этапах». ------------------------------------------------------------------------- */ .weld-seam { position: relative; height: 26px; margin: 0; overflow: hidden; background: inherit; } .weld-seam svg { width: 100%; height: 100%; display: block; } /* Линия шва: рисуется через dashoffset, триггер — .is-welded из observer */ .weld-seam__line { fill: none; stroke: var(--flame-500); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); } .weld-seam.is-welded .weld-seam__line { animation: weld-draw 1.1s var(--ease) forwards; } @keyframes weld-draw { to { stroke-dashoffset: 0; } } /* Капли наплавленного металла */ .weld-seam__bead { fill: var(--flame-500); opacity: 0; transform-box: fill-box; transform-origin: center; } .weld-seam.is-welded .weld-seam__bead { animation: bead-pop .4s var(--ease) forwards; } @keyframes bead-pop { 0% { opacity: 0; transform: scale(0); } 60% { transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } } /* Вспышка искр в конце шва */ .weld-seam__flash { fill: var(--flame-400); opacity: 0; transform-box: fill-box; transform-origin: center; } .weld-seam.is-welded .weld-seam__flash { animation: weld-flash 1s var(--ease) 1s forwards; } @keyframes weld-flash { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(2); } } /* ------------------------------------------------------------------------- 7. Анимация появления секций по скроллу (fade-up + stagger) ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger через inline --i (выставляет JS или порядок) */ .reveal[style*="--i"] { transition-delay: calc(var(--i) * 70ms); } /* ------------------------------------------------------------------------- 8. Услуги — карточки ------------------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { background: var(--steel-800); border: 1px solid var(--steel-700); border-radius: var(--radius); padding: 28px 26px; transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .section--light .card { background: var(--white); border-color: #e2e5e9; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .card:hover { transform: translateY(-6px); border-color: var(--flame-500); box-shadow: var(--shadow-card); } .card__icon { width: 52px; height: 52px; margin-bottom: 18px; color: var(--flame-500); } .card__icon svg { width: 100%; height: 100%; } .card__title { font-size: 21px; margin-bottom: 8px; } .section--light .card__title { color: var(--steel-900); } .card__text { color: var(--steel-300); font-size: 15.5px; margin: 0; } .section--light .card__text { color: #5b636c; } /* ------------------------------------------------------------------------- 9. Почему я — список с зелёными галочками ------------------------------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; } .why-item { display: flex; gap: 16px; align-items: flex-start; } .why-item__check { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(22, 163, 74, .14); color: var(--success); display: flex; align-items: center; justify-content: center; } .why-item__check svg { width: 18px; height: 18px; } .why-item__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 3px; } .section--light .why-item__title { color: var(--steel-900); } .why-item__text { color: var(--steel-300); font-size: 15px; margin: 0; } .section--light .why-item__text { color: #5b636c; } /* ------------------------------------------------------------------------- 11. Этапы работы — горизонтальная лента со сварным швом ------------------------------------------------------------------------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* SVG-шов, соединяющий шаги (поверх, за номерами) */ .steps__seam { position: absolute; left: 6%; right: 6%; top: 30px; height: 24px; z-index: 0; pointer-events: none; } .steps__seam svg { width: 100%; height: 100%; } @media (max-width: 720px) { .steps__seam { display: none; } } .step { position: relative; z-index: 1; text-align: center; padding: 0 6px; } .step__num { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--steel-900); border: 2px solid var(--flame-500); color: var(--flame-500); font-family: var(--font-display); font-weight: 600; font-size: 26px; display: flex; align-items: center; justify-content: center; } .section--light .step__num { background: var(--light-bg); } .step__title { font-size: 19px; margin-bottom: 6px; } .section--light .step__title { color: var(--steel-900); } .step__text { color: var(--steel-300); font-size: 14.5px; margin: 0; } .section--light .step__text { color: #5b636c; } /* ------------------------------------------------------------------------- 12. Цены — таблица ------------------------------------------------------------------------- */ .price-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.06); font-size: 16.5px; } .price-table caption { text-align: left; margin-bottom: 10px; color: #5b636c; font-size: 14px; } .price-table th, .price-table td { padding: 16px 22px; text-align: left; color: var(--steel-900); } .price-table thead th { background: var(--steel-900); color: var(--steel-100); font-family: var(--font-display); font-weight: 500; letter-spacing: .02em; } .price-table thead th:last-child, .price-table td:last-child { text-align: right; } .price-table tbody tr { border-top: 1px solid #ebedf0; } .price-table tbody tr:nth-child(even) { background: #fafbfc; } .price-table .price-val { font-family: var(--font-display); font-weight: 600; color: var(--flame-900); white-space: nowrap; } .price-note { margin-top: 18px; display: flex; align-items: center; gap: 10px; color: #5b636c; font-size: 15.5px; } .price-note svg { width: 22px; height: 22px; color: var(--success); flex: none; } /* ------------------------------------------------------------------------- 13. Отзывы ------------------------------------------------------------------------- */ .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; } .review-card { background: var(--steel-800); border: 1px solid var(--steel-700); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; } .review-card__stars { color: var(--flame-500); letter-spacing: 3px; font-size: 17px; } .review-card__text { color: var(--steel-300); font-style: italic; margin: 0; flex: 1; } .review-card__ph code { color: var(--flame-400); } .review-card__author { color: var(--steel-100); font-weight: 700; font-size: 14.5px; } .rating-badge { display: inline-flex; align-items: center; gap: 14px; background: var(--steel-800); border: 1px solid var(--steel-700); border-radius: var(--radius); padding: 16px 22px; } .rating-badge__score { font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--flame-500); line-height: 1; } .rating-badge__meta { display: flex; flex-direction: column; gap: 2px; } .rating-badge__stars { color: var(--flame-500); letter-spacing: 2px; } .rating-badge__link { font-size: 14px; } /* ------------------------------------------------------------------------- 14. Форма заявки ------------------------------------------------------------------------- */ .lead-block { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 56px); align-items: start; } .lead-form { background: var(--steel-800); border: 1px solid var(--steel-700); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 7px; color: var(--steel-100); } .field .req { color: var(--flame-500); } .field input, .field textarea { width: 100%; padding: 13px 15px; font-family: var(--font-body); font-size: 16px; color: var(--white); background: var(--steel-900); border: 1.5px solid var(--steel-700); border-radius: var(--radius-sm); transition: border-color .18s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: #6b727b; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--flame-500); } .field textarea { resize: vertical; min-height: 92px; } .field.has-error input, .field.has-error textarea { border-color: #ef4444; } .field__error { display: none; color: #f87171; font-size: 13px; margin-top: 6px; } .field.has-error .field__error { display: block; } /* Honeypot — скрыто от людей, видно ботам */ .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* Чекбокс согласия */ .consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; font-size: 14px; color: var(--steel-300); } .consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--flame-500); cursor: pointer; } .consent label { cursor: pointer; line-height: 1.45; } .consent a { text-decoration: underline; } /* Состояние отправки/успеха */ .form-status { margin-top: 16px; font-size: 15px; display: none; } .form-status.is-active { display: block; } .form-status--success { color: var(--success); } .form-status--error { color: #f87171; } .btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(28,31,36,.4); border-top-color: var(--steel-900); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .form-alt { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--steel-700); } .form-alt__label { font-size: 14px; color: var(--steel-300); margin-bottom: 12px; } .form-alt__btns { display: flex; gap: 12px; flex-wrap: wrap; } .form-alt__btns .btn { flex: 1; min-width: 150px; } .lead-aside { padding-top: 6px; } .lead-aside h3 { color: var(--steel-100); } .lead-aside .lead { color: var(--steel-300); } .lead-aside ul { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .lead-aside li { display: flex; gap: 12px; align-items: flex-start; color: var(--steel-100); font-size: 15.5px; } .lead-aside li svg { width: 22px; height: 22px; color: var(--flame-500); flex: none; } /* ------------------------------------------------------------------------- 15. О мастере ------------------------------------------------------------------------- */ .about { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .about--solo { display: block; max-width: 820px; } .about__text p { color: var(--steel-300); } .about__stats { display: flex; gap: 36px; margin-top: 24px; flex-wrap: wrap; } .about__stat strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--flame-500); line-height: 1; } .about__stat span { color: var(--steel-300); font-size: 14px; } /* ------------------------------------------------------------------------- 16. FAQ — аккордеон ------------------------------------------------------------------------- */ .faq { max-width: 820px; margin-inline: auto; } .faq-item { border-bottom: 1px solid #e2e5e9; } .section--dark .faq-item, .section--steel .faq-item { border-bottom-color: var(--steel-700); } .faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 19px; color: inherit; text-align: left; } .faq-item__q:hover { color: var(--flame-500); } .faq-item__icon { flex: none; width: 22px; height: 22px; color: var(--flame-500); transition: transform .25s var(--ease); } .faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); } .faq-item__a { overflow: hidden; max-height: 0; transition: max-height .3s var(--ease); } .faq-item__a-inner { padding: 0 4px 22px; color: var(--steel-300); } .section--light .faq-item__a-inner { color: #5b636c; } /* ------------------------------------------------------------------------- 17. Контакты + карта ------------------------------------------------------------------------- */ .contacts { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 48px); align-items: start; } .contact-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; } .contact-row { display: flex; gap: 14px; align-items: center; font-size: 16.5px; } .contact-row__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--steel-800); border: 1px solid var(--steel-700); display: flex; align-items: center; justify-content: center; color: var(--flame-500); } .contact-row__icon svg { width: 20px; height: 20px; } .contact-row a { color: var(--steel-100); font-weight: 500; } .contact-row a:hover { color: var(--flame-400); } .contact-row small { display: block; color: var(--steel-300); font-size: 13px; } .contact-row a.contact-row__phone { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px); color: var(--flame-500); letter-spacing: .01em; } .contact-row a.contact-row__phone:hover { color: var(--flame-400); } /* Карта — заглушка с отложенной загрузкой по клику */ .map-embed { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--steel-700); background: repeating-linear-gradient(45deg, #20242a 0 16px, #23272e 16px 32px); } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(20, 23, 27, .6); cursor: pointer; border: none; color: var(--steel-100); width: 100%; font-family: inherit; } .map-placeholder svg { width: 48px; height: 48px; color: var(--flame-500); } .map-placeholder span { font-weight: 600; } .map-placeholder small { color: var(--steel-300); } /* ------------------------------------------------------------------------- 18. Footer (.site-footer) — переиспользуется на юр-страницах ------------------------------------------------------------------------- */ .site-footer { background: #15181c; border-top: 1px solid var(--steel-700); padding-block: clamp(40px, 6vw, 64px) 28px; color: var(--steel-300); font-size: 15px; } .site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--steel-800); } .site-footer__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-100); margin: 0 0 16px; } .site-footer__col ul { display: flex; flex-direction: column; gap: 10px; } .site-footer__col a { color: var(--steel-300); } .site-footer__col a:hover { color: var(--flame-400); } .site-footer .brand { margin-bottom: 14px; } .site-footer__about { max-width: 320px; } .site-footer__legal { color: var(--steel-300); font-size: 13.5px; } .site-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 22px; font-size: 13.5px; color: #6b727b; } .site-footer__req { color: #6b727b; } /* ------------------------------------------------------------------------- 19. Плавающие элементы (FAB + наверх) + cookie-баннер ------------------------------------------------------------------------- */ .fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: none; flex-direction: column; gap: 12px; } .fab a, .to-top { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); border: none; cursor: pointer; } .fab a svg, .to-top svg { width: 26px; height: 26px; } .fab__wa { background: #25d366; color: #fff; } .fab__call { background: var(--flame-500); color: var(--steel-900); } .fab a:hover { text-decoration: none; transform: scale(1.06); } .to-top { position: fixed; right: 16px; bottom: 16px; z-index: 89; width: 48px; height: 48px; background: var(--steel-800); border: 1px solid var(--steel-700); color: var(--steel-100); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s, transform .2s var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; } .to-top:hover { border-color: var(--flame-500); color: var(--flame-400); } /* Cookie-баннер — снизу, не перекрывает форму, без CLS (fixed) */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 760px; margin-inline: auto; background: var(--steel-800); border: 1px solid var(--steel-700); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.4); padding: 18px 22px; display: none; align-items: center; gap: 18px; flex-wrap: wrap; } .cookie-banner.is-visible { display: flex; } .cookie-banner__text { flex: 1; min-width: 240px; font-size: 14px; color: var(--steel-300); margin: 0; } .cookie-banner__text a { text-decoration: underline; } .cookie-banner .btn { flex: none; } /* ------------------------------------------------------------------------- 20. Адаптив ------------------------------------------------------------------------- */ @media (max-width: 1024px) { .cards, .reviews-grid { grid-template-columns: repeat(2, 1fr); } .lead-block, .about, .contacts { grid-template-columns: 1fr; } } @media (max-width: 860px) { .main-nav, .header-phone { display: none; } .icon-btn { display: inline-flex; } .header-actions .btn { display: none; } .fab { display: flex; } .to-top { right: 16px; bottom: 84px; } .site-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { body { font-size: 16px; } .cards, .reviews-grid, .why-grid, .steps { grid-template-columns: 1fr; } .form-alt__btns .btn { flex: 1 1 100%; } .site-footer__top { grid-template-columns: 1fr; } .hero__cta .btn { flex: 1 1 100%; } .price-table th, .price-table td { padding: 13px 16px; } } /* ------------------------------------------------------------------------- 21. prefers-reduced-motion — отключаем/упрощаем анимации ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .spark { display: none; } .reveal, .hero .fade-in { opacity: 1 !important; transform: none !important; } .weld-seam__line { stroke-dashoffset: 0 !important; } .weld-seam__bead, .weld-seam__flash { opacity: 1 !important; } }