/* * Front-end styles for bsm/cards. * * Сетка карточек 2/3/4 колонки. Четыре варианта оформления: * - bsm-cards--variant-plain — серая рамка без акцента (default) * - bsm-cards--variant-top-accent — серая рамка + зелёная полоса сверху (3px) * - bsm-cards--variant-left-accent — серая рамка + зелёная полоса слева (3px) * - bsm-cards--variant-ghost — без рамки, без padding (прозрачный контейнер) * * Markup: ../render.php * Source: ../../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.m-card) * * Спецификация (.m-card): * padding: 28px 28px 26px * border: var(--hairline) * border-top: var(--accent-rule) * h3 font-size: 17px / 700 / color var(--navy) * p font-size: 14px / color var(--text-secondary) / line-height 1.55 * * Hover (по .m-card:hover): * background: var(--surface) → var(--bg-soft) * border-top-color (top-accent): var(--accent) → var(--navy) * border-left-color (left-accent): var(--accent) → var(--navy) * h3 color: var(--navy) → var(--accent-strong) * * Eyebrow (опциональная метка/номер над заголовком, pill-стиль): * padding: 4px 10px * background: var(--accent-soft) * color: var(--accent-strong) * font-size: 11px / uppercase / letter-spacing 0.1em / 700 * margin-bottom: 6px * Если поле пустое — элемент не рендерится (render.php), место не занимает. */ .bsm-cards { margin: 0; padding: 0; font-family: inherit; } .bsm-cards__grid { display: grid; gap: 24px; /* Все строки одинаковой высоты = по самой высокой карточке в сетке. */ grid-auto-rows: 1fr; } .bsm-cards--cols-2 .bsm-cards__grid { grid-template-columns: repeat(2, 1fr); } .bsm-cards--cols-3 .bsm-cards__grid { grid-template-columns: repeat(3, 1fr); } .bsm-cards--cols-4 .bsm-cards__grid { grid-template-columns: repeat(4, 1fr); } /* ---- Item base ---- */ .bsm-cards__item { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px; background: var(--surface); color: var(--text); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } /* Если карточка — (есть linkUrl), наследуем цвет и не подчёркиваем. * Базовый a { color: var(--accent); } из base.css перебиваем через специфичность * селектора с тегом — иначе заголовок и текст становятся зелёными. */ a.bsm-cards__item { color: inherit; text-decoration: none; } a.bsm-cards__item:hover, a.bsm-cards__item:focus { text-decoration: none; } .bsm-cards__item:hover { text-decoration: none; } /* Ссылка "Подробнее" внизу карточки — класс оставлен для случаев, когда * Олег вставит ссылку в описание карточки через InnerBlocks или * ручную разметку. Авто-рендеринг ссылки из linkUrl отключён. */ .bsm-cards__link { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--accent-strong); text-decoration: none; align-self: flex-start; transition: color 0.15s; } .bsm-cards__link:hover { color: var(--accent); text-decoration: none; } /* ---- Variant: plain (default) ---- * Серая рамка без зелёного акцента. */ .bsm-cards--variant-plain .bsm-cards__item { border: var(--hairline); } .bsm-cards--variant-plain .bsm-cards__item:hover { background: var(--bg-soft); } /* ---- Variant: top-accent ---- * Серая рамка + 3px зелёная полоса сверху. При hover полоса становится Navy. */ .bsm-cards--variant-top-accent .bsm-cards__item { border: var(--hairline); border-top: var(--accent-rule); } .bsm-cards--variant-top-accent .bsm-cards__item:hover { border-top-color: var(--navy) !important; /* !important — исключает любой cascade override */ background: var(--bg-soft); } /* ---- Variant: left-accent ---- * Серая рамка + 3px зелёная полоса слева. При hover полоса становится Navy. */ .bsm-cards--variant-left-accent .bsm-cards__item { border: var(--hairline); border-left: var(--accent-rule); padding: 24px; /* чуть меньше padding — слева визуально уже из-за accent */ } .bsm-cards--variant-left-accent .bsm-cards__item:hover { background: var(--bg-soft); border-left-color: var(--navy) !important; /* !important — исключает любой cascade override */ } /* ---- Variant: ghost ---- * Без рамки, без padding. Прозрачный контейнер. */ .bsm-cards--variant-ghost .bsm-cards__item { border: none; background: transparent; padding: 0; } .bsm-cards--variant-ghost .bsm-cards__item:hover { background: var(--bg-soft); } /* ---- Item content ---- */ .bsm-cards__desc { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; } /* Eyebrow — опциональная метка/номер над заголовком (pill-стиль). * Источник: ../../files/10_Projects/bsm_company/05_Brand/design/03-wide.html (.eyebrow). * Всегда рендерится (даже пустым с  ), чтобы высота строки была * зарезервирована — иначе заголовки в карточках «прыгают» по вертикали, * если у одних eyebrow заполнен, а у других нет (Олег 22.09.2026). */ .bsm-cards__eyebrow { display: inline-block; align-self: flex-start; /* в flex-column не растягиваем на всю ширину */ padding: 4px 10px; margin: 0 0 6px 0; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: var(--font-weight-bold); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.1em; min-height: 15.4px; /* ≈ font-size × line-height — страховка */ transition: background 0.15s, color 0.15s; } /* Пустой eyebrow — текста нет, но место занимает. Прячем содержимое. */ .bsm-cards__eyebrow--empty { color: transparent; background: transparent; } .bsm-cards__eyebrow--empty:hover { background: transparent; } .bsm-cards__item:hover .bsm-cards__eyebrow { background: var(--accent); color: #fff; } .bsm-cards__title { margin: 0 0 10px 0; font-size: 17px; font-weight: var(--font-weight-bold); color: var(--navy); line-height: 1.3; transition: color 0.15s; } .bsm-cards__item:hover .bsm-cards__title { color: var(--accent-strong); } .bsm-cards__result { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--accent-strong); font-weight: var(--font-weight-semibold); line-height: 1.5; } /* ---- Responsive ---- */ /* Планшет: 4 → 2 колонки, 3 → 2 колонки. 2 остаётся как есть. */ @media (max-width: 1100px) { .bsm-cards--cols-4 .bsm-cards__grid { grid-template-columns: repeat(2, 1fr); } .bsm-cards--cols-3 .bsm-cards__grid { grid-template-columns: repeat(2, 1fr); } } /* Мобильный: все варианты → 1 колонка. */ @media (max-width: 700px) { .bsm-cards--cols-2 .bsm-cards__grid, .bsm-cards--cols-3 .bsm-cards__grid, .bsm-cards--cols-4 .bsm-cards__grid { grid-template-columns: 1fr; } }