/* ================================================================ LUIDOR-СЕРВИС — DESIGN SYSTEM / design-system.css ================================================================ Подключать ПЕРВЫМ в , до всех остальных стилей: Или через Bitrix Asset в header.php / init.php: \Bitrix\Main\Page\Asset::getInstance() ->addCss(SITE_TEMPLATE_PATH . '/css/design-system.css'); ================================================================ СОДЕРЖАНИЕ ────────────────────────────────────────────────────────────── 1. COLOUR PALETTE — фирменные цвета 2. SHADOW TOKENS — все тени проекта 3. BORDER-RADIUS — скругления 4. SPACING — отступы секций, футеров, слайдеров 5. TYPOGRAPHY — размеры и веса шрифтов 6. SWIPER NAV BUTTONS — стрелки-карусели (единый стиль) 7. SWIPER PAGINATION — точки пагинации 8. CARD BASE — базовые стили карточек 9. HOVER EFFECTS — параметры hover-анимаций 10. LAYOUT — контейнер и секции главной 11. BUTTON — синяя CTA — стиль кнопки .btn-primary ================================================================ */ /* ================================================================ 1. COLOUR PALETTE ================================================================ */ :root { /* ── Фирменный синий ── */ --ls-color-primary: #0179b9; /* основной акцент, ссылки, кнопки */ --ls-color-primary-hover: #015d91; /* hover на кнопках */ --ls-color-primary-light: #dbeafe; /* фон badge/метки */ --ls-color-primary-overlay: rgba(1, 121, 185, 0.08); /* hover-оверлей карточки сертификата */ --ls-color-primary-border: rgba(1, 121, 185, 0.20); /* рамка карточки при hover */ /* ── Текстовые цвета ── */ --ls-color-text-head: #0c1a28; /* H1, H2, крупные заголовки */ --ls-color-text-body: #1b2530; /* основной текст страницы */ --ls-color-text-dark: #2d3748; /* название авто в карточке галереи */ --ls-color-text-muted: #4a5568; /* SEO-текст, описания */ --ls-color-text-subtle: #5f6b7a; /* второстепенный текст (ls-cert-card__text) */ --ls-color-text-meta: #6b7a8d; /* подписи, subtitle таблицы сравнения */ /* ── Фоны ── */ --ls-color-bg-page: #f0f4f8; /* фон страницы (если нужен) */ --ls-color-bg-section: #f8f9fb; /* фон SEO-блока, подсекций */ --ls-color-bg-card: #ffffff; /* фон любой карточки */ --ls-color-bg-card-media: #f7f9fb; /* фон зоны изображения (галерея) */ --ls-color-bg-card-media-alt: #f5f7fa; /* фон зоны изображения (сертификаты) */ --ls-color-bg-nav-btn: rgba(255, 255, 255, 0.92); /* фон стрелки навигации */ --ls-color-bg-nav-btn-solid: #ffffff; /* фон стрелки (отзывы / услуги — без прозрачности) */ /* ── Разделители / рамки ── */ --ls-color-border-card: rgba(15, 23, 42, 0.06); /* рамка карточки галереи */ --ls-color-border-body: #f0f4f8; /* border-top тела карточки (галерея) */ --ls-color-border-body-dark: #d0d8e4; /* border-top тела карточки (сертификаты) */ --ls-color-border-modal: rgba(255, 255, 255, 0.20); /* ── Оверлей (glass-морфизм, сертификаты) ── */ --ls-color-overlay-glass: rgba(255, 255, 255, 0.12); --ls-color-overlay-dark: rgba(0, 0, 0, 0.72); /* ── Pagination bullets ── */ --ls-color-bullet: #c0cad6; --ls-color-bullet-active: #0179b9; /* = --ls-color-primary */ } /* ================================================================ 2. SHADOW TOKENS ================================================================ Соглашение об именовании: --ls-shadow-{компонент}-{состояние} Базовый цвет теней: rgba(15, 23, 42, …) Для блока Отзывов используются rgba(0,0,0,…) — они помечены комментарием "* унифицировать при рефакторинге". ================================================================ */ :root { /* ── Стрелки навигации (Swiper) ── */ --ls-shadow-nav-default: 0 8px 20px rgba(15, 23, 42, 0.16); --ls-shadow-nav-hover: 0 12px 24px rgba(15, 23, 42, 0.20); /* ── Стрелки блока Отзывов (текущий код — унифицировать) ── */ --ls-shadow-nav-reviews: 0 6px 18px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08); /* * */ --ls-shadow-nav-reviews-hover:0 10px 24px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12); /* * */ /* ── Карточки ── */ --ls-shadow-card-default: 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04); /* галерея */ --ls-shadow-card-hover: 0 4px 16px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05); /* галерея hover */ --ls-shadow-card-cert-default:0 2px 12px rgba(15, 23, 42, 0.08); /* сертификаты */ --ls-shadow-card-cert-hover: 0 10px 28px rgba(15, 23, 42, 0.15);/* сертификаты hover */ /* ── Слайдер-обёртка (лёгкая тень контейнера) ── */ --ls-shadow-wrap: 0 2px 12px rgba(15, 23, 42, 0.09); /* ── Модалка ── */ --ls-shadow-modal-img: 0 24px 64px rgba(0, 0, 0, 0.45); --ls-shadow-modal-close-hover:0 6px 18px rgba(0, 0, 0, 0.35); /* ── SEO-блок ── */ --ls-shadow-seo-wrap: 0 2px 12px rgba(15, 23, 42, 0.09); } /* ================================================================ 3. BORDER-RADIUS ================================================================ */ :root { --ls-radius-card: 12px; /* карточки: галерея, сертификаты */ --ls-radius-card-sm: 8px; /* карточки на мобиле, модалка */ --ls-radius-nav-btn: 50%; /* стрелки навигации (круг) */ --ls-radius-section: 16px; /* SEO-блок, крупные секции */ --ls-radius-badge: 20px; /* бейджи */ --ls-radius-hover-content: 12px; /* glass-оверлей галереи */ --ls-radius-hover-arrow: 50%; /* круглая стрелка внутри оверлея */ --ls-radius-modal: 12px; /* модалка сертификата */ --ls-radius-zoom-btn: 50%; /* кнопка лупы */ --ls-radius-close-btn: 50%; /* кнопка закрытия модалки */ } /* ================================================================ 4. SPACING ================================================================ Три группы: A) Вертикальные отступы между секциями главной B) Внутренние отступы слайдера (margin-top до .swiper) C) Отступы до кнопок-футеров ================================================================ */ :root { /* A — Секции главной (ls-home__section + ls-home__section) */ --ls-section-gap-desktop: 80px; --ls-section-gap-tablet: 60px; /* ≤991px */ --ls-section-gap-mobile: 40px; /* ≤767px */ --ls-section-pb-desktop: 80px; /* padding-bottom .ls-home */ --ls-section-pb-mobile: 48px; /* B — Отступ до слайдера (.ls-XXX__slider-wrap) */ --ls-slider-mt-desktop: 24px; --ls-slider-mt-mobile: 18px; /* ≤767px */ /* C — Отступ до CTA-кнопки (.ls-XXX__footer) */ --ls-footer-mt-desktop: 32px; --ls-footer-mt-mobile: 24px; /* ≤767px */ /* D — Отступ до пагинации */ --ls-pagination-mt: 20px; /* E — Блок сертификатов: внутренние отступы заголовков */ --ls-certs-block-head-mb: 14px; /* .ls-trust__block-head margin-bottom */ --ls-certs-trust-text-mb: 28px; /* .ls-trust-text margin-bottom */ --ls-certs-trust-text-mb-mob: 20px; /* ≤767px */ --ls-certs-title-pl: 14px; /* padding-left заголовка с синей полоской */ --ls-certs-title-pl-mob: 10px; /* ≤767px */ /* F — Контейнер страницы */ --ls-container-max-width: 1128px; --ls-container-px: 20px; /* G — SEO-блок */ --ls-seo-px-desktop: 56px; --ls-seo-py-desktop: 48px; --ls-seo-px-mobile: 20px; --ls-seo-py-mobile: 28px; } /* ================================================================ 5. TYPOGRAPHY ================================================================ */ :root { /* ── Заголовки блоков ── */ --ls-font-h2-desktop: inherit; /* .title-section — задаётся глобально */ --ls-font-block-title: 22px; /* .ls-trust__block-title desktop */ --ls-font-block-title-tablet: 22px; /* ≤991px */ --ls-font-block-title-mobile: 20px; /* ≤767px */ --ls-font-block-subtitle: 16px; /* .ls-trust__subtitle */ /* ── Заголовки карточек (сертификаты) ── */ --ls-font-cert-title: 15px; --ls-font-cert-title-mobile: 14px; /* ≤767px */ --ls-font-cert-text: 13px; --ls-font-cert-text-mobile: 12px; /* ≤767px */ --ls-font-weight-cert-title: 700; /* ── Метаданные карточки (галерея) ── */ --ls-font-gallery-service: 0.6875rem; /* 11px — тип работы */ --ls-font-gallery-car: 0.8125rem; /* 13px — марка авто */ --ls-font-weight-gallery-svc: 700; --ls-font-weight-gallery-car: 500; --ls-font-ls-gallery-ls: 0.06em; /* letter-spacing метки */ /* ── Оверлей галереи ── */ --ls-font-hover-title: 15px; --ls-font-hover-action: 14px; --ls-font-weight-hover: 500; /* ── SEO-блок ── */ --ls-font-seo-title: 22px; --ls-font-seo-title-mobile: 18px; --ls-font-seo-body: 15px; --ls-font-weight-seo-title: 700; /* ── Общие веса ── */ --ls-fw-regular: 400; --ls-fw-medium: 500; --ls-fw-semibold: 600; --ls-fw-bold: 700; /* ── Line-height ── */ --ls-lh-tight: 1.2; --ls-lh-card: 1.3; --ls-lh-body: 1.7; } /* ================================================================ 6. SWIPER NAV BUTTONS — единый стиль стрелок для всех блоков ================================================================ Использование: Добавить класс .ls-nav-btn к ================================================================ */ /* ── Переменные кнопок ── */ :root { --ls-nav-size: 52px; --ls-nav-icon-size: 22px; --ls-nav-icon-size-sm: 20px; /* меньший вариант (сертификаты) */ --ls-nav-bg: rgba(255, 255, 255, 0.92); --ls-nav-color: #1b2530; --ls-nav-shadow: var(--ls-shadow-nav-default); --ls-nav-shadow-hover: var(--ls-shadow-nav-hover); --ls-nav-scale-hover: scale(1.05); --ls-nav-offset: 12px; /* left/right от края обёртки */ --ls-nav-transition: opacity .25s ease, visibility .25s ease, transform .25s ease, box-shadow .25s ease; } /* ── Базовый стиль ── */ .ls-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; width: var(--ls-nav-size); height: var(--ls-nav-size); border: none; border-radius: var(--ls-radius-nav-btn); background: var(--ls-nav-bg); color: var(--ls-nav-color); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; /* скрыта по умолчанию */ opacity: 0; visibility: hidden; box-shadow: var(--ls-nav-shadow); transition: var(--ls-nav-transition); } /* Появление при наведении на обёртку-слайдера */ .ls-nav-btn-wrap:hover .ls-nav-btn { opacity: 1; visibility: visible; } /* Hover самой кнопки */ .ls-nav-btn:hover { transform: translateY(-50%) var(--ls-nav-scale-hover); box-shadow: var(--ls-nav-shadow-hover); } /* Позиции */ .ls-nav-btn--prev { left: var(--ls-nav-offset); } .ls-nav-btn--next { right: var(--ls-nav-offset); } /* Иконка */ .ls-nav-btn svg { width: var(--ls-nav-icon-size); height: var(--ls-nav-icon-size); pointer-events: none; flex-shrink: 0; } /* Disabled */ .ls-nav-btn.swiper-button-disabled { opacity: 0.35 !important; pointer-events: none; } /* Мобиле */ @media (max-width: 767px) { .ls-nav-btn { display: none; } } /* ── Маппинг существующих классов на единый стиль ── */ /* Галерея */ .ls-gallery__nav { --ls-nav-bg: rgba(255, 255, 255, 0.92); --ls-nav-color: #1b2530; --ls-nav-icon-size: 22px; /* используем стандарт */ } /* Сертификаты */ .ls-trust .ls-certs__nav { --ls-nav-bg: rgba(255, 255, 255, 0.92); --ls-nav-color: #1b2530; --ls-nav-icon-size: var(--ls-nav-icon-size-sm); /* 20px — чуть меньше */ } /* Отзывы — приводим к единому стандарту */ .ls-reviews-home__btn-prev, .ls-reviews-home__btn-next { --ls-nav-bg: rgba(255, 255, 255, 0.92); /* было #ffffff */ --ls-nav-color: #1b2530; /* было #1f2f3d */ --ls-nav-shadow: var(--ls-shadow-nav-default); --ls-nav-shadow-hover:var(--ls-shadow-nav-hover); --ls-nav-scale-hover: scale(1.05); /* было 1.06 */ --ls-nav-icon-size: 22px; } /* Услуги */ .ls-services__nav { --ls-nav-bg: rgba(255, 255, 255, 0.92); /* было #ffffff */ --ls-nav-color: #1b2530; /* было #1f2f3d */ --ls-nav-shadow: var(--ls-shadow-nav-default); --ls-nav-shadow-hover:var(--ls-shadow-nav-hover); --ls-nav-icon-size: 22px; } /* ================================================================ 7. SWIPER PAGINATION — точки (bullets) ================================================================ */ :root { --ls-bullet-size: 8px; --ls-bullet-color: var(--ls-color-bullet); /* #c0cad6 */ --ls-bullet-color-active: var(--ls-color-bullet-active); /* #0179b9 */ --ls-bullet-scale-active: 1.3; --ls-bullet-transition: background-color .2s, transform .2s; } /* Базовый стиль — применять через обёртку конкретного блока */ .ls-pagination .swiper-pagination-bullet { width: var(--ls-bullet-size); height: var(--ls-bullet-size); background: var(--ls-bullet-color); opacity: 1; transition: var(--ls-bullet-transition); } .ls-pagination .swiper-pagination-bullet-active { background: var(--ls-bullet-color-active); transform: scale(var(--ls-bullet-scale-active)); } /* Конкретный маппинг */ .ls-gallery__pagination .swiper-pagination-bullet { background: var(--ls-bullet-color); } .ls-gallery__pagination .swiper-pagination-bullet-active { background: var(--ls-bullet-color-active); transform: scale(var(--ls-bullet-scale-active)); } /* ================================================================ 8. CARD BASE — карточки слайдеров ================================================================ */ :root { /* Галерея */ --ls-card-gallery-shadow: var(--ls-shadow-card-default); --ls-card-gallery-shadow-hover: var(--ls-shadow-card-hover); --ls-card-gallery-radius: var(--ls-radius-card); --ls-card-gallery-border: 1px solid var(--ls-color-border-card); --ls-card-gallery-border-hover: 1px solid var(--ls-color-primary-border); --ls-card-gallery-lift: translateY(-3px); --ls-card-gallery-body-pad: 12px 16px 14px; --ls-card-gallery-body-pt: 1px solid var(--ls-color-border-body); /* Сертификаты */ --ls-card-cert-shadow: var(--ls-shadow-card-cert-default); --ls-card-cert-shadow-hover: var(--ls-shadow-card-cert-hover); --ls-card-cert-radius: var(--ls-radius-card); --ls-card-cert-lift: translateY(-4px); --ls-card-cert-body-pad: 12px 14px; --ls-card-cert-body-pt: 1px solid var(--ls-color-border-body-dark); /* Общий transition */ --ls-card-transition: transform .25s ease, box-shadow .25s ease; } /* ================================================================ 9. HOVER EFFECTS ================================================================ */ :root { /* ── Карточка галереи ── */ --ls-hover-img-scale: scale(1.04); --ls-hover-img-brightness: brightness(0.70); --ls-hover-content-translate: translateY(10px); /* начальная позиция оверлея */ --ls-hover-overlay-opacity: 1; --ls-hover-arrow-translate: translateX(2px); /* ── Карточка сертификата ── */ --ls-hover-cert-img-scale: scale(1.03); --ls-hover-cert-img-opacity: 0.88; /* ── Zoom-кнопка сертификата ── */ --ls-hover-zoom-scale: scale(0.7); /* начальная */ --ls-hover-zoom-scale-in: scale(1); /* при hover */ --ls-hover-zoom-opacity: 0; --ls-hover-zoom-opacity-in: 1; --ls-hover-zoom-bg: rgba(1, 121, 185, 0.90); /* ── Анимации ── */ --ls-transition-fast: .20s ease; --ls-transition-base: .25s ease; --ls-transition-medium: .28s ease; --ls-transition-slow: .35s ease; --ls-transition-img: .45s ease; /* ── Glass-оверлей галереи ── */ --ls-glass-bg: rgba(255, 255, 255, 0.12); --ls-glass-border: rgba(255, 255, 255, 0.25); --ls-glass-blur: saturate(180%) blur(20px); --ls-glass-pad: 14px 16px; --ls-glass-radius: var(--ls-radius-hover-content); /* ── Hover-стрелка внутри glass-оверлея ── */ --ls-hover-arrow-bg: rgba(255, 255, 255, 0.14); --ls-hover-arrow-bg-in: rgba(255, 255, 255, 0.22); --ls-hover-arrow-border: rgba(255, 255, 255, 0.24); --ls-hover-arrow-border-in: rgba(255, 255, 255, 0.36); } /* ================================================================ 10. LAYOUT — контейнер и секции главной (.ls-home) ================================================================ */ /* ── Box-sizing ── */ .ls-home, .ls-home * { box-sizing: border-box; } /* ── Контейнер ── */ .ls-home__container { max-width: var(--ls-container-max-width); margin: 0 auto; padding: 0 var(--ls-container-px); width: 100%; } /* ── Вертикальные отступы между секциями ── */ .ls-home__section + .ls-home__section { margin-top: var(--ls-section-gap-desktop); } @media (max-width: 991px) { .ls-home__section + .ls-home__section { margin-top: var(--ls-section-gap-tablet); } } @media (max-width: 767px) { .ls-home__section + .ls-home__section { margin-top: var(--ls-section-gap-mobile); } } /* ── Нижний отступ главной ── */ .ls-home { padding-bottom: var(--ls-section-pb-desktop); } @media (max-width: 767px) { .ls-home { padding-bottom: var(--ls-section-pb-mobile); } } /* ── Сброс внешних стилей Bitrix для секций ── */ .ls-home > .ls-home__section { margin: 0; padding: 0; } .ls-home .section-def { margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* ── Слайдер-обёртка (единый margin-top до swiper) ── */ .ls-gallery__slider-wrap, .ls-certs__slider-wrap, .ls-services__slider-wrap { margin-top: var(--ls-slider-mt-desktop); } @media (max-width: 767px) { .ls-gallery__slider-wrap, .ls-certs__slider-wrap, .ls-services__slider-wrap { margin-top: var(--ls-slider-mt-mobile); } } /* ── Футеры: отступ до синих CTA-кнопок ── */ .ls-services__footer, .ls-gallery__footer, .ls-offers__footer, .ls-news__footer, .ls-popular__footer, .ls-products__footer, .ls-certs__footer { margin-top: var(--ls-footer-mt-desktop); } @media (max-width: 767px) { .ls-services__footer, .ls-gallery__footer, .ls-offers__footer, .ls-news__footer, .ls-popular__footer, .ls-products__footer, .ls-certs__footer { margin-top: var(--ls-footer-mt-mobile); } } /* ================================================================ 11. BUTTON — синяя CTA (.btn-primary) ================================================================ */ :root { --ls-btn-primary-bg: var(--ls-color-primary); --ls-btn-primary-bg-hover: var(--ls-color-primary-hover); --ls-btn-primary-color: #ffffff; --ls-btn-primary-radius: 8px; --ls-btn-primary-px: 32px; --ls-btn-primary-py: 14px; --ls-btn-primary-font-size: 15px; --ls-btn-primary-font-weight: 600; --ls-btn-primary-shadow: 0 4px 14px rgba(1, 121, 185, 0.30); --ls-btn-primary-shadow-hover:0 6px 20px rgba(1, 121, 185, 0.45); --ls-btn-primary-transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease; } /* ================================================================ БЫСТРАЯ СПРАВКА — ГДЕ ЧТО МЕНЯТЬ ================================================================ Задача Переменная ──────────────────────────────────────────────────────────────── Основной синий цвет --ls-color-primary Фон стрелок навигации --ls-nav-bg Тень стрелок (обычное) --ls-shadow-nav-default Тень стрелок (hover) --ls-shadow-nav-hover Тень карточек галереи --ls-shadow-card-default/hover Тень карточек сертификатов --ls-shadow-card-cert-default/hover Скругление карточек --ls-radius-card Отступ между секциями (desktop) --ls-section-gap-desktop Отступ до кнопки-футера --ls-footer-mt-desktop Отступ до Swiper --ls-slider-mt-desktop Размер стрелки --ls-nav-size Скорость анимации базовая --ls-transition-base ================================================================ */