/* ═══════════════════════════════════════════════════════════════════════
ТОКЕНЫ РАЗДЕЛА. Значения взяты с утверждённого стенда
(demo-stand/styles/tokens.css) и объявлены здесь потому, что боевой
бандл new_design/css/styles.css их НЕ содержит: из 27 переменных,
которые использует этот файл, в бандле нет девяти. Пять из них имеют
запасные значения прямо в var(), три (--px-*) выставляет JS, а вот
эти четыре шли без фолбэка — и раздел терял скосы кнопок, шрифты и
базовый кегль (найдено 05.08.2026 при первом рендере на боевом).
Имена в бандле не используются (проверено: 0 вхождений var(--chamfer-md),
var(--font-sans), var(--font-mono), var(--size-body-m)), поэтому
объявление в :root на другие страницы не влияет.
═══════════════════════════════════════════════════════════════════════ */
:root {
--chamfer-lg: 2.2rem;
--chamfer-md: 0.8rem;
--chamfer-sm: 0.6rem;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "Roboto Mono", "RobotoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
--size-body-m: 18px;
}
/* На стенде кегль падает до 16px и на планшете (≤992), и на телефоне (≤575);
значения совпадают, поэтому здесь один запрос вместо двух. */
@media (max-width: 992px) {
:root { --size-body-m: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════
УТИЛИТА СКОСА. Разметка раздела использует классы `chamfered` и
`chamfered--md` (фильтры, чипы), но при сборке бандла раздела файл
demo-stand/styles/components/chamfer.css не попал внутрь — правил не
было ни здесь, ни в боевом styles.css, и элементы выходили прямыми
прямоугольниками (найдено 05.08.2026 на боевом).
Скопировано с утверждённого стенда без изменений. Боевой бандл имя
`.chamfered` не использует вовсе, а файл подключается только на этой
странице — на другие разделы не влияет.
═══════════════════════════════════════════════════════════════════════ */
.chamfered {
--chamfer: var(--chamfer-lg);
clip-path: polygon(
var(--chamfer) 0,
100% 0,
100% calc(100% - var(--chamfer)),
calc(100% - var(--chamfer)) 100%,
0 100%,
0 var(--chamfer)
);
}
.chamfered--lg {
clip-path: polygon(
var(--chamfer-lg) 0, 100% 0,
100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%,
0 100%, 0 var(--chamfer-lg)
);
}
.chamfered--md {
clip-path: polygon(
var(--chamfer-md) 0, 100% 0,
100% calc(100% - var(--chamfer-md)), calc(100% - var(--chamfer-md)) 100%,
0 100%, 0 var(--chamfer-md)
);
}
.chamfered--sm {
clip-path: polygon(
var(--chamfer-sm) 0, 100% 0,
100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%,
0 100%, 0 var(--chamfer-sm)
);
}
@charset "UTF-8";
/* =========================================================
stroyka-onlayn.css — раздел «Онлайн-трансляции строек» /stroyka-onlayn/
Дописывается В КОНЕЦ боевого new_design/css/styles.css (на сайте один бандл).
Сверено с живым бандлом 04.08.2026: из 122 классов страницы 31 уже в бандле
и здесь НЕ дублируется. Пересечений, переопределяющих боевые правила, нет:
единственное упоминание .product-item скоупнуто нашим .livecam-card__house-fact.
========================================================= */
/* ═══ livecam.css ═══ */
/* =========================================================
livecam.css — блок «Онлайн-трансляции и таймлапсы» (публичные трансляции
строек; страница переименована владельцем 2026-07-10, бывш. «Стройка онлайн»,
слаг /stroyka-onlayn/ пока прежний)
----
НОВОЕ · наши имена (livecam-* / lc-*). На боевом dbrus.ru классов нет —
помечать как новое. Опирается на реальные DS-компоненты:
player.css — .video-poster (16:9), .player-control, уголки
video-lightbox.css — модальный плеер
source-tabs.css — переключатель «Эфир / Архив»
button.css — .primary-btn, .btn-arrow
breadcrumbs.css — крошки
tokens / typography / base
БАЗА УТВЕРЖДЕНА владельцем 2026-07-10 и вшита без вариантов:
· первый экран «сразу объекты» (H1 + строка-лид → фильтры → сетка)
· лента 3-в-ряд («по три в ряд видео» — утв. владельцем)
· светлый бейдж «Онлайн», затемнение фото вкл
· FAQ колонками, CTA заливкой
Старые варианты (герой с камерой, data-first/-grid/-badge/-scrim,
FAQ строками, CTA контуром, тизер open/panel/strip/compact/wide)
УДАЛЕНЫ после утверждения. Единственный блок с вариантами —
тизер-анонс («короткая трансляция»), раздел 7: в Tweaks 2 вида
(Секция / Плита); «Плашка» скрыта владельцем 2026-07-10, CSS в архиве.
Бренд-инварианты: острые углы (radius:0; кружок 50% — только live-точка),
один громкий акцент (жёлтый = CTA), тёплый графит/песок, без теней-высоты.
========================================================= */
:root {
/* Сдержанный «эфирный» красный — спокойнее неонового #e5484d, не спорит
с жёлтым CTA. Используется только для live-точки. */
--lc-live: #d2483f;
}
/* ============================================================
1. ПЕРВЫЙ ЭКРАН — компактная шапка листинга (утверждена 2026-07-10)
============================================================ */
.lc-intro {
position: relative;
/* overflow VISIBLE (не hidden): компактная шапка ниже полной высоты
орнамента (60.7rem) — hidden срезал нижние ~10rem фигуры, и она
выглядела «висящей вверху и обрезанной». Убираем вертикальный клип →
фигура показывается целиком и её нижняя часть спускается ниже (1:1 с
боевой главной, где герой высокий и фигура видна вся). Боковой вылет
right:-1.8rem по-прежнему гасит body{overflow-x:hidden} (без прокрутки),
а низ фигуры (527px) на 22px выше первого ряда карточек — на видео не
наслаивается. Правка по запросу владельца 2026-07-16. */
overflow: visible;
background-color: var(--bg-color);
/* верхний паддинг очищает фиксированную шапку (ритм 13/11/9 как в DS);
низ 0 — плотный стык с лентой: первый экран = заголовок + объекты */
padding: 13rem 0 0;
}
@media (max-width: 992px) { .lc-intro { padding: 11rem 0 0; } }
@media (max-width: 575px) { .lc-intro { padding: 9rem 0 0; } }
/* Пиксельный орнамент в правом верхнем углу — КАНОНИЧЕСКОЕ размещение
первого экрана, 1:1 с боевым сайтом (hero.css .home-main__content::before,
faq-hub .faq-hero__ornament, rubric-page): 60.7rem, top:-8rem, right:-1.8rem.
overflow секции = visible (см. выше), поэтому нижняя часть фигуры НЕ
срезается и спускается ниже строки лида, заканчиваясь на ~22px выше первого
ряда карточек. (Прежние 40rem / top:-2rem заканчивались на 30rem из 40.5rem
высоты секции → «улетала вверх», правка 2026-07-13; клип убран по запросу
владельца 2026-07-16.) */
.lc-intro__ornament {
position: absolute;
top: -8rem;
/* right:0 (\u043d\u0435 -1.8rem): \u043d\u0430 \u0431\u043e\u0435\u0432\u043e\u0439 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0432\u044b\u043b\u0435\u0442 -1.8rem \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0441\u0440\u0435\u0437\u0430\u043d\n overflow:hidden \u0441\u0435\u043a\u0446\u0438\u0438 \u2014 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u043a\u0440\u0430\u0439 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0443 \u043a\u0440\u043e\u043c\u043a\u0438 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430. \u0417\u0434\u0435\u0441\u044c\n overflow \u0441\u0435\u043a\u0446\u0438\u0438 = visible (\u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0437 \u0444\u0438\u0433\u0443\u0440\u044b \u043d\u0435 \u0440\u0435\u0437\u0430\u043b\u0441\u044f), \u043f\u043e\u044d\u0442\u043e\u043c\u0443\n right:-1.8rem \u0434\u0430\u043b \u0431\u044b 1.8rem \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u043b\u0435\u0442\u0430 \u2192 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f\n \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430. right:0 \u0434\u0430\u0451\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 (\u043a\u0440\u0430\u0439 \u0443 \u043a\u0440\u043e\u043c\u043a\u0438),\n \u0431\u0435\u0437 \u0432\u044b\u043b\u0435\u0442\u0430. \u041f\u0440\u0430\u0432\u043a\u0430 2026-07-16. */
right: 0;
width: 60.7rem;
height: 60.7rem;
background-image: url("/assets/template/new_design/images/svg/main_bg.svg");
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
@media (max-width: 992px) {
.lc-intro__ornament { width: 32rem; height: 32rem; top: -7rem; right: 0; }
}
@media (max-width: 575px) {
.lc-intro__ornament { width: 24rem; height: 24rem; }
}
.lc-intro .container { position: relative; z-index: 1; }
/* Крошки — стандартные (графит на тёплом фоне) */
.lc-intro .breadcrumbs-row { margin-bottom: 3.2rem; }
/* H1 — канонический .page-title; ширина по правилу первых экранов
(тянется во всю контентную колонку, клемма ~103–108rem, CLAUDE.md).
Кикер с live-точкой намеренно НЕ ставим: плашки «Онлайн» на карточках
прямо под шапкой — не дублируем «эфир» (урок тизера 2026-07-10). */
.lc-listing-head__title {
margin: 0 0 2.4rem;
max-width: 108rem;
}
.lc-listing-head__lead {
margin: 0;
max-width: 62ch;
font-family: var(--font-sans);
font-size: 1.7rem;
line-height: 148%;
letter-spacing: -0.01em;
color: var(--brand-main-mid);
}
@media (max-width: 575px) { .lc-listing-head__lead { font-size: 1.5rem; } }
/* ============================================================
2. ЛЕНТА ОБЪЕКТОВ
============================================================ */
.lc-page { padding: 4.8rem 0 2rem; }
@media (max-width: 992px) { .lc-page { padding: 4rem 0 2rem; } }
@media (max-width: 575px) { .lc-page { padding: 3.2rem 0 2rem; } }
.lc-section { margin-bottom: 9rem; }
@media (max-width: 992px) { .lc-section { margin-bottom: 6.4rem; } }
.lc-section__head { margin-bottom: 3.6rem; max-width: 92rem; }
.lc-section__head .section-title { margin-bottom: 1.6rem; }
/* ---- Сетка объектов — 3 в ряд (УТВЕРЖДЕНА владельцем 2026-07-10) ---- */
.livecam-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3.2rem 2.4rem;
}
/* Планшет — по 2 в ряд, телефон (≤575, как на боевом) — в 1 колонку. */
@media (max-width: 992px) { .livecam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2.4rem; } }
@media (max-width: 575px) { .livecam-grid { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; } }
/* Плотность 4-в-ряд — эксплорейшн (владелец 2026-07-11: «а получится ли
поместить 4 в ряд?»), переключается в Tweaks (data-lc-cols на #lc-main).
3 в ряд остаётся утверждённой базой. На ≤992 обе плотности складываются
в 1 колонку (id-специфичность #lc-main перебила бы базовый брейк —
поэтому свой override ниже). */
#lc-main[data-lc-cols="4"] .livecam-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 992px) {
#lc-main[data-lc-cols="4"] .livecam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
#lc-main[data-lc-cols="4"] .livecam-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
3. КАРТОЧКА ОБЪЕКТА
============================================================ */
.livecam-card { display: flex; flex-direction: column; }
.livecam-card[hidden] { display: none; }
/* Уголки .video-poster на карточках ЛЕНТЫ убраны (владелец 2026-07-16,
аудит страницы: постер уже живёт внутри обрамлённой карточки — уголки
давали «рамку в рамке» и спорили с бейджем; спаны .corner-bl/.corner-br
вычищены из разметки карточек ленты). Скоуп СТРОГО .livecam-grid:
у тизера (.lc-teaser__media) и в лайтбоксе постер стоит самостоятельно —
там уголки остаются единственной фирменной рамкой, их НЕ трогаем. */
.livecam-grid .livecam-card .video-poster::before,
.livecam-grid .livecam-card .video-poster::after { content: none; }
.livecam-card .video-poster {
/* Было 16/9; владелец 2026-07-11: «сделаем побольше по высоте» — 3/2.
Исходники cache_image 670×486 (≈1.38), так что запас по вертикали есть;
кроп по-прежнему якорится object-position 50% 38% (крыши не режет).
Тизер не трогаем — у него своё правило .lc-teaser .video-poster (16/9). */
aspect-ratio: 3 / 2;
cursor: pointer;
}
/* Ховер — лёгкий зум ФОТО внутри постера (владелец 2026-07-10: подъём
translateY убран — карточка «отлипала» от характеристик; вместо него
картинка чуть увеличивается). Постер уже overflow:hidden (player.css),
зум режется его границами; бейджи/уголки/вуаль неподвижны. */
.livecam-card .video-poster > .video-poster__img {
transition: transform 0.45s ease;
will-change: transform;
/* Фото каталога 670×486 (≈1.4:1) в постере 16:9 режется по вертикали на ~22%.
Центр-кроп срезал конёк крыши («фотки съехали» — владелец 2026-07-10):
якорим окно чуть выше центра — дом целее, режется пустая земля внизу. */
object-position: 50% 38%;
}
/* Единая реакция ВСЕЙ карточки (владелец 2026-07-16 «это единый элемент —
навел на нижнюю часть, зум видео и ховер тоже срабатывают»): зум фото
и play-кнопка ведутся от :hover КАРТОЧКИ в ленте, не только постера
(скоуп .livecam-grid — у тизера тела нет, там остаётся ховер постера). */
.livecam-card[data-status="live"] .video-poster:hover > .video-poster__img,
.livecam-card[data-status="archived"] .video-poster:hover > .video-poster__img,
.livecam-grid .livecam-card[data-status="live"]:hover .video-poster > .video-poster__img,
.livecam-grid .livecam-card[data-status="archived"]:hover .video-poster > .video-poster__img { transform: scale(1.04); }
/* Ховер на постере подсвечивает и ТЕЛО карточки (владелец 2026-07-16:
«при наведении на верхнюю часть с видео подсвечивалась и эта часть») —
тот же white-mid, что у .product-item:hover каталога; transition уже
на .product-item. Ведём от :hover всей карточки: наведение на тело
работало и раньше (каталожное правило), теперь карточка светится целиком.
Скоуп .livecam-grid — тизер не трогаем. */
.livecam-grid .livecam-card:hover .livecam-card__body--house { background-color: var(--white-mid); }
@media (prefers-reduced-motion: reduce) {
.livecam-card .video-poster > .video-poster__img { transition: none; }
.livecam-card .video-poster:hover > .video-poster__img,
.livecam-grid .livecam-card:hover .video-poster > .video-poster__img { transform: none; }
}
/* Затемняющая вуаль снизу постера (утверждено: вкл) — для читаемости
плашек/бейджа на ярком фото. Отдельный дочерний слой: уголки постера
рисуются в player.css на ::before/::after, их не занимаем. */
.livecam-scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(38,41,44,0.28) 0%, rgba(38,41,44,0) 32%, rgba(38,41,44,0) 60%, rgba(38,41,44,0.42) 100%);
}
/* Затемнение постеров (владелец 2026-07-14: «на live-кадрах много
шума — может фильтр затемнения проставить» → затем «то же для
таймлапса применить»). Приглушаем яркость+насыщенность самого
— шум успокаивается, бейдж и подпись адреса читаются увереннее.
На ВСЕХ карточках (live + archived/таймлапс) — единый вид ленты.
Фильтр на : бейджи/уголки/скрим выше по z-index — не тускнеют.
Уровень ВШИТ «Лёгкое» (владелец 2026-07-14 «это давай так оставим») —
твик «Фото в эфире → Затемнение» и варианты strong/off удалены. */
.livecam-card .video-poster__img {
filter: brightness(0.85) contrast(0.96) saturate(0.95);
}
/* ---- Бейдж статуса (поверх постера) ----
База чипа 1:1 с .blog-card__cat (Inter, капс, острые углы). */
.livecam-badge {
position: absolute;
top: 1.4rem;
left: 1.4rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.6rem 1.4rem;
background-color: var(--brand-second-extra-low);
border: 0.1rem solid var(--brand-second-strong);
backdrop-filter: blur(0.5rem);
-webkit-backdrop-filter: blur(0.5rem);
font-family: var(--font-sans);
font-weight: 500;
font-size: 1.4rem;
line-height: 100%;
letter-spacing: -0.04em;
text-transform: uppercase;
color: var(--brand-second-strong);
text-decoration: none;
}
/* Телефон: бейдж чуть компактнее — крупный на узком постере смотрелся
тяжело (владелец 2026-07-16 «тег слишком большой на моб»). */
@media (max-width: 575px) {
.livecam-badge { top: 1rem; left: 1rem; gap: 0.6rem; padding: 0.4rem 1rem; font-size: 1.2rem; }
.livecam-badge .livecam-dot { width: 0.7rem; height: 0.7rem; }
.livecam-badge .livecam-ff { width: 1rem; height: 1rem; }
}
/* «Онлайн» — графитовая плашка (база; отбор владельца 2026-07-10: из 4
фонов оставлены тёплая/графитовая → 2026-07-10 владелец вшил графитовую
единственной, тёплая убрана из Tweaks). Тёмное здесь легально — мелкая
плашка, не фон блока. Белый текст + живая красная точка читаются на
любом фото стройки. */
.livecam-badge--live {
background-color: rgba(38, 41, 44, 0.82); /* графит бывшей .livecam-note */
border-color: transparent;
color: var(--white-base);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Статус «Не в эфире / скоро в эфире» УДАЛЁН ЦЕЛИКОМ (решение владельца
2026-07-10: «вполне достаточно, это онлайн и завершено»). Неработающая
камера не публикуется; ошибки провайдера видны внутри iframe.
Удалены: .livecam-badge--offline, мьют-play [data-status=offline],
плашка-пояснение .livecam-note (её графит rgba(38,41,44,.82) живёт
в варианте бейджа dark ниже). */
/* «Завершено» — простой тег-статус, НЕ кнопка (решение владельца 2026-07-10:
«эту кнопку надо убрать… просто тег завершено и всё»; прежний кликабельный
песочный чип-ссылка удалён — на страницу дома ведёт тело карточки).
Та же графитовая плашка, что и у «Онлайн»; подпись
«Завершено»/«Таймлапс» переключается в Tweaks. */
.livecam-badge--archived {
background-color: rgba(38, 41, 44, 0.82); /* графит бывшей .livecam-note */
border-color: transparent;
color: var(--white-base);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ---- Фон бейджей статуса ----
Отбор владельца 2026-07-10: из 4 фонов остались тёплая/графитовая, затем
(тот же день) владелец вшил ГРАФИТОВУЮ единственной — тёплая убрана из
Tweaks, твик «Фон бейджей» удалён. Графит теперь база (.livecam-badge--
live / --archived выше); отдельные варианты data-lc-badges и атрибут на
#lc-main больше не нужны. */
/* Live-точка (единственный кружок — исключение из острых углов) */
.livecam-dot {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
flex: 0 0 auto;
background-color: var(--lc-live);
box-shadow: 0 0 0 0 rgba(210, 72, 63, 0.55);
animation: lc-pulse 1.9s ease-out infinite;
}
@keyframes lc-pulse {
0% { box-shadow: 0 0 0 0 rgba(210, 72, 63, 0.5); }
70% { box-shadow: 0 0 0 0.7rem rgba(210, 72, 63, 0); }
100% { box-shadow: 0 0 0 0 rgba(210, 72, 63, 0); }
}
@media (prefers-reduced-motion: reduce) { .livecam-dot { animation: none; } }
/* Знак «Таймлапс» — двойной треугольник (перемотка), эхо play-глифа; в пару
к живой точке «Онлайн». currentColor: графит на тёплом бейдже, белый — на
графитовом (наследует color бейджа). */
.livecam-ff {
width: 1.1rem;
height: 1.1rem;
flex: 0 0 auto;
display: block;
fill: currentColor;
}
/* Ряд «срок + дата постройки» (пара .livecam-card__house-fact в спеках) —
скрываемый в Tweaks; ДЕФОЛТ скрыт (data-lc-facts="hidden" на #lc-main,
вшито в разметку). Прячем на всех карточках — live и archived.
+ Положение «Только срок» (term, владелец 2026-07-11: «или оставить только
срок 3-й иконкой в ряд?») — прячет второй факт пары (дату). */
#lc-main[data-lc-facts="hidden"] .livecam-card__house-fact { display: none; }
#lc-main[data-lc-facts="term"] .livecam-card__house-fact + .livecam-card__house-fact { display: none; }
/* ---- Адрес объекта (НОВОЕ · наши имена lc-addr*) ----
На боевом dbrus.ru у карточек трансляций адреса нет — была разведка
расположения (2026-07-11). РЕШЕНО владельцем 2026-07-11 по скринам:
расположение ВШИТО «Постер», шрифт ВШИТ Inter — варианты «чип в
спеках» / «подстрока под именем» / «только в плеере» и твики
«Расположение»/«Шрифт адреса» удалены (скрипт строит подпись
только на постере). Гранулярность — только район / населённый пункт
(точный адрес не публикуем: частные участки клиентов); детализацию
и пин по-прежнему переключает Tweaks (атрибуты #lc-main). */
/* Детализация: район / населённый пункт / оба (виден один текст-спан). */
.lc-addr__t { display: none; }
#lc-main:not([data-lc-addr-detail]) .lc-addr__t--district,
#lc-main[data-lc-addr-detail="district"] .lc-addr__t--district,
#lc-main[data-lc-addr-detail="locality"] .lc-addr__t--locality,
#lc-main[data-lc-addr-detail="both"] .lc-addr__t--both { display: inline; }
/* Шрифт подписи адреса ВШИТ «Обычный (Inter)» — владелец 2026-07-11
по скрину (было: моно как заголовки, твик «Шрифт адреса» удалён).
font-family задан прямо на .lc-addr--poster ниже. */
/* Иконка-пин: показать / скрыть. */
#lc-main[data-lc-addr-icon="off"] .lc-addr__pin { display: none; }
.lc-addr__pin { flex: 0 0 auto; }
/* A · подпись на постере — мелкая графитовая плашка (легально: не фон блока),
низ слева, поверх вуали; фон 1:1 с бейджем «Онлайн». */
.lc-addr--poster {
position: absolute;
left: 1.4rem;
bottom: 1.4rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.6rem;
max-width: calc(100% - 2.8rem);
padding: 0.6rem 1.2rem;
background-color: rgba(38, 41, 44, 0.82); /* графит бейджа */
font-family: var(--font-sans); /* Inter — вшито владельцем 2026-07-11 */
font-size: 1.3rem;
line-height: 1;
letter-spacing: -0.01em;
color: var(--white-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lc-addr--poster .lc-addr__pin { width: 1.4rem; height: 1.4rem; }
/* Телефон: подпись адреса тоже компактнее — в пару к уменьшенному бейджу
(владелец 2026-07-16). */
@media (max-width: 575px) {
.lc-addr--poster { left: 1rem; bottom: 1rem; gap: 0.5rem; padding: 0.4rem 0.9rem; font-size: 1.15rem; max-width: calc(100% - 2rem); }
.lc-addr--poster .lc-addr__pin { width: 1.2rem; height: 1.2rem; }
}
/* Сторона подписи ВШИТА СЛЕВА (владелец 2026-07-14 «вернём слева» —
пробовали справа/диагональ от бейджа, твик «Сторона» удалён).
Пин с 2026-07-14 по дефолту ВЫКЛ (data-lc-addr-icon="off"). */
/* Варианты «B · чип в ряду спеков» (.lc-addr--chip) и «C · подстрока под
именем» (.lc-addr--sub) УДАЛЕНЫ 2026-07-11 — владелец вшил «Постер». */
/* ---- Спеки тела — 3 подачи (НОВОЕ · эксплорейшн, владелец 2026-07-11:
«карточка похожа на построенного — хорошо, но перегруз; данных полно») ----
grid (дефолт) — каталожная сетка с иконками 1:1 (узнаваемость каталога);
line — строка-резюме без иконок: те же 4 факта одной приглушённой строкой,
тот же паттерн, что спеки в лайтбоксе (строится скриптом);
duo — только площадь + этажность чипами (стиль и габарит — на страницу
дома; набор фактов легко поменять).
data-lc-specs на #lc-main, переключает Tweaks.
⚠ В режиме line сетка .item-info скрыта целиком — адрес-«В спеках» в этом
сочетании не виден (адрес тогда смотреть на постере / под именем). */
.lc-specs-line {
width: 100%;
margin-top: 1.6rem;
font-size: 1.5rem;
line-height: 130%;
letter-spacing: -0.03em;
color: var(--brand-main-mid);
}
#lc-main:not([data-lc-specs="line"]) .lc-specs-line { display: none; }
#lc-main[data-lc-specs="line"] .livecam-card__body--house .item-info { display: none; }
#lc-main[data-lc-specs="duo"] .livecam-card__body--house .info-item.house-type,
#lc-main[data-lc-specs="duo"] .livecam-card__body--house .info-item.size-type { display: none; }
/* Порядок в «Два факта»: этажность ← → площадь поменяны местами (владелец
2026-07-11) — ряд читается «Одноэтажный · 86 м² · срок». Каталожный
порядок (house→square→floor→size) в полной сетке не трогаем. */
#lc-main[data-lc-specs="duo"] .livecam-card__body--house .info-item.floor-type { order: 2; }
#lc-main[data-lc-specs="duo"] .livecam-card__body--house .info-item.square-type { order: 3; }
/* «Два факта» при объектах 3-В-РЯД: спеки идут ТРЕМЯ столбцами — площадь ·
этажность · срок в один ряд (владелец 2026-07-11: «срок сделать 3-м
столбцом, чтобы было 3 в ряд пункта… не трогая отображение 4 в ряд»).
Комбо с «Только срок» (data-lc-facts="term") даёт ровно одну строку из 3;
с «Показать» дата уходит вторым рядом. 4-в-ряд не трогаем (скоуп по
data-lc-cols="3"); на ≤992 возвращаем базовые 2 столбца. */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Подпись факта не разрывается по пробелу (владелец 2026-08-05 по скрину:
«площадь сжалась в 2 строки»). Три факта делят ряд на колонки 1fr, и на
десктопе колонка оказывается уже подписи — «128 м²» ломалось перед
единицами. nowrap для этого ряда уже стоял, но только внутри @media ≤992
и ≤575, то есть до десктопа не доходил. */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item {
min-width: 0;
white-space: nowrap;
}
/* …и площадь «подальше» от этажности (владелец 2026-07-11). Раньше толкали
фиксированным margin-left (1.6→4.2→3.2rem) — «магическое число»: колонка 1fr
тянется с картой, а отступ фикс. → на разных ширинах чип гулял. Владелец
2026-07-11 (4) «насколько правильно так делать?» — переведено на выравнивание
самой ячейки грида: justify-self центрирует площадь в её средней колонке,
позиция считается от ширины колонки и держится на любом экране без подбора
пикселей. На ≤992 (2 колонки) возвращаем start. */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .info-item.square-type {
justify-self: center;
}
@media (max-width: 992px) {
/* Планшет: три пункта в ОДИН ряд (владелец 2026-07-15). Длинному слову
«Полуторный»/«Двухэтажный» — широкая колонка, площади — узкая, сроку —
средняя. Шрифт чуть меньше (1.5rem) — владелец 2026-07-15 «на боевом
планшете элементы явно меньше, можно уменьшить», чтобы срок («44-й
день») не уходил на 2-ю строку; иконка тоже уже. */
/* Планшет: три пункта в ОДИН ряд, каждый по ширине содержимого, ровный
межколонник — без переносов и без «дыр» справа (владелец 2026-07-15:
«срок правее», затем «пространства больше, чем нужно» + площадь
переносилась при узкой колонке). Шрифт 1.5rem — владелец «на боевом
планшете элементы меньше». */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info {
grid-template-columns: repeat(3, max-content);
column-gap: 1.8rem;
justify-content: start;
}
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item { min-width: 0; font-size: 1.5rem; white-space: nowrap; }
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item::before { flex-basis: 1.7rem; width: 1.7rem; margin-right: 0.5rem; font-size: 1.5rem; }
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item { min-width: 0; font-size: 1.5rem; }
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item::before { flex-basis: 1.7rem; width: 1.7rem; margin-right: 0.5rem; font-size: 1.5rem; }
/* SVG-иконки «срок/дата» (.livecam-card__house-fact) на планшете
ДОЛЖНЫ ужиматься вместе с fontello-глифами — иначе они оставались
на десктопном 2.2rem+1rem, выглядели крупнее и текст шёл дальше
(владелец 2026-07-16: «иконки разного размера, отступ везде разный»).
Держим ту же пропорцию, что на десктопе (svg = глиф × 2.2/1.8):
глиф 1.5rem → svg 1.8rem; отступ добираем до общего индента 2.2rem
(1.7 box + 0.5 gap у fontello) → margin 0.4rem. Левые края и базовая
линия текста совпадают со спеками выше. */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item.livecam-card__house-fact svg {
flex-basis: 1.8rem; width: 1.8rem; height: 1.8rem; margin-right: 0.4rem;
}
}
@media (max-width: 575px) {
/* Телефон: три спека В ОДИН РЯД (владелец 2026-07-16 «в мобильной тоже
три элемента в один ряд, а не в два»). Как на планшете — max-content +
nowrap, мелкий кегль, глифы ужаты, чтобы «45-й день» не переносился. */
/* 3 равные колонки (не max-content) — позиции фиксированы, площадь не
«скачет» между карточками (владелец 2026-07-16). Контент каждого спека
центрируем внутри своей трети. */
/* 3 колонки ПО СОДЕРЖИМОМУ, распределённые по ширине (space-between):
левый спек прижат к левому паддингу карточки, правый — к правому.
Раньше были 3×1fr + justify-content:center — длинное «Одноэтажный»
(nowrap) шире своей трети и вылезало ЗА ЛЕВУЮ ГРАНИЦУ карточки
(владелец 2026-07-16). max-content убирает переполнение, позиции у
карточек почти совпадают (слова-этажности одной длины). */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info {
grid-template-columns: repeat(3, max-content);
column-gap: 1rem;
justify-content: space-between;
}
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item { min-width: 0; font-size: 1.4rem; white-space: nowrap; justify-content: flex-start; }
/* Срок (3-й спек) — иконку прижимаем к ЛЕВОМУ краю своей трети
(justify-content: flex-start): глиф встаёт на фиксированную линию у
онлайн- и таймлапс-карточек одинаково, текст растёт вправо. Раньше
flex-end сдвигал иконку короткого «49 дней» правее длинного «45-й
день» — владелец 2026-07-16 «выровнять по онлайну, там текста больше». */
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item.livecam-card__house-fact { justify-content: flex-start; }
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item::before { flex-basis: 1.6rem; width: 1.6rem; margin-right: 0.4rem; font-size: 1.4rem; }
#lc-main[data-lc-cols="3"][data-lc-specs="duo"] .livecam-card__body--house .item-info .info-item.livecam-card__house-fact svg { flex-basis: 1.7rem; width: 1.7rem; height: 1.7rem; margin-right: 0.3rem; }
}
/* Кнопка «Смотреть онлайн-трансляцию» в теле live-карточек — аккуратная
строка-переход 1:1 с .livecam-card__house-more таймлапс-карточек
(вставляется скриптом; запускает тот же лайтбокс, что play). */
.livecam-card__house-more.lc-watch-btn {
appearance: none;
-webkit-appearance: none;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
text-align: left;
border: 0;
border-top: 0.1rem solid var(--brand-main-low);
}
/* Ховер play активируется наведением на ВЕСЬ постер (запрос владельца
2026-07-10), а в ЛЕНТЕ — и наведением на тело карточки (владелец
2026-07-16 «единая реакция везде») — зеркалит .player-control:hover. */
.livecam-card .video-poster:hover .player-control,
.livecam-grid .livecam-card:hover .player-control {
background-color: var(--brand-main-base);
color: var(--brand-second-mid);
}
/* Стрелка в online-строке анимируется при ховере ВСЕГО тела —
1:1 с house-more (страница построенного дома: .item-link:hover). */
.livecam-card__house-more.lc-watch-btn .icon-btn_arrow {
font-size: 1.4rem;
line-height: 1;
transition: transform 0.3s;
}
.livecam-card__body--house:hover .lc-watch-btn .icon-btn_arrow { transform: translateX(0.4rem); }
/* ---- Подпись карточки ---- */
.livecam-card__body { padding-top: 1.6rem; }
.livecam-card__title {
margin: 0 0 0.6rem;
font-family: var(--font-mono);
font-weight: 500;
font-size: 1.8rem;
line-height: 114%;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--brand-main-base);
}
.livecam-card__place {
margin: 0;
font-family: var(--font-sans);
font-size: 1.4rem;
line-height: 132%;
color: var(--brand-main-mid);
}
.livecam-card__archive-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.1rem;
font-family: var(--font-sans);
font-size: 1.4rem;
font-weight: 500;
color: var(--brand-main-base);
cursor: pointer;
border-bottom: 0.1rem solid var(--brand-main-low);
padding-bottom: 0.2rem;
transition: border-color 0.25s;
}
.livecam-card__archive-link:hover { border-color: var(--brand-main-base); }
.livecam-card__archive-link svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
/* ---- Тело «Завершено» = каталожная карточка построенного дома ----
(2026-07-10, 7 — запрос владельца «посмотреть, как сделаны карточки
построенных»): тело — 1:1 живой .product-item со страницы «Построенные
дома» (product-card.css подключён на странице), постер-таймлапс играет
роль image-block. Переход на страницу дома ведёт тело (item-link);
сам таймлапс играет на месте. Виды переключает Tweaks через
[data-house-view] + hidden. Наши имена: только __body--house и
__house-more; всё остальное — боевые имена каталога 1:1. */
.livecam-card__body[data-house-view][hidden] { display: none !important; }
.livecam-card__body--house { padding-top: 0; }
.livecam-card__body--house .item-link { height: auto; }
/* Сетка спеков: в каталоге правая колонка фикс. 12.5rem у правого края —
на широкой livecam-карточке образовывалась пустота посередине.
Владелец 2026-07-10: столбец должен начинаться от середины карточки —
1fr 1fr (скоуп только на это тело, каталог не трогаем). */
.livecam-card__body--house .item-info { grid-template-columns: 1fr 1fr; }
/* 4-в-ряд: докрутка тела под узкую карточку (владелец 2026-07-11):
· цена — как на боевой странице ПОСТРОЕННЫХ: там у .item-price нет своего
font-size, наследуются базовые 1.6rem (наши 2rem — из каталога проектов,
в узкой карточке смотрятся слишком крупно);
· спеки — второй столбец «немного отодвинуть, как был в самом начале»:
возвращаем исходный каталожный грид 1fr 12.5rem (столбец правее середины).
Для 3-в-ряд остаётся утверждённый «от середины» 1fr 1fr (выше).
На ≤992 сетка складывается в 1 колонку — возвращаем поведение базы
(медиа-override НИЖЕ базовых правил, id-специфичность требует свой брейк). */
#lc-main[data-lc-cols="4"] .livecam-card__body--house .item-name .item-price { font-size: 1.6rem; }
#lc-main[data-lc-cols="4"] .livecam-card__body--house .item-info { grid-template-columns: 1fr 12.5rem; }
@media (max-width: 992px) {
#lc-main[data-lc-cols="4"] .livecam-card__body--house .item-name .item-price { font-size: 1.8rem; }
#lc-main[data-lc-cols="4"] .livecam-card__body--house .item-info { grid-template-columns: 1fr 1fr; }
}
/* Срок + дата постройки — пункты 5–6 боевой сетки спеков .item-info
(владелец 2026-07-10: «их просто должно стать 6, по два в ряд, как
предыдущие иконки» — отдельный блок .item-add убран). Шрифт/размер/цвет
наследуются от базового .info-item; у глифов fontello бокс 2.4rem
(глиф 1.8rem) + зазор 0.8rem = текст от 3.2rem — SVG 1.8rem + 1.4rem
даёт ту же линию текста. Иконки — часы/календарь 1:1 со страницы
построенного дома (built-price--icons), цвет глифов --brand-main-mid. */
.product-item .item-info .info-item.livecam-card__house-fact { order: 5; }
.product-item .item-info .info-item.livecam-card__house-fact + .info-item.livecam-card__house-fact { order: 6; }
.livecam-card__house-fact svg {
/* Глифы fontello при font-size 1.8rem рисуются почти во весь кегль,
а у наших SVG внутри viewBox 24 есть поля — при том же размере
иконки 3-го ряда выглядели мельче (владелец 2026-07-10). Компенсируем
размером 2.2rem; сумма с зазором = 3.2rem — текст на одной линии
с верхними рядами (бокс глифа 2.4 + 0.8). */
flex: 0 0 2.2rem;
width: 2.2rem;
height: 2.2rem;
margin-right: 1rem;
color: var(--brand-main-mid);
}
/* строка-переход внизу карточки — по мотивам живого .item-mortgage
(бордер-топ, те же метрики), + фирменная стрелка \e800 */
.livecam-card__house-more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
width: 100%;
margin-top: 2.4rem;
border-top: 0.1rem solid var(--brand-main-low);
padding-top: 1.6rem;
font-size: 1.6rem;
line-height: 110%;
letter-spacing: -0.03em;
color: rgba(55, 61, 66, 0.7); /* приглушённый --brand-main-base @ 0.7 — 1:1 с «Смотреть онлайн-трансляцию» */
}
.livecam-card__house-more .icon-btn_arrow {
font-size: 1.4rem;
line-height: 1;
color: rgba(55, 61, 66, 0.7); /* стрелка того же приглушённого тона, что и текст (владелец 2026-07-10) */
transition: transform 0.3s;
}
.livecam-card__body--house .item-link:hover .icon-btn_arrow { transform: translateX(0.4rem); }
/* Твик «Переход на дом» на карточке (5 видов, data-lc-house-link) УДАЛЁН
2026-07-11 — владелец: «перестанем вести на страницу построенного,
пусть срабатывает так же, как карточка онлайн; это неправильный шаг
был». Тело archived открывает попап 1:1 как live; переход на дом —
CTA попапа (video-lightbox.css). Строка __house-more из тел убрана;
базовые стили .livecam-card__house-more ВЫШЕ оставлены (их наследует
.lc-watch-btn на случай возврата строки). */
/* ============================================================
3a. «ТРИ УРОВНЯ КОНТРОЛЯ КАЧЕСТВА» (НОВОЕ 2026-07-14, наши имена
lc-quality*). Колонки = ЖИВОЙ .stages-list--tagged (stages.css) —
здесь только обвязка: лид под заголовком (метрики 1:1 с
.lc-listing-head__lead) + фото над колонкой. Уголки на фото —
фирменный мотив 1:1 с .video-poster (player.css), но блок статичный:
без play-кнопки и скрима (это не видео — не обещаем клик).
Вид блока ВШИТ «Скобки» (владелец 2026-07-16 «запечатываем»): прочие
9 видов, их разметка/JS/CSS и твики удалены — остался .lc-quality__frames.
============================================================ */
.lc-quality { margin-top: 7rem; }
@media (max-width: 992px) { .lc-quality { margin-top: 4rem; } }
/* Отступ от заголовка блока увеличен (владелец 2026-07-15 «от заголовка
нужно чуть побольше взять»): базовые 3.6rem → 6rem (эхо приёма FAQ-секции). */
.lc-quality .lc-section__head { margin-bottom: 6rem; }
@media (max-width: 992px) { .lc-quality .lc-section__head { margin-bottom: 4rem; } }
/* Скрытые виды: display:grid видов (guide) перебивает UA-правило
атрибута [hidden] → без этого гарда все варианты видны разом. */
.lc-quality [data-quality-variant][hidden] { display: none; }
/* ---- Вид «Скобки» (data-quality-variant="frames") — вертикальный стек
плит в 4 уголках-скобках: фото слева, заголовок + текст справа.
Итерация 2026-07-15 (владелец по инлайн-комменту «попробуем маски на
фото, как в одном из вариантов было, и на светлых подножках»):
подножка = светлая бежевая плита brand-second-base (мотив .choose-type /
.equipment-section__info), фото под фирменной маской video_maskN_beige
(fill = цвет плиты, срез сливается с подножкой; ротация масок 1/2/3 —
1:1 приём вида «Плитки»), аспект кадра 255/180 — родной для маски.
Уголки графитовые brand-main-base — читаются и на бежевом. Верхние два
уголка — ::before/::after, нижние — спаны .corner-bl/.corner-br. ---- */
.lc-quality__frames { display: flex; flex-direction: column; gap: 1.6rem; }
.lc-quality__frame-row { position: relative; display: grid; grid-template-columns: 34rem minmax(0, 1fr); gap: 3.6rem; align-items: center; padding: 2.4rem; background-color: var(--brand-second-base); transition: background-color 0.3s; overflow: hidden; }
.lc-quality__frame-row::before,
.lc-quality__frame-row::after,
.lc-quality__frame-row > .corner-bl,
.lc-quality__frame-row > .corner-br { content: ""; position: absolute; width: 0.8rem; height: 0.8rem; pointer-events: none; }
.lc-quality__frame-row::before { top: 0; left: 0; border-top: 0.1rem solid var(--brand-main-base); border-left: 0.1rem solid var(--brand-main-base); }
.lc-quality__frame-row::after { top: 0; right: 0; border-top: 0.1rem solid var(--brand-main-base); border-right: 0.1rem solid var(--brand-main-base); }
.lc-quality__frame-row > .corner-bl { bottom: 0; left: 0; border-bottom: 0.1rem solid var(--brand-main-base); border-left: 0.1rem solid var(--brand-main-base); }
.lc-quality__frame-row > .corner-br { bottom: 0; right: 0; border-bottom: 0.1rem solid var(--brand-main-base); border-right: 0.1rem solid var(--brand-main-base); }
.lc-quality__frame-photo { position: relative; z-index: 1; margin: 0; overflow: hidden; }
.lc-quality__frame-photo img { display: block; width: 100%; aspect-ratio: 255 / 180; object-fit: cover; object-position: 50% 40%; }
/* маска поверх кадра — оверлей на 1px за края (1:1 боевой приём против
субпиксельных просветов, как в виде «Плитки») */
.lc-quality__frame-photo::after { content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background-repeat: no-repeat; background-position: left top; background-size: cover; pointer-events: none; }
.lc-quality__frame-row:nth-child(1) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask1_beige.svg"); }
.lc-quality__frame-row:nth-child(2) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask2_beige.svg"); }
.lc-quality__frame-row:nth-child(3) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask3_beige.svg"); }
.lc-quality__frame-body b { display: block; margin-bottom: 1.2rem; font-weight: 600; font-size: 2rem; line-height: 100%; letter-spacing: -0.03em; text-transform: uppercase; color: var(--brand-main-base); }
@media (max-width: 992px) { .lc-quality__frame-body b { font-size: 1.8rem; } }
/* Компоновка плиты «Скобок» (твик «Скобки — компоновка», data-frames-body
на .lc-quality__frames): stack (дефолт) — заголовок над текстом /
split (владелец 2026-07-15 «заголовок вверх слева, а текст справа от
него») — внутри плиты второй грид: титул в левой колонке 24rem, текст
справа, оба от верха. ≤992 схлопывается обратно в стек. */
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-row { align-items: start; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body { display: grid; grid-template-columns: 38rem minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body b { margin-bottom: 0; }
@media (max-width: 992px) {
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body { display: block; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body b { margin-bottom: 1.2rem; }
}
/* Ховер «Скобок» — ВШИТ «Зум фото + уголки» (владелец 2026-07-15
«оставляем зум фото + уголки» — твик «Скобки — ховер» и варианты
Фокус/Уголок-стрелка/Статично удалены): фото плавно растёт под
маской (изинг 1:1 ховера blog-card), уголки-скобки «дышат»
0.8→1.6rem (дефолт 0.8rem = 1:1 с боевыми скобками get-section/
link-block; на ховере чуть подрастают, владелец 2026-07-16). Фон плиты не меняем — маска вшита в цвет brand-second-base. */
.lc-quality__frame-photo img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.lc-quality__frame-row::before,
.lc-quality__frame-row::after,
.lc-quality__frame-row > .corner-bl,
.lc-quality__frame-row > .corner-br { transition: width 0.3s, height 0.3s; }
.lc-quality__frame-row:hover .lc-quality__frame-photo img { transform: scale(1.04); }
.lc-quality__frame-row:hover::before,
.lc-quality__frame-row:hover::after,
.lc-quality__frame-row:hover > .corner-bl,
.lc-quality__frame-row:hover > .corner-br { width: 1.6rem; height: 1.6rem; }
/* + Подсветка при наведении (владелец 2026-07-15 «пусть будет светлее,
как подсветка карточек домов в 1 блоке»): та же математика, что у
ховера .product-item (--white-mid поверх плиты): плита плавно светлеет
до color-mix(50% white), маска фото синхронно кроссфейдится в светлую
копию video_maskN_light.svg (fill #f2f0ed = brand-second-base + 50%
белого; сгенерированы из _beige) через figure::before поверх ::after. */
.lc-quality__frame-row:hover { background-color: color-mix(in srgb, var(--brand-second-base) 50%, var(--white-base)); }
.lc-quality__frame-photo::before { content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background-repeat: no-repeat; background-position: left top; background-size: cover; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s; }
.lc-quality__frame-row:nth-child(1) .lc-quality__frame-photo::before { background-image: url("/assets/template/new_design/images/svg/masks/video_mask1_light.svg"); }
.lc-quality__frame-row:nth-child(2) .lc-quality__frame-photo::before { background-image: url("/assets/template/new_design/images/svg/masks/video_mask2_light.svg"); }
.lc-quality__frame-row:nth-child(3) .lc-quality__frame-photo::before { background-image: url("/assets/template/new_design/images/svg/masks/video_mask3_light.svg"); }
.lc-quality__frame-row:hover .lc-quality__frame-photo::before { opacity: 1; }
/* Ховер-маски «Скобок» (fade / scale / wipe / keep + твик «Скобки — маска
на ховере») УДАЛЕНЫ 2026-07-16 — владелец: «эффект квадратики крутой,
оставляем его, остальные убираем». Остался только pixels ниже,
data-frames-mask="pixels" вшит в разметку. */
/* pixels — «Квадратики (расползаются)» — ВШИТ единственным ховер-эффектом
маски «Скобок» (владелец 2026-07-16 «эффект крутой, оставляем, остальные
убираем»). Плашки строит page-local JS страницы из тех ЖЕ координат, что
у video_maskN.svg (сетка 10×10) — в покое картинка 1:1 с маской; на
ховере раскрытой карточки каждый уголок маски уезжает монолитом за свой
край («как текст в Матрице», итерация 2) и режется overflow:hidden.
Итерация 3 (владелец 2026-07-16 «между квадратиками бывает видна щель,
просвечивают на картинке»): клетки кластера больше НЕ двигаются
поодиночке — каждый кластер обёрнут в ОДИН слой .lcq-cluster (inset:0
поверх фото), transform едет только контейнер, клетки внутри неподвижны
→ соседи растрируются одним слоем, субпиксельные швы исчезают.
Дистанция per-кластер (--px-dist от JS: габарит кластера ×10% + запас) —
каждый кластер ровно покидает кадр к концу хода 0.8s. Цвет плашек =
--lcq-plate (ведёт аккордеон: активная бежевая, сжатые светлые). Пауза
0.3s перед разлётом — ждём раскрытия карточки аккордеона.
≤992 кластеры скрыты — остаётся обычная маска (тач, слайдер). */
.lcq-cluster { display: none; }
@media (min-width: 993px) {
.lc-quality__frames[data-frames-mask="pixels"] .lc-quality__frame-photo::before,
.lc-quality__frames[data-frames-mask="pixels"] .lc-quality__frame-photo::after { display: none; }
.lc-quality__frames[data-frames-mask="pixels"] .lcq-cluster {
display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1);
}
.lcq-cluster .lcq-px {
display: block; position: absolute;
width: 10.15%; height: 10.15%;
background-color: var(--lcq-plate, #f2f0ed);
transition: background-color 0.3s;
}
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row { --lcq-plate: #f2f0ed; }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row.active { --lcq-plate: var(--brand-second-base); }
.lc-quality__frames[data-frames-bg="invert"]:not([data-frames-reveal="one"]) .lc-quality__frame-row { --lcq-plate: #f2f0ed; }
.lc-quality__frames[data-frames-bg="invert"]:not([data-frames-reveal="one"]) .lc-quality__frame-row:hover { --lcq-plate: var(--brand-second-base); }
/* разлёт: в аккордеоне — только раскрытая (+пауза 0.3s), вне — любой ховер */
.lc-quality__frames[data-frames-mask="pixels"][data-frames-reveal="one"] .lc-quality__frame-row.active:hover .lcq-cluster,
.lc-quality__frames[data-frames-mask="pixels"]:not([data-frames-reveal="one"]) .lc-quality__frame-row:hover .lcq-cluster {
transform: translate(calc(var(--px-dx, 0) * var(--px-dist, 42%)), calc(var(--px-dy, 0) * var(--px-dist, 42%)));
}
.lc-quality__frames[data-frames-mask="pixels"][data-frames-reveal="one"] .lc-quality__frame-row.active:hover .lcq-cluster {
transition-delay: 0.3s;
}
}
/* + Фоновая фигура-паттерн при наведении (владелец 2026-07-16
«попробуем при наведении фигуру-паттерн, как на первом экране
и в блоке ‒34 нормы’, где фигура вылезает», по дефолту не нужно).
Фигура ‒34 нормы’ (norms_pattern.svg) как маска, тонирована СВЕТЛЫМ
white-base (1:1 с боевым блоком ‒34 нормы’ на главной — светлый паттерн;
владелец 2026-07-16 «светлее и как на главной»): на ховере плита темнеет
до base, светлая фигура читается как на боевом. Выглядывает снизу в ЦЕНТРАЛЬНОЙ области (под коротким заголовком,
между фото слева и текстом справа — владелец 2026-07-16 «не под фоткой,
а в этой области»; row overflow: hidden). Под контентом
(z-index:0), текст/фото выше (z-index:1) и читаемы. opacity 0→0.4 на ховер. */
.lc-quality__frame-deco { position: absolute; z-index: 0; bottom: -4rem; left: 55rem; /* центр фигуры ≈ середина свободной области плиты (визуальный центр ~67rem) */ width: 24.6rem; height: 32.5rem; transform: rotate(-90deg); /* было 90°, владелец 2026-07-16 «развернуть на 180» */ /* повёрнута на 90° и лежит в центральной области, касаясь низа (владелец 2026-07-16 по скрину «лучше повернуть и так разместить»; визуальные габариты после поворота ≈ 32.5×24.6rem) */ background-color: var(--white-base); -webkit-mask-image: url("/assets/template/new_design/images/svg/norms_pattern.svg"); mask-image: url("/assets/template/new_design/images/svg/norms_pattern.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: bottom left; mask-position: bottom left; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
@media (max-width: 992px) { .lc-quality__frame-deco { left: auto; right: -3rem; } }
.lc-quality__frame-row:hover .lc-quality__frame-deco { opacity: 0.75; } /* было 0.5 — владелец 2026-07-16 «фигуру не видно, совсем потерялась» */
.lc-quality__frame-body { position: relative; z-index: 1; }
/* Инверсия фона плиты (владелец 2026-07-16 «дефолт светлее, ховер наоборот
темнее; в твикс, дефолтом инверсию»): data-frames-bg на .lc-quality__frames.
invert (дефолт) — плита светлая #f2f0ed (маска _light в тон, срезы
сливаются), на ховере ПЛАВНО темнеет; normal — прежнее (база #e6e1db,
светлеет на ховере, маска _beige). Ховер-маску на десктопе заменяет вшитый pixels-разлёт,
поэтому на тёмном ховере фото — полный прямоугольник без несовпадения. */
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row { background-color: #f2f0ed; }
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row:hover { background-color: var(--brand-second-base); }
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row:nth-child(1) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask1_light.svg"); }
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row:nth-child(2) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask2_light.svg"); }
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row:nth-child(3) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask3_light.svg"); }
/* + «Без подножки» (эксплорейшн 2026-07-16, ответ на «общий перегруз на
экране»): data-frames-bg="none" — плита прозрачная, остаётся фон страницы
и уголки-скобки; маска фото = _cream (#eeebe5, 1:1 фон страницы — приём
вида «Плитки»); на ховере плита проявляется светлой #f2f0ed (с дефолтной
fade-маской фото раскрывается полным прямоугольником). */
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row { background-color: transparent; }
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row:hover { background-color: #f2f0ed; }
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row:nth-child(1) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask1_cream.svg"); }
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row:nth-child(2) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask2_cream.svg"); }
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row:nth-child(3) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask3_cream.svg"); }
/* + Кнопка-CTA в карточке — итерация 2 (владелец 2026-07-15 «маленькой
кнопкой, без рамки, просто с квадратиком надпись, сразу под текстом
описания»): живая .backcall-link (button.css, шапка: надпись капсом +
жёлтый квадрат со стрелкой, без рамки) в потоке под
текста
(в сплите — колонка текста), проявляется при наведении (место
зарезервировано — высота плиты не прыгает), ведёт на #consultation.
Нижний секционный CTA при видимых «Скобках» скрыт sibling-гардом;
на таче (≤992) кнопка видна всегда. ⚠ Жёлтый квадрат — единственный
акцент экрана (секционный btn-arrow скрыт); на десктопе виден один
(hover), на таче — три сразу. */
.lc-quality__frame-btn { margin-top: 2rem; opacity: 0; transform: translateY(0.6rem); transition: opacity 0.3s, transform 0.3s; }
/* Итерация 3 (владелец 2026-07-15 по скрину): квадрат меньше (4→3.2rem,
метрики btn-arrow--sm), по умолчанию песочный brand-second-mid (пара
base→yellow 1:1 scroll-link), жёлтый ТОЛЬКО по ховеру; бегущее
подчёркивание надписи убрано. */
.lc-quality__frame-btn .icon { width: 3.2rem; height: 3.2rem; font-size: 1.4rem; background-color: var(--brand-second-mid); transition: background-color 0.3s; }
.lc-quality__frame-btn .icon::before { font-size: 1.4rem; width: auto; line-height: 1; display: block; }
.lc-quality__frame-btn:hover .icon { background-color: var(--yellow-base); }
.lc-quality__frame-btn span:not(.icon)::before { display: none; }
.lc-quality__frame-row:hover .lc-quality__frame-btn,
.lc-quality__frame-row:focus-within .lc-quality__frame-btn { opacity: 1; transform: none; }
.lc-quality__frames:not([hidden]) ~ .lc-quality__cta { display: none; }
/* Моб (≤992): смена фона плиты и фоновая фигура-паттерн УБРАНЫ — это
десктопные ховер-приёмы, на тач не работают, а плита на тапе темнела и
маска рассинхронивалась (владелец 2026-07-16 «смену фона убрать, именно
на моб» + «фоновую фигуру убрать, в моб не нужна»). Скоуп по ШИРИНЕ (не
hover:none) — «моб» = узкий экран, включая эмуляцию на десктопе. Рамки
(маска), уголки-скобки и фото остаются. Плита держит цвет покоя режима. */
@media (max-width: 992px) {
.lc-quality__frame-deco { display: none; }
.lc-quality__frame-row:hover .lc-quality__frame-photo img { transform: none; }
.lc-quality__frame-row:hover .lc-quality__frame-photo::before { opacity: 0; }
.lc-quality__frame-row:hover::before,
.lc-quality__frame-row:hover::after,
.lc-quality__frame-row:hover > .corner-bl,
.lc-quality__frame-row:hover > .corner-br { width: 0.8rem; height: 0.8rem; }
.lc-quality__frame-row:hover { background-color: var(--brand-second-base); }
.lc-quality__frames[data-frames-bg="invert"] .lc-quality__frame-row:hover { background-color: #f2f0ed; }
.lc-quality__frames[data-frames-bg="none"] .lc-quality__frame-row:hover { background-color: transparent; }
}
@media (max-width: 992px) {
/* Планшет/мобилка: per-card кнопки НЕТ — работает общая
внизу (владелец 2026-07-16: разная логика десктоп vs тач). */
.lc-quality__frame-btn { display: none; }
}
/* Номера 01/02/03 в «Скобках» УБРАНЫ владельцем 2026-07-15 («цифры на
карточках всё же давай уберем» — появились с его редакцией текста,
убраны тем же днём; CSS .lc-quality__frame-num удалён). */
/* Сплит-раскладка: титул в левой колонке, текст в правой; кнопка ПРИКЛЕЕНА
к низу карточки ПОД ТЕКСТОМ (владелец 2026-07-15 «приклеим к нижней
границе» + рисунок «кнопку сюда вниз»): тело растянуто на высоту плиты
(align-self: stretch), внутри ряд 1fr (титул + текст сверху) + нижний
auto-ряд с кнопкой в колонке текста; фото остаётся центром по высоте.
На ≤992 и в стек-компоновке — в потоке под текстом. */
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body { align-self: stretch; grid-template-rows: 1fr auto; align-items: start; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body b { grid-column: 1; grid-row: 1; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-body p { grid-column: 2; grid-row: 1; }
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-btn { grid-column: 2; grid-row: 2; justify-self: start; align-self: end; margin: 2rem 0 0; }
@media (max-width: 992px) {
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-btn { margin-top: 2rem; }
}
.lc-quality__frame-body p { margin: 0; max-width: 68.4ch; font-size: var(--default-fz); line-height: 1.1; color: var(--txt-main); text-wrap: pretty; } /* межстрочный 1.1 = 110% — 1:1 с боевым body-блоком «34 нормы»/info-section на главной (похожее расположение загол.+текст; было 1.3, владелец 2026-07-16 «там меньше») */
/* Подача текста «Скобок» — 3 варианта «разгрузки полотна» (владелец
2026-07-16 «не нравится полотно текста, придумай 3 варианта»). Твик
data-frames-text на .lc-quality__frames. flow (дефолт) — сплошной абзац.
Лид-предложение вынесено в (в flow не выделен),
а короткие тезисы лежат в скрытом —
переключаются одним атрибутом, копия не переписывается на бою. */
.lc-quality__frame-points { display: none; margin: 0; padding: 0; list-style: none; }
/* lead — первое предложение крупнее и темнее, детали — отдельным блоком
ниже: даёт точку входа, стена распадается на «главное + подробности». */
.lc-quality__frames[data-frames-text="lead"] .frame-lead { display: block; margin-bottom: 1rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(55, 61, 66, 0.85); text-wrap: balance; } /* чуть светлее base (#373d42) — как выделенный текст в боевых body-блоках: лид мягче заголовка, но темнее обычного текста 0.7 (владелец 2026-07-16) */
/* airy — узкая колонка + больше воздуха: блок читается как тонкий столбец,
а не плита (мера ~48ch, интерлиньяж 1.5). */
.lc-quality__frames[data-frames-text="airy"] .lc-quality__frame-body p { max-width: 48ch; line-height: 1.5; }
/* bullets — сплошной абзац прячем, показываем тезисы с фирменной
скос-чёрточкой (приём point-item/stages): скан вместо чтения. */
.lc-quality__frames[data-frames-text="bullets"] .lc-quality__frame-body p { display: none; }
.lc-quality__frames[data-frames-text="bullets"] .lc-quality__frame-points { display: grid; gap: 1rem; max-width: 68.4ch; }
.lc-quality__frames[data-frames-text="bullets"] .lc-quality__frame-points li { position: relative; padding-left: 2.4rem; font-size: var(--default-fz); line-height: 1.3; color: var(--txt-main); }
.lc-quality__frames[data-frames-text="bullets"] .lc-quality__frame-points li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 1.4rem; height: 0.2rem; background-color: var(--brand-main-base); transform: skewX(-20deg); }
/* В сплит-компоновке тезисы занимают ту же ячейку, что и абзац (col2/row1) */
.lc-quality__frames[data-frames-body="split"] .lc-quality__frame-points { grid-column: 2; grid-row: 1; }
/* Тонкая настройка правой колонки сплита (владелец 2026-07-16 «заголовок
слева, текст справа — нравится, но текст хочется поджать / сдвинуть
правее»). Твик data-frames-split на .lc-quality__frames:
std — как сейчас (загол. 38rem, текст 1fr, мера 68ch);
tight — заголовок 44rem → текст начинается правее, мера уже (52ch);
right — текст прижат к правому краю колонки (мера 52ch, justify end);
tight-right— и поджать, и прижать вправо (загол. 46rem, мера 46ch, end). */
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight"] .lc-quality__frame-body,
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-body { grid-template-columns: 44rem minmax(0, 1fr); }
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-body { grid-template-columns: 46rem minmax(0, 1fr); }
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight"] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight"] .lc-quality__frame-points,
.lc-quality__frames[data-frames-body="split"][data-frames-split="right"] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split="right"] .lc-quality__frame-points { max-width: 52ch; }
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-points { max-width: 46ch; }
.lc-quality__frames[data-frames-body="split"][data-frames-split="right"] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split="right"] .lc-quality__frame-points,
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split="tight-right"] .lc-quality__frame-points { justify-self: end; }
@media (max-width: 992px) {
.lc-quality__frames[data-frames-body="split"][data-frames-split] .lc-quality__frame-body p,
.lc-quality__frames[data-frames-body="split"][data-frames-split] .lc-quality__frame-points { max-width: 100%; justify-self: stretch; }
}
/* Раскрытие «Скобок» — итерация 2 (2026-07-16, владелец по скрину блока
«Решения» с главной: «интересное решение, но 1 карточка должна быть
всегда активна, чтобы не было провиса; текст справа тут больше нравится;
фигуру не видно, совсем потерялась; может их сжимать, когда без текста —
какие-то пустые»). Твик data-frames-reveal: one (дефолт-проба) / all.
Пробы details/titles/compact УДАЛЕНЫ — их заменил аккордеон. Детали
абзаца — (пара к .frame-lead).
one — «одна всегда раскрыта»: первая плита .active с загрузки, mouseenter
переносит активность (page-local JS, 1:1 логика js-lc-solutions).
Активная — фото 34rem, тёмная подножка brand-second-base (маска _beige),
детали видны, фигура-паттерн видна всегда; неактивные СЖАТЫ: фото 14rem,
светлая плита #f2f0ed (маска _light), заголовок + лид по центру, деталей
нет. Подача текста справа — 1:1 .item-descr «Решений»/info-accordion:
лид = h4 (1.8rem, тёмный base), детали = descr-txt (1.8rem,
brand-main-mid, отступ сверху 1.6rem). Цвета плит режим ведёт сам,
поверх data-frames-bg. ≤992 — аккордеон выключен, текст виден весь. */
@media (min-width: 993px) {
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row { background-color: #f2f0ed; transition: background-color 0.3s; }
/* Сетка И ПОЗИЦИЯ ТЕКСТА НЕ МЕНЯЮТСЯ (владелец 2026-07-16 «не будем мотать
лид туда-сюда, пусть остаётся на своём месте, не съезжает влево»):
колонка фото остаётся 34rem и выравнивание от верха в ОБОИХ состояниях —
сжимается только само фото внутри колонки (высота плиты падает за ним),
заголовок и лид стоят на тех же координатах, что и в раскрытой. */
/* Заголовок ДВИГАЕТСЯ вслед за фото, лид — НЕТ (владелец 2026-07-16 «вот это
[заголовок] пусть двигается» после «не будем мотать лид»): в сжатой
плите колонка фото 34→14rem, а колонка заголовка внутри тела
компенсирует разницу 46→66rem (под дефолтный split=tight-right 46rem) —
заголовок съезжает влево к малому фото, лид остаётся на своих
координатах. Сжимаются сами грид-колонки (фото следует за треком). */
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row { grid-template-columns: 34rem minmax(0, 1fr); transition: background-color 0.3s, grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:not(.active) { grid-template-columns: 14rem minmax(0, 1fr); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-body { transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:not(.active) .lc-quality__frame-body { grid-template-columns: 66rem minmax(0, 1fr); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row.active { background-color: var(--brand-second-base); }
/* неактивная: деталей нет — плита сжимается по высоте */
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:not(.active) .frame-rest,
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:not(.active) .lc-quality__frame-points { display: none; }
/* подача текста справа — 1:1 item-descr «Решений» */
.lc-quality__frames[data-frames-reveal="one"] .frame-lead { display: block; margin-bottom: 0; font-size: 1.8rem; line-height: 110%; letter-spacing: -0.04em; font-weight: 600; color: var(--brand-main-base); text-wrap: balance; }
.lc-quality__frames[data-frames-reveal="one"] .frame-rest { display: block; padding-top: 1.6rem; font-size: 1.8rem; line-height: 110%; letter-spacing: -0.04em; color: var(--brand-main-mid); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row.active .frame-rest { animation: lcq-rest-in 0.45s ease; }
/* маски: неактивные светлые, активная бежевая в цвет тёмной плиты */
/* маски БЕЗ подмены картинки (владелец 2026-07-16, баг первого ховера:
_beige догружалась на лету — фото мигало полным, потом маска, потом
анимация): ::after всегда _beige (в цвет тёмной активной плиты),
у неактивных поверх неё ::before _light (opacity 1, картинка из базовых
правил) — переключение только opacity, обе маски загружены с первого
рендера. */
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:nth-child(1) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask1_beige.svg"); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:nth-child(2) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask2_beige.svg"); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:nth-child(3) .lc-quality__frame-photo::after { background-image: url("/assets/template/new_design/images/svg/masks/video_mask3_beige.svg"); }
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row:not(.active) .lc-quality__frame-photo::before { opacity: 1; }
/* фигура-паттерн: у активной видна ВСЕГДА и плотнее («фигуру не видно») */
.lc-quality__frames[data-frames-reveal="one"] .lc-quality__frame-row.active .lc-quality__frame-deco { opacity: 0.85; }
/* Подача деталей активной плиты — твик data-frames-detail (владелец
2026-07-16 «текст по-прежнему грузновато — подумать, как отобразить»),
работает в режиме one: para — абзац (как было); points (дефолт-проба) —
вместо абзаца готовые короткие тезисы ul.lc-quality__frame-points со
скос-чёрточками (приём point-item/stages — скан вместо чтения); small —
абзац мельче и воздушнее (1.6rem/135%, мера 46ch). В points тезисы идут
ВТОРЫМ рядом тела под лидом (лид внутри p — в одной ячейке с ul они
бы наложились). */
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="points"] .lc-quality__frame-row.active .frame-rest { display: none; }
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="points"] .lc-quality__frame-row.active .lc-quality__frame-body { grid-template-rows: auto 1fr; }
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="points"] .lc-quality__frame-row.active .lc-quality__frame-points { display: grid; grid-column: 2; grid-row: 2; align-self: start; gap: 1.2rem; padding-top: 1.6rem; max-width: 52ch; animation: lcq-rest-in 0.45s ease; }
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="points"] .lc-quality__frame-points li { position: relative; padding-left: 2.4rem; font-size: 1.6rem; line-height: 120%; letter-spacing: -0.04em; color: var(--brand-main-mid); }
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="points"] .lc-quality__frame-points li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 1.4rem; height: 0.2rem; background-color: var(--brand-main-base); transform: skewX(-20deg); }
.lc-quality__frames[data-frames-reveal="one"][data-frames-detail="small"] .frame-rest { font-size: 1.6rem; line-height: 135%; max-width: 46ch; }
}
@keyframes lcq-rest-in { from { opacity: 0; transform: translateY(0.6rem); } }
@media (max-width: 992px) {
.lc-quality__frames[data-frames-text="airy"] .lc-quality__frame-body p { max-width: 100%; }
}
@media (max-width: 992px) {
/* Планшет/мобилка — КАК БЛОК «34 НОРМЫ» (владелец 2026-07-16 «в планшетной
и моб версии нужно сделать как блок 34 нормы»): горизонтальная
слайдер-лента со снапом 1:1 приём .home-solutions__content ≤92:
трек гасит паддинг контейнера отрицательным margin, слайды
calc(100% − 5rem) / ≤575 — min(32rem, 100% − 4rem), нативная прокрутка
без скроллбара. Карточка: фото слева 20rem + заголовок/текст стопкой
(split-тело уже схлопывается в блок ниже); ≤575 — фото сверху.
Прежний вертикальный стек удалён. */
/* scroll-padding-left = паддинг контейнера: снап-порт начинается ПОСЛЕ
левой отбивки, иначе mandatory-snap подтягивал первый слайд под самый
край вьюпорта, съедая гуттер (владелец 2026-07-16 «первая карточка
уходит в левый край»). Теперь первый слайд встаёт вровень с сеткой. */
.lc-quality__frames { flex-direction: row; column-gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--container-padding); -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(var(--container-padding) * -1); margin-right: calc(var(--container-padding) * -1); padding: 0 var(--container-padding); }
.lc-quality__frames::-webkit-scrollbar { display: none; }
/* Мобильная разгрузка (владелец 2026-07-16 «в моб перегруз», затем
«текст убирать нельзя»): весь текст остаётся, но легче — подача
«воздушного» десктопного варианта: лид тёмный 600, детали серым
brand-main-mid с интерлиньяжем 135% и отступом (вместо слитного
тёмного полотна). */
.lc-quality__frames .frame-lead { display: block; margin-bottom: 0; font-weight: 600; color: var(--brand-main-base); }
.lc-quality__frames .frame-rest { display: block; padding-top: 1.2rem; line-height: 135%; letter-spacing: -0.04em; color: var(--brand-main-mid); }
.lc-quality__frame-row { flex: 0 0 calc(100% - 5rem); width: calc(100% - 5rem); scroll-snap-align: start; grid-template-columns: 20rem minmax(0, 1fr); gap: 2.4rem; padding: 2rem; align-items: start; }
/* Уголки-скобки на планшете мельче — на этой ширине базовые 1.6rem
смотрелись «прожатыми»/увеличенными (владелец 2026-07-16). */
.lc-quality__frame-row::before,
.lc-quality__frame-row::after,
.lc-quality__frame-row > .corner-bl,
.lc-quality__frame-row > .corner-br { width: 1.1rem; height: 1.1rem; }
.lc-quality__frame-row:hover::before,
.lc-quality__frame-row:hover::after,
.lc-quality__frame-row:hover > .corner-bl,
.lc-quality__frame-row:hover > .corner-br { width: 1.8rem; height: 1.8rem; }
}
@media (max-width: 575px) {
/* Телефон: слайд 32rem, фото над текстом (1:1 слайды «34 норм» ≤575). */
.lc-quality__frame-row { flex: 0 0 min(32rem, calc(100% - 4rem)); width: min(32rem, calc(100% - 4rem)); grid-template-columns: 1fr; gap: 2rem; }
}
/* Кнопка «Скобок» — РАЗНАЯ логика (владелец 2026-07-16):
десктоп — per-card .lc-quality__frame-btn под текстом по hover,
общая нижняя СКРЫТА; планшет/мобилка — наоборот. С 2026-07-16 кнопка
СНАРУЖИ контейнера (на ≤92 он слайдер) — селекторы соседние (+),
гард :not([hidden]) прячет кнопку вместе со скрытым видом «Скобки». */
.lc-quality__frames-cta { display: none; }
@media (max-width: 992px) { .lc-quality__frames:not([hidden]) + .lc-quality__frames-cta { display: flex; justify-content: flex-end; margin-top: 3.6rem; } }
/* Узкий экран: подпись длинная — даём ей сжиматься/переноситься, стрелка
держит свой квадрат (владелец 2026-07-16 «стрелка на кнопке не вмещается»;
приём 1:1 btn-row «34 норм» ≤575). */
@media (max-width: 992px) {
.lc-quality__frames-cta .btn-txt { flex: 1 1 auto; min-width: 0; white-space: normal; }
.lc-quality__frames-cta .icon-btn_arrow { flex: 0 0 auto; }
}
/* Телефон: на кнопке остаётся «Выставочные дома» без слова «Посетить»
(владелец 2026-07-16) — короче и не толкает стрелку на вторую строку. */
@media (max-width: 575px) { .lc-quality__frames-cta .lc-cta-visit { display: none; } }
/* Кнопка «Скобок» — твик data-frames-btn (владелец 2026-07-16 «по умолчанию
без per-card кнопки, как в моб/планшете — общая кнопка внизу; per-card
вынести в твикс»). bottom (дефолт) — на ВСЕХ ширинах общая кнопка внизу,
per-card скрыта; cards — на десктопе per-card по ховеру, внизу скрыта
(прежнее поведение). */
.lc-quality__frames[data-frames-btn="bottom"] .lc-quality__frame-btn { display: none; }
.lc-quality__frames[data-frames-btn="bottom"]:not([hidden]) + .lc-quality__frames-cta { display: flex; justify-content: flex-end; margin-top: 3.6rem; }
/* CTA уровня 03 «Смотреть отзывы на Яндекс.Картах» (владелец 2026-07-14).
Секционная кнопка ПОД блоком; при виде «Скобки» скрыта своим гардом
(.lc-quality__frames ~ .lc-quality__cta) в пользу .lc-quality__frames-cta. */
.lc-quality__cta { margin-top: 4rem; display: flex; justify-content: flex-end; }
@media (max-width: 575px) { .lc-quality__cta { margin-top: 2.8rem; } }
/* ============================================================
4. СЕКЦИЯ «СТРОИМ ОТКРЫТО» — ВЫЧИЩЕНА владельцем 2026-07-16
(была hidden с 2026-07-14, контент так и не пришёл; разметка
удалена из stroyka-onlayn.html, CSS .lc-about*/.lc-trust* снят).
============================================================ */
/* ============================================================
5. FAQ-мини «Коротко о трансляциях» — 4 варианта в стиле сайта
----
2026-07-10 (4): «3 колонки» забракованы («далеко от дизайна»),
CSS удалён. Итерация 2 (2026-07-10, 5): владелец оставил
«Справочник», «Открытый список»/«Тезисы» удалены (и их
оверрайды тоже), взамен 3 новых. Все 4 — на ЖИВЫХ компонентах,
переключение в Tweaks («FAQ — вид») по [data-faq-variant] + hidden:
accordion (дефолт) — живой FAQ-аккордеон тип 1 (accordion.css):
рамка .faq-section__content, номерные плашки, тоггл-срез;
логика — делегированный js-faq-link (ui-interactions.js)
panels — живой аккордеон тип 2 (use-accordion.css): белые
панели, активная бежевая, одна открыта за раз (делегировано);
вместо тяжёлого use-content — простой
(оверрайд ниже)
steps — живой .benefits-list 1:1 (point-item.css, «Ипотека без
риска»): вопрос над «ступенькой», ответ справа; всё видно (GEO)
help — живой .link-block 1:1 (link-block.css): три плашки
в уголках-скобках, hover/тап раскрывает (js-help-block);
в третьей — живой .consult-btn
Ниже ТОЛЬКО скоуп-оверрайды; сами компоненты — accordion.css /
use-accordion.css / point-item.css / link-block.css (подключены
на странице). Наши имена: только .lc-faq__help и [data-faq-variant].
============================================================ */
/* hidden-переключение вариантов не должно перебиваться display-правилами */
.lc-faq [data-faq-variant][hidden] { display: none !important; }
/* ---- БАЗА «ступенек» (.benefits-list): линия под вопросом и скошенные засечки
Комментарий выше обещает, что сам компонент придёт из point-item.css. На
стенде так и было, на боевом отдельных компонентных файлов нет: всё лежит
в общем бандле, и там эти правила объявлены ТОЛЬКО под чужими корнями —
`.mortgage-section .benefits-list` и `.mortgage-main__content .left-side
.benefits-list`. До нашей секции они не достают, поэтому на боевом вопросы
шли без линии (владелец 2026-08-05: «О ТРАНСЛЯЦИЯХ — там нет линий»).
Тот же класс дефекта, что утилита `.chamfered` 04.08.
Значения 1:1 с бандлом, включая цвет #afb1b0 и брейкпоинты 992/575.
Специфичность намеренно низкая (.lc-faq + класс), чтобы твики раскладки
ниже по файлу продолжали перебивать эту базу. */
.lc-faq .benefits-list {
display: flex;
flex-direction: column;
width: 100%;
}
.lc-faq .benefits-item { padding-left: 0.8rem; }
.lc-faq .item-title {
display: block;
width: 100%;
position: relative;
margin: 0;
padding: 0 0 0.8rem;
font-size: 2rem;
line-height: 100%;
font-weight: 600;
letter-spacing: -0.04em;
text-transform: uppercase;
border-bottom: 0.1rem solid #afb1b0;
color: var(--brand-main-base);
}
.lc-faq .item-title::before {
content: "";
display: block;
width: 1.3rem;
height: 1.3rem;
position: absolute;
bottom: -1.3rem;
left: -0.4rem;
border-left: 0.1rem solid #afb1b0;
transform: skewX(-32deg);
pointer-events: none;
}
.lc-faq .item-descr {
position: relative;
padding: 0.8rem 0 0.7rem 2.3rem;
max-width: 55%;
margin: 0 0 0 auto;
font-size: 1.8rem;
line-height: 100%;
letter-spacing: -0.04em;
}
.lc-faq .item-descr::before {
content: "";
display: block;
width: 1.3rem;
height: 1.3rem;
position: absolute;
top: -0.1rem;
left: 0;
border-left: 0.1rem solid #afb1b0;
transform: skewX(-32deg);
pointer-events: none;
}
/* Ответы у нас длиннее одной строки, а у компонента line-height 100% — на
ипотеке ответ умещается в строку, у нас переносится и строки слипаются.
Обнуление margin — как в point-item.css на стенде. */
.lc-faq .item-descr p { margin: 0; line-height: 130%; }
@media (max-width: 992px) {
.lc-faq .item-title { font-size: 1.8rem; }
.lc-faq .item-descr { max-width: 69%; font-size: 1.6rem; padding: 0.8rem 0 0.7rem 2.2rem; }
}
@media (max-width: 575px) {
.lc-faq .item-title { font-size: 1.6rem; }
.lc-faq .item-descr { max-width: 100%; padding: 0.8rem 0 2.3rem 4.8rem; }
.lc-faq .item-descr::before { display: none; }
}
/* ---- Вариант «Панели» (тип 2): короткий ответ-абзац без use-content
Типографика = живой .descr-block (1.8rem / 130% / -0.04em / mid). */
.lc-faq [data-faq-variant="panels"] .item-descr p {
margin: 2rem 0 0;
max-width: 82rem;
font-size: 1.8rem;
line-height: 130%;
letter-spacing: -0.04em;
color: var(--brand-main-mid);
}
@media (max-width: 992px) {
.lc-faq [data-faq-variant="panels"] .item-descr p { font-size: 1.6rem; }
}
/* ---- Вариант «Ступени»: композиция через data-steps-comp ----
media (дефолт, владелец 2026-07-14) — фигура/фото слева + поджатый
список справа (список НЕ во всю ширину). Прежний «left»
(список 92.4rem во всю ширину) удалён — владелец «раскатано
на всю ширину, должно быть поджато»
help — список слева + живой .link-block «Остались вопросы?» справа
cols — тезисы в 2 колонки во всю ширину контейнера */
.lc-faq__steps {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4.8rem;
}
/* Плашка «Остались вопросы?» видна только в композиции help;
медиа-фигура — только в композиции media */
.lc-faq__steps .lc-faq__steps-help { display: none; }
.lc-faq__steps .lc-faq__steps-media { display: none; }
/* media (владелец 2026-07-14 «развить ступени»): фото/фигура слева +
список справа. Засечки и текст описания сдвинуты правее и разведены
по вертикали, чтобы заголовок не слипался с текстом. */
.lc-faq__steps[data-steps-comp="media"] {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 10rem;
}
.lc-faq__steps[data-steps-comp="media"] .lc-faq__steps-media {
display: block;
position: relative;
flex: 1 1 auto;
align-self: stretch;
min-height: 34rem;
overflow: hidden;
background-color: #000;
/* фирменная угловатая маска (1:1 с get-section .get-el) */
-webkit-mask-image: url("/assets/template/new_design/images/svg/masks/big_video.svg");
mask-image: url("/assets/template/new_design/images/svg/masks/big_video.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
}
/* Короткое ускоренное видео Дбруса под маской (mask на .lc-faq__steps-media
выше).