/* ========================================================================== Модулинк — магазин строительных материалов Единая таблица стилей для всех страниц Порядок секций: 01 База · 02 Общее · 03-05 Шапка · 06-08 Общие блоки 09 Главная · 10 Каталог · 11 Товар · 12 Статьи · 13 Статья 14 О компании · 15 Подвал · 16 Адаптив Классы страниц на : page-home, page-catalog, page-product, page-articles, page-article, page-about ========================================================================== */ /* ========================================================================== 01 БАЗА: сброс, переменные, типографика ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #2F80ED; --blue-light: #56A3FF; --dark: #333333; --muted: #6B7280; --bg: #ffffff; --bg-alt: #F5F7FA; --border: #E5E9F0; --radius: 8px; --shadow: 0 2px 12px rgba(47,128,237,0.08); --shadow-hover: 0 8px 24px rgba(47,128,237,0.13); } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; color: var(--dark); background: var(--bg); font-size: 14px; line-height: 1.5; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; } img { display: block; max-width: 100%; } /* ========================================================================== 02 ОБЩЕЕ: контейнеры и секции ========================================================================== */ .section { padding: 48px 0; } .section.alt { background: var(--bg-alt); } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .section-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; } .section-title { font-size: 22px; font-weight: 800; color: var(--dark); } .section-link { font-size: 13px; font-weight: 600; color: var(--blue); margin-left: auto; } .section-link:hover { color: var(--blue-light); } /* ========================================================================== 03 ШАПКА: верхняя полоса ========================================================================== */ .topbar { background: var(--bg-alt); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 24px; font-size: 12.5px; color: var(--muted); } .topbar-hours { display: flex; align-items: center; gap: 6px; } .topbar-hours svg { opacity: .6; } .topbar-phones { display: flex; gap: 16px; margin-left: 8px; } .topbar-phones a { color: var(--dark); font-weight: 600; font-size: 12.5px; } .topbar-phones a:hover { color: var(--blue); } .topbar-email a { color: var(--muted); } .topbar-email a:hover { color: var(--blue); } .topbar-spacer { flex: 1; } .btn-callback-top { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 600; transition: all .2s; } .btn-callback-top:hover { background: var(--blue); color: #fff; } /* ========================================================================== 04 ШАПКА: основная строка ========================================================================== */ .main-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .main-header-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; } .logo-svg { flex-shrink: 0; } .logo-svg img { max-height: 52px; width: auto; max-width: 152px; object-fit: contain; } .btn-catalog { display: flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; border-radius: var(--radius); padding: 10px 18px; font-weight: 700; font-size: 13px; white-space: nowrap; transition: background .2s; } .btn-catalog:hover { background: var(--blue-light); } .btn-catalog svg { flex-shrink: 0; } .search-wrap { flex: 1; position: relative; } .search-wrap input { width: 100%; border: 2px solid var(--border); border-radius: var(--radius); padding: 10px 48px 10px 16px; font-family: inherit; font-size: 13.5px; outline: none; color: var(--dark); transition: border-color .2s; } .search-wrap input:focus { border-color: var(--blue); } .search-wrap input::placeholder { color: var(--muted); } .search-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--blue); border: none; border-radius: 6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .search-btn:hover { background: var(--blue-light); } .header-icons { display: flex; align-items: center; gap: 4px; } .hicon { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; transition: background .15s; position: relative; color: var(--muted); font-size: 10.5px; } .hicon:hover { background: var(--bg-alt); color: var(--blue); } .hicon svg { width: 22px; height: 22px; } .cart-badge { position: absolute; top: 2px; right: 6px; background: var(--blue); color: #fff; border-radius: 10px; font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .bottom-nav a:hover, .bottom-nav a.active { color: var(--blue); border-color: var(--blue); } /* ========================================================================== 05 ШАПКА: нижнее меню ========================================================================== */ .bottom-nav { background: #fff; border-bottom: 2px solid var(--border); } .bottom-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; } .bottom-nav a { display: block; padding: 11px 14px; font-size: 12.5px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .15s, border-color .15s; } .bottom-nav a:hover { color: var(--blue); border-color: var(--blue); } /* ========================================================================== 06 ОБЩЕЕ: хлебные крошки и заголовок страницы ========================================================================== */ .page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 12px 0 24px; } .page-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .breadcrumbs a { color: var(--muted); transition: color .15s; } .breadcrumbs a:hover { color: var(--blue); } .breadcrumbs span { color: #bcc4d0; } .page-title { font-size: 28px; font-weight: 800; color: var(--dark); } .page-count { font-size: 14px; color: var(--muted); font-weight: 500; margin-top: 4px; } .breadcrumb-bar { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 12px 0 20px; } .breadcrumb-bar .inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .breadcrumbs span.sep { color: #bcc4d0; } .breadcrumbs span.cur { color: var(--dark); font-weight: 500; } .breadcrumbs .sep { color: #bcc4d0; } .page-h1 { font-size: 28px; font-weight: 800; color: var(--dark); margin-bottom: 6px; } .page-subtitle { font-size: 14px; color: var(--muted); font-weight: 500; } .breadcrumbs .cur { color: var(--dark); font-weight: 500; } .meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; } .meta-row span { display: flex; align-items: center; gap: 4px; } /* Отступы крошек по страницам */ .page-catalog .breadcrumbs { margin-bottom: 10px; } .page-articles .breadcrumbs { margin-bottom: 12px; } .page-article .breadcrumbs { margin-bottom: 14px; } /* Хиро каталога чуть плотнее */ .page-catalog .page-hero { padding: 20px 0; } /* Заголовок H1 по страницам */ .page-article .page-h1 { font-size: 26px; line-height: 1.3; margin-bottom: 14px; max-width: 860px; text-wrap: pretty; } .page-about .page-h1 { margin-top: 12px; margin-bottom: 0; } /* ========================================================================== 07 ОБЩЕЕ: карточка товара ========================================================================== */ .product-track-wrap { position: relative; } .product-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .product-track::-webkit-scrollbar { display: none; } .product-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; position: relative; } .product-card:hover { box-shadow: 0 8px 24px rgba(47,128,237,0.12); transform: translateY(-2px); } .product-img { height: 180px; background: var(--bg-alt); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #eef2f7 0px, #eef2f7 8px, #e4e9f0 8px, #e4e9f0 16px); } .product-img-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: #9aa5b4; text-align: center; padding: 8px; font-family: 'Courier New', monospace; } .discount-badge { position: absolute; top: 10px; left: 10px; background: #EF4444; color: #fff; border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 700; } .label-badges { position: absolute; top: 10px; right: 36px; display: flex; gap: 4px; flex-direction: column; align-items: flex-end; } .badge { border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 700; text-align: center; } .badge-hit { background: var(--blue); color: #fff; } .badge-sale { background: #F59E0B; color: #fff; } .badge-new { background: #10B981; color: #fff; } .fav-btn { position: absolute; top: 8px; right: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; z-index: 2; } .fav-btn:hover { border-color: #EF4444; color: #EF4444; } .product-info { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 7px; } .product-name { font-size: 12.5px; font-weight: 600; color: var(--dark); line-height: 1.4; } .product-stars { color: #F59E0B; font-size: 12px; display: flex; gap: 1px; } .product-prices { display: flex; align-items: baseline; gap: 8px; } .price-new { font-size: 20px; font-weight: 800; color: var(--dark); } .price-old { font-size: 12.5px; color: var(--muted); text-decoration: line-through; } .btn-cart { flex: 1; background: var(--blue); color: #fff; border-radius: 6px; padding: 9px 10px; font-size: 12px; font-weight: 700; text-align: center; transition: background .2s; } .btn-cart:hover { background: var(--blue-light); } .scroll-btns { display: flex; gap: 8px; margin-left: auto; } .scroll-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all .15s; } .scroll-btn:hover { border-color: var(--blue); color: var(--blue); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .product-img-bg { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eef2f7 0px, #eef2f7 8px, #e4e9f0 8px, #e4e9f0 16px); } .product-meta { display: flex; align-items: center; gap: 8px; } .product-rating-val { font-size: 12px; font-weight: 700; color: var(--dark); } .product-reviews { font-size: 11.5px; color: var(--muted); } .product-article { font-size: 11px; color: var(--muted); } .stock-indicator { display: flex; align-items: center; gap: 6px; } .stock-dot { width: 7px; height: 7px; border-radius: 50%; background: #10B981; flex-shrink: 0; } .stock-text { font-size: 11.5px; color: #10B981; font-weight: 600; } .product-actions { display: flex; gap: 8px; margin-top: auto; } .btn-one-click { flex: 1; background: transparent; border: 1.5px solid var(--blue); color: var(--blue); border-radius: 6px; padding: 9px 10px; font-size: 11px; font-weight: 700; text-align: center; transition: all .2s; white-space: nowrap; } .btn-one-click:hover { background: #EBF3FF; } /* Главная: карточка в горизонтальном слайдере — компактнее */ .page-home .product-card { flex: 0 0 210px; scroll-snap-align: start; } .page-home .product-img { height: 160px; } .page-home .product-img-label { font-size: 11px; } .page-home .discount-badge { padding: 2px 7px; } .page-home .label-badges { right: 10px; align-items: stretch; } .page-home .badge { padding: 2px 7px; } .page-home .fav-btn { top: auto; bottom: 8px; width: 30px; height: 30px; } .page-home .product-info { padding: 12px; gap: 6px; } .page-home .product-name { font-size: 12px; line-height: 1.35; } .page-home .product-stars { font-size: 13px; gap: 2px; } .page-home .price-new { font-size: 17px; } .page-home .price-old { font-size: 12px; } .page-home .btn-cart { flex: 0 1 auto; width: 100%; margin-top: auto; padding: 9px; } /* ========================================================================== 08 ОБЩЕЕ: пагинация ========================================================================== */ .pagination-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; } .pagination { display: flex; align-items: center; gap: 6px; } .page-btn { width: 38px; height: 38px; border-radius: var(--radius); border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--dark); transition: all .15s; } .page-btn:hover { border-color: var(--blue); color: var(--blue); } .page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; } .page-btn.arrow { color: var(--muted); } .page-btn.arrow:hover { color: var(--blue); } .page-ellipsis { width: 38px; text-align: center; color: var(--muted); font-size: 14px; } .per-page { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .per-page select { border: 1.5px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 13px; outline: none; cursor: pointer; } .per-page select:focus { border-color: var(--blue); } /* Список статей: пагинация в одну строку, без блока «на странице» */ .page-articles .pagination-wrap { flex-direction: row; justify-content: center; gap: 0; padding: 12px 0; } /* ========================================================================== 09 ГЛАВНАЯ ========================================================================== */ .hero { max-width: 1280px; margin: 28px auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 300px; gap: 16px; } .hero-slider { position: relative; border-radius: 12px; overflow: hidden; min-height: 380px; } .slide { display: none; width: 100%; height: 380px; border-radius: 12px; position: relative; overflow: hidden; align-items: center; } .slide.active { display: flex; } .slide-1 { background: linear-gradient(125deg, #1a5fc8 0%, #2F80ED 50%, #56A3FF 100%); } .slide-2 { background: linear-gradient(125deg, #1e2d40 0%, #2c4a6e 50%, #2F80ED 100%); } .slide-content { padding: 48px 52px; z-index: 2; position: relative; } .slide-tag { display: inline-block; background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px; padding: 4px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .5px; margin-bottom: 16px; text-transform: uppercase; } .slide-title { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 24px; max-width: 420px; text-wrap: pretty; } .btn-hero { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--blue); border-radius: 8px; padding: 12px 24px; font-weight: 700; font-size: 13.5px; transition: all .2s; } .btn-hero:hover { background: var(--blue-light); color: #fff; } .slide-deco { position: absolute; right: -20px; bottom: -20px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.06); } .slide-deco2 { position: absolute; right: 60px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.04); } .slide-dots { position: absolute; bottom: 20px; left: 52px; display: flex; gap: 8px; } .slide-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.4); cursor: pointer; transition: all .2s; border: none; } .slide-dot.active { width: 24px; background: #fff; } .slide-arrows { position: absolute; right: 20px; bottom: 14px; display: flex; gap: 8px; } .slide-arrow { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .slide-arrow:hover { background: rgba(255,255,255,0.4); } .hero-banners { display: flex; flex-direction: column; gap: 16px; } .hero-banner { flex: 1; border-radius: 12px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .hero-banner-1 { background: linear-gradient(135deg, #1e3a5f 0%, #2F80ED 100%); } .hero-banner-2 { background: linear-gradient(135deg, #1a2a1a 0%, #2d6a2d 100%); } .hero-banner-icon { position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .hero-banner p { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; text-wrap: pretty; } .hero-banner span { font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 6px; display: block; } .categories-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .cat-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; transition: all .2s; text-align: center; } .cat-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); } .cat-icon { width: 52px; height: 52px; background: var(--bg-alt); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s; } .cat-card:hover .cat-icon { background: #ddeeff; } .cat-icon svg { width: 26px; height: 26px; color: var(--blue); } .cat-card p { font-size: 11.5px; font-weight: 600; color: var(--dark); line-height: 1.3; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tag-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: 4px; } .tag { display: inline-block; padding: 6px 14px; border-radius: 20px; background: #fff; border: 1.5px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--dark); cursor: pointer; transition: all .15s; } .tag:hover { border-color: var(--blue); color: var(--blue); background: #f0f7ff; } .promo-banner { background: linear-gradient(100deg, #1a3d6e 0%, #2F80ED 60%, #56A3FF 100%); border-radius: 12px; padding: 28px 48px; display: flex; align-items: center; gap: 32px; color: #fff; } .promo-banner-icon { width: 64px; height: 64px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .promo-banner-text h2 { font-size: 22px; font-weight: 800; } .promo-banner-text p { font-size: 13.5px; color: rgba(255,255,255,0.8); margin-top: 4px; } .review-card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; } .review-stars { color: #F59E0B; font-size: 14px; display: flex; gap: 2px; } .review-product { display: flex; align-items: center; gap: 10px; } .review-thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--bg-alt); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .review-prod-name { font-size: 11.5px; font-weight: 600; color: var(--dark); line-height: 1.3; } .review-text { font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; } .review-meta { display: flex; justify-content: space-between; align-items: center; } .review-author { font-size: 12px; font-weight: 700; color: var(--dark); } .review-date { font-size: 11px; color: var(--muted); } .articles-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; } .article-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: box-shadow .2s, transform .2s; } .article-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .article-card.large { grid-row: span 2; } .article-img { height: 180px; background: repeating-linear-gradient(45deg, #e8edf5 0px, #e8edf5 8px, #dde3ef 8px, #dde3ef 16px); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #9aa5b4; font-family: monospace; padding: 16px; text-align: center; } .article-card.large .article-img { height: 260px; } .article-body { padding: 16px; } .article-cat { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; } .article-title { font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.4; text-wrap: pretty; } .article-date { font-size: 11.5px; color: var(--muted); margin-top: 8px; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .about-text h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; } .about-text p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; } .about-goals { margin: 16px 0; } .about-goal { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .about-goal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex-shrink: 0; } .about-goal p { color: var(--muted); margin: 0; } .about-map { border-radius: 12px; overflow: hidden; height: 340px; background: repeating-linear-gradient(45deg, #dde4ed 0px, #dde4ed 10px, #c8d3e0 10px, #c8d3e0 20px); display: flex; align-items: center; justify-content: center; position: relative; } .map-placeholder-text { font-size: 13px; font-weight: 600; color: #7a8fa6; font-family: monospace; text-align: center; } .map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; } .map-pin-circle { width: 32px; height: 32px; background: var(--blue); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 8px rgba(47,128,237,0.4); } .map-pin-inner { position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; background: #fff; border-radius: 50%; } /* ========================================================================== 10 КАТАЛОГ ========================================================================== */ .catalog-layout { max-width: 1280px; margin: 28px auto; padding: 0 24px; display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; } .filters-panel { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; position: sticky; top: 100px; } .filters-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); } .filters-title { font-size: 15px; font-weight: 800; } .filters-reset { font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; } .filters-reset:hover { color: var(--blue-light); } .filter-group { border-bottom: 1px solid var(--border); } .filter-group:last-of-type { border-bottom: none; } .filter-group-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; cursor: pointer; user-select: none; } .filter-group-title { font-size: 13px; font-weight: 700; color: var(--dark); } .filter-chevron { transition: transform .2s; color: var(--muted); } .filter-chevron.open { transform: rotate(180deg); } .filter-body { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 8px; } .filter-body.hidden { display: none; } .filter-search { width: 100%; border: 1.5px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 12px; outline: none; margin-bottom: 6px; } .filter-search:focus { border-color: var(--blue); } .filter-check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .filter-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; flex-shrink: 0; } .filter-check-label { font-size: 12.5px; color: var(--dark); flex: 1; } .filter-check-count { font-size: 11.5px; color: var(--muted); } .filter-more { font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; margin-top: 2px; } .filter-more:hover { color: var(--blue-light); } .price-range-wrap { display: flex; flex-direction: column; gap: 10px; } .price-inputs { display: flex; gap: 8px; align-items: center; } .price-input { flex: 1; border: 1.5px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 12px; outline: none; text-align: center; } .price-input:focus { border-color: var(--blue); } .price-dash { color: var(--muted); font-size: 12px; } .range-slider-wrap { position: relative; height: 20px; } .range-track { position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--border); border-radius: 2px; } .range-fill { position: absolute; top: 8px; height: 4px; background: var(--blue); border-radius: 2px; left: 10%; right: 40%; } .range-thumb { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid var(--blue); cursor: pointer; transform: translateX(-50%); box-shadow: 0 1px 4px rgba(47,128,237,0.3); } .range-thumb.left { left: 10%; } .range-thumb.right { left: 60%; } .color-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .color-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .swatch-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; transition: border-color .15s; } .color-swatch:hover .swatch-circle, .color-swatch.active .swatch-circle { border-color: var(--blue); } .swatch-label { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; } .btn-apply { width: 100%; background: var(--blue); color: #fff; border-radius: 0 0 var(--radius) var(--radius); padding: 14px; font-size: 13.5px; font-weight: 700; transition: background .2s; } .btn-apply:hover { background: var(--blue-light); } .products-area { display: flex; flex-direction: column; gap: 20px; } .products-topbar { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .active-filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-items: center; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; background: #EBF3FF; border: 1px solid #c3dcf9; color: var(--blue); border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; } .chip-remove { cursor: pointer; font-size: 14px; line-height: 1; opacity: .7; } .chip-remove:hover { opacity: 1; } .chip-reset { font-size: 12px; color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; } .chip-reset:hover { color: var(--blue); } .sort-select { border: 1.5px solid var(--border); border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 12.5px; color: var(--dark); outline: none; cursor: pointer; background: #fff; } .sort-select:focus { border-color: var(--blue); } .view-toggle { display: flex; gap: 4px; } .view-btn { width: 34px; height: 34px; border-radius: 6px; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all .15s; } .view-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; } .view-btn:not(.active):hover { border-color: var(--blue); color: var(--blue); } .products-list { display: none; flex-direction: column; gap: 12px; } .list-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 20px; transition: box-shadow .2s; } .list-card:hover { box-shadow: var(--shadow); } .list-img { width: 80px; height: 80px; border-radius: 6px; background: repeating-linear-gradient(45deg, #eef2f7 0px, #eef2f7 6px, #e4e9f0 6px, #e4e9f0 12px); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #9aa5b4; font-family: monospace; text-align: center; } .list-info { flex: 1; display: flex; flex-direction: column; gap: 4px; } .list-name { font-size: 13.5px; font-weight: 700; color: var(--dark); } .list-article { font-size: 11.5px; color: var(--muted); } .list-stars { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #F59E0B; } .list-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 100px; } .list-stock { min-width: 140px; } .list-actions { display: flex; flex-direction: column; gap: 8px; min-width: 160px; } .seo-block { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 48px 0; } .seo-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .seo-inner h2 { font-size: 20px; font-weight: 800; margin-bottom: 16px; } .seo-inner p { color: var(--muted); font-size: 13.5px; line-height: 1.75; margin-bottom: 12px; } .page-catalog .product-name { text-wrap: pretty; } /* ========================================================================== 11 КАРТОЧКА ТОВАРА (страница) ========================================================================== */ .product-main { max-width: 1280px; margin: 28px auto; padding: 0 24px; } .product-h1 { font-size: 26px; font-weight: 800; color: var(--dark); margin-bottom: 24px; line-height: 1.25; text-wrap: pretty; } .product-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .gallery { display: flex; flex-direction: column; gap: 14px; } .gallery-main { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg-alt); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; } .gallery-main-img { width: 100%; height: 100%; object-fit: cover; display: flex; align-items: center; justify-content: center; } .gallery-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg,#eef2f7 0,#eef2f7 10px,#e4e9f0 10px,#e4e9f0 20px); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #9aa5b4; font-family: monospace; text-align: center; transition: background .2s; } .gallery-badge-discount { position: absolute; top: 16px; left: 16px; background: #EF4444; color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 14px; font-weight: 800; } .gallery-zoom { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; background: rgba(255,255,255,0.9); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1.5px solid var(--border); transition: all .15s; } .gallery-zoom:hover { border-color: var(--blue); color: var(--blue); } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1.5px solid var(--border); color: var(--muted); transition: all .15s; } .gallery-arrow:hover { border-color: var(--blue); color: var(--blue); } .gallery-arrow.prev { left: 14px; } .gallery-arrow.next { right: 14px; } .gallery-thumbs { display: flex; gap: 10px; } .gallery-thumb { flex: 1; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; } .gallery-thumb.active { border-color: var(--blue); } .gallery-thumb:hover:not(.active) { border-color: #c0d4f0; } .thumb-ph { width: 100%; height: 100%; background: repeating-linear-gradient(45deg,#eef2f7 0,#eef2f7 6px,#e4e9f0 6px,#e4e9f0 12px); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #aab3be; font-family: monospace; text-align: center; transition: opacity .15s; } .gallery-thumb.active .thumb-ph { opacity: .85; } .product-info-col { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } .brand-block { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); } .brand-logo-ph { width: 120px; height: 38px; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .5px; } .pricing-block { display: flex; align-items: center; gap: 14px; } .price-main { font-size: 36px; font-weight: 800; color: var(--dark); } .price-old-wrap { display: flex; flex-direction: column; gap: 2px; } .price-badge { background: #EF4444; color: #fff; border-radius: 5px; padding: 3px 9px; font-size: 13px; font-weight: 800; align-self: flex-start; } .short-specs { background: var(--bg-alt); border-radius: var(--radius); padding: 16px; } .short-specs-title { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .spec-row { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); } .spec-row:last-of-type { border-bottom: none; } .spec-row:nth-child(odd) { background: transparent; } .spec-key { flex: 1; font-size: 12.5px; color: var(--muted); } .spec-val { font-size: 12.5px; font-weight: 600; color: var(--dark); } .all-specs-link { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--blue); } .all-specs-link:hover { color: var(--blue-light); } .qty-cart { display: flex; flex-direction: column; gap: 10px; } .qty-label { font-size: 12.5px; font-weight: 600; color: var(--dark); } .qty-row { display: flex; align-items: center; gap: 12px; } .qty-selector { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .qty-btn { width: 40px; height: 44px; background: var(--bg-alt); border: none; font-size: 18px; color: var(--dark); cursor: pointer; transition: background .15s; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qty-btn:hover { background: #e0e8f4; } .qty-input { width: 64px; height: 44px; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--dark); outline: none; } .qty-min { font-size: 11.5px; color: var(--muted); } .btn-add-cart { width: 100%; height: 48px; background: var(--blue); color: #fff; border-radius: var(--radius); font-size: 15px; font-weight: 800; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-add-cart:hover { background: var(--blue-light); } .wishlist-row { display: flex; gap: 20px; align-items: center; } .wishlist-link { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: color .15s; } .wishlist-link:hover { color: var(--blue); } .delivery-box { background: #FFFBEB; border-left: 4px solid #F59E0B; border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; } .delivery-box-icon { flex-shrink: 0; margin-top: 1px; } .delivery-box-text { font-size: 12.5px; color: var(--dark); line-height: 1.6; } .delivery-box-text strong { font-weight: 700; display: block; margin-bottom: 4px; } .tabs-section { max-width: 1280px; margin: 48px auto 0; padding: 0 24px; } .tab-bar { display: flex; border-bottom: 2px solid var(--border); gap: 0; overflow-x: auto; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { padding: 13px 20px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .15s, border-color .15s; background: none; border-top: none; border-left: none; border-right: none; } .tab-btn:hover { color: var(--blue); } .tab-btn.active { color: var(--blue); font-weight: 800; border-bottom-color: var(--blue); } .tab-content { padding: 32px 0 48px; } .tab-pane { display: none; } .tab-pane.active { display: block; } .specs-table { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .specs-group { } .specs-group-title { font-size: 13.5px; font-weight: 800; color: var(--dark); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .specs-rows { border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--border); } .spec-table-row { display: flex; align-items: center; padding: 9px 14px; } .spec-table-row:nth-child(even) { background: var(--bg-alt); } .spec-table-key { flex: 1; font-size: 12.5px; color: var(--muted); } .spec-table-val { font-size: 12.5px; font-weight: 700; color: var(--dark); text-align: right; } .related-section { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 48px 0; } .related-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 40px; } .slider-block { } .slider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .slider-title { font-size: 20px; font-weight: 800; } .slider-header-right { display: flex; align-items: center; gap: 12px; } .slider-all-link { font-size: 13px; font-weight: 700; color: var(--blue); } .slider-all-link:hover { color: var(--blue-light); } .slider-arrows { display: flex; gap: 8px; } .slider-arrow-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: all .15s; } .slider-arrow-btn:hover { border-color: var(--blue); color: var(--blue); } .related-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; } .related-track::-webkit-scrollbar { display: none; } .mini-card { flex: 0 0 210px; scroll-snap-align: start; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; position: relative; } .mini-card:hover { box-shadow: 0 8px 24px rgba(47,128,237,0.12); transform: translateY(-2px); } .mini-img { height: 140px; background: repeating-linear-gradient(45deg,#eef2f7 0,#eef2f7 8px,#e4e9f0 8px,#e4e9f0 16px); display: flex; align-items: center; justify-content: center; position: relative; font-size: 10px; font-weight: 600; color: #9aa5b4; font-family: monospace; text-align: center; padding: 8px; } .mini-card-badge { position: absolute; top: 8px; left: 8px; border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700; } .mini-info { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .mini-name { font-size: 12px; font-weight: 600; color: var(--dark); line-height: 1.35; } .mini-price { font-size: 17px; font-weight: 800; color: var(--dark); } .btn-mini-cart { background: var(--blue); color: #fff; border-radius: 6px; padding: 8px; font-size: 12px; font-weight: 700; text-align: center; transition: background .2s; border: none; width: 100%; margin-top: auto; } .btn-mini-cart:hover { background: var(--blue-light); } /* Страница товара: те же элементы, но крупнее */ .page-product .product-article { font-size: 12px; } .page-product .stock-indicator { gap: 7px; } .page-product .stock-dot { width: 8px; height: 8px; } .page-product .stock-text { font-size: 13px; } .page-product .price-old { font-size: 15px; } .page-product .btn-one-click { flex: 0 1 auto; width: 100%; height: 44px; padding: 0; border-width: 2px; border-radius: var(--radius); font-size: 14px; } /* ========================================================================== 12 СТАТЬИ: список ========================================================================== */ .cat-tabs-bar { background: #fff; border-bottom: 1px solid var(--border); } .cat-tabs-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .cat-tabs-inner::-webkit-scrollbar { display: none; } .cat-tab { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; border: 1.5px solid var(--border); background: #fff; color: var(--dark); } .cat-tab:hover { border-color: var(--blue); color: var(--blue); } .cat-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } .featured-wrap { max-width: 1280px; margin: 28px auto 0; padding: 0 24px; } .featured-card { display: grid; grid-template-columns: 60% 40%; background: var(--bg-alt); border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); transition: box-shadow .2s; } .featured-card:hover { box-shadow: var(--shadow-hover); } .featured-img { background: repeating-linear-gradient(45deg,#dde4ed 0,#dde4ed 12px,#c8d3e0 12px,#c8d3e0 24px); min-height: 320px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #8a9bb0; font-family: monospace; text-align: center; padding: 20px; position: relative; } .featured-content { padding: 36px 36px 36px 32px; display: flex; flex-direction: column; gap: 16px; justify-content: center; } .art-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .3px; } .badge-blue { background: var(--blue); color: #fff; } .badge-green { background: #10B981; color: #fff; } .badge-orange { background: #F59E0B; color: #fff; } .badge-purple { background: #8B5CF6; color: #fff; } .badge-red { background: #EF4444; color: #fff; } .badge-teal { background: #0D9488; color: #fff; } .badge-yellow { background: #D97706; color: #fff; } .featured-title { font-size: 20px; font-weight: 800; color: var(--dark); line-height: 1.35; text-wrap: pretty; } .featured-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.75; text-wrap: pretty; } .art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .art-meta span { display: flex; align-items: center; gap: 4px; } .btn-read { align-self: flex-start; background: var(--blue); color: #fff; border-radius: var(--radius); padding: 11px 22px; font-size: 13px; font-weight: 700; transition: background .2s; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; } .btn-read:hover { background: var(--blue-light); } .link-read { font-size: 13px; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 4px; } .link-read:hover { color: var(--blue-light); } .main-layout { max-width: 1280px; margin: 28px auto 64px; padding: 0 24px; display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; } .sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } .sidebar-block { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; } .sidebar-block.white { background: #fff; border: 1.5px solid var(--border); } .sidebar-title { font-size: 14px; font-weight: 800; color: var(--dark); margin-bottom: 14px; } .search-sidebar { position: relative; } .search-sidebar input { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 38px 10px 14px; font-family: inherit; font-size: 13px; outline: none; color: var(--dark); transition: border-color .2s; background: #fff; } .search-sidebar input:focus { border-color: var(--blue); } .search-sidebar input::placeholder { color: var(--muted); } .search-sidebar .si { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); } .popular-list { display: flex; flex-direction: column; } .popular-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .popular-item:last-child { border-bottom: none; padding-bottom: 0; } .popular-thumb { width: 60px; height: 60px; border-radius: 6px; background: repeating-linear-gradient(45deg,#e8edf5 0,#e8edf5 6px,#dde3ef 6px,#dde3ef 12px); flex-shrink: 0; } .popular-text { flex: 1; } .popular-title { font-size: 12px; font-weight: 600; color: var(--dark); line-height: 1.4; margin-bottom: 4px; } .popular-title:hover { color: var(--blue); cursor: pointer; } .popular-date { font-size: 11px; color: var(--muted); } .tag-pill { display: inline-block; padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border); background: #fff; color: var(--dark); font-weight: 500; cursor: pointer; transition: all .15s; } .tag-pill:hover { border-color: var(--blue); color: var(--blue); background: #f0f7ff; } .tag-pill.sm { font-size: 11px; } .tag-pill.md { font-size: 12.5px; } .tag-pill.lg { font-size: 14px; font-weight: 700; } .sidebar-banner { background: var(--blue); border-radius: var(--radius); padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .sidebar-banner h3 { font-size: 16px; font-weight: 800; color: #fff; } .sidebar-banner p { font-size: 12.5px; color: rgba(255,255,255,0.82); line-height: 1.6; } .btn-banner { background: #fff; color: var(--blue); border-radius: 6px; padding: 10px 22px; font-size: 13px; font-weight: 700; transition: all .2s; border: none; cursor: pointer; } .btn-banner:hover { background: #ebf3ff; } .articles-area { display: flex; flex-direction: column; gap: 20px; } .art-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; } .art-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .art-img { background: repeating-linear-gradient(45deg,#eef2f7 0,#eef2f7 10px,#e4e9f0 10px,#e4e9f0 20px); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: #9aa5b4; font-family: monospace; text-align: center; padding: 8px; } .art-img.h200 { height: 200px; } .art-img.h160 { height: 160px; } .art-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .art-title { font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.35; text-wrap: pretty; } .art-title:hover { color: var(--blue); cursor: pointer; } .art-excerpt { font-size: 12.5px; color: var(--muted); line-height: 1.7; text-wrap: pretty; flex: 1; } .art-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; } .art-meta-small { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } /* Облако тегов в сайдбаре плотнее, чем на главной */ .page-articles .tag-cloud { gap: 8px; } /* В флекс-колонке анонса бейдж не должен растягиваться */ .page-articles .art-badge { align-self: flex-start; } /* ========================================================================== 13 СТАТЬЯ: детальная ========================================================================== */ .article-layout { max-width: 1280px; margin: 32px auto 64px; padding: 0 24px; display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; } .article-nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } .toc-block { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .toc-title { font-size: 13.5px; font-weight: 800; color: var(--dark); padding: 16px 18px 12px; border-bottom: 1px solid var(--border); } .toc-links { display: flex; flex-direction: column; } .toc-link { display: block; padding: 10px 18px; font-size: 12.5px; font-weight: 500; color: var(--muted); border-left: 3px solid transparent; border-bottom: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; cursor: pointer; } .toc-link:last-child { border-bottom: none; } .toc-link:hover { color: var(--blue); background: #f5f9ff; } .toc-link.active { color: var(--blue); border-left-color: var(--blue); background: #f0f7ff; font-weight: 700; } .share-block { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .share-label { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .share-btns { display: flex; gap: 8px; } .share-btn { width: 40px; height: 40px; border-radius: var(--radius); background: var(--bg-alt); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; font-size: 16px; color: var(--muted); } .share-btn:hover { border-color: var(--blue); color: var(--blue); background: #f0f7ff; } .sidebar-cta { background: var(--blue); border-radius: var(--radius); padding: 22px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .sidebar-cta h4 { font-size: 15px; font-weight: 800; color: #fff; } .sidebar-cta p { font-size: 12px; color: rgba(255,255,255,0.82); line-height: 1.5; } .btn-cta-white { background: #fff; color: var(--blue); border-radius: 6px; padding: 9px 18px; font-size: 12.5px; font-weight: 700; border: none; cursor: pointer; transition: background .15s; margin-top: 4px; } .btn-cta-white:hover { background: #ebf3ff; } .article-content { display: flex; flex-direction: column; gap: 32px; } .art-img-ph { width: 100%; border-radius: var(--radius); background: repeating-linear-gradient(45deg,#dde4ed 0,#dde4ed 12px,#c8d3e0 12px,#c8d3e0 24px); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #7a8fa6; font-family: monospace; text-align: center; padding: 20px; } .art-img-ph.h400 { height: 400px; } .art-img-ph.h300 { height: 300px; } .art-img-ph.h250 { height: 250px; } .img-caption { font-size: 12.5px; color: var(--muted); font-style: italic; text-align: center; margin-top: 8px; } .art-body p { font-size: 14px; color: #444; line-height: 1.85; text-wrap: pretty; } .art-body h2 { font-size: 20px; font-weight: 800; color: var(--dark); padding-bottom: 12px; border-bottom: 1.5px solid var(--border); scroll-margin-top: 110px; } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .type-card { background: var(--bg-alt); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; } .type-icon { font-size: 26px; } .type-title { font-size: 13.5px; font-weight: 800; color: var(--dark); } .type-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .art-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--border); font-size: 13px; } .art-table thead tr { background: var(--blue); } .art-table thead th { color: #fff; font-weight: 700; padding: 12px 16px; text-align: left; } .art-table tbody tr:nth-child(even) { background: var(--bg-alt); } .art-table tbody tr:nth-child(odd) { background: #fff; } .art-table td { padding: 11px 16px; color: var(--dark); border-bottom: 1px solid var(--border); } .art-table tbody tr:last-child td { border-bottom: none; } .info-block { border-left: 4px solid; border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; } .info-block.warning { border-color: #F59E0B; background: #FFFBEB; } .info-block.tip { border-color: var(--blue); background: #EFF6FF; } .info-block-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .info-block-text { font-size: 13px; color: var(--dark); line-height: 1.7; } .info-block-text a { color: var(--blue); font-weight: 700; } .info-block-text a:hover { color: var(--blue-light); } .art-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .art-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: #444; line-height: 1.65; } .art-list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 7px; } .art-num-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .art-num-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 13.5px; color: #444; line-height: 1.65; } .num-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #444; line-height: 1.65; } .check-icon { color: #10B981; flex-shrink: 0; margin-top: 1px; } .cta-block { background: var(--blue); border-radius: 12px; padding: 36px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .cta-block h3 { font-size: 22px; font-weight: 800; color: #fff; } .cta-block p { font-size: 14px; color: rgba(255,255,255,0.85); } .cta-btns { display: flex; gap: 12px; justify-content: center; } .btn-white { background: #fff; color: var(--blue); border-radius: var(--radius); padding: 12px 24px; font-size: 13.5px; font-weight: 700; border: none; cursor: pointer; transition: background .2s; } .btn-white:hover { background: #ebf3ff; } .btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); border-radius: var(--radius); padding: 12px 24px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .2s; } .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); } .author-block { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; gap: 18px; align-items: flex-start; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .author-avatar svg { opacity: .45; } .author-name { font-size: 14px; font-weight: 800; color: var(--dark); margin-bottom: 3px; } .author-role { font-size: 12px; color: var(--blue); font-weight: 600; margin-bottom: 8px; } .author-bio { font-size: 12.5px; color: var(--muted); line-height: 1.65; } .tags-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tags-label { font-size: 13px; color: var(--muted); font-weight: 600; flex-shrink: 0; } /* Теги под статьёй чуть крупнее */ .page-article .tag-pill { padding: 5px 14px; font-size: 12px; } /* ========================================================================== 14 О КОМПАНИИ ========================================================================== */ .page-layout { max-width: 1280px; margin: 32px auto 64px; padding: 0 24px; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } .side-nav { position: sticky; top: 100px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .side-nav a { display: flex; align-items: center; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--dark); border-left: 3px solid transparent; transition: color .15s, background .15s, border-color .15s; border-bottom: 1px solid var(--border); } .side-nav a:last-child { border-bottom: none; } .side-nav a:hover { color: var(--blue); background: #f0f7ff; } .side-nav a.active { color: #fff; background: var(--blue); border-left-color: #1a5fc8; } .article { display: flex; flex-direction: column; gap: 40px; } .article-block { display: flex; flex-direction: column; gap: 16px; } .article h2 { font-size: 20px; font-weight: 800; color: var(--dark); padding-bottom: 12px; border-bottom: 1px solid #E5E7EB; } .article p { font-size: 13.5px; color: var(--muted); line-height: 1.8; text-wrap: pretty; } .img-ph { width: 100%; border-radius: var(--radius); background: repeating-linear-gradient(45deg, #eef2f7 0, #eef2f7 10px, #e4e9f0 10px, #e4e9f0 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #9aa5b4; font-family: monospace; font-size: 12px; font-weight: 600; text-align: center; } .img-ph.main { height: 320px; } .img-ph.team { height: 240px; } .img-ph svg { opacity: .35; } .adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .adv-card { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; } .adv-icon { font-size: 28px; line-height: 1; } .adv-title { font-size: 13.5px; font-weight: 800; color: var(--dark); } .adv-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stat-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .stat-number { font-size: 28px; font-weight: 800; color: var(--blue); line-height: 1.1; } .stat-label { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4; } .mission-block { background: #EFF6FF; border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; } .mission-block p { font-style: italic; font-size: 14px; color: var(--dark); line-height: 1.8; } .steps { display: flex; flex-direction: column; gap: 16px; } .step { display: flex; gap: 16px; align-items: flex-start; } .step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .step-body { flex: 1; } .step-title { font-size: 13.5px; font-weight: 800; color: var(--dark); margin-bottom: 3px; } .step-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .docs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .doc-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .2s; } .doc-card:hover { box-shadow: var(--shadow); } .doc-icon { font-size: 28px; } .doc-title { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.4; } .doc-sub { font-size: 11.5px; color: var(--muted); } .doc-link { font-size: 12.5px; font-weight: 700; color: var(--blue); margin-top: 4px; } .doc-link:hover { color: var(--blue-light); } .req-block { background: var(--bg-alt); border-radius: var(--radius); padding: 24px; } .req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; } .req-row { display: flex; flex-direction: column; gap: 2px; } .req-key { font-size: 11.5px; color: var(--muted); } .req-val { font-size: 13px; font-weight: 600; color: var(--dark); } .page-about .img-caption { margin-top: 4px; } /* ========================================================================== 15 ПОДВАЛ ========================================================================== */ .footer { background: var(--dark); color: rgba(255,255,255,0.8); padding: 48px 0 24px; } .footer-grid { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; display: grid; grid-template-columns: 260px 1fr 200px 200px; gap: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-logo { filter: brightness(0) invert(1); } .footer-desc { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 16px; line-height: 1.7; } .footer-nav h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 16px; } .footer-nav-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .footer-nav-links a { font-size: 12.5px; color: rgba(255,255,255,0.6); transition: color .15s; } .footer-nav-links a:hover { color: var(--blue-light); } .footer-contact h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 16px; } .footer-contact p { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 8px; } .footer-contact a { color: rgba(255,255,255,0.8); font-weight: 600; display: block; margin-bottom: 6px; } .footer-contact a:hover { color: var(--blue-light); } .footer-callback-link { color: var(--blue-light) !important; font-weight: 600 !important; font-size: 12px !important; } .footer-bottom { max-width: 1280px; margin: 24px auto 0; padding: 0 24px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.35); } /* ========================================================================== 16 АДАПТИВ ========================================================================== */ /* В макете адаптива не было — это отдельный слой поверх готовых стилей. Ломает только сетки и отступы, сами компоненты не трогает. Если нужна строго фиксированная версия под 1280px — секцию можно удалить целиком. */ /* ─── до 1240px: сетки товаров и категорий чуть уже ─── */ @media (max-width: 1240px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } .products-grid { grid-template-columns: repeat(3, 1fr); } .about-grid { gap: 32px; } } /* ─── до 1024px: планшет — боковые колонки уходят под контент ─── */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr; } .hero-banners { flex-direction: row; } .catalog-layout, .main-layout, .article-layout, .page-layout, .product-columns, .featured-card, .about-grid { grid-template-columns: 1fr; } .product-columns { gap: 28px; } .about-grid { gap: 28px; } /* сначала контент, потом сайдбар */ .products-area, .articles-area, .article-content, .article { order: 1; } .filters-panel, .sidebar, .article-nav, .side-nav { order: 2; } /* липкие сайдбары в одну колонку не нужны */ .filters-panel, .sidebar, .article-nav, .side-nav { position: static; top: auto; } .sidebar { flex-direction: row; flex-wrap: wrap; } .sidebar-block { flex: 1 1 260px; } .article-nav { flex-direction: row; flex-wrap: wrap; } .toc-block { flex: 1 1 100%; } .related-inner { flex-direction: column; gap: 28px; } .articles-grid { grid-template-columns: 1fr 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .docs-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .promo-banner { flex-direction: column; align-items: flex-start; gap: 20px; } } /* ─── до 760px: телефон ─── */ @media (max-width: 760px) { .section { padding: 32px 0; } /* верхняя полоса: оставляем только телефоны и кнопку */ .topbar-hours, .topbar-email { display: none; } /* шапка: поиск переносится на вторую строку */ .main-header-inner { flex-wrap: wrap; } .search-wrap { order: 3; flex-basis: 100%; } .header-icons { margin-left: auto; } .hicon { padding: 6px; } /* меню прокручивается по горизонтали */ .bottom-nav-inner, .tab-bar, .cat-tabs-inner { overflow-x: auto; } .hero-banners { flex-direction: column; } .slide, .hero-slider { height: auto; min-height: 320px; } .slide-content { padding: 32px 24px; } .slide-title { font-size: 24px; } .categories-grid { grid-template-columns: repeat(3, 1fr); } .products-grid { grid-template-columns: repeat(2, 1fr); } .articles-grid, .about-grid, .type-grid, .adv-grid, .req-grid, .row-2, .row-3 { grid-template-columns: 1fr; } .article-card.large { grid-row: span 1; } .list-card { flex-direction: column; } .list-img { width: 100%; height: 160px; } .gallery-thumbs { overflow-x: auto; } .gallery-thumb { flex: 0 0 72px; } .author-block, .step { flex-direction: column; } .cta-btns { flex-direction: column; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } /* ─── до 480px: узкие экраны ─── */ @media (max-width: 480px) { .container, .topbar-inner, .main-header-inner, .bottom-nav-inner, .page-hero-inner, .breadcrumb-bar .inner, .hero, .catalog-layout, .seo-inner, .product-main, .tabs-section, .related-inner, .cat-tabs-inner, .featured-wrap, .main-layout, .article-layout, .page-layout, .footer-grid, .footer-bottom { padding-left: 16px; padding-right: 16px; } .categories-grid { grid-template-columns: repeat(2, 1fr); } .products-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr; } .product-actions { flex-direction: column; } .price-inputs { flex-wrap: wrap; } .section-title { font-size: 20px; } .page-h1 { font-size: 22px; } .page-article .page-h1 { font-size: 20px; } }