/** * helpexcel-patterns.css — слой унифицированных UI-паттернов поверх Tilda. * * Задача файла: привести карточки блога, каталога и кейсов к единому виду * без переверстки Tilda-страниц. Паттерны применяются либо к helpexcel- * классам, которые добавляются в разметку точечно, либо (как fallback) * к типовым Tilda-блокам (t404 — блог-карта, t776 — карта каталога, * t985 — search/CTA и т.д.). * * Порядок подключения: * 1) tilda-* (cdn/локально) * 2) helpexcel-fonts.css — шрифты (FuturaPT→Jost) * 3) site-fixes.css — global safety-net и правки * 4) helpexcel-tokens.css — переменные var(--he-*) (импорт из site-fixes) * 5) helpexcel-ui.css — runtime модалок (форма/оплата) * 6) **helpexcel-patterns.css** — вот этот файл, общий UI-слой * * ПРАВИЛА: * • Стилизовать только через helpexcel-классы (.he-*) или Tilda-классы * в сочетании с #allrecords для повышения специфичности. * • Никогда не менять Tilda inline-стили через !important, если без этого * можно обойтись (Tilda любит inline font-size / width / height — если * не перекрывает, оставить TODO в коде). * • Токены берутся из helpexcel-tokens.css (подключается через @import * в site-fixes.css на всех страницах). Fallback на случай, если * tokens.css не загрузился — см. @supports ниже. * * TODO (после первой выкатки): * • подтвердить, что .he-card-blog не конфликтует с t404__link по hover; * • рассмотреть opt-in через чтобы эффект * включался только там, где мы готовы; * • замерить CLS на страницах блога после box-shadow (возможно, нужен * transform вместо shadow-grow). */ /* ────────────────────────────────────────────────────────────── * Fallback: если helpexcel-tokens.css по какой-то причине не * загрузился, объявляем минимальный набор токенов через :root, * чтобы паттерн-селекторы не «развалились». Порядок важен — * эти значения ПЕРЕОПРЕДЕЛЯТСЯ нормальным tokens.css при его * наличии (его @import идёт раньше в site-fixes.css). * ────────────────────────────────────────────────────────────── */ :root { --he-color-primary: #5873ec; --he-color-primary-hover: #3d56c4; --he-color-accent: #5171f7; --he-color-ink: #1d2233; --he-color-ink-soft: #363f55; --he-color-ink-muted: #5c6478; --he-color-surface: #ffffff; --he-color-surface-2: #f2f4fb; --he-color-border: #e2e8f8; --he-radius-xs: 5px; --he-radius-md: 12px; --he-radius-lg: 16px; --he-radius-pill: 999px; --he-shadow-sm: 0 1px 2px rgba(29, 34, 51, 0.06); --he-shadow-md: 0 6px 18px rgba(29, 34, 51, 0.08); --he-shadow-lg: 0 14px 40px rgba(29, 34, 51, 0.12); --he-ease: ease-in-out; --he-duration-sm: 200ms; --he-duration-md: 280ms; } /* ────────────────────────────────────────────────────────────── * 1. Общий pattern «карточка». * * Применяется к любой помеченной карточке (.he-card), а также * к типовым Tilda-картам: * — .t404__link — блог-карты (листинг /blog/) * — .t776__col .t776__content — карты каталога (листинг /templates/) * * Визуал: белая поверхность, радиус lg, мягкая тень, плавный hover. * ────────────────────────────────────────────────────────────── */ .he-card, #allrecords .t404__link, #allrecords .t776__col .t776__content { background-color: var(--he-color-surface); border-radius: var(--he-radius-lg); transition: transform var(--he-duration-sm) var(--he-ease), box-shadow var(--he-duration-sm) var(--he-ease); /* НЕ ставим box-shadow по умолчанию — Tilda часто рисует картинку во всю карточку, тень визуально дублируется. Появляется на hover. */ } .he-card:hover, #allrecords .t404__link:hover, #allrecords .t776__col .t776__content:hover { transform: translateY(-2px); box-shadow: var(--he-shadow-md); } /* ────────────────────────────────────────────────────────────── * 1.1 Карточка блога (.he-card-blog) * * Базовый Tilda-класс: t404 (см. blog/index.html, rec532515467). * Карточки блога имеют изображение сверху + заголовок + descr. * Унифицируем скругление картинки и отступы текста. * * TODO confirm in inventory: убедиться, что все страницы блога * используют t404 для карточек (некоторые старые посты могут * использовать t-card или t-store — тогда расширить селекторы). * ────────────────────────────────────────────────────────────── */ .he-card-blog, #allrecords .t404__col { /* col — Tilda grid cell; pattern накладывается внутри t404__link */ } #allrecords .t404__imgbox { border-radius: var(--he-radius-md); overflow: hidden; } #allrecords .t404__img { transition: transform var(--he-duration-md) var(--he-ease); } #allrecords .t404__link:hover .t404__img { transform: scale(1.03); } #allrecords .t404__textwrapper { padding-top: var(--he-spacing-md, 14px); /* Tilda задаёт separator через псевдо-элемент t404__separator; оставляем как есть — это часть дизайна */ } #allrecords .t404__title { color: var(--he-color-ink); } #allrecords .t404__descr { color: var(--he-color-ink-soft); line-height: var(--he-line-height-text, 1.5); } /* ────────────────────────────────────────────────────────────── * 1.2 Карточка каталога (.he-card-catalog) * * Базовый Tilda-класс: t776 (см. templates/index.html, rec1734846441). * Карта: picture (t1002__picture-wrapper) + title + descr + двойная * кнопка (скачать + подробнее). * * TODO confirm in inventory: проверить другие типы catalog-layout, * помимо t776 (Tilda также знает t-store__card — применить тот же * паттерн, если встретится). * ────────────────────────────────────────────────────────────── */ .he-card-catalog, #allrecords .t776__col { /* отступ между карточками — Tilda даёт 30–40px, не трогаем, чтобы не сломать сетку t-col */ } #allrecords .t776__content { /* box-shadow: var(--he-shadow-sm); */ /* не ставим shadow по умолчанию — t776 часто на цветной подложке */ padding: var(--he-spacing-md, 14px); /* Tilda сама задаёт inner spacing; если визуально ничего не сдвинется — снять TODO */ /* TODO: проверить, что padding не даёт двойного отступа на мобильном */ } #allrecords .t776__imgwrapper, #allrecords .t776 .t1002__picture-wrapper { border-radius: var(--he-radius-md); overflow: hidden; } #allrecords .t776__title { color: var(--he-color-ink); } #allrecords .t776__descr { color: var(--he-color-ink-muted); } /* Вторая кнопка «Подробнее» — унифицированный link-style. Основную t-btnflex первую Tilda рендерит с inline-стилями, их трогать не будем; только вторую выравниваем в цвете primary. */ #allrecords .t776__btn_second { color: var(--he-color-primary); } #allrecords .t776__btn_second:hover { color: var(--he-color-primary-hover); } /* ────────────────────────────────────────────────────────────── * 1.3 Карточка кейса (.he-card-case) * * На момент inventory отдельные кейс-листинги (/cases/) используют * смесь t776 + t1002 + t396 (zero-блок) — нет выделенного «case-card». * Пока применяем те же правила, что и для каталога (t776 pattern). * * TODO confirm: когда появится выделенный case-card t-класс, либо * когда добавим data-атрибут `data-card-type="case"`, расширить селектор. * ────────────────────────────────────────────────────────────── */ .he-card-case { /* выделенный pattern на будущее; визуально = каталог */ background-color: var(--he-color-surface); border-radius: var(--he-radius-lg); transition: transform var(--he-duration-sm) var(--he-ease), box-shadow var(--he-duration-sm) var(--he-ease); } .he-card-case:hover { transform: translateY(-2px); box-shadow: var(--he-shadow-md); } /* ────────────────────────────────────────────────────────────── * 2. Хлебные крошки (.he-breadcrumbs) * * TODO confirm in inventory: в текущей выгрузке Tilda отдельного * breadcrumbs-блока не наблюдается (ни t014, ни какой-либо t-* * в основных типовых страницах). Оставляем pattern под свой * helpexcel-класс — будут применяться там, где мы явно добавим * .he-breadcrumbs в разметку (через head-code в Tilda или вручную * в нестатических страницах /members/, /admin/). * ────────────────────────────────────────────────────────────── */ .he-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--he-spacing-sm, 8px); padding: var(--he-spacing-md, 14px) 0; font-size: var(--he-font-size-sm, 14px); font-family: var(--he-font-family, 'FuturaPT', sans-serif); color: var(--he-color-ink-muted); line-height: var(--he-line-height-text, 1.5); } .he-breadcrumbs__item { display: inline-flex; align-items: center; } .he-breadcrumbs__item + .he-breadcrumbs__item::before { content: '/'; margin: 0 var(--he-spacing-sm, 8px); color: var(--he-color-ink-muted); opacity: 0.5; } .he-breadcrumbs__link { color: var(--he-color-primary); text-decoration: none; transition: color var(--he-duration-xs, 120ms) var(--he-ease); } .he-breadcrumbs__link:hover { color: var(--he-color-primary-hover); text-decoration: underline; } .he-breadcrumbs__current { color: var(--he-color-ink-soft); font-weight: var(--he-weight-medium, 500); } /* ────────────────────────────────────────────────────────────── * 3. CTA-блок (.he-cta-block) * * В выгрузке Tilda роль CTA часто исполняет t795 (Text-block) или * t702 (popup-форма; в inline-рендере выглядит как карточка с input'ом). * Унифицированная шапка: тёмный или primary-soft фон, крупный заголовок, * описание, один CTA-button. * * TODO confirm in inventory: в главной (index.html), templates/, кейсах * под «CTA-блок» чаще всего используется t702 с inline popup-input — * это уже стилизовано в helpexcel-ui.css для модалок. Здесь же — * pattern для не-модальных CTA. * ────────────────────────────────────────────────────────────── */ .he-cta-block { background-color: var(--he-color-primary-soft, #f7faff); border-radius: var(--he-radius-lg); padding: var(--he-spacing-xl, 32px) var(--he-spacing-lg, 22px); text-align: center; } .he-cta-block--primary { background-color: var(--he-color-primary); color: var(--he-color-surface); } .he-cta-block__title { font-family: var(--he-font-family); font-size: var(--he-font-size-title, 28px); line-height: var(--he-line-height-heading, 1.2); font-weight: var(--he-weight-semibold, 600); color: var(--he-color-ink); margin: 0 0 var(--he-spacing-md, 14px); } .he-cta-block--primary .he-cta-block__title { color: var(--he-color-surface); } .he-cta-block__descr { font-size: var(--he-font-size-subtitle, 15px); line-height: var(--he-line-height-text, 1.5); color: var(--he-color-ink-soft); margin: 0 0 var(--he-spacing-lg, 22px); } .he-cta-block--primary .he-cta-block__descr { color: var(--he-color-surface); opacity: 0.92; } .he-cta-block__button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--he-spacing-xl, 32px); background-color: var(--he-color-primary); color: var(--he-color-surface); border: 0; border-radius: var(--he-radius-pill); font-family: var(--he-font-family); font-size: var(--he-font-size-body, 16px); font-weight: var(--he-weight-medium, 500); cursor: pointer; text-decoration: none; transition: background-color var(--he-duration-sm) var(--he-ease), transform var(--he-duration-sm) var(--he-ease); } .he-cta-block__button:hover { background-color: var(--he-color-primary-hover); transform: translateY(-1px); } .he-cta-block--primary .he-cta-block__button { background-color: var(--he-color-surface); color: var(--he-color-primary); } .he-cta-block--primary .he-cta-block__button:hover { background-color: var(--he-color-surface-2, #f2f4fb); color: var(--he-color-primary-hover); } /* ────────────────────────────────────────────────────────────── * 4. Pattern-safe overrides для Tilda t795 (CTA-баннер) * * t795 — Text-block, который часто играет роль CTA/section header. * Здесь мягко унифицируем отступы, чтобы баннер не «зависал» * в воздухе при нестандартной высоте. * ────────────────────────────────────────────────────────────── */ #allrecords .t795 { /* Tilda inline padding: уважаем. Добавляем только smoothing типографики. */ } #allrecords .t795__title { color: var(--he-color-ink); line-height: var(--he-line-height-heading, 1.2); } #allrecords .t795__descr { color: var(--he-color-ink-soft); line-height: var(--he-line-height-text, 1.5); } /* ────────────────────────────────────────────────────────────── * 5. Utilities * * Мелкие классы-хелперы, которые удобно добавлять в Tilda head-code * или в inline-HTML блоках, не трогая глобальный CSS. * ────────────────────────────────────────────────────────────── */ .he-u-round-md { border-radius: var(--he-radius-md); } .he-u-round-lg { border-radius: var(--he-radius-lg); } .he-u-round-pill { border-radius: var(--he-radius-pill); } .he-u-shadow-sm { box-shadow: var(--he-shadow-sm); } .he-u-shadow-md { box-shadow: var(--he-shadow-md); } .he-u-shadow-lg { box-shadow: var(--he-shadow-lg); } .he-u-surface { background-color: var(--he-color-surface); } .he-u-surface-2 { background-color: var(--he-color-surface-2); } .he-u-primary-soft { background-color: var(--he-color-primary-soft); }