/* Start:/bitrix/templates/franchise/css/home.css?179216064788289*/
/* ============================================================
Главная — стили портала франшиз
Путь: /local/templates/{ШАБЛОН}/css/home.css
Шрифты: Onest (заголовки) + Golos Text (текст) — Cyrillic-native. Лежат в шаблоне: css/fonts.css и fonts/*.woff2,
подключаются в header.php (раньше грузились с Google Fonts — и здесь, через @import, и в шапке).
============================================================ */
:root {
--ink: #1a2b4a; /* основной тёмный */
--ink-soft: #4a5a78;
--muted: #7a8499;
--line: #e6e9f0;
--bg: #f3f3f4; /* фон страниц и плашек: с версии 109 нейтральный светло-серый (был серо-голубой #f5f7fa) */
--surface: #ffffff;
--green: #1b6ae5; /* акцент роста/денег */
--green-deep: #0d4ba0;
--amber: #f59e0b; /* «Проверено» */
--radius: 16px;
--shadow: 0 6px 24px rgba(26, 43, 74, .07);
--shadow-h: 0 14px 38px rgba(26, 43, 74, .14);
--font-d: 'Onest', system-ui, sans-serif;
--font-b: 'Golos Text', system-ui, sans-serif;
}
/* базовый сброс для области главной */
.hm-hero, .hm-section { font-family: var(--font-b); color: var(--ink); }
.hm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hm-h2 {
font-family: var(--font-d);
font-weight: 800;
font-size: clamp(22px, 2.6vw, 32px);
letter-spacing: -.02em;
margin: 0;
}
.hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hm-link { color: var(--green-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hm-link:hover { color: var(--green); }
.hm-section { padding: 56px 0; }
.hm-section--alt { background: var(--bg); }
/* (баннерного слота Premium между секциями больше нет: баннеры — в первом экране, блок «Франшизы месяца», .hm-month) */
/* ---------------------------- HERO ---------------------------- */
.hm-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 120% at 100% 0, rgba(27,106,229,.10), transparent 55%),
radial-gradient(90% 90% at 0 100%, rgba(26,43,74,.05), transparent 60%),
var(--surface);
border-bottom: 1px solid var(--line);
}
.hm-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding: 64px 20px 60px; }
.hm-eyebrow { font-weight: 600; color: var(--green-deep); letter-spacing: .04em; text-transform: uppercase; font-size: 13px; margin: 0 0 14px; }
.hm-hero__title {
font-family: var(--font-d);
font-weight: 800;
font-size: clamp(30px, 4.4vw, 54px);
line-height: 1.05;
letter-spacing: -.03em;
margin: 0 0 18px;
}
.hm-hero__title em { font-style: normal; color: var(--green); }
.hm-hero__lead { font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-soft); line-height: 1.55; max-width: 540px; margin: 0 0 28px; }
.hm-finder { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface); padding: 10px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-width: 600px; }
.hm-finder__sel {
flex: 1 1 160px;
font-family: inherit; font-size: 15px; color: var(--ink);
border: 1px solid var(--line); border-radius: 10px;
padding: 12px 14px; background: #fbfcfe; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8499' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center;
cursor: pointer;
}
.hm-finder__sel:focus { outline: none; border-color: var(--green); }
.hm-btn {
font-family: var(--font-d); font-weight: 700; font-size: 15px;
border: 0; border-radius: 10px; padding: 13px 24px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hm-btn--accent { background: var(--btn); color: #fff; flex: 0 0 auto; }
.hm-btn--accent:hover { background: var(--btn-deep); transform: translateY(-1px); box-shadow: 0 8px 20px var(--btn-shadow); }
.hm-btn--light { background: #fff; color: var(--ink); }
.hm-btn--light:hover { transform: translateY(-1px); box-shadow: var(--shadow-h); }
.hm-hero__stats { list-style: none; display: flex; gap: 36px; padding: 0; margin: 30px 0 0; }
.hm-hero__stats b { font-family: var(--font-d); font-size: 24px; display: block; letter-spacing: -.02em; }
.hm-hero__stats span { color: var(--muted); font-size: 14px; }
/* версия 164: «Портал в цифрах» под ссылками первого экрана — три цифры в ряд, под ними откуда они (App\Site\PortalStats) */
.hm-hero__live { margin: 30px 0 0; max-width: 600px; }
.hm-hero__stats--live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.hm-hero__stats--live li { min-width: 0; padding-left: 14px; border-left: 3px solid var(--green); }
.hm-hero__stats--live b { overflow-wrap: anywhere; color: var(--ink); }
.hm-hero__stats--live span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.hm-hero__src { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.hm-hero__art {
height: 320px; border-radius: 22px;
background:
radial-gradient(60% 60% at 70% 30%, rgba(27,106,229,.35), transparent 70%),
radial-gradient(50% 50% at 20% 80%, rgba(240,164,49,.35), transparent 70%),
linear-gradient(135deg, #16294a, #0f1d33);
box-shadow: var(--shadow-h);
position: relative;
}
.hm-hero__art::after {
content: ""; position: absolute; inset: 0; border-radius: 22px;
background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
background-size: 16px 16px; mix-blend-mode: overlay;
}
/* -------------------------- КАТЕГОРИИ -------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cat-tile {
display: flex; align-items: center; gap: 10px;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 14px 12px 14px 14px; text-decoration: none; color: var(--ink);
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-tile__ic {
width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
display: grid; place-items: center; color: var(--green-deep);
background: rgba(27,106,229,.10);
}
.cat-tile__ic img { width: 22px; height: 22px; object-fit: contain; }
.cat-tile__ic .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.cat-tile__name { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
/* --------------------------- КАРТОЧКИ --------------------------- */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.fr-card {
position: relative; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px; text-decoration: none; color: var(--ink);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); border-color: transparent; }
/* Метка стоит ПОД кнопками «в избранное / к сравнению» (.fr-card__acts, wishlist.css):
раньше обе были в правом верхнем углу, и кнопки закрывали метку. */
.fr-card__badge {
position: absolute; top: 52px; right: 10px;
background: var(--amber); color: #3a2400; font-family: var(--font-d); font-weight: 700;
font-size: 11px; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px;
}
.fr-card__logo { height: 64px; display: flex; align-items: center; margin-bottom: 14px; }
.fr-card__logo img { max-height: 64px; max-width: 150px; object-fit: contain; }
.fr-card__logo-ph {
width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(135deg, #16294a, #0f1d33); color: #fff;
font-family: var(--font-d); font-weight: 800; font-size: 26px;
}
.fr-card__name { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 6px; }
.fr-card__rating { color: var(--amber); font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.fr-card__meta { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); margin-top: auto; }
.fr-card__metarow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-card__metarow span { color: var(--muted); font-size: 13px; }
.fr-card__metarow b { font-family: var(--font-d); font-weight: 700; font-size: 15px; }
/* версия 96: в карточке четыре показателя (добавились «Прибыль в мес.» и «Точек в сети»). Значение не рвётся
посередине («12 500 000» и «₽» на разных строках): если подпись и значение не помещаются в одну строку (узкий
телефон, очень большое число), значение целиком уходит на следующую строку и остаётся у правого края. */
.fr-card__metarow { flex-wrap: wrap; }
.fr-card__metarow b { white-space: nowrap; margin-left: auto; }
.fr-card__cta {
margin-top: 4px; text-align: center; font-weight: 600; font-size: 14px;
color: var(--green-deep); border: 1px solid rgba(27,106,229,.35); border-radius: 10px; padding: 10px;
transition: background .15s ease, color .15s ease;
}
.fr-card:hover .fr-card__cta { background: var(--btn); color: #fff; border-color: var(--btn); }
/* --------------------------- ПОДБОРКИ --------------------------- */
.hm-sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hm-sel {
display: flex; align-items: center; justify-content: space-between;
background: var(--ink); color: #fff; font-family: var(--font-d); font-weight: 600;
border-radius: 12px; padding: 18px 20px; text-decoration: none;
transition: transform .15s ease, background .15s ease;
}
.hm-sel span { color: var(--green); transition: transform .15s ease; }
.hm-sel:hover { transform: translateY(-2px); background: #0f1d33; }
.hm-sel:hover span { transform: translateX(4px); }
/* ---------------------------- ОТЗЫВЫ ---------------------------- */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.rev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 0; box-shadow: var(--shadow); }
.rev-card__stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 12px; }
.rev-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.rev-card__author { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.rev-card__author b { font-family: var(--font-d); }
.rev-card__author span { color: var(--muted); }
/* ---------------- ПАНЕЛЬ ПОДБОРА И ГОРОДОВ (под шагами «Как выбрать франшизу») ---------------- */
/* Одна синяя панель в ширину страницы: слева приглашение в подбор, справа города (.hm-pick--cities). Раньше это были
синяя полоса во всю ширину экрана (.hm-cta) и отдельный блок «Франшизы в вашем городе». Городов нет — в панели
только подбор: текст слева, кнопка справа. */
.hm-pick { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 22px; overflow: hidden; color: #fff; font-family: var(--font-b);
background: radial-gradient(60% 130% at 0 0, rgba(27,106,229,.55), transparent 62%), linear-gradient(120deg, #16294a 0%, #1a4fae 62%, #1b6ae5 100%);
box-shadow: var(--shadow-h); }
.hm-pick--cities { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.hm-pick__main { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; padding: 34px 38px; }
.hm-pick--cities .hm-pick__main { flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
.hm-pick__copy { min-width: 0; }
.hm-pick .hm-pick__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 8px; }
.hm-pick__lead { margin: 0; max-width: 460px; color: rgba(255,255,255,.86); line-height: 1.5; }
.hm-pick__cities { display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; background: rgba(9, 22, 48, .22); border-left: 1px solid rgba(255,255,255,.14); }
.hm-pick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hm-pick .hm-pick__h { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: #fff; margin: 0; }
.hm-pick__all { font-weight: 600; font-size: 14px; color: #fff; text-decoration: none; white-space: nowrap; }
.hm-pick__all:hover { text-decoration: underline; }
.hm-pick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pick__city { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.24); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease; }
.hm-pick__city:hover { background: #fff; border-color: #fff; color: var(--green-deep); }
.hm-pick__city i { font-style: normal; font-weight: 500; font-size: 12px; opacity: .75; }
.hm-pick__city:focus-visible, .hm-pick__all:focus-visible, .hm-pick .hm-btn:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }
/* ---------------------------- SEO-текст ---------------------------- */
.hm-seo { color: var(--ink-soft); line-height: 1.7; font-size: 15px; }
.hm-seo h2, .hm-seo h3 { font-family: var(--font-d); color: var(--ink); }
/* --------------------------- адаптив --------------------------- */
@media (max-width: 900px) {
.hm-hero__inner { grid-template-columns: 1fr; }
.hm-hero__art { display: none; }
}
@media (max-width: 560px) {
.hm-section { padding: 40px 0; }
.hm-hero__inner { padding: 40px 20px 48px; }
.hm-hero__stats { gap: 22px; }
.hm-hero__stats--live { grid-template-columns: 1fr; gap: 10px; }
.hm-hero__stats--live li { display: flex; align-items: baseline; gap: 10px; }
.hm-hero__stats--live b { flex: 0 0 auto; font-size: 22px; }
.hm-hero__stats--live span { margin: 0; }
.hm-finder__sel { flex-basis: 100%; }
.hm-btn--accent { width: 100%; }
}
/* --------------------------- КАРТОЧКА С БАННЕРОМ --------------------------- */
/* Шаблон news.list `franchise_card`: сверху баннер («Картинка для анонса», у партнёрских карточек) или логотип, внизу кнопка
с галочкой «в общую заявку» (js/cards.js). Карточки избранного (wishlist.js) остались прежними. */
.fr-card--m { padding: 12px 12px 14px; }
.fr-card__media { position: relative; aspect-ratio: 15 / 8; border-radius: 12px; overflow: hidden; background: #eef2f8;
display: grid; place-items: center; margin-bottom: 12px; }
.fr-card__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* версия 178: у логотипа в ![]()
теперь стоят width/height копии (п. 2.1 SEO-аудита) — width/height: auto, чтобы
они только резервировали место, а размер на экране по-прежнему задавали max-width/max-height */
.fr-card__medialogo { width: auto; height: auto; max-width: 62%; max-height: 62%; object-fit: contain; }
.fr-cta__box:focus-visible, .fr-cta__btn:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
.fr-card--m .fr-card__badge { position: static; white-space: nowrap; }
/* «Проверено» со щитом */
.fr-card__badge--vf { display: inline-flex; align-items: center; gap: 4px; }
/* Метка Premium (тариф, App\Franchise\Tariff). Дубль .tf-badge из tariffs.css: карточка выводится и на страницах,
где tariffs.css не подключён (/franshiza/, города, рейтинг, подборки), а home.css есть везде, где есть .fr-card. */
.tf-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-d); font-weight: 700; font-size: 11px;
letter-spacing: .03em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
/* две сетки карточек подряд (Premium-карточки отдельным списком перед остальными): отступ как между строками сетки */
.fr-grid + .fr-grid { margin-top: 18px; }
/* категория над названием */
.fr-card__cat { margin: 0 4px 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--green-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-card--archive .fr-card__cat { color: var(--muted); }
.fr-card--m .fr-card__name { margin: 0 4px 4px; }
.fr-card__tag { margin: 0 4px 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.4;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fr-card--m .fr-card__meta { margin: auto 4px 0; padding: 12px 0 10px; }
/* Версия 129: строка переносится. Оценка, Premium и «Проверено» вместе с двумя кнопками не помещаются в карточку
уже 340 px — раньше кнопка сравнения выходила за карточку, а оценка «★ 4.8» ломалась на две строки. */
.fr-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 4px 12px; min-height: 34px; }
.fr-card--m .fr-card__rating { margin: 0; white-space: nowrap; }
.fr-card--m .fr-card__acts { position: static; margin-left: auto; }
.fr-card--m .fr-card__cta { margin-top: 0; }
/* кнопка карточки из двух частей: слева текст — отметить франшизу и открыть форму заявки; справа «+» — добавить
в общую заявку (у отмеченной — галочка, кнопка оранжевая). Раньше слева стоял пустой белый квадрат-галочка.
С версии 107 кнопка тёмно-синяя, как остальные кнопки сайта (--btn), под курсором темнее (--btn-deep); раньше
была ярко-синей и темнела до нынешнего цвета. */
.fr-cta { position: relative; display: flex; align-items: stretch; padding: 0; background: var(--btn); border-color: var(--btn); color: #fff;
transition: background .15s ease, border-color .15s ease; }
.fr-card:hover .fr-cta { background: var(--btn-deep); border-color: var(--btn-deep); }
.fr-cta__box, .fr-cta__btn { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.fr-cta__btn { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; padding: 12px 10px 12px 14px; text-align: center; border-radius: 9px 0 0 9px; }
.fr-cta__box { position: relative; flex: 0 0 44px; display: grid; place-items: center; padding: 0; border-left: 1px solid rgba(255, 255, 255, .3);
border-radius: 0 9px 9px 0; background: rgba(9, 40, 92, .22); transition: background .15s ease; }
.fr-cta__box:hover { background: rgba(9, 40, 92, .45); }
.fr-cta__box .fr-cta__plus { display: block; }
.fr-cta__box .fr-cta__check { display: none; }
/* отмечена для общей заявки */
.fr-card.is-picked { border-color: #d9480f; }
.fr-card.is-picked .fr-cta, .fr-card.is-picked:hover .fr-cta { background: #d9480f; border-color: #d9480f; }
.fr-card.is-picked .fr-cta__box .fr-cta__plus { display: none; }
.fr-card.is-picked .fr-cta__box .fr-cta__check { display: block; }
.fr-card.is-picked .fr-cta__box { background: rgba(110, 30, 0, .25); }
.fr-card.is-picked .fr-cta__box:hover { background: rgba(110, 30, 0, .45); }
/* подсказка над «+»: при наведении мышью и при переходе клавишей Tab. На экране без мыши (телефон) не показывается —
там после нажатия внизу появляется панель «Выбрано франшиз: N». */
.fr-cta__box::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 4; width: max-content; max-width: 212px;
padding: 8px 11px; border-radius: 10px; background: var(--ink); color: #fff; font-family: var(--font-b); font-weight: 500; font-size: 12.5px; line-height: 1.35;
text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(26, 43, 74, .25); opacity: 0; visibility: hidden; transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; }
.fr-cta__box::before { content: ''; position: absolute; right: 16px; bottom: calc(100% + 4px); z-index: 4; width: 10px; height: 10px; background: var(--ink);
transform: rotate(45deg); opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s; pointer-events: none; }
.fr-card.is-picked .fr-cta__box::after { content: attr(data-tip-on); }
.fr-cta__box:focus-visible::after, .fr-cta__box:focus-visible::before { opacity: 1; visibility: visible; transform: translateY(0); }
.fr-cta__box:focus-visible::before { transform: rotate(45deg); }
@media (hover: hover) {
.fr-cta__box:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }
.fr-cta__box:hover::before { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .fr-cta__box::after, .fr-cta__box::before { transition: none; } }
/* «+» включает js/cards.js (класс pk-on на ). Без него — на страницах со своей формой «заявка всем»,
без панели или если скрипт не загрузился — «+» нет, кнопка ведёт на страницу франшизы. */
html:not(.pk-on) .fr-cta__box { display: none; }
html:not(.pk-on) .fr-cta__btn { padding-right: 14px; border-radius: 9px; }
/* --------------------------- КАРТОЧКА НА ТЕЛЕФОНЕ --------------------------- */
/* В списках (каталог, категория, город, подборка, «Похожие») карточка на телефоне компактная: картинка слева, справа
категория, название и два показателя, под ними строка с метками и кнопка. Высота — около 200 px вместо 466: на
экран помещаются три франшизы, а не одна. На главной карточки листаются вбок (.hm-popular) и остаются высокими. */
@media (max-width: 560px) {
:not(.hm-popular) > .fr-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
:not(.hm-popular) > .fr-grid > .fr-card--m { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__media { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 4 / 3; margin: 0; border-radius: 10px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__media .fr-card__logo-ph { width: 44px; height: 44px; font-size: 20px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__cat,
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__name,
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta { grid-column: 2; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__cat { margin: 1px 0 2px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__name { margin: 0 0 6px; font-size: 16px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__tag { display: none; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta { margin: 0; padding: 0; border-top: 0; gap: 3px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta .fr-card__metarow span { font-size: 12.5px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta .fr-card__metarow b { font-size: 14px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__foot,
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__cta { grid-column: 1 / -1; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__foot { margin: 10px 0 8px; }
}
/* версия 96: на экране до 380 px картинка компактной карточки уже — четырём показателям справа нужна ширина,
иначе «Прибыль в мес. 1 250 000 ₽» не помещается в строку; до 340 px — ещё уже, а показатели чуть мельче */
@media (max-width: 380px) {
:not(.hm-popular) > .fr-grid > .fr-card--m { grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; }
}
@media (max-width: 340px) {
:not(.hm-popular) > .fr-grid > .fr-card--m { grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta .fr-card__metarow { gap: 6px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta .fr-card__metarow span { font-size: 12px; }
:not(.hm-popular) > .fr-grid > .fr-card--m > .fr-card__meta .fr-card__metarow b { font-size: 13px; }
}
/* --------------------------- ТИП КАРТОЧКИ --------------------------- */
/* Архивная франшиза (App\Franchise\CardType): серая пометка вместо «Проверено», приглушённый логотип. */
.fr-card__badge--archive { background: #e5e7eb; color: #4b5563; }
.fr-card--archive .fr-card__logo, .fr-card--archive .fr-card__medialogo, .fr-card--archive .fr-card__media .fr-card__logo-ph { filter: grayscale(1); opacity: .65; }
.fr-card--archive .fr-card__name { color: var(--ink-soft); }
/* ============================================================
ГЛАВНАЯ: первый экран со ссылками и стеной логотипов, быстрый подбор, бюджет,
подборки под ситуацию, шаги, истории, города, блок для франчайзеров (/index.php).
Только новые классы — существующие блоки и другие страницы не затронуты.
============================================================ */
.hm-quick { font-family: var(--font-b); color: var(--ink); }
/* фон секций на главной чередуется: серый (фон страницы) и белый */
.hm-section--w { background: var(--surface); }
.hm-note { color: var(--muted); font-size: 13px; }
.hm-more { display: flex; justify-content: center; margin-top: 26px; }
.hm-btn--ghost { background: var(--surface); color: var(--btn); border: 1.5px solid rgba(13,75,160,.45); }
.hm-btn--ghost:hover { background: var(--btn); color: #fff; border-color: var(--btn); }
/* ---- первый экран ---- */
/* заголовок длиннее прежнего — кегль чуть меньше, чтобы на большом экране он занимал три строки, а не четыре */
.hm-hero .hm-hero__title { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; }
.hm-hero .hm-finder { max-width: 700px; }
/* три списка делят строку поровну, кнопка — по своей ширине; не помещаются — переносятся */
.hm-hero .hm-finder__sel { flex: 1 1 0; min-width: 140px; padding-right: 34px; text-overflow: ellipsis; }
.hm-hero__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.hm-hero__link { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: var(--green-deep); text-decoration: none; }
.hm-hero__link:hover { color: var(--green); }
.hm-hero__link--muted { color: var(--ink-soft); font-weight: 600; }
/* преимущества портала — полоса под первым экраном во всю ширину. Пункт (.hm-point): иконка набора сайта на белой
плитке, заголовок и пояснение. Колонки равные, между ними тонкая черта; на планшете — 2×2, на телефоне — списком. */
.hm-hero__band { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(27,106,229,.07), rgba(27,106,229,.03)); }
.hm-hero__points { list-style: none; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.hm-hero__points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* версия 169: число пунктов задаёт site.config.php → usp.home — одна или две ячейки тоже на всю ширину полосы */
.hm-hero__points--1 { grid-template-columns: minmax(0, 1fr); }
.hm-hero__points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-point { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 22px 0; }
.hm-point + .hm-point::before { content: ''; position: absolute; left: -14px; top: 22px; bottom: 22px; width: 1px; background: rgba(26,43,74,.10); }
.hm-point__ico { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--green-deep);
background: var(--surface); border: 1px solid rgba(27,106,229,.16); box-shadow: 0 4px 14px rgba(27,106,229,.10); }
.hm-point__ico .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.hm-point__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-point__h { font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.hm-point__d { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
/* стена логотипов франшиз (вместо декоративной панели, когда логотипов не меньше шести) */
.hm-wall { border-radius: 22px; padding: 22px; box-shadow: var(--shadow-h);
background:
radial-gradient(60% 60% at 70% 30%, rgba(27,106,229,.35), transparent 70%),
radial-gradient(50% 50% at 20% 80%, rgba(240,164,49,.30), transparent 70%),
linear-gradient(135deg, #16294a, #0f1d33); }
.hm-wall__h { font-family: var(--font-d); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #c9d6ec; margin-bottom: 14px; }
.hm-wall__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* логотип вписывается в ячейку целиком: размеры заданы от самой ячейки, а не в процентах от высоты строки */
.hm-wall__cell { position: relative; display: block; aspect-ratio: 3 / 2; background: #fff; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.hm-wall__cell:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.hm-wall__cell img { position: absolute; left: 12%; top: 14%; width: 76%; height: 72%; object-fit: contain; }
.hm-wall__all { display: inline-block; margin-top: 16px; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; }
.hm-wall__all:hover { text-decoration: underline; }
/* ---- «Франшизы месяца»: баннеры Premium-франшиз в первом экране (вместо стены логотипов, когда баннеры есть) ---- */
/* С этим блоком первый экран делится пополам: баннеру нужна ширина, иначе текст на нём не прочитать. */
.hm-hero__inner--month { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.hm-hero__inner--month .hm-hero__title { font-size: clamp(28px, 3.3vw, 42px); }
/* в половине экрана три списка и кнопка в одну строку не помещаются: кнопка — отдельной строкой во всю ширину */
.hm-hero__inner--month .hm-finder .hm-btn { flex: 1 1 100%; }
.hm-month { min-width: 0; border-radius: 22px; padding: 20px 20px 18px; box-shadow: var(--shadow-h);
background:
radial-gradient(60% 60% at 70% 30%, rgba(27,106,229,.35), transparent 70%),
radial-gradient(50% 50% at 20% 80%, rgba(240,164,49,.30), transparent 70%),
linear-gradient(135deg, #16294a, #0f1d33); }
.hm-month__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 12px; }
.hm-month__h { margin: 0; }
.hm-month__nav { display: flex; gap: 6px; }
.hm-month__nav[hidden], .hm-month__dots[hidden] { display: none; }
/* версия 169: пауза автосмены — значок «пауза», после остановки — «воспроизвести» */
.hm-month__pause[hidden] { display: none; }
.hm-month__pause { display: inline-grid; place-items: center; }
.hm-month__pause .hm-month__play-i, .hm-month__pause.is-paused .hm-month__pause-i { display: none; }
.hm-month__pause.is-paused .hm-month__play-i { display: block; }
.hm-month__arrow { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; transition: background .15s ease; }
.hm-month__arrow:hover, .hm-month__arrow:focus-visible { background: rgba(255,255,255,.28); outline: none; }
/* лента: по одному баннеру на экран, листается прокруткой с «прилипанием»; полоса прокрутки скрыта */
.hm-month__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 14px; }
.hm-month__track::-webkit-scrollbar { display: none; }
.hm-month__track:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 3px; }
.hm-month__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: #fff; }
/* рамка 2:1; картинка другой пропорции показывается целиком, поля заполняет её размытая копия (--cover ставит страница) */
.hm-month__pic { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: #0f1d33; }
.hm-month__pic::before { content: ''; position: absolute; inset: -24px; background: var(--cover, none) center / cover no-repeat; filter: blur(20px) brightness(.8); }
.hm-month__pic img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.hm-month__mark { position: absolute; top: 8px; right: 10px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(15,29,51,.6); padding: 3px 7px; border-radius: 6px; }
/* у франшизы нет ни баннера, ни «Картинки для анонса»: логотип на светлом поле (как в стене логотипов)… */
.hm-month__pic--logo { display: grid; place-items: center; background: linear-gradient(160deg, #fff 55%, #eaf1fc); }
.hm-month__pic--logo::before, .hm-month__pic--ph::before { content: none; }
.hm-month__pic--logo img { width: auto; height: auto; max-width: 58%; max-height: 54%; }
/* …а нет и логотипа — первая буква названия */
.hm-month__pic--ph { display: grid; place-items: center;
background: radial-gradient(70% 90% at 85% 10%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, #1b6ae5, #0d4ba0); }
.hm-month__letter { font-family: var(--font-d); font-weight: 800; font-size: clamp(64px, 9vw, 120px); line-height: 1; color: #fff; }
.hm-month__cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hm-month__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-month__name { font-family: var(--font-d); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hm-month__meta { color: #c9d6ec; font-size: 14px; line-height: 1.4; }
.hm-month__go { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--green-deep); font-size: 18px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.hm-month__slide:hover .hm-month__go { transform: translateX(3px); }
.hm-month__slide:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 3px; border-radius: 14px; }
.hm-month__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.hm-month__all { margin-top: 0; margin-left: auto; }
.hm-month__dots { display: flex; align-items: center; gap: 2px; }
/* точка — маленькая, а область нажатия 24×24 */
.hm-month__dot { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hm-month__dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.35); transition: width .2s ease, background .2s ease; }
.hm-month__dot.is-active::before { width: 20px; background: #fff; }
.hm-month__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .hm-month__go, .hm-month__dot::before { transition: none; } }
/* уже 1024 px половины экрана не хватает ни поиску, ни баннеру: блок встаёт под текст во всю ширину
(реклама — на телефоне его не прячем, в отличие от стены логотипов) */
@media (max-width: 1023px) {
.hm-hero__inner--month { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* преимущества: уже 1024 px четыре пункта в строку не помещаются — сетка 2×2 */
@media (max-width: 1023px) {
.hm-hero__points, .hm-hero__points--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; padding-bottom: 8px; }
.hm-point { padding: 14px 0; }
.hm-point + .hm-point::before { top: 14px; bottom: 14px; }
.hm-point:nth-child(odd)::before { content: none; }
.hm-hero__points--1 { grid-template-columns: minmax(0, 1fr); }
}
/* ---- быстрый подбор под первым экраном: две колонки ссылок — «Подборки» и «Часто ищут» ---- */
/* У колонки заголовок и ссылка «все» справа; ссылки — «таблетки» с иконкой набора сайта. Колонки делит тонкая черта;
правая шире: в ней ссылок больше. Одна колонка (.hm-quick__grid--one) занимает всю ширину. */
.hm-quick { background: var(--surface); border-bottom: 1px solid var(--line); padding: 30px 0 32px; }
.hm-quick__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 36px; }
.hm-quick__grid--one { grid-template-columns: minmax(0, 1fr); }
.hm-quick__col { min-width: 0; }
.hm-quick__col + .hm-quick__col { border-left: 1px solid var(--line); padding-left: 36px; }
.hm-quick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.hm-quick__h { font-family: var(--font-d); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.hm-quick__all { font-weight: 600; font-size: 14px; color: var(--green-deep); text-decoration: none; white-space: nowrap; }
.hm-quick__all:hover { color: var(--green); }
.hm-quick__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--bg);
border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px 8px 11px; text-decoration: none; white-space: nowrap;
transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease; }
.hm-chip .ic { width: 18px; height: 18px; color: var(--green-deep); }
.hm-chip:hover { border-color: rgba(27,106,229,.55); color: var(--green-deep); background: var(--surface); box-shadow: 0 4px 14px rgba(27,106,229,.12); }
.hm-chip:focus-visible, .hm-quick__all:focus-visible { outline: 3px solid rgba(27,106,229,.45); outline-offset: 2px; }
.hm-chip i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
/* ---- категории с числом франшиз ---- */
.cat-grid--count { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cat-tile__body { display: flex; flex-direction: column; min-width: 0; }
.cat-tile__count { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* ---- популярные франшизы и новинки: Premium-карточки и остальные — в одной сетке ---- */
/* Версия 129: в ряду три карточки (было до четырёх); до 768 px — две; на телефоне блок листается вбок (ниже).
Основное правило — две колонки, три включаются от 768 px: на дробной ширине между 560 и 561 px (масштаб
браузера), где не действует ни правило телефона, ни правило планшета, три узкие колонки не появятся. */
.hm-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hm-popular > .fr-grid { display: contents; }
@media (min-width: 768px) {
.hm-popular { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 560.02px) and (max-width: 767.98px) {
/* блок из одного ряда («Новинки», три карточки): в две колонки третья осталась бы одна — не выводится */
.hm-popular--row .fr-card:nth-child(n+3) { display: none; }
}
/* ---- по бюджету: шкала ---- */
/* Пороги — в одной панели по возрастанию, между ними тонкая черта. Над суммой столбики, как у уровня сигнала:
закрашено столько, каков порог по счёту (высоту столбика ставит страница). На узком экране — строками. */
.hm-budget { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line);
border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.hm-budget__tile { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 20px; text-decoration: none; color: var(--ink); transition: background .15s ease; }
.hm-budget__tile + .hm-budget__tile { border-left: 1px solid var(--line); }
.hm-budget__tile:hover { background: rgba(27,106,229,.06); }
.hm-budget__tile:focus-visible { outline: 3px solid rgba(27,106,229,.45); outline-offset: -3px; }
.hm-budget__bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.hm-budget__bars i { flex: 0 0 7px; border-radius: 3px; background: rgba(27,106,229,.15); transition: background .15s ease; }
.hm-budget__bars i.is-on { background: var(--green); }
.hm-budget__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-budget__sum { font-family: var(--font-d); font-weight: 800; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.hm-budget__count { color: var(--green-deep); font-weight: 600; font-size: 14px; }
/* ---- подборки под ситуацию ---- */
/* Сетка из 12 долей: ширина карточки зависит от их числа (.hm-aud--N ставит страница), чтобы в рядах не оставалось
пустых мест: 2 — по две, 3 и 6 — по три, 4 и 8 — по четыре, 5 — три и две, 7 — четыре и три. */
.hm-aud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.hm-aud__card { grid-column: span 3; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hm-aud--2 .hm-aud__card, .hm-aud--5 .hm-aud__card:nth-child(n+4) { grid-column: span 6; }
.hm-aud--3 .hm-aud__card, .hm-aud--5 .hm-aud__card, .hm-aud--6 .hm-aud__card, .hm-aud--7 .hm-aud__card:nth-child(n+5) { grid-column: span 4; }
.hm-aud__card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(27,106,229,.35); }
/* значок подборки — иконка набора на плитке (css/layout.css, .ic-plate) */
.hm-aud__ico { margin-bottom: 8px; }
.hm-aud__name { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.hm-aud__desc { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.hm-aud__count { margin-top: auto; padding-top: 10px; color: var(--green-deep); font-weight: 600; font-size: 14px; }
/* ---- как выбрать франшизу: шаги цепочкой ---- */
/* Шаг — иконка набора сайта на белой плитке с номером в углу, заголовок и пояснение; между плитками пунктир.
На узком экране цепочка идёт сверху вниз. */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.hm-step { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hm-step:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: 72px; right: -16px; border-top: 2px dashed rgba(27,106,229,.30); }
.hm-step__mark { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--green-deep);
background: var(--surface); border: 1px solid rgba(27,106,229,.18); box-shadow: 0 4px 14px rgba(27,106,229,.10); }
.hm-step__mark .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.hm-step__n { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--green);
color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 12.5px; line-height: 1; box-shadow: 0 2px 6px rgba(27,106,229,.35); }
.hm-step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-step__h { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.3; }
.hm-step__d { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
/* ---- истории франчайзи ---- */
.hm-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.hm-story { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.hm-story:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.hm-story__head { display: flex; align-items: center; gap: 12px; }
.hm-story__photo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; object-fit: cover; }
.hm-story__photo--ph { display: grid; place-items: center; background: linear-gradient(135deg, #16294a, #0f1d33); color: #fff;
font-family: var(--font-d); font-weight: 800; font-size: 22px; }
.hm-story__who { display: flex; flex-direction: column; min-width: 0; }
.hm-story__who b { font-family: var(--font-d); font-weight: 700; font-size: 15px; }
.hm-story__who span { color: var(--muted); font-size: 13px; }
.hm-story__title { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.3; }
.hm-story__text { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.hm-story__more { margin-top: auto; padding-top: 4px; color: var(--green-deep); font-weight: 600; font-size: 14px; }
/* (отдельного блока «Города» на главной больше нет: города — в панели подбора, .hm-pick__cities) */
/* ---- франчайзерам: светлая панель внутри секции (раньше — тёмная полоса во всю ширину) ---- */
.hm-b2b { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px 44px; padding: 36px 40px; border-radius: 22px;
font-family: var(--font-b); color: var(--ink); border: 1px solid rgba(27,106,229,.18);
background: radial-gradient(70% 150% at 100% 0, rgba(27,106,229,.16), transparent 60%), linear-gradient(135deg, #eaf1fd, #f5f8ff); }
/* первая строка — текст и кнопка, вторая — ссылки на услуги */
.hm-b2b__copy { flex: 1 1 420px; min-width: 0; max-width: 640px; }
.hm-b2b__eyebrow { margin: 0 0 8px; font-family: var(--font-d); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-deep); }
.hm-b2b .hm-b2b__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); }
.hm-b2b__lead { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.hm-b2b__acts { flex: 0 0 auto; }
.hm-b2b__links { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
/* «таблетка» на цветной панели — белая */
.hm-chip--w { background: var(--surface); border-color: rgba(27,106,229,.20); }
@media (max-width: 1100px) {
.hm-hero .hm-finder .hm-btn { flex: 1 1 100%; } /* кнопка — отдельной строкой во всю ширину, а не обрубком слева */
.hm-hero .hm-finder__sel { padding-left: 12px; padding-right: 28px; background-position: right 10px center; }
}
/* три списка в одну строку в узкой колонке: шрифт и поля чуть меньше — «Любой бюджет» не обрезается многоточием */
@media (min-width: 901px) and (max-width: 1100px) {
.hm-hero .hm-finder__sel { font-size: 14px; padding-left: 10px; padding-right: 26px; background-position: right 9px center; }
}
/* шкала бюджета: до 1100 px — плотнее; уже 820 px пороги в строку не помещаются — идут строками сверху вниз */
@media (max-width: 1100px) {
.hm-budget__tile { padding: 18px 16px 16px; }
.hm-budget__sum { font-size: 17px; }
}
@media (max-width: 820px) {
.hm-budget { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
.hm-budget__tile { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; }
.hm-budget__tile + .hm-budget__tile { border-left: 0; border-top: 1px solid var(--line); }
.hm-budget__bars { flex: 0 0 auto; height: 26px; }
.hm-budget__bars i { flex-basis: 6px; }
.hm-budget__text { flex: 1 1 auto; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-budget__sum { font-size: 18px; }
.hm-budget__count { white-space: nowrap; }
}
@media (max-width: 900px) {
.hm-wall { display: none; } /* как декоративная панель: на узком экране первый экран — только текст и поиск */
/* подборки — в две колонки; при нечётном числе последняя карточка занимает всю строку */
.hm-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-aud .hm-aud__card:nth-child(n) { grid-column: auto; }
.hm-aud .hm-aud__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* шаги — цепочкой сверху вниз: плитка слева, текст справа, пунктир между плитками */
.hm-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hm-step { flex-direction: row; gap: 16px; padding-bottom: 24px; }
.hm-step:last-child { padding-bottom: 0; }
.hm-step:not(:last-child)::after { top: 64px; bottom: 8px; left: 27px; right: auto; border-top: 0; border-left: 2px dashed rgba(27,106,229,.30); }
.hm-step__body { padding-top: 4px; }
/* панель подбора: города — под приглашением */
.hm-pick { margin-top: 32px; }
.hm-pick--cities { grid-template-columns: minmax(0, 1fr); }
.hm-pick__main, .hm-pick__cities { padding: 28px 28px; }
.hm-pick__cities { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
.hm-b2b { padding: 30px 28px; }
/* быстрый подбор: колонки друг под другом; строка ссылок листается пальцем от края до края экрана, а не
занимает пол-экрана (отрицательные поля возвращают ей поля страницы) */
.hm-quick { padding: 22px 0 20px; }
.hm-quick__grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.hm-quick__col + .hm-quick__col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.hm-quick__head { margin-bottom: 12px; }
.hm-quick__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-quick__chips::-webkit-scrollbar { display: none; }
.hm-chip { flex: 0 0 auto; }
}
@media (max-width: 560px) {
.hm-head { flex-wrap: wrap; }
.hm-month { padding: 16px 14px 14px; border-radius: 18px; }
.hm-month__name { font-size: 16px; }
.hm-month__meta { font-size: 13px; }
/* преимущества — списком: иконка слева, справа заголовок и пояснение; между пунктами тонкая черта */
.hm-hero__points, .hm-hero__points--2, .hm-hero__points--3 { grid-template-columns: minmax(0, 1fr); padding-top: 6px; padding-bottom: 6px; }
.hm-point { padding: 12px 0; gap: 12px; }
.hm-point + .hm-point::before, .hm-point:nth-child(odd)::before { content: ''; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
.hm-point:first-child::before { content: none; }
.hm-point__ico { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
.hm-point__ico .ic { width: 23px; height: 23px; }
.hm-quick__h { font-size: 17px; }
.hm-hero .hm-finder__sel { flex-basis: 100%; }
.hm-aud { gap: 10px; }
.hm-aud__card { padding: 14px; }
.hm-aud__name { font-size: 15px; }
.hm-aud__desc { display: none; }
.hm-budget__tile { padding: 13px 14px; gap: 14px; }
.hm-budget__sum { font-size: 17px; }
.hm-budget__more { display: none; } /* на телефоне от «Смотреть франшизы →» остаётся стрелка */
.hm-pick { border-radius: 18px; }
.hm-pick__main, .hm-pick__cities { padding: 24px 20px; }
.hm-pick .hm-btn { width: 100%; }
.hm-step__mark { flex-basis: 50px; width: 50px; height: 50px; border-radius: 14px; }
.hm-step:not(:last-child)::after { top: 58px; left: 24px; }
/* категории — в две колонки, без значка */
.hm-section .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hm-section .cat-tile { padding: 12px 14px; }
.hm-section .cat-tile__ic { display: none; }
/* карточки франшиз на телефоне листаются вбок: восемь карточек друг под другом занимали несколько экранов */
.hm-popular { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 6px 20px 12px;
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-popular::-webkit-scrollbar { display: none; }
.hm-popular .fr-card { flex: 0 0 82%; scroll-snap-align: center; }
.hm-b2b { padding: 26px 20px; border-radius: 18px; }
.hm-b2b__acts, .hm-b2b__acts .hm-btn { width: 100%; }
.hm-more .hm-btn { width: 100%; }
}
/* самый узкий экран (320 px): длинная сумма («до 5 000 000 ₽») переносится, а не раздвигает страницу */
@media (max-width: 380px) {
.hm-aud__card { padding: 12px; } /* длинное слово («Антикризисные») помещается в карточку целиком */
.hm-aud__name { font-size: 14px; }
.hm-budget__tile { padding: 12px; gap: 12px; }
.hm-budget__sum { font-size: 16px; white-space: normal; }
}
/* ============================================================
ВЕРСИЯ 105: ШИРОКАЯ КАРТОЧКА ФРАНШИЗЫ
Шаблон news.list `franchise_card` с параметром CARD_VIEW = 'wide' (разметка карточки — wide.php рядом с шаблоном).
Список идёт в одну колонку (.fr-list), карточка во всю ширину (.fr-card--w): слева баннер или логотип, тот, кто
ответит на заявку, отметка о проверке и факты о компании; справа категория, название с коротким описанием,
начало подробного описания, шесть показателей и крупная кнопка заявки. Вид включает настройка catalog.card_view.
До 900 px колонки складываются в одну, порядок блоков задан свойством order.
============================================================ */
.fr-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fr-list + .fr-list, .fr-grid + .fr-list, .fr-list + .fr-grid { margin-top: 18px; }
.fr-card--w { --w-muted: #5f6b82; /* подписи: темнее --muted, на светлой плашке читаются уверенно */
display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 24px; padding: 16px; box-shadow: var(--shadow); }
/* большая карточка не «подпрыгивает» под курсором и не красит кнопку, пока курсор не на ней самой */
.fr-card--w:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-h); }
.fr-card--w.is-picked, .fr-card--w.is-picked:hover { border-color: #d9480f; }
.fr-w__side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.fr-w__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 4px 0 0; }
/* картинка: баннер 15:8 (то же соотношение, что у обычной карточки) или логотип на светлой подложке */
.fr-w__media { position: relative; display: grid; place-items: center; aspect-ratio: 15 / 8; border-radius: 12px; overflow: hidden; background: #eef2f8; }
.fr-w__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-w__media--logo { aspect-ratio: auto; flex: 1 1 180px; min-height: 180px; }
/* высота логотипа — в пикселях: у блока без заданной высоты проценты не действуют, высокий логотип вылезал бы за подложку */
.fr-w__logo { display: block; width: auto; height: auto; max-width: 56%; max-height: 140px; object-fit: contain; }
.fr-w__media .fr-card__logo-ph { width: 84px; height: 84px; border-radius: 18px; font-size: 38px; }
.fr-w__media:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
.fr-card--w.fr-card--archive .fr-w__logo, .fr-card--w.fr-card--archive .fr-w__banner,
.fr-card--w.fr-card--archive .fr-w__media .fr-card__logo-ph { filter: grayscale(1); opacity: .65; }
/* кто ответит на заявку и отметка о проверке (или оценка по отзывам) */
.fr-w__people { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-w__person, .fr-w__trust { flex: 1 1 220px; min-width: 0; box-sizing: border-box; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.fr-w__person { display: flex; align-items: center; gap: 12px; }
.fr-w__trust { display: flex; flex-direction: column; justify-content: center; }
.fr-w__ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
background: #dbe5f3; color: var(--ink-soft); font-family: var(--font-d); font-weight: 800; font-size: 18px; line-height: 1; }
.fr-w__ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fr-w__ptext { display: block; min-width: 0; }
.fr-w__ptext b, .fr-w__trust b { display: flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.fr-w__ptext i, .fr-w__trust i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
/* юридическое лицо и дата проверки: до двух строк, длинное название обрезается */
.fr-w__trust i { color: var(--w-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.fr-w__shield { flex: 0 0 auto; color: var(--green); }
.fr-w__star { flex: 0 0 auto; color: var(--amber); }
/* факты: города, год запуска франшизы, год основания */
.fr-w__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-w__fact { flex: 1 1 110px; min-width: 0; box-sizing: border-box; background: var(--bg); border-radius: 12px; padding: 10px 14px; }
.fr-w__fact b { display: flex; align-items: center; gap: 5px; font-family: var(--font-d); font-weight: 700; font-size: 16px; line-height: 1.3; white-space: nowrap; }
.fr-w__fact span { display: block; font-size: 12px; line-height: 1.3; color: var(--w-muted); }
/* правая колонка */
.fr-w__top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.fr-w__labels { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fr-w__cat { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--green-deep); }
.fr-card--w.fr-card--archive .fr-w__cat { color: var(--muted); }
.fr-card--w .fr-card__badge { position: static; white-space: nowrap; }
.fr-card--w .fr-card__acts { position: static; flex: 0 0 auto; }
.fr-card--w .fr-act { width: 44px; height: 44px; }
.fr-card--w .fr-act__i { font-size: 18px; }
/* название — ссылка на страницу франшизы, под ним короткое описание тем же кеглем */
.fr-w__title { margin: 0; font-family: var(--font-d); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.fr-w__title a { color: var(--green); text-decoration: none; }
.fr-w__title a:hover { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.fr-w__title a:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; border-radius: 4px; }
.fr-w__title span { display: block; }
.fr-card--w.fr-card--archive .fr-w__title a { color: var(--ink-soft); }
.fr-w__desc { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* показатели: шесть плиток, инвестиции выделены */
.fr-w__tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-w__tile { flex: 1 1 150px; min-width: 0; box-sizing: border-box; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.fr-w__tile span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--w-muted); }
.fr-w__tile b { display: block; margin-top: 2px; font-family: var(--font-d); font-weight: 800; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; }
.fr-w__tile--main { background: #eef4ff; }
.fr-w__tile--main span { color: var(--ink-soft); }
.fr-w__tile--main b { color: var(--green-deep); }
.fr-w__tile.is-empty b { color: var(--w-muted); font-weight: 700; }
/* версия 128: четыре показателя (без «Прибыли» и «Точек в сети») — по два в ряд на любой ширине: в четыре
колонки сумма вида «от 12 500 000 ₽» на планшете не помещается, а в три четвёртый показатель остаётся один */
.fr-w__tiles.fr-w__tiles--n4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* кнопка заявки: та же двойная кнопка, что у обычной карточки, но крупнее */
.fr-w__cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fr-w__note { font-size: 13px; line-height: 1.4; color: var(--w-muted); text-align: center; }
.fr-card--w .fr-cta { margin: 0; min-height: 60px; border-radius: 12px; }
.fr-card--w:hover .fr-cta { background: var(--btn); border-color: var(--btn); }
.fr-card--w .fr-cta:hover { background: var(--btn-deep); border-color: var(--btn-deep); }
.fr-card--w.is-picked .fr-cta, .fr-card--w.is-picked:hover .fr-cta, .fr-card--w.is-picked .fr-cta:hover { background: #d9480f; border-color: #d9480f; }
.fr-card--w .fr-cta__btn { font-family: var(--font-d); font-weight: 700; font-size: 17px; padding: 14px 12px 14px 18px; border-radius: 11px 0 0 11px; }
.fr-card--w .fr-cta__box { flex-basis: 60px; border-radius: 0 11px 11px 0; }
html:not(.pk-on) .fr-card--w .fr-cta__btn { padding-right: 18px; border-radius: 11px; }
/* карточка, которая заявок не принимает (архив, справочная): вместо кнопки — ссылка на страницу */
.fr-w__more { display: flex; align-items: center; justify-content: center; min-height: 52px; box-sizing: border-box; padding: 10px 18px;
border: 1px solid rgba(27, 106, 229, .35); border-radius: 12px; color: var(--green-deep); font-family: var(--font-d); font-weight: 700; font-size: 16px;
text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.fr-w__more:hover { background: var(--btn); border-color: var(--btn); color: #fff; }
.fr-w__more:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
/* Плитки «Подобрать франшизу» и «Не нашли подходящую?» — полосой во всю ширину списка: и среди широких карточек,
и (версия 129) в сетке. В сетке плитка раньше занимала ячейку размером с карточку и сдвигала остальные: 24 карточки
и одна-две плитки не делились на ряды, последний ряд страницы был неполным. Место полосы — после целого числа
рядов (шаблон franchise_card: кратное шести). */
.fr-grid > .fr-tile { grid-column: 1 / -1; }
.fr-list > .fr-tile, .fr-grid > .fr-tile { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 20px; padding: 18px 22px; }
.fr-list > .fr-tile .fr-tile__h, .fr-grid > .fr-tile .fr-tile__h { flex: 0 0 auto; }
.fr-list > .fr-tile .fr-tile__text, .fr-grid > .fr-tile .fr-tile__text { flex: 1 1 320px; min-width: 0; }
.fr-list > .fr-tile .fr-tile__btn, .fr-grid > .fr-tile .fr-tile__btn { flex: 0 0 auto; margin-top: 0; }
/* Планшет и телефон: обёртки колонок «растворяются» (display: contents), блоки карточки встают в общий порядок —
картинка, название, показатели, представитель, факты, кнопка. */
@media (max-width: 900px) {
.fr-w__side, .fr-w__main { display: contents; }
.fr-w__media { grid-area: media; order: 1; }
.fr-w__top { grid-area: top; order: 2; }
.fr-w__title { grid-area: title; order: 3; }
.fr-w__desc { grid-area: desc; order: 4; }
.fr-w__tiles { grid-area: tiles; order: 5; }
.fr-w__people { grid-area: people; order: 6; }
.fr-w__facts { grid-area: facts; order: 7; }
.fr-w__cta { grid-area: cta; order: 8; margin-top: 4px; }
.fr-w__media--logo { flex: 0 0 auto; min-height: 0; }
}
/* планшет: картинка слева, название и описание справа от неё, остальное — во всю ширину; показатели по три в ряд.
Границы планшета и телефона — 561 / 560.98 px, без зазора: при дробной ширине окна (масштаб браузера) между 560
и 561 px не действовало ни одно из правил раскладки и блоки карточки ложились друг на друга (версия 116).
Расстояние между строками — отступами блоков, а не gap: описания, представителя или фактов у карточки может
не быть, и пустая строка сетки с двумя gap давала двойной промежуток (версия 116). */
@media (max-width: 900px) and (min-width: 561px) {
.fr-card--w { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 20px;
grid-template-areas: "media top" "media title" "media desc" "tiles tiles" "people people" "facts facts" "cta cta"; }
.fr-w__title, .fr-w__desc, .fr-w__tiles, .fr-w__people, .fr-w__facts { margin-top: 12px; }
.fr-w__cta { margin-top: 16px; }
.fr-w__media { align-self: start; }
.fr-w__media--logo { aspect-ratio: 15 / 8; }
.fr-w__logo { max-height: 110px; }
.fr-w__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* телефон: одна колонка (560.98 — см. комментарий к планшету) */
@media (max-width: 560.98px) {
.fr-list { gap: 12px; }
.fr-card--w { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.fr-w__media--logo { aspect-ratio: 3 / 1; }
.fr-w__media--logo .fr-w__logo { max-height: 64px; }
.fr-w__media--logo .fr-card__logo-ph { width: 64px; height: 64px; border-radius: 14px; font-size: 30px; }
.fr-w__top { min-height: 40px; }
.fr-card--w .fr-act { width: 40px; height: 40px; }
.fr-w__title { font-size: 20px; }
.fr-w__desc { font-size: 15px; line-height: 1.5; -webkit-line-clamp: 2; line-clamp: 2; }
/* показатели — строго по два в ряд: три не помещаются, а один в ряду растягивался бы на всю ширину */
.fr-w__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-w__tile { padding: 10px 12px; }
.fr-w__tile b { font-size: 17px; }
.fr-w__person, .fr-w__trust { flex-basis: 100%; padding: 10px 12px; }
/* города и годы на телефоне не показываем: карточка и так длиннее экрана, эти сведения есть на странице франшизы.
Оценку по отзывам (она стоит среди фактов, когда место отметки о доверии занято «Франшиза проверена») — оставляем:
иначе на телефоне у проверенной франшизы рейтинга не было бы нигде (версия 116). */
.fr-w__facts:not(.fr-w__facts--rated), .fr-w__facts--rated .fr-w__fact:not(.fr-w__fact--rating) { display: none; }
.fr-w__note { font-size: 12.5px; }
.fr-card--w .fr-cta { min-height: 54px; }
.fr-card--w .fr-cta__btn { font-size: 16px; padding: 12px 10px 12px 14px; }
.fr-card--w .fr-cta__box { flex-basis: 54px; }
.fr-list > .fr-tile, .fr-grid > .fr-tile { padding: 16px; }
.fr-list > .fr-tile .fr-tile__btn, .fr-grid > .fr-tile .fr-tile__btn { flex: 1 1 100%; }
}
/* самый узкий экран: длинная сумма («от 12 500 000 ₽») не раздвигает плитку. Версия 129: и не выходит за неё —
поля плитки уже, а сумма, которая всё равно не помещается в строку, переносится (раньше вылезала на 3–16 px). */
@media (max-width: 360px) {
.fr-w__tile { padding: 10px; }
.fr-w__tile b { font-size: 15px; white-space: normal; }
.fr-w__tile span { font-size: 12px; }
}
/* ============================================================
ВЕРСИЯ 108: ЗАГОЛОВКИ С ВЫДЕЛЕННЫМ СЛОВОМ
Надзаголовок (.hd-eyebrow) — мелкая строка заглавными над заголовком; выделенное слово (.hd-accent) — тёмно-синее.
Разметку выделения собирает App\Site\Heading. Здесь же — заголовок широкой карточки в том же ключе: категория
заглавными, название крупно и тёмно-синим, короткое описание отдельной строкой. Стили заголовков страницы
каталога — css/catalog.css.
============================================================ */
.hd-eyebrow { margin: 0 0 8px; font-family: var(--font-b); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); }
.hd-eyebrow--sm { margin-bottom: 6px; font-size: 12.5px; }
.hd-accent { color: var(--green-deep); }
.fr-w__cat { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.fr-w__title { font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.fr-w__title a { color: var(--green-deep); }
.fr-w__title a:hover { color: var(--green); }
.fr-w__title span { margin-top: 6px; font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
@media (max-width: 560px) {
.fr-w__title { font-size: 22px; }
.fr-w__title span { margin-top: 4px; font-size: 16px; }
}
/* ============================================================
ВЕРСИЯ 165: «ФРАНШИЗЫ МЕСЯЦА» — БАННЕР ВО ВСЮ КАРТОЧКУ (.hm-month--full, home.month_style = 'full')
Баннер занимает всю карточку: картинка целиком (не обрезается) между плашкой «Франшиза месяца» сверху и подписью
снизу, поля вокруг — её размытая копия. Название, инвестиции, окупаемость и «Подробнее» — поверх картинки на
тёмном градиенте; стрелки — в углу, точки — внизу по центру. Ссылки «Рейтинг франшиз» в блоке нет — он в меню.
============================================================ */
.hm-month__go-t { display: none; }
.hm-month.hm-month--full { position: relative; display: flex; padding: 0; overflow: hidden; min-height: 440px; background: #0f1d33; }
.hm-month--full .hm-month__head { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 3; margin: 0; pointer-events: none; }
.hm-month--full .hm-month__h { padding: 6px 12px; border-radius: 999px; background: rgba(10,18,32,.6); color: #fff; }
.hm-month--full .hm-month__nav { pointer-events: auto; }
.hm-month--full .hm-month__arrow { width: 34px; height: 34px; background: rgba(10,18,32,.55); }
.hm-month--full .hm-month__arrow:hover, .hm-month--full .hm-month__arrow:focus-visible { background: rgba(10,18,32,.8); }
.hm-month--full .hm-month__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hm-month--full .hm-month__track { flex: 1 1 auto; border-radius: 0; }
.hm-month--full .hm-month__track:focus-visible { outline-offset: -3px; border-radius: 22px; } /* снаружи рамку обрезала бы карточка */
.hm-month--full .hm-month__slide { position: relative; gap: 0; min-height: 440px; }
.hm-month--full .hm-month__slide:focus-visible { outline-offset: -4px; border-radius: 22px; }
.hm-month--full .hm-month__pic { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
/* картинка — целиком, между плашкой сверху (64 px) и подписью снизу (120 px) */
.hm-month--full .hm-month__pic img { position: absolute; top: 64px; left: 16px; width: calc(100% - 32px); height: calc(100% - 184px); object-fit: contain; }
.hm-month--full .hm-month__pic--logo img { left: 20%; width: 60%; max-width: none; max-height: none; }
.hm-month--full .hm-month__pic--ph { padding-bottom: 110px; box-sizing: border-box; }
.hm-month--full .hm-month__mark { top: 60px; right: 18px; }
.hm-month--full .hm-month__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; align-items: flex-end; padding: 72px 20px 46px;
background: linear-gradient(180deg, rgba(8,14,26,0), rgba(8,14,26,.9) 55%); }
.hm-month--full.hm-month--one .hm-month__cap { padding-bottom: 20px; }
.hm-month--full .hm-month__name { font-size: 20px; }
.hm-month--full .hm-month__meta { color: #d3dcea; }
.hm-month--full .hm-month__go { flex: 0 0 auto; width: auto; height: 42px; padding: 0 16px; gap: 8px; border-radius: 11px;
font-family: var(--font-d); font-size: 14px; }
.hm-month--full .hm-month__go-t { display: inline; }
.hm-month--full .hm-month__foot { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; justify-content: center; margin: 0; padding: 0; border: 0; pointer-events: none; }
.hm-month--full .hm-month__dots { pointer-events: auto; }
.hm-month--full .hm-month__all { display: none; }
@media (max-width: 560px) {
.hm-month.hm-month--full, .hm-month--full .hm-month__slide { min-height: 380px; }
.hm-month--full .hm-month__head { top: 14px; left: 14px; right: 14px; }
.hm-month--full .hm-month__pic img { top: 58px; left: 12px; width: calc(100% - 24px); height: calc(100% - 190px); }
.hm-month--full .hm-month__cap { gap: 12px; padding: 64px 16px 44px; }
.hm-month--full .hm-month__go { width: 42px; padding: 0; } /* подпись на одной строке — только стрелка */
.hm-month--full .hm-month__go-t { display: none; }
.hm-month--full.hm-month--one .hm-month__cap { padding-bottom: 16px; }
.hm-month--full .hm-month__name { font-size: 17px; }
}
/* ============================================================
ВЕРСИЯ 166: ТЁМНЫЙ ПЕРВЫЙ ЭКРАН (.hm-hero--dark, home.hero_dark)
Фон — тёмно-синий с голубой подсветкой справа и тёплой снизу слева, как обложка презентации и раздела «Всё о
франчайзинге». Текст белый, подбор — на полупрозрачной панели. Полоса под экраном — глубокий синий во всю ширину:
«Портал в цифрах» (.hm-point--stat) и преимущества в одну строку, под ними — откуда цифры.
============================================================ */
.hm-hero.hm-hero--dark { color: #fff; border-bottom: 0;
background:
radial-gradient(55% 75% at 82% 25%, rgba(27,106,229,.40), transparent 70%),
radial-gradient(45% 60% at 5% 100%, rgba(240,164,49,.22), transparent 70%),
linear-gradient(135deg, #16294a 0%, #0f1d33 60%, #0b1628 100%); }
.hm-hero--dark .hm-eyebrow { color: #8fb6ff; font-weight: 700; letter-spacing: .08em; }
.hm-hero--dark .hm-hero__title { color: #fff; }
.hm-hero--dark .hm-hero__title em { color: #7fb0ff; }
.hm-hero--dark .hm-hero__lead { color: #b8c4d8; }
.hm-hero--dark .hm-finder { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none; }
.hm-hero--dark .hm-finder__sel { background-color: #13243f; border-color: rgba(255,255,255,.16); color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239fb0cc' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); }
.hm-hero--dark .hm-finder__sel:focus { border-color: #7fb0ff; }
.hm-hero--dark .hm-finder__sel option { color: var(--ink); background: #fff; }
.hm-hero--dark .hm-finder .hm-btn--accent { background: var(--green); }
.hm-hero--dark .hm-finder .hm-btn--accent:hover { background: #1559c7; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.hm-hero--dark .hm-btn:focus-visible, .hm-hero--dark .hm-finder__sel:focus-visible { outline: 3px solid rgba(127,176,255,.7); outline-offset: 2px; }
.hm-hero--dark .hm-hero__link { color: #fff; }
.hm-hero--dark .hm-hero__link:hover { color: #9cc2ff; }
.hm-hero--dark .hm-hero__link--muted { color: #b8c4d8; }
/* цифры каталога (home.show_counts) и «Портал в цифрах» в колонке — если они всё же там (без полосы) */
.hm-hero--dark .hm-hero__stats b, .hm-hero--dark .hm-hero__stats--live b { color: #fff; }
.hm-hero--dark .hm-hero__stats span, .hm-hero--dark .hm-hero__stats--live span { color: #b8c4d8; }
.hm-hero--dark .hm-hero__stats--live li { border-left-color: #7fb0ff; }
.hm-hero--dark .hm-hero__src { color: #8b9ab3; }
/* баннер и стена логотипов — тёмные карточки на тёмном фоне: светлая кромка и тень глубже */
.hm-hero--dark .hm-month, .hm-hero--dark .hm-wall { box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.hm-hero--dark .hm-hero__art { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* полоса под экраном */
.hm-hero--dark .hm-hero__band { background: #0a1426; border-top: 1px solid rgba(255,255,255,.08); }
.hm-hero--dark .hm-point + .hm-point::before { background: rgba(255,255,255,.10); }
.hm-hero--dark .hm-point__ico { background: rgba(127,176,255,.12); border-color: rgba(127,176,255,.22); box-shadow: none; color: #9cc2ff; }
.hm-hero--dark .hm-point__ico .ic { --ic-accent: #ffc857; }
.hm-hero--dark .hm-point__h { color: #fff; }
.hm-hero--dark .hm-point__d { color: #b8c4d8; }
.hm-point__n { font-family: var(--font-d); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--ink); }
.hm-hero--dark .hm-point__n { color: #fff; }
.hm-hero__points--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hm-hero__points--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; }
.hm-hero__points--6 .hm-point + .hm-point::before { left: -12px; }
.hm-hero__points--6 .hm-point__ico { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
.hm-hero__points--6 .hm-point__ico .ic { width: 22px; height: 22px; }
.hm-hero__points--6 .hm-point { gap: 12px; }
.hm-hero__bandsrc { margin: 0 auto; padding-top: 10px; padding-bottom: 14px; font-size: 12.5px; line-height: 1.45; color: #8b9ab3;
border-top: 1px solid rgba(255,255,255,.07); }
.hm-hero__bandsrc .ps-more { color: #9cc2ff; }
.hm-hero__band--live .hm-hero__points { padding-top: 2px; padding-bottom: 2px; }
.hm-hero__band--live .hm-point { align-items: flex-start; }
.hm-hero__band--live .hm-point__ico { margin-top: 2px; }
/* до 1200 px шесть ячеек в строку не помещаются — по три (цифры сверху, преимущества снизу) */
@media (max-width: 1199px) {
.hm-hero__points--5, .hm-hero__points--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* черта — у каждой ячейки, кроме первой в ряду (правило 2×2 выше снимало её у нечётных) */
.hm-hero__points--5 .hm-point:nth-child(n)::before, .hm-hero__points--6 .hm-point:nth-child(n)::before { content: ''; }
.hm-hero__points--5 .hm-point:nth-child(3n + 1)::before, .hm-hero__points--6 .hm-point:nth-child(3n + 1)::before { content: none; }
}
@media (max-width: 700px) {
.hm-hero__points--5, .hm-hero__points--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-hero__points--5, .hm-hero__points--6 { column-gap: 18px; padding-top: 6px; padding-bottom: 6px; }
.hm-hero__points--5 .hm-point::before, .hm-hero__points--6 .hm-point::before { content: none !important; }
.hm-hero__points--5 .hm-point, .hm-hero__points--6 .hm-point { padding: 12px 0; }
.hm-point__n { font-size: 24px; }
}
@media (max-width: 560px) {
.hm-hero__band--live .hm-point__ico { display: none; } /* в узкой ячейке — только текст */
}
/* End */
/* Start:/bitrix/templates/franchise/css/blog.css?179216064624501*/
/* ============================================================
Блог: листинг + карточка + детальная статья.
Путь: /local/templates/{ШАБЛОН}/css/blog.css
Использует общие токены из layout.css.
============================================================ */
.bl-page, .bl-detail { font-family: var(--font-b); color: var(--ink); padding: 26px 20px 72px; }
/* хлебные крошки */
.bl-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.bl-bc a { color: var(--muted); text-decoration: none; }
.bl-bc a:hover { color: var(--green-deep); }
.bl-bc span { color: var(--muted); } /* разделитель «/» — того же цвета, что в каталоге (раньше был почти не виден) */
.bl-bc b { color: var(--ink); font-weight: 600; }
/* шапка листинга */
.bl-head { margin-bottom: 22px; }
.bl-h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; margin: 0 0 8px; }
.bl-head__sub { color: var(--ink-soft); font-size: 16px; margin: 0; max-width: 640px; }
.bl-h2 { font-family: var(--font-d); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em; margin: 0 0 18px; }
/* чипы рубрик */
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.bl-chip { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink-soft);
background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; text-decoration: none; transition: .15s; }
.bl-chip:hover { border-color: var(--green); color: var(--green-deep); }
.bl-chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
/* полоса «Всё о франчайзинге» (книга /franchayzing/) на общей странице блога */
.bl-guide { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 28px; padding: 18px 22px;
background: linear-gradient(135deg, #eef3ff 0%, #f5f7fa 70%); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: inherit; transition: .18s; }
.bl-guide:hover { box-shadow: var(--shadow-h); border-color: rgba(27,106,229,.35); }
.bl-guide__text { min-width: 0; display: grid; gap: 3px; }
.bl-guide__text b { font-family: var(--font-d); font-weight: 800; font-size: 17px; }
.bl-guide__text span { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.bl-guide__more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); white-space: nowrap; }
.bl-guide__more .ic { transition: transform .2s; }
.bl-guide:hover .bl-guide__more .ic { transform: translateX(4px); }
@media (max-width: 720px) { .bl-guide { grid-template-columns: auto 1fr; } .bl-guide__more { grid-column: 2; justify-self: start; } }
/* промо-статья */
.bl-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--surface);
border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
text-decoration: none; color: inherit; margin-bottom: 36px; transition: .18s; }
.bl-feature:hover { box-shadow: var(--shadow-h); }
/* Обложка промо-статьи не обрезается: картинка всегда 15:8. Когда текст справа выше картинки, поля сверху и снизу
заполняет её размытая копия (адрес — в переменной --cover, её ставит страница блога); без переменной — ровный фон. */
.bl-feature__img { position: relative; overflow: hidden; background: #eef2f8; display: grid; align-items: center; }
.bl-feature__img::before { content: ''; position: absolute; inset: -30px; background: var(--cover, none) center / cover no-repeat; filter: blur(24px); }
.bl-feature__img img { position: relative; width: 100%; height: auto; aspect-ratio: 15 / 8; object-fit: cover; display: block; }
.bl-feature__img .bl-card__img-ph { position: relative; justify-self: center; padding: 60px 0; }
.bl-feature__body { padding: 32px; display: flex; flex-direction: column; }
.bl-feature__tag { align-self: flex-start; font-family: var(--font-d); font-weight: 700; font-size: 12px;
letter-spacing: .04em; text-transform: uppercase; color: var(--green-deep);
background: rgba(27,106,229,.1); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.bl-feature__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.18; margin: 0 0 12px; }
.bl-feature__excerpt { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.bl-feature__meta { color: var(--muted); font-size: 13px; display: flex; gap: 8px; margin-bottom: 18px; }
.bl-feature__more { margin-top: auto; font-family: var(--font-d); font-weight: 700; color: var(--green-deep); }
/* сетка карточек */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
display: flex; flex-direction: column; transition: .18s; }
.bl-card:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); }
/* Обложка статьи везде одной пропорции — 15:8 (загружать 1200×640), как баннер франшизы в списках: карточка,
промо-статья и страница статьи показывают её целиком. Раньше карточка была 16:10 и срезала края обложки. */
.bl-card__img { position: relative; aspect-ratio: 15 / 8; background: #eef2f8; display: grid; place-items: center; }
.bl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* обложки нет — значок статьи из набора иконок */
.bl-card__img-ph { display: grid; place-items: center; color: #9fb2d3; font-size: 34px; line-height: 1; }
.bl-card__img-ph .ic { stroke-width: 1.3; }
.bl-card__rubric { position: absolute; left: 12px; top: 12px; font-family: var(--font-d); font-weight: 600;
font-size: 12px; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 8px; padding: 5px 10px; }
.bl-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.bl-card__title { font-family: var(--font-d); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 8px; }
.bl-card__excerpt { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.bl-card__meta { margin-top: auto; color: var(--muted); font-size: 13px; display: flex; gap: 6px; }
.bl-empty { text-align: center; color: var(--ink-soft); background: var(--surface);
border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 24px; }
/* SEO-текст */
.bl-seo { color: var(--ink-soft); line-height: 1.7; font-size: 15px; }
.bl-seo--top { margin-bottom: 26px; }
.bl-seo--bottom { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.bl-seo h2, .bl-seo h3 { font-family: var(--font-d); color: var(--ink); }
/* ---------------- ДЕТАЛЬНАЯ СТАТЬЯ ---------------- */
.bl-detail { max-width: 1080px; }
/* прогресс чтения */
.bl-progress { position: sticky; top: var(--st-top, 0px); left: 0; height: 3px; background: transparent; z-index: 40; }
.bl-progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width .1s linear; }
.bl-art__head { margin-bottom: 22px; max-width: 760px; }
.bl-art__rubric { display: inline-block; font-family: var(--font-d); font-weight: 600; font-size: 13px;
color: var(--green-deep); text-decoration: none; margin-bottom: 10px; }
.bl-art__rubric:hover { color: var(--green); }
.bl-art__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1.13; letter-spacing: -.02em; margin: 0 0 16px; }
/* строка автора/даты */
.bl-art__byline { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bl-art__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff;
font-family: var(--font-d); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.bl-art__author { color: var(--ink); font-weight: 600; }
.bl-art__byline > span:not(.bl-art__avatar):not(.bl-art__author):not(.bl-art__dot) { position: relative; padding-left: 16px; }
.bl-art__byline > span:not(.bl-art__avatar):not(.bl-art__author):not(.bl-art__dot)::before {
content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--line); transform: translateY(-50%); }
.bl-art__dot { display: none; }
.bl-art__cover { border-radius: 18px; overflow: hidden; margin: 10px 0 30px; max-height: 520px; }
/* версия 178: aspect-ratio 15/8 — пропорции копии обложки (ResizeImageGet 1200×640, EXACT): высота известна до загрузки картинки
и текст под обложкой не сдвигается (CLS). Исходник меньше 1200×640 остаётся своих пропорций — object-fit: cover
подрезает его до тех же 15/8, как и у карточек списка */
.bl-art__cover img { width: 100%; height: auto; display: block; aspect-ratio: 15 / 8; object-fit: cover; }
/* двухколоночный макет: статья + «липкая» колонка */
.bl-art__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.bl-art__main { min-width: 0; max-width: 760px; }
.bl-art__aside { position: relative; }
.bl-aside-sticky { position: sticky; top: calc(var(--st-top, 0px) + 24px); display: flex; flex-direction: column; gap: 18px; }
/* оглавление */
.bl-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.bl-toc__title { font-family: var(--font-d); font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.bl-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bl-toc__item a { display: block; color: var(--ink-soft); text-decoration: none; font-size: 14px; line-height: 1.4;
padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; transition: .12s; }
.bl-toc__item--h3 a { padding-left: 22px; font-size: 13px; color: var(--muted); }
.bl-toc__item a:hover { color: var(--green-deep); background: #f1f5ff; }
.bl-toc__item a.is-active { color: var(--green-deep); border-left-color: var(--green); background: #f1f5ff; font-weight: 600; }
/* мини-CTA в колонке */
.bl-aside-cta { background: linear-gradient(135deg, #eef3ff 0%, #f5f7fa 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.bl-aside-cta__h { font-family: var(--font-d); font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.bl-aside-cta p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.bl-btn--sm { padding: 11px 18px; font-size: 14px; }
/* баннер Premium-франшизы в колонке (include/banner_slot.php, стили .tf-banner — tariffs.css): отступ даёт gap колонки */
.bl-aside-sticky .tf-banner--aside { margin: 0; }
/* автор под статьёй */
.bl-author { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px 20px; margin: 30px 0; box-shadow: var(--shadow); }
.bl-author__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff;
font-family: var(--font-d); font-weight: 700; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.bl-author__name { font-family: var(--font-d); font-weight: 700; font-size: 16px; }
.bl-author__role { color: var(--muted); font-size: 13px; }
/* автор из справочника «Авторы блога»: фото, пара строк о нём, ссылка на его страницу */
.bl-author { align-items: flex-start; }
.bl-author__avatar--img, .bl-art__avatar--img { object-fit: cover; background: #eef2f8; padding: 0; }
.bl-author__body { min-width: 0; }
.bl-author__name a { color: inherit; text-decoration: none; }
.bl-author__name a:hover { color: var(--green-deep); }
.bl-author__about { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 8px 0 0; }
.bl-author__more { display: inline-block; margin-top: 8px; color: var(--green-deep); font-weight: 600; font-size: 14px; text-decoration: none; }
a.bl-art__author { text-decoration: none; }
a.bl-art__author:hover { color: var(--green-deep); }
/* шаринг */
.bl-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bl-share--bottom { margin: 26px 0 4px; }
.bl-share__label { color: var(--muted); font-size: 14px; margin-right: 4px; }
.bl-share__btn { font-family: var(--font-d); font-weight: 600; font-size: 13px; color: var(--ink-soft);
background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: .15s; }
.bl-share__btn:hover { border-color: var(--green); color: var(--green-deep); }
.bl-art__body { font-size: 17px; line-height: 1.75; color: var(--ink); }
/* у подзаголовков свой межстрочный интервал: раньше они наследовали 1,75 от текста — строки двухстрочного заголовка расходились */
.bl-art__body h2 { font-family: var(--font-d); font-weight: 700; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.25; letter-spacing: -.01em; margin: 36px 0 12px; }
.bl-art__body h3 { font-family: var(--font-d); font-weight: 700; font-size: clamp(19px, 2.2vw, 21px); line-height: 1.3; margin: 28px 0 10px; }
.bl-art__body p { margin: 0 0 18px; }
.bl-art__body ul, .bl-art__body ol { margin: 0 0 18px; padding-left: 22px; }
.bl-art__body li { margin-bottom: 8px; }
.bl-art__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
/* широкая таблица прокручивается сама, а не растягивает страницу */
.bl-art__body table { display: block; overflow-x: auto; max-width: 100%; }
.bl-art__body a { color: var(--green-deep); }
.bl-art__body blockquote { margin: 22px 0; padding: 16px 22px; border-left: 3px solid var(--green); background: #f1f5ff; border-radius: 0 12px 12px 0; color: var(--ink-soft); }
.bl-art__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
.bl-tag { font-size: 13px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
/* тег-ссылка: под статьёй и на странице всех тегов (/blog/tags/) */
.bl-tag--link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.bl-tag--link:hover { border-color: var(--green); color: var(--green-deep); }
.bl-tag--link i { font-style: normal; font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 7px; }
.bl-tagcloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bl-tagcloud .bl-tag { font-size: 15px; padding: 9px 14px; background: var(--surface); }
.bl-chip--tags { margin-left: auto; border-style: dashed; }
.bl-head__sub a { color: var(--green-deep); }
/* --- связь с каталогом: категории франшиз у статьи (App\Site\BlogCategories) --- */
.bl-art__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 30px; }
.bl-art__cats-label { font-size: 14px; color: var(--muted); margin-right: 4px; }
.bl-cat { display: inline-flex; align-items: center; font-family: var(--font-d); font-weight: 600; font-size: 14px;
color: var(--green-deep); background: var(--surface); border: 1px solid var(--green); border-radius: 999px;
padding: 7px 14px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.bl-cat:hover { background: var(--green); color: #fff; }
/* блок «Франшизы по теме» на странице статьи (карточки — franchise_card из home.css) */
.bl-theme { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.bl-theme__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bl-theme__all { color: var(--green-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bl-theme__all:hover { color: var(--green); }
/* панель темы на /blog/?category= */
.bl-theme-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -8px 0 22px; padding: 12px 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.bl-theme-bar__label { color: var(--muted); }
.bl-theme-bar__name { font-family: var(--font-d); }
.bl-theme-bar__link { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.bl-theme-bar__link:hover { color: var(--green); }
.bl-theme-bar__reset { margin-left: auto; color: var(--ink-soft); font-size: 14px; }
.bl-art__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
background: linear-gradient(135deg, #eef3ff 0%, #f5f7fa 70%); border: 1px solid var(--line);
border-radius: 18px; padding: 26px 28px; margin: 34px 0; }
.bl-art__cta-h { font-family: var(--font-d); font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.bl-art__cta p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.bl-btn { display: inline-flex; align-items: center; font-family: var(--font-d); font-weight: 700; font-size: 15px;
background: var(--btn); color: #fff; border-radius: 12px; padding: 14px 24px; text-decoration: none; white-space: nowrap; transition: .15s; }
.bl-btn:hover { background: var(--btn-deep); }
.bl-related { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
/* пагинация bitrix (шаблон system.pagenavigation «modern») — лёгкая стилизация */
.bl-page .modern-page-navigation { margin-top: 32px; display: flex; gap: 6px; flex-wrap: wrap; }
.bl-page .modern-page-navigation a,
.bl-page .modern-page-navigation span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.bl-page .modern-page-navigation a:hover { border-color: var(--green); color: var(--green-deep); }
.bl-page .modern-page-navigation .modern-page-current { background: var(--green); border-color: var(--green); color: #fff; }
/* ---------------- АДАПТИВ ---------------- */
@media (max-width: 920px) {
.bl-grid { grid-template-columns: repeat(2, 1fr); }
.bl-feature { grid-template-columns: 1fr; }
.bl-art__layout { grid-template-columns: 1fr; gap: 0; }
.bl-art__aside { order: -1; margin-bottom: 24px; }
.bl-aside-sticky { position: static; }
.bl-aside-cta, .bl-aside-sticky .tf-banner { display: none; } /* в потоке остаётся только оглавление */
.bl-toc { background: var(--bg); box-shadow: none; }
}
@media (max-width: 560px) {
.bl-page, .bl-detail { padding: 20px 16px 56px; }
.bl-grid { grid-template-columns: 1fr; }
.bl-feature__body { padding: 22px; }
.bl-art__body { font-size: 16px; }
.bl-art__cta { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
АВТОРЫ БЛОГА (/blog/authors/): список авторов и страница автора.
============================================================ */
.bl-chip--authors { border-style: dashed; }
.bl-chip--tags + .bl-chip--authors { margin-left: 0; }
.bl-chips > .bl-chip--authors:not(.bl-chip--tags ~ .bl-chip--authors) { margin-left: auto; } /* тегов нет — «Авторы» сами уходят вправо */
/* список авторов */
.bl-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; }
.bl-people__card { display: flex; gap: 16px; align-items: flex-start; height: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.bl-people__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.bl-people__photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #eef2f8; }
.bl-people__photo--ph { display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 28px; color: var(--green-deep); }
.bl-people__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-people__name { font-family: var(--font-d); font-weight: 700; font-size: 18px; line-height: 1.25; }
.bl-people__role { color: var(--muted); font-size: 14px; line-height: 1.4; }
.bl-people__about { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin-top: 4px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bl-people__count { margin-top: 8px; color: var(--green-deep); font-weight: 600; font-size: 14px; }
/* страница автора */
.bl-person { display: flex; gap: 28px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
padding: 32px; box-shadow: var(--shadow); margin-bottom: 36px; }
.bl-person__photo { flex: 0 0 160px; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #eef2f8; }
.bl-person__photo--ph { display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 60px; color: var(--green-deep); }
.bl-person__body { min-width: 0; }
.bl-person__name { margin-bottom: 6px; }
.bl-person__role { color: var(--green-deep); font-family: var(--font-d); font-weight: 600; font-size: 16px; margin: 0 0 12px; }
.bl-person__about { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 0; max-width: 720px; }
.bl-person__links { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bl-person__links a { display: inline-block; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
border-radius: 999px; padding: 7px 14px; text-decoration: none; overflow-wrap: anywhere; transition: border-color .15s ease, color .15s ease; }
.bl-person__links a:hover { border-color: var(--green); color: var(--green-deep); }
.bl-person__bio { max-width: 820px; margin-bottom: 40px; font-size: 16px; }
.bl-person__bio img { max-width: 100%; height: auto; }
.bl-person__bio a { color: var(--green-deep); }
.bl-person__count { font-weight: 600; font-size: .6em; color: var(--muted); vertical-align: middle; margin-left: 6px; }
.bl-person__all { margin: 32px 0 0; }
.bl-person__all a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
@media (max-width: 720px) {
.bl-person { flex-direction: column; gap: 18px; padding: 22px; }
.bl-person__photo { flex-basis: auto; width: 112px; height: 112px; }
.bl-person__photo--ph { font-size: 42px; }
.bl-person__about { font-size: 16px; }
}
/* End */
/* Start:/bitrix/templates/franchise/css/guide.css?179216064728560*/
/* ============================================================
«Всё о франчайзинге» (книга): оглавление /franchayzing/ и страница главы.
Путь: /local/templates/{ШАБЛОН}/css/guide.css
Использует токены layout.css и блоки blog.css (.bl-bc, .bl-art__body, .bl-toc, .bl-aside-cta).
============================================================ */
.gd-page { padding: 26px 20px 72px; font-family: var(--font-b); color: var(--ink); }
/* ---------- обложка ---------- */
.gd-cover { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center;
border-radius: 22px; padding: 44px 48px; color: #fff; box-shadow: var(--shadow-h);
background:
radial-gradient(60% 60% at 70% 30%, rgba(27,106,229,.35), transparent 70%),
radial-gradient(50% 50% at 20% 80%, rgba(240,164,49,.30), transparent 70%),
linear-gradient(135deg, #16294a, #0f1d33); }
.gd-cover__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.gd-cover__eyebrow .ic { --ic-accent: #ffc857; }
.gd-cover__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.gd-cover__sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 560px; margin: 0 0 22px; }
.gd-cover__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; padding: 0; margin: 0 0 26px; }
.gd-cover__stats b { font-family: var(--font-d); font-size: 26px; display: block; letter-spacing: -.02em; line-height: 1.1; }
.gd-cover__stats span { color: rgba(255,255,255,.65); font-size: 13px; }
.gd-cover__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.gd-cover__link { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.gd-cover__link:hover { border-bottom-color: #fff; }
/* книжка справа — чистый CSS */
.gd-cover__art { display: grid; place-items: center; min-height: 240px; }
.gd-cover__book { position: relative; width: 190px; height: 250px; border-radius: 6px 14px 14px 6px; transform: rotate(-6deg);
background: linear-gradient(160deg, #2f7ff0, #0d4ba0 60%, #083a80); box-shadow: 18px 24px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 30px 26px; gap: 12px; }
.gd-cover__spine { position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.22); }
.gd-cover__bookname { font-family: var(--font-d); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: #fff; }
.gd-cover__bookline { width: 70%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); }
.gd-cover__bookline--s { width: 45%; background: var(--amber); }
/* ---------- кому читать ---------- */
.gd-for { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 44px; }
.gd-for__card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: inherit;
box-shadow: var(--shadow); transition: .18s; }
.gd-for__card:hover { box-shadow: var(--shadow-h); transform: translateY(-2px); }
.gd-for__ico { grid-row: 1 / 3; }
.gd-for__card b { font-family: var(--font-d); font-weight: 700; font-size: 17px; }
.gd-for__card > span:last-child { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
/* ---------- оглавление ---------- */
.gd-toc__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; margin: 0 0 20px; }
.gd-part { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.gd-part--d2, .gd-part--d3 { box-shadow: none; border-radius: 12px; margin: 0 20px 18px; }
.gd-part__head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.gd-part__num { font-family: var(--font-d); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep);
background: rgba(27,106,229,.10); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.gd-part__title { font-family: var(--font-d); font-weight: 700; font-size: clamp(18px, 2vw, 22px); margin: 0 0 4px; line-height: 1.25; }
.gd-part__lead { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.gd-part__ico { flex: 0 0 auto; }
.gd-chapters { list-style: none; margin: 0; padding: 6px 0; }
.gd-ch + .gd-ch { border-top: 1px solid var(--line); }
.gd-ch__link { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: baseline; padding: 14px 24px; text-decoration: none; color: inherit; transition: background .12s; }
.gd-ch__link:hover { background: #f1f5ff; }
.gd-ch__num { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.gd-ch__body { min-width: 0; }
.gd-ch__title { display: block; font-family: var(--font-d); font-weight: 600; font-size: 16px; line-height: 1.35; }
.gd-ch__link:hover .gd-ch__title { color: var(--green-deep); }
.gd-ch__lead { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
.gd-ch__time { color: var(--muted); font-size: 13px; white-space: nowrap; }
/* ---------- CTA внизу оглавления ---------- */
.gd-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
background: linear-gradient(135deg, #eef3ff 0%, #f5f7fa 70%); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; margin: 30px 0 0; }
.gd-cta__h { font-family: var(--font-d); font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.gd-cta p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.gd-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* ---------- две колонки под обложкой (версия 164): оглавление слева, колонка справа ---------- */
.gd-hub { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.gd-hub__main { min-width: 0; }
.gd-hub__aside { position: relative; align-self: stretch; padding-top: 28px; } /* сверху — вровень с «Кому читать» */
/* колонка прилипает под шапкой; если она выше окна, скрипт страницы ставит отрицательный top — прилипает низ (баннер
остаётся на экране), как колонка страницы франшизы (js/franchise.js, initStickySide) */
.gd-hub__sticky { position: sticky; top: calc(var(--st-top, 0px) + 20px); display: flex; flex-direction: column; gap: 16px; }
.gd-hub__sticky .tf-banner--aside { margin: 0; }
/* рядом с колонкой «Кому читать» в две карточки тесно до 1100 px — одна под другой */
@media (max-width: 1100px) and (min-width: 921px) { .gd-hub .gd-for { grid-template-columns: 1fr; } }
/* оглавление: якорь части не прячется под выдвинутой шапкой */
.gd-toc .gd-part[id] { scroll-margin-top: calc(var(--st-top, 0px) + 84px); }
.gd-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px 14px; }
.gd-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gd-side__h { margin-top: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 10px; font-family: var(--font-d); font-weight: 800; font-size: 15px; color: var(--ink); }
.gd-side__h .ic { flex: 0 0 auto; }
.gd-side__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.gd-side__part { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 8px 7px 6px;
border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--ink-soft); text-decoration: none; font-size: 14px; line-height: 1.35;
transition: background .12s, color .12s; }
.gd-side__part:hover { color: var(--green-deep); background: #f1f5ff; }
.gd-side__part.is-active { color: var(--green-deep); border-left-color: var(--green); background: #f1f5ff; font-weight: 600; }
.gd-side__part:focus-visible { outline: 3px solid rgba(27,106,229,.4); outline-offset: 1px; }
.gd-side__pnum { font-family: var(--font-d); font-weight: 700; color: var(--green-deep); font-variant-numeric: tabular-nums; text-align: right; }
.gd-side__pcount { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600;
text-align: center; font-variant-numeric: tabular-nums; }
.gd-side__part.is-active .gd-side__pcount { background: #fff; color: var(--green-deep); }
.gd-side__start, .gd-side__all { display: inline-block; margin: 10px 4px 0; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); text-decoration: none; }
.gd-side__start:hover, .gd-side__all:hover { text-decoration: underline; }
/* популярное в блоге */
.gd-pop { list-style: none; margin: 0; padding: 0; }
.gd-pop > li + li { border-top: 1px solid var(--line); }
.gd-pop__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; color: var(--ink); text-decoration: none; }
.gd-pop__item:focus-visible { outline: 3px solid rgba(27,106,229,.4); outline-offset: 1px; border-radius: 10px; }
.gd-pop__pic { flex: 0 0 84px; width: 84px; aspect-ratio: 15 / 8; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #eef2f8; }
.gd-pop__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-pop__ph { display: grid; place-items: center; color: #9fb2d3; }
.gd-pop__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-pop__name { font-family: var(--font-d); font-weight: 600; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gd-pop__item:hover .gd-pop__name { color: var(--green-deep); }
.gd-pop__meta { color: var(--muted); font-size: 12.5px; }
/* своя карточка услуги — когда баннеров Premium нет */
.gd-promo { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; border-radius: var(--radius); color: #fff; text-decoration: none;
background:
radial-gradient(70% 70% at 85% 15%, rgba(27,106,229,.45), transparent 70%),
radial-gradient(60% 60% at 10% 100%, rgba(240,164,49,.28), transparent 70%),
linear-gradient(135deg, #16294a, #0f1d33); }
.gd-promo__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255,255,255,.7); }
.gd-promo__eyebrow .ic { --ic-accent: #ffc857; }
.gd-promo__h { font-family: var(--font-d); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.gd-promo__t { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); }
.gd-promo__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 9px 16px; border-radius: 10px;
background: #fff; color: var(--ink); font-family: var(--font-d); font-weight: 700; font-size: 14px; transition: transform .15s ease, box-shadow .15s ease; }
.gd-promo:hover .gd-promo__btn { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.gd-promo:focus-visible { outline: 3px solid rgba(27,106,229,.5); outline-offset: 2px; }
/* ============================================================
СТРАНИЦА ГЛАВЫ
============================================================ */
.gd-ch-head { margin-bottom: 26px; }
.gd-ch-head__eyebrow { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-d); font-weight: 700; font-size: 13px; color: var(--green-deep); margin-bottom: 12px; }
.gd-ch-head__pos { color: var(--muted); font-weight: 600; }
.gd-ch-head__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.gd-ch-head__num { color: var(--green); margin-right: .35em; font-variant-numeric: tabular-nums; }
.gd-ch-head__lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.gd-ch-head__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
/* текст главы — типографика .bl-art__body (blog.css); таблицы и цитаты-формулы */
.gd-body blockquote { font-family: var(--font-d); font-weight: 600; color: var(--ink); }
.gd-body h2 { scroll-margin-top: 90px; }
/* таблицы в главах (классы МКТУ, сравнение договоров, разбор модели): blog.css делает table блоком с прокруткой —
здесь возвращаем табличную вёрстку с рамками, на узком экране — снова прокрутка */
.gd-body table { display: table; width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 15px; line-height: 1.45; }
.gd-body th, .gd-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.gd-body th { background: #f1f5ff; font-family: var(--font-d); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.gd-body tr:nth-child(even) td { background: #fafbfe; }
.gd-body td:first-child { font-weight: 600; }
@media (max-width: 720px) { .gd-body table { display: block; overflow-x: auto; white-space: nowrap; font-size: 14px; } .gd-body td, .gd-body th { white-space: normal; min-width: 140px; } }
.gd-body h3 { scroll-margin-top: 90px; }
/* рисунки в главах: [fig:код] → (App\Site\Guide::renderFigures). Схема — инлайн-SVG на белой
карточке; на узком экране широкая схема прокручивается внутри карточки, а не сжимается до нечитаемого шрифта. */
.gd-fig { margin: 28px 0 30px; }
.gd-fig__scroll { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px 14px;
overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-fig svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.gd-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.gd-fig figcaption b { font-family: var(--font-d); font-weight: 700; color: var(--ink); }
/* узкий экран: рисунок прокручивается вбок, тень у края подсказывает, что там есть продолжение */
@media (max-width: 640px) {
.gd-fig__scroll {
background:
linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(26,43,74,.16), rgba(26,43,74,0)) left center / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(26,43,74,.16), rgba(26,43,74,0)) right center / 12px 100% no-repeat scroll,
var(--surface);
}
.gd-fig figcaption::after { content: " Рисунок прокручивается вбок."; color: var(--ink-soft); opacity: .75; }
}
/* главное из главы */
.gd-points { margin: 34px 0 0; padding: 22px 26px; border-radius: 16px; background: #fff8e8; border: 1px solid #f3dfae; }
.gd-points__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.gd-points__h .ic { --ic-accent: var(--amber); }
.gd-points ul { margin: 0; padding-left: 20px; }
.gd-points li { margin-bottom: 8px; line-height: 1.55; font-size: 15.5px; }
.gd-points li:last-child { margin-bottom: 0; }
/* вперёд / назад */
.gd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 26px; }
.gd-pn__link { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: .15s; min-width: 0; }
.gd-pn__link:hover { box-shadow: var(--shadow-h); border-color: rgba(27,106,229,.4); }
.gd-pn__link--next { text-align: right; align-items: flex-end; }
.gd-pn__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gd-pn__link--prev .gd-pn__label .ic { transform: scaleX(-1); }
.gd-pn__link:hover .gd-pn__label { color: var(--green-deep); }
.gd-pn__title { font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.35; }
/* колонка: оглавление книги */
.gd-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; box-shadow: var(--shadow); max-height: calc(100vh - var(--st-top, 0px) - 120px); overflow: auto; }
.gd-nav__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 10px; }
.gd-nav__h:hover { color: var(--green-deep); }
.gd-nav__progress { height: 4px; border-radius: 2px; background: var(--line); margin-bottom: 12px; overflow: hidden; }
.gd-nav__progress i { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.gd-nav__part { border-top: 1px solid var(--line); }
.gd-nav__part:last-child { border-bottom: 1px solid var(--line); }
.gd-nav__sum { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; padding: 9px 4px; font-family: var(--font-d); font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--ink); }
.gd-nav__sum::-webkit-details-marker { display: none; }
.gd-nav__sum::after { content: ''; margin-left: auto; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.gd-nav__part[open] > .gd-nav__sum::after { transform: rotate(-135deg) translateY(-2px); }
.gd-nav__pnum { color: var(--green-deep); font-variant-numeric: tabular-nums; }
.gd-nav__part--d2, .gd-nav__part--d3 { margin-left: 10px; border-top-style: dashed; }
.gd-nav__part--d2 > .gd-nav__sum, .gd-nav__part--d3 > .gd-nav__sum { font-size: 13.5px; font-weight: 600; }
.gd-nav__list { list-style: none; margin: 0 0 8px; padding: 0 0 0 4px; display: grid; gap: 1px; }
.gd-nav__item a, .gd-nav__item span { display: block; padding: 5px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; }
.gd-nav__item a:hover { color: var(--green-deep); background: #f1f5ff; }
.gd-nav__item.is-current span { color: var(--green-deep); border-left-color: var(--green); background: #f1f5ff; font-weight: 600; }
/* ---------- адаптив ---------- */
@media (max-width: 920px) {
.gd-cover { grid-template-columns: 1fr; padding: 32px 28px; }
.gd-cover__art { display: none; }
.gd-for { grid-template-columns: 1fr; }
.gd-part__head { grid-template-columns: auto 1fr; }
.gd-part__ico { display: none; }
/* на узком экране колонка статьи уходит вверх (blog.css), а у главы книги — вниз, под текст: сначала глава,
потом «что дальше». Оглавление самой главы там не показываем, оглавление книги — целиком, части свёрнуты. */
.gd-aside { order: 0; margin: 28px 0 0; }
.gd-toc-in { display: none !important; }
.gd-nav { max-height: none; }
.gd-aside-cta { display: block; }
/* версия 164: колонка оглавления — под оглавлением, без «Частей книги» (оглавление и так перед глазами) */
.gd-hub { grid-template-columns: 1fr; gap: 0; }
.gd-hub__aside { padding-top: 0; }
.gd-hub__sticky { position: static; top: auto !important; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.gd-side--nav { display: none; }
.gd-hub__sticky--nopop > :last-child { grid-column: 1 / -1; } /* статей нет — баннер на всю ширину */
}
@media (max-width: 640px) {
.gd-hub__sticky { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.gd-page { padding: 20px 16px 56px; }
.gd-cover { padding: 26px 20px; border-radius: 18px; }
.gd-cover__stats { gap: 18px; }
.gd-part__head { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px 14px; }
.gd-part__num { justify-self: start; }
.gd-ch__link { grid-template-columns: 40px 1fr; padding: 12px 18px; }
.gd-ch__time { display: none; }
.gd-part--d2, .gd-part--d3 { margin: 0 12px 14px; }
.gd-pn { grid-template-columns: 1fr; }
.gd-pn__link--next { text-align: left; align-items: flex-start; }
.gd-cta { padding: 20px; }
.gd-cta__btns .hm-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.gd-for__card, .gd-pn__link, .gd-nav__sum::after, .gd-side__part, .gd-promo__btn { transition: none; }
}
/* ============================================================
Практикум: калькулятор [calc:okupaemost] и карточки файлов [file:…]
============================================================ */
.gd-file { display: flex; align-items: center; gap: 16px; margin: 22px 0 26px; padding: 16px 18px; background: var(--surface);
border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
transition: box-shadow .2s ease, border-color .2s ease; }
.gd-body a.gd-file, .gd-body a.gd-file:hover { text-decoration: none; color: var(--ink); }
.gd-file:hover { box-shadow: var(--shadow-h); border-color: #c9dbfa; }
.gd-file:focus-visible { outline: 3px solid #9ec2f5; outline-offset: 2px; }
.gd-file__ext { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
font: 700 12px/1 var(--font-d); color: #fff; background: #0d4ba0; letter-spacing: .02em; }
.gd-file--xlsx .gd-file__ext, .gd-file--xls .gd-file__ext, .gd-file--csv .gd-file__ext { background: #1d7a4a; }
.gd-file--pdf .gd-file__ext { background: #b8321f; }
.gd-file__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-file__body b { font: 700 16px/1.3 var(--font-d); }
.gd-file__body span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.gd-file__body small { font-size: 12.5px; color: var(--muted); }
.gd-file__go { flex: 0 0 auto; padding: 10px 16px; border-radius: 10px; background: var(--btn); color: #fff;
font: 600 14px/1 var(--font-d); }
.gd-file:hover .gd-file__go { background: var(--btn-deep); }
@media (max-width: 560px) {
.gd-file { flex-wrap: wrap; }
.gd-file__body { flex-basis: calc(100% - 72px); }
.gd-file__go { width: 100%; text-align: center; }
}
.gd-calc { margin: 26px 0 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gd-calc__form, .gd-calc__res { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.gd-calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 22px; }
.gd-calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gd-calc legend { font: 700 15px/1.3 var(--font-d); color: var(--ink); margin: 6px 0 8px; padding: 0; }
.gd-calc__f { display: block; margin: 0 0 12px; }
.gd-calc__l { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 4px; }
.gd-calc__h { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.gd-calc__in { display: flex; align-items: center; border: 1px solid #c3cad6; border-radius: 10px; background: #fff; overflow: hidden; }
.gd-calc__in:focus-within, .gd-calc select:focus { border-color: #1b6ae5; box-shadow: 0 0 0 3px rgba(27, 106, 229, .15); outline: none; }
.gd-calc__in input { flex: 1 1 auto; min-width: 0; border: 0; padding: 9px 10px; font: 500 15px/1.2 var(--font-b); color: var(--ink); background: transparent; }
.gd-calc__in input:focus { outline: none; }
.gd-calc__in i { font-style: normal; padding: 0 10px; color: var(--muted); font-size: 14px; }
.gd-calc select { width: 100%; border: 1px solid #c3cad6; border-radius: 10px; padding: 9px 10px; font: 500 14.5px/1.2 var(--font-b); color: var(--ink); background: #fff; }
.gd-calc__chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink); margin: 4px 0 10px; cursor: pointer; }
.gd-calc__chk input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0d4ba0; }
.gd-calc__more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; }
.gd-calc__more summary { cursor: pointer; font: 600 14px/1.4 var(--font-d); color: #0d4ba0; margin-bottom: 10px; }
.gd-calc__more[open] { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 22px; }
.gd-calc__more[open] summary, .gd-calc__note { grid-column: 1 / -1; }
.gd-calc__note { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.gd-calc__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gd-calc__tile { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.gd-calc__tile span { font-size: 13px; color: var(--ink-soft); }
.gd-calc__tile > b { font: 700 21px/1.2 var(--font-d); color: var(--ink); }
.gd-calc__tile > b small { font: 500 13px var(--font-b); color: var(--muted); }
.gd-calc__tile small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.gd-calc__tile--main { background: #eaf1fd; }
.gd-calc__tile--main > b { color: #0d4ba0; }
.gd-calc__verdict { margin: 16px 0 6px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.gd-calc__verdict:empty { display: none; }
.gd-calc__chart { margin: 8px 0 0; }
.gd-calc__svg { display: block; width: 100%; height: auto; }
.gd-calc__chart figcaption { display: flex; gap: 18px; font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.gd-calc__key i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.gd-calc__key i.dash { background: repeating-linear-gradient(90deg, #f59e0b 0 6px, transparent 6px 10px); }
.gd-calc__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; font-size: 14px; }
.gd-calc__reset { border: 1px solid #c3cad6; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; font: 600 14px var(--font-d); cursor: pointer; }
.gd-calc__reset:hover { border-color: #1b6ae5; }
@media (max-width: 560px) {
.gd-calc__form, .gd-calc__res { padding: 16px 14px; }
.gd-calc__tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-calc__tile { padding: 10px 11px; }
.gd-calc__tile > b { font-size: 17px; }
.gd-calc__tile > b small { display: block; }
}
/* End */
/* Start:/bitrix/templates/franchise/css/tariffs.css?17921606479149*/
/* ============================================================
Тарифы размещения: таблица (include/tariff_table.php),
баннерный слот Premium (include/banner_slot.php),
отметки тарифа, форма общей заявки «подберите франшизу»
(include/request_form.php, .rq-*). Путь: /local/templates/{ШАБЛОН}/css/tariffs.css
============================================================ */
/* --- таблица тарифов --- */
.tf-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tf-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; font-size: 15px; min-width: 560px; }
.tf-table th, .tf-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.tf-table tbody tr:last-child th, .tf-table tbody tr:last-child td { border-bottom: 0; }
.tf-table__feature { text-align: left !important; font-weight: 500; color: var(--ink); width: 44%; }
.tf-table__feature small { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.tf-table thead th { background: var(--bg); font-family: var(--font-d); font-weight: 700; font-size: 15px; }
.tf-table__plan--premium .tf-plan__name { color: var(--green-deep); }
.tf-plan__badge { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
color: var(--green-deep); }
.tf-plan__badge--expired { color: #b45309; }
.tf-table td.is-current, .tf-table th.is-current { background: rgba(27, 106, 229, .06); }
.tf-yes { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px;
background: #dcfce7; color: #15803d; font-weight: 700; font-size: 14px; }
.tf-top { color: var(--amber); font-size: 20px; line-height: 1; }
.tf-no { color: var(--muted); }
.tf-txt { color: var(--ink-soft); }
.tf-table__prices td b { font-family: var(--font-d); font-size: 16px; }
.tf-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-d); font-weight: 700; font-size: 14px;
padding: 10px 18px; border-radius: 10px; text-decoration: none; border: 1.5px solid rgba(13,75,160,.45); color: var(--btn);
background: #fff; transition: .18s; white-space: nowrap; cursor: pointer; }
.tf-btn:hover { background: var(--btn); color: #fff; border-color: var(--btn); }
.tf-btn--accent { background: var(--btn); color: #fff; border-color: var(--btn); }
.tf-btn--accent:hover { background: var(--btn-deep); }
.tf-btn--muted { background: var(--bg); color: var(--muted); border-color: var(--line); cursor: default; }
.tf-btn--muted:hover { background: var(--bg); color: var(--muted); border-color: var(--line); }
.tf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.tf-legend .tf-yes { width: 18px; height: 18px; font-size: 12px; margin-right: 4px; }
.tf-legend .tf-top { font-size: 16px; margin-right: 4px; }
/* --- баннерный слот Premium --- */
.tf-banner { margin: 28px 0; }
.tf-banner__link { display: block; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
background: var(--surface); box-shadow: var(--shadow); }
/* широкий слот — рамка 4:1; баннер другой пропорции вписан целиком, поля — его размытая копия (--cover ставит слот) */
.tf-banner__link { aspect-ratio: 4 / 1; background: #0f1d33; }
.tf-banner__link::before { content: ''; position: absolute; inset: -24px; background: var(--cover, none) center / cover no-repeat; filter: blur(20px) brightness(.8); }
.tf-banner__link img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) { .tf-banner__link { aspect-ratio: 5 / 2; } }
/* слот в боковой колонке — картинка в натуральную высоту, как раньше */
.tf-banner--aside .tf-banner__link { aspect-ratio: auto; background: var(--surface); }
.tf-banner--aside .tf-banner__link::before { content: none; }
.tf-banner--aside .tf-banner__link img { height: auto; }
.tf-banner__mark { position: absolute; top: 10px; right: 12px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
color: #fff; background: rgba(26, 43, 74, .55); padding: 3px 8px; border-radius: 6px; }
.tf-banner--aside { margin: 20px 0 0; }
/* --- отметка Premium на карточке в списке --- */
.tf-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-d); font-weight: 700; font-size: 11px;
letter-spacing: .03em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 3px 7px; }
/* --- форма общей заявки «Не нашли подходящую франшизу?» (include/request_form.php) --- */
.rq { margin: 36px 0; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); scroll-margin-top: 90px; }
.rq__head { max-width: 640px; margin-bottom: 22px; }
.rq__h { font-family: var(--font-d); font-weight: 700; font-size: 24px; line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.rq__sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.rq-form { display: grid; gap: 16px; }
.rq-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.rq-field { display: grid; gap: 6px; min-width: 0; }
.rq-field--wide { grid-column: 1 / -1; }
.rq-field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.rq-field__label small { font-weight: 400; color: var(--muted); }
.rq-input { font-family: inherit; font-size: 15px; color: var(--ink); width: 100%; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); outline: none; resize: vertical; transition: .15s; }
.rq-input:focus { border-color: var(--green); background: var(--surface); }
.rq-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; }
.rq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rq-consent input { margin-top: 2px; flex: 0 0 auto; }
.rq-consent a { color: var(--green-deep); }
.rq-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rq-form__submit { padding: 13px 26px; font-size: 15px; }
.rq-form__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 360px; }
/* состояние «успех» (подменяется request.js) */
.rq-ok { text-align: center; padding: 28px 16px; font-family: var(--font-d); font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.5; }
.rq-ok span { display: block; font-family: var(--font-b); font-weight: 400; font-size: 15px; color: var(--ink-soft); margin-top: 8px; }
/* Телефон: название возможности — строкой над значениями, три тарифа делят ширину поровну. Раньше таблица
прокручивалась вбок, первая колонка занимала почти половину — на экране был один Standard, а «Ваш тариф»
(PRO или Premium) оставался за краем. */
@media (max-width: 720px) {
.tf-table { display: block; min-width: 0; }
.tf-table thead, .tf-table tbody { display: block; }
.tf-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tf-table tbody tr:last-child { border-bottom: 0; }
.tf-table th, .tf-table td { border-bottom: 0; min-width: 0; }
.tf-table thead .tf-table__feature, .tf-table__cta td:first-child { display: none; }
.tf-table tbody .tf-table__feature { grid-column: 1 / -1; width: auto; padding-bottom: 2px; font-size: 13.5px; font-weight: 600; }
.tf-table tbody td { padding-top: 6px; }
.tf-txt, .tf-table__prices td b { font-size: 13px; overflow-wrap: anywhere; }
.tf-table th, .tf-table td { padding: 11px 10px; font-size: 14px; }
.tf-table__feature small { display: none; }
.tf-btn { padding: 9px 12px; font-size: 13px; }
.rq { padding: 22px 18px; margin: 28px 0; }
.rq__h { font-size: 20px; }
.rq-form__grid { grid-template-columns: 1fr; }
.rq-form__actions { flex-direction: column; align-items: stretch; gap: 10px; }
.rq-form__submit { width: 100%; padding: 13px 16px; font-size: 15px; }
.rq-form__note { max-width: none; text-align: center; }
}
/* End */
/* Start:/bitrix/templates/franchise/css/ideas.css?179216064727562*/
/* ============================================================
«Бизнес-идеи»: каталог идей /biznes-idei/, страница сферы и страница идеи.
Путь: /local/templates/{ШАБЛОН}/css/ideas.css
Использует токены layout.css, кнопки home.css (.hm-btn), блоки blog.css (.bl-bc, .bl-chips, .bl-toc,
.bl-art__body, .bl-aside-cta, .bl-share) и таблицы guide.css (.gd-body). Все свои классы — .bi-*.
============================================================ */
.bi-page, .bi-idea { padding-top: 26px; padding-bottom: 72px; font-family: var(--font-b); color: var(--ink); }
.bi-h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.bi-h2 { font-family: var(--font-d); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.02em; margin: 0; }
/* ---------- обложка общей страницы ---------- */
.bi-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; margin-bottom: 24px;
padding: 36px 40px; border: 1px solid #f0e3c4; border-radius: 22px;
background:
radial-gradient(46% 70% at 96% 6%, rgba(245,158,11,.20), transparent 70%),
linear-gradient(120deg, #fffaf0 0%, #f3f6fd 100%); }
.bi-hero__text { min-width: 0; }
.bi-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 12px; }
.bi-hero__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 12px; }
.bi-hero__sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin: 0; }
.bi-hero__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bi-quick { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border: 1px solid #dfe4ee; border-radius: 19px; background: var(--surface);
font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.bi-quick .ic { color: var(--green-deep); }
.bi-quick:hover { border-color: var(--green); color: var(--green-deep); box-shadow: var(--shadow); }
.bi-quick:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
.bi-hero__stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 230px; }
.bi-hero__stats li { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: 14px; }
.bi-hero__stats b { font-family: var(--font-d); font-weight: 800; font-size: 22px; letter-spacing: -.02em; white-space: nowrap; }
.bi-hero__stats span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.3; }
/* ---------- заголовок страницы сферы ---------- */
.bi-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.bi-head__ico { margin-top: 2px; }
.bi-head__sub { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; max-width: 780px; }
/* ---------- сферы (чипы .bl-chip) ---------- */
.bi-spheres { margin-bottom: 14px; }
.bi-spheres .bl-chip i { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-left: 3px; }
.bi-spheres .bl-chip.is-active i { color: rgba(255,255,255,.8); }
/* ---------- фильтр ---------- */
.bi-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 16px 18px; margin: 0 0 24px; box-shadow: var(--shadow); }
.bi-field { display: flex; flex-direction: column; gap: 6px; }
.bi-field > span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.bi-field select { font-family: inherit; font-size: 15px; color: var(--ink); font-weight: 500; border: 1px solid var(--line); border-radius: 10px;
padding: 11px 38px 11px 14px; background-color: #fbfcfe; appearance: none; cursor: pointer; min-width: 190px;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8499' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; }
.bi-field select:focus { outline: none; border-color: var(--green); }
.bi-field select:focus-visible { outline: 3px solid rgba(27,106,229,.3); outline-offset: 1px; }
.bi-toolbar__go { height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--btn); color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 15px; cursor: pointer; }
.bi-toolbar__go:hover { background: var(--btn-deep); }
.bi-toolbar.is-auto .bi-toolbar__go { display: none; } /* со скриптом список обновляется при выборе */
.bi-toolbar__reset { align-self: center; margin-left: auto; color: var(--muted); font-size: 14px; text-decoration: none; }
.bi-toolbar__reset:hover { color: var(--green-deep); }
/* ---------- список ---------- */
.bi-results { scroll-margin-top: calc(var(--st-top, 0px) + 16px); }
.bi-count { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.bi-count b { color: var(--ink); font-family: var(--font-d); }
.bi-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.bi-tags__count { font-family: var(--font-d); font-weight: 700; font-size: 15px; margin-right: 4px; }
.bi-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; border-radius: 999px; background: #eef3fd; border: 1px solid rgba(27,106,229,.28);
color: var(--green-deep); font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.bi-tag svg { flex: 0 0 auto; opacity: .7; }
.bi-tag:hover { background: #e2ebfc; border-color: var(--green); }
.bi-tag:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
.bi-empty { text-align: center; color: var(--ink-soft); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 24px; }
.bi-empty p { margin: 0 0 6px; }
.bi-empty a { color: var(--green-deep); }
.bi-group { margin-bottom: 40px; }
.bi-group__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
/* .ic-plate задан в layout.css, а стили шаблона выводятся после стилей страницы — поэтому селекторы с родителем */
.bi-group__head .bi-group__ico { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
.bi-group__head .bi-group__ico .ic { width: 30px; height: 30px; }
.bi-group__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.bi-group__title a { color: inherit; text-decoration: none; }
.bi-group__title a:hover { color: var(--green-deep); }
.bi-group__meta { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.bi-group__all { display: inline-flex; align-items: center; gap: 6px; color: var(--green-deep); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.bi-group__all .ic { transition: transform .2s ease; }
.bi-group__all:hover .ic { transform: translateX(4px); }
.bi-group__more { margin: 16px 0 0; }
/* сетка сферы в три колонки (ширина блока 822–1101 px): восемь карточек дали бы ряды 3 + 3 + 2 — показываем шесть */
.bi-group:not(.bi-group--loose) { container-type: inline-size; }
@container (min-width: 822px) and (max-width: 1101.98px) {
.bi-group:not(.bi-group--loose) .bi-card:nth-child(n+7) { display: none; }
}
.bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }
/* «Похожие идеи» — четыре карточки: в ряд, а где не помещаются — два на два (не три и одна) */
@media (min-width: 561px) and (max-width: 1140px) { .bi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- карточка идеи ---------- */
.bi-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); border-color: transparent; }
.bi-card:focus-visible { outline: 3px solid rgba(27,106,229,.4); outline-offset: 2px; }
.bi-card__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bi-card__ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(27,106,229,.09); color: var(--green-deep); }
.bi-card__ico .ic { width: 30px; height: 30px; stroke-width: 1.4; }
.bi-card__tags { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; font-size: 12.5px; line-height: 1.3; }
.bi-card__sphere { font-weight: 600; color: var(--green-deep); }
.bi-card__format { color: var(--muted); }
/* обложка (если идее задали «Картинку для анонса»): на всю ширину карточки, сфера и формат — плашкой поверх */
.bi-card__media { display: block; flex: 1 1 100%; margin: -6px -6px 0; aspect-ratio: 15 / 8; border-radius: 12px; overflow: hidden; background: #eef2f8; }
.bi-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bi-card__media + .bi-card__tags { position: absolute; left: 4px; top: 4px; align-items: flex-start; text-align: left; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.92); }
.bi-card__media + .bi-card__tags .bi-card__sphere { color: var(--ink); }
.bi-card__name { font-family: var(--font-d); font-weight: 700; font-size: 17.5px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 7px; }
.bi-card:hover .bi-card__name { color: var(--green-deep); }
.bi-card__lead { color: var(--ink-soft); font-size: 14px; line-height: 1.5; margin-bottom: 14px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bi-card__meta { display: grid; gap: 8px; padding: 13px 0 12px; border-top: 1px solid var(--line); margin-top: auto; }
.bi-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bi-card__row span { color: var(--muted); font-size: 13px; }
.bi-card__row b { font-family: var(--font-d); font-weight: 700; font-size: 15px; white-space: nowrap; margin-left: auto; }
.bi-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* метки формата и сложности: карточка и шапка идеи */
.bi-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; background: #f1f3f7; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.bi-chip--easy { background: #e7f6ee; color: #17663d; }
.bi-chip--medium { background: #fff3d6; color: #80530a; }
.bi-chip--hard { background: #fdeceb; color: #a42b1b; }
/* ---------- пояснение о цифрах, CTA, текст ---------- */
.bi-note { display: flex; align-items: flex-start; gap: 10px; margin: 30px 0 0; padding: 14px 16px; border-radius: 12px; background: #f1f5ff; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.bi-note .ic { margin-top: 2px; color: var(--green-deep); }
.bi-note a { color: var(--green-deep); }
.bi-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 36px 0 0; padding: 26px 28px;
background: linear-gradient(135deg, #eef3ff 0%, #f5f7fa 70%); border: 1px solid var(--line); border-radius: 18px; }
.bi-cta__h { font-family: var(--font-d); font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.bi-cta p { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 620px; line-height: 1.5; }
.bi-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.bi-seo { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--ink-soft); line-height: 1.7; font-size: 15px; max-width: 900px; }
.bi-seo h2, .bi-seo h3 { font-family: var(--font-d); color: var(--ink); line-height: 1.25; }
.bi-seo h2 { font-size: 22px; margin: 0 0 12px; }
.bi-seo a { color: var(--green-deep); }
/* ---------- блок франшиз (include/idea_franchises.php) ---------- */
.bi-fr { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.bi-fr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.bi-fr__text { margin: 8px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; max-width: 720px; }
.bi-fr__all { color: var(--green-deep); font-weight: 600; text-decoration: none; }
.bi-fr__all:hover { color: var(--green); }
.bi-fr__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* ============================================================
СТРАНИЦА ИДЕИ
============================================================ */
.bi-idea__head { max-width: 860px; margin-bottom: 22px; }
.bi-idea__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.bi-idea__kind { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 700; font-size: 13px; color: var(--green-deep); margin-right: 4px; }
.bi-idea__time { color: var(--muted); font-size: 13.5px; }
.bi-idea__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(27px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 14px; text-wrap: balance; }
.bi-idea__lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
/* «Важно знать до старта»: лицензии и ограничения регулируемой ниши (свойство идеи WARNING) */
.bi-warn { display: flex; align-items: flex-start; gap: 12px; max-width: 860px; margin: 0 0 22px; padding: 14px 18px; border-radius: 14px;
background: #fff7e1; border: 1px solid #f1d58f; color: #5c3d06; }
.bi-warn .ic { flex: 0 0 auto; margin-top: 1px; color: #a8700c; }
.bi-warn p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.bi-warn b { font-weight: 700; color: #4a3004; }
.bi-idea__cover { border-radius: 18px; overflow: hidden; margin: 0 0 28px; }
.bi-idea__cover img { width: 100%; height: auto; display: block; }
/* идея в цифрах: три главные плитки (деньги и срок) выделены */
.bi-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; }
.bi-fact { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.bi-fact__label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.bi-fact__label .ic { color: var(--green-deep); }
.bi-fact__value { font-family: var(--font-d); font-weight: 700; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.bi-fact__hint { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.bi-fact--main { background: #eaf1fd; border-color: #d5e3fb; }
.bi-fact--main .bi-fact__label { color: var(--ink-soft); }
.bi-fact--main .bi-fact__value { font-size: clamp(18px, 1.9vw, 22px); font-weight: 800; letter-spacing: -.015em; color: var(--green-deep); text-wrap: balance; }
/* две колонки: текст и «липкая» колонка */
.bi-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 52px; align-items: start; }
.bi-main { min-width: 0; max-width: 800px; }
.bi-main .bl-art__body > h2:first-child { margin-top: 0; }
/* колонка не выше окна: на невысоком экране прокручивается сама, иначе низ списка не увидеть до конца текста */
.bi-sticky { position: sticky; top: calc(var(--st-top, 0px) + 24px); display: flex; flex-direction: column; gap: 18px;
max-height: calc(100vh - var(--st-top, 0px) - 48px); overflow-y: auto; scrollbar-width: thin; padding: 0 2px 2px; margin: 0 -2px; }
.bi-sticky > * { flex: 0 0 auto; }
.bi-more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 12px; box-shadow: var(--shadow); }
.bi-more__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.bi-more__h:hover { color: var(--green-deep); }
.bi-more__h .ic { color: var(--green-deep); }
.bi-more ul { list-style: none; margin: 0; padding: 0; }
.bi-more li + li { border-top: 1px solid var(--line); }
.bi-more li a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 4px; color: var(--ink-soft); font-size: 14px; line-height: 1.35; text-decoration: none; }
.bi-more li a:hover { color: var(--green-deep); }
.bi-more li i { font-style: normal; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* сильные стороны и риски */
.bi-pr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0 0; }
.bi-pr__col { padding: 20px 22px; border-radius: 16px; border: 1px solid; }
.bi-pr__col--pros { background: #f1faf5; border-color: #cfe9da; }
.bi-pr__col--risks { background: #fff8e8; border-color: #f3dfae; }
.bi-pr__h { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.bi-pr__col--pros .bi-pr__h .ic { color: #17663d; --ic-accent: #2fa868; }
.bi-pr__col--risks .bi-pr__h .ic { color: #80530a; }
.bi-pr ul { margin: 0; padding-left: 20px; }
.bi-pr li { margin-bottom: 8px; line-height: 1.5; font-size: 15px; }
.bi-pr li:last-child { margin-bottom: 0; }
/* вопросы и ответы */
.bi-faq { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.bi-faq .bi-h2 { margin-bottom: 16px; }
.bi-faq__item { max-width: 860px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 10px; background: var(--surface); }
.bi-faq__item summary { position: relative; cursor: pointer; font-family: var(--font-d); font-weight: 600; font-size: 16px; line-height: 1.4; padding: 13px 28px 13px 0; list-style: none; }
.bi-faq__item summary::-webkit-details-marker { display: none; }
.bi-faq__item summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.bi-faq__item[open] summary { color: var(--green-deep); }
.bi-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.bi-faq__item summary:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; border-radius: 6px; }
.bi-faq__a { padding: 0 0 15px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
/* похожие идеи */
.bi-similar { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.bi-similar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.bi-similar__all { color: var(--green-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bi-similar__all:hover { color: var(--green); }
/* ============================================================
ГЛАВНАЯ: блок «Бизнес-идеи» и ссылки на идеи со страницы категории каталога
============================================================ */
.bi-links { margin-top: 40px; }
.bi-links__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.bi-links__sub { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; }
.bi-links__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; }
/* главная: число колонок подбирается под число сфер, чтобы последний ряд был полным (10 сфер — 5 × 2, 9 — 3 × 3, 8 — 4 × 2) */
/* правила идут от узких экранов к широким и без верхних границ — при дробной ширине окна (масштаб браузера) между ними нет щелей */
@media (min-width: 921px) { .bi-links__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) { .bi-links__list--4, .bi-links__list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1041px) { .bi-links__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1181px) {
.bi-links__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bi-links__list--5 .bi-link { padding: 12px; gap: 2px 10px; }
}
.bi-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; align-content: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.bi-link:hover { border-color: rgba(27,106,229,.4); box-shadow: var(--shadow); }
.bi-link__ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(27,106,229,.09); color: var(--green-deep); }
.bi-link b { font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.3; }
.bi-link > span:not(.bi-link__ico) { color: var(--muted); font-size: 13px; }
/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
.bi-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; }
}
@media (max-width: 920px) {
.bi-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 26px; }
.bi-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.bi-hero__stats li { flex-direction: column; gap: 2px; }
.bi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* колонка уходит под текст: сначала разбор идеи, потом «что дальше»; оглавление там уже не нужно */
.bi-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bi-aside { margin-top: 28px; }
.bi-sticky { position: static; max-height: none; overflow: visible; }
.bi-toc { display: none !important; }
.bi-aside-cta { display: block; } /* blog.css на узком экране прячет .bl-aside-cta — здесь он нужен */
}
@media (max-width: 720px) {
.bi-group__head { grid-template-columns: auto minmax(0, 1fr); }
.bi-group__all { grid-column: 2; justify-self: start; }
.bi-pr { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.bi-page, .bi-idea { padding-top: 20px; padding-bottom: 56px; }
.bi-hero { padding: 22px 18px; border-radius: 18px; }
.bi-hero__sub { font-size: 15.5px; }
.bi-hero__stats { display: none; } /* на телефоне первый экран — заголовок, быстрые отборы и сферы */
/* быстрые отборы и сферы — одной строкой, которая листается пальцем */
.bi-hero__quick, .bi-spheres { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 2px 18px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bi-spheres { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
.bi-hero__quick::-webkit-scrollbar, .bi-spheres::-webkit-scrollbar { display: none; }
.bi-spheres .bl-chip { flex: 0 0 auto; white-space: nowrap; }
.bi-head { gap: 14px; }
.bi-head .bi-head__ico { display: none; }
.bi-toolbar { gap: 12px 10px; padding: 14px; }
.bi-field { flex: 1 1 calc(50% - 5px); min-width: 0; }
.bi-field select { width: 100%; min-width: 0; }
.bi-toolbar__reset { margin: 0; }
/* компактная карточка: без вводки, цифры — тремя колонками; на общей странице у сферы видны первые четыре идеи,
остальные — по ссылке «Все идеи сферы» (иначе страница на телефоне — семьдесят карточек подряд) */
.bi-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bi-group { margin-bottom: 30px; }
.bi-group:not(.bi-group--loose) .bi-card:nth-child(n+5) { display: none; }
.bi-card { padding: 14px; }
.bi-card:hover { transform: none; }
.bi-card__head { margin-bottom: 10px; }
.bi-card__ico { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.bi-card__ico .ic { width: 26px; height: 26px; }
.bi-card__name { font-size: 16.5px; margin-bottom: 10px; }
.bi-card__lead { display: none; }
.bi-card__meta { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 10px; padding: 11px 0 10px; }
.bi-card__row { flex-direction: column; align-items: flex-start; gap: 2px; flex-wrap: nowrap; }
.bi-card__row span { font-size: 12px; white-space: nowrap; }
.bi-card__row b { margin-left: 0; font-size: 14px; }
.bi-facts { gap: 8px; margin-bottom: 28px; }
.bi-fact { padding: 12px; }
.bi-idea__lead { font-size: 16.5px; }
.bi-cta { padding: 20px; }
.bi-cta__btns, .bi-fr__btns { width: 100%; }
.bi-cta__btns .hm-btn, .bi-fr__btns .hm-btn { width: 100%; }
}
@media (max-width: 380px) {
/* совсем узкий экран: цифры карточки снова строками «подпись — значение» */
.bi-card__meta { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bi-card__row { flex-direction: row; align-items: baseline; }
.bi-card__row b { margin-left: auto; }
.bi-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.bi-card, .bi-quick, .bi-group__all .ic, .bi-faq__item summary::after { transition: none; }
.bi-card:hover { transform: none; }
}
/* End */
/* Start:/bitrix/templates/franchise/css/fonts.css?17921606475882*/
/* ============================================================
Шрифты сайта — со своего сервера, без обращений к Google Fonts.
Путь: /local/templates/{ШАБЛОН}/css/fonts.css — подключается в header.php первым.
Файлы — /local/templates/{ШАБЛОН}/fonts/*.woff2.
Onest (заголовки) и Golos Text (текст) — вариативные шрифты: один файл на набор символов содержит все
начертания (Onest 100–900, Golos Text 400–900).
Наборы и их диапазоны символов (unicode-range) те же, что отдаёт Google Fonts; браузер загружает только
те файлы, символы которых есть на странице: кириллица и латиница (цифры, знаки) нужны всегда,
«latin-ext» — ради знака рубля, «symbols» — ради стрелок в ссылках. Два файла кириллицы header.php
загружает заранее (preload), чтобы текст сразу появлялся своим шрифтом.
Оба шрифта распространяются по лицензии SIL Open Font License 1.1 (fonts/OFL-Onest.txt, fonts/OFL-GolosText.txt):
размещать их на своём сервере можно. Файлы взяты из пакетов @fontsource-variable/onest 5.3.1 и
@fontsource-variable/golos-text 5.3.0.
============================================================ */
/* Onest — cyrillic-ext */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/onest-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* Onest — cyrillic */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/onest-cyrillic.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Onest — symbols */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/onest-symbols.woff2') format('woff2');
unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; }
/* Onest — latin-ext */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/onest-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Onest — latin */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/onest-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Golos Text — cyrillic-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* Golos Text — cyrillic */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/golos-text-cyrillic.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Golos Text — latin-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/golos-text-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Golos Text — latin */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
src: url('/bitrix/templates/franchise/css/../fonts/golos-text-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* End */
/* Start:/bitrix/templates/franchise/css/layout.css?179216064739225*/
/* ============================================================
Шапка + подвал (site-wide). Здесь же — общие токены.
Путь: /local/templates/{ШАБЛОН}/css/layout.css
============================================================ */
:root {
/* Цвета — как в логотипе «Франчайз Центр»: синий (--green, --green-deep — историческое название переменной),
янтарный акцент (--amber), тёмно-синий текст (--ink). Поменять гамму сайта — поменять значения здесь. */
--ink: #1a2b4a;
--ink-soft: #4a5a78;
--muted: #7a8499;
--line: #e6e9f0;
--bg: #f3f3f4; /* фон страниц и плашек: с версии 109 нейтральный светло-серый (был серо-голубой #f5f7fa) */
--surface: #ffffff;
--green: #1b6ae5;
--green-deep: #0d4ba0;
--amber: #f59e0b;
/* Кнопки: основной цвет — тёмно-синий логотипа, при наведении темнее. Все классы кнопок (.hm-btn, .svc-btn,
.tf-btn, .bl-btn, а с версии 107 и кнопка карточки .fr-cta, кнопки окна заявки, сравнения, кабинета) берут
цвет отсюда — поменять цвет кнопок на сайте = поменять две строки. */
--btn: #0d4ba0;
--btn-deep: #083a80;
--btn-shadow: rgba(13, 75, 160, .30);
--radius: 16px;
--shadow: 0 6px 24px rgba(26, 43, 74, .07);
--shadow-h: 0 14px 38px rgba(26, 43, 74, .14);
--font-d: 'Onest', system-ui, sans-serif;
--font-b: 'Golos Text', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-b); color: var(--ink); background: var(--bg); }
a { color: inherit; }
/* ---------------- ИКОНКИ ---------------- */
/* Набор App\Site\Icons: линия в цвет текста и одна янтарная точка-«узел», как в логотипе. Цвет иконки — color
родителя; цвет точки — переменная --ic-accent. */
.ic { display: inline-block; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic .ic-a { fill: var(--ic-accent, var(--amber)); stroke: none; }
.ic .ic-as { stroke: var(--ic-accent, var(--amber)); }
.ic .ic-d { fill: currentColor; stroke: none; }
/* ---------------- КНОПКИ С ИКОНКАМИ ---------------- */
/* Иконка набора внутри любой кнопки сайта: стоит слева от текста (Icons::svg('search', 19)). На синей кнопке
янтарный узел чуть светлее, чтобы читался. Модификатор --arrow: иконка-стрелка справа, при наведении едет
вправо — для ссылок-переходов («Смотреть каталог», «Подробнее»). */
.hm-btn, .svc-btn, .tf-btn, .bl-btn { gap: 9px; }
.hm-btn .ic, .svc-btn .ic, .tf-btn .ic, .bl-btn .ic { width: 19px; height: 19px; margin-left: -4px; }
.tf-btn .ic { width: 17px; height: 17px; }
.hm-btn--accent .ic, .svc-btn--accent .ic, .tf-btn--accent .ic, .bl-btn .ic, .frd-contact__dark .ic,
.hm-btn--ghost:hover .ic, .svc-btn--ghost:hover .ic, .tf-btn:hover .ic { --ic-accent: #ffc857; } /* контурная под курсором залита — узел как на синей */
.btn--arrow .ic { margin-left: 0; margin-right: -6px; transition: transform .2s ease; }
.btn--arrow:hover .ic { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn--arrow .ic { transition: none; } }
/* плитка-подложка под иконкой: карточки услуг и возможностей, подборки на главной, контакты.
Значение, вписанное вручную (эмодзи), встаёт в ту же плитку. */
.ic-plate, .svc-card__ico, .svc-hub__ico, .hm-aud__ico, .info-contact__ico {
width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: grid; place-items: center;
background: rgba(27,106,229,.09); color: var(--green-deep); font-size: 26px; line-height: 1; }
/* иконка на плитке — 36 px (сам рисунок занимает около 26 px); линия тоньше, чем у мелкой иконки, чтобы рисунок не тяжелел */
.ic-plate .ic, .svc-card__ico .ic, .svc-hub__ico .ic, .hm-aud__ico .ic, .info-contact__ico .ic { width: 36px; height: 36px; stroke-width: 1.35; }
/* Только боковые поля — не «padding: 0 20px». Верхний и нижний отступ задаёт класс страницы на том же
элементе (.svc, .info, .bl-page, .pers, .srch, …), а стили шаблона Битрикс выводит ПОСЛЕ стилей страницы:
общее сокращённое правило обнуляло эти отступы — хлебные крошки прилипали к меню, контент — к подвалу. */
.st-wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.st-content { min-height: 50vh; }
/* ---------------- ШАПКА ---------------- */
.st-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.st-topbar { background: var(--ink); color: #c9d2e0; font-size: 13px; }
.st-topbar__in { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.st-city { opacity: .85; }
.st-topbar__right { display: flex; align-items: center; gap: 22px; }
.st-topbar a { color: #c9d2e0; text-decoration: none; }
.st-topbar a:hover { color: #fff; }
.st-tel { font-weight: 600; color: #fff !important; }
.st-util { display: inline-flex; align-items: center; gap: 6px; }
.st-util__c { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.st-main__in { display: flex; align-items: center; gap: 24px; height: 76px; }
.st-logo { font-family: var(--font-d); font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.st-logo span { color: var(--green); }
.st-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.st-logo img { display: block; height: 48px; width: auto; }
.st-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; background: #f1f3f7; border: 1px solid transparent; border-radius: 12px; padding: 0 6px 0 16px; max-width: 560px; }
.st-search:focus-within { background: #fff; border-color: var(--green); }
/* min-width: 0 у формы и у поля — иначе они не сжимаются уже «естественной» ширины поля и на экране 320px растягивают страницу */
.st-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font-family: inherit; font-size: 15px; padding: 13px 0; outline: none; color: var(--ink); }
.st-search button { border: 0; background: var(--green); color: #fff; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.st-search button:hover { background: var(--green-deep); }
.st-cta { font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); border: 1.5px solid rgba(27,106,229,.4); border-radius: 10px; padding: 11px 18px; text-decoration: none; white-space: nowrap; }
.st-cta:hover { background: var(--btn); color: #fff; border-color: var(--btn); }
.st-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.st-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
/* навигация */
.st-nav { border-top: 1px solid var(--line); }
.st-nav__in { display: flex; align-items: stretch; gap: 4px; }
.st-nav__item { position: relative; }
/* Ссылка «Войти/Кабинет» в меню — только для мобильного. У неё два класса (.st-nav__link и этот),
и правило .st-nav__link ниже возвращало ей display — на десктопе в меню был лишний пункт. */
.st-nav__item--mob, .st-nav__link.st-nav__item--mob { display: none; }
/* «Разместить франшизу» в меню под «бургером» — только до 900 px: на широком экране та же ссылка стоит кнопкой
в шапке (.st-cta), а на узком она скрыта. Отдельный класс, а не .st-cta: правила компактной шапки (css/ux.css)
на кнопку в меню действовать не должны. */
.st-nav__cta { display: none; }
.st-nav__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; padding: 14px 16px; }
.st-nav__link:hover { color: var(--green-deep); }
/* текущий раздел (класс ставит шаблон меню) */
.st-nav__link.is-active { color: var(--green-deep); }
.st-nav__item--mega > .st-nav__link svg { transition: transform .2s; }
.st-nav__item--mega:hover > .st-nav__link svg { transform: rotate(180deg); }
/* кнопка «раскрыть категории» рядом с «Каталогом» — только на телефоне (на компьютере меню открывается наведением) */
.st-nav__tog { display: none; }
/* меню категорий: слева основные категории, справа — подкатегории той, на которую навели.
Разметка — components/bitrix/menu/top_horizontal/template.php, поведение — js/layout.js */
.st-cat { display: none; position: absolute; left: 0; top: 100%; z-index: 60; }
.st-nav__item--mega:hover > .st-cat,
.st-nav__item--mega:focus-within > .st-cat { display: block; }
.st-cat__list { position: relative; list-style: none; margin: 0; padding: 8px 0 10px; width: 300px; background: var(--surface);
border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--shadow-h); }
/* у пункта нет своего position: панель подкатегорий встаёт вровень с верхом всего списка */
.st-cat__item { display: flex; align-items: stretch; }
.st-cat__link { flex: 1 1 auto; min-width: 0; padding: 8px 8px 8px 20px; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.st-cat__item:not(.st-cat__item--sub) > .st-cat__link { padding-right: 20px; }
.st-cat__item.is-current > .st-cat__link { color: var(--green-deep); font-weight: 600; }
.st-cat__link:hover, .st-cat__item.is-active > .st-cat__link { background: #eef3fd; color: var(--green-deep); }
.st-cat__tog { flex: 0 0 34px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.st-cat__item.is-active > .st-cat__tog { background: #eef3fd; color: var(--green-deep); }
.st-cat__link:focus-visible, .st-cat__tog:focus-visible, .st-cat__sublink:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.st-cat__sub { display: none; position: absolute; left: 100%; top: 0; min-height: 100%; width: 270px; padding: 14px 24px 18px; background: var(--surface);
border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 0; box-shadow: var(--shadow-h); }
.st-cat__sub--c2 { width: 500px; }
.st-cat__sub--c3 { width: 730px; }
.st-cat__item.is-active > .st-cat__sub { display: block; }
/* без скрипта подкатегории открываются простым наведением (скрипт добавляет задержку, чтобы панель не «соскакивала») */
.st-cat:not(.st-cat--js) .st-cat__item:hover > .st-cat__sub { display: block; }
.st-cat__cols { column-gap: 28px; }
.st-cat__sub--c2 .st-cat__cols { columns: 2; }
.st-cat__sub--c3 .st-cat__cols { columns: 3; }
.st-cat__sublink { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; break-inside: avoid; -webkit-column-break-inside: avoid; }
.st-cat__sublink:hover, .st-cat__sublink[aria-current] { color: var(--green-deep); }
.st-cat__sublink--all { font-family: var(--font-d); font-weight: 700; color: var(--ink); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
/* подкатегорий нет вовсе — один список; длинный раскладываем в колонки */
.st-cat--f2 .st-cat__list { width: 560px; columns: 2; column-gap: 0; }
.st-cat--f3 .st-cat__list { width: 820px; columns: 3; column-gap: 0; }
.st-cat--flat .st-cat__item { break-inside: avoid; }
/* на небольших экранах три колонки не помещаются рядом со списком — оставляем две */
@media (max-width: 1120px) {
.st-cat__sub--c3 { width: 500px; }
.st-cat__sub--c3 .st-cat__cols { columns: 2; }
.st-cat--f3 .st-cat__list { width: 560px; columns: 2; }
}
/* меню услуг под пунктом «Услуги»: две колонки — главные направления и остальные услуги.
Разметка — components/bitrix/menu/top_horizontal/template.php, список услуг — App\Site\Services.
Пункт «Услуги» стоит ближе к правому краю, поэтому панель привязана не к пункту, а к правому краю
строки меню: от пункта она вылезала бы за край экрана. */
.st-nav__in { position: relative; }
.st-nav__item--svc { position: static; }
.st-svc { display: none; position: absolute; right: 20px; top: 100%; z-index: 60; width: 660px; max-width: calc(100% - 40px); padding: 12px 12px 0;
background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--shadow-h); }
.st-nav__item--svc:hover > .st-svc,
.st-nav__item--svc:focus-within > .st-svc { display: block; }
.st-nav__item--svc.is-closed > .st-svc { display: none; } /* закрыли клавишей Esc (js/layout.js) */
.st-nav__item--mega.is-closed > .st-cat { display: none; } /* версия 169: то же у «Каталога» */
.st-svc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.st-svc__col, .st-svc__sub { list-style: none; margin: 0; padding: 0; }
.st-svc__link { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.st-svc__link b { display: block; font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.3; }
.st-svc__link span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.st-svc__link[aria-current] { background: #eef3fd; }
.st-svc__link[aria-current] b { color: var(--green-deep); }
/* услуги того же направления — ссылки помельче под основной */
.st-svc__sub { margin: 2px 0 6px 14px; padding-left: 8px; border-left: 2px solid var(--line); }
.st-svc__sublink { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; }
.st-svc__sublink[aria-current] { background: #eef3fd; color: var(--green-deep); }
.st-svc__all { display: block; margin: 10px -12px 0; padding: 12px 24px; border-top: 1px solid var(--line); border-radius: 0 0 13px 13px;
font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); text-decoration: none; }
/* подсветка под курсором — только там, где есть курсор: на сенсорном экране она «залипала» бы на пункте после касания */
@media (hover: hover) {
.st-svc__link:hover, .st-svc__sublink:hover { background: #eef3fd; }
.st-svc__link:hover b, .st-svc__sublink:hover { color: var(--green-deep); }
.st-svc__all:hover { background: #f5f8fe; }
}
.st-svc__link:focus-visible, .st-svc__sublink:focus-visible, .st-svc__all:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* ---------------- ПОДВАЛ ---------------- */
.st-footer { background: var(--ink); color: #aeb8c9; margin-top: 64px; }
.st-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 52px 20px 40px; }
.st-footer a { color: #aeb8c9; text-decoration: none; }
.st-footer a:hover { color: #fff; }
.st-logo--f { color: #fff; }
.st-footer__desc { font-size: 14px; line-height: 1.6; margin: 14px 0 18px; max-width: 320px; }
.st-tel--f { display: block; color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
/* график приёма звонков под телефоном (contacts.work_hours) */
.st-footer__hours { font-size: 13px; color: #8f9bb0; margin: 0 0 8px; }
.st-footer__mail { font-size: 14px; }
.st-footer__col { display: flex; flex-direction: column; gap: 10px; }
.st-footer__h { font-family: var(--font-d); font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 4px; }
.st-footer__col a { font-size: 14px; }
/* второй заголовок в той же колонке (услуги: «Франчайзерам» / «Покупателям») */
.st-footer__h--next { margin-top: 12px; }
.st-footer__all { color: var(--green) !important; }
.st-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.st-footer__bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 13px; flex-wrap: wrap; }
.st-footer__legal { display: inline-flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* версия 136: под копирайтом — реквизиты (название, ИНН, ОГРН); длинное название переносится, а не растягивает строку */
.st-footer__copy { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-footer__req { overflow-wrap: anywhere; }
.st-18 { border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
/* ---------------- адаптив ---------------- */
@media (max-width: 1000px) {
.st-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
.st-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.st-cta { display: none; }
.st-burger { display: flex; }
.st-search { order: 3; flex-basis: 100%; max-width: none; }
/* боковые поля сохраняем (раньше padding: 14px 0 обнулял поля .st-wrap — логотип и поиск упирались в край экрана) */
.st-main__in { flex-wrap: wrap; height: auto; padding: 14px 20px; gap: 14px; }
.st-burger { margin-left: auto; }
.st-nav { display: none; border-top: 1px solid var(--line); }
.st-nav.is-open { display: block; }
.st-nav__in { flex-direction: column; gap: 0; }
.st-nav__item { border-bottom: 1px solid var(--line); }
.st-nav__item--mob, .st-nav__link.st-nav__item--mob { display: block; }
.st-nav__link { padding: 14px 0; }
.st-nav__cta { display: block; margin: 12px 0 18px; padding: 13px 18px; text-align: center; font-family: var(--font-d); font-weight: 700; font-size: 15px;
line-height: 1.25; color: var(--green-deep); background: #eef4ff; border: 1.5px solid rgba(27,106,229,.4); border-radius: 10px; text-decoration: none; }
.st-nav__cta:active { background: var(--green); border-color: var(--green); color: #fff; }
.st-nav__cta:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
/* меню категорий на телефоне: «Каталог» — ссылка на весь каталог, категории раскрывает стрелка рядом; подкатегории — стрелка у категории */
.st-nav__item--mega { display: flex; flex-wrap: wrap; align-items: stretch; }
.st-nav__item--mega > .st-nav__link { flex: 1 1 auto; }
.st-nav__item--mega > .st-nav__link .st-nav__chev { display: none; }
.st-nav__tog { flex: 0 0 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.st-nav__tog svg { transition: transform .2s; }
.st-nav__item--mega.is-open > .st-nav__tog svg { transform: rotate(180deg); }
.st-nav__item--mega > .st-cat { flex: 0 0 100%; }
.st-cat, .st-nav__item--mega:hover > .st-cat, .st-nav__item--mega:focus-within > .st-cat { display: none; position: static; }
.st-nav__item--mega.is-open > .st-cat { display: block; }
.st-cat__list, .st-cat--f2 .st-cat__list, .st-cat--f3 .st-cat__list { width: auto; columns: auto; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
.st-cat__item { flex-wrap: wrap; }
.st-cat__link { padding: 11px 8px 11px 12px; }
.st-cat__tog { flex-basis: 48px; min-height: 44px; }
.st-cat__tog svg { transition: transform .2s; }
.st-cat__item.is-active > .st-cat__tog svg { transform: rotate(90deg); }
.st-cat__sub, .st-cat__sub--c2, .st-cat__sub--c3 { position: static; flex: 0 0 100%; width: auto; min-height: 0; padding: 2px 0 10px 26px; border: 0; border-radius: 0; box-shadow: none; }
.st-cat:not(.st-cat--js) .st-cat__item:hover > .st-cat__sub { display: none; }
.st-cat__sub--c2 .st-cat__cols, .st-cat__sub--c3 .st-cat__cols { columns: auto; }
.st-cat__sublink { padding: 9px 0; }
.st-cat__sublink--all { border: 0; margin: 0; padding-bottom: 9px; }
/* меню услуг на телефоне: «Услуги» — ссылка на витрину, список раскрывает стрелка рядом; колонки — друг под другом */
.st-nav__item--mega > .st-svc { flex: 0 0 100%; }
.st-svc, .st-nav__item--svc:hover > .st-svc, .st-nav__item--svc:focus-within > .st-svc { display: none; position: static; width: auto; max-width: none; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
.st-nav__item--svc.is-open > .st-svc { display: block; }
.st-svc__cols { grid-template-columns: minmax(0, 1fr); }
.st-svc__link { padding: 10px 8px 10px 12px; border-radius: 8px; }
.st-svc__sub { margin-left: 12px; }
.st-svc__sublink { padding: 9px 10px; }
.st-svc__all { margin: 4px 0 0; padding: 11px 12px; border-top: 0; border-radius: 8px; }
}
@media (max-width: 700px) {
.st-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.st-main .st-logo img { height: 40px; }
/* верхняя полоса фиксированной высоты: телефон не переносим; «Войти/Кабинет» есть в меню под «бургером» */
.st-tel { white-space: nowrap; }
.st-login { display: none; }
}
/* Телефон: четыре столбца ссылок подвала свёрнуты, раздел раскрывается нажатием на заголовок (js/layout.js ставит
столбцам класс is-collapsed; без скриптов все ссылки видны). Раньше подвал занимал полтора экрана. */
@media (max-width: 560px) {
.st-footer__grid { grid-template-columns: 1fr; gap: 0; padding-top: 36px; padding-bottom: 20px; }
.st-footer__brand { margin-bottom: 22px; }
.st-footer__col { gap: 0; border-top: 1px solid rgba(255,255,255,.10); }
.st-footer__col:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.st-footer__col .st-footer__h { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; }
.st-footer__col a { padding: 7px 0; }
.st-footer__col a:last-child { padding-bottom: 16px; }
.st-footer__col .st-footer__h[role="button"] { cursor: pointer; }
.st-footer__col .st-footer__h[role="button"]::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid #aeb8c9; border-bottom: 2px solid #aeb8c9;
transform: rotate(-135deg); transition: transform .15s ease; }
.st-footer__col.is-collapsed .st-footer__h[role="button"]::after { transform: rotate(45deg) translate(-2px, -2px); }
.st-footer__col.is-collapsed a { display: none; }
.st-footer__col .st-footer__h:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
}
@media (max-width: 480px) {
.st-footer__grid { grid-template-columns: 1fr; }
.st-topbar__right { gap: 14px; }
.st-city { display: none; }
}
@media (max-width: 400px) {
/* телефон + «Сравнение» + «Избранное» словами не помещаются в 320–400px и давали горизонтальную прокрутку:
вместо слов — значки (те же, что на карточках), счётчики остаются; текст ссылок доступен скринридеру */
.st-util { font-size: 0; gap: 3px; }
.st-util::before { font-size: 15px; line-height: 1; }
.st-util[href="/compare/"]::before { content: '⇄'; }
.st-util[href="/favorites/"]::before { content: '♡'; }
}
/* ловушка для ботов в формах заявок: поле есть в разметке, но человеку не видно и недоступно с клавиатуры */
/* галочки согласий в формах (App\Site\Consent): вид подписи задаёт сама форма, здесь — только раскладка */
.cs { display: grid; gap: 8px; text-align: left; }
.cs label { cursor: pointer; }
.cs a { color: var(--green-deep); }
.cs__note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hp-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }
/* ============================================================
ШАПКА ВЕРСИИ 99
Строка с поиском — для покупателя: поиск во всю ширину, «Сравнение» и «Избранное» значками (.st-acts), одна
кнопка «Подобрать франшизу» (.st-cta). «Разместить франшизу» — ссылка в верхней полосе (.st-place), на телефоне —
кнопка в меню (.st-nav__cta). У пунктов меню иконки (.st-nav__ico), справа в строке меню — быстрые отборы
(.st-nav__quick, от 1200 px). Блок стоит в конце файла и уточняет правила выше; правила для узких экранов
повторены здесь же, иначе их перебили бы общие правила этого блока.
============================================================ */
/* --- верхняя полоса --- */
.st-util--mob { display: none; } /* на широком экране — значки в строке поиска */
.st-place { display: inline-flex; align-items: center; gap: 7px; color: #fff !important; font-weight: 600; }
.st-place__for { color: #c9d2e0; font-weight: 400; }
.st-place svg { color: var(--amber); transition: transform .15s ease; }
.st-place:hover svg { transform: translateX(3px); }
.st-login { display: inline-flex; align-items: center; gap: 7px; }
/* --- строка с поиском --- */
.st-search { max-width: none; }
.st-search button { background: transparent; color: var(--ink); }
.st-search button:hover { background: rgba(26, 43, 74, .08); }
.st-search:focus-within button { color: var(--green-deep); }
.st-acts { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; }
.st-act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 76px; padding: 5px 4px;
border-radius: 10px; color: var(--ink-soft); font-size: 12px; line-height: 1.2; text-decoration: none; }
.st-act:hover { background: #eef3fd; color: var(--green-deep); }
.st-act:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-act .st-util__c { position: absolute; top: 0; left: calc(50% + 6px); }
.st-act .st-util__c.is-zero { display: none; } /* пустой счётчик не показываем; класс ведёт js/wishlist.js */
.st-cta { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: #fff; background: var(--green-deep); border: 1.5px solid var(--green-deep);
border-radius: 12px; padding: 11px 18px 11px 14px; transition: background .15s ease, border-color .15s ease; }
.st-cta:hover { background: #093a7d; border-color: #093a7d; color: #fff; }
.st-cta:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* --- строка меню --- */
.st-nav__in { gap: 2px; }
.st-nav__link { gap: 8px; padding: 14px 12px; }
.st-nav__ico { display: inline-flex; flex: 0 0 auto; }
.st-nav__link.is-active { box-shadow: inset 0 -3px 0 var(--amber); }
/* стрелка «Каталога» и «Услуг» поворачивается при наведении — иконка пункта остаётся на месте */
.st-nav__item--mega > .st-nav__link .st-nav__ico svg,
.st-nav__item--mega:hover > .st-nav__link .st-nav__ico svg { transform: none; transition: none; }
.st-nav__item--cta { display: none; } /* «Подобрать франшизу» на широком экране — кнопка шапки */
.st-nav__quick { display: none; }
.st-nav__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #dfe4ee; border-radius: 16px;
font-family: var(--font-b); font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.st-nav__chip:hover { border-color: var(--green); color: var(--green-deep); }
.st-nav__chip:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-nav__chip.is-off { visibility: hidden; } /* не поместился — ставит js/layout.js */
@media (min-width: 901px) {
/* Пунктов больше, чем помещается в строку: название пункта не рвётся на две строки, а лишние пункты целиком
переходят на вторую строку меню. */
.st-nav__in { flex-wrap: wrap; }
.st-nav__link { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1040px) {
/* Версия 102: с пунктом «Бизнес-идеи» в строке семь пунктов. На узком экране компьютера и планшете они
помещаются в одну строку без иконок — так меню не переносится на второй ряд. */
.st-nav__ico { display: none; }
.st-nav__link { padding-left: 11px; padding-right: 11px; }
}
@media (min-width: 1041px) {
/* Версия 102: пункты стоят чуть плотнее (поля 10 px вместо 12) — справа остаётся место для двух быстрых отборов. */
.st-nav__in { gap: 0; }
.st-nav__link { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 1200px) {
/* Отборы занимают место, оставшееся после пунктов меню, и прижаты вправо. Не поместившийся отбор уходит на
вторую строку блока, а она обрезана — меню при этом не сжимается и не переносится. Поля в 4 px — чтобы не
обрезалась рамка фокуса. */
.st-nav__quick { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; align-self: center;
gap: 12px 8px; height: 40px; padding: 4px 3px; margin-right: -3px; box-sizing: border-box; overflow: hidden; }
}
/* --- телефон и планшет: до 900 px --- */
.st-burger span { transition: transform .2s ease, opacity .15s ease; }
.st-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger.is-active span:nth-child(2) { opacity: 0; }
.st-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
.st-util--mob { display: inline-flex; }
.st-place { display: none; }
.st-acts { display: none; }
.st-cta { display: none; }
.st-nav__in { gap: 0; }
.st-nav__item--cta { display: block; } /* здесь «Подобрать франшизу» — строка меню */
/* строка меню: иконка на плашке, название, у «Каталога» и «Услуг» — стрелка справа */
.st-nav__link { gap: 14px; padding: 10px 0; min-height: 56px; box-sizing: border-box; font-size: 16px; }
.st-nav__link.is-active { box-shadow: none; }
.st-nav__ico { width: 36px; height: 36px; border-radius: 10px; background: #eef3fd; color: var(--green-deep); align-items: center; justify-content: center; }
.st-nav__link.is-active .st-nav__ico { background: var(--green); color: #fff; }
.st-nav__ico--plain { background: #f1f3f7; color: var(--ink-soft); }
/* строка нажимается по всей ширине, а не только по иконке и названию (у «Каталога» и «Услуг» справа стрелка) */
.st-nav__item:not(.st-nav__item--mega) > .st-nav__link { display: flex; }
.st-nav__link.st-nav__item--mob { display: flex; align-items: center; }
.st-nav__cta { display: flex; align-items: center; justify-content: center; gap: 10px; }
}
@media (max-width: 560px) {
.st-login { display: none; } /* «Войти» есть в меню под «бургером» */
}
@media (prefers-reduced-motion: reduce) {
.st-burger span, .st-place svg { transition: none; }
}
/* ============================================================
ВЕРСИЯ 165: СТРОКА МЕНЮ СИНЕЙ ПОЛОСОЙ (.st-header--navdark, header.nav_dark в site.config.php)
Только на компьютере (от 901 px): на телефоне меню под «бургером» остаётся светлым списком. Пункты — белые, под
курсором — светлая плашка; у «Каталога» плашка всегда: с него начинается выбор. Текущий раздел (версия 169) — белая
плашка с синим текстом. Выпадающие меню категорий и услуг — прежние, белые, прямо под полосой.
============================================================ */
:root { --nav-bg: #0d4ba0; }
@media (min-width: 901px) {
.st-header--navdark { border-bottom: 0; } /* под синей полосой светлая черта не нужна */
.st-header--navdark .st-nav { background: var(--nav-bg); border-top: 0; }
.st-header--navdark .st-nav__link { color: #fff; margin: 6px 0; padding-top: 8px; padding-bottom: 8px; border-radius: 9px;
transition: background .15s ease, color .15s ease; }
.st-header--navdark .st-nav__link:hover,
.st-header--navdark .st-nav__item--mega:hover > .st-nav__link,
.st-header--navdark .st-nav__item--mega:focus-within > .st-nav__link { color: #fff; background: rgba(255,255,255,.14); }
.st-header--navdark .st-nav__link.is-active { color: #fff; background: rgba(255,255,255,.2); box-shadow: none; }
.st-header--navdark .st-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* «Каталог» — первый пункт с меню категорий */
.st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link:not(.is-active) { background: rgba(255,255,255,.16); }
.st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc):hover > .st-nav__link,
.st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc):focus-within > .st-nav__link,
.st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link.is-active { background: rgba(255,255,255,.26); }
.st-header--navdark .st-nav .ic { --ic-accent: #ffc857; }
/* Версия 169: текущий раздел — белая плашка с синим текстом. Полупрозрачные плашки у текущего раздела, у «Каталога»
и под курсором были почти одного цвета: на странице услуг с курсором над «Блогом» подсвечивались три пункта, и
понять, где вы, было нельзя. Теперь полупрозрачная плашка — только у «Каталога» и под курсором. */
.st-header--navdark .st-nav__link.is-active,
.st-header--navdark .st-nav__link.is-active:hover,
.st-header--navdark .st-nav__item--mega:hover > .st-nav__link.is-active,
.st-header--navdark .st-nav__item--mega:focus-within > .st-nav__link.is-active,
.st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link.is-active { color: var(--nav-bg); background: #fff; }
.st-header--navdark .st-nav__link.is-active:focus-visible { outline-offset: 2px; }
/* быстрые отборы справа в полосе (header.quick_links_on) */
.st-header--navdark .st-nav__chip { border-color: rgba(255,255,255,.4); color: #fff; }
.st-header--navdark .st-nav__chip:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.st-header--navdark .st-nav__chip:focus-visible { outline-color: #fff; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
.st-header--navdark .st-nav__link { transition: none; }
}
/* End */
/* Start:/bitrix/templates/franchise/css/ux.css?179216064737936*/
/* ============================================================
Общие мелочи интерфейса (подключается глобально, header.php):
подписи и ошибки полей форм (js/forms.js), уведомления, закреплённая компактная шапка и кнопка «Наверх»
(js/ux.js), блок «Вы смотрели» (js/ux.js), подсказки поиска (js/suggest.js).
Путь: /local/templates/{ШАБЛОН}/css/ux.css. На общих токенах layout.css.
============================================================ */
/* ---------------- ФОРМЫ: подпись над полем, ошибка под ним ---------------- */
/* align-content: соседнее поле в строке не растягивается, когда под этим появилась подсказка или ошибка */
.fx-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.fx-label { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fx-label small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fx-label small::before { content: '· '; }
/* пояснение под полем (например, зачем нужен e-mail в заявке на размещение) */
.fx-hint { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fx-err { display: block; font-size: 13px; line-height: 1.4; color: #b42318; }
.fx-err[hidden] { display: none; }
.fx-err::before { content: ''; display: inline-block; width: 14px; height: 14px; margin: -2px 6px 0 0; vertical-align: middle;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23d92d20'/%3E%3Cpath d='M8 4.3v4.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ошибка у галочки согласия — под подписью, на уровне её текста */
.cs > .fx-err { margin: -4px 0 2px 25px; }
form input.is-invalid, form textarea.is-invalid, form select.is-invalid,
form input.is-invalid:focus, form textarea.is-invalid:focus, form select.is-invalid:focus { border-color: #d92d20; background-color: #fffafa; }
input[type="checkbox"].is-invalid, input[type="radio"].is-invalid { outline: 2px solid #d92d20; outline-offset: 1px; }
/* общая строка над кнопкой: ошибка, которую не к чему привязать (сервер недоступен, лимит заявок) */
.fx-status { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fef3f2; color: #b42318; font-size: 14px; line-height: 1.45; }
.fx-status[hidden] { display: none; }
/* поля формы «заявка всем» из каталога: имя и телефон в одну строку */
.pk-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pk-form .fx-label, .frd-form .fx-label { font-size: 12.5px; }
@media (max-width: 560px) { .pk-form__row { grid-template-columns: minmax(0, 1fr); } }
/* контакты из прошлой заявки подставлены (js/forms.js): строка «Подставили… · Очистить» над полями */
.fx-remembered { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 8px 12px; border-radius: 10px;
background: rgba(27, 106, 229, .07); color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.fx-remembered__clear { font: inherit; font-weight: 600; color: var(--green-deep); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-decoration-color: rgba(13, 75, 160, .35); text-underline-offset: 2px; }
.fx-remembered__clear:hover { text-decoration-color: currentColor; }
.fx-remembered__clear:focus-visible { outline: 2px solid rgba(27, 106, 229, .5); outline-offset: 2px; border-radius: 3px; }
/* «Что будет после заявки» под кнопкой отправки (App\Site\LeadSteps): три шага; в широкой форме — в строку */
.ls { container-type: inline-size; min-width: 0; }
.ls[hidden] { display: none; }
.ls__h { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ls__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: ls; }
.ls__list li { counter-increment: ls; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start;
font-size: 13px; line-height: 1.4; color: var(--ink-soft); text-align: left; }
.ls__list li::before { content: counter(ls); width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center;
background: rgba(27, 106, 229, .1); color: var(--green-deep); font-family: var(--font-d); font-size: 11px; font-weight: 700; line-height: 1; }
/* последний пункт — не шаг, а обещание: галочка вместо номера */
.ls__list li:last-child::before { content: ''; background: #e9f8ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23079455' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@container (min-width: 520px) {
.ls__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
/* ---------------- УВЕДОМЛЕНИЯ ---------------- */
.fx-toasts { position: fixed; left: 50%; bottom: calc(16px + var(--fx-lift, 0px) + var(--ck-lift, 0px)); transform: translateX(-50%); z-index: 950;
width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.fx-toast { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 8px 12px 18px; border-radius: 14px;
background: var(--ink); color: #fff; box-shadow: 0 16px 44px rgba(26, 43, 74, .32); font-family: var(--font-b); font-size: 14.5px; line-height: 1.4;
pointer-events: auto; animation: fxIn .18s ease; }
.fx-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.fx-toast--warn { background: #7a2e0e; }
.fx-toast__text { flex: 1 1 auto; min-width: 0; }
.fx-toast__btn { flex: 0 0 auto; font: inherit; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: #9ec5ff; background: none; border: 0;
padding: 6px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fx-toast--warn .fx-toast__btn { color: #ffd4a8; }
.fx-toast__btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.fx-toast__close { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
background: none; color: #aeb8c9; cursor: pointer; }
.fx-toast__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.fx-toast__btn:focus-visible, .fx-toast__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes fxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* уведомление встаёт над панелью «Выбрано франшиз» и над кнопкой заявки внизу экрана */
html.pk-has-bar { --fx-lift: 72px; }
/* полоса «Отправить заявку выбранным» на странице сравнения (css/wishlist.css, .ml-bar) */
html.ml-has-bar { --fx-lift: 74px; --fx-top-lift: 66px; }
@media (max-width: 900px) { html.frd-has-mcta { --fx-lift: 66px; } html.frd-has-mcta.pk-has-bar { --fx-lift: 140px; } }
@media (max-width: 560px) {
.fx-toasts { left: 8px; right: 8px; bottom: calc(8px + var(--fx-lift, 0px) + var(--ck-lift, 0px)); transform: none; width: auto; max-width: none; }
.fx-toast { padding: 10px 6px 10px 14px; font-size: 14px; }
html.pk-has-bar { --fx-lift: 76px; }
html.ml-has-bar { --fx-lift: 66px; }
}
/* ---------------- ЗАКРЕПЛЁННАЯ КОМПАКТНАЯ ШАПКА ---------------- */
/* js/ux.js: шапка ушла за край — is-fixed (закреплена и спрятана), прокрутка вверх — is-shown (выезжает).
На месте шапки — пустой блок .st-header__spacer её высоты: страница не прыгает. */
.st-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 700; transform: translateY(-100%); visibility: hidden;
box-shadow: 0 8px 26px rgba(26, 43, 74, .12); transition: transform .22s ease, visibility 0s linear .22s; }
.st-header.is-fixed.is-shown { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
.st-header.is-instant { transition: none !important; }
.st-header.is-fixed .st-topbar { display: none; }
.st-header.is-fixed .st-main__in { height: 60px; gap: 18px; }
.st-header.is-fixed .st-logo img { height: 36px; }
.st-header.is-fixed .st-search input { padding-top: 9px; padding-bottom: 9px; }
.st-header.is-fixed .st-search button { width: 36px; height: 36px; }
.st-header.is-fixed .st-cta { padding: 8px 14px 8px 12px; }
/* .st-mini — значки шапки до версии 99: если header.php ещё прежний, а стили уже новые, значки не показываем */
.st-mini { display: none; }
/* сравнение и избранное (.st-acts, css/layout.css) в компактной шапке — значками без подписей, счётчик рядом со значком */
.st-header.is-fixed .st-acts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.st-header.is-fixed .st-act { flex-direction: row; min-width: 0; height: 40px; padding: 0 8px; gap: 4px; }
.st-header.is-fixed .st-act__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-header.is-fixed .st-act .st-util__c { position: static; font-size: 11px; }
/* строка меню на компьютере в компактной шапке не нужна — разделы есть в меню под логотипом на полной */
@media (min-width: 901px) { .st-header.is-fixed .st-nav { display: none; } }
@media (max-width: 900px) {
/* телефон: одна строка — поиск и «бургер»; меню раскрывается под ней и листается само */
.st-header.is-fixed .st-main__in { flex-wrap: nowrap; height: 60px; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
.st-header.is-fixed .st-logo { display: none; }
.st-header.is-fixed .st-search { order: 0; flex: 1 1 auto; }
.st-header.is-fixed .st-burger { margin-left: 0; }
.st-header.is-fixed .st-nav.is-open { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 560px) { .st-header.is-fixed .st-acts { display: none; } }
/* Липкие блоки страниц (фильтр каталога, меню разделов франшизы, колонка под формой, оглавление статьи) встают под
шапку, пока она видна: их отступ сверху в своих файлах стилей считается от переменной --st-top (ставит js/ux.js). */
@media (prefers-reduced-motion: reduce) {
.st-header.is-fixed, .st-header.is-fixed.is-shown { transition: none; }
.fx-toast { animation: none; }
}
/* ---------------- КНОПКА «НАВЕРХ» ---------------- */
.fx-top { position: fixed; right: 20px; bottom: calc(20px + var(--fx-top-lift, 0px) + var(--ck-lift, 0px)); z-index: 850; width: 48px; height: 48px; display: grid; place-items: center;
padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--green-deep); cursor: pointer;
box-shadow: 0 10px 28px rgba(26, 43, 74, .18); transition: transform .15s ease, background .15s ease; }
.fx-top[hidden] { display: none; }
.fx-top:hover { background: var(--btn); color: #fff; border-color: var(--btn); transform: translateY(-2px); }
.fx-top:focus-visible { outline: 3px solid rgba(27, 106, 229, .4); outline-offset: 2px; }
@media (max-width: 900px) {
.fx-top { right: 12px; bottom: calc(16px + var(--fx-top-lift, 0px) + var(--ck-lift, 0px)); width: 44px; height: 44px; }
html.frd-has-mcta { --fx-top-lift: 66px; }
}
@media (max-width: 560px) {
html.pk-has-bar { --fx-top-lift: 72px; }
html.frd-has-mcta.pk-has-bar { --fx-top-lift: 140px; }
/* на телефоне уведомление во всю ширину — кнопка на это время уходит */
html.fx-has-toast .fx-top { display: none; }
}
/* ---------------- «ВЫ СМОТРЕЛИ» ---------------- */
.rv { margin-top: 40px; }
.rv[hidden] { display: none; }
.rv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rv__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; margin: 0; color: var(--ink); }
.rv__clear { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.rv__clear:hover { color: var(--green-deep); }
.rv__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rv__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line);
border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.rv__item:hover { border-color: rgba(27,106,229,.4); box-shadow: var(--shadow); }
.rv__item:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
.rv__logo { flex: 0 0 64px; width: 64px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #f3f5f9; overflow: hidden; }
.rv__logo img { display: block; max-width: 60px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.rv__ph { font-family: var(--font-d); font-weight: 800; font-size: 18px; color: var(--muted); }
.rv__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv__name { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rv__meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* больше четырёх — показываем первые четыре; на узком экране список листается вбок */
.rv__list > :nth-child(n+5) { display: none; }
@media (max-width: 900px) {
.rv__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none; }
.rv__list::-webkit-scrollbar { display: none; }
.rv__list > :nth-child(n+5) { display: flex; }
.rv__item { flex: 0 0 248px; scroll-snap-align: start; }
}
@media (max-width: 560px) { .rv__list { margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .rv__item { flex-basis: 232px; } }
/* ---------------- ПОДСКАЗКИ ПОИСКА ---------------- */
.has-sg { position: relative; }
.sg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain;
padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-h); text-align: left; }
.sg[hidden] { display: none; }
.sg__h { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sg__note { margin: 4px 6px 2px; padding: 8px 10px; border-radius: 10px; background: #f5f8fe; font-size: 13px; color: var(--ink-soft); }
.sg__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.sg__item.is-active, .sg__all.is-active { background: #eef3fd; }
.sg__logo { flex: 0 0 48px; width: 48px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: #f3f5f9; overflow: hidden;
font-family: var(--font-d); font-weight: 800; color: var(--muted); }
.sg__logo img { display: block; max-width: 44px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.sg__ico { flex: 0 0 48px; width: 48px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: rgba(27,106,229,.09); color: var(--green-deep); }
.sg__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg__name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg__name mark { background: none; color: var(--green-deep); font-weight: 800; }
.sg__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg__empty { padding: 12px; font-size: 14px; color: var(--ink-soft); }
.sg__all { display: block; margin-top: 4px; padding: 11px 12px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); text-decoration: none; }
.has-sg.is-loading button[type="submit"] { opacity: .75; }
@media (max-width: 560px) { .sg { max-height: 60vh; } .sg__item { padding: 9px 8px; } }
/* ---------------- УВЕДОМЛЕНИЕ О COOKIE (версия 138, include/cookie_bar.php) ----------------
Стоит у нижнего края над закреплёнными полосами заявки (--fx-lift); пока открыто, уведомления и кнопка «Наверх»
поднимаются на --ck-lift. Один раз на браузер; в печати не выводится. */
html.ck-has-bar { --ck-lift: 72px; }
.ck { position: fixed; left: 0; right: 0; bottom: var(--fx-lift, 0px); z-index: 940; padding: 0 12px 12px; pointer-events: none; animation: fxIn .22s ease; }
.ck[hidden] { display: none; }
.ck.is-out { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.ck__in { pointer-events: auto; margin: 0 auto; max-width: 860px; display: flex; align-items: center; gap: 12px 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 16px; box-shadow: 0 12px 36px rgba(26, 43, 74, .18); }
.ck__ico { flex: 0 0 auto; display: inline-flex; color: var(--green-deep); }
.ck__text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.ck__text a { color: var(--green-deep); }
.ck__btn { flex: 0 0 auto; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: #fff; background: var(--btn); border: 1.5px solid var(--btn); border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: .15s; }
.ck__btn:hover { background: var(--btn-deep); border-color: var(--btn-deep); }
.ck__btn:focus-visible { outline: 3px solid rgba(27, 106, 229, .4); outline-offset: 2px; }
@media (max-width: 560px) {
html.ck-has-bar { --ck-lift: 148px; }
.ck { padding: 0 8px 8px; }
.ck__in { flex-wrap: wrap; padding: 12px 14px; gap: 8px 12px; }
.ck__ico { display: none; }
.ck__text { flex-basis: 100%; font-size: 13.5px; }
.ck__btn { width: 100%; }
}
@media print { .ck { display: none; } }
/* ---------------- ПОДЕЛИТЬСЯ (версия 139, include/share.php + js/share.js) ----------------
bar — строка с подписями (под статьёй, в карточке франшизы на телефоне); compact — кнопка, раскрывающая ряд.
Иконки — знаки набора сайта (или официальные логотипы из images/social/, тогда .soc-img). */
.sh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sh--bar { margin: 22px 0 4px; }
.sh__label { color: var(--muted); font-size: 14px; margin-right: 2px; }
.sh__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sh__row[hidden] { display: none; }
.sh__btn, .sh__toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; line-height: 1;
color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 11px; text-decoration: none; cursor: pointer; transition: .15s; }
.sh__btn:hover, .sh__toggle:hover { border-color: var(--green); color: var(--green-deep); }
.sh__btn:focus-visible, .sh__toggle:focus-visible { outline: 3px solid rgba(27, 106, 229, .35); outline-offset: 2px; }
.sh__btn .ic, .sh__toggle .ic { flex: 0 0 auto; }
.sh__btn[hidden] { display: none; }
.sh__btn--native { background: var(--btn); border-color: var(--btn); color: #fff; }
.sh__btn--native:hover { background: var(--btn-deep); border-color: var(--btn-deep); color: #fff; }
.sh__btn--native .ic { --ic-accent: #ffd27a; }
.soc-img { display: block; width: 18px; height: 18px; object-fit: contain; }
.sh--compact { position: relative; }
.sh--compact .sh__row { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-h); min-width: 240px; }
.sh--compact .sh__btn { width: 100%; justify-content: flex-start; border-radius: 10px; }
@media (max-width: 560px) {
.sh__btn span { font-size: 13px; }
.sh--compact .sh__row { left: auto; right: 0; }
}
/* ---------------- МЫ В СОЦСЕТЯХ / НАПИСАТЬ В МЕССЕНДЖЕРЕ (App\Site\Social) ----------------
.soc — ряд круглых кнопок с названиями (подвал — тёмный фон, /contacts/ — светлый). */
.soc { display: flex; flex-wrap: wrap; gap: 8px; }
.soc__h { font-family: var(--font-d); font-weight: 700; font-size: 14px; margin: 18px 0 10px; }
.soc__a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; line-height: 1;
color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 10px; text-decoration: none; transition: .15s; }
.soc__a:hover { border-color: var(--green); color: var(--green-deep); transform: translateY(-1px); }
.soc__a .ic { flex: 0 0 auto; }
.soc__a .soc-img { width: 20px; height: 20px; }
/* в подвале — на тёмном фоне */
.st-footer .soc__h { color: #fff; margin-top: 16px; }
.st-footer .soc__a { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.st-footer .soc__a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }
.st-footer .soc__a .ic { --ic-accent: #ffd27a; }
/* «Поделиться» в карточке франшизы: в боковой колонке — строкой на всю ширину под «К сравнению / В избранное» */
.frd-contact__acts .sh--compact { flex: 1 1 100%; }
.frd-contact__acts .sh__toggle { width: 100%; justify-content: center; border-radius: 12px; padding: 11px 8px; font-size: 13.5px; }
.frd-contact__acts .sh--compact .sh__row { left: 0; right: 0; min-width: 0; }
/* ---------------- ПОДПИСКА НА РАССЫЛКУ (версия 140, include/subscribe_form.php) ----------------
card — блок с заголовком, имя + e-mail, галочки, кнопка (страницы для франчайзеров, /subscribe/);
inline — строка e-mail + кнопка и галочки под ней (подвал, тёмный фон). */
.nl--card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); max-width: 760px; }
.nl__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.nl__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bg); color: var(--green-deep); }
.nl__ico--ok { background: #e9f7ef; color: #17693a; }
.nl__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.nl__h--sm { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.nl__text { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 14.5px; }
.nl__form { display: grid; gap: 14px; }
.nl__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.nl__input { font-family: inherit; font-size: 15px; color: var(--ink); width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbfcfe; outline: none; transition: .15s; }
.nl__input:focus { border-color: var(--green); background: #fff; }
.nl__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 15px; color: #fff; background: var(--btn); border: 1.5px solid var(--btn); border-radius: 12px; padding: 12px 22px; cursor: pointer; transition: .15s; white-space: nowrap; }
.nl__btn:hover { background: var(--btn-deep); border-color: var(--btn-deep); }
.nl__btn:disabled { opacity: .6; cursor: default; }
.nl__btn .ic { --ic-accent: #ffd27a; }
.nl__acts { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.nl__note { font-size: 13px; color: var(--muted); }
.nl__cs { display: grid; gap: 8px; }
.nl__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.nl__consent input { margin-top: 2px; flex: 0 0 auto; }
.nl__consent a { color: var(--green-deep); }
/* версия 175: строка о капче, когда значок в углу скрыт (App\Franchise\Captcha::notice) — во всю ширину, и в полосе подвала */
.nl__cs .nl__cap { grid-column: 1 / -1; }
.st-footer .nl__cs .nl__cap { color: rgba(255, 255, 255, .6); }
.st-footer .nl__cs .nl__cap a { color: #fff; }
.nl__status { margin: 0; }
.nl__done { display: flex; gap: 14px; align-items: flex-start; }
.nl__done b { display: block; font-family: var(--font-d); font-size: 17px; margin: 6px 0 4px; }
.nl__done p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.nl__done[hidden] { display: none; }
.nl__form[hidden] { display: none; }
/* подпись-плейсхолдер в строчной форме: подпись поля скрыта визуально, но читается экранным диктором */
.nl__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl--inline .nl__form { gap: 10px; }
.nl__line { display: flex; gap: 8px; }
.nl__grow { flex: 1 1 auto; min-width: 0; }
.nl--inline .nl__input { padding: 10px 12px; font-size: 14px; }
.nl--inline .nl__btn { padding: 10px 14px; font-size: 14px; border-radius: 10px; }
.nl--inline .nl__consent { font-size: 12.5px; }
@media (max-width: 560px) {
.nl--card { padding: 20px; }
.nl__row { grid-template-columns: 1fr; }
.nl__acts .nl__btn { width: 100%; justify-content: center; }
}
/* подвал: тёмный фон */
.st-footer .nl__h--sm { color: #fff; }
.st-footer .nl__input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.st-footer .nl__input::placeholder { color: rgba(255, 255, 255, .55); }
.st-footer .nl__input:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.st-footer .nl__consent { color: rgba(255, 255, 255, .7); }
.st-footer .nl__consent a { color: #fff; }
.st-footer .nl__done b, .st-footer .nl__done p { color: #fff; }
.st-footer .nl--inline .nl__btn span { display: none; }
.st-footer .nl--inline .nl__btn { padding: 10px 12px; }
.st-footer .nl__status { background: rgba(255, 255, 255, .1); color: #ffd27a; }
/* страница /subscribe/ */
.nl-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 18px; }
.nl-page__grid .nl--card { max-width: none; }
@media (max-width: 900px) { .nl-page__grid { grid-template-columns: 1fr; } }
.nl-result { display: flex; gap: 14px; align-items: flex-start; background: #e9f7ef; color: #17693a; border-radius: 14px; padding: 16px 18px; margin: 0 0 26px; max-width: 760px; }
.nl-result p { margin: 0; line-height: 1.55; color: var(--ink); }
.nl-result--warn { background: #fff4e0; color: #9a5b00; }
/* галочка подписки в формах заявок франчайзеров */
.svc-consent--nl { color: var(--ink-soft); }
/* универсальная подписка (версия 141): выбор «что присылать» ярлыками (стили .by-chip — buyer.css, здесь свои на случай страниц без него) */
.nl__who { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nl__who legend { padding: 0; flex-basis: 100%; margin-bottom: 2px; }
.nl__chip { position: relative; cursor: pointer; }
.nl__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nl__chip span { display: inline-block; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; transition: .15s; }
.nl__chip:hover span { border-color: var(--green); color: var(--green-deep); }
.nl__chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.nl__chip input:focus-visible + span { outline: 3px solid rgba(27, 106, 229, .35); outline-offset: 2px; }
.st-footer .nl__chip span { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.st-footer .nl__chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
/* ---- ПОДПИСКА: полоса подвала (версия 152, $nlVariant = 'band', footer.php) ----
Раньше форма стояла в столбце «Франчайзерам» шириной ~200 px: столбец растягивался на пол-экрана, кнопки выбора шли
друг под другом, согласия — по слову в строке, ссылки «согласие» были крупнее текста (правило ссылок столбца),
подпись «Что присылать» — тёмная на тёмном. Теперь — полоса на всю ширину под столбцами: левая часть ровно по
ширине столбца с логотипом (5 столбцов подвала 1.6fr + 4 × 1fr, промежутки 32 px), правая — от столбца «Каталог». */
.st-footer__nl { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 30px; }
.nl--band { display: grid; grid-template-columns: calc((100% - 128px) * 1.6 / 5.6) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
.nl--band .nl__head { margin: 0; gap: 14px; }
.nl--band .nl__ico { width: 42px; height: 42px; border-radius: 12px; }
.nl--band .nl__h { font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.nl--band .nl__text { font-size: 13.5px; line-height: 1.55; max-width: 340px; }
.nl--band .nl__form { gap: 14px; }
.nl--band .nl__line { display: flex; gap: 8px; max-width: 560px; }
.nl--band .nl__input { padding: 11px 14px; font-size: 14.5px; }
.nl--band .nl__btn { padding: 11px 20px; font-size: 14.5px; border-radius: 10px; }
.nl--band .nl__cs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; max-width: 760px; }
.nl--band .nl__consent { font-size: 12.5px; }
.nl--band .nl__done { grid-column: 2; }
.nl--band .nl__done p { max-width: 560px; }
.nl--band .nl__status { max-width: 560px; }
/* тёмный фон подвала */
.st-footer .nl--band .nl__ico { background: rgba(255, 255, 255, .07); color: #fff; }
.st-footer .nl--band .nl__ico .ic { --ic-accent: #ffd27a; }
.st-footer .nl--band .nl__h { color: #fff; }
.st-footer .nl--band .nl__text { color: #aeb8c9; }
.st-footer .nl__who legend { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.st-footer .nl__chip:hover span { color: #fff; border-color: rgba(255, 255, 255, .45); }
.st-footer .nl__chip input:focus-visible + span { outline-color: rgba(255, 255, 255, .6); }
.st-footer .nl__btn { background: var(--green); border-color: var(--green); }
.st-footer .nl__btn:hover { background: #3a82f0; border-color: #3a82f0; }
.st-footer .nl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.st-footer .nl__consent input { accent-color: var(--green); width: 16px; height: 16px; margin: 1px 0 0; }
.st-footer .nl__consent a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 2px; }
.st-footer .nl__consent a:hover { text-decoration-color: #fff; }
.st-footer .nl__done .nl__ico--ok { background: rgba(46, 204, 113, .16); color: #7fe0a6; }
.st-footer .nl__done p { color: #aeb8c9; }
/* 701–1000 px: в подвале 3 столбца, «Компания» стоит в ряду одна — подписка занимает два свободных столбца рядом с ней */
@media (max-width: 1000px) {
.st-footer__nl { grid-column: 2 / -1; border-top: 0; padding-top: 0; }
.nl--band { grid-template-columns: minmax(0, 1fr); }
.nl--band .nl__done { grid-column: auto; }
.nl--band .nl__text { max-width: 560px; }
}
@media (max-width: 700px) {
.st-footer__nl { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 28px; }
.nl--band .nl__cs { grid-template-columns: minmax(0, 1fr); }
}
/* телефон: полоса идёт под свёрнутыми разделами подвала, у последнего уже есть нижняя линия */
@media (max-width: 560px) {
.st-footer__nl { border-top: 0; padding-top: 26px; }
}
@media (max-width: 400px) {
.nl--band .nl__btn { padding: 11px 14px; }
}
/* «Подробнее о цифрах» (версия 161): ссылка под цифрами портала и окно с инфографикой — на компьютере горизонтальная
картинка, на телефоне, телефоне боком и планшете стоя — вертикальная (, App\Site\PortalStats::moreDialog;
тот же запрос, что PortalStats::IG_MEDIA) */
.ps-more { white-space: nowrap; font-weight: 600; color: var(--btn, #0d4ba0); text-decoration: none; }
.ps-more::after { content: '\00a0→'; }
.ps-more:hover, .ps-more:focus-visible { text-decoration: underline; }
.ps-ig:not([open]) { display: none; } /* браузеры без