/*
Theme Name: Строймет
Theme URI: https://strojmet.ru
Description: Кастомная тема для каталога металлопроката ООО «Строймет». Витрина без корзины с тремя вариантами цен (за метр, за кг, оптом), фильтрами по характеристикам и формой заказа. Построена на WooCommerce с режимом каталога.
Version: 1.0.0
Author: Voronchenko I
Author URI: https://strojmet.ru
Tested up to: 6.7
Requires PHP: 8.0
Requires Plugins: woocommerce, advanced-custom-fields
Text Domain: strojmet
Tags: woocommerce, catalog, b2b
*/
/* ==================== ПЕРЕМЕННЫЕ ==================== */
:root {
--red: #C8102E;
--red-dark: #9E0C24;
--black: #0A0A0A;
--gray-900: #1A1A1A;
--gray-700: #404040;
--gray-500: #737373;
--gray-300: #D4D4D4;
--gray-200: #E5E5E5;
--gray-100: #F5F5F5;
--gray-50: #FAFAFA;
--white: #FFFFFF;
--green: #22C55E;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Единое время для hover/focus-переходов */
--transition: 0.15s;
/* Скругление кнопок и полей ввода */
--radius: 6px;
}
/* ==================== БАЗОВОЕ ==================== */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
margin: 0;
line-height: 1.5;
color: var(--black);
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* страховка от горизонтального сдвига (хедер/футер у краёв) */
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
/* ==================== СКРУГЛЕНИЕ ====================
Единый радиус для кнопок и полей ввода (--radius).
Чипы каталога остаются «таблетками» (999px) отдельно. */
.btn,
.btn--hero-primary,
.btn--hero-outline,
.btn--hero-ghost,
.btn-order,
.btn-call,
.btn-order--sm,
.header-callback-btn,
.footer-btn,
.request-form__submit,
.catalog-search input,
.request-field input,
.request-field textarea {
border-radius: var(--radius);
}
/* ========================================================
ШАПКА САЙТА
Топ-бар + основная навигация
======================================================== */
/* ==================== ТОП-БАР ==================== */
.top-bar {
background: var(--black);
color: var(--gray-300);
font-size: 13px;
line-height: 1.2;
padding: 9px 0;
border-bottom: 1px solid var(--gray-900);
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.top-left,
.top-right {
display: flex;
align-items: center;
gap: 24px;
}
.top-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gray-300);
text-decoration: none;
transition: color var(--transition);
}
.top-item:hover {
color: var(--white);
}
.top-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.7;
}
.top-item:hover .top-icon {
opacity: 1;
}
.top-divider {
width: 1px;
height: 14px;
background: var(--gray-700);
}
.top-label {
color: var(--gray-500);
margin-right: 4px;
}
/* Дата обновления прайса — точка статичная (без пульсации статуса) */
.top-price .status-dot {
box-shadow: none;
animation: none;
}
.top-price:hover {
color: var(--white);
}
/* Индикатор статуса "Открыто/Закрыто" */
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green);
display: inline-block;
margin-right: 6px;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
animation: status-pulse 2s infinite;
}
.status-dot.closed {
background: var(--red);
box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2);
animation: none;
}
@keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1); }
}
.status-text {
color: var(--white);
font-weight: 500;
}
.status-hours {
color: var(--gray-500);
margin-left: 4px;
}
/* ==================== ОСНОВНАЯ ШАПКА ==================== */
.header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.header .container {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 48px;
align-items: center;
}
/* === Логотип === */
.site-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--black);
flex-shrink: 0;
}
.site-logo img {
height: 44px;
width: auto;
display: block;
}
/* Текстовый логотип «СТРОЙМЕТ» (хвост «МЕТ» — красный) */
.site-logo-text-mark {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
line-height: 1;
text-transform: uppercase;
}
.site-logo-text-mark b {
color: var(--red);
font-weight: 700;
}
/* Кастомный логотип WordPress */
.custom-logo-link {
display: block;
line-height: 0;
max-width: 240px;
}
.custom-logo-link img {
height: 44px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* === Главное меню === */
.main-nav ul {
display: flex;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
margin: 0;
}
.main-nav a {
color: var(--gray-700);
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: color var(--transition);
position: relative;
padding: 4px 0;
display: inline-block;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
color: var(--red);
}
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--red);
}
/* === Дропдаун === */
.main-nav .menu-item-has-children {
position: relative;
}
.main-nav .menu-item-has-children > a::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
vertical-align: -1px;
transition: transform 0.2s;
}
.main-nav .menu-item-has-children.is-open > a::before {
transform: rotate(180deg);
}
.sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
background: var(--white);
border: 1px solid var(--gray-200);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
list-style: none;
margin: 0;
padding: 8px 0;
display: none;
z-index: 50;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu,
.main-nav .menu-item-has-children.is-open > .sub-menu {
display: block;
}
.sub-menu .menu-item {
display: block;
margin: 0;
}
.sub-menu a {
display: block;
padding: 10px 20px;
font-size: 14px;
font-weight: 400;
color: var(--gray-700);
line-height: 1.4;
white-space: nowrap;
}
.sub-menu a:hover {
background: var(--gray-50);
color: var(--red);
}
/* === Правая часть: часы + телефон + CTA + гамбургер === */
.header-cta {
display: flex;
align-items: center;
gap: 20px;
}
/* График работы рядом с телефоном */
.header-hours {
display: flex;
align-items: center;
gap: 10px;
color: var(--gray-700);
}
.header-hours__icon {
width: 20px;
height: 20px;
color: var(--gray-500);
flex-shrink: 0;
}
.header-hours__text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.header-hours__row {
font-size: 13px;
color: var(--gray-700);
}
/* Телефон с иконкой */
.header-phone {
display: inline-flex;
align-items: center;
gap: 10px;
}
.header-phone__icon {
width: 20px;
height: 20px;
color: var(--red);
flex-shrink: 0;
}
.header-phone__num {
font-size: 18px;
font-weight: 600;
color: var(--black);
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
}
.header-phone:hover .header-phone__num {
color: var(--red);
}
.header-callback-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--red);
color: var(--white);
border: 2px solid var(--red);
text-decoration: none;
white-space: nowrap;
transition: background var(--transition), border-color var(--transition);
}
.header-callback-btn:hover {
background: var(--red-dark);
border-color: var(--red-dark);
color: var(--white);
}
.header-phone {
font-size: 18px;
font-weight: 600;
color: var(--black);
text-decoration: none;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
}
.header-phone:hover {
color: var(--red);
}
/* === Гамбургер === */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: var(--black);
align-items: center;
justify-content: center;
}
.menu-toggle-icon {
width: 24px;
height: 24px;
}
.menu-toggle-icon--close {
display: none;
}
.menu-toggle.is-active .menu-toggle-icon--open {
display: none;
}
.menu-toggle.is-active .menu-toggle-icon--close {
display: block;
}
/* === Skip-link (доступность) === */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
}
.skip-link:focus {
left: 0;
top: 0;
padding: 12px 20px;
background: var(--black);
color: var(--white);
text-decoration: none;
font-size: 14px;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* ==================== HERO ==================== */
.hero {
background-color: var(--black);
background-image:
linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 60%, rgba(10, 10, 10, 0.35) 100%),
image-set(
url('assets/img/hero-warehouse.webp') type('image/webp'),
url('assets/img/hero-warehouse.jpg') type('image/jpeg')
);
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
color: var(--white);
padding: 100px 0 110px;
position: relative;
overflow: hidden;
}
.hero .container {
position: relative;
z-index: 2;
}
/* CTA-кнопки под подзаголовком — три в ряд */
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.hero__actions .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 24px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hero__actions .btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.hero__actions .btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn--hero-primary {
background: var(--red);
color: var(--white);
border: 2px solid var(--red);
}
.btn--hero-primary:hover {
background: var(--red-dark);
border-color: var(--red-dark);
}
/* Контурная — для прайса */
.btn--hero-outline {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn--hero-outline:hover:not(:disabled) {
background: var(--white);
color: var(--black);
border-color: var(--white);
}
/* Ghost — без рамки, приглушённая (третичная) */
.btn--hero-ghost {
background: transparent;
color: var(--gray-300);
border: 2px solid transparent;
padding-left: 18px;
padding-right: 18px;
}
.btn--hero-ghost:hover {
color: var(--white);
}
.btn--hero-ghost svg {
transform: rotate(-90deg);
opacity: 0.6;
}
.hero__label {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--red);
border-left: 3px solid var(--red);
padding-left: 12px;
margin-bottom: 24px;
}
.hero__title {
font-size: 64px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 24px;
max-width: 800px;
color: var(--white);
}
.hero__title .accent {
color: var(--red);
}
.hero__subtitle {
font-size: 20px;
font-weight: 400;
color: var(--gray-300);
max-width: 640px;
line-height: 1.5;
margin: 0 0 40px;
}
/* ==================== ПОЛОСА ФАКТОВ ПОД HERO ==================== */
.facts-strip {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 28px 0;
}
.facts-strip__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.fact {
display: flex;
align-items: center;
gap: 16px;
}
.fact__icon {
width: 36px;
height: 36px;
color: var(--red);
flex-shrink: 0;
}
.fact__text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.fact__title {
font-size: 15px;
font-weight: 600;
color: var(--black);
}
.fact__desc {
font-size: 13px;
color: var(--gray-500);
margin-top: 2px;
}
/* ==================== УТИЛИТЫ СЕКЦИЙ ==================== */
/* Общие классы для шапок секций главной страницы */
.section {
padding: 80px 0;
}
.section--categories {
background: var(--gray-50);
}
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 48px;
}
.section-num {
font-family: var(--font-mono);
font-size: 14px;
color: var(--red);
font-weight: 500;
margin-bottom: 12px;
display: block;
}
.section-title {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
line-height: 1.15;
margin: 0;
}
.section-link {
color: var(--gray-700);
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-bottom: 1px solid var(--gray-300);
padding-bottom: 2px;
transition: color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.section-link:hover {
color: var(--red);
border-color: var(--red);
}
/* ==================== КАТАЛОГ КАТЕГОРИЙ ==================== */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
}
.category-card {
background: var(--white);
padding: 28px 24px;
text-decoration: none;
color: var(--black);
transition: background 0.2s, color 0.2s;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 180px;
}
.category-card:hover {
background: var(--black);
color: var(--white);
}
.category-card__num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--gray-500);
margin-bottom: 8px;
}
.category-card__name {
font-size: 19px;
font-weight: 600;
line-height: 1.25;
}
.category-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.category-card__count {
font-family: var(--font-mono);
font-size: 13px;
color: var(--gray-500);
}
.category-card__arrow {
font-size: 18px;
color: var(--gray-300);
transition: transform 0.2s, color 0.2s;
}
.category-card:hover .category-card__count,
.category-card:hover .category-card__arrow {
color: var(--red);
}
.category-card:hover .category-card__arrow {
transform: translateX(4px);
}
.category-empty {
text-align: center;
color: var(--gray-500);
font-size: 16px;
padding: 40px 0;
}
/* ==================== ПРЕИМУЩЕСТВА ==================== */
.section--advantages {
background: var(--white);
}
.adv-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.adv-item {
padding-top: 32px;
border-top: 2px solid var(--red);
}
.adv-item__num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--red);
font-weight: 600;
margin-bottom: 16px;
}
.adv-item__title {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 12px;
color: var(--black);
}
.adv-item__desc {
font-size: 14px;
line-height: 1.6;
color: var(--gray-500);
margin: 0;
}
/* ==================== УСЛУГИ ==================== */
.section--services {
background: var(--gray-50);
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
}
.service-item {
background: var(--white);
padding: 32px 28px;
transition: background 0.2s;
}
.service-item:hover {
background: var(--gray-50);
}
.service-item__num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--red);
font-weight: 600;
margin-bottom: 16px;
}
.service-item__title {
font-size: 19px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 10px;
color: var(--black);
}
.service-item__desc {
font-size: 14px;
line-height: 1.6;
color: var(--gray-500);
margin: 0;
}
/* ==================== FAQ ==================== */
.section--faq {
background: var(--white);
}
.faq-list {
border-top: 1px solid var(--gray-200);
}
.faq-item {
border-bottom: 1px solid var(--gray-200);
}
.faq-item__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 4px;
font-size: 17px;
font-weight: 600;
color: var(--black);
cursor: pointer;
list-style: none;
transition: color var(--transition);
}
/* Убираем дефолтный маркер у */
.faq-item__q::-webkit-details-marker {
display: none;
}
.faq-item__q::after {
content: '+';
font-family: var(--font-mono);
font-size: 24px;
font-weight: 400;
color: var(--red);
line-height: 1;
flex-shrink: 0;
transition: transform 0.2s;
}
.faq-item[open] .faq-item__q::after {
transform: rotate(45deg);
}
.faq-item__q:hover {
color: var(--red);
}
.faq-item__a {
padding: 0 4px 24px;
}
.faq-item__a p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--gray-700);
max-width: 760px;
}
/* ==================== ЧИПЫ (ассортимент, на странице «О компании») ==================== */
.geo-chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.geo-chip {
padding: 10px 18px;
background: var(--white);
border: 1px solid var(--gray-200);
font-size: 15px;
font-weight: 500;
color: var(--gray-700);
}
/* ==================== КАК КУПИТЬ ==================== */
.section--how-to {
background: var(--gray-100);
}
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: var(--white);
border: 1px solid var(--gray-200);
list-style: none;
margin: 0;
padding: 0;
}
.step {
padding: 40px 32px;
border-right: 1px solid var(--gray-200);
}
.step:last-child {
border-right: none;
}
.step__num {
font-family: var(--font-mono);
font-size: 48px;
font-weight: 700;
color: var(--red);
line-height: 1;
margin-bottom: 16px;
letter-spacing: -0.05em;
}
.step__title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--black);
}
.step__desc {
font-size: 14px;
color: var(--gray-500);
line-height: 1.6;
margin: 0;
}
/* ==================== КОНТАКТЫ ==================== */
.section--contacts {
background: var(--white);
}
.contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch;
}
.contacts-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
}
.contacts-block__label {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-500);
margin-bottom: 6px;
}
.contacts-block__value {
display: block;
font-size: 16px;
color: var(--black);
text-decoration: none;
line-height: 1.4;
transition: color var(--transition);
}
.contacts-block__value + .contacts-block__value {
margin-top: 4px;
}
a.contacts-block__value:hover {
color: var(--red);
}
.contacts-block__schedule {
font-size: 14px;
color: var(--gray-500);
}
.contacts-map {
display: block;
background: var(--gray-100);
border: 1px solid var(--gray-200);
text-decoration: none;
color: var(--black);
min-height: 280px;
transition: background var(--transition), border-color var(--transition);
}
.contacts-map:hover {
background: var(--gray-50);
border-color: var(--red);
}
/* Встроенная карта (iframe) на главной */
.contacts-map--embed {
border: 1px solid var(--gray-200);
min-height: 280px;
overflow: hidden;
}
.contacts-map--embed .ya-map {
min-height: 280px;
}
.contacts-map__placeholder {
height: 100%;
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
padding: 24px;
}
.contacts-map__pin {
font-size: 36px;
line-height: 1;
}
.contacts-map__text {
font-size: 15px;
font-weight: 500;
color: var(--gray-700);
line-height: 1.4;
}
.contacts-map:hover .contacts-map__text {
color: var(--red);
}
/* ========================================================
КАТАЛОГ-ПРАЙС (archive-product.php)
Группировка по категориям + поиск + чипы (стиль price.html)
======================================================== */
.catalog {
padding: 32px 0 80px;
background: var(--gray-100);
}
/* Хлебные крошки */
.breadcrumbs {
font-size: 13px;
color: var(--gray-500);
margin-bottom: 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.breadcrumbs a {
color: var(--gray-500);
text-decoration: none;
transition: color var(--transition);
}
.breadcrumbs a:hover {
color: var(--red);
}
.breadcrumbs__sep {
color: var(--gray-300);
}
.breadcrumbs__current {
color: var(--black);
font-weight: 500;
}
/* Заголовок страницы */
.catalog__header {
margin-bottom: 8px;
}
.catalog__title {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--black);
margin: 8px 0 0;
}
.catalog__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-top: 14px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--gray-500);
}
.catalog__meta strong {
color: var(--black);
font-weight: 600;
}
.catalog__desc {
color: var(--gray-700);
font-size: 15px;
line-height: 1.6;
max-width: 760px;
margin-top: 16px;
}
/* === Панель управления: поиск + чипы (sticky) === */
.catalog-controls {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-top: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);
padding: 14px 0;
margin: 24px 0 32px;
}
.catalog-controls__inner {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.catalog-search {
flex: 1;
min-width: 240px;
position: relative;
}
.catalog-search input {
width: 100%;
padding: 11px 14px 11px 42px;
border: 1.5px solid var(--gray-300);
background: var(--white);
font-family: inherit;
font-size: 15px;
color: var(--black);
transition: border-color var(--transition), box-shadow var(--transition);
}
.catalog-search input:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.catalog-search svg {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
color: var(--gray-500);
pointer-events: none;
}
.catalog-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.catalog-chip {
font: inherit;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border: 1.5px solid var(--gray-300);
background: var(--white);
border-radius: 999px;
color: var(--gray-700);
cursor: pointer;
white-space: nowrap;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.catalog-chip:hover {
border-color: var(--gray-700);
color: var(--black);
}
.catalog-chip.is-active {
background: var(--red);
border-color: var(--red);
color: var(--white);
}
/* Сообщение «ничего не найдено» */
.catalog-noresults {
text-align: center;
padding: 48px 0;
color: var(--gray-500);
font-size: 16px;
}
.catalog-noresults a {
color: var(--red);
text-decoration: none;
}
/* === Карточка-секция категории === */
.price-cat {
background: var(--white);
border: 1px solid var(--gray-200);
margin-bottom: 22px;
overflow: hidden;
}
.price-cat__head {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-bottom: 2px solid var(--black);
}
.price-cat__icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--black);
color: var(--red);
font-family: var(--font-mono);
font-weight: 600;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.price-cat__title {
margin: 0;
font-size: 19px;
font-weight: 600;
flex: 1;
}
.price-cat__count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--gray-500);
background: var(--gray-100);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
/* === Таблица прайса === */
.price-table-wrap {
overflow-x: auto;
}
.price-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 860px;
}
.price-table thead th {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--gray-500);
text-align: right;
padding: 11px 14px;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
white-space: nowrap;
}
.price-table thead th.price-table__name,
.price-table thead th.price-table__act {
text-align: left;
}
.price-table tbody th.price-table__name {
text-align: left;
font-weight: 600;
padding: 10px 14px;
color: var(--black);
}
.price-table tbody th.price-table__name a {
color: var(--black);
text-decoration: none;
transition: color var(--transition);
}
.price-table tbody th.price-table__name a:hover {
color: var(--red);
}
.price-table tbody td {
text-align: right;
padding: 10px 14px;
font-family: var(--font-mono);
color: var(--gray-700);
white-space: nowrap;
}
.price-table tbody td.price-table__meta {
font-family: inherit;
font-size: 13px;
color: var(--gray-700);
}
.price-table tbody tr {
border-bottom: 1px solid var(--gray-100);
}
.price-table tbody tr:hover {
background: var(--gray-50);
}
.price-table tbody tr:last-child {
border-bottom: none;
}
/* Акцентная колонка «Цена за кг» */
.price-table thead th.price-table__kg,
.price-table tbody td.price-table__kg {
color: var(--red);
font-weight: 600;
border-left: 1px solid var(--gray-200);
background: rgba(200, 16, 46, 0.03);
}
/* Колонка действия */
.price-table thead th.price-table__act,
.price-table tbody td.price-table__act {
text-align: right;
width: 1%;
}
.price-table .woocommerce-Price-amount {
font-weight: inherit;
}
/* Пустое состояние */
.catalog-empty {
padding: 80px 24px;
text-align: center;
background: var(--white);
border: 1px solid var(--gray-200);
}
.catalog-empty__icon {
display: inline-block;
font-size: 56px;
color: var(--gray-300);
line-height: 1;
margin-bottom: 16px;
font-family: var(--font-mono);
}
.catalog-empty__title {
font-size: 22px;
font-weight: 700;
color: var(--black);
margin: 0 0 12px;
}
.catalog-empty__desc {
font-size: 15px;
color: var(--gray-500);
max-width: 480px;
margin: 0 auto 28px;
line-height: 1.6;
}
.catalog-empty__actions {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
/* Маленькая кнопка «Заказать» в таблице */
.btn-order--sm {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 2px solid var(--red);
white-space: nowrap;
}
.btn-order--sm:hover {
background: var(--red-dark);
border-color: var(--red-dark);
}
.muted {
color: var(--gray-300);
}
/* ========================================================
СТРАНИЦА КОНТАКТОВ (template-contacts.php)
======================================================== */
.contacts-page {
background: var(--white);
padding: 32px 0 80px;
}
/* Hero */
.contacts-hero {
padding-bottom: 24px;
border-bottom: 1px solid var(--gray-200);
margin-bottom: 40px;
}
.contacts-hero__title {
font-size: 56px;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.03em;
margin: 10px 0 0;
color: var(--black);
}
.accent-muted {
color: var(--gray-500);
}
/* Быстрые карточки 4×1 */
.contacts-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 36px;
}
.contacts-card {
border: 1px solid var(--gray-200);
padding: 20px 22px;
}
.contacts-card__icon {
width: 20px;
height: 20px;
color: var(--gray-500);
}
.contacts-card__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 14px;
}
.contacts-card__l1 {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--black);
text-decoration: none;
margin-top: 8px;
transition: color var(--transition);
}
a.contacts-card__l1:hover {
color: var(--red);
}
.contacts-card__l2 {
display: block;
font-size: 13px;
color: var(--gray-500);
text-decoration: none;
margin-top: 4px;
transition: color var(--transition);
}
a.contacts-card__l2:hover {
color: var(--red);
}
/* Локации: офис + склад */
.locations {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 56px;
}
.location {
border: 1px solid var(--gray-200);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Общая карта под карточками офис/склад */
.locations-map {
margin: 24px 0 56px;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
height: 420px;
}
.ya-map {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.location__body {
padding: 22px 24px 24px;
}
.location__tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--red);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.location__title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 8px 0 0;
color: var(--black);
}
.location__subtitle {
margin: 8px 0 0;
font-size: 13px;
color: var(--gray-500);
line-height: 1.5;
}
.location__rows {
margin: 18px 0 0;
}
.location__row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--gray-100);
font-size: 13px;
}
.location__row dt {
color: var(--gray-500);
margin: 0;
}
.location__row dd {
color: var(--gray-700);
margin: 0;
}
.location__phone {
font-family: var(--font-mono);
font-weight: 600;
color: var(--black);
text-decoration: none;
transition: color var(--transition);
}
.location__phone:hover {
color: var(--red);
}
.location__actions {
margin-top: 16px;
display: flex;
gap: 10px;
}
/* Форма заявки */
.contacts-form-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.contacts-form-block__title {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 10px 0 0;
color: var(--black);
}
.contacts-form-block__lead {
margin-top: 16px;
font-size: 15px;
color: var(--gray-700);
max-width: 460px;
line-height: 1.55;
}
.contacts-ways {
list-style: none;
margin: 28px 0 0;
padding: 0;
}
.contacts-way {
display: flex;
gap: 14px;
align-items: center;
padding: 14px 0;
border-top: 1px solid var(--gray-200);
}
.contacts-way__icon {
width: 18px;
height: 18px;
color: var(--gray-500);
flex-shrink: 0;
}
.contacts-way__label {
font-size: 13px;
color: var(--gray-500);
}
.contacts-way__value {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--black);
text-decoration: none;
margin-top: 2px;
transition: color var(--transition);
}
.contacts-way__value:hover {
color: var(--red);
}
.contacts-way__note {
margin-left: auto;
font-size: 12px;
color: var(--gray-500);
text-align: right;
}
.request-form {
border: 1px solid var(--gray-200);
background: var(--gray-50);
padding: 28px;
}
.request-form__title {
font-size: 20px;
font-weight: 600;
color: var(--black);
}
.request-form__sub {
font-size: 12px;
color: var(--gray-500);
margin-top: 4px;
}
.request-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 20px;
}
.request-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.request-field--full {
grid-column: 1 / -1;
}
.request-field span {
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.request-field em {
color: var(--red);
font-style: normal;
}
.request-field input,
.request-field textarea {
border: 1px solid var(--gray-300);
background: var(--white);
padding: 10px 12px;
font: inherit;
font-size: 14px;
color: var(--black);
transition: border-color var(--transition), box-shadow var(--transition);
}
.request-field input:focus,
.request-field textarea:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.request-field textarea {
resize: vertical;
}
.request-form__submit {
width: 100%;
margin-top: 20px;
padding: 14px;
background: var(--red);
color: var(--white);
border: 2px solid var(--red);
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
}
.request-form__submit:hover:not(:disabled) {
background: var(--red-dark);
border-color: var(--red-dark);
}
.request-form__submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.request-form__note {
margin: 14px 0 0;
font-size: 12px;
color: var(--gray-500);
line-height: 1.5;
}
.request-form__note a {
color: var(--red);
text-decoration: none;
}
/* ========================================================
СТРАНИЦА УСЛУГ (template-services.php)
======================================================== */
.services-page {
background: var(--white);
padding: 32px 0 80px;
}
/* Hero */
.services-hero {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: end;
padding-bottom: 40px;
border-bottom: 1px solid var(--gray-200);
overflow: hidden;
}
/* Фоновое фото металлопроката справа, проступает приглушённо */
/* Фон hero временно скрыт (по запросу). Чтобы вернуть — убрать display:none. */
.services-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, var(--white) 38%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.4) 100%),
url('assets/img/consultation-bg.webp');
background-size: cover, contain;
background-position: center, right center;
background-repeat: no-repeat, no-repeat;
pointer-events: none;
z-index: 0;
display: none;
}
.services-hero__text,
.services-hero__stats {
position: relative;
z-index: 1;
}
.services-hero__title {
font-size: 56px;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.03em;
margin: 10px 0 0;
color: var(--black);
}
.services-hero__lead {
margin: 24px 0 0;
font-size: 16px;
color: var(--gray-700);
max-width: 580px;
line-height: 1.55;
}
.services-hero__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
list-style: none;
margin: 0;
padding: 0;
}
.services-hero__stats li {
background: var(--white);
padding: 18px 20px;
}
.svc-stat__num {
display: block;
font-family: var(--font-mono);
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
line-height: 1;
}
.svc-stat__num .unit {
color: var(--red);
font-size: 20px;
}
.svc-stat__label {
display: block;
font-size: 12px;
color: var(--gray-500);
margin-top: 6px;
}
/* Sticky-навигация по секциям */
.services-nav {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--gray-200);
margin-top: 24px;
}
.services-nav__inner {
display: flex;
align-items: center;
gap: 4px;
height: 52px;
overflow-x: auto;
}
.services-nav__label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-right: 20px;
white-space: nowrap;
}
.services-nav__link {
display: flex;
align-items: center;
height: 52px;
padding: 0 14px;
font-size: 13px;
font-weight: 500;
color: var(--gray-500);
text-decoration: none;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color var(--transition), border-color var(--transition);
}
.services-nav__link:hover {
color: var(--black);
border-bottom-color: var(--black);
}
/* Секция с боковым номером § NN */
.svc-section {
border-bottom: 1px solid var(--gray-200);
}
.svc-section--gray {
background: var(--gray-50);
}
.svc-section__inner {
display: grid;
grid-template-columns: 200px 1fr;
gap: 48px;
padding-top: 64px;
padding-bottom: 64px;
}
.svc-section__num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.6;
}
.svc-section__title {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
margin: 0;
color: var(--black);
}
.svc-section__lead {
margin: 16px 0 0;
font-size: 15px;
color: var(--gray-700);
max-width: 680px;
line-height: 1.55;
}
/* Доставка — 3 карточки (автопарк / срочно / регионы) */
.svc-zones {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.svc-zone {
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 22px 20px;
}
.svc-zone__icon {
width: 22px;
height: 22px;
color: var(--red);
}
.svc-zone__name {
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--black);
margin-top: 14px;
}
.svc-zone__desc {
font-size: 13px;
color: var(--gray-700);
line-height: 1.5;
margin: 10px 0 0;
}
/* Резка — 4 способа (иконка + название) */
.svc-cut {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
}
.svc-cut__item {
background: var(--white);
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.svc-cut__icon {
width: 24px;
height: 24px;
color: var(--red);
}
.svc-cut__title {
font-size: 16px;
font-weight: 600;
color: var(--black);
}
/* Плашка-акцент */
.svc-note {
margin-top: 24px;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: rgba(200, 16, 46, 0.05);
border-radius: var(--radius);
}
.svc-note__icon {
width: 20px;
height: 20px;
color: var(--red);
flex-shrink: 0;
}
.svc-note__text {
flex: 1;
font-size: 14px;
color: var(--gray-700);
}
.svc-note__text strong {
color: var(--black);
}
/* Сопутствующие услуги — 3 колонки */
.svc-extra {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.svc-extra__item {
padding: 4px 24px 4px 0;
border-right: 1px solid var(--gray-200);
}
.svc-extra__item:last-child {
border-right: none;
}
.svc-extra__item + .svc-extra__item {
padding-left: 24px;
}
.svc-extra__num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--red);
}
.svc-extra__title {
font-size: 18px;
font-weight: 600;
margin-top: 10px;
color: var(--black);
}
.svc-extra__desc {
margin: 10px 0 0;
font-size: 13px;
color: var(--gray-700);
line-height: 1.55;
}
/* Обёртка CTA-блока (консультации) — свои отступы сверху/снизу */
.svc-cta-wrap {
padding-top: 24px;
padding-bottom: 80px;
}
.svc-cta-wrap .consult {
margin-top: 0;
}
/* ==================== БЛОК «НУЖНА КОНСУЛЬТАЦИЯ» (главная, услуги, о компании) ==================== */
.consult {
position: relative;
padding: 48px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
}
/* Фон-фото справа, мягко растворяется влево в белый */
.consult::after {
content: '';
position: absolute;
inset: 0;
/* Фото целиком, прижато к правому краю; занимает правую часть блока.
Левая часть остаётся белой — текст читается на чистом фоне. */
background-image:
linear-gradient(90deg, var(--white) 40%, rgba(255, 255, 255, 0) 62%),
var(--consult-bg);
background-size: cover, contain;
background-position: center, right center;
background-repeat: no-repeat, no-repeat;
pointer-events: none;
}
.consult__body {
position: relative;
z-index: 1;
max-width: 620px; /* контент слева, чтобы не залезал на фото справа */
}
.consult__title {
margin: 0;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
border-left: 4px solid var(--red);
padding-left: 16px;
}
.consult__lead {
margin: 18px 0 0;
font-size: 15px;
line-height: 1.55;
color: var(--gray-500);
}
.consult__perks {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
}
.consult__perk {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.consult__perk:not(:last-child)::after {
content: '';
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 32px;
background: var(--gray-200);
}
.consult__perk svg {
width: 26px;
height: 26px;
color: var(--red);
flex-shrink: 0;
}
.consult__perk-title {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--black);
line-height: 1.2;
}
.consult__perk-sub {
display: block;
font-size: 13px;
color: var(--gray-500);
margin-top: 2px;
}
.consult__action {
position: relative;
z-index: 1;
margin-top: 28px;
}
.consult__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 24px;
background: var(--red);
color: var(--white);
border: none;
border-radius: var(--radius);
font: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--transition);
}
.consult__btn:hover {
background: var(--red-dark);
}
.consult__btn svg {
width: 18px;
height: 18px;
transform: rotate(-90deg); /* chevron-down → стрелка вправо */
}
/* ========================================================
CONTACT FORM 7 — под дизайн темы
Обёртка .cf7-form приводит поля CF7 к стилю .request-field.
======================================================== */
.cf7-form .wpcf7-form p {
margin: 0 0 14px;
}
.cf7-form label {
display: block;
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
/* Поля ввода */
.cf7-form input[type="text"],
.cf7-form input[type="tel"],
.cf7-form input[type="email"],
.cf7-form input[type="number"],
.cf7-form textarea,
.cf7-form select {
width: 100%;
border: 1px solid var(--gray-300);
background: var(--white);
padding: 11px 13px;
font: inherit;
font-size: 14px;
color: var(--black);
border-radius: var(--radius);
transition: border-color var(--transition), box-shadow var(--transition);
}
.cf7-form input:focus,
.cf7-form textarea:focus,
.cf7-form select:focus {
outline: none;
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.cf7-form textarea {
resize: vertical;
min-height: 64px;
}
/* Скрываем поле «Товар» в форме заказа: название уходит в скрытое поле
и попадает в письмо, клиенту его видеть не нужно.
Работает, если поле помечено классом cf7-hidden-field или readonly. */
.cf7-form .cf7-hidden-field,
.cf7-form label:has(input[readonly]),
.cf7-form p:has(input[readonly]),
.cf7-form input[readonly] {
display: none;
}
/* Кнопка отправки */
.cf7-form input[type="submit"],
.cf7-form .wpcf7-submit {
width: 100%;
margin-top: 6px;
padding: 14px;
background: var(--red);
color: var(--white);
border: 2px solid var(--red);
border-radius: var(--radius);
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.cf7-form input[type="submit"]:hover,
.cf7-form .wpcf7-submit:hover {
background: var(--red-dark);
border-color: var(--red-dark);
}
/* Двухколоночная сетка через класс grid-half в CF7 (опционально) */
.cf7-form .grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Сообщения/ошибки CF7 */
.cf7-form .wpcf7-not-valid-tip {
color: var(--red);
font-size: 12px;
margin-top: 4px;
}
.cf7-form .wpcf7-response-output {
margin: 14px 0 0 !important;
padding: 12px 14px !important;
border-radius: var(--radius);
font-size: 13px;
border-width: 1px !important;
}
.cf7-form .wpcf7-spinner {
margin: 0 0 0 10px;
}
/* Спецтекст согласия на обработку — мелким серым */
.cf7-form .cf7-consent {
font-size: 11px;
color: var(--gray-500);
line-height: 1.5;
text-transform: none;
letter-spacing: 0;
}
.cf7-form .cf7-consent a {
color: var(--red);
text-decoration: none;
}
/* Чекбокс согласия CF7 [acceptance] — галочка + текст в строку */
.cf7-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
display: block;
}
.cf7-form .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--gray-500);
text-transform: none;
letter-spacing: 0;
line-height: 1.45;
cursor: pointer;
margin: 0;
}
.cf7-form .wpcf7-acceptance input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 1px 0 0;
flex-shrink: 0;
accent-color: var(--red);
}
.cf7-form .wpcf7-acceptance a {
color: var(--red);
text-decoration: none;
}
/* Инверсия чекбокса согласия на красном фоне (модалка/CTA — если понадобится) */
.cf7-form--invert .wpcf7-acceptance label {
color: rgba(255, 255, 255, 0.8);
}
.cf7-form--invert .wpcf7-acceptance a {
color: var(--white);
text-decoration: underline;
}
/* ==================== МОДАЛЬНОЕ ОКНО ==================== */
.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal[hidden] {
display: none;
}
.modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.6);
backdrop-filter: blur(2px);
}
.modal__box {
position: relative;
z-index: 1;
width: 100%;
max-width: 540px;
background: var(--white);
border-radius: 12px;
padding: 36px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: modal-in 0.2s ease;
overflow: hidden;
}
/* Фон-фото металлопроката справа, текст/поля читаются на белом слева */
.modal__box::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, var(--white) 48%, rgba(255, 255, 255, 0) 80%),
url('assets/img/consultation-bg-mobile.webp');
background-size: cover, contain;
background-position: center, right center;
background-repeat: no-repeat, no-repeat;
pointer-events: none;
z-index: 0;
}
/* Контент поверх фона, ограничен левой частью под фото */
.modal__box > *:not(.modal__close) {
position: relative;
z-index: 1;
max-width: 380px;
}
@keyframes modal-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: 50%;
font-size: 22px;
line-height: 1;
color: var(--gray-700);
cursor: pointer;
transition: color var(--transition), border-color var(--transition);
}
.modal__close:hover {
color: var(--black);
border-color: var(--black);
}
.modal__title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
border-left: 4px solid var(--red);
padding-left: 16px;
line-height: 1.15;
}
.modal__sub {
margin: 12px 0 22px;
padding-left: 20px;
font-size: 14px;
color: var(--gray-500);
line-height: 1.5;
}
/* ========================================================
ЮРИДИЧЕСКИЕ СТРАНИЦЫ (политика, согласие)
======================================================== */
.legal-page {
background: var(--white);
padding: 32px 0 80px;
}
/* Узкий контейнер для читаемости длинного текста */
.container--narrow {
max-width: 820px;
}
.legal-page__header {
margin: 8px 0 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--gray-200);
}
.legal-page__title {
font-size: 40px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--black);
margin: 0;
}
.legal-page__meta {
margin: 12px 0 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--gray-500);
}
/* Типографика текста документа */
.legal-content {
font-size: 15px;
line-height: 1.7;
color: var(--gray-700);
}
.legal-content h2 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--black);
margin: 36px 0 12px;
}
.legal-content p {
margin: 0 0 16px;
}
.legal-content ul {
margin: 0 0 16px;
padding-left: 22px;
}
.legal-content li {
margin: 0 0 6px;
}
.legal-content a {
color: var(--red);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-content strong {
color: var(--black);
}
/* Контакты оператора списком */
.legal-contacts {
list-style: none;
margin: 0 0 16px;
padding: 18px 20px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
}
.legal-contacts li {
margin: 0 0 8px;
font-size: 14px;
}
.legal-contacts li:last-child {
margin-bottom: 0;
}
.legal-contacts span {
display: inline-block;
min-width: 90px;
color: var(--gray-500);
}
.legal-note {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--gray-200);
font-size: 13px;
color: var(--gray-500);
}
/* ==================== ТАБЛИЦА ТОВАРОВ (legacy, на странице товара) ==================== */
.products-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.products-table th,
.products-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--gray-200);
}
.products-table thead {
background: var(--gray-100);
}
.products-table a {
color: var(--black);
text-decoration: none;
font-weight: 500;
}
.products-table a:hover {
color: var(--red);
}
/* ========================================================
СТРАНИЦА ТОВАРА (single-product.php)
======================================================== */
/* Класс .single-product WooCommerce также ставит на через body_class(),
поэтому секцию помечаем своим классом .product-page — иначе padding/фон
утекали бы на весь . */
.product-page {
background: var(--white);
padding: 32px 0 80px;
}
/* Базовые кнопки (используются по всей теме) */
.btn-order,
.btn-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
text-decoration: none;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
transition: background var(--transition), color var(--transition), border-color var(--transition);
border: 2px solid transparent;
cursor: pointer;
}
.btn-order {
background: var(--red);
color: var(--white);
border-color: var(--red);
}
.btn-order:hover {
background: var(--red-dark);
border-color: var(--red-dark);
}
.btn-call {
background: var(--white);
color: var(--black);
border-color: var(--gray-300);
}
.btn-call:hover {
border-color: var(--black);
}
/* === HERO товара === */
.product-hero {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: start;
margin: 8px 0 0;
}
/* min-width:0 — иначе длинный контент распирает grid-колонку
и появляется горизонтальный скролл (хедер/футер «не у краёв»). */
.product-hero > * {
min-width: 0;
}
/* Медиа: фото или фоллбэк */
.product-media {
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
background: var(--gray-50);
}
.product-media__img {
display: block;
width: 100%;
height: auto;
}
.product-media__placeholder {
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 32px;
text-align: center;
color: var(--gray-300);
}
.product-media__icon {
width: 56px;
height: 56px;
color: var(--gray-300);
}
.product-media__name {
font-family: var(--font-mono);
font-size: 14px;
color: var(--gray-500);
}
/* Инфо-колонка */
.product-hero__top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product-hero__top .section-num {
margin: 0;
}
.product-hero__title {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--black);
margin: 0;
}
.product-hero__facts {
margin: 14px 0 0;
font-family: var(--font-mono);
font-size: 14px;
color: var(--gray-500);
}
/* Бейдж наличия */
.stock-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.stock-badge::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.stock-badge--in {
background: rgba(34, 197, 94, 0.12);
color: #15803D;
}
.stock-badge--order {
background: var(--gray-100);
color: var(--gray-500);
}
/* Блок цен */
.product-prices {
margin: 24px 0;
padding: 24px;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
}
.product-prices__main {
display: flex;
align-items: baseline;
gap: 10px;
}
.product-prices__value {
font-family: var(--font-mono);
font-size: 34px;
font-weight: 700;
color: var(--black);
letter-spacing: -0.02em;
line-height: 1;
}
.product-prices__unit {
font-size: 14px;
color: var(--gray-500);
}
.product-prices__extra {
list-style: none;
margin: 18px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--gray-200);
display: flex;
flex-wrap: wrap;
gap: 12px 32px;
}
.product-prices__extra li {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-prices__extra-label {
font-size: 12px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.product-prices__extra-value {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--black);
}
.product-prices__request {
font-size: 20px;
font-weight: 600;
color: var(--gray-700);
}
/* Кнопки действий */
.product-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Мини-преимущества */
.product-perks {
list-style: none;
margin: 24px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--gray-200);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.product-perks li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--gray-700);
}
.product-perks svg {
width: 18px;
height: 18px;
color: var(--red);
flex-shrink: 0;
}
/* === Секции под hero === */
.product-section {
margin-top: 56px;
}
.product-section__title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--black);
margin: 0 0 20px;
}
/* Таблица характеристик */
.product-specs {
width: 100%;
border-collapse: collapse;
max-width: 640px;
}
.product-specs th,
.product-specs td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--gray-100);
font-size: 14px;
}
.product-specs th {
width: 45%;
font-weight: 500;
color: var(--gray-500);
}
.product-specs td {
font-family: var(--font-mono);
color: var(--black);
}
/* Описание */
.product-description__text {
font-size: 15px;
line-height: 1.7;
color: var(--gray-700);
max-width: 760px;
}
.product-description__text p {
margin: 0 0 14px;
}
/* Похожие товары */
.product-related__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.product-related__link {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: 18px 20px;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
text-decoration: none;
transition: border-color var(--transition), background var(--transition);
}
.product-related__link:hover {
border-color: var(--red);
background: var(--gray-50);
}
.product-related__name {
font-size: 15px;
font-weight: 600;
color: var(--black);
line-height: 1.3;
overflow-wrap: anywhere;
}
.product-related__price {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
color: var(--red);
margin-top: auto;
}
.product-related__price small {
color: var(--gray-500);
font-weight: 400;
}
/* ========================================================
СТРАНИЦА О КОМПАНИИ (template-about.php)
Базируется на .services-hero / .svc-section / .adv-grid /
.geo-chips / .svc-cta — здесь только свои блоки.
======================================================== */
.about-page {
background: var(--white);
padding: 32px 0 0;
}
/* Ассортимент + услуги (2 колонки) */
.about-offer {
margin-top: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.about-offer__title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
margin: 0 0 16px;
}
.about-offer__list {
list-style: none;
margin: 0;
padding: 0;
}
.about-offer__list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 15px;
color: var(--gray-700);
}
.about-offer__list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
background: var(--red);
border-radius: 50%;
}
.about-offer__link {
display: inline-block;
margin-top: 16px;
font-size: 14px;
font-weight: 600;
color: var(--red);
text-decoration: none;
transition: color var(--transition);
}
.about-offer__link:hover {
color: var(--red-dark);
}
/* Реквизиты (3 группы) */
.about-legal {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.about-legal__group {
min-width: 0;
}
.about-legal__subtitle {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--red);
margin: 0 0 14px;
}
.about-legal__rows {
margin: 0;
}
.about-legal__rows > div {
padding: 10px 0;
border-top: 1px solid var(--gray-100);
}
.about-legal__rows > div:first-child {
border-top: none;
}
.about-legal__rows dt {
font-size: 12px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 4px;
}
.about-legal__rows dd {
margin: 0;
font-size: 14px;
color: var(--black);
font-family: var(--font-mono);
line-height: 1.4;
word-break: break-word;
}
.about-legal__rows dd a {
color: var(--black);
text-decoration: none;
transition: color var(--transition);
}
.about-legal__rows dd a:hover {
color: var(--red);
}
/* ==================== ФУТЕР ==================== */
.site-footer {
background: var(--black);
color: var(--gray-300);
margin-top: 60px;
padding: 64px 0 32px;
font-size: 14px;
line-height: 1.6;
}
/* Если перед футером уже тёмная секция (например 404 или CTA-баннер),
глобальный margin-top: 60px создаёт лишнюю белую полоску
между двумя тёмными блоками — обнуляем его. */
.error-404 + .site-footer,
.section--cta + .site-footer {
margin-top: 0;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--gray-700);
}
.footer-col {
min-width: 0;
}
.footer-brand {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 16px;
}
.footer-brand b {
color: var(--red);
font-weight: 700;
}
/* Логотип-картинка в подвале (из Кастомизатора).
Высота задаётся инлайн-стилем из Кастомизатора (strojmet_logo_inline_css);
здесь — дефолт и базовые свойства. */
.footer-logo {
display: inline-block;
line-height: 0;
}
.footer-logo .site-logo__img--footer {
height: 40px;
width: auto;
max-width: 100%;
display: block;
}
.footer-desc {
font-size: 14px;
line-height: 1.6;
color: var(--gray-300);
margin: 0 0 20px;
max-width: 320px;
}
/* Кнопки «Прайс PDF» / «Запросить КП» */
.footer-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
}
.footer-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
background: transparent;
border: 1px solid var(--gray-700);
color: var(--gray-300);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.footer-btn svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.footer-btn:hover:not(:disabled) {
border-color: var(--white);
color: var(--white);
}
.footer-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.footer-title {
font-size: 13px;
font-weight: 600;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 16px;
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-list li {
margin: 0 0 10px;
}
.footer-list li:last-child {
margin-bottom: 0;
}
.footer-list a {
color: var(--gray-300);
text-decoration: none;
transition: color var(--transition);
}
.footer-list a:hover {
color: var(--red);
}
/* Колонка «Контакты» — строки с иконками */
.footer-contacts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-contacts__item {
display: flex;
gap: 10px;
line-height: 1.5;
color: var(--gray-300);
}
.footer-contacts__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
margin-top: 4px;
color: var(--gray-500);
}
.footer-phone {
display: block;
font-family: var(--font-mono);
color: var(--white);
text-decoration: none;
transition: color var(--transition);
}
.footer-phone--muted {
color: var(--gray-500);
}
.footer-phone:hover {
color: var(--red);
}
.footer-muted {
color: var(--gray-500);
}
.site-footer__bottom {
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy {
margin: 0;
font-size: 13px;
color: var(--gray-500);
}
/* Юр-ссылки в подвале */
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 13px;
}
.footer-legal a {
color: var(--gray-500);
text-decoration: none;
transition: color var(--transition);
}
.footer-legal a:hover {
color: var(--white);
}
/* ==================== ПЛАШКА COOKIE ==================== */
.cookie-bar {
position: fixed;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 900;
max-width: 760px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
padding: 16px 20px;
background: var(--black);
color: var(--gray-300);
border-radius: var(--radius);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
font-size: 13px;
line-height: 1.5;
}
.cookie-bar[hidden] {
display: none;
}
.cookie-bar__text {
margin: 0;
flex: 1;
}
.cookie-bar__text a {
color: var(--white);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-bar__btn {
flex-shrink: 0;
padding: 10px 22px;
background: var(--red);
color: var(--white);
border: none;
border-radius: var(--radius);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
}
.cookie-bar__btn:hover {
background: var(--red-dark);
}
/* ========================================================
СТАТЬИ — список и одна статья
======================================================== */
/* ==================== СПИСОК СТАТЕЙ ==================== */
.articles-page {
background: var(--white);
padding-bottom: 80px;
}
.articles-page .breadcrumbs {
padding: 28px 0 8px;
}
.articles-hero {
padding: 24px 0 56px;
max-width: 760px;
}
.articles-hero__title {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 12px 0 18px;
color: var(--black);
}
.articles-hero__lead {
font-size: 18px;
line-height: 1.55;
color: var(--gray-700);
margin: 0;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
}
.article-card {
background: var(--white);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 16px;
transition: background 0.2s;
}
.article-card:hover {
background: var(--gray-50);
}
.article-card__num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--red);
letter-spacing: 0.05em;
}
.article-card__title {
font-size: 22px;
font-weight: 600;
line-height: 1.25;
margin: 0;
letter-spacing: -0.01em;
}
.article-card__title a {
color: var(--black);
text-decoration: none;
transition: color 0.15s;
}
.article-card__title a:hover {
color: var(--red);
}
.article-card__excerpt {
margin: 0;
color: var(--gray-700);
font-size: 15px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card__link {
margin-top: auto;
color: var(--red);
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.15s;
}
.article-card__link:hover {
gap: 10px;
}
.articles-empty {
padding: 60px 0;
text-align: center;
color: var(--gray-500);
font-size: 16px;
}
/* Пагинация */
.pagination {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 40px;
justify-content: center;
}
.pagination__item {
display: inline-flex;
}
.pagination a,
.pagination span > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
color: var(--gray-700);
text-decoration: none;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
border: 1px solid var(--gray-200);
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pagination a:hover {
border-color: var(--red);
color: var(--red);
}
.pagination .current {
background: var(--black);
color: var(--white);
border-color: var(--black);
}
/* ==================== ОДНА СТАТЬЯ ==================== */
.article-page {
background: var(--white);
padding-bottom: 80px;
}
.article-page .breadcrumbs {
padding: 28px 0 8px;
}
.article-hero {
padding: 24px 0 32px;
max-width: 820px;
}
.article-hero__title {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 20px;
color: var(--black);
}
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: var(--gray-500);
font-size: 14px;
}
.article-meta a {
color: var(--gray-700);
text-decoration: none;
transition: color 0.15s;
}
.article-meta a:hover {
color: var(--red);
}
.article-meta__sep {
color: var(--gray-300);
}
.article-cover {
margin: 0 0 36px;
}
.article-cover__img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--gray-200);
}
/* Типографика тела статьи */
.article-body {
max-width: 760px;
margin: 0 auto;
color: var(--gray-900);
font-size: 17px;
line-height: 1.7;
}
.article-body p,
.article-body ul,
.article-body ol {
margin: 0 0 1.2em;
}
.article-body h2 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 2em 0 0.6em;
color: var(--black);
}
.article-body h3 {
font-size: 22px;
font-weight: 600;
margin: 1.6em 0 0.5em;
color: var(--black);
}
.article-body ul,
.article-body ol {
padding-left: 1.4em;
}
.article-body li {
margin-bottom: 0.4em;
}
.article-body a {
color: var(--red);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.article-body a:hover {
color: var(--red-dark);
}
.article-body strong {
color: var(--black);
font-weight: 600;
}
.article-body blockquote {
margin: 1.6em 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--red);
color: var(--gray-700);
font-size: 18px;
font-style: normal;
}
.article-body blockquote p:last-child {
margin-bottom: 0;
}
.article-body code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--gray-100);
padding: 2px 6px;
border-radius: 2px;
}
.article-body pre {
background: var(--black);
color: var(--gray-100);
padding: 20px 24px;
overflow-x: auto;
margin: 1.5em 0;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.5;
}
.article-body pre code {
background: transparent;
color: inherit;
padding: 0;
}
.article-body img,
.article-body figure img {
display: block;
max-width: 100%;
height: auto;
margin: 1.5em auto;
border: 1px solid var(--gray-200);
}
.article-body figcaption {
text-align: center;
color: var(--gray-500);
font-size: 13px;
margin-top: 0.6em;
}
.article-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: 15px;
}
.article-body th,
.article-body td {
border-bottom: 1px solid var(--gray-200);
padding: 10px 14px;
text-align: left;
vertical-align: top;
}
.article-body th {
background: var(--gray-100);
font-weight: 600;
color: var(--black);
}
.article-body hr {
border: 0;
border-top: 1px solid var(--gray-200);
margin: 2em 0;
}
/* CTA в конце статьи */
.article-cta {
margin-top: 64px;
padding: 40px 48px;
background: var(--gray-100);
border-left: 3px solid var(--red);
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
}
.article-cta__title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 8px;
color: var(--black);
}
.article-cta__lead {
margin: 0;
font-size: 15px;
color: var(--gray-700);
}
.article-cta__actions {
display: flex;
gap: 12px;
flex-shrink: 0;
}
/* Связанные статьи */
.related-articles {
margin-top: 80px;
padding-top: 48px;
border-top: 1px solid var(--gray-200);
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
}
/* ========================================================
404 — страница не найдена
======================================================== */
.error-404 {
background: var(--black);
color: var(--white);
padding: 80px 0 100px;
position: relative;
overflow: hidden;
min-height: 70vh;
}
/* Декоративный «штрихкод» — вертикальные полоски через весь фон,
плотные слева и редкие справа, очень слабо. Создаёт «технический» характер. */
.error-404__barcode {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(
90deg,
transparent 0,
transparent 6px,
rgba(255, 255, 255, 0.025) 6px,
rgba(255, 255, 255, 0.025) 7px,
transparent 7px,
transparent 11px,
rgba(255, 255, 255, 0.04) 11px,
rgba(255, 255, 255, 0.04) 13px,
transparent 13px,
transparent 28px
);
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 60%, transparent);
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.2) 60%, transparent);
}
.error-404__inner {
position: relative;
z-index: 2;
}
/* === Шапка ошибки === */
.error-404__head {
max-width: 880px;
}
.error-404__label {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--red);
border-left: 3px solid var(--red);
padding-left: 12px;
margin-bottom: 24px;
}
.error-404__code-row {
display: flex;
align-items: flex-start;
gap: 36px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.error-404__code {
font-family: var(--font-mono);
font-size: clamp(96px, 14vw, 184px);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--white);
text-shadow: 6px 0 var(--red);
}
.error-404__status {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 14px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
padding-left: 24px;
min-width: 280px;
}
.error-404__status-row {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 13px;
}
.error-404__status-key {
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.12em;
min-width: 60px;
}
.error-404__status-val {
color: var(--white);
font-weight: 600;
}
.error-404__status-val--mono {
word-break: break-all;
color: var(--gray-300);
font-weight: 400;
}
.error-404__title {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 18px;
color: var(--white);
max-width: 780px;
}
.error-404__title .accent {
color: var(--red);
}
.error-404__lead {
font-size: 17px;
line-height: 1.6;
color: var(--gray-300);
margin: 0 0 40px;
max-width: 640px;
}
/* === Поиск === */
.error-404__search {
display: flex;
gap: 0;
max-width: 640px;
margin: 0 0 56px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
transition: border-color 0.15s, background 0.15s;
}
.error-404__search:focus-within {
border-color: var(--red);
background: rgba(255, 255, 255, 0.08);
}
.error-404__search-input {
flex: 1;
background: transparent;
border: 0;
color: var(--white);
padding: 16px 20px;
font-size: 16px;
font-family: inherit;
outline: none;
}
.error-404__search-input::placeholder {
color: var(--gray-500);
}
.error-404__search-btn {
background: var(--red);
color: var(--white);
border: 0;
padding: 0 32px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s;
}
.error-404__search-btn:hover {
background: var(--red-dark);
}
/* === Три «выхода» === */
.error-404__exits {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 56px;
}
.exit-card {
background: var(--black);
padding: 28px 24px 24px;
display: grid;
grid-template-areas:
"num arrow"
"title title"
"desc desc";
grid-template-columns: 1fr auto;
gap: 12px 0;
text-decoration: none;
color: var(--white);
transition: background 0.2s;
position: relative;
min-height: 200px;
}
.exit-card:hover {
background: var(--gray-900);
}
.exit-card__num {
grid-area: num;
font-family: var(--font-mono);
font-size: 12px;
color: var(--red);
letter-spacing: 0.06em;
}
.exit-card__title {
grid-area: title;
font-size: 20px;
font-weight: 600;
line-height: 1.25;
color: var(--white);
letter-spacing: -0.01em;
}
.exit-card__desc {
grid-area: desc;
font-size: 14px;
line-height: 1.55;
color: var(--gray-500);
margin-top: auto;
}
.exit-card__arrow {
grid-area: arrow;
font-size: 20px;
color: var(--gray-700);
transition: color 0.2s, transform 0.2s;
}
.exit-card:hover .exit-card__arrow {
color: var(--red);
transform: translateX(4px);
}
/* === Чипы популярных категорий === */
.error-404__suggest {
margin-bottom: 56px;
}
.error-404__suggest-label {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.error-404__suggest-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.error-404__suggest-list a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--white);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.error-404__suggest-list a:hover {
background: var(--red);
border-color: var(--red);
color: var(--white);
}
.error-404__suggest-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--gray-500);
transition: color 0.15s;
}
.error-404__suggest-list a:hover .error-404__suggest-count {
color: rgba(255, 255, 255, 0.8);
}
/* === Плашка с телефоном внизу === */
.error-404__phone {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px 24px;
background: var(--white);
color: var(--black);
}
.error-404__phone-icon {
width: 28px;
height: 28px;
color: var(--red);
flex-shrink: 0;
}
.error-404__phone-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.error-404__phone-key {
font-size: 13px;
color: var(--gray-500);
}
.error-404__phone-val {
font-size: 20px;
font-weight: 700;
color: var(--black);
text-decoration: none;
letter-spacing: -0.01em;
transition: color 0.15s;
}
.error-404__phone-val:hover {
color: var(--red);
}
/* ==================== АДАПТИВ ==================== */
/* Планшет (≤1024px) */
@media (max-width: 1024px) {
.top-bar {
font-size: 12px;
}
.top-bar .container {
padding: 0 20px;
gap: 16px;
}
.top-left,
.top-right {
gap: 14px;
}
.hide-tablet {
display: none !important;
}
.header .container {
gap: 24px;
}
.main-nav ul {
gap: 20px;
}
.main-nav a {
font-size: 14px;
}
.header-cta {
gap: 16px;
}
/* CTA-кнопка и часы в шапке скрываются на планшете — не помещаются рядом с меню */
.header-callback-btn,
.header-hours {
display: none;
}
/* Hero — уменьшаем заголовок и отступы */
.hero {
padding: 64px 0 80px;
}
.hero__title {
font-size: 48px;
}
.hero__subtitle {
font-size: 18px;
}
/* Каталог категорий: 3 колонки */
.category-grid {
grid-template-columns: repeat(3, 1fr);
}
/* Полоса фактов: 2×2 */
.facts-strip__inner {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* Преимущества: 2×2 */
.adv-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Услуги: 2×2 */
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Шаги: столбиком */
.steps {
grid-template-columns: 1fr;
}
.step {
border-right: none;
border-bottom: 1px solid var(--gray-200);
}
.step:last-child {
border-bottom: none;
}
/* Контакты: одна колонка, карта снизу */
.contacts-grid {
grid-template-columns: 1fr;
gap: 32px;
}
/* Каталог */
.catalog__title {
font-size: 36px;
}
/* Услуги: hero в столбик, боковой § сверху, зоны 2×2 */
.services-hero {
grid-template-columns: 1fr;
gap: 32px;
}
.services-hero__title {
font-size: 40px;
}
.svc-section__inner {
grid-template-columns: 1fr;
gap: 20px;
padding-top: 48px;
padding-bottom: 48px;
}
.svc-zones {
grid-template-columns: 1fr 1fr;
}
.svc-cut {
grid-template-columns: 1fr 1fr;
}
/* О компании: реквизиты 2 колонки */
.about-legal {
grid-template-columns: 1fr 1fr;
}
/* Футер: 2 колонки */
.site-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 36px 48px;
}
/* Статьи: 3 колонки → 2 у связанных */
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
.articles-hero__title,
.article-hero__title {
font-size: 36px;
}
/* 404: три выхода — два в ряд, третий снизу */
.error-404__exits {
grid-template-columns: repeat(2, 1fr);
}
.error-404__title {
font-size: 32px;
}
}
/* Мобильный (≤768px) */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
/* Cookie-плашка: в столбик, кнопка на всю ширину */
.cookie-bar {
left: 12px;
right: 12px;
bottom: 12px;
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 16px;
}
.cookie-bar__btn {
width: 100%;
}
.header {
padding: 14px 0;
}
/* Лого слева, CTA с бургером — прижаты к правому краю.
Меню уходит в absolute-выпадашку и на сетку не влияет, поэтому
средняя 1fr-колонка не нужна — иначе она распирала бы шапку. */
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
/* Меню переходит в выпадашку */
.main-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--gray-200);
padding: 20px 32px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.main-nav.is-open {
display: block;
}
.main-nav ul {
flex-direction: column;
gap: 16px;
}
.main-nav a {
font-size: 16px;
display: block;
}
/* Активный пункт без подчёркивания (мешает в столбике) */
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after {
display: none;
}
/* Подменю на мобиле: встроенным списком, без абсолютки и hover'а */
.sub-menu {
position: static;
border: none;
box-shadow: none;
background: var(--gray-50);
padding: 4px 0;
margin: 8px -20px 0;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
display: none;
}
.main-nav .menu-item-has-children.is-open > .sub-menu {
display: block;
}
.sub-menu a {
padding: 10px 20px 10px 36px;
font-size: 15px;
}
/* Показываем гамбургер */
.menu-toggle {
display: flex;
}
/* Уменьшаем логотип */
.site-logo-text-mark {
font-size: 22px;
}
/* Телефон на мобиле — только иконка-кнопка */
.header-phone__num {
display: none;
}
.header-phone {
padding: 8px;
}
.header-cta {
gap: 12px;
}
/* Страница товара — одна колонка */
.product-hero {
grid-template-columns: 1fr;
gap: 28px;
}
.product-hero__title {
font-size: 28px;
}
.product-prices__value {
font-size: 28px;
}
.product-actions {
flex-direction: column;
}
.product-actions .btn-order,
.product-actions .btn-call {
width: 100%;
}
.product-related__list {
grid-template-columns: 1fr 1fr;
}
/* Таблица товаров — компактнее, скрываем менее важные колонки */
.products-table {
font-size: 14px;
}
.products-table th:nth-child(3),
.products-table td:nth-child(3),
.products-table th:nth-child(4),
.products-table td:nth-child(4) {
display: none;
}
/* Каталог-прайс — компактнее */
.catalog {
padding: 20px 0 56px;
}
.catalog__title {
font-size: 28px;
}
.catalog-search {
min-width: 100%;
}
.price-table {
font-size: 13px;
min-width: 680px;
}
.price-table thead th,
.price-table tbody th.price-table__name,
.price-table tbody td {
padding: 8px 10px;
}
.catalog-empty {
padding: 48px 20px;
}
.catalog-empty__title {
font-size: 19px;
}
/* Контакты — всё в одну колонку */
.contacts-hero__title {
font-size: 32px;
}
.contacts-cards {
grid-template-columns: 1fr;
gap: 12px;
}
.locations {
grid-template-columns: 1fr;
}
.contacts-form-block {
grid-template-columns: 1fr;
gap: 36px;
}
.contacts-form-block__title {
font-size: 28px;
}
.request-form__grid {
grid-template-columns: 1fr;
}
.request-form {
padding: 20px;
}
/* CF7 двухколоночные поля — в столбик; модалка и форма заказа компактнее */
.cf7-form .grid-2 {
grid-template-columns: 1fr;
}
.modal__box {
padding: 24px 20px;
}
/* На мобиле фон-фото в модалке убираем — мало места, контент во всю ширину */
.modal__box::after {
display: none;
}
.modal__box > *:not(.modal__close) {
max-width: none;
}
/* Юр-страницы: компактный заголовок */
.legal-page__title {
font-size: 28px;
}
/* Консультация: компактнее, контент во всю ширину, кнопка на всю ширину */
.consult {
padding: 28px 24px;
}
.consult__body {
max-width: none;
}
/* Мобильный фон — лёгкая текстура: плотная белая вуаль, чтобы текст
и перки читались поверх; металл проступает приглушённо. */
.consult::after {
background-image:
linear-gradient(180deg, var(--white) 18%, rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0.7) 100%),
var(--consult-bg-mobile);
background-size: cover, cover;
background-position: center, bottom center;
}
.consult__title {
font-size: 24px;
}
.consult__btn {
width: 100%;
justify-content: center;
}
/* Услуги — всё в одну колонку */
.services-hero__title {
font-size: 30px;
}
.services-hero__stats {
grid-template-columns: 1fr 1fr;
}
.svc-section__title {
font-size: 26px;
}
.svc-zones,
.svc-cut,
.svc-extra,
.about-offer,
.about-legal {
grid-template-columns: 1fr;
}
.svc-extra__item,
.svc-extra__item + .svc-extra__item {
border-right: none;
border-top: 1px solid var(--gray-200);
padding: 20px 0 0;
}
.svc-extra__item:first-child {
border-top: none;
padding-top: 0;
}
/* Футер — одна колонка */
.site-footer {
margin-top: 40px;
padding: 48px 0 28px;
}
.site-footer__grid {
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 32px;
}
.footer-desc {
max-width: none;
}
.site-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
/* Hero — компактнее, статы 2×2 */
.hero {
padding: 56px 0 64px;
}
.hero__title {
font-size: 36px;
}
.hero__subtitle {
font-size: 16px;
margin-bottom: 32px;
}
/* Полоса фактов — 1 колонка на мобиле */
.facts-strip__inner {
grid-template-columns: 1fr;
gap: 18px;
}
.facts-strip {
padding: 22px 0;
}
/* Секции главной — компактные отступы */
.section {
padding: 56px 0;
}
.section-header {
flex-direction: column;
align-items: flex-start;
margin-bottom: 32px;
}
.section-title {
font-size: 28px;
}
/* Каталог категорий: 2 колонки */
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
.category-card {
padding: 22px 18px;
min-height: 150px;
}
.category-card__name {
font-size: 17px;
}
/* Преимущества: столбиком */
.adv-grid {
grid-template-columns: 1fr;
gap: 24px;
}
/* Hero CTA: кнопки на всю ширину, в столбик */
.hero__actions {
flex-direction: column;
gap: 12px;
}
.hero__actions .btn {
justify-content: center;
width: 100%;
}
/* Услуги: столбиком */
.services-grid {
grid-template-columns: 1fr;
}
/* FAQ компактнее */
.faq-item__q {
font-size: 16px;
padding: 18px 4px;
}
/* Шаги: компактнее */
.step {
padding: 32px 24px;
}
.step__num {
font-size: 40px;
}
/* Контакты: 1 колонка для блоков */
.contacts-info {
grid-template-columns: 1fr;
gap: 22px;
}
.contacts-map,
.contacts-map__placeholder {
min-height: 220px;
}
/* Статьи: 1 колонка везде, компактный CTA */
.articles-grid,
.related-grid {
grid-template-columns: 1fr;
}
.articles-hero,
.article-hero {
padding-bottom: 24px;
}
.articles-hero__title,
.article-hero__title {
font-size: 30px;
}
.articles-hero__lead {
font-size: 16px;
}
.article-body {
font-size: 16px;
}
.article-body h2 {
font-size: 24px;
}
.article-body h3 {
font-size: 19px;
}
.article-card {
padding: 24px 22px;
}
.article-card__title {
font-size: 19px;
}
.article-cta {
margin-top: 48px;
padding: 28px 24px;
grid-template-columns: 1fr;
gap: 20px;
}
.article-cta__actions {
flex-direction: column;
align-items: stretch;
}
.related-articles {
margin-top: 56px;
padding-top: 36px;
}
/* 404 на мобиле — компактнее, всё в одну колонку */
.error-404 {
padding: 56px 0 72px;
min-height: 0;
}
.error-404__code-row {
gap: 20px;
margin-bottom: 24px;
}
.error-404__status {
padding-left: 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 16px;
padding-bottom: 0;
min-width: 0;
width: 100%;
}
.error-404__title {
font-size: 26px;
}
.error-404__lead {
font-size: 15px;
margin-bottom: 32px;
}
.error-404__search {
margin-bottom: 40px;
}
.error-404__search-input {
padding: 14px 16px;
font-size: 15px;
}
.error-404__search-btn {
padding: 0 20px;
font-size: 13px;
}
.error-404__exits {
grid-template-columns: 1fr;
}
.exit-card {
min-height: 0;
padding: 22px 20px;
}
.error-404__suggest {
margin-bottom: 40px;
}
.error-404__phone {
width: 100%;
justify-content: flex-start;
}
}
/* Маленький мобильный (≤640px) */
@media (max-width: 640px) {
.top-bar {
display: none;
}
.product-related__list,
.product-perks {
grid-template-columns: 1fr;
}
}