/* ============================================================================= * KISELEV LAB — стиль, которого нет в marketing.css. * ----------------------------------------------------------------------------- * Классы `.n-*` (n = new) — блоки новой модели: шаги, каталог программ, * абонемент, расписание встреч, таймлайн доступа. Ниже — шапка сайта * (логотип KL, плоское меню с разделителем), неактивные кнопки и юр. страницы. * Всё под `.mkt`, как и остальной гостевой стиль. * ============================================================================= */ /* ── Модель «запись + подписка»: три шага ─────────────────────────────────── */ .mkt .n-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .mkt .n-step { position: relative; padding: 20px; border-radius: 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .mkt .n-step .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 800; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); } .mkt .n-step h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; } .mkt .n-step p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); } .mkt .n-step.is-sub { border-color: hsl(var(--primary) / .45); background: linear-gradient(160deg, hsl(var(--accent) / .6) 0%, hsl(var(--card)) 62%); } /* ── Карточка программы в каталоге ────────────────────────────────────────── */ .mkt .n-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mkt .n-prog { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .mkt .n-prog .top { display: flex; align-items: center; gap: 12px; } .mkt .n-prog .mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 800; background: hsl(var(--c) / .14); color: hsl(var(--c)); --c: var(--kg-ui-steel); } .mkt .n-prog h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } /* line-height у .who не задавали — наследовался от body (1.45), и на 10.5px шрифте это лишний воздух НАД текстом, а не только под ним: margin-top:0 тут мало, зазор был от самой строки, а не от отступа. */ /* ⚠️ `line-height` тут обязан быть больше единицы: в двух колонках подпись умещалась в строку и слипания не было видно, а в трёх (`.n-progs.is-3` на странице комплекта) она переносится — и строки налезали друг на друга. Поймано снимком, в разметке этого не видно. */ .mkt .n-prog .who { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; color: hsl(var(--muted-foreground)); margin-top: 1px; } /* ⚠️ Шапка карточки — СЕТКА, и подпись в ней стоит НА ВСЮ ШИРИНУ. Во флексе заголовок и подпись лежали в колонке справа от значка, а описание, цифры и подвал — от края карточки: получалась «лесенка» из двух разных левых краёв, заметная тем сильнее, чем уже колонка (правка владельца 21.09 «вёрстка кривая» на странице комплекта, три колонки). `display: contents` у обёртки в разметке нужен, чтобы заголовок и подпись стали прямыми детьми сетки: иначе пришлось бы править `.who` в 22 местах на шести страницах, в том числе на чужих. */ .mkt .n-prog .top { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; } .mkt .n-prog .top > div { display: contents; } .mkt .n-prog .top h3 { grid-column: 2; } .mkt .n-prog .top .who { grid-column: 1 / -1; } .mkt .n-prog p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); } .mkt .n-prog .vol { display: flex; flex-wrap: wrap; gap: 6px; } .mkt .n-prog .vol span { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 7px; background: hsl(var(--secondary)); color: hsl(var(--foreground)); } .mkt .n-prog .foot { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed hsl(var(--border)); } .mkt .n-prog .pr { display: flex; flex-direction: column; gap: 2px; } .mkt .n-prog .pr b { font-family: var(--font-mono); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .mkt .n-prog .pr span { font-size: 11px; color: hsl(var(--muted-foreground)); } .mkt .n-prog .foot .btn { margin-left: auto; } .mkt .n-prog.is-all { grid-column: 1 / -1; border-color: hsl(var(--primary) / .5); background: linear-gradient(150deg, hsl(var(--accent)) 0%, hsl(var(--card)) 58%); } .mkt .n-prog.is-all .inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: center; } .mkt .n-prog.is-all h3 { font-size: 21px; } /* Каталог из ТРЁХ отдельных программ (страница «Бесплатно»): без модификатора базовый .n-progs — это 2 колонки, и третья одиночная карточка курса падала на свою строку одна («2+1»), пока полноширинный .is-all не подбирал её снизу. С .is-3 все три курса стоят в один ряд, а комплект остаётся полноширинным — тот же .is-all, ему число колонок родителя не важно. */ .mkt .n-progs.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ── Подписка: главный новый продукт ──────────────────────────────────────── */ .mkt .n-sub { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid hsl(var(--primary) / .4); background: hsl(var(--card)); } .mkt .n-sub .left { padding: 30px 32px; } .mkt .n-sub .right { padding: 30px 32px; background: linear-gradient(165deg, hsl(var(--accent)) 0%, hsl(var(--card)) 75%); border-left: 1px solid hsl(var(--border)); display: flex; flex-direction: column; } .mkt .n-sub h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; } .mkt .n-sub .lead { font-size: 13.5px; line-height: 1.6; color: hsl(var(--muted-foreground)); margin-bottom: 18px; } .mkt .n-inc { display: grid; gap: 10px; } /* Только ПРЯМОЙ потомок: без «>» правило ловило и внутренний div с заголовком и текстом — заголовок становился флекс-элементом рядом с описанием и сжимался до одного слова в строку. */ .mkt .n-inc > div { display: flex; gap: 12px; align-items: flex-start; } .mkt .n-inc .ic { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); } .mkt .n-inc b { display: block; font-size: 13px; margin-bottom: 2px; } .mkt .n-inc span { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.5; } .mkt .n-sub .price { font-family: var(--font-mono); font-size: 34px; font-weight: 800; letter-spacing: -.025em; line-height: 1; } .mkt .n-sub .per { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 6px 0 16px; } .mkt .n-sub .terms { display: grid; gap: 7px; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed hsl(var(--border)); } .mkt .n-sub .terms > div { display: flex; gap: 8px; font-size: 11.5px; color: hsl(var(--muted-foreground)); line-height: 1.45; } .mkt .n-sub .terms b { color: hsl(var(--foreground)); font-weight: 600; } /* Расписание встреч подписки */ .mkt .n-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mkt .n-day { padding: 16px 18px; border-radius: 14px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .mkt .n-day .d { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 8px; } .mkt .n-day .who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mkt .n-day .who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: hsl(var(--secondary)); } .mkt .n-day .who b { display: block; font-size: 13.5px; } .mkt .n-day .who span { font-size: 11px; color: hsl(var(--muted-foreground)); } .mkt .n-day p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); } /* ── Разовые встречи ──────────────────────────────────────────────────────── */ .mkt .n-meet { display: flex; gap: 18px; padding: 22px; border-radius: 18px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .mkt .n-meet img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: hsl(var(--secondary)); } .mkt .n-meet h3 { font-size: 16px; font-weight: 800; margin-bottom: 2px; } .mkt .n-meet .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--accent-foreground)); margin-bottom: 8px; } .mkt .n-meet p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); margin-bottom: 12px; } .mkt .n-meet .foot { display: flex; align-items: center; gap: 12px; } .mkt .n-meet .foot b { font-family: var(--font-mono); font-size: 19px; font-weight: 800; } .mkt .n-meet .foot span { font-size: 11.5px; color: hsl(var(--muted-foreground)); } .mkt .n-meet .foot .btn { margin-left: auto; } /* Карточки встреч — одной высоты, цена и «Записаться» на одной линии (28.09): сетка выравнивает детей по верху, и у Константина текст короче. */ .mkt .n-meet { align-self: stretch; } .mkt .n-meet > div { display: flex; flex-direction: column; flex: 1; min-width: 0; } .mkt .n-meet .foot { margin-top: auto; } /* ── Разовая консультация на главной: компактно, БЕЗ портрета — иначе теряется в паре с фотокарточками экспертов из блока «Кто ведёт» строкой выше. Полная версия с фото — на самой /consultation (там она не соседствует с портретами, и «кто это» там как раз надо показать). ─────────────────── */ .mkt .n-consult { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mkt .n-consult-i { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .mkt .n-consult-i .who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mkt .n-consult-i .who b { font-size: 14.5px; font-weight: 800; } .mkt .n-consult-i .who span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .mkt .n-consult-i p { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); } .mkt .n-consult-i .why { font-size: 11.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); padding: 8px 10px; border-radius: 9px; background: hsl(var(--accent) / .35); } .mkt .n-consult-i .why b { color: hsl(var(--foreground)); font-weight: 600; } .mkt .n-consult-i .foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed hsl(var(--border)); } .mkt .n-consult-i .foot b { font-family: var(--font-mono); font-size: 18px; font-weight: 800; } .mkt .n-consult-i .foot span { font-size: 11px; color: hsl(var(--muted-foreground)); } .mkt .n-consult-i .foot .btn { margin-left: auto; } /* ── Допродажа подписки в заказе ──────────────────────────────────────────── */ .mkt .n-addon { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 14px; border-radius: 13px; border: 1px dashed hsl(var(--primary) / .5); background: hsl(var(--accent) / .35); cursor: pointer; } .mkt .n-addon.on { border-style: solid; background: hsl(var(--accent) / .75); } .mkt .n-addon input { position: absolute; opacity: 0; pointer-events: none; } .mkt .n-addon .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid hsl(var(--primary)); flex-shrink: 0; margin-top: 1px; background: hsl(var(--card)); position: relative; } .mkt .n-addon.on .box { background: hsl(var(--primary)); } .mkt .n-addon.on .box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .mkt .n-addon .txt b { display: block; font-size: 12.5px; margin-bottom: 3px; } .mkt .n-addon .txt span { font-size: 11.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); } /* ── Было / стало ─────────────────────────────────────────────────────────── */ .mkt .n-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mkt .n-vs .col { padding: 22px; border-radius: 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .6); } .mkt .n-vs .col.now { border-color: hsl(var(--primary) / .5); background: hsl(var(--card)); } .mkt .n-vs h3 { font-size: 14px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .mkt .n-vs li { font-size: 12.5px; line-height: 1.5; padding: 5px 0; } /* ── Таймлайн доступа: покупка → подписка → отмена ────────────────────────── */ .mkt .n-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .mkt .n-tl .n-seg .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 8px; } .mkt .n-tl .bar { height: 8px; border-radius: 99px; background: hsl(var(--secondary)); margin-bottom: 12px; } .mkt .n-tl .is-own .bar { background: hsl(var(--kg-ui-mint)); } .mkt .n-tl .is-sub .bar { background: hsl(var(--primary)); } .mkt .n-tl .is-off .bar { background: repeating-linear-gradient(90deg, hsl(var(--border)) 0 8px, transparent 8px 14px); } .mkt .n-tl .txt b { display: block; font-size: 13.5px; margin-bottom: 4px; } .mkt .n-tl .txt span { font-size: 12.5px; line-height: 1.55; color: hsl(var(--muted-foreground)); } .mkt .n-tl .is-own .lbl { color: hsl(var(--kg-ui-mint)); } .mkt .n-tl .is-sub .lbl { color: hsl(var(--primary)); } /* Строка «что входит в цену» на странице программы. Карточки — колонкой: кнопка внизу с margin-top:auto, чтобы у двух карточек разной длины списка кнопки стояли на одном уровне (grid тянет карточки по высоте сам, но без flex-column кнопка осталась бы сразу под своим списком, а не у низа). */ .mkt .n-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mkt .n-split .card { padding: 20px 22px; display: flex; flex-direction: column; } .mkt .n-split .card > .btn { margin-top: auto; } /* «Почему выбирают программу» на странице Аналитика: процент учеников передвинут под текст карточки (просьба владельца), поэтому базовый margin-bottom у .pct (рассчитанный на то, что цифра стоит первой) здесь заменён на отступ сверху от абзаца. Скоуп по #who — id есть только на этой секции курса, соседний .grid-4 на старой странице home.html трогать нельзя. */ .mkt #who .pct { margin: 10px 0 0; } .mkt .n-split .h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; } @media (max-width: 1000px) { .mkt .n-steps, .mkt .n-progs, .mkt .n-progs.is-3, .mkt .n-sub, .mkt .n-week, .mkt .n-vs, .mkt .n-split, .mkt .n-consult, .mkt .n-prog.is-all .inner { grid-template-columns: 1fr; } .mkt .n-sub .right { border-left: 0; border-top: 1px solid hsl(var(--border)); } } @media (max-width: 640px) { .mkt .n-sub .left, .mkt .n-sub .right { padding: 22px 18px; } .mkt .n-meet { flex-direction: column; } .mkt .n-prog .foot { flex-wrap: wrap; } .mkt .n-prog .foot .btn { margin-left: 0; width: 100%; } } /* Скрытые строки заказа. У .sum-row и .n-addon свой display:flex, и он перебивает браузерное правило для [hidden] — строка «скидка 0 ₽» оставалась на экране. Ловушка общая для любого флекса, поэтому правило одно на весь .mkt. */ .mkt [hidden] { display: none !important; } /* Программа, которая продаётся только внутри подписки (сейчас Стек24): карточка остаётся в каталоге — человек должен видеть, что курс существует, — но подаётся как часть подписки, а не как отдельная покупка. */ .mkt .n-prog.is-insub { border-style: dashed; background: hsl(var(--card) / .6); } .mkt .n-prog.is-insub .mark { opacity: .85; } .mkt .n-prog.is-insub .pr b { font-size: 18px; color: hsl(var(--primary)); } /* ============================================================================= * ШАПКА САЙТА * ⚠️ Размеры логотипа, плоское меню, разделитель, арифметика ширин, бургер на * 1180 и центровка меню ПЕРЕЕХАЛИ в `panel/public/app/css/marketing.css`, * блок «ШАПКА САЙТА — ОБЩАЯ»: ту же шапку рисует панель на /login, * /register и /checkout, а site.css она не грузит — и на странице оплаты * шапка выглядела другим сайтом. Здесь остаётся только то, чего у панели нет. * ============================================================================= */ /* Название на сайте размечено ; у панели просто . Размер задан общим правилом в marketing.css, здесь — только сам класс, чтобы разметка сайта не осталась без якоря, если правило вернут сюда. */ .mkt .pub-brand b.lab-name { font-weight: 800; } /* ── Неактивные кнопки ──────────────────────────────────────────────────────── Кабинета и оплаты на этом домене пока нет. Ссылка в 404 читается как «сайт сломан», поэтому сборщик превращает такие ссылки в : вид кнопки сохраняется, нажатие ничего не делает. Убирается снятием адресов из DEAD в build.py — правка одной строки. */ .mkt .is-off { opacity: .45; cursor: not-allowed; pointer-events: none; user-select: none; } .mkt .btn.is-off { filter: grayscale(.35); } .mkt .hdr-acts .is-off { pointer-events: auto; } /* чтобы работала подсказка title */ /* ============================================================================= * ЮРИДИЧЕСКИЕ СТРАНИЦЫ * ============================================================================= */ /* ⚠️ `.mkt-sec` — обёртка юридических страниц и 404, и своих правил у неё не было ВООБЩЕ: ни середины, ни боковых полей. Колонка прижималась к левому краю ОКНА, и на широком мониторе первая буква каждой строки упиралась в край экрана (поймано владельцем 15.09 на /refund). Поля и середина те же, что у `.wrap` из marketing.css: страница обязана стоять по колонке контента, а не по ширине экрана. */ .mkt .mkt-sec { max-width: 1120px; margin: 0 auto; padding: 0 26px; } /* Документ читают целиком и подолгу, поэтому его колонка УЖЕ общей. Ширину задаёт ОБЁРТКА, а не текст внутри: подрезав только `.legal`, мы получили бы заголовок и чипы документов во всю колонку, а абзацы вдвое уже — три разных правых края в одном блоке. */ .mkt .legal-wrap { max-width: 768px; padding-top: 30px; padding-bottom: 72px; } .mkt .legal-head { margin-bottom: 26px; } .mkt .legal-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 16px; } .mkt .legal-nav { display: flex; flex-wrap: wrap; gap: 6px; } .mkt .legal-nav a { font-size: 12.5px; padding: 6px 11px; border-radius: 8px; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); } .mkt .legal-nav a:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); } .mkt .legal-nav a.on { background: hsl(var(--secondary)); color: hsl(var(--foreground)); font-weight: 600; } /* Документ читают целиком и подолгу: строка короче, межстрочник крупнее, заголовки разделов не сливаются с текстом. */ .mkt .legal { font-size: 14.5px; line-height: 1.75; color: hsl(var(--foreground)); } .mkt .legal h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); } .mkt .legal h3 { font-size: 14.5px; font-weight: 700; margin: 20px 0 8px; } .mkt .legal p { margin: 0 0 12px; } .mkt .legal ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; } .mkt .legal li { margin: 5px 0; } .mkt .legal a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================================= * ЗАЩИТА ОТ ЧУЖИХ ПРАВИЛ app.css * ----------------------------------------------------------------------------- * app.css писался для кабинета и почти весь БЕЗ скоупа. Сайт грузит его ради * токенов, шрифтов и базовых компонентов (.btn, .card, .badge) — и любой * совпавший класс молча получает чужую раскладку. marketing.css перекрывает * такие классы под `.mkt`, но только те свойства, которые сам задаёт. * * Проверка на совпадения: голые селекторы app.css (ровно `.class`, без * предков), задающие display/grid/position/width, против классов разметки * сайта. На 14.09 совпали `.mod` и `.card-h`; остальные (.btn, .pub-head, * .grid-2, .stars, .consent…) marketing.css перекрывает сам. * ============================================================================= */ /* `.mod` в кабинете — строка списка модулей: grid 34px 1fr auto. Маркетинговый `.mod` свой display не задавал и ловил эту сетку: единственный ребёнок `.mod-h` попадал в колонку 34 px, заголовок рассыпáлся по одному слову в строку, а плашка «8 уроков · 2,9 ч» уезжала поверх текста. */ .mkt .mod { display: block; grid-template-columns: none; gap: 0; padding: 0; } /* `.card-h` в кабинете — флекс-строка с иконкой. На сайте это просто заголовок блока; флекс ему не нужен и мешает переносу длинного текста. */ .mkt .card-h { display: block; } /* Кнопка-форма (оформление заказа) выключается атрибутом disabled, а не классом: это