/* cd-header-footer.css — единый дизайн «Новой Ступени» (как на главной): тема (фон, шрифты, кнопки, карточки, поля) + шапка-карточка + тёмный футер. Подключается на всех страницах ПОСЛЕ style.css. Требует шрифт Manrope/Inter (link в ). */ /* ===== ТЕМА: токены, фон, шрифты ===== */ :root{ --bg:#f3f1ec; /* тёплый фон страницы */ --card:#ffffff; /* белые карточки/поверхности */ --text:#16181b; /* чернила */ --muted:#6b6f76; /* приглушённый текст */ --border:rgba(20,24,27,.10); --radius:16px; --shadow:0 18px 40px -28px rgba(20,24,27,.45); --primary:#c11f24; --primary-hover:#a3171b; /* наш красный */ --accent:var(--primary); --accent-hover:var(--primary-hover); --cd-display:"Onest",system-ui,sans-serif; --cd-sans:"Onest",system-ui,sans-serif; --cd-tint:rgba(193,31,36,.1); --hero-font-display:"Onest",system-ui,sans-serif; --hero-font-sans:"Onest",system-ui,sans-serif; --hero-font-mono:"Onest",system-ui,sans-serif; } body{font-family:"Onest",system-ui,sans-serif!important;background:var(--bg)!important;color:var(--text)!important;-webkit-font-smoothing:auto} h1,h2,h3,h4,h5,h6{font-family:"Onest",system-ui,sans-serif!important;letter-spacing:-.02em}h2,h3{font-weight:800!important;font-size:clamp(1.5rem,2.8vw,2rem)!important}h4{font-weight:600!important} /* надзаголовки-eyebrow к Manrope (как на главной) */ .nva-eyebrow,.home-eyebrow,.ab2-hero-kicker,.hero-D-eyebrow-inner{font-family:"Onest",system-ui,sans-serif!important;letter-spacing:.03em!important} /* ===== КНОПКИ единого вида ===== */ .btn{font-family:"Onest",system-ui,sans-serif!important;font-weight:600!important;border-radius:13px!important} .btn:not(.secondary):not(.btn-ghost){background:var(--accent)!important;color:#fff!important;border:none!important} .btn:not(.secondary):not(.btn-ghost):hover{background:var(--accent-hover)!important} .btn.secondary,.btn-ghost{background:#fff!important;color:var(--text)!important;border:1px solid rgba(20,24,27,.2)!important;border-radius:13px!important;font-family:"Onest",system-ui,sans-serif!important;font-weight:600!important} .btn.secondary:hover,.btn-ghost:hover{background:#efece6!important} /* ===== ПОЛЯ ВВОДА ===== */ input[type=text],input[type=tel],input[type=email],input[type=number],textarea{border-radius:11px!important;background:#faf9f7!important;border:1px solid rgba(20,24,27,.14)!important;font-family:"Onest",system-ui,sans-serif!important} /* ===== ШАПКА: плавающая белая карточка, прижата к верхнему краю, низ скруглён ===== */ .site-header{background:transparent!important;position:sticky;top:0;z-index:100;padding:0!important;margin:0!important;border:none!important;box-shadow:none!important} .header-inner{display:block!important;background:transparent!important;border:none!important;box-shadow:none!important;min-height:0!important;padding:0 1.25rem!important} .cd-header-pill{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.65rem 1rem;min-height:3.5rem;background:#fff;border-radius:0;box-shadow:0 12px 22px -14px rgba(20,24,27,.45);padding:12px 18px} .main-nav a,.nav-dd-summary{font-family:"Onest",system-ui,sans-serif!important;font-weight:500;font-size:14px;color:#54585e} .main-nav a:hover,.nav-dd-summary:hover{color:#c11f24} .header-contact-phone{font-family:"Onest",system-ui,sans-serif!important;font-weight:700;color:#16181b} .header-contact-email{color:#6b6f76} /* ===== ФУТЕР: тёмный, логотип на белой пилюле ===== */ .site-footer{background:#16181b!important;color:#fff!important;margin-top:80px!important;padding:48px 0 0!important} .site-footer__heading{color:rgba(255,255,255,.45)!important;font-family:"Onest",system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.06em!important;font-size:13px!important;font-weight:700!important} .site-footer__list a,.site-footer__list li{color:rgba(255,255,255,.78)!important} .site-footer__list a:hover{color:#fff!important} .site-footer__tagline{color:rgba(255,255,255,.6)!important} .footer-brand--invert{display:inline-block;background:#fff;border-radius:14px;padding:10px 16px;line-height:0} .footer-brand--invert img{filter:none!important} .ab2-foot-social{position:static!important;margin-top:14px} .ab2-foot-social .lbl{color:rgba(255,255,255,.6)!important} .ab2-foot-social a{color:rgba(255,255,255,.82)!important} .site-footer__socket{border-top:1px solid rgba(255,255,255,.1)!important;margin-top:32px!important;background:transparent!important} .site-footer__copyright,.site-footer__region,.ab2-foot-legal a{color:rgba(255,255,255,.42)!important} /* мелкий UI-текст: weight 500 чтобы не выглядел рыхлым */ #home-quiz .quiz-panel--framed .quiz-head-meta, #home-quiz .quiz-foot-bonus, #home-quiz .quiz-panel--framed .quiz-body .quiz-sub, .quiz-progress-label { font-weight: 500; } /* --- cd-hero (перенесён с главной на /catalog.html) --- */ .cd-hero{max-width:1100px;margin:0 auto;padding:60px 1.25rem 76px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center} .cd-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--cd-display);font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--primary);background:var(--cd-tint);padding:8px 14px;border-radius:999px} .cd-hero__title{font-family:var(--cd-display);font-weight:800;font-size:clamp(34px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;margin:22px 0 0;color:var(--text)} .cd-hero__lead{font-size:17px;line-height:1.6;color:#5a5e64;margin:22px 0 0;max-width:480px} .cd-hero__cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap} .cd-btn{display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 26px;border-radius:13px;font-family:var(--cd-display);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none} .cd-btn--primary{background:var(--primary);color:#fff;box-shadow:0 12px 24px -12px rgba(193,31,36,.6)} .cd-btn--primary:hover{background:var(--accent-hover)} .cd-btn--secondary{background:#fff;color:var(--text);border:1px solid var(--border)} .cd-btn--secondary:hover{background:#efece6} .cd-hero__stats{display:flex;gap:12px;margin-top:34px} .cd-hero__stat{flex:1;background:#fff;border-radius:14px;padding:16px 18px} .cd-hero__stat b{font-family:var(--cd-display);font-weight:800;font-size:23px;letter-spacing:-.02em;display:block;color:var(--text)} .cd-hero__stat span{font-size:12px;color:#8a8e94;margin-top:2px;display:block} .cd-hero__media-wrap{position:relative} .cd-hero__media{border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(20,24,27,.6)} .cd-hero__media img{width:100%;height:100%;object-fit:cover} .cd-price{position:absolute;left:-22px;bottom:-22px;background:var(--primary);color:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 20px 40px -22px rgba(193,31,36,.7);width:215px} .cd-price__lbl{font-family:var(--cd-display);font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.72)} .cd-price__val{font-family:var(--cd-display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-top:6px} .cd-price__row{display:flex;gap:14px;margin-top:12px;font-size:12px;color:rgba(255,255,255,.82)} .cd-price__row b{color:#fff;font-size:13px} @media(max-width:900px){.cd-hero{grid-template-columns:1fr;gap:32px;padding:28px 20px 56px}.cd-hero__media-wrap{margin-bottom:22px}.cd-hero__title{font-size:38px}} /* Мобила: шапка всегда одной строкой — wrap ронял контакты на вторую строку уже при ~380px (163 лого-блок + 16 gap + 114 контакты > контента) */ @media (max-width: 640px) { .cd-header-pill { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; } .header-contact { gap: 4px; flex-shrink: 0; } } @media (max-width: 360px) { .logo--image img { width: 88px; height: auto; } } /* ===== Заголовки секций: бровь слева, заголовок справа, одной строкой. При переносе (head-wrapped из nav.js) заголовок на своей строке слева. Исключения: отзывы (ab2-rev-head), FAQ, обратная связь ===== */ .nva-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;row-gap:.25rem;text-align:left} .nva-head h2{margin-left:auto;text-align:right} .nva-head.head-wrapped h2{margin-left:0;text-align:center;width:100%} .nva-head p{width:100%;text-align:left;margin-top:.35rem} .home-h2-split .home-head-split__inner{display:flex;width:100%;flex-direction:row!important;flex-wrap:wrap;align-items:center!important;column-gap:1rem;row-gap:.25rem} .home-h2-split .home-eyebrow{margin-bottom:0!important} .home-h2-split .home-eyebrow + .home-head-split__primary{margin-left:auto;text-align:right} .home-h2-split.head-wrapped .home-eyebrow + .home-head-split__primary{margin-left:0;text-align:center;flex-basis:100%} .home-h2-split .home-head-split__rule{display:none} .home-h2-split .home-head-split__secondary{flex-basis:100%;text-align:left} .ab2-intro-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem} .ab2-intro-head h2{margin-left:auto;text-align:right} .ab2-intro-head.head-wrapped h2{margin-left:0;text-align:center;width:100%} /* исключения — прежний вид */ .ab2-rev-head .nva-head{display:block;text-align:center} .ab2-rev-head .nva-head h2{margin-left:0;text-align:center;width:auto} .home-faq-title .home-head-split__inner, .home-callback-title .home-head-split__inner{flex-direction:column!important;align-items:flex-start!important} .home-faq-title .home-eyebrow + .home-head-split__primary, .home-callback-title .home-eyebrow + .home-head-split__primary{margin-left:0;text-align:left;flex-basis:auto} .home-callback-title .home-head-split__rule{display:block} .home-callback-title .home-head-split__secondary{text-align:center} /* частичный перенос длинных заголовков: влезающие слова остаются в первой строке справа, хвост — новой строкой слева (разбивает nav.js) */ .head-mixed-title{display:contents} .head-mixed-title .head-l1{margin-left:auto;text-align:right;white-space:nowrap} .head-mixed-title .head-rest{flex-basis:100%;text-align:center} /* Валигн брови по центру строки заголовка; исключения ниже */ .nva-head .nva-eyebrow, h1.home-tagline .home-eyebrow, h2.home-h2-split .home-eyebrow, .ab2-intro-head .nva-eyebrow{align-self:center!important;margin-top:0!important;margin-bottom:0!important} h2.home-faq-title .home-eyebrow, h2.home-callback-title .home-eyebrow{align-self:flex-start!important;margin-bottom:8px!important} .ab2-rev-head .nva-head .nva-eyebrow{margin-bottom:.55rem!important} /* Бровь акцентированнее */ .nva-eyebrow, .home-eyebrow{font-size:.85rem!important;font-weight:700!important} @media (max-width:640px){ .nva-eyebrow, .home-eyebrow{font-size:.75rem!important} } /* Заголовкам чуть теснее: зазор с бровью 12px и потолок кегля 1.9rem, иначе длинным парам (Онлайн-расчёт) не хватало ~10px до одной строки */ .nva-head, .ab2-intro-head, .home-h2-split .home-head-split__inner, .home-tagline .home-head-split__inner{column-gap:.75rem} h2.home-h2-split .home-head-split__primary{font-size:clamp(1.5rem,2.6vw,1.9rem)!important} .nva-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem)!important} /* Крупный кегль заголовков на десктопе (как «Все категории товаров»): класс head-big ставит nav.js только когда пара влезает в одну строку */ @media (min-width: 641px){ .nva-head.head-big h2, .ab2-intro-head.head-big h2, h2.head-big .home-head-split__primary, h1.head-big .home-head-split__primary{font-size:2.5rem!important;font-weight:800!important} } /* Крупный кегль и для исключений без брови/с центром: отзывы и «Нужен расчёт…» */ @media (min-width: 641px){ .ab2-rev-head .nva-head h2{font-size:2.5rem!important;font-weight:800!important} h2.home-bottom-cta-title .home-head-split__primary{font-size:2.5rem!important;font-weight:800!important} } /* FAQ + обратная связь на десктопе: колонка callback шире, заголовки крупнее. 40px обоим не хватает физики (626+545 > 1060), 2.1rem — максимум в строку */ @media (min-width: 641px){ .home-faq-callback-grid:not(.home-faq-callback-grid--single){grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)} h2.home-faq-title .home-head-split__primary, h2.home-callback-title .home-head-split__primary{font-size:2.5rem!important} } /* «Мы вам перезвоним!» — спан на всю ширину колонки, иначе text-align:center не работал */ .home-callback-title .home-head-split__secondary{width:100%!important} /* ============ ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ, ДЕСКТОП ============ Эталон «Мы знаем…»: --rhythm-up от контента до брови, --rhythm-down от заголовка до контента. После тёмного хиро пауза меньше (--rhythm-after-hero), иначе на светлом фоне выглядит дырой. Числовые поправки в calc — внутренние маргины конкретных блоков. */ @media (min-width: 641px){ :root{ --rhythm-up: 48px; --rhythm-down: 45px; --rhythm-after-hero: 48px; } .home-intro-wrap{padding-top:var(--rhythm-after-hero)} .home-tagline{padding-bottom:calc(var(--rhythm-down) - 27px)} #home-quiz{padding-top:0!important} .home-showcase{padding-bottom:calc(var(--rhythm-up) - 21px)!important} .measurer-cta{padding-bottom:0!important} main section.nva-sec{margin-top:var(--rhythm-up)!important;padding-top:0!important;padding-bottom:0!important} main section.home-reviews{margin-top:calc(var(--rhythm-up) - 13px)!important;padding-top:0!important;padding-bottom:0!important} /* компенсация внутреннего воздуха предыдущих секций */ main section.nva-sec:has(.nva-steps){margin-top:calc(var(--rhythm-up) - 28px)!important} main section.nva-sec:has(.nva-choice){margin-top:calc(var(--rhythm-up) - 49px)!important} /* Отзывы: заголовок → карусель 45 (внутренний воздух карусели 28) */ .ab2-rev-head{margin-bottom:17px!important} /* «Нам доверяют»: сверху 48 (внутренности соседа 51), стык с FAQ 48 (внутренности 59) */ .ab2-trust2{margin-top:calc(var(--rhythm-up) - 51px)!important} main > section.home-faq-callback{margin-top:calc(var(--rhythm-up) - 51px)!important} /* Портфолио в общий ритм */ main > section.home-works{padding-top:31px!important} .home-works-head{margin-bottom:43px!important} main > section.home-bottom-cta{padding-top:var(--rhythm-up)!important} h2.home-bottom-cta-title{padding-bottom:calc(var(--rhythm-down) - 26px)!important} .nva-sec .nva-steps{margin-top:var(--rhythm-down)} }