/* ============================================================
MODERN.CSS — надстройка поверх style.css
Подключается ПОСЛЕДНИМ в (после style.css).
Только переопределения, style.css не меняется.
============================================================ */
/* --- Базовый сброс и типографика --- */
body {
font-family: var(--font-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text);
}
/* Убрать justify-выравнивание — плохо читается на колонках */
.page-content {
text-align: left;
}
/* Типографическая шкала */
.page-content h1 {
font-size: var(--font-size-h1);
font-family: var(--font-bold);
border-bottom: 2px solid var(--color-primary);
padding-bottom: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.page-content h2 {
font-size: var(--font-size-xl);
font-family: var(--font-semibold);
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.page-content h3 {
font-size: var(--font-size-md);
font-family: var(--font-semibold);
margin-bottom: var(--spacing-xs);
}
/* --- Шапка --- */
.header {
padding-top: 0;
border-bottom: 3px solid var(--color-primary);
}
.top-line {
height: auto;
padding: var(--spacing-sm) 0;
margin: 0 0 0;
}
.logo_title {
font-size: 24px;
letter-spacing: 0.04em;
}
/* --- Навигация --- */
.header-nav {
background-color: var(--color-primary);
}
.nav-menu > ul > li > a {
font-size: 13px;
letter-spacing: 0.06em;
padding: 0 22px;
}
/* Убрать устаревшую CSS-псевдо-стрелку из-под пунктов меню */
.current:before,
.header__nav-menu > ul > li:before,
.current:after,
.header__nav-menu > ul > li:after {
display: none;
}
/* Подчёркивание активного пункта меню (оранжевая шапка → светлая подсветка) */
.header__nav-menu > ul > li.current > a,
.header__nav-menu > ul > li:hover > a {
color: #fff;
background-color: rgba(0, 0, 0, 0.12);
}
/* --- Карточки --- */
.card {
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
transition: box-shadow var(--transition-base), transform var(--transition-base);
border: 1px solid var(--color-border);
padding: 12px;
}
.card:hover,
.card_shadow {
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px);
}
.card__text {
height: auto; /* Убрать жёсткую высоту 45px */
min-height: 40px;
padding: 12px 0 8px;
font-family: var(--font-semibold);
font-size: var(--font-size-sm);
line-height: 1.4;
}
/* --- Кнопки --- */
.button {
border-radius: var(--radius-sm);
font-size: 13px;
letter-spacing: 0.04em;
transition: background-color var(--transition-base), box-shadow var(--transition-base);
background-color: var(--color-primary);
}
.button:hover {
background-color: var(--color-primary-dark); /* Вместо зелёного #3cb878 */
box-shadow: 0 4px 12px rgba(231, 120, 23, 0.35);
}
/* Кнопка submit в формах: на десктопе 50% мешает, делаем читаемой; на мобильных 100% */
.contact-form button[type="submit"],
.form button[type="submit"],
button.button {
min-width: 220px;
}
/* Общая замена зелёного hover на любых button по умолчанию */
button:hover {
background-color: var(--color-primary-dark);
}
/* Focus-visible для клавиатурной навигации */
.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
}
/* ============================================================
СЛАЙДЕРЫ «ПРОИЗВОДСТВО» и «ЛИТЕЙНАЯ ПРОДУКЦИЯ»
Единый стиль с hero: тёмный градиент, «стеклянные» карточки
============================================================ */
/* Блок-обёртка обоих слайдеров — тёмный градиент как hero */
.slider {
position: relative;
background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 60%, #3a2000 100%);
border-radius: var(--radius-lg);
padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
margin-bottom: var(--spacing-lg);
overflow: hidden;
}
/* Обёртка owl не должна добавлять лишнюю высоту */
.slider .owl-carousel {
margin-bottom: 0;
}
.slider .owl-stage-outer {
padding-bottom: 4px;
}
/* Скрываем орфанные owl-dots, если плагин их рисует */
.slider .owl-dots {
display: none;
}
/* Отменяем старую фоновую картинку slider-bg.jpg */
.slider_bg {
background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 60%, #3a2000 100%);
border-radius: var(--radius-lg);
overflow: hidden;
}
/* Заголовки — белые, с тонкой оранжевой чертой-акцентом */
.slider__title {
position: relative;
font-size: var(--font-size-xl);
letter-spacing: 0.05em;
color: #fff;
padding-bottom: 14px;
margin-bottom: var(--spacing-md);
}
.slider__title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 64px;
height: 3px;
background-color: var(--color-primary);
border-radius: 2px;
}
/* «Стеклянные» карточки внутри слайдеров */
.slider .card,
.slider .card_shadow {
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
padding: 12px;
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.slider .card:hover,
.slider .card_shadow:hover {
transform: translateY(-4px);
border-color: rgba(231, 120, 23, 0.6);
box-shadow: 0 10px 28px rgba(231, 120, 23, 0.28);
}
/* Скруглённые фото в карточках */
.slider .card__image {
border-radius: var(--radius-sm);
overflow: hidden;
}
.slider .card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.slider .card:hover .card__image img {
transform: scale(1.05);
}
/* Кнопки-подписи — в стиле hero, без зелёного ховера */
.slider .button {
margin-top: 12px;
border-radius: var(--radius-sm);
line-height: 40px;
background-color: var(--color-primary);
font-family: var(--font-semibold);
font-size: 13px;
letter-spacing: 0.04em;
}
.slider .button:hover {
background-color: var(--color-primary-dark);
}
/* Убираем лишний
перед кнопкой — отступ даёт margin */
.slider .card noindex br {
display: none;
}
/* Единые круглые стрелки навигации для обоих слайдеров */
.slider .owl-prev,
.slider .owl-next,
.slider_bg .owl-prev,
.slider_bg .owl-next {
width: 42px;
height: 42px;
border-radius: 50%;
background-image: none !important;
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff !important;
font-size: 0;
top: 50%;
transform: translateY(-50%);
transition: background-color var(--transition-base), border-color var(--transition-base);
}
.slider .owl-prev { left: 2px; }
.slider .owl-next { right: 2px; }
/* Стрелки не перекрывают карточки — полупрозрачны и поверх */
.slider .owl-prev,
.slider .owl-next {
z-index: 5;
}
.slider .owl-prev::before,
.slider .owl-next::before {
font-family: 'FontAwesome';
font-size: 18px;
line-height: 40px;
color: #fff;
}
.slider .owl-prev::before { content: '\f104'; } /* fa-angle-left */
.slider .owl-next::before { content: '\f105'; } /* fa-angle-right */
.slider .owl-prev:hover,
.slider .owl-next:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
/* --- Сайдбар --- */
.sb-title {
border-radius: var(--radius-sm);
overflow: hidden;
border: none;
background-color: var(--color-dark-2);
}
.sb-title__icon {
background-color: var(--color-primary);
}
.sb-title__text {
color: var(--color-white);
background-color: var(--color-dark-2);
}
/* Заголовок сайдбара в стиле главного меню (оранжевый бар, белый uppercase) */
.sb-title--menu .sb-title__text,
.sb-title--menu .sb-title__text a,
.sb-title--menu .sb-title__text a:link,
.sb-title--menu .sb-title__text a:visited,
.sb-title--menu .sb-title__text a:hover {
background-color: var(--color-primary);
color: var(--color-white) !important;
text-transform: uppercase;
font-family: var(--font-semibold);
font-size: var(--font-size-sm);
letter-spacing: 0.3px;
text-decoration: none;
}
.sb-title--menu .sb-title__icon {
background-color: var(--color-primary-dark);
}
.sb-title--menu .sb-title__text a:hover {
opacity: 0.92;
}
/* Логотип/картинка в тексте страницы (напр. «О заводе») — обтекание справа, разумный размер */
.page-content img.content-logo,
.content img.content-logo,
img.content-logo {
display: inline !important;
float: right !important;
width: 220px !important;
max-width: 40% !important;
height: auto !important;
max-height: none !important;
margin: 6px 0 20px 24px !important;
border-radius: var(--radius-sm);
}
@media (max-width: 600px) {
img.content-logo {
float: none !important;
display: block !important;
width: 60% !important;
max-width: 220px !important;
margin: 12px auto 20px !important;
}
}
/* Страховка: картинки в контенте не растягиваются выше разумного */
.page-content img,
.content img {
max-height: 700px;
}
/* Скрыть пустые sb-block (на случай если остались в контенте) */
.sidebar .sb-block:empty {
display: none;
}
/* --- Форма --- */
.contact-form {
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
background-color: var(--color-bg);
}
/* --- Футер --- */
.footer {
background-color: var(--color-dark-2);
border-top: 3px solid var(--color-primary);
}
/* --- Хлебные крошки --- */
.bread-crumbs {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* --- Таблицы --- */
.iksweb {
width: 100%;
border-collapse: collapse;
}
.iksweb th {
background-color: var(--color-dark-2);
color: var(--color-white);
padding: 10px 12px;
font-family: var(--font-semibold);
}
.iksweb td {
padding: 9px 12px;
border-bottom: 1px solid var(--color-border);
text-align: left;
min-width: unset; /* Убрать жёсткий min-width: 150px */
}
.iksweb tr:nth-child(even) td {
background-color: #f4f4f4;
}
/* Сброс жёсткого min-width таблиц (задача 9.4) */
td {
min-width: unset;
}
.table_partners tr > td {
min-width: unset;
}
/* ============================================================
HERO-СЕКЦИЯ (Блок 3)
============================================================ */
.hero {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
background: linear-gradient(135deg, #1c1c1c 0%, #2e2e2e 60%, #3a2000 100%);
margin-bottom: var(--spacing-lg);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
background-image: url('/assets/content/images/gor-meh.jpg');
background-size: cover;
background-position: center;
opacity: 0.25;
}
.hero__content {
position: relative;
z-index: 1;
max-width: 680px;
padding: var(--spacing-xl) 0;
}
.hero__badge {
display: inline-block;
padding: 6px 16px;
background-color: var(--color-primary);
color: #fff;
font-size: 15px;
font-family: var(--font-semibold);
font-weight: 600;
border-radius: 4px;
margin-bottom: var(--spacing-sm);
letter-spacing: 0.03em;
}
.hero__title {
font-size: 36px;
font-family: var(--font-bold);
color: var(--color-white);
line-height: 1.25;
margin-bottom: var(--spacing-sm);
border: none;
padding: 0;
text-transform: none;
}
.hero__subtitle {
font-size: var(--font-size-md);
color: rgba(255, 255, 255, 0.75);
margin-bottom: var(--spacing-md);
}
.hero__actions {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
margin-bottom: var(--spacing-md);
}
.hero__btn {
display: inline-block;
padding: 12px 28px;
font-family: var(--font-semibold);
font-size: var(--font-size-base);
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--transition-base);
}
.hero__btn--primary,
.hero a.hero__btn--primary {
background-color: var(--color-primary);
color: #fff !important;
}
.hero__btn--primary:hover,
.hero a.hero__btn--primary:hover {
background-color: var(--color-primary-dark);
color: #fff !important;
box-shadow: 0 4px 16px rgba(231, 120, 23, 0.4);
}
.hero__btn--ghost,
.hero a.hero__btn--ghost {
background-color: transparent;
color: #fff !important;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.hero__btn--ghost:hover,
.hero a.hero__btn--ghost:hover {
border-color: var(--color-white);
color: #fff !important;
background-color: rgba(255, 255, 255, 0.08);
}
.hero__stats {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.hero__stat-num {
display: block;
font-size: 28px;
font-family: var(--font-bold);
color: var(--color-primary);
}
.hero__stat-label {
display: block;
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
.hero {
min-height: 320px;
}
.hero__title {
font-size: 24px;
}
.hero__stats {
gap: var(--spacing-md);
}
.hero__stat-num {
font-size: 22px;
}
}
/* ============================================================
МОБИЛЬНАЯ АДАПТАЦИЯ (Блок 7)
============================================================ */
.sb-toggle-btn {
display: none;
}
@media (max-width: 767px) {
/* Inline-сайдбар вместо выезжающего */
.sidebar {
display: none;
}
.sidebar.is-open {
display: block;
padding: var(--spacing-sm);
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--spacing-md);
}
.sb-toggle-btn {
display: block;
width: 100%;
padding: 10px;
background-color: var(--color-dark-2);
color: var(--color-white);
font-family: var(--font-semibold);
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-sm);
}
/* Стрелки у пунктов меню с подменю */
.header__nav-menu > ul > li.level2 > a::after {
content: ' \25B8';
font-size: 11px;
opacity: 0.6;
}
/* Submit-кнопка формы 100% ширины на мобильных */
.contact-form button[type="submit"],
.form button[type="submit"],
button.button {
width: 100%;
min-width: 0;
}
}
/* Плавающая кнопка CTA на мобильных */
.fab-cta {
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--color-primary);
color: white;
padding: 12px 18px;
border-radius: 50px;
font-family: var(--font-semibold);
font-size: 14px;
box-shadow: 0 4px 16px rgba(231, 120, 23, 0.4);
z-index: 100;
text-decoration: none;
display: none;
}
.fab-cta:hover,
.fab-cta:focus {
color: #fff;
background-color: var(--color-primary-dark);
}
@media (max-width: 767px) {
.fab-cta {
display: flex;
align-items: center;
gap: 8px;
}
}
/* ============================================================
УЛУЧШЕНИЯ UX (Блок 8)
============================================================ */
/* Skeleton-плейсхолдер для lazy-изображений галереи */
.gallery-item__picture img[loading="lazy"] {
background-color: #e8e8e8;
min-height: 180px;
}
/* Sticky-шапка: кнопка «Заказать» в прокрученной полосе */
.js-top-bar .scroll-bar__cta,
.scroll-bar .scroll-bar__cta {
display: inline-block;
}
/* ============================================================
РЕФАКТОРИНГ: CSS-анимация мобильного сайдбара (Блок 9.2)
============================================================ */
.sidebar_mob {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar_mob.is-visible {
transform: translateX(0);
}
/* ============================================================
============================================================
ТЗ v2 — УНИФИКАЦИЯ ДИЗАЙНА (июнь 2026)
Все блоки ниже добавлены по ТЗ v2. Не редактировать style.css.
============================================================
============================================================ */
/* ============================================================
IMG-1: УНИФИКАЦИЯ ИЗОБРАЖЕНИЙ КОНТЕНТА
============================================================ */
/* Все изображения в контенте — 80% ширины, центрированные */
.page-content img {
display: block !important;
width: 80% !important;
max-width: 100%;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-sm);
}
/* Исключение: изображения внутри карточек и слайдеров — 100% */
.card__image img,
.slider img,
.gallery-item__picture img,
.sidebar img,
.news-card__image img {
width: 100% !important;
margin: 0 !important;
border-radius: 0;
}
/* Обёртка-параграф вокруг изображений — убрать лишние отступы */
.page-content p:has(> img:only-child),
.page-content p:has(> a > img:only-child) {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* IMG-1b: ссылка-обёртка fancybox должна быть блочной во всю ширину,
иначе inline- схлопывает и width:80% считается от узкого блока
(получались разные размеры 339px/678px на разных страницах Технологий).
Делаем блоком — теперь 80% всегда от ширины колонки. */
/* Параграфы-обёртки картинок часто имеют inline width:50%/60% — принудительно
растягиваем их на всю ширину колонки (только те, что содержат картинку). */
.page-content p:has(img),
.page-content p:has(a.fancy-img),
.ai-service__content p:has(img),
.ai-service__content p:has(a.fancy-img) {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.page-content a.fancy-img,
.ai-service__content a.fancy-img {
display: block !important;
width: 100% !important;
text-align: center;
}
/* На всякий случай — атрибут width="60%"/"50%" в контенте не должен побеждать */
.page-content a.fancy-img img,
.ai-service__content a.fancy-img img,
.ai-service__content > p > img,
.page-content > div p > img {
width: 80% !important;
max-width: 100%;
}
/* ============================================================
GRID-1: УНИФИЦИРОВАННАЯ ПЛИТКА КАРТОЧЕК
============================================================ */
/* Контейнер изображения — фиксированное соотношение сторон.
Ограничиваем правило карточками-плитками внутри .row, чтобы
не затронуть тёмные слайдеры главной (у них свои .slider .card__image). */
.row .card .card__image {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
background-color: #e8e8e8;
}
/* Слайдеры главной находятся вне .row — явно сбрасываем aspect-ratio на всякий случай */
.slider .card__image {
aspect-ratio: auto;
}
/* Изображение заполняет контейнер без искажений (карточки-плитки) */
.row .card .card__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
transition: transform var(--transition-base);
margin: 0 !important;
border-radius: 0 !important;
}
.row .card:hover .card__image img {
transform: scale(1.05);
}
/* Выравнивание высоты карточки через flex (вне тёмных слайдеров) */
.row .card {
display: flex;
flex-direction: column;
height: 100%;
}
/* Обёртка col-* — одинаковая высота строк */
.row [class*="col-"] {
display: flex;
flex-direction: column;
}
/* Кнопка прижата к низу карточки */
.row .card .button {
margin-top: auto;
}
/* ============================================================
NEWS-1: БЛОК НОВОСТЕЙ В САЙДБАРЕ — СОВРЕМЕННЫЙ СТИЛЬ
============================================================ */
/* Контейнер одной новости */
.sidebar .news {
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar .news:last-of-type {
border-bottom: none;
}
/* Заголовок новости */
.sidebar .news__title {
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.sidebar .news__title a {
color: var(--color-text);
font-family: var(--font-semibold);
text-decoration: none;
display: block;
}
.sidebar .news__title a:hover {
color: var(--color-primary);
}
/* Анонс — скрываем если дублирует заголовок */
.sidebar .news__text {
display: none;
}
/* Дата — маленькая, в начале */
.sidebar .news__date {
font-size: 12px;
color: var(--color-text-light);
display: flex;
align-items: center;
gap: 5px;
}
.sidebar .news__date i {
color: var(--color-primary);
font-size: 11px;
float: none;
margin: 0;
}
/* Ссылка «Ещё новости» */
.sidebar .sb-block__more-link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--color-primary);
font-family: var(--font-semibold);
text-decoration: none;
border-bottom: 1px dashed var(--color-primary);
}
.sidebar .sb-block__more-link:hover {
border-bottom-style: solid;
}
/* ============================================================
NEWS-2: КАРТОЧКИ НОВОСТЕЙ (страница /novosti)
============================================================ */
/* Сетка-обёртка — равная высота карточек в ряду (flex-wrap) */
.news-grid {
display: flex;
flex-wrap: wrap;
margin-left: -12px;
margin-right: -12px;
}
.news-grid .news-card-col {
display: flex;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 24px;
}
.news-card-col > .news-card {
width: 100%;
}
.news-card {
background: var(--color-white);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.news-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px);
}
.news-card__image {
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #e8e8e8;
}
.news-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.news-card:hover .news-card__image img {
transform: scale(1.04);
}
.news-card__body {
padding: var(--spacing-sm);
display: flex;
flex-direction: column;
flex: 1;
}
.news-card__date {
font-size: 12px;
color: var(--color-text-light);
display: block;
margin-bottom: 6px;
}
.news-card__date i {
color: var(--color-primary);
margin-right: 4px;
}
/* Картинка карточки не подчиняется правилу контента 80% */
.page-content .news-card__image img {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.news-card__title {
font-size: 15px;
font-family: var(--font-semibold);
line-height: 1.4;
margin-bottom: 8px;
}
.news-card__title a {
color: var(--color-text);
text-decoration: none;
}
.news-card__title a:hover {
color: var(--color-primary);
}
.news-card__excerpt {
font-size: 13px;
color: var(--color-text-light);
line-height: 1.5;
flex: 1;
margin-bottom: 12px;
}
.news-card__more {
font-size: 13px;
color: var(--color-primary);
font-family: var(--font-semibold);
text-decoration: none;
align-self: flex-start;
}
.news-card__more:hover {
text-decoration: underline;
}
/* ============================================================
GALLERY-2: СОВРЕМЕННАЯ ПЛИТКА ГАЛЕРЕИ
Исправление сбоя из-за вертикальных фото +
растянутых картинок (object-fit:fill → cover, фикс. aspect-ratio).
============================================================ */
/* Карточка элемента галереи — современный вид */
.gallery-item {
display: flex !important;
flex-direction: column;
width: 100%;
margin-bottom: 0 !important;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: box-shadow var(--transition-base), transform var(--transition-base);
text-decoration: none !important;
}
.gallery-item:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px);
text-decoration: none !important;
}
/* Контейнер фото — фиксированное соотношение, обрезка лишнего */
.gallery-item__picture {
position: relative;
width: 100% !important;
aspect-ratio: 4 / 3;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden;
background-color: #ececec;
}
/* Фото заполняет контейнер без искажений (было object-fit:fill).
Высокая специфичность (a.fancy-img.gallery-item ...) — чтобы перебить
правило IMG-1b `.page-content a.fancy-img img {width:80%}` (спец. 0,2,2). */
.gallery-item__picture img,
.page-content a.fancy-img.gallery-item .gallery-item__picture img,
.ai-service__content a.fancy-img.gallery-item .gallery-item__picture img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center;
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
transition: transform var(--transition-base);
}
.gallery-item:hover .gallery-item__picture img {
transform: scale(1.06);
}
.gallery-item:hover .gallery-item__picture {
border: none !important;
}
/* Иконка лупы поверх фото */
.gallery-item__picture i {
z-index: 2;
right: 8px;
bottom: 8px;
color: var(--color-white);
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Подпись под фото */
.gallery-item__title {
height: auto !important;
min-height: 40px;
padding: 10px 12px 12px;
font-family: var(--font-semibold);
font-size: 13px;
line-height: 1.35;
color: var(--color-text);
text-align: left;
display: flex;
align-items: flex-start;
flex: 1 0 auto;
}
.gallery-item:hover .gallery-item__title {
color: var(--color-primary);
text-decoration: none !important;
}
/* Ряд — flex-wrap, чтобы колонки в одной строке имели равную высоту */
.page-content .row:has(.gallery-item),
.ai-service__content .row:has(.gallery-item) {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
/* Колонка — flex-блок, карточка растягивается на всю высоту */
.page-content .row > [class*="col-"]:has(.gallery-item),
.ai-service__content .row > [class*="col-"]:has(.gallery-item) {
margin-bottom: 24px;
display: flex;
align-items: stretch;
}
/* Карточка тянется на всю высоту колонки.
display:flex с высокой специфичностью — перебивает
IMG-1b `.page-content a.fancy-img {display:block!important}` (спец. 0,2,1). */
.page-content a.fancy-img.gallery-item,
.ai-service__content a.fancy-img.gallery-item {
display: flex !important;
flex-direction: column;
height: 100%;
width: 100% !important;
}
/* На мобильных — квадратные плитки */
@media (max-width: 480px) {
.gallery-item__picture { aspect-ratio: 1 / 1; }
}
/* ============================================================
CONTACT-2: СТРАНИЦА КОНТАКТОВ
============================================================ */
.contact-page {
padding-bottom: var(--spacing-lg);
}
/* Сетка контактных блоков — flex-wrap, чтобы колонки
в одной строке имели равную высоту (карточки не разъезжаются) */
.contact-grid {
margin-bottom: var(--spacing-lg);
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.contact-grid [class*="col-"] {
margin-bottom: var(--spacing-md);
display: flex;
}
.contact-grid [class*="col-"] > .contact-block {
width: 100%;
}
/* Контактный блок (карточка) */
.contact-block {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
height: 100%;
box-shadow: var(--shadow-card);
position: relative;
padding-top: calc(var(--spacing-md) + 10px);
}
.contact-block__icon {
position: absolute;
top: -18px;
left: var(--spacing-md);
width: 40px;
height: 40px;
background-color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 17px;
box-shadow: 0 3px 8px rgba(231, 120, 23, 0.35);
}
.contact-block__title {
font-size: var(--font-size-md);
font-family: var(--font-semibold);
margin-bottom: var(--spacing-sm);
color: var(--color-dark);
}
.contact-block__list {
list-style: none;
padding: 0;
margin: 0 0 var(--spacing-sm);
}
.contact-block__list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
}
.contact-block__list li:last-child {
border-bottom: none;
}
.contact-block__list li::before {
display: none;
}
.contact-block__list i {
color: var(--color-primary);
width: 16px;
margin-top: 3px;
flex-shrink: 0;
}
.contact-block__list a {
color: var(--color-text);
font-family: var(--font-semibold);
text-decoration: none;
}
.contact-block__list a:hover {
color: var(--color-primary);
}
.contact-block__note {
font-size: 12px;
color: var(--color-text-light);
display: block;
}
.contact-block__hours {
font-size: 13px;
color: var(--color-text-light);
margin: 0;
}
.contact-block__hours i {
color: var(--color-primary);
margin-right: 5px;
}
/* Социальные сети */
.contact-social {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-social li::before {
display: none;
}
.contact-social__link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 14px;
font-family: var(--font-semibold);
text-decoration: none;
transition: background-color var(--transition-fast), transform var(--transition-fast);
background-color: #f5f5f5;
color: var(--color-text);
}
.contact-social__link:hover {
transform: translateX(4px);
}
.contact-social__link--vk:hover { background-color: #e3eeff; color: #2787F5; }
.contact-social__link--tg:hover { background-color: #e0f4ff; color: #24A1DE; }
.contact-social__link--rt:hover { background-color: #ffe8e8; color: #cc1d00; }
.contact-social__link--mx:hover { background-color: #fff3e0; color: #e77817; }
.contact-social__link i {
font-size: 18px;
width: 20px;
text-align: center;
}
/* Карта */
.contact-map-wrap {
margin-top: var(--spacing-lg);
}
.contact-map-title {
font-size: var(--font-size-xl);
font-family: var(--font-semibold);
margin-bottom: var(--spacing-sm);
}
.contact-map {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border);
margin-bottom: var(--spacing-sm);
}
.contact-map iframe {
display: block;
}
.contact-map__hint {
font-size: 13px;
color: var(--color-text-light);
}
.contact-map__hint i {
color: var(--color-primary);
margin-right: 5px;
}
.contact-map__note {
font-size: 13px;
color: var(--color-text-light);
font-style: italic;
margin-top: 4px;
}
/* Адаптив контактов */
@media (max-width: 767px) {
.contact-block__icon {
position: static;
margin-bottom: var(--spacing-xs);
width: 36px;
height: 36px;
font-size: 15px;
}
.contact-block {
padding-top: var(--spacing-md);
}
}
/* ============================================================
ADD-1: УНИФИКАЦИЯ ЗАГОЛОВКОВ H1 (включая страницу контактов)
============================================================ */
.page-content h1,
.contact-page h1 {
font-size: var(--font-size-h1);
font-family: var(--font-bold);
border-bottom: 2px solid var(--color-primary);
padding-bottom: var(--spacing-sm);
margin-bottom: var(--spacing-md);
text-transform: uppercase;
}
/* ============================================================
ADD-2: ЕДИНЫЙ СТИЛЬ ВНУТРЕННИХ ЗАГОЛОВКОВ H2
============================================================ */
.page-content h2 {
padding-left: 12px;
border-left: 3px solid var(--color-primary);
}
/* ============================================================
ADD-3: СТИЛЬ ДЛЯ ТАБЛИЦ В КОНТЕНТЕ (без класса iksweb)
============================================================ */
.page-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-md);
}
.page-content table th {
background-color: var(--color-dark-2);
color: var(--color-white);
padding: 10px 12px;
text-align: left;
font-family: var(--font-semibold);
}
.page-content table td {
padding: 9px 12px;
border-bottom: 1px solid var(--color-border);
min-width: unset;
text-align: left;
}
.page-content table tr:nth-child(even) td {
background-color: #f8f8f8;
}
/* ============================================================
ADD-4: ЕДИНЫЙ СТИЛЬ СЕКЦИИ «ОТПРАВИТЬ ЗАЯВКУ»
============================================================ */
.page-content .section-form {
margin-top: var(--spacing-lg);
padding: var(--spacing-md);
background-color: var(--color-bg);
border-left: 4px solid var(--color-primary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.page-content .section-form h2 {
border-left: none;
padding-left: 0;
margin-top: 0;
}