/* B-3 шаблон «legal» — 2 страниц. Правка здесь = правка всех. Разделы: policy (1), soglasie (1). Грузится 'ом в ПОСЛЕ site.css (та же позиция, что был inline-блоб). */ @media (max-width: 768px) { .container { padding: 0 var(--sp-5); } } @keyframes hero-kenburns { 0% { transform: scale(1.0) translate(0, 0); } 100% { transform: scale(1.06) translate(-1.5%, -0.5%); } } @keyframes hero-reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-stagger { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes scroll-pulse { 0% { transform: scaleY(0); transform-origin: top; opacity: 0.5; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.5; } } @media (max-width: 768px) { .hero { min-height: 78vh; } .hero__content { padding: var(--sp-12) 0 var(--sp-10); } .hero__subtitle { font-size: var(--fs-body); margin-bottom: var(--sp-6); } .hero__title { margin-bottom: var(--sp-4); } .hero__actions .btn { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-small); } } @media (max-width: 1024px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); } } @media (max-width: 640px) { .stats__grid { grid-template-columns: 1fr; } .stat { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); } .stat:last-child { border-bottom: 0; } } /* ============================================================ SLIDE 2 — Lead-gen форма ============================================================ */ .leadgen {background: var(--surface-subtle, #F5F7F8); padding: var(--sp-32) 0; border-bottom: 1px solid var(--border-subtle); position: relative; overflow: hidden; } .leadgen::before {content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 96px; background: var(--teal-600); z-index: 2; } .leadgen::after {content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(31, 94, 120, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 94, 120, 0.06) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; mask-image: radial-gradient(ellipse at 25% 50%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 25% 50%, black 0%, transparent 70%); } .leadgen .container {position: relative; z-index: 1; } /* Чек-лист в левой колонке leadgen */ .leadgen__checklist {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .leadgen__checklist-item {display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-body); color: var(--text-primary); line-height: 1.5; } .leadgen__checklist-item svg {flex-shrink: 0; color: var(--teal-600); margin-top: 3px; } .leadgen__grid {display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); align-items: center; } .leadgen__lead {font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-body); margin: 0 0 var(--sp-10); max-width: 48ch; } /* Form — light card (паттерн с главной) */ .form {background: var(--neutral-0); color: var(--text-primary); padding: var(--sp-10); position: relative; border-top: 3px solid var(--teal-600); box-shadow: 0 24px 60px -20px rgba(16, 31, 38, 0.15), 0 2px 8px rgba(16, 31, 38, 0.04); } .form::before {content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 3px; background: var(--green-500); } .form__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-8); color: var(--text-primary); letter-spacing: var(--ls-h3); } .form__label {display: block; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-2); } .form__input, .form__textarea {width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--sp-3) 0; outline: none; transition: border-color var(--duration-base) var(--ease-out); } .form__input::placeholder, .form__textarea::placeholder {color: var(--text-tertiary); opacity: 0.6; } .form__input:focus, .form__textarea:focus {border-bottom-color: var(--teal-600); box-shadow: none; } .form__textarea {resize: vertical; min-height: 88px; line-height: 1.5; } .form__check {display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-8) 0; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5; cursor: pointer; } .form__check input {margin-top: 3px; accent-color: var(--teal-600); } .form__check a {color: var(--teal-600); text-decoration: underline; } .form__submit {width: 100%; background: var(--green-500); color: var(--neutral-0); border: 0; padding: var(--sp-5) var(--sp-6); font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-3); transition: background var(--duration-base) var(--ease-out); } .form__submit:hover {background: var(--green-600, #3C8E33); } @media (max-width: 1024px) { .leadgen__grid { grid-template-columns: 1fr; gap: var(--sp-12); } .leadgen__intro { padding-right: 0; } .form__row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .leadgen { padding: var(--sp-20) 0; } .form { padding: var(--sp-8) var(--sp-6); } .trust-strip { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ============================================================ BLOCK 1 — «Один партнёр для любой задачи» Light surface, 5 нумерованных пунктов в ряд + контакт-CTA ============================================================ */ .partner {background: var(--surface-page); padding: var(--section-py-base, 96px) 0; border-bottom: 1px solid var(--border-subtle); } .partner__head {max-width: 720px; margin: 0 0 var(--sp-12); } .partner__eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-brand); margin-bottom: var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-3); } .partner__eyebrow::before {content: ""; width: 32px; height: 2px; background: var(--teal-600); } .partner__title {font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 48px); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: var(--ls-h1); margin: 0 0 var(--sp-5); color: var(--text-primary); } .partner__title em {font-style: normal; color: var(--text-brand); } .partner__lead {font-size: var(--fs-lead); color: var(--text-secondary); line-height: var(--lh-body); max-width: 60ch; margin: 0; } .partner__pillars {display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); } .pillar {padding: var(--sp-8) var(--sp-6) var(--sp-7); border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--sp-5); position: relative; transition: background var(--duration-base) var(--ease-out); } .pillar:hover {background: var(--surface-subtle); } .pillar:hover .pillar__num {color: var(--green-500); } .pillar__num {font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 56px; font-weight: var(--fw-bold); line-height: 0.9; letter-spacing: -0.04em; color: var(--teal-600); transition: color var(--duration-base) var(--ease-out); } .pillar__divider {width: 32px; height: 2px; background: var(--text-primary); transition: background var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out); } .pillar__text {font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.3; letter-spacing: var(--ls-h3); margin: 0; } @media (max-width: 1024px) { .partner__pillars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .partner__pillars { grid-template-columns: 1fr; } } @media (max-width: 1280px) { .catalog__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .catalog__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .catalog__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .prod-grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .adv__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .adv__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .turnkey__steps { grid-template-columns: repeat(2, 1fr); } .turnkey__detail { grid-template-columns: 1fr; gap: var(--sp-8); } } @media (max-width: 640px) { .turnkey__steps { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .cooling__grid { grid-template-columns: 1fr; gap: var(--sp-8); } } @media (max-width: 1024px) { .stock__aspects { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .service__grid { grid-template-columns: repeat(2, 1fr); } .service__banner { height: 200px; } } @media (max-width: 640px) { .service__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .modern__banner { height: 200px; } } @media (max-width: 1024px) { .modern__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .case__layout { grid-template-columns: 1fr; } .case__media { min-height: 320px; aspect-ratio: 4/3; } } /* ============================================================ BLOCK 12 — Запрос КП (детальная форма) ============================================================ */ .kp-request {background: var(--surface-page); padding: var(--section-py-base, 96px) 0; } .kp-request__layout {display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-16); align-items: start; } .kp-request__intro {padding-right: var(--sp-4); } .kp-request__manager {display: flex; gap: var(--sp-5); padding: var(--sp-6); background: var(--surface-muted); border-left: 3px solid var(--teal-600); margin-top: var(--sp-8); } .kp-request__manager-photo {width: 96px; height: 96px; flex-shrink: 0; overflow: hidden; } .kp-request__manager-photo img {width: 100%; height: 100%; object-fit: cover; display: block; } .kp-request__manager-body {flex: 1; } .kp-request__manager-name {font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); } .kp-request__manager-role {font-size: var(--fs-caption); color: var(--text-tertiary); margin: 0 0 var(--sp-3); } .kp-request__manager-quote {font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; margin: 0; } .kp-form {background: var(--neutral-950); color: var(--neutral-0); padding: var(--sp-12) var(--sp-10); position: relative; } .kp-form::before {content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 96px; background: var(--green-500); } .kp-form__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); letter-spacing: var(--ls-h3); } .kp-form__sub {font-size: var(--fs-small); color: rgba(255,255,255,0.6); margin: 0 0 var(--sp-8); } .kp-form__field {margin-bottom: var(--sp-6); } .kp-form__label {display: block; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: var(--sp-2); } .kp-form__input, .kp-form__textarea {width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.2); color: var(--neutral-0); font-family: var(--font-body); font-size: var(--fs-body); padding: var(--sp-3) 0; outline: none; transition: border-color var(--duration-base) var(--ease-out); } .kp-form__input::placeholder, .kp-form__textarea::placeholder {color: rgba(255,255,255,0.35); } .kp-form__input:focus, .kp-form__textarea:focus {border-bottom-color: var(--green-400); } .kp-form__textarea {resize: vertical; min-height: 64px; line-height: 1.5; } .kp-form__row {display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .kp-form__radio-group {display: flex; gap: var(--sp-3); margin-top: var(--sp-2); } .kp-form__radio {display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px solid rgba(255,255,255,0.2); font-family: var(--font-display); font-size: var(--fs-small); color: rgba(255,255,255,0.85); cursor: pointer; border-radius: var(--radius-xs); transition: var(--btn-transition); } .kp-form__radio input {accent-color: var(--green-500); } .kp-form__radio:hover {border-color: var(--green-400); color: var(--neutral-0); } .kp-form__file {display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px dashed rgba(255,255,255,0.3); font-size: var(--fs-small); color: rgba(255,255,255,0.7); cursor: pointer; transition: border-color var(--duration-base) var(--ease-out); } .kp-form__file:hover {border-color: var(--green-400); color: var(--neutral-0); } .kp-form__file svg {width: 20px; height: 20px; flex-shrink: 0; color: var(--green-400); } .kp-form__check {display: flex; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-8); font-size: var(--fs-caption); color: rgba(255,255,255,0.6); line-height: 1.5; cursor: pointer; } .kp-form__check input {margin-top: 3px; accent-color: var(--green-500); } .kp-form__check a {color: var(--green-400); text-decoration: underline; } .kp-form__submit {width: 100%; background: var(--green-500); color: var(--neutral-950); border: 0; padding: var(--sp-5) var(--sp-6); font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-3); transition: background var(--duration-base) var(--ease-out); } .kp-form__submit:hover {background: var(--green-400); } @media (max-width: 1024px) { .kp-request__layout { grid-template-columns: 1fr; } .kp-form__row { grid-template-columns: 1fr; } } .partner-logo {background: var(--surface-page); border: 1px solid var(--border-subtle); padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80px; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-secondary); text-align: center; letter-spacing: 0.02em; line-height: 1.2; transition: var(--btn-transition); } .partner-logo:hover {border-color: var(--teal-600); color: var(--teal-700); } .partner-logo small {font-weight: var(--fw-medium); font-size: 10px; color: var(--text-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: var(--ls-caps); } @media (max-width: 1024px) { .leasing__layout { grid-template-columns: 1fr; } .leasing__partners { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .geo__layout { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .best-offer__card { grid-template-columns: 1fr; padding: var(--sp-8); } } @media (max-width: 1024px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .highlights__grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .contacts__layout { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .footer__brand-block { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer__top { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .contacts-tizers__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .contacts-tizers__grid { grid-template-columns: 1fr; } } /* Mobile nav stub */ @media (max-width: 1024px) { .nav { display: none; } } /* --- Category hero (dark band) --- */ .cat-hero {position: relative; background: var(--neutral-950); color: var(--text-inverse); min-height: 640px; display: flex; align-items: center; overflow: hidden; } .cat-hero__image {position: absolute; inset: 0; background: var(--neutral-950) url('/img/montazh-hero-blueprint.png') center right/cover no-repeat; z-index: 0; } .cat-hero__overlay {position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,28,37,0.92) 0%, rgba(10,28,37,0.75) 35%, rgba(10,28,37,0.35) 70%, rgba(10,28,37,0.15) 100%), linear-gradient(180deg, rgba(10,28,37,0.4) 0%, rgba(10,28,37,0) 30%, rgba(10,28,37,0) 70%, rgba(10,28,37,0.5) 100%); } .cat-hero__content {position: relative; z-index: 2; padding: var(--sp-8) 0 var(--sp-12); width: 100%; } .cat-hero__body {max-width: 640px; } .breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); padding: var(--sp-2) 0 var(--sp-10); } .breadcrumb a {color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .breadcrumb a:hover {color: var(--green-400); } .breadcrumb__sep {color: rgba(255,255,255,0.35); } .breadcrumb__current {color: rgba(255,255,255,0.95); } .cat-hero__eyebrow {display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-400); margin: 0 0 var(--sp-4); } .cat-hero__eyebrow::before {content: ""; width: 28px; height: 2px; background: var(--green-400); } .cat-hero__title {font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 60px); font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: var(--ls-h1); margin: 0 0 var(--sp-5); max-width: 22ch; color: var(--neutral-0); } .cat-hero__title em {font-style: normal; color: var(--green-400); } .cat-hero__subtitle {font-family: var(--font-body); font-size: var(--fs-lead); font-weight: var(--fw-regular); line-height: 1.5; margin: 0 0 var(--sp-7); max-width: 56ch; color: rgba(255, 255, 255, 0.85); } .cat-hero__actions {display: flex; gap: var(--sp-4); flex-wrap: wrap; } /* === Декоративный процесс-схема ЛВМ — оригинальный элемент hero === */ .cat-hero__process {margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); max-width: 880px; position: relative; } .cat-hero-step {position: relative; display: flex; flex-direction: column; gap: var(--sp-2); } .cat-hero-step__icon {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(79, 171, 58, 0.12); color: var(--green-400); margin-bottom: var(--sp-1); } .cat-hero-step__icon svg {width: 22px; height: 22px; } .cat-hero-step__num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .cat-hero-step__title {font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--neutral-0); line-height: 1.25; margin: 0; } .cat-hero-step__text {font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.62); line-height: 1.5; margin: 0; } /* Соединительная линия между стадиями */ .cat-hero-step:not(:last-child)::after {content: ""; position: absolute; top: 20px; right: -12px; width: 24px; height: 1px; background: linear-gradient(to right, rgba(255,255,255,0.25), rgba(79,171,58,0.4)); } @media (max-width: 1024px) { .cat-hero__process { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } .cat-hero-step:not(:last-child)::after { display: none; } } @media (max-width: 560px) { .cat-hero__process { grid-template-columns: 1fr; } } /* === HERO KPI STRIP — 4 числовых тайла под hero === */ .hero-kpi {background: var(--neutral-950); border-top: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 3; } .hero-kpi__grid {display: grid; grid-template-columns: repeat(4, 1fr); } .hero-kpi__item {padding: var(--sp-8) var(--sp-6); border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: var(--sp-2); } .hero-kpi__item:last-child {border-right: none; } .hero-kpi__num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(28px, 3vw, 40px); font-weight: var(--fw-bold); color: var(--green-400); line-height: 1; letter-spacing: -0.02em; } .hero-kpi__label {font-size: var(--fs-small); color: rgba(255,255,255,0.7); line-height: 1.4; } @media (max-width: 1024px) { .hero-kpi__grid { grid-template-columns: repeat(2, 1fr); } .hero-kpi__item:nth-child(2) { border-right: none; } .hero-kpi__item:nth-child(1), .hero-kpi__item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); } } @media (max-width: 560px) { .hero-kpi__grid { grid-template-columns: 1fr; } .hero-kpi__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); } } /* === PROBLEMS — 4 benefit-forward карточки с ключевой метрикой === */ .problems {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; position: relative; overflow: hidden; } /* Декоративная teal-сетка на фоне (рифма с leadgen) */ .problems::before {content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(31, 94, 120, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 94, 120, 0.05) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; mask-image: radial-gradient(ellipse at 75% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 75% 50%, black 0%, transparent 75%); } .problems .container {position: relative; } .problems__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); } .benefit-card {background: var(--neutral-0); padding: var(--sp-8) var(--sp-8) var(--sp-7); border-top: 3px solid var(--teal-600); display: flex; flex-direction: column; gap: var(--sp-5); position: relative; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .benefit-card:hover {box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Зелёный микро-акцент в правом верхнем углу (паттерн карточек style.md §18-C) */ .benefit-card::before {content: ""; position: absolute; top: 0; right: 0; width: 48px; height: 3px; background: var(--green-500); } /* HEADER: иконка + крупная метрика */ .benefit-card__header {display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-subtle); } .benefit-card__icon {width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(31, 94, 120, 0.10); color: var(--teal-600); } .benefit-card__icon svg {width: 30px; height: 30px; } .benefit-card__metric {display: flex; flex-direction: column; gap: 2px; min-width: 0; } .benefit-card__metric-num {font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--green-500); font-variant-numeric: tabular-nums; } .benefit-card__metric-label {font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-secondary); line-height: 1.3; } /* BODY: заголовок-решение + описание */ .benefit-card__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: var(--ls-h3); color: var(--text-primary); margin: 0; } .benefit-card__text {font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.55; margin: 0; } /* FOOTER: проблема, которую решает (мягко, не выпячивая) */ .benefit-card__solves {margin-top: auto; padding-top: var(--sp-5); border-top: 1px dashed var(--border-default); display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-small); color: var(--text-tertiary); } .benefit-card__solves-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); flex-shrink: 0; } .benefit-card__solves-text {color: var(--text-secondary); line-height: 1.5; } @media (max-width: 768px) { .problems__grid { grid-template-columns: 1fr; } .benefit-card__header { flex-direction: column; align-items: flex-start; } } /* === SCENARIOS — 3 сценария === */ .scenarios {background: var(--neutral-0); padding: var(--section-py-base, 96px) 0; } .scenarios__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-10); } .scenario-card {background: var(--surface-subtle); padding: var(--sp-8); border-left: 3px solid var(--teal-600); display: flex; flex-direction: column; gap: var(--sp-4); } .scenario-card__head {display: flex; align-items: center; gap: var(--sp-3); } .scenario-card__icon {width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(31,94,120,0.10); color: var(--teal-600); } .scenario-card__icon svg {width: 28px; height: 28px; } .scenario-card__eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--text-tertiary); } .scenario-card__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--text-primary); margin: 0; } .scenario-card__alloys {display: flex; flex-wrap: wrap; gap: var(--sp-2); } .scenario-card__alloy {font-family: var(--font-mono); font-size: var(--fs-caption); padding: var(--sp-1) var(--sp-3); background: var(--neutral-0); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .scenario-card__kit-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-500); margin-top: var(--sp-2); } .scenario-card__kit {font-size: var(--fs-small); color: var(--text-primary); line-height: 1.55; margin: 0; } .scenario-card__use {font-size: var(--fs-small); font-style: italic; color: var(--text-tertiary); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); margin-top: auto; } @media (max-width: 1024px) { .scenarios__grid { grid-template-columns: 1fr; } } /* === EQUIPMENT GRID — 8 узлов === */ .equip {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; } .equip__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: var(--sp-10); } .equip-cell {background: var(--neutral-0); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); transition: background var(--duration-base) var(--ease-out); } .equip-cell:hover {background: var(--surface-subtle); } .equip-cell__icon {width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(31,94,120,0.10); color: var(--teal-600); } .equip-cell__icon svg {width: 24px; height: 24px; } .equip-cell__title {font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0; line-height: 1.3; } .equip-cell__text {font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; margin: 0; } @media (max-width: 1024px) { .equip__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .equip__grid { grid-template-columns: 1fr; } } /* === PRODUCTION RF — главный нарратив страницы, тёмная подложка === */ .prod-rf {position: relative; background: var(--neutral-950); color: var(--text-inverse); padding: var(--section-py-loose, 128px) 0; overflow: hidden; isolation: isolate; } .prod-rf::before {content: ""; position: absolute; inset: 0; background-image: url('/img/production-rf-workshop.png'); background-size: cover; background-position: right center; opacity: 0.32; z-index: -2; } .prod-rf::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,31,38,0.96) 0%, rgba(16,31,38,0.86) 28%, rgba(16,31,38,0.55) 55%, rgba(16,31,38,0.35) 80%, rgba(16,31,38,0.55) 100%), linear-gradient(180deg, rgba(16,31,38,0) 60%, rgba(16,31,38,0.65) 100%); z-index: -1; } .prod-rf .container {position: relative; } .prod-rf__head {max-width: 720px; margin: 0 0 var(--sp-16); } .prod-rf__eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-400); display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .prod-rf__eyebrow::before {content: ""; width: 32px; height: 2px; background: var(--green-500); } .prod-rf__title {font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 48px); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: var(--ls-h1); color: var(--neutral-0); margin: 0 0 var(--sp-5); } .prod-rf__title em {font-style: normal; color: var(--green-400); } .prod-rf__lead {font-size: var(--fs-lead); color: rgba(255,255,255,0.78); line-height: var(--lh-body); max-width: 56ch; margin: 0; } .prod-rf__pillars {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-bottom: var(--sp-12); } .prod-rf-pillar {background: rgba(16,31,38,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); } .prod-rf-pillar__num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 48px; font-weight: var(--fw-bold); color: var(--green-500); line-height: 1; letter-spacing: -0.04em; } .prod-rf-pillar__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--neutral-0); margin: 0; line-height: 1.2; } .prod-rf-pillar__text {font-size: var(--fs-small); color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; } .prod-rf__bonus {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,0.12); } .prod-rf-bonus__item {display: flex; gap: var(--sp-3); align-items: flex-start; } .prod-rf-bonus__icon {flex-shrink: 0; color: var(--green-400); margin-top: 2px; } .prod-rf-bonus__body {display: flex; flex-direction: column; gap: 2px; } .prod-rf-bonus__title {font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--neutral-0); } .prod-rf-bonus__text {font-size: var(--fs-caption); color: rgba(255,255,255,0.6); line-height: 1.5; } @media (max-width: 1024px) { .prod-rf__pillars { grid-template-columns: 1fr; } .prod-rf__bonus { grid-template-columns: 1fr; } } /* === ECONOMICS — таблица + ROI === */ .econ {background: var(--neutral-0); padding: var(--section-py-base, 96px) 0; } .econ__grid {display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-12); align-items: stretch; margin-top: var(--sp-10); } .econ__table {background: var(--surface-subtle); border-top: 3px solid var(--teal-600); padding: var(--sp-8); } .econ__table-title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0 0 var(--sp-2); } .econ__table-sub {font-size: var(--fs-small); color: var(--text-tertiary); margin: 0 0 var(--sp-6); } .econ-table {width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .econ-table th, .econ-table td {text-align: left; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border-subtle); } .econ-table th {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); } .econ-table th:nth-child(2), .econ-table td:nth-child(2) {color: var(--text-secondary); } .econ-table th:nth-child(3), .econ-table td:nth-child(3) {color: var(--green-500); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } .econ-table tr:last-child td {border-bottom: none; font-weight: var(--fw-semibold); } .econ__big {background: var(--neutral-950); color: var(--neutral-0); padding: var(--sp-10) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; position: relative; border-top: 3px solid var(--green-500); } .econ__big-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.6); } .econ__big-num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(64px, 8vw, 112px); font-weight: var(--fw-bold); color: var(--green-400); line-height: 1; letter-spacing: -0.04em; } .econ__big-desc {font-size: var(--fs-body); color: rgba(255,255,255,0.78); line-height: 1.5; } .econ__big-roi {margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-small); color: rgba(255,255,255,0.85); } .econ__big-roi strong {color: var(--green-400); font-variant-numeric: tabular-nums; } @media (max-width: 1024px) { .econ__grid { grid-template-columns: 1fr; } } /* === CATALOG-LVM — детальная линейка оборудования с реальными фото === */ .catalog-lvm {background: var(--neutral-0); padding: var(--section-py-base, 96px) 0; } .catalog-lvm__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); } .catalog-lvm-card {background: var(--surface-subtle); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); position: relative; } .catalog-lvm-card:hover {box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--teal-600); } .catalog-lvm-card__cover {background: var(--neutral-0); aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-subtle); } .catalog-lvm-card__cover img {width: 100%; height: 100%; object-fit: contain; padding: var(--sp-3); transition: transform var(--duration-slow, 400ms) var(--ease-out); } .catalog-lvm-card:hover .catalog-lvm-card__cover img {transform: scale(1.05); } .catalog-lvm-card__body {padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .catalog-lvm-card__category {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); } .catalog-lvm-card__title {font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.3; margin: 0; flex: 1; } .catalog-lvm-card__action {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--teal-600); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); display: inline-flex; align-items: center; gap: var(--sp-2); } .catalog-lvm-card__action::after {content: "→"; transition: transform var(--duration-fast) var(--ease-out); } .catalog-lvm-card:hover .catalog-lvm-card__action::after {transform: translateX(4px); } @media (max-width: 1024px) { .catalog-lvm__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .catalog-lvm__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .catalog-lvm__grid { grid-template-columns: 1fr; } } /* === TIMELINE — 4 шага: длительность как главный визуал === */ .timeline {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; } .timeline__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: var(--sp-10); } .timeline-step {background: var(--neutral-0); padding: var(--sp-8) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); position: relative; } .timeline-step__duration {font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1; color: var(--teal-600); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--teal-600); display: inline-block; width: fit-content; } .timeline-step__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0; line-height: 1.25; } .timeline-step__text {font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; margin: 0; } @media (max-width: 1024px) { .timeline__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .timeline__grid { grid-template-columns: 1fr; } } /* === FAQ — карточный accordion (в стиле design-системы) === */ .faq {background: var(--neutral-0); padding: var(--section-py-base, 96px) 0; } .faq__list {margin-top: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-3); max-width: 920px; } .faq__item {background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-left: 3px solid transparent; transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .faq__item:hover {border-color: var(--border-default); } .faq__item[open] {background: var(--neutral-0); border-color: var(--border-subtle); border-left-color: var(--teal-600); box-shadow: var(--shadow-sm); } .faq__item summary {list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-7); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.4; transition: color var(--duration-fast) var(--ease-out); } .faq__item summary::-webkit-details-marker {display: none; } .faq__item summary:hover {color: var(--teal-600); } .faq__item summary::after {content: ""; flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid var(--teal-600); border-bottom: 2px solid var(--teal-600); transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-out); margin-top: -4px; } .faq__item[open] summary {color: var(--teal-600); } .faq__item[open] summary::after {transform: rotate(-135deg); margin-top: 4px; } .faq__answer {font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.65; padding: 0 var(--sp-7) var(--sp-6); margin: 0; max-width: 72ch; } @media (max-width: 1024px) { .best-offer__card { grid-template-columns: 1fr; padding: var(--sp-8); } } /* --- Subcategories --- */ .subcat {background: var(--surface-page); padding: var(--section-py-base, 96px) 0; } .subcat-group + .subcat-group {margin-top: var(--sp-16); } .subcat-group__title {font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-h2); color: var(--text-primary); padding-bottom: var(--sp-4); margin-bottom: var(--sp-8); border-bottom: 2px solid var(--border-subtle); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); } .subcat-group__count {font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; color: var(--text-tertiary); } .subcat-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .subcat-card {display: flex; flex-direction: column; background: var(--surface-page); border: 1px solid var(--border-subtle); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .subcat-card:hover {border-color: var(--teal-600); box-shadow: var(--shadow-md); transform: translateY(-2px); } .subcat-card__cover {aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-muted); } .subcat-card__cover img {width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .subcat-card:hover .subcat-card__cover img {transform: scale(1.04); } .subcat-card__body {display: flex; flex-direction: column; flex: 1; gap: var(--sp-5); padding: var(--sp-5); } .subcat-card__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-h4); color: var(--text-primary); flex: 1; } .subcat-card__action {display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-brand); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); } .subcat-card:hover .subcat-card__action {color: var(--teal-700); } .subcat-card:hover .subcat-card__action .btn__arrow {transform: translateX(4px); } /* --- Why-us: industry tags + 6-card grid --- */ .adv__grid--6 {grid-template-columns: repeat(3, 1fr); } .why__industries {margin-bottom: var(--sp-12); padding-bottom: var(--sp-10); border-bottom: 1px solid var(--border-subtle); } .why__industries-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-4); } .why__tags {display: flex; flex-wrap: wrap; gap: var(--sp-3); } .why-tag {display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--surface-muted); border: 1px solid var(--border-subtle); font-size: var(--fs-small); color: var(--text-secondary); } .why-tag::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; } /* --- Category contacts --- */ .cat-contacts {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; } .cat-contacts__layout {display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: stretch; } .cat-contacts__info {display: flex; flex-direction: column; justify-content: space-between; } .contact-item {display: flex; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; } .cat-contacts__info .contact-item:first-child {padding-top: 0; } .cat-contacts__info .contact-item:last-child {border-bottom: 0; } .contact-item__icon {width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--teal-50); color: var(--teal-600); } .contact-item__icon svg {width: 22px; height: 22px; } .contact-item__label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-1); } .contact-item__value {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.3; } .contact-item__value--sm {font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); } a.contact-item:hover .contact-item__value {color: var(--text-brand); } .contact-item__meta {font-size: var(--fs-small); color: var(--text-tertiary); margin-top: var(--sp-1); } .cat-contacts__map {height: 100%; min-height: 460px; background: var(--neutral-100); overflow: hidden; border: 0; box-shadow: var(--shadow-md); } .cat-contacts__map iframe {width: 100%; height: 100%; border: 0; display: block; } /* --- Category page responsive --- */ @media (max-width: 1024px) { .cat-hero { min-height: 520px; } .cat-hero__overlay { background: linear-gradient(180deg, rgba(10,28,37,0.85) 0%, rgba(10,28,37,0.7) 50%, rgba(10,28,37,0.85) 100%); } .subcat-grid { grid-template-columns: repeat(3, 1fr); } .adv__grid--6 { grid-template-columns: repeat(2, 1fr); } .cat-contacts__layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .subcat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .subcat-grid { grid-template-columns: 1fr; } .adv__grid--6 { grid-template-columns: 1fr; } .cat-hero__actions { flex-direction: column; align-items: stretch; } .cat-hero__actions .btn { justify-content: center; } } /* ============================================================ LEADGEN (категория): фото менеджера с плашкой + форма сбоку ============================================================ */ .leadgen__grid {align-items: stretch; } .leadgen__photo {position: relative; overflow: hidden; background: var(--surface-muted); border: 1px solid var(--border-subtle); min-height: 520px; } .leadgen__photo > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .leadgen__plaque {position: absolute; left: var(--sp-6); right: var(--sp-6); bottom: var(--sp-6); background: var(--surface-page); padding: var(--sp-5) var(--sp-7); border-left: 3px solid var(--teal-600); box-shadow: var(--shadow-lg); } .leadgen__plaque-eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-brand); margin-bottom: var(--sp-2); } .leadgen__plaque-title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: var(--ls-h3); color: var(--text-primary); margin-bottom: var(--sp-2); } .leadgen__plaque-title em {font-style: normal; color: var(--text-brand); } .leadgen__plaque-text {font-size: var(--fs-small); line-height: 1.45; color: var(--text-secondary); } .leadgen__plaque-attr {display: flex; align-items: center; margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle); font-family: var(--font-display); font-size: var(--fs-caption); color: var(--text-tertiary); } .leadgen__plaque-attr strong {color: var(--text-primary); font-weight: var(--fw-semibold); } @media (max-width: 900px) { .leadgen__photo { min-height: 380px; } .leadgen__plaque { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); padding: var(--sp-5); } } /* ============================================================ WHY-US — тёмная шапка + шахматная плитка карточек ============================================================ */ .why-us {background: var(--surface-page); } .why-us__hero {background: var(--neutral-950); color: var(--text-inverse); padding: var(--sp-20) 0 0; } .why-us__hero > .container {padding-bottom: var(--sp-14); } .why-us__image {position: relative; height: 460px; background: var(--neutral-950) url('/img/banner-service.png') center 30%/cover no-repeat; } .why-us__image::after {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,31,38,0.55) 0%, rgba(16,31,38,0.15) 35%, rgba(16,31,38,0) 60%, rgba(16,31,38,0.10) 100%); pointer-events: none; } .why-us__head {max-width: 860px; margin: 0 0 var(--sp-10); } .why-us__eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-400); display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .why-us__eyebrow::before {content: ""; width: 32px; height: 2px; background: var(--green-400); } .why-us__title {font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 48px); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: var(--ls-h1); color: var(--text-inverse); margin-bottom: var(--sp-5); } .why-us__title em {font-style: normal; color: var(--green-400); } .why-us__lead {font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255,255,255,0.72); max-width: 60ch; } .why-us__tags {display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,0.12); } .why-us__tags-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.5); margin-right: var(--sp-2); } .why-us__tags-list {display: contents; } .why-us__tags-list li {display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); font-size: var(--fs-small); color: rgba(255,255,255,0.88); } .why-us__tags-list li::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; } .why-us__cards-band {background: transparent; padding-bottom: var(--sp-20); margin-top: -240px; position: relative; z-index: 2; } .why-us__cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; box-shadow: var(--shadow-lg); } .why-us-card {padding: var(--sp-8) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); background: var(--surface-page); color: var(--text-primary); min-height: 300px; position: relative; } .why-us-card__num {font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--text-tertiary); } .why-us-card__icon {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--teal-600); margin: var(--sp-2) 0; } .why-us-card__icon svg {width: 100%; height: 100%; } .why-us-card__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: var(--ls-h3); } .why-us-card__text {font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-secondary); margin-top: auto; } /* Тёмные карточки — шахматный порядок (2, 4, 6) */ .why-us-card:nth-child(2n) {background: var(--neutral-950); color: var(--text-inverse); } .why-us-card:nth-child(2n) .why-us-card__num {color: var(--green-400); opacity: 0.85; } .why-us-card:nth-child(2n) .why-us-card__icon {color: var(--green-400); } .why-us-card:nth-child(2n) .why-us-card__text {color: rgba(255,255,255,0.7); } @media (max-width: 1024px) { .why-us__cards { grid-template-columns: repeat(2, 1fr); } .why-us__hero { padding-top: var(--sp-16); } .why-us__image { height: 360px; } .why-us__cards-band { margin-top: -200px; } } @media (max-width: 640px) { .why-us__cards { grid-template-columns: 1fr; } .why-us__image { height: 240px; } .why-us__cards-band { margin-top: -120px; } } @media (max-width: 1024px) { .nav-toggle { display: inline-flex; } } @media (max-width: 640px) { .header__actions .btn--primary { display: none; } } /* «Без пусконаладки» — выделенный предупреждающий блок */ .puskonaladka__warn {margin-top: var(--sp-10); padding: var(--sp-6) var(--sp-7); background: var(--neutral-0); border-left: 3px solid var(--green-500); box-shadow: 0 8px 24px -12px rgba(16, 31, 38, 0.10); } .puskonaladka__warn-label {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--green-500); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); } .puskonaladka__warn-label::before {content: ""; width: 16px; height: 2px; background: var(--green-500); } .puskonaladka__warn-text {font-size: var(--fs-body); color: var(--text-primary); line-height: 1.6; margin: 0; max-width: 78ch; } /* SITUATIONS — 4 карточки «в каких случаях нужна услуга» */ .situations {background: var(--neutral-0); padding: var(--section-py-base, 96px) 0; } .situations__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); } .situation-card {background: var(--surface-subtle); border-top: 3px solid var(--teal-600); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .situation-card:hover {box-shadow: var(--shadow-md); transform: translateY(-2px); } .situation-card__num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 36px; font-weight: var(--fw-bold); color: var(--teal-600); line-height: 1; letter-spacing: -0.04em; } .situation-card__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.25; margin: 0; } .situation-card__text {font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; margin: 0; } @media (max-width: 768px) { .situations__grid { grid-template-columns: 1fr; } } /* RESULT GRID — 6 карточек «результат для предприятия» (3×2) */ .result__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); } @media (max-width: 1024px) { .result__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .result__grid { grid-template-columns: 1fr; } } /* SCOPE — список 12 пунктов (что входит / что учитывается) */ .scope {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; } .scope--alt {background: var(--neutral-0); } .scope__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); margin-top: var(--sp-10); } .scope--alt .scope__grid {background: var(--border-subtle); border: 1px solid var(--border-subtle); } .scope-item {background: var(--neutral-0); padding: var(--sp-5) var(--sp-6); display: flex; gap: var(--sp-4); align-items: flex-start; transition: background var(--duration-base) var(--ease-out); } .scope--alt .scope-item {background: var(--surface-subtle); } .scope-item:hover {background: var(--surface-muted); } .scope-item__num {font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--teal-600); line-height: 1; letter-spacing: -0.02em; min-width: 36px; flex-shrink: 0; } .scope-item__text {font-size: var(--fs-body); color: var(--text-primary); line-height: 1.45; } @media (max-width: 1024px) { .scope__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .scope__grid { grid-template-columns: 1fr; } } /* FORMATS — 5 карточек форматов услуги */ .formats {background: var(--surface-subtle); padding: var(--section-py-base, 96px) 0; } .formats__grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-10); } .format-card {background: var(--neutral-0); border: 1px solid var(--border-subtle); border-top: 3px solid var(--teal-600); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); position: relative; transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .format-card:hover {box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--teal-600); } .format-card::before {content: ""; position: absolute; top: 0; right: 0; width: 48px; height: 3px; background: var(--green-500); } .format-card__eyebrow {font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary); } .format-card__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.25; margin: 0; } .format-card__text {font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.55; margin: 0; flex: 1; } .format-card__cta {margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--teal-600); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); } .format-card__cta .btn__arrow {transition: transform var(--duration-fast) var(--ease-out); } .format-card:hover .format-card__cta .btn__arrow {transform: translateX(4px); } @media (max-width: 1024px) { .formats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .formats__grid { grid-template-columns: 1fr; } } /* === POLICY PAGE (scoped, не трогаем глобальный .container) === */ .legal-hero {background: #F5F6F7; border-bottom: 1px solid var(--border-subtle, #E1E5E7); padding: 40px 0 32px; } .legal-hero .legal-container {max-width: 880px; margin: 0 auto; padding: 0 24px; } @media (max-width: 768px) { .legal-hero { padding: 24px 0 20px; } .legal-hero .legal-container { padding: 0 16px; } } .legal-hero .breadcrumb {font-size: 13px; color: #5A6166; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .legal-hero .breadcrumb a {color: #5A6166; text-decoration: none; } .legal-hero .breadcrumb a:hover {color: #1A1D20; text-decoration: underline; } .legal-hero .breadcrumb__sep {opacity: 0.5; color: #5A6166; } .legal-hero .breadcrumb__current {color: #1A1D20; } .legal-hero__title {font-family: var(--font-display, 'Inter', system-ui, sans-serif); font-size: clamp(26px, 4.5vw, 40px); line-height: 1.18; letter-spacing: -0.02em; color: #1A1D20; margin: 0 0 12px; font-weight: 700; } .legal-hero__lead {color: #5A6166; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.55; margin: 0; max-width: 64ch; } .legal-body {padding: 40px 0 64px; background: #FFFFFF; } .legal-body .legal-container {max-width: 880px; margin: 0 auto; padding: 0 24px; } @media (max-width: 768px) { .legal-body { padding: 24px 0 40px; } .legal-body .legal-container { padding: 0 16px; } } .legal-body h2 {font-family: var(--font-display, 'Inter', system-ui, sans-serif); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; letter-spacing: -0.01em; color: #1A1D20; margin: 28px 0 12px; font-weight: 700; scroll-margin-top: 80px; } .legal-body h2:first-child {margin-top: 0; } .legal-body p {font-size: 15.5px; line-height: 1.65; color: #1A1D20; margin: 0 0 12px; } @media (max-width: 768px) { .legal-body p { font-size: 15px; line-height: 1.6; } } .legal-body ul {margin: 0 0 12px; padding-left: 22px; list-style: disc; } .legal-body li {font-size: 15.5px; line-height: 1.65; color: #1A1D20; margin-bottom: 6px; } @media (max-width: 768px) { .legal-body li { font-size: 15px; line-height: 1.6; } } .legal-body li > strong {color: #1A1D20; } .legal-body a {color: #1F8A8A; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .legal-body a:hover {color: #176868; } .legal-foot {margin-top: 32px; padding-top: 20px; border-top: 1px solid #E1E5E7; font-size: 13px; color: #5A6166; text-align: center; }