(и прямые h3/p/strong) сохраняют старую сеточную ширину и
вылезают за карточку. Жёстко ограничиваем ширину детей карточки. */
.offers-bound-media .offer-list article > div{width:100%;max-width:100%;min-width:0}
.offers-bound-media .offer-list article > h3{width:100%;max-width:100%;min-width:0}
.offers-bound-media .offer-list article > p{width:100%;max-width:100%;min-width:0}
.offers-bound-media .offer-list article > strong{width:100%;max-width:100%;min-width:0}
/* #5: варианты compact/showcase обязаны выигрывать у offers-bound-media —
зеркальные компаунд-правила с более высокой специфичностью. */
.offers-bound-media.variant-compact .offer-list{border-top:0}
.offers-bound-media.variant-compact .offer-list article{display:flex;flex-direction:row;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--hairline)}
.offers-bound-media.variant-compact .offer-list article > *{flex:0 0 auto}
.offers-bound-media.variant-compact .offer-list article > div{flex:1 1 auto;min-width:0;width:auto;max-width:none}
.offers-bound-media.variant-compact .offer-list article > h3,.offers-bound-media.variant-compact .offer-list article > p,.offers-bound-media.variant-compact .offer-list article > strong{width:auto;max-width:none}
.offers-bound-media.variant-compact .offer-card-media{width:76px;height:56px;aspect-ratio:auto;margin:0;border-radius:calc(var(--radius) - 2px)}
.offers-bound-media.variant-compact .offer-card-media img{width:100%;height:100%;object-fit:cover}
.offers-bound-media.variant-compact .offer-number{font-size:10px;letter-spacing:.12em;color:var(--accent-ink,var(--primary))}
.offers-bound-media.variant-compact .offer-list h3{font-size:17px;margin:0}
.offers-bound-media.variant-compact .offer-list p{font-size:12.5px;margin:3px 0 0;max-width:none}
.offers-bound-media.variant-compact .offer-list strong{font-size:14px;color:var(--accent-ink,var(--primary));text-align:right}
.offers-bound-media.variant-showcase .offer-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;border:0}
.offers-bound-media.variant-showcase .offer-list article{display:flex;flex-direction:column;align-items:flex-start;padding:0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.offers-bound-media.variant-showcase .offer-list article > div{width:100%;max-width:100%;min-width:0;flex:0 0 auto}
.offers-bound-media.variant-showcase .offer-card-media{width:100%;aspect-ratio:16/10;margin:0;border-radius:0}
.offers-bound-media.variant-showcase .offer-card-media img{width:100%;height:100%;object-fit:cover}
.offers-bound-media.variant-showcase .offer-number{margin:20px 24px 0;font-size:11px;letter-spacing:.16em;color:var(--accent-ink,var(--primary))}
.offers-bound-media.variant-showcase .offer-list h3{font-size:clamp(22px,2.4vw,32px);margin:10px 24px 0}
.offers-bound-media.variant-showcase .offer-list p{margin:8px 24px 0;color:var(--muted);max-width:none}
.offers-bound-media.variant-showcase .offer-list strong{margin:14px 24px 22px;font-size:19px;color:var(--accent-ink,var(--primary));text-align:left}
.offers-bound-media.variant-showcase .offer-list article:not(:has(.offer-card-media)){padding:26px 24px}
.offers-bound-media.variant-showcase .offer-list article:not(:has(.offer-card-media)) .offer-number{margin:0}
/* 2026-09-17: витрина с фото не схлопывалась на узком экране. Сброс в одну
колонку для .offers.variant-showcase стоит в @media(max-width:1000px) выше по
файлу, а правило .offers-bound-media.variant-showcase того же веса объявлено
позже и перебивало его: на 390px оставались две колонки по 158px, заголовку
карточки доставалось 54px, и «Фильтр-кофе дня» рвался по слогам
(demo-orbita-coffee). Повторяем сброс после этого правила, но с порогом 700px:
на планшете две карточки с фото по ~350px смотрятся лучше одной во весь экран. */
@media(max-width:700px){
.offers-bound-media.variant-showcase .offer-list{grid-template-columns:1fr}
}
/* #9 (FAQ): overflow:hidden нужен для ВСЕХ вариантов, не только accordion;
длинные слова в summary не должны обрезаться. */
.faq .faq-list details{overflow:hidden}
.faq summary{overflow-wrap:anywhere;padding-right:24px}
/* #10 (gallery mosaic): панель шириной 50% при 3 колонках даёт карточки 112 px
(«чёрная полоса»). Автоколонки с минимумом 180px, а при 3+ карточках — на всю ширину. */
.gallery.variant-mosaic .gallery-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gallery.variant-mosaic .gallery-list:has(article:nth-child(3)){width:100%}
/* #16: логотип в шапке — компактный, не ломает 72-80px шапку (текст при нём скрыт шаблоном) */
.site-logo-img{height:32px;width:auto;max-width:160px;object-fit:contain}
/* ===================================================================
Фирменная анимация «signature_reveal» — входит в КАЖДЫЙ сгенерированный
сайт бесплатно, независимо от тарифа.
Задача: не «блок выехал снизу», а собранный вход первого экрана —
заголовок раскрывается построчно из-под маски, фото проявляется шторкой и
медленно наезжает, подпись, текст и кнопка догоняют по очереди. Дальше по
странице карточки выходят каскадом, а фотографии живут лёгким параллаксом.
Правила: анимируем только transform, opacity и clip-path (композитор
браузера), никаких left/top/width. При prefers-reduced-motion всё
выключается — и это не «на всякий случай»: вестибулярные нарушения делают
такое движение физически неприятным.
=================================================================== */
/* Каждое слово заголовка скрипт заворачивает в inline-block ради анимации
появления. Такой бокс шириной по содержимому: слово «конфиденциальность»
выходило за колонку на 88px, а overflow:hidden у .hero-copy срезал ему
хвост — на сгенерированном сайте юрфирмы заголовок читался как
«КОНФИДЕНЦИАЛЬ» (2026-09-09). max-width:100% не даёт слову вылезти за
строку, и оно переносится внутри своего бокса. */
.yp-on-signature_reveal .yp-sig-word { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 100%; }
.yp-on-signature_reveal .yp-sig-word > i { max-width: 100%; }
.yp-on-signature_reveal .yp-sig-word > i {
display: inline-block; font-style: inherit;
transform: translateY(110%);
transition: transform .9s cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(var(--yp-i, 0) * 55ms);
}
.yp-on-signature_reveal .yp-sig-ready .yp-sig-word > i { transform: translateY(0); }
/* Заголовок без разбиения на слова (в редакторе текст правят руками —
разрезать его на span'ы там нельзя): раскрываем целиком той же шторкой. */
.yp-on-signature_reveal .yp-sig-block {
clip-path: inset(0 0 100% 0);
transform: translateY(14px);
transition: clip-path 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}
.yp-on-signature_reveal .yp-sig-ready.yp-sig-block,
.yp-on-signature_reveal .yp-sig-ready .yp-sig-block { clip-path: inset(0 0 0 0); transform: translateY(0); }
/* Строки первого экрана догоняют заголовок по очереди. */
.yp-on-signature_reveal .yp-sig-line {
opacity: 0; transform: translateY(18px);
transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(260ms + var(--yp-i, 0) * 110ms);
}
.yp-on-signature_reveal .yp-sig-ready .yp-sig-line,
.yp-on-signature_reveal .yp-sig-line.yp-sig-ready { opacity: 1; transform: translateY(0); }
/* Фото первого экрана: шторка снизу вверх + медленный отъезд крупности. */
.yp-on-signature_reveal .yp-sig-media {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.15s cubic-bezier(.16, 1, .3, 1);
transition-delay: 180ms;
}
.yp-on-signature_reveal .yp-sig-ready .yp-sig-media { clip-path: inset(0 0 0 0); }
.yp-on-signature_reveal .yp-sig-ready .yp-sig-media img { animation: ypSigZoom 9s cubic-bezier(.2, .6, .2, 1) forwards; }
@keyframes ypSigZoom { from { transform: scale(1.09); } to { transform: scale(1); } }
/* Карточки внутри секции выходят каскадом, а не все разом. */
.yp-on-signature_reveal .yp-sig-card {
opacity: 0; transform: translateY(26px) scale(.985);
transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(var(--yp-i, 0) * 90ms);
}
.yp-on-signature_reveal .is-visible .yp-sig-card { opacity: 1; transform: none; }
/* Тонкая линия, прочерчивающая заголовок секции при появлении. */
.yp-on-signature_reveal .yp-sig-rule { position: relative; }
.yp-on-signature_reveal .yp-sig-rule::after {
content: ''; position: absolute; left: 0; bottom: -14px; height: 2px; width: 100%;
background: linear-gradient(90deg, var(--primary, #6366f1), transparent);
transform: scaleX(0); transform-origin: left;
transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .15s;
}
.yp-on-signature_reveal .is-visible .yp-sig-rule::after { transform: scaleX(1); }
/* Параллакс фотографий: сдвиг задаёт скрипт переменной --yp-shift. */
.yp-on-signature_reveal .yp-sig-parallax { will-change: transform; }
.yp-on-signature_reveal .yp-sig-parallax img { transform: translate3d(0, var(--yp-shift, 0px), 0); }
@media (prefers-reduced-motion: reduce) {
.yp-on-signature_reveal .yp-sig-word > i,
.yp-on-signature_reveal .yp-sig-block,
.yp-on-signature_reveal .yp-sig-line,
.yp-on-signature_reveal .yp-sig-media,
.yp-on-signature_reveal .yp-sig-card {
opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}
.yp-on-signature_reveal .yp-sig-ready .yp-sig-media img { animation: none !important; }
.yp-on-signature_reveal .yp-sig-parallax img { transform: none !important; }
}
/* ===================================================================
Варианты, у которых раньше не было ни своих стилей, ни своей разметки.
ИИ честно выбирала их из реестра, а на экране ничего не менялось: секция
рисовалась стандартной сеткой. То есть тринадцать из девяноста семи
«подач» были пустыми — модель тратила на них выбор впустую. Здесь каждой
дан собственный характер, а не косметический сдвиг.
=================================================================== */
/* Отзывы «цитатами»: крупная типографика и кавычка, без карточек. */
.people.variant-quotes .people-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px; }
.people.variant-quotes .people-grid article {
background: none; border: 0; border-left: 3px solid var(--primary); border-radius: 0;
padding: 6px 0 6px 26px; position: relative;
}
.people.variant-quotes .people-grid article p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; font-style: italic; }
.people.variant-quotes .people-grid article::before {
content: '“'; position: absolute; left: 18px; top: -18px; font-size: 64px; line-height: 1;
color: color-mix(in srgb, var(--primary) 35%, transparent); pointer-events: none;
}
/* Отзывы «в центре внимания»: первый крупнее остальных. */
.people.variant-spotlight .people-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.people.variant-spotlight .people-grid article:first-child {
grid-column: 1 / -1; padding: clamp(26px, 4vw, 48px);
background: color-mix(in oklab, var(--primary) 8%, var(--surface));
border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.people.variant-spotlight .people-grid article:first-child p { font-size: clamp(18px, 2vw, 26px); line-height: 1.4; }
/* Отзывы «лентой»: горизонтальная прокрутка с прилипанием карточек. */
.people.variant-slider .people-grid {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px;
padding-bottom: 12px; scrollbar-width: thin;
}
.people.variant-slider .people-grid article { flex: 0 0 min(78%, 380px); scroll-snap-align: start; }
/* Команда «портретами»: карточка-колонка с крупным кружком инициалов. */
.people.variant-portraits .people-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.people.variant-portraits .people-grid article { text-align: center; padding-top: 30px; }
.people.variant-portraits .people-grid article::before {
content: ''; display: block; width: 86px; height: 86px; margin: 0 auto 16px; border-radius: 50%;
background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 55%, transparent), color-mix(in srgb, var(--text) 12%, transparent));
}
/* Портфолио «кладкой»: разная высота плиток вместо ровной сетки. */
.gallery.variant-masonry .gallery-images { columns: 3 260px; column-gap: 16px; display: block; }
.gallery.variant-masonry .gallery-images > * { break-inside: avoid; margin-bottom: 16px; display: block; width: 100%; }
.gallery.variant-masonry .gallery-images img { width: 100%; height: auto; }
/* Портфолио «с главной работой»: первая на всю ширину, остальные рядом. */
.gallery.variant-featured .gallery-images { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery.variant-featured .gallery-images > *:first-child { grid-column: 1 / -1; }
.gallery.variant-featured .gallery-images > *:first-child img { max-height: 460px; object-fit: cover; }
/* Галерея «полосой»: непрерывная лента кадров с прилипанием. */
.gallery.variant-strip .gallery-images {
display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 10px;
}
.gallery.variant-strip .gallery-images > * { flex: 0 0 min(62%, 420px); scroll-snap-align: center; }
.gallery.variant-strip .gallery-images img { height: 100%; object-fit: cover; }
/* Цены «сравнением»: колонки таблицы, средняя выделена. */
.pricing.variant-comparison .pricing-grid { gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.pricing.variant-comparison .pricing-grid article { border-radius: 0; border: 0; border-right: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.pricing.variant-comparison .pricing-grid article:last-child { border-right: 0; }
.pricing.variant-comparison .pricing-grid article:nth-child(2) {
background: color-mix(in oklab, var(--primary) 10%, var(--surface));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent) inset;
}
/* Услуги «списком»: строки-разделители вместо карточек. */
.variant-type_list .offer-list { display: block; }
.variant-type_list .offer-list article {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(18px, 4vw, 60px);
align-items: baseline; padding: 26px 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
background: none; border-radius: 0;
}
.variant-type_list .offer-list article:last-child { border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.variant-type_list .offer-list article h3 { font-size: clamp(19px, 2.1vw, 28px); }
/* Услуги «горизонтальной лентой». */
.variant-horizontal .offer-list {
display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; padding-bottom: 12px;
}
.variant-horizontal .offer-list article { flex: 0 0 min(74%, 340px); scroll-snap-align: start; }
/* Процесс «стопкой»: крупные ступени со сдвигом, а не ряд. */
.variant-stacked .process { display: flex; flex-direction: column; gap: 0; }
.variant-stacked .process li {
border: 0; border-radius: 0; padding: 24px 0 24px clamp(18px, 5vw, 70px);
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
margin-left: calc(var(--yp-step, 0) * 0px);
}
.variant-stacked .process li:nth-child(even) { background: color-mix(in srgb, var(--text) 4%, transparent); }
/* Призыв «во всю ширину»: полоса с акцентным фоном. */
.cta.variant-full_width {
background: linear-gradient(120deg, var(--primary), color-mix(in oklab, var(--primary) 45%, var(--background)));
color: var(--background); text-align: center; border-radius: 0;
}
.cta.variant-full_width h2, .cta.variant-full_width p { color: inherit; max-width: 46ch; margin-inline: auto; }
.cta.variant-full_width .site-button { background: var(--background); color: var(--text); }
/* Аудитория «парами карточек»: две колонки с крупным номером. */
.variant-split_cards .concept-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; counter-reset: yp-persona; }
.variant-split_cards .concept-grid article { counter-increment: yp-persona; position: relative; padding-left: 68px; }
.variant-split_cards .concept-grid article::before {
content: counter(yp-persona, decimal-leading-zero); position: absolute; left: 22px; top: 22px;
font-size: 26px; font-weight: 800; color: color-mix(in srgb, var(--primary) 60%, transparent);
}
/* Фокус «на предмете»: текст узкой колонкой рядом с крупным медиа. */
.spotlight.variant-feature_focus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.spotlight.variant-feature_focus .spotlight-points { display: grid; gap: 14px; }
.spotlight.variant-feature_focus figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) {
.spotlight.variant-feature_focus { grid-template-columns: 1fr; }
.pricing.variant-comparison .pricing-grid article { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.variant-type_list .offer-list article { grid-template-columns: 1fr; gap: 8px; }
.gallery.variant-masonry .gallery-images { columns: 1; }
}
/* Три оставшихся варианта: «по центру» у шапки и подвала и ровная сетка галереи. */
.site-header.variant-centered { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; gap: 12px; }
.site-header.variant-centered .site-logo { grid-column: 2; }
.site-header.variant-centered nav { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.site-footer.variant-centered { text-align: center; }
.site-footer.variant-centered .site-footer-main { justify-items: center; }
.gallery.variant-grid .gallery-images { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gallery.variant-grid .gallery-images img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
/* Подстраховка на уже отрисованных страницах: если обёртка всё же получила
шторку, а внутри лежит фото, вынутое в свободную раскладку, — маску снимаем.
clip-path режет по рамке обёртки, а такое фото стоит вне её и пропало бы. */
.has-text-layout .yp-sig-media,
.yp-sig-media:has(img[data-image-key]) { clip-path: none !important; }
.has-text-layout .yp-sig-parallax img,
.yp-sig-parallax:has(img[data-image-key]) img { transform: none !important; }
/* ===================================================================
Бегущая строка — приём из эталонных лендингов: узкая полоса с
непрерывно едущим текстом между крупными секциями.
Лента дублируется в разметке (второй трек помечен aria-hidden): сдвиг на
−100% первой копии происходит ровно в тот момент, когда вторая занимает её
место, поэтому шов не виден. Одной копией лента дёргалась бы на каждом круге.
=================================================================== */
.marquee-band { padding: 0 !important; overflow: hidden; display: block; position: relative; }
/* Дорожки бегущей строки живут в собственном рельсе: раньше flex-строкой была
сама полоса, и загруженное фото вставало третьим элементом рядом с текстом. */
.marquee-band .marquee-rail { display: flex; overflow: hidden; }
.marquee-band .marquee-track {
display: flex; align-items: center; flex: 0 0 auto; gap: 0;
padding: 18px 0; white-space: nowrap;
animation: ypMarquee 26s linear infinite;
}
.marquee-band span {
padding: 0 clamp(16px, 3vw, 34px); font-weight: 700; letter-spacing: 0.04em;
font-family: var(--font-heading), sans-serif;
}
.marquee-band span::after { content: '·'; margin-left: clamp(16px, 3vw, 34px); opacity: 0.45; }
@keyframes ypMarquee { to { transform: translateX(-100%); } }
.marquee-band:hover .marquee-track { animation-play-state: paused; }
/* Тонкая служебная полоса: мелкий текст, чуть светлее фона. */
.generated-site .site-section.marquee-band.variant-ticker { background: color-mix(in oklab, var(--text) 6%, var(--background)); border-block: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.marquee-band.variant-ticker span { font-size: clamp(12px, 1.3vw, 15px); color: var(--muted); }
.marquee-band.variant-ticker span:nth-child(odd) { color: var(--text); }
/* Акцентная плашка: сплошная заливка, как в эталонах DRIFT и FORGE.
Пара «фон = var(--text), текст = var(--background)» выбрана не для красоты:
именно её контраст проверяет ensure_contrast, и ею же залиты кнопки сайта.
Заливка var(--primary) на светлых темах давала пастельную плашку со светлым
текстом — надпись пропадала (проверено на кофейной теме: #8a5a3b под белым).
Вес селектора набран .site-section намеренно: чередование фона секций у
композиции editorial_story задано правилом (0,4,0), и более лёгкий селектор
ленты проигрывал ему — плашка красилась цветом соседней секции. */
.generated-site .site-section.marquee-band.variant-accent { background: var(--text); }
.generated-site .site-section.marquee-band.variant-accent span { color: var(--background); font-size: clamp(14px, 1.8vw, 21px); font-weight: 800; text-transform: uppercase; }
.generated-site .site-section.marquee-band.variant-accent span::after { color: var(--primary); opacity: 1; }
/* Крупная типографика без заливки: только линии сверху и снизу. */
.generated-site .site-section.marquee-band.variant-outline { background: transparent; border-block: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.marquee-band.variant-outline span { font-size: clamp(20px, 4vw, 46px); color: color-mix(in srgb, var(--text) 45%, transparent); text-transform: uppercase; }
.marquee-band.variant-outline span:nth-child(3n+1) { color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
/* Бесконечное движение особенно тяжело переносится: показываем ленту
статично, а дубль убираем — иначе текст читался бы дважды. */
.marquee-band .marquee-track { animation: none !important; }
.marquee-band .marquee-echo { display: none; }
.marquee-band { overflow-x: auto; }
}
/* ===================================================================
Характер дизайн-семейств: сетка, ритм и форма карточек.
До этого блока девять семейств отличались в основном палитрой и шрифтом —
5–14 правил на каждое. Из-за этого «премиальный тёмный» и «швейцарская
сетка» выглядели одним макетом в разных оттенках, и выбор семейства
почти ничего не решал. Здесь у каждого своя геометрия: ширина колонки,
плотность ритма, число колонок в сетке, форма и заполнение карточки,
разделители и подача заголовков секций.
Правила рассчитаны на сосуществование с темой: цвет берётся из токенов
документа, размер заголовков — из шкалы типографики (она печатается позже
и выигрывает при равной силе). Здесь — только геометрия и фактура.
=================================================================== */
/* --- Modern minimal: воздух, тонкие линии, ничего лишнего --- */
.generated-site[data-family="modern_minimal"] { --content: 1080px; --gutter: clamp(24px, 6vw, 96px); }
.generated-site[data-family="modern_minimal"] .site-section { padding-block: calc(var(--section-space) * 1.15); }
.generated-site[data-family="modern_minimal"] .item-grid { gap: 28px; }
.generated-site[data-family="modern_minimal"] .item-grid article,
.generated-site[data-family="modern_minimal"] .concept-grid article { border-radius: 4px; box-shadow: none; }
.generated-site[data-family="modern_minimal"] .section-intro h2 { letter-spacing: -0.02em; }
.generated-site[data-family="modern_minimal"] .site-footer { border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
/* --- Strict corporate: плотная сетка, прямые углы, деловой ритм --- */
.generated-site[data-family="strict_corporate"] { --content: 1240px; --gutter: clamp(20px, 4vw, 64px); }
.generated-site[data-family="strict_corporate"] .site-section { padding-block: calc(var(--section-space) * 0.82); }
.generated-site[data-family="strict_corporate"] .item-grid { gap: 12px; }
.generated-site[data-family="strict_corporate"] .item-grid article,
.generated-site[data-family="strict_corporate"] .concept-grid article,
.generated-site[data-family="strict_corporate"] .pricing-grid article {
border-radius: 2px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
background: var(--surface); padding: 26px;
}
.generated-site[data-family="strict_corporate"] .section-intro { align-items: start; }
/* --- Premium dark: широкие поля, мягкое свечение вместо границ --- */
.generated-site[data-family="premium_dark"] { --content: 1180px; --gutter: clamp(24px, 5vw, 88px); }
.generated-site[data-family="premium_dark"] .site-section { padding-block: calc(var(--section-space) * 1.1); }
.generated-site[data-family="premium_dark"] .item-grid article,
.generated-site[data-family="premium_dark"] .concept-grid article,
.generated-site[data-family="premium_dark"] .offer-list article {
background: linear-gradient(160deg, color-mix(in srgb, var(--text) 7%, transparent), transparent);
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.7);
}
.generated-site[data-family="premium_dark"] .statistics article { border: 0; border-left: 2px solid var(--primary); border-radius: 0; }.generated-site[data-family="premium_dark"] .statistics.variant-band article:first-child{padding-left:22px}
/* --- Vivid tech: модульная сетка-бенто, углы, неоновая обводка --- */
.generated-site[data-family="vivid_tech"] { --content: 1200px; --gutter: clamp(20px, 4vw, 72px); }
.generated-site[data-family="vivid_tech"] .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.generated-site[data-family="vivid_tech"] .item-grid article:first-child { grid-column: span 2; grid-row: span 2; }
.generated-site[data-family="vivid_tech"] .item-grid article,
.generated-site[data-family="vivid_tech"] .concept-grid article {
border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
background: color-mix(in oklab, var(--primary) 5%, var(--surface));
}
.generated-site[data-family="vivid_tech"] .site-button { text-transform: uppercase; letter-spacing: 0.06em; }
/* --- Warm organic: крупные скругления, тёплые заливки, мягкий ритм --- */
.generated-site[data-family="warm_organic"] { --content: 1120px; --gutter: clamp(24px, 5vw, 80px); }
.generated-site[data-family="warm_organic"] .item-grid { gap: 22px; }
.generated-site[data-family="warm_organic"] .item-grid article,
.generated-site[data-family="warm_organic"] .concept-grid article,
.generated-site[data-family="warm_organic"] .people-grid article,
.generated-site[data-family="warm_organic"] .offer-list article {
border-radius: 26px; border: 0; background: var(--surface); padding: 30px 28px;
}
.generated-site[data-family="warm_organic"] .site-button,
.generated-site[data-family="warm_organic"] .site-header-cta { border-radius: 999px; }
.generated-site[data-family="warm_organic"] figure img { border-radius: 26px; }
/* --- Editorial: узкая колонка текста, крупные заголовки, линейки --- */
.generated-site[data-family="editorial"] { --content: 1000px; --gutter: clamp(24px, 6vw, 110px); }
.generated-site[data-family="editorial"] .site-section { padding-block: calc(var(--section-space) * 1.25); }
.generated-site[data-family="editorial"] .section-intro { grid-template-columns: 1fr; gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); padding-bottom: 22px; }
.generated-site[data-family="editorial"] .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.generated-site[data-family="editorial"] .item-grid article,
.generated-site[data-family="editorial"] .concept-grid article {
background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
border-radius: 0; padding: 22px 0 0;
}
.generated-site[data-family="editorial"] .site-section p { max-width: 66ch; }
/* --- Swiss grid: жёсткая сетка, волосяные линии, ноль украшений --- */
.generated-site[data-family="swiss_grid"] { --content: 1280px; --gutter: clamp(20px, 4vw, 56px); }
.generated-site[data-family="swiss_grid"] .site-section { padding-block: var(--section-space); border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.generated-site[data-family="swiss_grid"] .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.generated-site[data-family="swiss_grid"] .item-grid article,
.generated-site[data-family="swiss_grid"] .concept-grid article {
background: none; border: 0; border-right: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 0; padding: 0 24px 0 0; min-height: 0;
}
.generated-site[data-family="swiss_grid"] .item-grid article:last-child { border-right: 0; }
.generated-site[data-family="swiss_grid"] .section-intro { grid-template-columns: 0.25fr 1.75fr; }
/* --- Soft luxury: максимум воздуха, тонкие разделители, мелкие подписи --- */
.generated-site[data-family="soft_luxury"] { --content: 1040px; --gutter: clamp(28px, 6vw, 120px); }
.generated-site[data-family="soft_luxury"] .site-section { padding-block: calc(var(--section-space) * 1.4); }
.generated-site[data-family="soft_luxury"] .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.generated-site[data-family="soft_luxury"] .item-grid article,
.generated-site[data-family="soft_luxury"] .concept-grid article,
.generated-site[data-family="soft_luxury"] .offer-list article {
background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
border-radius: 0; padding: 24px 0 0; min-height: 0;
}
.generated-site[data-family="soft_luxury"] .section-intro > span,
.generated-site[data-family="soft_luxury"] .hero-copy > span { letter-spacing: 0.24em; text-transform: uppercase; font-size: 11.5px; }
.generated-site[data-family="soft_luxury"] .site-button { border-radius: 0; letter-spacing: 0.16em; text-transform: uppercase; }
/* --- Bold contrast: плотный ритм, толстые границы, плашки --- */
.generated-site[data-family="bold_contrast"] { --content: 1200px; --gutter: clamp(20px, 4vw, 60px); }
.generated-site[data-family="bold_contrast"] .site-section { padding-block: calc(var(--section-space) * 0.85); }
.generated-site[data-family="bold_contrast"] .item-grid { gap: 0; }
.generated-site[data-family="bold_contrast"] .item-grid article,
.generated-site[data-family="bold_contrast"] .concept-grid article,
.generated-site[data-family="bold_contrast"] .pricing-grid article {
border-radius: 0; border: 2px solid var(--text); margin: -1px 0 0 -1px; background: var(--surface); padding: 28px;
}
.generated-site[data-family="bold_contrast"] .site-button,
.generated-site[data-family="bold_contrast"] .site-header-cta { border-radius: 0; border: 2px solid var(--text); font-weight: 800; }
.generated-site[data-family="bold_contrast"] .section-intro h2 { text-transform: uppercase; }
@media (max-width: 900px) {
/* Многоколоночные сетки семейств на телефоне схлопываются: четыре колонки
дают карточки по 80px, а бенто-«первая крупнее» ломает порядок чтения. */
.generated-site[data-family="vivid_tech"] .item-grid,
.generated-site[data-family="swiss_grid"] .item-grid,
.generated-site[data-family="editorial"] .item-grid,
.generated-site[data-family="soft_luxury"] .item-grid { grid-template-columns: minmax(0, 1fr); }
.generated-site[data-family="vivid_tech"] .item-grid article:first-child { grid-column: auto; grid-row: auto; }
.generated-site[data-family="swiss_grid"] .item-grid article { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); padding: 0 0 20px; }
}
/* ===================================================================
Пакет исправлений по отчёту «Тест 4».
=================================================================== */
/* #1. Подчёркивание пункта меню рисуется по ТЕКСТУ, а не по коробке ссылки.
Псевдоэлемент ::after тянулся во всю ширину
: у пунктов с внутренними
отступами (переключатель языка) и у свободно расставленных пунктов (им
задаётся ширина в процентах) линия выходила заметно шире надписи.
text-decoration знает границы глифов и совпадает с текстом всегда. */
.site-header nav a::after { content: none !important; }
.site-header nav a {
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 7px;
transition: text-decoration-color .25s ease, color .25s ease;
}
.site-header nav a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
/* В выпадающем меню пункт подсвечивается фоном — прежний ::after там был
выключен, поэтому и подчёркивание оставляем выключенным. */
.site-header nav a:hover { text-decoration-color: transparent; }
}
/* #7. «Отступ снизу» у строки над заголовком в первом экране editorial_type
не давал ничего: средняя строка сетки была 1fr и съедала любую добавку —
высоту экрана задаёт картинка, растянутая на все три строки, а не текст.
Делаем строки по содержимому, а свободное место распределяем между ними:
рисунок тот же (индекс сверху, заголовок в середине, подпись снизу), но
заданные человеком отступы наконец видны. */
.hero-editorial { grid-template-rows: auto auto auto; align-content: space-between; }
/* #10. Галерея editorial_grid.
Первая карточка растягивалась на две строки и оставляла в сетке дыры:
четвёртая уезжала в отдельный ряд, рядом с ней зияла пустая ячейка, а сами
карточки вытягивались вдвое (858px против 422px у соседей).
Плюс панель со списком «наезжала» на фото отрицательным margin и жила в 68%
ширины даже когда фото в блоке нет — тогда это просто узкая коробка,
висящая поверх заголовка. */
.gallery.variant-editorial_grid .gallery-list article:first-child { grid-row: auto; }
.gallery.variant-editorial_grid:not(:has(.gallery-feature)) .gallery-list {
width: 100%; margin-top: 0; padding: 0; background: transparent;
}
/* #11. Профиль композиции не должен ломать варианты со своей раскладкой.
Композиция (modular_bento, editorial_story) задаёт сетку и высоты карточным
блокам. Списочные варианты «Аудитории/Подхода/Результатов» (строки во всю
ширину) и «парами карточек» строят раскладку сами, и композиционные правила
были для них прямым вредом:
• bento навязывал первым двум строкам min-height:360px — в списке две
верхние строки становились пустыми коробками вчетверо выше остальных;
• bento навязывал grid-column:span 4/2 поверх сетки auto-fit, и колонки
схлопывались в 0px: карточка шириной 99px и высотой 5200px;
• editorial_story сдвигал вторую карточку на 55px — в списке она
наезжала на третью, в парах карточек уезжала ниже соседки.
Сам сдвиг оставлен там, где он задуман (ровная сетка карточек), но переведён
с transform на margin: transform не занимает места и потому накладывает
элементы друг на друга, отступ — занимает.
Селекторы намеренно с запасом по весу: композиционные правила висят на
.generated-site[data-composition="…"], и без такого же префикса они бы
выиграли по специфичности. */
.generated-site[data-composition] :is(.variant-persona_strip, .variant-signal_list,
.variant-principles, .variant-checklist, .variant-split_list) .concept-grid article {
grid-column: auto;
min-height: 0;
margin-top: 0;
}
.generated-site[data-composition] :is(.variant-split_cards, .variant-layered,
.variant-stack, .variant-journey) .concept-grid article {
grid-column: auto;
min-height: 280px;
margin-top: 0;
}
.generated-site[data-composition] .variant-split_cards .concept-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* «Преимущества» в списочном варианте — та же болезнь: у варианта своё
min-height:auto, но bento перебивал его и делал две верхние строки вчетверо
выше остальных (360px против 202px). */
.generated-site[data-composition] .variant-story .item-grid article {
grid-column: auto;
min-height: 0;
margin-top: 0;
}
/* ===================================================================
Лендинг мероприятия: программа, спикеры, партнёры.
«Форум» в деловом языке — это конференция с расписанием и составом
выступающих, а не доска обсуждений. Три блока закрывают то, чего не было
ни в одной существующей секции: время → доклад → кто выступает, состав
спикеров с должностью и компанией, партнёры со статусами.
=================================================================== */
/* ---- Программа: время слева, доклад справа, по вертикальной нити ---- */
.agenda-list { list-style: none; margin: clamp(24px, 4vw, 44px) 0 0; padding: 0; }
.agenda-list li {
display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
gap: clamp(16px, 3vw, 38px); padding: clamp(18px, 2.4vw, 26px) 0;
border-top: 1px solid var(--hairline);
}
.agenda-list li:last-child { border-bottom: 1px solid var(--hairline); }
.agenda-time {
font-family: var(--font-heading), sans-serif; font-weight: 700;
font-size: clamp(15px, 1.5vw, 18px); color: var(--primary); white-space: nowrap;
}
.agenda-slot h3 { margin: 0; font-size: clamp(17px, 2vw, 24px); line-height: 1.25; }
.agenda-slot p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.agenda-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 12px; }
.agenda-who b { font-size: 14.5px; }
.agenda-who i { font-style: normal; color: var(--muted); font-size: 13px; }
/* timeline — нить с точками: видно, что события идут одно за другим. */
.agenda.variant-timeline .agenda-list { position: relative; padding-left: clamp(18px, 3vw, 34px); }
.agenda.variant-timeline .agenda-list:before {
content: ''; position: absolute; left: 4px; top: 26px; bottom: 26px; width: 1px; background: var(--primary); opacity: .35;
}
.agenda.variant-timeline .agenda-list li { position: relative; border-top: 0; }
.agenda.variant-timeline .agenda-list li:before {
content: ''; position: absolute; left: calc(-1 * clamp(18px, 3vw, 34px) + 1px); top: clamp(24px, 2.8vw, 32px);
width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.agenda.variant-timeline .agenda-list li:last-child { border-bottom: 0; }
/* tracks — карточки-параллели: у крупных форумов идут несколько треков сразу. */
.agenda.variant-tracks .agenda-list {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px;
}
.agenda.variant-tracks .agenda-list li {
border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 26px);
grid-template-columns: 1fr; gap: 12px;
}
.agenda.variant-tracks .agenda-list li:last-child { border-bottom: 1px solid var(--hairline); }
.agenda.variant-tracks .agenda-time { color: var(--text); }
/* compact — плотное расписание одной колонкой, без описаний. */
.agenda.variant-compact .agenda-list li { padding: 12px 0; align-items: baseline; }
.agenda.variant-compact .agenda-slot p { display: none; }
.agenda.variant-compact .agenda-slot h3 { font-size: clamp(15px, 1.6vw, 19px); }
/* ---- Спикеры ---- */
.speaker-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(16px, 2vw, 26px); margin-top: clamp(24px, 4vw, 44px);
}
.speaker-grid article {
padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--hairline); border-radius: var(--radius);
background: var(--surface); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.speaker-grid article:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--primary) 50%, var(--hairline)); }
/* Портрета в документе может не быть — тогда вместо пустого места стоит
инициал: состав читается и без фотографий. */
.speaker-face {
display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
background: color-mix(in oklab, var(--primary) 16%, var(--background));
color: var(--primary); font-family: var(--font-heading), sans-serif; font-weight: 800; font-size: 24px;
margin-bottom: 18px;
}
.speaker-grid h3 { margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.25; }
.speaker-grid b { display: block; margin-top: 8px; font-size: 14px; color: var(--primary); }
.speaker-grid small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.speaker-grid p { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
/* featured — первый спикер крупным блоком: программный доклад главнее прочих. */
.speakers.variant-featured .speaker-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.speakers.variant-featured .speaker-grid article:first-child {
grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr);
/* Общий gap растягивал строки: имя, должность и компания расползались по
высоте карточки. Разводим колонки широко, строки — плотно. */
column-gap: clamp(18px, 3vw, 34px); row-gap: 4px; align-content: center;
background: var(--primary); color: var(--background);
}
/* Дети карточки — прямые элементы сетки, поэтому имя, должность и компания
разъезжались по соседним ячейкам. Аватар занимает всю левую колонку,
остальное встаёт колонкой справа. */
.speakers.variant-featured .speaker-grid article:first-child { grid-template-rows: repeat(4, auto); }
.speakers.variant-featured .speaker-grid article:first-child .speaker-face {
margin: 0; width: 92px; height: 92px; font-size: 34px; grid-row: 1 / -1; align-self: center;
background: color-mix(in srgb, var(--background) 22%, transparent); color: var(--background);
}
.speakers.variant-featured .speaker-grid article:first-child > :not(.speaker-face) { grid-column: 2; }
.speakers.variant-featured .speaker-grid article:first-child h3 { font-size: clamp(22px, 2.6vw, 32px); }
.speakers.variant-featured .speaker-grid article:first-child b { margin-top: 10px; }
.speakers.variant-featured .speaker-grid article:first-child p { margin-top: 10px; }
.speakers.variant-featured .speaker-grid article:first-child b,
.speakers.variant-featured .speaker-grid article:first-child small,
.speakers.variant-featured .speaker-grid article:first-child p { color: inherit; opacity: .82; }
/* strip — лента портретов без карточек: когда спикеров много. */
.speakers.variant-strip .speaker-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.speakers.variant-strip .speaker-grid article { border: 0; background: transparent; padding: 0; text-align: center; }
.speakers.variant-strip .speaker-face { margin: 0 auto 14px; }
.speakers.variant-strip .speaker-grid p { display: none; }
/* ---- Партнёры ---- */
.partner-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin-top: clamp(24px, 4vw, 40px);
}
.partner-grid article {
display: grid; place-items: center; gap: 6px; min-height: 104px; padding: 20px;
border: 1px solid var(--hairline); border-radius: var(--radius); text-align: center;
}
.partner-grid small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.partner-grid b { font-family: var(--font-heading), sans-serif; font-size: clamp(16px, 1.7vw, 20px); }
/* tiers — генеральный партнёр крупнее остальных, как на реальных форумах. */
.partners.variant-tiers .partner-grid article:first-child { grid-column: 1 / -1; min-height: 150px; background: var(--surface); }
.partners.variant-tiers .partner-grid article:first-child b { font-size: clamp(22px, 2.6vw, 34px); }
/* logos — ровная сетка плашек без рамок. */
.partners.variant-logos .partner-grid article { border: 0; background: var(--surface); }
.partners.variant-logos .partner-grid small { display: none; }
/* row — одна строка с прокруткой: партнёров много, место одно. */
.partners.variant-row .partner-grid { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px; }
.partners.variant-row .partner-grid article { flex: 0 0 min(58%, 210px); min-height: 88px; }
@media (max-width: 700px) {
.agenda-list li, .agenda.variant-tracks .agenda-list li { grid-template-columns: 1fr; gap: 10px; }
.speakers.variant-featured .speaker-grid article:first-child { grid-template-columns: 1fr; }
}
/* Фото в блоках, где оно раньше не отрисовывалось (Тест 5).
Панель «Фото и медиа» открыта для любого блока, значит загруженное фото
обязано появляться в любом блоке. Общая .section-media задаёт 60vh во всю
ширину — для полосы бегущей строки, тарифов и CTA это слишком крупно,
поэтому здесь спокойные размеры под каждую композицию. */
.section-media figcaption{margin-top:12px;font-size:13px;opacity:.7}
.section-media figcaption:empty{display:none}
.benefits-media,.concept-media,.people-media,.pricing-media,.agenda-media,.speakers-media,.partners-media{margin-top:clamp(38px,5vw,64px)}
.benefits-media img,.concept-media img,.people-media img,.pricing-media img,.agenda-media img,.speakers-media img,.partners-media img{height:min(52vh,520px)}
.marquee-media,.statistics-media{margin:clamp(28px,4vw,46px) clamp(22px,7vw,120px)}
/* У полосы бегущей строки padding:0!important, поэтому нижний воздух под фото
задаём самим фото — иначе оно упирается в край полосы. */
.marquee-media img,.statistics-media img{height:min(38vh,340px)}
.cta-media{margin-top:clamp(30px,4vw,50px);width:min(100%,760px)}
.cta-media img{height:min(42vh,400px)}
.cta-media figcaption{color:var(--background);opacity:.75}
/* Пустая рамка-подсказка в этих же блоках не должна занимать пол-экрана. */
.marquee-band .yp-image-slot,.statistics .yp-image-slot{max-width:min(100%,720px);margin-left:auto;margin-right:auto}
.cta .yp-image-slot{max-width:min(100%,600px)}
/* Статистика — сетка в 4 колонки: без этого фото занимает одну ячейку шириной 59px. */
.statistics-media{grid-column:1/-1;margin-left:0;margin-right:0}
.statistics .yp-image-slot{grid-column:1/-1}
/* Длинная цена вылезала за карточку тарифа: «от1250000руб.заполныйпроект» —
одно слово с точки зрения переноса, а word-break по умолчанию не режет
слова. Ломаем такие строки в любом месте — иначе текст рисуется поверх
соседей, и никакой ширины карточки не хватит. */
.generated-site{overflow-wrap:break-word}
.pricing-grid article strong,.offer-list article strong,.pricing-grid article h3,.offer-list article h3{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.pricing-grid article,.offer-list article{min-width:0}
/* ===== Тест-6 ===== */
/* Рамка выделения должна обнимать текст, а не колонку сетки. Элемент «строки
над заголовком» растягивался гридом на всю ячейку (187×108px при тексте в
одну строчку) — и рамка с ручками вставала вокруг пустоты. Трек сетки задан
fr-единицами, так что ужатие элемента до содержимого раскладку не меняет. */
.section-intro>span{align-self:start;justify-self:start;width:fit-content}
/* Подпись под фото по той же причине: figcaption тянулся на ширину фигуры
(824px при тексте в четыре слова), и его ручки лежали под ручками фото —
«дополнительные точки редактирования размера». */
.section-media figcaption{width:fit-content}
.section-media figcaption:empty{display:none}
/* Адрес в подвале — обычная строка колонки контактов. */
.site-footer-address{margin:2px 0 0;font-size:13px;opacity:.75;line-height:1.5}
/* Варианты формы заявки. Реестр обещает четыре (card/minimal/panel/split), а
правила были только у card — «все варианты отображения одинаковые» (Тест-6).
Каждому варианту — своё строение, а не только косметика. */
/* split: текст слева, форма справа — это и есть базовая сетка, но с явной
вертикальной линией раздела и полями в две колонки. */
.lead-form.variant-split{column-gap:6vw}
.lead-form.variant-split .lead-form-copy{border-right:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding-right:4vw;align-self:center}
@media (max-width:900px){.lead-form.variant-split .lead-form-copy{border-right:0;padding-right:0}}
/* panel: заголовок по центру, форма — тонированная панель во всю ширину,
поля в строку. */
.lead-form.variant-panel{display:block!important;grid-template-columns:none!important;text-align:center}
.lead-form.variant-panel .lead-form-copy{max-width:640px;margin:0 auto 40px}
.lead-form.variant-panel form{max-width:860px;margin:0 auto;text-align:left;background:color-mix(in oklab,var(--primary) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);border-radius:var(--radius);padding:clamp(22px,4vw,44px)}
/* minimal: без панели и рамок — тонкие подчёркнутые поля, максимально тихо. */
.lead-form.variant-minimal{display:block!important;grid-template-columns:none!important;max-width:680px;margin-inline:auto}
.lead-form.variant-minimal .lead-form-copy{margin-bottom:34px}
.lead-form.variant-minimal input,.lead-form.variant-minimal textarea{background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:0;padding-inline:2px}
.lead-form.variant-minimal input:focus,.lead-form.variant-minimal textarea:focus{border-bottom-color:var(--accent-ink,var(--primary));outline:none}
/* Подпись секции в editorial_story не должна ложиться под заголовок.
Колонка была жёсткой (160px у композиции, 0.25fr у семейства swiss_grid,
которое стоит ниже по файлу и выигрывает при равном весе), а подпись там
набрана кеглем 32px: русские слова конференций («Преимущества»,
«Партнёры») шире колонки и уходили ПОД заголовок. Добавочный [data-family]
поднимает вес до (0,4,0) — правило бьёт и композицию, и любое семейство.
Мобильная ветка одноколоночная и продублирована с тем же весом — иначе
этот же селектор сломал бы её (урок Тест-4: «поднял вес — подними и в
адаптивной ветке»). */
.generated-site[data-composition="editorial_story"][data-family] .section-intro{
grid-template-columns:fit-content(340px) minmax(0,1fr);
column-gap:clamp(20px,2.4vw,40px);
}
@media(max-width:600px){
.generated-site[data-composition="editorial_story"][data-family] .section-intro{grid-template-columns:1fr}
}
/* Ссылки на юридические документы в подвале (платная услуга). */
/* Документы в подвале идут ОДНОЙ СТРОКОЙ через разделитель.
Раньше они висели столбиком с большими промежутками (жалоба 2026-09-06
«смотри как документы отображаются в подвале»): блок — это