/* B-3 шаблон «tovar-b» — 98 страниц. Правка здесь = правка всех. Разделы: induktsionnye-nagrevateli (54), induktsionnye-plavilnye-pechi (44). Грузится 'ом в ПОСЛЕ 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-page); 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); } .leadgen__grid {display: grid; grid-template-columns: 1fr 1.2fr; 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 */ .form {background: var(--neutral-950); color: var(--neutral-0); padding: var(--sp-12) var(--sp-10); position: relative; } .form::before {content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 96px; 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-2); color: var(--neutral-0); letter-spacing: var(--ls-h3); } .form__sub {font-size: var(--fs-small); color: rgba(255,255,255,0.6); margin: 0 0 var(--sp-8); } .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); } .form__input, .form__textarea {width: 100%; 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); } .form__input::placeholder, .form__textarea::placeholder {color: rgba(255,255,255,0.35); } .form__input:focus, .form__textarea:focus {border-bottom-color: var(--green-400); box-shadow: none; } .form__textarea {resize: vertical; min-height: 56px; line-height: 1.5; } .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; } .form__check input {margin-top: 3px; accent-color: var(--green-500); } .form__check a {color: var(--green-400); text-decoration: underline; } .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); } .form__submit:hover {background: var(--green-400); } @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 {background: var(--neutral-950); color: var(--text-inverse); } .breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); padding: var(--sp-5) 0 var(--sp-2); } .breadcrumb a {color: rgba(255,255,255,0.62); 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.28); } .breadcrumb__current {color: rgba(255,255,255,0.92); } .cat-hero__grid {display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-12); align-items: center; padding: var(--sp-10) 0 var(--sp-16); } .cat-hero__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: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .cat-hero__eyebrow::before {content: ""; width: 32px; height: 2px; background: var(--green-400); } .cat-hero__title {font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: var(--fw-bold); line-height: 1.08; letter-spacing: var(--ls-h1); margin-bottom: var(--sp-5); } .cat-hero__subtitle {font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255,255,255,0.72); max-width: 48ch; margin-bottom: var(--sp-8); } .cat-hero__actions {display: flex; gap: var(--sp-4); flex-wrap: wrap; } .cat-hero__media {aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); overflow: hidden; } .cat-hero__media img {width: 100%; height: 100%; object-fit: cover; } /* --- 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: 0.9fr 1.1fr; gap: var(--sp-10); align-items: start; } .cat-contacts__info {display: flex; flex-direction: column; } .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 {aspect-ratio: 4 / 3; background: var(--neutral-100); overflow: hidden; border: 1px solid var(--border-subtle); } .cat-contacts__map iframe {width: 100%; height: 100%; border: 0; display: block; } /* --- Category page responsive --- */ @media (max-width: 1024px) { .cat-hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); } .cat-hero__media { order: -1; aspect-ratio: 16 / 9; } .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; } } /* ============================================================ CATALOG PAGE — фильтр + сетка карточек позиций ============================================================ */ .catalog-list {background: var(--surface-page); padding: var(--section-py-base, 96px) 0; } /* --- Фильтр: 2 ключевых параметра --- */ .catalog-filter {display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); background: var(--surface-subtle); border: 1px solid var(--border-subtle); margin-bottom: var(--sp-8); } .catalog-filter__group {display: flex; flex-direction: column; gap: var(--sp-2); } .catalog-filter__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); } .catalog-filter__select {font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-primary); padding: var(--sp-3) var(--sp-5); background: var(--surface-page); border: 1px solid var(--border-default); min-width: 240px; cursor: pointer; } .catalog-filter__select:focus {outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .catalog-filter__reset {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-secondary); background: none; border: 0; cursor: pointer; padding: var(--sp-3) 0; transition: color var(--duration-fast) var(--ease-out); } .catalog-filter__reset:hover {color: var(--text-brand); } .catalog-filter__count {margin-left: auto; align-self: center; font-size: var(--fs-small); color: var(--text-tertiary); } .catalog-filter__count strong {color: var(--text-primary); font-weight: var(--fw-semibold); } /* --- Карточка позиции --- */ .pcard-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .pcard {display: flex; flex-direction: column; background: var(--surface-page); border: 1px solid var(--border-subtle); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .pcard:hover {border-color: var(--teal-600); box-shadow: var(--shadow-md); } .pcard__cover {position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-muted); } .pcard__cover img {width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .pcard:hover .pcard__cover img {transform: scale(1.04); } .pcard__badge {position: absolute; left: 0; top: var(--sp-4); background: var(--teal-600); color: var(--text-inverse); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: var(--sp-1_5) var(--sp-3); } .pcard__body {display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); gap: var(--sp-3); } .pcard__title {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-h4); } .pcard__title a {color: var(--text-primary); text-decoration: none; } .pcard__title a:hover {color: var(--text-brand); } .pcard__origin {display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-tertiary); } .pcard__origin::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; } .pcard__specs {margin: var(--sp-1) 0 var(--sp-2); border-top: 1px solid var(--border-subtle); } .pcard__spec {display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-small); } .pcard__spec dt {color: var(--text-tertiary); } .pcard__spec dd {color: var(--text-primary); font-weight: var(--fw-semibold); font-family: var(--font-mono); text-align: right; white-space: nowrap; } .pcard__actions {margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); } .pcard__more {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); text-decoration: none; align-self: center; } .pcard__more:hover {color: var(--teal-700); } .pcard__more:hover .btn__arrow {transform: translateX(4px); } .btn--block {width: 100%; justify-content: center; } /* --- Catalog CTA (тёмная мини-форма) --- */ .catalog-cta {background: var(--surface-deep); color: var(--text-inverse); padding: var(--sp-16) 0; } .catalog-cta__inner {display: grid; grid-template-columns: 1fr auto; gap: var(--sp-12); align-items: center; } .catalog-cta__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-h3); } .catalog-cta__text {color: rgba(255,255,255,0.68); margin-top: var(--sp-3); max-width: 52ch; } .catalog-cta__form {display: flex; flex-direction: column; gap: var(--sp-3); } .catalog-cta__row {display: flex; flex-wrap: wrap; gap: var(--sp-3); } .catalog-cta__input {font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-inverse); padding: 0 var(--sp-4); height: 48px; min-width: 220px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); } .catalog-cta__input::placeholder {color: rgba(255,255,255,0.4); } .catalog-cta__input:focus {outline: none; border-color: var(--green-400); } .catalog-cta__file {display: inline-flex; align-items: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-4); border: 1px dashed rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); font-size: var(--fs-small); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .catalog-cta__file svg {width: 18px; height: 18px; } .catalog-cta__file:hover {border-color: var(--green-400); color: var(--text-inverse); } .catalog-cta__consent {display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-caption); color: rgba(255,255,255,0.55); } .catalog-cta__consent input {margin-top: 2px; } /* --- Catalog responsive --- */ @media (max-width: 1024px) { .pcard-grid { grid-template-columns: repeat(2, 1fr); } .catalog-cta__inner { grid-template-columns: 1fr; gap: var(--sp-6); } } @media (max-width: 640px) { .pcard-grid { grid-template-columns: 1fr; } .catalog-filter__select { min-width: 0; width: 100%; } .catalog-filter__group { width: 100%; } .catalog-filter__count { margin-left: 0; } } /* --- Светлый вариант хлебных крошек --- */ .breadcrumb--light {padding: var(--sp-6) 0 var(--sp-5); } .breadcrumb--light a {color: var(--text-secondary); } .breadcrumb--light a:hover {color: var(--text-brand); } .breadcrumb--light .breadcrumb__sep {color: var(--border-default); } .breadcrumb--light .breadcrumb__current {color: var(--text-primary); } /* --- Product hero --- */ .phero {background: var(--surface-page); padding-bottom: var(--sp-16); } .phero__grid {display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; } .phero__media {display: flex; flex-direction: column; gap: var(--sp-3); } .phero__main {position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-muted); border: 1px solid var(--border-subtle); padding: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; display: block; width: 100%; } .phero__main img {width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow, 400ms) var(--ease-out, ease); } .phero__main:hover img {transform: scale(1.02); } .phero__banner {position: absolute; left: 0; top: var(--sp-5); background: var(--teal-600); color: var(--text-inverse); font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: var(--sp-2) var(--sp-4); z-index: 2; } .phero__thumbs {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } .phero__thumb {aspect-ratio: 1; overflow: hidden; cursor: zoom-in; background: var(--surface-muted); border: 1px solid var(--border-subtle); padding: 0; font: inherit; transition: border-color var(--duration-fast) var(--ease-out); } .phero__thumb:hover {border-color: var(--teal-600); } .phero__thumb.is-active {border-color: var(--teal-600); } .phero__thumb img {width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Lightbox (галерея на весь экран) --- */ .lightbox {position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 28, 0.95); display: none; align-items: center; justify-content: center; padding: var(--sp-8); animation: lb-fade 200ms var(--ease-out, ease); } .lightbox.is-open {display: flex; } @keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } } .lightbox__img {max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .lightbox__btn {position: absolute; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); cursor: pointer; color: white; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); padding: 0; } .lightbox__btn:hover {background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); } .lightbox__btn svg {width: 24px; height: 24px; } .lightbox__close {top: var(--sp-6); right: var(--sp-6); } .lightbox__prev {left: var(--sp-6); top: 50%; transform: translateY(-50%); } .lightbox__next {right: var(--sp-6); top: 50%; transform: translateY(-50%); } .lightbox__counter {position: absolute; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.85); font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: 0.05em; background: rgba(0,0,0,0.4); padding: var(--sp-2) var(--sp-4); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (max-width: 700px) { .lightbox { padding: var(--sp-4); } .lightbox__btn { width: 44px; height: 44px; } .lightbox__btn svg { width: 20px; height: 20px; } .lightbox__close { top: var(--sp-3); right: var(--sp-3); } .lightbox__prev { left: var(--sp-3); } .lightbox__next { right: var(--sp-3); } .lightbox__counter { bottom: var(--sp-3); } } .phero__info {display: flex; flex-direction: column; } .phero__origin {display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--sp-3); } .phero__origin::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; } .phero__title {font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: var(--ls-h2); color: var(--text-primary); margin-bottom: var(--sp-5); } .phero__status-row {display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); } .phero__status {display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--status-success-bg); color: var(--status-success-fg); font-size: var(--fs-small); font-weight: var(--fw-semibold); } .phero__price {display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--fs-small); font-weight: var(--fw-semibold); } .phero__actions {display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-6); } .phero__extra {display: flex; flex-wrap: wrap; gap: var(--sp-6); padding: var(--sp-5) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .phero__extra-link {display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-brand); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .phero__extra-link svg {width: 18px; height: 18px; } .phero__extra-link:hover {color: var(--teal-700); } .phero__facts {display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); } .phero__facts li {display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); color: var(--text-secondary); line-height: var(--lh-body); } .phero__facts svg {width: 20px; height: 20px; color: var(--teal-600); flex-shrink: 0; margin-top: 2px; } .phero__facts strong {color: var(--text-primary); font-weight: var(--fw-semibold); } /* --- Spec: sticky TOC + all panels visible (no tabs, no cards — just dividers) --- */ .spec {background: var(--surface-page); padding: var(--section-py-base, 96px) 0; } .spec__layout {display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-10); align-items: start; } .spec__nav {position: sticky; top: var(--sp-6); display: flex; flex-direction: column; border-left: 1px solid var(--border-subtle); } .spec__nav-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); padding: 0 var(--sp-5) var(--sp-3); margin-left: -1px; } .spec__nav-link {display: block; padding: var(--sp-3) var(--sp-5); font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-secondary); border-left: 2px solid transparent; margin-left: -1px; text-decoration: none; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .spec__nav-link:hover {color: var(--text-brand); border-left-color: var(--teal-600); } .spec__body {display: flex; flex-direction: column; } .spec__panel {background: transparent; border: 0; padding: var(--sp-10) 0; scroll-margin-top: var(--sp-6); } .spec__panel:first-child {padding-top: 0; } .spec__panel + .spec__panel {border-top: 1px solid var(--border-subtle); } .spec__panel > * + * {margin-top: var(--sp-4); } .spec__title {font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-h3); color: var(--text-primary); } .spec__subtitle {font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h5); color: var(--text-primary); margin-top: var(--sp-6) !important; } .spec__panel p {color: var(--text-secondary); line-height: var(--lh-body); } .spec__panel ul {color: var(--text-secondary); line-height: var(--lh-body); padding-left: var(--sp-5); } .spec__panel ul li + li {margin-top: var(--sp-2); } .spec__note {font-size: var(--fs-small); color: var(--text-tertiary); } /* --- Spec: подсветка активного пункта оглавления (scrollspy через JS) --- */ .spec__nav-link.is-active { color: var(--text-brand); border-left-color: var(--teal-600); } .spec-table {width: 100%; border-collapse: collapse; } .spec-table th, .spec-table td {text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-small); } .spec-table th {color: var(--text-secondary); font-weight: var(--fw-regular); } .spec-table tbody th {width: 64%; } .spec-table td {color: var(--text-primary); font-weight: var(--fw-semibold); font-family: var(--font-mono); } /* Многоколоночные таблицы: данные не ломаем по символам — таблица скроллится в overflow-обёртке, а не сжимается */ .spec-table thead th, .spec-table td {white-space: nowrap; } .spec-table tbody th {white-space: normal; } .spec-table tr:nth-child(odd) th, .spec-table tr:nth-child(odd) td {background: var(--surface-subtle); } /* --- Key-specs grid in phero info column (без рамок, чище) --- */ .phero__keyspecs {display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); row-gap: var(--sp-5); margin: 0 0 var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); } .phero__keyspec-num {font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--text-brand); line-height: 1.1; letter-spacing: -0.01em; } .phero__keyspec-label {font-size: var(--fs-small); color: var(--text-secondary); margin-top: var(--sp-2); line-height: 1.3; } /* --- Product page: tighten partner + adv (уплотнение вертикали) --- */ .partner {padding: var(--sp-16) 0; } .partner__head {margin: 0 0 var(--sp-8); } .partner__title {font-size: clamp(24px, 2.8vw, 36px); margin-bottom: var(--sp-3); } .partner__lead {font-size: var(--fs-body); } .partner__pillars {gap: var(--sp-4); } .adv {padding: var(--sp-16) 0; } .adv__head {margin: 0 0 var(--sp-8); } .adv__title {font-size: clamp(24px, 2.8vw, 36px); margin-bottom: var(--sp-3); } .adv__lead {font-size: var(--fs-body); } .adv__grid {gap: var(--sp-5); } .adv-item {padding: var(--sp-5); } .adv-item__title {font-size: var(--fs-body); margin-bottom: var(--sp-2); } .adv-item__text {font-size: var(--fs-small); line-height: var(--lh-body); } .spec {padding: var(--sp-16) 0; } /* --- Product page responsive --- */ @media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; gap: var(--sp-8); } .spec__layout { grid-template-columns: 1fr; gap: var(--sp-6); } .spec__nav { display: none; } .spec__panel { padding: var(--sp-8) 0; } .spec__panel:first-child { padding-top: 0; scroll-margin-top: var(--sp-2); } .phero__keyspecs { column-gap: var(--sp-5); row-gap: var(--sp-4); } .partner, .adv, .spec { padding: var(--sp-12) 0; } } @media (max-width: 1024px) { .nav-toggle { display: inline-flex; } } @media (max-width: 640px) { .header__actions .btn--primary { display: none; } }