/* ========================================================================== Автошкола АСБ — филиал Первомайская. Основные стили. Mobile-first: базовая вёрстка 360px, брейкпоинты 480 / 768 / 1024 / 1280 / 1440. ВАЖНО: блок между маркерами CRITICAL:START и CRITICAL:END продублирован инлайном в файла index.html (критический CSS первого экрана). Правите его здесь — обновите и там (см. README-отчёт). ========================================================================== */ /* ===== CRITICAL:START ===== */ /* ---------- 1. Дизайн-токены ---------- */ :root { /* Палитра дизайн-системы */ --bg-dark: #0F1113; --bg-dark-soft: #16191C; --bg-light: #F4F5F7; --surface: #FFFFFF; --accent: #FFD028; --accent-hover: #F5C400; --text-on-dark: #FFFFFF; --text-muted: #9AA1A9; --text-on-light: #0F1113; --border: #E3E6EA; --radius: 14px; --radius-lg: 20px; --shadow-card: 0 10px 40px rgba(0, 0, 0, .12); /* Производные токены для доступности (контраст ≥ 4.5:1 для текста, ≥ 3:1 для рамок) */ --text-soft-on-dark: #C9CED3; /* подзаголовки на тёмном — 12:1 */ --text-muted-on-light: #5B626A; /* вторичный текст на светлом — 5.9:1 */ --accent-text-on-light: #7A5B00; /* «жёлтый» текст на светлом — 6.4:1 (чистый #FFD028 на белом нечитаем) */ --border-dark: #2A2F34; /* разделители на тёмном фоне */ --input-border: #858C94; /* рамка поля на белом — 3.4:1 */ --error: #C62828; /* текст ошибки на белом — 5.6:1 */ --error-bg: #FDECEC; --success: #1B7F3B; /* Затемнение поверх фото первого экрана: держит контраст белого текста ≥ 4.5:1 */ --hero-shade: linear-gradient(to bottom, rgba(15, 17, 19, .45) 0%, rgba(15, 17, 19, .7) 45%, var(--bg-dark) 75%); --hero-photo-pos: 40% 50%; /* на телефоне в кадре — передняя часть машины */ --hero-photo-h: 560px; /* на телефоне фото только за заголовком, ниже — сплошной фон под формой */ --focus: var(--accent); /* цвет фокуса; на светлых поверхностях переопределяется */ /* Типографика */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 20px; --fs-body: 16px; --fs-lead: 17px; --fs-small: 14px; /* минимум на странице — меньше не используем */ --fs-input: 16px; /* < 16px — iOS зумит страницу при фокусе */ --fs-price: 28px; --fs-tariff-price: 32px; --fs-step-num: 22px; --lh-body: 1.6; --lh-tight: 1.05; --lh-heading: 1.2; --fw-bold: 700; --fw-black: 800; --fw-semi: 600; --tracking-wide: .12em; /* Сетка и отступы */ --container: 1200px; --gutter: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --section-py: 56px; --form-w: 440px; /* Размеры элементов */ --header-h: 60px; --btn-h: 52px; --field-h: 52px; --tap-min: 44px; --sticky-h: 64px; --sticky-btn-h: 48px; --logo-h: 40px; --logo-radius: 16%; /* скругление как у квадрата в логотипе */ --fs-logo: 17px; --icon: 24px; --icon-tile: 48px; --checkbox: 22px; --focus-width: 3px; --focus-offset: 2px; --pill: 999px; /* Движение */ --t-fast: .2s ease; --reveal-shift: 16px; --reveal-duration: 400ms; --appear-rise-duration: 700ms; /* шаги «Как проходит обучение» */ --appear-fade-duration: 1200ms; /* карточки «Почему выбирают АСБ» */ --ease-soft: cubic-bezier(.25, .8, .25, 1); /* Слои */ --z-sticky: 90; --z-header: 100; } @media (min-width: 768px) { :root { --gutter: 24px; --fs-h1: 48px; --fs-h2: 34px; --fs-body: 17px; --fs-lead: 19px; --fs-price: 32px; --section-py: 80px; --header-h: 72px; --logo-h: 48px; --fs-logo: 19px; --btn-h: 56px; --field-h: 56px; } } @media (min-width: 1024px) { :root { --gutter: 32px; } } @media (min-width: 1280px) { :root { --fs-h1: 64px; --fs-h2: 42px; --section-py: 104px; } } /* ---------- 2. База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); /* якоря не прячутся под sticky-шапку */ } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark); background: var(--bg-dark); -webkit-font-smoothing: antialiased; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } p { margin: 0 0 var(--space-4); } h1, h2, h3 { margin: 0; line-height: var(--lh-heading); } /* Фокус виден всегда, outline не удаляем */ :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--header-h)); z-index: calc(var(--z-header) + 1); padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--text-on-light); font-weight: var(--fw-bold); border-radius: var(--radius); } .skip-link:focus { top: var(--space-2); } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .icon { width: var(--icon); height: var(--icon); flex: none; } /* ---------- 3. Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--btn-h); min-width: var(--tap-min); padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-heading); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .btn .icon { width: 20px; height: 20px; } .btn--primary { background: var(--accent); color: var(--text-on-light); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--secondary { background: transparent; border-color: var(--border); color: inherit; } .btn--secondary:hover { border-color: var(--accent); transform: translateY(-1px); } .btn--dark { background: var(--bg-dark); color: var(--text-on-dark); } .btn--dark:hover { background: var(--bg-dark-soft); transform: translateY(-1px); } .btn--block { width: 100%; } .btn--sm { min-height: var(--tap-min); padding: 0 var(--space-4); } .btn[disabled] { opacity: .75; cursor: progress; transform: none; } /* ---------- 4. Шапка ---------- */ .header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); background: var(--bg-dark); border-bottom: 1px solid var(--border-dark); } /* Шапка на всю ширину экрана: логотип прижат влево, телефон и кнопка — вправо */ .header .container { max-width: none; } .header__inner { display: flex; align-items: center; gap: var(--space-3); height: 100%; } .logo { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); text-decoration: none; } /* Логотип тёмный — тонкая рамка отделяет его от тёмной шапки */ .logo__img { width: auto; height: var(--logo-h); border-radius: var(--logo-radius); box-shadow: 0 0 0 1px var(--border-dark); } .logo__text { font-size: var(--fs-logo); font-weight: var(--fw-black); white-space: nowrap; } .header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } .header__phone { display: none; text-decoration: none; line-height: var(--lh-heading); } .header__phone-num { display: block; font-weight: var(--fw-bold); white-space: nowrap; } .header__phone-hours { display: block; font-size: var(--fs-small); color: var(--text-muted); } .header__cta { display: none; } .icon-btn { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); padding: 0; border: 1px solid var(--border-dark); border-radius: var(--radius); background: transparent; color: var(--text-on-dark); cursor: pointer; } .icon-btn--accent { color: var(--accent); } /* Навигация: на мобильных — выпадающая панель под шапкой */ .nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; padding: var(--space-2) var(--gutter) var(--space-5); background: var(--bg-dark); border-bottom: 1px solid var(--border-dark); } .nav.is-open { display: block; } .nav__list { list-style: none; margin: 0; padding: 0; } .nav__link { display: flex; align-items: center; min-height: var(--tap-min); padding: var(--space-2) 0; font-weight: var(--fw-semi); text-decoration: none; } .nav__link:hover { color: var(--accent); } .burger__close { display: none; } .burger[aria-expanded="true"] .burger__open { display: none; } .burger[aria-expanded="true"] .burger__close { display: block; } @media (min-width: 768px) { .header__phone { display: block; } .header__phone-icon { display: none; } .header__cta { display: inline-flex; } } /* Меню в строку — с 1280px: на 1024–1279 пять пунктов, телефон и кнопка не помещаются без наезда, там остаётся бургер. Сетка 1fr auto 1fr держит меню ровно по центру страницы, независимо от ширины логотипа слева и блока справа. */ @media (min-width: 1280px) { .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-5); } .logo { justify-self: start; } .header__actions { justify-self: end; margin-left: 0; gap: var(--space-4); } .nav { display: block; position: static; padding: 0; background: none; border: 0; } /* 6 пунктов: на 1280–1439 плотнее, иначе блок справа шире своей колонки и меню съезжает с центра */ .nav__list { display: flex; gap: var(--space-5); } .burger { display: none; } } @media (min-width: 1440px) { .header__actions { gap: var(--space-5); } .nav__list { gap: var(--space-6); } } /* ---------- 5. Первый экран ---------- */ .hero { position: relative; overflow: hidden; background: var(--bg-dark); /* фолбэк-цвет: текст читается до загрузки фото */ padding-block: var(--space-6) var(--space-7); } .hero__grid { display: grid; gap: var(--space-6); } .hero__content, .hero__form { position: relative; z-index: 1; min-width: 0; } .hero__title { margin-bottom: var(--space-4); font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); text-transform: uppercase; overflow-wrap: break-word; } .hero__title-line { display: block; } .accent { color: var(--accent); } .hero__lead { max-width: 34em; font-size: var(--fs-lead); color: var(--text-soft-on-dark); } .hero__price { margin-bottom: var(--space-5); font-size: var(--fs-lead); font-weight: var(--fw-semi); } .hero__price strong { font-size: var(--fs-price); font-weight: var(--fw-black); color: var(--accent); white-space: nowrap; } .hero__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .hero__bullets li { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-semi); } .hero__bullets .icon { color: var(--accent); } /* Фото — фоновый слой первого экрана (под текстом и формой) */ .hero__media { position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: var(--hero-photo-h); } .hero__media picture, .hero__media img { width: 100%; height: 100%; } .hero__media img { object-fit: cover; object-position: var(--hero-photo-pos); } .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); } .hero__media[hidden] { display: none; } /* фото не загрузилось — блок убираем */ @media (min-width: 1024px) { .hero { padding-block: var(--space-8); } .hero__grid { grid-template-columns: minmax(0, 1fr) var(--form-w); align-items: center; gap: var(--space-7); } /* Desktop: фото на весь первый экран, затемнение сильнее слева — под заголовком */ .hero__media { bottom: 0; height: auto; } .hero { --hero-photo-pos: 50% 55%; --hero-shade: linear-gradient(90deg, rgba(15, 17, 19, .88) 0%, rgba(15, 17, 19, .6) 45%, rgba(15, 17, 19, .25) 100%), linear-gradient(to bottom, rgba(15, 17, 19, 0) 70%, rgba(15, 17, 19, .6) 100%); } } /* ---------- 6. Карточка формы ---------- */ .form-card { --focus: var(--text-on-light); background: var(--surface); color: var(--text-on-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); } .form-card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: var(--space-1); } .form-card__sub { font-size: var(--fs-small); color: var(--text-muted-on-light); margin-bottom: var(--space-5); } .field { margin-bottom: var(--space-4); } .field__label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-semi); } .field__input { display: block; width: 100%; height: var(--field-h); padding: 0 var(--space-4); font: inherit; font-size: var(--fs-input); color: var(--text-on-light); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius); -webkit-appearance: none; appearance: none; } .field__input::placeholder { color: var(--text-muted-on-light); opacity: 1; } .field__input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); } .field__error { margin: var(--space-1) 0 0; font-size: var(--fs-small); color: var(--error); } .field__error:empty { display: none; } .consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-small); line-height: 1.45; } .consent__box { flex: none; width: var(--checkbox); height: var(--checkbox); margin: 0; accent-color: var(--text-on-light); cursor: pointer; } .consent__label { cursor: pointer; padding-block: 1px; } .consent.is-invalid .consent__box { outline: 2px solid var(--error); outline-offset: 2px; } .consent.is-invalid .consent__label { color: var(--error); } .consent + .field__error { margin-bottom: var(--space-2); } .lead-form .btn { margin-top: var(--space-5); } .form__tariff { margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--bg-light); font-size: var(--fs-small); } .form__status { margin: var(--space-3) 0 0; font-size: var(--fs-small); } .form__status:empty { display: none; } .form__status.is-error { padding: var(--space-3); border-radius: var(--radius); background: var(--error-bg); color: var(--error); } .form__status a { font-weight: var(--fw-bold); white-space: nowrap; } .form__note { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--text-muted-on-light); } .form__note .icon { width: 18px; height: 18px; } @media (min-width: 768px) { .form-card { padding: var(--space-6); } } /* ---------- 7. Мобильная панель: база, чтобы не мигала до загрузки CSS ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; visibility: hidden; transform: translateY(110%); } @media (min-width: 768px) { .sticky-cta { display: none; } } /* ===== CRITICAL:END ===== */ /* ---------- 8. Секции: общее ---------- */ .section { padding-block: var(--section-py); } .section--dark { background: var(--bg-dark); color: var(--text-on-dark); } .section--dark-soft { background: var(--bg-dark-soft); color: var(--text-on-dark); } .section--light { --focus: var(--text-on-light); background: var(--bg-light); color: var(--text-on-light); } .section__head { max-width: 760px; margin-bottom: var(--space-6); } .section__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-3); } .section__sub { font-size: var(--fs-lead); margin: 0; color: var(--text-soft-on-dark); } .section--light .section__sub { color: var(--text-muted-on-light); } @media (min-width: 768px) { .section__head { margin-bottom: var(--space-7); } } /* ---------- 9. Тарифы ---------- */ .tariffs__grid { display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .tariff { position: relative; display: flex; flex-direction: column; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .tariff--featured { border: 2px solid var(--accent); box-shadow: var(--shadow-card); } .tariff__badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5); padding: var(--space-1) var(--space-3); border-radius: var(--pill); background: var(--accent); color: var(--text-on-light); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.4; } .tariff__name { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-bottom: var(--space-2); } .tariff__for { font-size: var(--fs-small); color: var(--text-muted-on-light); margin-bottom: var(--space-4); } .tariff__price { margin-bottom: var(--space-4); font-size: var(--fs-tariff-price); font-weight: var(--fw-black); line-height: var(--lh-heading); white-space: nowrap; } .tariff__facts { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-top: 1px solid var(--border); } .tariff__facts li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-small); } .tariff__facts b { font-size: var(--fs-body); text-align: right; } .tariff .btn { margin-top: auto; } .tariffs__note { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-weight: var(--fw-semi); } @media (min-width: 768px) { .tariffs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Desktop: сетка 3 + 2 (нижний ряд по центру) */ @media (min-width: 1024px) { .tariffs__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-6); } .tariff { grid-column: span 2; } .tariff:nth-child(4) { grid-column: 2 / span 2; } .tariff:nth-child(5) { grid-column: 4 / span 2; } } /* ---------- 10. Как проходит обучение ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); } .step { position: relative; padding-left: calc(var(--icon-tile) + var(--space-4)); } .step__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--icon-tile); height: var(--icon-tile); border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: var(--fs-step-num); font-weight: var(--fw-black); } /* Вертикальная линия между шагами (mobile) */ .step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--icon-tile) / 2 - 1px); top: calc(var(--icon-tile) + var(--space-2)); bottom: calc(-1 * var(--space-6) + var(--space-2)); width: 2px; background: var(--border-dark); } .step__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-bottom: var(--space-2); padding-top: var(--space-2); } .step__text { margin: 0; color: var(--text-soft-on-dark); } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { padding-left: 0; padding-top: calc(var(--space-8) + var(--space-5)); } .step__num { width: auto; height: var(--space-8); border: 0; border-radius: 0; place-items: start; font-size: var(--space-8); line-height: 1; } /* Горизонтальная линия от номера к следующему шагу */ .step:not(:last-child)::before { left: calc(var(--space-8) + var(--space-3)); right: var(--space-3); top: calc(var(--space-8) / 2); bottom: auto; width: auto; height: 2px; } .step__title { padding-top: 0; } } /* ---------- 11. Пробный урок (акцентная полоса) ---------- */ .trial { --focus: var(--text-on-light); background: var(--accent); color: var(--text-on-light); padding-block: var(--space-6); } .trial__inner { display: grid; gap: var(--space-4); align-items: center; } .trial__text { margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-semi); } .trial__text strong { font-weight: var(--fw-black); } @media (min-width: 1024px) { .trial__inner { grid-template-columns: 1fr auto; gap: var(--space-6); } } /* ---------- 12. Почему АСБ ---------- */ .features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .feature { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Иконка — тёмная линия на жёлтой плашке: жёлтый штрих на белом не читается */ .feature__icon { display: grid; place-items: center; width: var(--icon-tile); height: var(--icon-tile); margin-bottom: var(--space-4); border-radius: var(--radius); background: var(--accent); color: var(--text-on-light); } .feature__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-bottom: var(--space-2); } .feature__text { margin: 0; color: var(--text-muted-on-light); } @media (min-width: 768px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } } @media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 13. Инструкторы (выводится, когда появятся реальные данные) ---------- */ .team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); } .team-card { overflow: hidden; border: 1px solid var(--border-dark); border-radius: var(--radius-lg); background: var(--bg-dark); } .team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .team-card__body { padding: var(--space-4) var(--space-5) var(--space-5); } .team-card__name { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-bottom: var(--space-1); } .team-card__meta { margin: 0; font-size: var(--fs-small); color: var(--text-muted); } @media (min-width: 480px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- 14. Отзывы: горизонтальная лента ---------- */ .section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); max-width: none; } .slider__nav { display: flex; gap: var(--space-2); flex: none; } .slider__btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); } .slider__btn[disabled] { opacity: .35; cursor: default; } .reviews { --review-w: 86%; /* mobile: край следующей карточки виден — понятно, что можно листать */ display: flex; gap: var(--space-4); margin: 0; padding: 0 0 var(--space-4); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--accent) var(--border-dark); /* полоса прокрутки = индикатор положения */ } .reviews::-webkit-scrollbar { height: 6px; } .reviews::-webkit-scrollbar-track { background: var(--border-dark); border-radius: var(--pill); } .reviews::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--pill); } .reviews:focus-visible { outline-offset: var(--space-1); } /* Прилипание к карточкам — только для свайпа пальцем: с колесом мыши оно дёргает ленту */ @media (pointer: coarse) { .reviews { scroll-snap-type: x mandatory; } .review { scroll-snap-align: start; } } .review { flex: 0 0 var(--review-w); display: flex; flex-direction: column; padding: var(--space-5); background: var(--surface); color: var(--text-on-light); border-radius: var(--radius-lg); } .review__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .review__avatar { display: grid; place-items: center; flex: none; width: var(--icon-tile); height: var(--icon-tile); border-radius: 50%; background: var(--accent); color: var(--text-on-light); font-weight: var(--fw-black); font-size: var(--fs-h3); } .review__name { margin: 0; font-weight: var(--fw-bold); } .review__date { margin: 0; font-size: var(--fs-small); color: var(--text-muted-on-light); } .review__stars { margin: 0 0 var(--space-3); color: var(--accent-hover); font-size: var(--fs-h3); letter-spacing: .1em; line-height: 1; } .review__text { margin: 0; } .review__text p { margin-bottom: var(--space-3); } .review__text p:last-child { margin-bottom: 0; } .review__more { margin-top: var(--space-4); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--accent-text-on-light); } .reviews__more { margin: var(--space-5) 0 0; } @media (min-width: 768px) { .reviews { --review-w: calc((100% - var(--space-5)) / 2); gap: var(--space-5); } } @media (min-width: 1024px) { .reviews { --review-w: calc((100% - var(--space-5) * 2) / 3); } } /* ---------- 15. Адрес и карта ---------- */ .location { display: grid; gap: var(--space-6); } .contacts { font-style: normal; } .contacts__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); } .contacts__item { display: flex; gap: var(--space-3); } .contacts__item .icon { color: var(--accent); margin-top: 2px; } .contacts__label { display: block; font-size: var(--fs-small); color: var(--text-muted); } .contacts__value { font-weight: var(--fw-semi); } .contacts__value a { text-decoration: none; } .contacts__value a:hover { color: var(--accent); } .contacts__route { color: var(--text-soft-on-dark); font-weight: 400; } .contacts__actions { display: grid; gap: var(--space-3); } .map { position: relative; min-height: 320px; overflow: hidden; border: 1px solid var(--border-dark); border-radius: var(--radius-lg); /* Статичная заглушка без картинки: сетка «улиц» средствами CSS, 0 КБ */ background-color: var(--bg-dark); background-image: linear-gradient(var(--border-dark) 1px, transparent 1px), linear-gradient(90deg, var(--border-dark) 1px, transparent 1px); background-size: 40px 40px; } .map__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-5); text-align: center; } .map__pin { width: var(--icon-tile); height: var(--icon-tile); color: var(--accent); } .map__caption { margin: 0; font-weight: var(--fw-semi); } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (min-width: 480px) { .contacts__actions { grid-template-columns: repeat(2, max-content); } } @media (min-width: 1024px) { .location { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: stretch; } .map { min-height: 440px; } } /* ---------- 16. FAQ ---------- */ .faq { max-width: 860px; } .faq__item { border-bottom: 1px solid var(--border); } .faq__item:first-child { border-top: 1px solid var(--border); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap-min); padding: var(--space-4) 0; font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: 1.35; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } /* Плюс/минус без JS и без картинок */ .faq__q::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--text-on-light); font-weight: var(--fw-bold); line-height: 1; } .faq__item[open] .faq__q::after { content: "−"; transform: rotate(180deg); } .faq__q::after { transition: transform var(--reveal-duration) var(--ease-soft); } /* Отступ снизу — через margin последнего абзаца, а не padding: иначе при анимации высоты до 0 padding оставался бы видимым */ .faq__a { overflow: hidden; color: var(--text-muted-on-light); } .faq__a p:last-child { margin-bottom: var(--space-5); } /* ---------- 17. Финальный блок с формой ---------- */ .final { display: grid; gap: var(--space-6); } .final__lead { font-size: var(--fs-lead); color: var(--text-soft-on-dark); } .final__call { margin: 0; color: var(--text-soft-on-dark); } .final__call a { color: var(--accent); font-weight: var(--fw-bold); white-space: nowrap; text-decoration: none; } .final__call a:hover { text-decoration: underline; } @media (min-width: 1024px) { .final { grid-template-columns: minmax(0, 1fr) var(--form-w); gap: var(--space-7); align-items: center; } } /* ---------- 18. Экран благодарности ---------- */ .form-success { text-align: center; padding-block: var(--space-5); } .form-success__icon { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); margin: 0 auto var(--space-4); border-radius: 50%; background: var(--accent); color: var(--text-on-light); } .form-success__icon .icon { width: 32px; height: 32px; } .form-success__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: var(--space-3); } .form-success__text { font-size: var(--fs-small); color: var(--text-muted-on-light); } .form-success__text:last-child { margin-bottom: 0; } .form-success a { font-weight: var(--fw-bold); white-space: nowrap; } /* ---------- 19. Подвал ---------- */ .footer { padding-block: var(--space-7); background: var(--bg-dark); border-top: 1px solid var(--border-dark); color: var(--text-muted); font-size: var(--fs-small); } .footer__grid { display: grid; gap: var(--space-5); } .footer .logo { margin-bottom: var(--space-2); color: var(--text-on-dark); } .footer__contacts { font-style: normal; display: grid; gap: var(--space-1); } .footer__contacts a { color: var(--text-on-dark); text-decoration: none; font-weight: var(--fw-semi); } .footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); } .footer__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); } .footer__links a:hover, .footer__contacts a:hover { color: var(--accent); } .footer__copy { margin: 0 0 var(--space-2); } .footer__legal { margin: 0; } @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } } /* ---------- 20. Мобильная закреплённая панель ---------- */ @media (max-width: 767.98px) { /* Резервируем место, чтобы панель не перекрывала подвал */ body { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); } .sticky-cta { z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2); align-items: center; min-height: var(--sticky-h); padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); background: var(--bg-dark); border-top: 1px solid var(--border-dark); transition: transform var(--t-fast), visibility var(--t-fast); } .sticky-cta .btn { min-height: var(--sticky-btn-h); padding-inline: var(--space-3); } .sticky-cta.is-visible { visibility: visible; transform: none; } .no-js .sticky-cta { visibility: visible; transform: none; } } /* ---------- 21. Появление секций при скролле ---------- */ /* Класс is-pending ставит JS только секциям ниже первого экрана — без JS всё видно */ [data-reveal] { transition: opacity var(--reveal-duration) ease-out, transform var(--reveal-duration) ease-out; } [data-reveal].is-pending { opacity: 0; transform: translateY(var(--reveal-shift)); } /* Постепенное появление элементов списка (класс is-armed ставит JS, когда список ниже экрана; без JS и при prefers-reduced-motion всё видно сразу) */ /* Скрытие — мгновенное, анимируется только появление (transition висит на .is-shown) */ .is-armed > * { opacity: 0; } .appear-rise.is-armed > * { transform: translateY(var(--reveal-shift)); } /* «Из прозрачных — в насыщенные»: прозрачность и цвет набираются вместе */ .appear-fade.is-armed > * { filter: saturate(0); } .is-armed > .is-shown { opacity: 1; transform: none; filter: none; } .appear-rise.is-armed > .is-shown { transition: opacity var(--appear-rise-duration) var(--ease-soft), transform var(--appear-rise-duration) var(--ease-soft); } .appear-fade.is-armed > .is-shown { transition: opacity var(--appear-fade-duration) ease-out, filter var(--appear-fade-duration) ease-out; } /* ---------- 22. Юридические страницы ---------- */ .doc { --focus: var(--text-on-light); background: var(--bg-light); color: var(--text-on-light); padding-block: var(--space-7) var(--section-py); } .doc__inner { max-width: 820px; } .doc__back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); margin-bottom: var(--space-5); font-weight: var(--fw-semi); color: var(--accent-text-on-light); } .doc__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin-bottom: var(--space-3); } .doc__meta { color: var(--text-muted-on-light); font-size: var(--fs-small); } .doc h2 { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin: var(--space-6) 0 var(--space-3); } .doc h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-2); } .doc__list { margin: 0 0 var(--space-4); padding-left: var(--space-5); } .doc__list li { margin-bottom: var(--space-3); } .doc__list li::marker { color: var(--text-muted-on-light); font-weight: var(--fw-semi); } .doc a { color: var(--accent-text-on-light); } .doc__placeholder { padding: var(--space-3) var(--space-4); border: 1px dashed var(--accent-text-on-light); border-radius: var(--radius); background: var(--surface); color: var(--accent-text-on-light); font-size: var(--fs-small); } .doc__table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .doc__table th, .doc__table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .doc__table th { width: 40%; font-weight: var(--fw-semi); color: var(--text-muted-on-light); } @media (max-width: 479.98px) { .doc__table th, .doc__table td { display: block; width: 100%; } .doc__table th { border-bottom: 0; padding-bottom: 0; } } /* ---------- 23. Уменьшение движения ---------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } [data-reveal].is-pending { opacity: 1; transform: none; } .is-armed > * { opacity: 1; transform: none; filter: none; } .btn:hover { transform: none; } }