/* ═══════════════════════════════════════════════════════════════════════════ v51-sections.css · главная 5.1 ниже первого экрана + подвал 5.1 craftsman-5da246 · 28.09.2026 · закон — _pipeline/specs/VSPEC-5.1.md §Секция 0, 2–10, §1.5–1.6 Грузится после v51-tokens.css и v51-home.css (рама и первый экран — перенос стенда A). Сетка и шкала — только токены 5.1: модуль --m (52 на 1440 · 26 на 390 · 64 на 2560), 12 колонок по 2 модуля (шаг 104), кегли --t-1…--t-7, кнопка --t-btn 19 px вне шкалы. Колонка N на ≥ 48rem = grid-column на .v51-grid; вертикальные отступы секций кратны --m. Язык D4 не меняется: один акцент #FF4D12 (действие), остывший #7A3418 (сделано), срез угла --chamfer, теней ноль, Unbounded 700 / Inter Tight 400 / Sofia Sans XC 900. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · ОБЩЕЕ ДЛЯ СЕКЦИЙ 5.1 ────────────────────────────────────────────── */ /* Отступ секции — 2 модуля сверху и снизу (104 на 1440, 52 на 390): вертикальный ритм кратен модулю (F-18). */ html[data-v51] .sec { padding-block: calc(2 * var(--m)); } /* Маркировочная лента T2+ (.sec::before, диагональ акцентом) в 5.1 не рисуется: акцент занят действием (§1.6, X4), а границу полотен даёт смена земли — три полотна и так различаются на кадре. */ html[data-v51] .sec::before { content: none; } /* Землю секции задаёт только полотно (.sec.sec--*, identity-v5.css:492-509). Своих правил фона здесь нет: первая редакция ставила «.sec:nth-of-type(odd) { background: none }» — специфичность 0,3,1 перебила .sec.sec--svet (0,3,0), и светлое полотно ушло в тёмное с тёмным текстом (кадр Г2, 15:03). */ /* заголовок секции: h2 --t-5 (45 / 25,5), капс Unbounded; межстрочный 1.1 — как у H1 (крышка «Й») */ .v51-h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-5); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; color: var(--fg); } .v51-lead { margin: 0; font-size: var(--t-3); line-height: 1.3; color: var(--fg2); text-wrap: pretty; } .v51-p { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); } /* ссылка-действие в тексте: кромка акцентом, не краска (X4) */ .v51-go { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-2); color: var(--fg); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 5px; } .v51-go:hover { text-decoration-color: var(--fg); } /* висячий маршрут (страница — следующей волной): без кромки действия, приглушённо — перехода нет, и это видно */ span.v51-go { text-decoration: none; color: var(--fg3); } /* шильдик ПРАВДЫ на светлой земле (§Секция 2): светлая плашка --bg2, кромка --fg */ .sec--svet .v51-plate { background: var(--bg2); color: var(--fg2); } .sec--svet .v51-plate > span:first-child { color: var(--fg); } /* X5 · дочитывание: заголовки 5.1 и реплика Михаила (.mg) открываются клипом слева направо ОДИН РАЗ, когда входят в экран — слово Серга 29.09 01:38 «надо просто сделать ревил один раз и всё». Было: clip-path по --p прокрутки — остановишь прокрутку, и заголовок стоит разрезанным посреди слова (прибор clip52: главная 4 · 2 · 4 на 1440 · 390 · 360). Класс v51-reveal у и .is-read у узла ставит v51-home.js: без скрипта клипа нет вовсе. .mg перекрывает identity-v5.css:412 (общий с 4.0, не правится). */ html.p.v51-reveal .v51-h2[data-p="in"], html.p.v51-reveal .v51-lead[data-p="in"], html.p.v51-reveal[data-v51] .mg[data-p="in"] { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.2, .7, .2, 1); } html.p.v51-reveal .v51-h2[data-p="in"].is-read, html.p.v51-reveal .v51-lead[data-p="in"].is-read, html.p.v51-reveal[data-v51] .mg[data-p="in"].is-read { clip-path: inset(0 0 0 0); } html.p[data-v51]:not(.v51-reveal) .mg[data-p="in"] { clip-path: none; } /* без скрипта главной (внутренние) — реплика целиком */ /* ── Г2 · «ЛИЦО» (§Секция 2) · полотно свет ────────────────────────────── 1440: кадр 4:3 в колонках 1–6 (608 × 456), колонка 8–12 растянута на высоту кадра: имя — на верхней кромке кадра, реплика — посередине, действия — на нижней кромке. Путь: кадр → имя → реплика → действия. */ .v51-litso__in { align-items: stretch; } .v51-litso__f { grid-column: 1 / span 6; position: relative; display: block; aspect-ratio: 4 / 3; overflow: clip; margin: 0; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .2s ease; } .v51-litso__f img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real); } .v51-litso__f:hover { outline-color: var(--fg); } .v51-litso__f:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .v51-litso__plate { position: absolute; left: 0; bottom: 0; } .v51-litso__t { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: var(--m); } .v51-litso__who { display: grid; justify-items: start; gap: 16px; } .v51-litso__q { margin: 0; max-width: none; gap: 16px; } .v51-litso__q .mg__t { margin: 0; font-size: var(--t-3); line-height: 1.3; color: var(--fg); text-wrap: balance; } .v51-litso__ask { color: var(--fg2); } .v51-litso__go { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 0; } html[data-faces="off"] .v51-litso__t { grid-column: 1 / span 8; gap: var(--m); } /* ── КЛАСС ВИЗУАЛИЗАЦИЯ (§1.6): срез угла --chamfer + скобки 2 px --acc-cold по двум верхним углам + штамп ── Различие читается формой без подписи: прямой угол — правда, волосяная рамка — чертёж, срез со скобками — визуализация. */ .v51-vis { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); } .v51-vis::before, .v51-vis::after { content: ""; position: absolute; z-index: 3; top: 10px; width: 18px; height: 18px; border: 2px solid var(--acc-cold); pointer-events: none; } .v51-vis::before { left: 10px; border-right: 0; border-bottom: 0; } .v51-vis::after { right: 10px; border-left: 0; border-bottom: 0; } .v51-vis img, .v51-vis video { filter: var(--grade-vis); } .v51-stamp { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 5px 9px 6px; background: rgba(14,15,17,.92); border-left: 3px solid var(--acc-cold); color: var(--fg); font-size: var(--t-1); pointer-events: none; } /* ── Г3 · «РАБОТЫ» (§Секция 3) · полотно воздух ───────────────────────── Строка заголовка на сетке: H2 1–6 · справа 9–12 счётчик, стрелки, «11 кадров из 141» и «Все работы». Лента: первая карточка на линии колонки 1, лента уходит в правое поле до края экрана (излом «вынос»); карточка 400 × 533 = 4 колонки; на 390 — 278 px и край следующей 70 px (G-works-peek 60–80). */ .v51-works__hd { align-items: end; } .v51-works__h { grid-column: 1 / span 6; } .v51-works__meta { grid-column: 7 / span 6; display: flex; align-items: center; justify-content: flex-end; gap: 0 26px; } .v51-works__counter { margin: 0; font-size: var(--t-3); line-height: 1; letter-spacing: .04em; color: var(--fg); font-variant-numeric: tabular-nums; } .v51-works__counter span { color: var(--fg); } .v51-works__arrows { display: flex; gap: 8px; } .v51-works__arr { appearance: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer; background: none; border: 1px solid var(--line2); color: var(--fg); transition: border-color .2s ease; } .v51-works__arr svg { width: 20px; height: 20px; } .v51-works__arr:hover:not(:disabled) { border-color: var(--fg); } .v51-works__arr:disabled { color: var(--fg3); border-color: var(--line); cursor: default; } .v51-works__arr:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .v51-works__all { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; margin: 0; color: var(--fg3); } .v51-works__counter { order: -1; } .v51-works__arrows { order: 2; } .v51-works__all .v51-go { font-size: var(--t-2); text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-weight: 400; } .v51-works__track { --left: max(var(--gutter), (100% - var(--content)) / 2); display: flex; gap: var(--col-gap); margin: var(--m) 0 0; padding: 0 0 0 var(--left); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--left); scrollbar-width: none; overscroll-behavior-x: contain; } .v51-works__track::-webkit-scrollbar { display: none; } .v51-works__track:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; } /* хвост ленты: последняя карточка доезжает до правого края контейнера (IA-NAV добавка 2, 29.09: было max(1px, 100% − left − 400 − gap) = пустое поле ≈ 830 px на 1440); хвост = поле контейнера */ .v51-works__track::after { content: ""; flex: none; width: max(1px, calc(var(--left) - var(--col-gap))); } .v51-work { flex: none; width: 400px; scroll-snap-align: start; margin: 0; display: grid; gap: 12px; align-content: start; } .v51-work__open { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: var(--bg2); cursor: zoom-in; } .v51-work__open:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .v51-work__f { display: block; aspect-ratio: 3 / 4; overflow: clip; } .v51-work__f img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: var(--grade-real); } /* R-35: кадр вскрывается из левого нижнего угла той же --p (p.js), без второго слушателя прокрутки */ html.p .v51-work[data-p="in"] .v51-work__f { clip-path: inset(calc((1 - var(--p)) * 100%) calc((1 - var(--p)) * 100%) 0 0); } .v51-work__plate { justify-self: start; transition: color .2s ease; } /* круг 3 (суд F02, F06): вид работы — то, чем кадры отличаются, — строкой ступенью текста под шильдиком, а не третьей ячейкой капса 13 px; шильдик держит класс и год (§1.6), вид работы — имя кадра */ .v51-work__name { margin: -2px 0 0; font-size: var(--t-2); line-height: 1.3; color: var(--fg); } .v51-work__name::first-letter { text-transform: uppercase; } .v51-work:hover .v51-work__plate, .v51-work:focus-within .v51-work__plate { color: var(--fg); } .v51-work:hover .v51-work__plate > span, .v51-work:focus-within .v51-work__plate > span { color: var(--fg); } /* шторка «до / после» — механика .h4-shut боя своими правилами (сигнатура №2 закона: 16:10 / 4:5, старт 38 %, рукоять 44, без автоплея). Круг 3 (LATER-09): стоит в Г5 «Куда ведёт» во всю ширину модуля — из ленты «Работ» ушла (там только фото объектов); метка «Визуализация» одна — в подписи под шторкой; на половинах — «до» и «после»; класс держит срез угла. */ .v51-cmp-row { margin-top: calc(2 * var(--m)); row-gap: 16px; } .v51-cmp { grid-column: 1 / -1; margin: 0; max-width: 1232px; } .v51-cmp__st { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--bg2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); } .v51-cmp__p { position: absolute; inset: 0; } .v51-cmp__p img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; filter: var(--grade-vis); } .v51-cmp__p--po { clip-path: inset(0 0 0 var(--x, 38%)); } .v51-cmp__lb { position: absolute; z-index: 3; bottom: 16px; padding: 4px 8px; background: rgba(14,15,17,.92); color: var(--fg); } .v51-cmp__p--do .v51-cmp__lb { left: 16px; } .v51-cmp__p--po .v51-cmp__lb { right: 16px; } .v51-cmp__r { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--x, 38%); width: 2px; margin-left: -1px; background: var(--fg); pointer-events: none; } .v51-cmp__r::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--bg); border: 2px solid var(--fg); border-radius: 50%; } .v51-cmp input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; opacity: 0; } .v51-cmp input:focus-visible + * , .v51-cmp__st:focus-within { outline: 2px solid var(--acc); outline-offset: 3px; } .v51-cmp__cap { grid-column: 1 / -1; max-width: 1232px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 26px; } .v51-cmp__hint { margin: 0; padding-left: 26px; position: relative; color: var(--fg3); } .v51-cmp__hint::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 2px; background: var(--fg3); } /* просмотрщик: во весь экран, без анимации масштаба */ .v51-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); } .v51-viewer::backdrop { background: rgba(14,15,17,.96); } .v51-viewer__in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 16px var(--gutter) 26px; gap: 16px; touch-action: pan-y; } .v51-viewer__counter { margin: 0; align-self: center; font-size: var(--t-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .v51-viewer__close { position: absolute; top: 12px; right: var(--gutter); width: 44px; height: 44px; display: grid; place-items: center; appearance: none; background: none; border: 1px solid var(--line2); color: var(--fg); cursor: pointer; padding: 0; } .v51-viewer__close svg { width: 18px; height: 18px; } .v51-viewer__f { position: relative; margin: 0; min-height: 0; } .v51-viewer__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: var(--grade-real); } .v51-viewer__plate { justify-self: center; } .v51-viewer__nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; display: grid; place-items: center; appearance: none; background: rgba(14,15,17,.72); border: 1px solid var(--line2); color: var(--fg); cursor: pointer; padding: 0; } .v51-viewer__nav svg { width: 20px; height: 20px; } .v51-viewer__nav--prev { left: var(--gutter); } .v51-viewer__nav--next { right: var(--gutter); } .v51-viewer :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* ── Г4 · «КАК УСТРОЕНО» (§Секция 4) · полотно цех ────────────────────── X6: слева липкая колонка 1–5 (H2, лид, реплика), рельса 1 px в колонке 6 заливается --p секции, справа 7–12 шесть этапов; чётные — +1 модуль целиком (перевязка). Строка: луп 16:9 в 4 колонки + номер, имя, строка, ссылка и штамп «ПРИНЯТО» в 2 колонки. Горит акцентом только номер играющего этапа (X4 .is-now). */ .v51-etapy__in { align-items: start; } .v51-etapy__l { grid-column: 1 / span 5; position: sticky; top: var(--m); display: grid; gap: var(--m); } .v51-etapy__l .v51-lead { max-width: 24em; } .v51-etapy__mg { margin: 0; max-width: none; } .v51-etapy__mg .mg__t { margin: 0; color: var(--fg2); font-size: var(--t-2); } /* круг 2 (суд вкуса P03 + оркестратор: «пустота в левой колонке — дефект»): липкая колонка занимает окно от верхнего поля до полосы — заголовок наверху, внизу подпись рельсы «сейчас: 03 Остекление» (закон §3 п.5: единый рельс говорит «сейчас»). Индикатор один — рельса в колонке 6; подпись — её строка, а не второй прогресс. */ .v51-etapy__l { min-height: calc(100svh - 2 * var(--m) - var(--strip-h)); grid-template-rows: auto auto auto 1fr; } .v51-etapy__now { align-self: end; margin: 0; padding-top: 16px; border-top: 1px solid var(--line2); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; } .v51-etapy__now[hidden] { display: none; } .v51-etapy__now .v51-lab { grid-column: 1 / -1; margin-bottom: 10px; color: var(--fg3); } .v51-etapy__now b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-5); line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums; } .v51-etapy__now [data-now-h] { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } @media (max-width: 63.99rem) { .v51-etapy__l { min-height: 0; } .v51-etapy__now { display: none; } } .v51-etapy__rail { grid-column: 6; justify-self: center; align-self: stretch; width: 1px; position: relative; background: var(--line); } .v51-etapy__rail::after { content: ""; position: absolute; inset: 0; background: var(--fg); clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); } .v51-etapy__list { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; display: grid; } .v51-stage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding: 26px 0; border-top: 1px solid var(--line); } .v51-stage:last-child { border-bottom: 1px solid var(--line); } /* излом «перевязка»: чётный этап — на полкирпича (1 модуль) целиком, ряд выходит в правое поле, ширина сохраняется */ .v51-bond > :nth-child(even) { margin-left: var(--m); margin-right: calc(-1 * var(--m)); } .v51-stage__f { grid-column: 1 / span 4; position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: clip; background: var(--bg); } .v51-stage__poster, .v51-stage__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v51-stage__v { opacity: 0; transition: opacity var(--dur-cap) ease; } .v51-stage.is-playing .v51-stage__v { opacity: 1; } .v51-stage__f .v51-stamp { top: 36px; } .v51-mctl { position: absolute; z-index: 4; right: 10px; bottom: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; appearance: none; background: rgba(14,15,17,.72); border: 1px solid var(--line2); color: var(--fg2); cursor: pointer; } .v51-mctl svg { width: 12px; height: 12px; } .v51-mctl .i-play { display: none; } .v51-mctl[aria-pressed="true"] .i-play { display: block; } .v51-mctl[aria-pressed="true"] .i-pause { display: none; } .v51-mctl:hover { color: var(--fg); border-color: var(--fg); } .v51-stage__t { grid-column: 5 / span 2; display: grid; gap: 8px; align-content: start; } .v51-stage__n { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-3); line-height: 1; color: var(--fg2); transition: color .3s ease; } .v51-stage.is-now .v51-stage__n { color: var(--acc); } .v51-stage__h { margin: 0; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); hyphens: auto; } .v51-stage__p { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); } .v51-stage__foot { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .v51-stage__foot .v51-go { font-size: var(--t-2); } /* штамп «ПРИНЯТО»: остывший контур (сделано), текст — ступень серого: остывший тон текстом на графите не читается */ .v51-stage .stamp--done { color: var(--fg2); border-color: var(--acc-cold); } html.p .v51-stage[data-p="pass"] { opacity: calc(.35 + .65 * var(--p, 1)); } html.p .v51-stage[data-p="pass"]:last-child { opacity: 1; } html[data-faces="off"] .v51-stage__t { grid-column: 1 / -1; } /* ── Г5 · «КУДА ВЕДЁТ» (§Секция 6) · полотно воздух · Ф-15 = (б), слово владельца 28.09 17:05 ───────── Открытая комната — колонки 1–6, кадр 4:3 (608 × 456 на 1440). Три двери — список в колонках 7–12: миниатюра 2 колонки (4 модуля − межколонник = 192) + имя и строка в колонках 9–12. Высота миниатюры рассчитана так, что три строки (кромка 1 px + поле 12 + кадр) заканчиваются ровно на нижней кромке открытого кадра: 3 × (13 + h) = 13 + 456. Средняя строка — перевязка: целиком на 1 модуль вправо, ряд выходит в поле (§1.5 breaks, список из трёх строк). Строки сетки 1–3 — двери, 4-я (1fr) забирает текст под открытым кадром: двери не растягиваются и не сползают вниз. «Свет включается» — только opacity: пара одной геометрии или тёплый CSS-свет за --dur-fade; подпись детали — с задержкой --dur-cap. Открытая — кромка --fg сверху (не цветная полоса, T-05). */ .v51-scen__hd { row-gap: 26px; } .v51-scen__hd .v51-h2 { grid-column: 1 / span 7; } .v51-scen__hd .v51-lead { grid-column: 1 / span 9; } .v51-scen__row { --open-h: calc((12 * var(--m) - var(--col-gap)) * 2 / 3); /* круг 3 (суд F23): 3 : 2 — имя в первом экране */ --door-h: calc((var(--open-h) - 26px) / 3); width: min(100% - 2 * var(--gutter), var(--content)); margin: var(--m) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); align-items: start; } .v51-door { position: relative; padding-top: 12px; border-top: 1px solid var(--line); transition: border-color var(--dur-fade) ease; } .v51-door.is-open { grid-column: 1 / span 6; grid-row: 1 / -1; display: grid; align-content: start; border-top-color: var(--fg); } .v51-door:not(.is-open) { grid-column: 7 / span 6; display: grid; grid-template-columns: calc(4 * var(--m) - var(--col-gap)) minmax(0, 1fr); column-gap: var(--col-gap); align-content: start; cursor: pointer; } /* перевязка: вторая из закрытых дверей — на полкирпича вправо целиком (ширина ряда та же, ряд выходит в поле) */ .v51-door:not(.is-open):nth-child(2 of :not(.is-open)) { margin-left: var(--m); margin-right: calc(-1 * var(--m)); } .v51-door__f { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; background: var(--bg2); } .v51-door:not(.is-open) .v51-door__f { grid-row: 1 / span 4; aspect-ratio: auto; height: var(--door-h); } @media (min-width: 48rem) { .v51-door.is-open .v51-door__f { aspect-ratio: 3 / 2; } } .v51-door:not(.is-open) > :not(.v51-door__f):not(.v51-door__pick) { grid-column: 2; } .v51-door__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v51-door__f[data-class="real"] img { filter: var(--grade-real); } .v51-door__on, .v51-door__glow { opacity: 0; transition: opacity var(--dur-fade) cubic-bezier(.4, 0, .2, 1); } .v51-door__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(110% 85% at 50% 14%, rgba(255,206,148,.58), rgba(255,168,92,.22) 48%, rgba(255,168,92,.06) 80%); } .v51-door__cap { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 7px 10px 8px; background: rgba(14,15,17,.92); color: var(--fg); opacity: 0; visibility: hidden; transition: opacity .3s ease var(--dur-cap), visibility 0s linear var(--dur-cap); } .v51-door__plate { position: absolute; z-index: 3; top: 16px; left: 0; } .v51-door__h { margin: 16px 0 6px; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; } .v51-door__h a { color: var(--fg); text-decoration: none; } .v51-door__h a::after { content: ""; position: absolute; inset: 0; z-index: 4; } .v51-door__h a:focus-visible { outline: none; } .v51-door__h a:focus-visible::after { outline: 2px solid var(--acc); outline-offset: 4px; } .v51-door__p { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); max-width: 34em; } .v51-door__gift { margin: 12px 0 0; display: flex; gap: 10px; align-items: baseline; color: var(--fg); line-height: 1.4; } .v51-door__gift::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--acc); transform: translateY(-.15em); } .v51-door__gift--s { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* закрытая дверь: имя ступенью ниже открытой, строка — тише; у гардеробной вместо строки — строка акции (EARS §Секция 6) */ .v51-door:not(.is-open) .v51-door__h { margin: 0 0 6px; font-size: var(--t-2); } .v51-door:not(.is-open) .v51-door__p { font-size: var(--t-2); line-height: 1.4; } .v51-door--gift:not(.is-open) .v51-door__p { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .v51-door--gift:not(.is-open) .v51-door__gift:not(.v51-door__gift--s) { margin-top: 2px; } .v51-door:not(.is-open) .v51-stamp { top: 8px; left: 8px; padding: 3px 6px 4px; } .v51-door:not(.is-open) .v51-door__plate { top: 8px; } .v51-door:not(.is-open) .v51-door__plate > span + span { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .v51-door:not(.is-open) .v51-vis::before, .v51-door:not(.is-open) .v51-vis::after { top: 6px; width: 10px; height: 10px; } .v51-door:not(.is-open) .v51-vis::before { left: 6px; } .v51-door:not(.is-open) .v51-vis::after { right: 6px; } /* переключатель: кнопка поверх закрытой двери (ставит скрипт); у открытой её нет — работает ссылка на страницу сценария */ .v51-door__pick { position: absolute; inset: 0; z-index: 6; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; } .v51-door__pick:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; } .v51-door.is-open .v51-door__pick { display: none; } /* свет: у открытой — когда секция в кадре и после открытия (.is-lit ставит скрипт); без JS — сразу; у закрытой — наведение */ .v51-door.is-open.is-lit, .v51-door:not(.is-open):hover, .v51-door:not(.is-open):focus-within { border-top-color: var(--fg); } .v51-door.is-open.is-lit .v51-door__on, .v51-door.is-open.is-lit .v51-door__glow, .v51-scen:not([data-live]) .v51-door.is-open .v51-door__on, .v51-scen:not([data-live]) .v51-door.is-open .v51-door__glow, .v51-door:not(.is-open):hover .v51-door__on, .v51-door:not(.is-open):hover .v51-door__glow, .v51-door:not(.is-open):focus-within .v51-door__on, .v51-door:not(.is-open):focus-within .v51-door__glow { opacity: 1; } .v51-door.is-open.is-lit .v51-door__cap, .v51-scen:not([data-live]) .v51-door.is-open .v51-door__cap { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .v51-door__on, .v51-door__glow { transition: none; } .v51-door.is-open .v51-door__cap { opacity: 1; visibility: visible; transition: none; } } /* ── Г6 · «ОКНА ВЕЗДЕ» (§Секция 7) · полотно свет ─────────────────────── Строки-маршруты списком перевязкой: глагол 1–5 · строка 6–10 · стрелка 11–12; строки 2 и 4 — +1 модуль целиком. Вкладки по типу дома — линия снизу --fg 2 px у активной (без заливки акцентом, LATER-03); панель: кадр 16:10 в колонках 1–7, паспорт «подпись — значение» в 8–12. */ .v51-doma__hd .v51-h2 { grid-column: 1 / span 8; } .v51-doma__routes { margin-top: calc(2 * var(--m)); } .v51-routes { list-style: none; margin: 0; padding: 0; } .v51-routes > li { border-top: 1px solid var(--line2); } .v51-routes > li:last-child { border-bottom: 1px solid var(--line2); } .v51-routes > li:nth-child(even) { margin-left: var(--m); margin-right: calc(-1 * var(--m)); } .v51-route { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; min-height: 88px; padding: 16px 0; color: var(--fg); text-decoration: none; } .v51-route__v { grid-column: 1 / span 5; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; } .v51-route__p { grid-column: 6 / span 5; font-size: var(--t-2); line-height: 1.4; color: var(--fg2); } .v51-route__go { grid-column: 11 / span 2; justify-self: end; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line2); color: var(--fg); transition: border-color .2s ease, background-color .2s ease; } .v51-route__go svg { width: 22px; height: 22px; } a.v51-route:hover .v51-route__go { border-color: var(--fg); background: var(--bg3); } a.v51-route:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; } /* висячий маршрут (страница собирается следующей волной) — строка без стрелки: перехода нет, и это видно */ span.v51-route .v51-route__go { visibility: hidden; } .v51-house { margin-top: calc(2 * var(--m)); } .v51-house { margin-top: var(--m); } .v51-house__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line2); border: 1px solid var(--line2); } .v51-house__tab { appearance: none; min-height: 64px; padding: 0 16px; margin: 0; border: 0; background: var(--bg); cursor: pointer; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); transition: background-color .2s ease, color .2s ease; } .v51-house__tab:hover { color: var(--fg); background: var(--bg3); } .v51-house__tab[aria-selected="true"] { color: var(--bg); background: var(--fg); } .v51-house__tab:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; } .v51-house__p { margin-top: 26px; align-items: start; row-gap: 26px; } .v51-house__p:focus-visible { outline: 2px solid var(--acc); outline-offset: 6px; } .v51-house__f { grid-column: 1 / span 7; position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: clip; background: var(--bg2); } .v51-house__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real); } .v51-house__plate { position: absolute; left: 0; bottom: 0; } .v51-house__spec { grid-column: 8 / span 5; display: grid; gap: 16px; align-content: start; } .v51-house__p--org .v51-house__spec { grid-column: 1 / span 7; } .v51-house__name { margin: 0; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-house__spec dl { margin: 0; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); border-top: 2px solid var(--fg); } .v51-house__spec dt, .v51-house__spec dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); } .v51-house__spec dt { color: var(--fg3); padding-right: 16px; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-1); letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.25; padding-top: 14px; } .v51-house__spec dd { color: var(--fg); font-size: var(--t-2); line-height: 1.4; } .v51-house__verdict { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); } .v51-house__go { margin: 0; } .v51-house__call { min-height: 56px; padding: 0 26px; font-size: var(--t-btn); } /* ── Г7 · «ЦЕНА» (§Секция 8) · полотно цех ─────────────────────────────── Составы: карточка на --bg с кромкой --fg сверху (LATER-02); строка раскрытия — имя 1–4 · адресат 5–11 · знак 12; тело — кадр 4:3 в 1–5, состав в 6–11; тело одной высоты у всех составов — переключение не двигает страницу. Калькулятор — панель --bg: шаги 1–7, итог 8–12. Условия — ряд на сетке: замер 4 колонки, остальные по 2. */ .v51-cena__hd .v51-h2 { grid-column: 1 / span 8; } /* Составы — раскладка конфигуратора (framery): имена списком в колонках 1–5, тело открытого — на общем месте в 6–12, вне потока. Переключение состава ничего не двигает: имена стоят, блок держит постоянную высоту (G-sets-cls ≤ 0,01). Первая редакция (строки-аккордеон) давала сдвиг 1,87 на 390 — тела закрывались и открывались в потоке. */ .v51-sets { --sets-h: 512px; position: relative; margin-top: var(--m); min-height: var(--sets-h); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 8px; align-content: start; } /* F2: зазор между целями ≥ 8 */ .v51-set { grid-column: 1 / span 5; border-top: 1px solid var(--line2); } .v51-set:last-child { border-bottom: 1px solid var(--line2); } .v51-set[open] { border-top-color: var(--fg); background: var(--bg); } .v51-set__s { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; padding: 16px 26px 16px 26px; cursor: pointer; list-style: none; } .v51-set__s::-webkit-details-marker { display: none; } .v51-set__s:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; } .v51-set__h { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg3); transition: color .2s ease; } .v51-set[open] .v51-set__h, .v51-set__s:hover .v51-set__h { color: var(--fg); } .v51-set__mk { flex: none; position: relative; width: 18px; height: 2px; background: var(--fg3); } .v51-set[open] .v51-set__mk { background: var(--fg); } .v51-set:not([open]) .v51-set__mk::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); } .v51-set__b { position: absolute; top: 0; right: 0; left: calc((100% + var(--col-gap)) * 5 / 12 + 0px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 16px; align-content: start; } .v51-set__who { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--fg); font-size: var(--t-2); line-height: 1.4; color: var(--fg); } .v51-set__f { grid-column: 1 / span 4; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: clip; background: var(--bg2); } .v51-set__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real); } .v51-set__plate { position: absolute; left: 0; bottom: 0; } /* честный слот (R-88): кадра объединения в архиве нет — видимая подпись, а не заглушка под готовый актив */ .v51-set__f--slot { display: grid; place-items: center; border: 1px dashed var(--line2); background: repeating-linear-gradient(135deg, var(--bg2) 0 12px, var(--bg) 12px 24px); } .v51-set__slot { padding: 8px 12px; background: var(--bg); color: var(--fg2); border-left: 3px solid var(--fg3); } .v51-set__t { grid-column: 5 / span 3; display: grid; gap: 12px; align-content: start; } .v51-set__plus { margin: 0; font-size: var(--t-2); line-height: 1.3; color: var(--fg); } .v51-set__list { margin: 0; padding: 0; list-style: none; display: grid; } .v51-set__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--t-2); line-height: 1.35; color: var(--fg2); } .v51-set__list li::before { content: "+"; font-family: var(--font-mono); font-weight: var(--w-mono); color: var(--fg); } .v51-set__no { grid-column: 1 / -1; margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--fg3); } .v51-set__no .v51-lab { color: var(--fg2); margin-right: 8px; } .v51-calc { margin-top: calc(2 * var(--m)); padding: var(--m) 0; background: var(--bg); border-top: 1px solid var(--fg); } .v51-calc__steps { grid-column: 1 / span 7; display: grid; gap: var(--m); padding-left: 26px; } .v51-calc__q { margin: 0; padding: 0; border: 0; min-width: 0; } .v51-calc__l { display: flex; align-items: baseline; gap: 16px; margin: 0 0 16px; padding: 0; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-calc__n { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2); color: var(--fg3); letter-spacing: 0; } .v51-calc__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .v51-calc__chip { position: relative; display: grid; gap: 8px; cursor: pointer; } .v51-calc__chip input, .v51-calc__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .v51-calc__th { display: block; aspect-ratio: 1; overflow: clip; background: var(--bg2); outline: 1px solid var(--line2); outline-offset: -1px; } .v51-calc__th img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real) grayscale(.35); } .v51-calc__noimg { display: grid; place-items: center; width: 100%; height: 100%; background: var(--bg2); color: var(--fg3); } .v51-calc__noimg svg { width: 28%; height: 28%; } .v51-calc__chip input:checked ~ .v51-calc__th .v51-calc__noimg { color: var(--fg); } .v51-calc__nm { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg3); } .v51-calc__chip input:checked ~ .v51-calc__th { outline: 2px solid var(--fg); } .v51-calc__chip input:checked ~ .v51-calc__th img { filter: var(--grade-real); } .v51-calc__chip input:checked ~ .v51-calc__nm { color: var(--fg); } .v51-calc__chip input:focus-visible ~ .v51-calc__th { outline: 2px solid var(--acc); } .v51-calc__cls { margin: 12px 0 0; color: var(--fg3); } .v51-calc__seg { display: inline-flex; border: 1px solid var(--line2); } .v51-calc__opt { position: relative; cursor: pointer; } .v51-calc__opt span { display: grid; place-items: center; min-height: 52px; padding: 0 26px; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-1); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--fg3); } .v51-calc__opt + .v51-calc__opt span { border-left: 1px solid var(--line2); } .v51-calc__opt input:checked + span { color: var(--fg); background: linear-gradient(var(--fg), var(--fg)) left bottom / 100% 2px no-repeat; } .v51-calc__opt input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: -2px; } .v51-calc__len { display: inline-flex; align-items: center; gap: 12px; } .v51-calc__len input { width: 8.5ch; min-height: 52px; padding: 0 16px; font: inherit; font-size: var(--t-3); color: var(--fg); background: var(--bg); border: 1px solid var(--line2); border-radius: 0; font-variant-numeric: tabular-nums; } .v51-calc__len input:focus-visible { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); } .v51-calc__out { grid-column: 8 / span 5; display: grid; gap: 16px; align-content: start; padding: 0 26px 0 26px; border-left: 1px solid var(--line); min-height: 100%; } .v51-calc__oh { margin: 0; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-calc__list { margin: 0; padding: 0; list-style: none; min-height: calc(6 * 2.2em); font-size: var(--t-2); } .v51-calc__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 6px 0; border-top: 1px solid var(--line); color: var(--fg2); } .v51-calc__list li::before { content: "+"; font-family: var(--font-mono); font-weight: var(--w-mono); color: var(--fg); } .v51-calc__note { margin: 0; font-size: var(--t-2); line-height: 1.45; color: var(--fg2); min-height: calc(3 * 1.45em); } .v51-calc__note::first-letter { text-transform: uppercase; } .v51-calc__sum { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-3); line-height: 1.1; text-transform: uppercase; color: var(--fg); } .v51-calc__call { justify-self: start; min-height: 56px; padding: 0 26px; font-size: var(--t-btn); } .v51-terms { list-style: none; margin: calc(2 * var(--m)) auto 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--line2); } .v51-terms__i { grid-column: span 2; padding: 20px 0 0; display: grid; gap: 8px; align-content: start; } .v51-terms__i--lead { grid-column: span 4; } .v51-terms__k { margin: 0; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-terms__v { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--fg2); } .v51-metr { margin-top: calc(2 * var(--m)); row-gap: var(--m); align-items: start; } .v51-metr__t { grid-column: 1 / span 5; display: grid; gap: 16px; } .v51-h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-4); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; color: var(--fg); } .v51-metr__bars { grid-column: 7 / span 6; display: grid; gap: 16px; } .v51-metr__r { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1.4fr); gap: 16px; align-items: center; } .v51-metr__k { color: var(--fg3); } .v51-metr__b { position: relative; height: 34px; background: var(--bg); border: 1px solid var(--line); } .v51-metr__b i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--acc-cold); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); } .v51-metr__r--us .v51-metr__b i { background: var(--acc); } .v51-metr__v { color: var(--fg2); white-space: nowrap; } .v51-metr__r--us .v51-metr__v { color: var(--fg); } .v51-metr__cap { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--fg3); } .v51-metr__mark { color: var(--fg); } .v51-metr__more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 16px 32px; padding-top: 16px; border-top: 1px solid var(--line); } .v51-zam { flex: 0 1 calc(7 * 104px - 16px); } .v51-zam__s { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--t-2); color: var(--fg); } .v51-zam__s::-webkit-details-marker { display: none; } .v51-zam__s::after { content: "+"; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); color: var(--fg); } .v51-zam[open] .v51-zam__s::after { content: "\2212"; } .v51-zam__s:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .v51-zam__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; } .v51-zam__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-2); line-height: 1.4; color: var(--fg2); } .v51-zam__list b { font-family: var(--font-mono); font-weight: var(--w-mono); color: var(--fg); } /* ── Г8 · «ПО ПРАВИЛАМ» и вопросы (§Секция 9) · полотно свет · ноль движения ── Колонка чтения — 8 колонок: заголовок, реестр «можно / нельзя», примечание, вопросы; реквизиты — сбоку в 9–12 со статусом «сверяется по первоисточнику». Вопрос и ответ — один кегль, иерархия ступенью серого (X4). */ .v51-pravila__in { row-gap: var(--m); align-items: start; } .v51-pravila__hd { grid-column: 1 / span 8; display: grid; gap: 26px; } .v51-rules { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 2px solid var(--fg); } .v51-rules__c { padding-top: 16px; } .v51-rules__h { margin: 0 0 16px; color: var(--fg); } .v51-rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .v51-rules li { position: relative; padding-left: 26px; font-size: var(--t-2); line-height: 1.4; color: var(--fg); } .v51-rules li::before { content: ""; position: absolute; left: 0; top: .66em; width: 12px; height: 2px; background: var(--acc); } .v51-rules__c--no li::before { background: var(--fg3); } .v51-rules small { display: block; margin-top: 6px; color: var(--fg3); } .v51-law { grid-column: 9 / span 4; grid-row: 2; display: grid; gap: 16px; padding-top: 16px; border-top: 2px solid var(--fg); } .v51-law__st { justify-self: start; margin: 0; padding: 5px 9px 6px; border: 1px solid var(--fg3); color: var(--fg2); } .v51-law dl { margin: 0; display: grid; } .v51-law dl > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); } .v51-law dt { color: var(--fg3); } .v51-law dd { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--fg); } .v51-pravila__note { grid-column: 1 / span 8; display: grid; gap: 8px; } .v51-pravila__note .v51-p { max-width: 40em; } .v51-pravila__go { margin: 0; } .v51-faq { grid-column: 1 / span 8; display: grid; gap: 16px; } .v51-faq__list { margin: 0; display: grid; border-top: 2px solid var(--fg); } .v51-faq__i { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); padding: 14px 0; border-bottom: 1px solid var(--line); } .v51-faq__i dt { grid-column: 1 / span 3; font-size: var(--t-2); line-height: 1.4; color: var(--fg); } .v51-faq__i dd { grid-column: 4 / span 5; margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--fg2); } #pravila, #pravila * { transition: none; animation: none; } /* ── Г9 · «ЗВОНОК» (§Секция 10) · полотно воздух · кадр во весь экран ──── Диптих серии S003: шов = межколонник 8 | 9 (920–936 на 1440, как в Г1). Левая половина — под текстом, затемнена (потолок .88); правая — чистый кадр «лоджия, в которой живут» с шильдиком сверху и карточкой Михаила снизу. Текст — колонки 1–7 снизу; доминант — «Позвонить Михаилу» (единственный акцент экрана). */ .v51-zvonok { position: relative; min-height: 100svh; display: grid; align-content: end; overflow: clip; padding-block: calc(2 * var(--m)); } .v51-zvonok__media { position: absolute; inset: 0; z-index: 0; display: grid; column-gap: var(--col-gap); background: var(--bg); grid-template-columns: calc((100% - var(--content)) / 2 + 16 * var(--m) - var(--col-gap)) 1fr; } .v51-zvonok__f { position: relative; margin: 0; overflow: clip; } .v51-zvonok__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real); } .v51-zvonok__f--a img { object-position: 50% 62%; } .v51-zvonok__f--b img { object-position: 42% 60%; } .v51-zvonok__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,15,17,0) 55%, rgba(14,15,17,.55) 100%), linear-gradient(90deg, rgba(14,15,17,.88) 0, rgba(14,15,17,.84) calc((100% - var(--content)) / 2 + 14 * var(--m)), rgba(14,15,17,.6) calc((100% - var(--content)) / 2 + 16 * var(--m) - var(--col-gap)), rgba(14,15,17,0) calc((100% - var(--content)) / 2 + 16 * var(--m))); } .v51-zvonok__plate { position: absolute; z-index: 2; top: var(--m); right: max(var(--gutter), (100% - var(--content)) / 2); } .v51-zvonok__in { position: relative; z-index: 1; align-items: end; row-gap: var(--m); } .v51-zvonok__t { grid-column: 1 / span 8; display: grid; gap: 26px; justify-items: start; } .v51-zvonok__h { font-size: var(--t-5); } .v51-zvonok__why { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); } .v51-zvonok__why li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px 0 0; margin-right: 26px; border-right: 1px solid var(--line2); font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-zvonok__why li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .v51-zvonok__gift::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--fg); } .v51-zvonok__act { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .v51-zvonok__write { display: inline-flex; align-items: center; min-height: 56px; padding: 0 26px; border: 1px solid var(--line2); font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-btn); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); text-decoration: none; background: rgba(14,15,17,.6); cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); } .v51-zvonok__write { position: relative; border-color: transparent; --cut: var(--chamfer); --fr: var(--line2); } .v51-zvonok__write::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--fr); clip-path: polygon(evenodd, 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 0, 1px 1px, 1px calc(100% - 1px), calc(100% - var(--cut) - .414px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--cut) - .414px), calc(100% - 1px) 1px, 1px 1px); } .v51-zvonok__write:hover, .v51-zvonok__write[aria-expanded="true"] { --fr: var(--fg); } .v51-zvonok__write:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .v51-write { display: grid; gap: 16px; width: 100%; max-width: calc(7 * 104px - 16px); } .v51-write__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 32px; } .v51-write__list li { display: flex; align-items: center; min-height: 44px; } .v51-write__ext { display: inline-flex; align-items: baseline; gap: 8px; color: var(--fg); } .v51-write__ext i { font-style: normal; color: var(--fg3); } .v51-write__form-go { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; } .v51-form { display: grid; gap: 16px; padding: 26px; background: rgba(14,15,17,.92); border: 1px solid var(--line2); } .v51-form__f { display: grid; gap: 6px; } .v51-form__f span { color: var(--fg3); } .v51-form__f input, .v51-form__f textarea { font: inherit; font-size: var(--t-2); color: var(--fg); background: var(--bg); border: 1px solid var(--line2); border-radius: 0; padding: 12px 16px; min-height: 52px; } .v51-form__f input:focus-visible, .v51-form__f textarea:focus-visible { outline: 2px solid var(--acc); outline-offset: 0; } .v51-form__ok { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-2); line-height: 1.4; color: var(--fg2); } .v51-form__ok input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acc); } .v51-form__ok a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; } .v51-form__send { justify-self: start; min-height: 56px; padding: 0 26px; font-size: var(--t-btn); } .v51-form__send:disabled { background: transparent; color: var(--fg3); border: 1px solid var(--line2); cursor: not-allowed; filter: none; } .v51-write__ext::before { content: ""; width: 9px; height: 9px; background: currentColor; align-self: center; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .v51-form__note { margin: 0; color: var(--fg3); } /* карточка Г9 — то же стекло, но над светлым кадром IMG_1474: подложка плотнее и размытие темнее, иначе подписи на стекле теряют 4,5:1 к пикселям под плашкой (замер круга 2). Колонки 9–12 — справа от шва диптиха 8 | 9, прижата к низу. */ .v51-card--final { grid-column: 9 / span 4; justify-self: end; align-self: end; background: linear-gradient(160deg, rgba(244,245,247,.10) 0, rgba(244,245,247,.03) 50%, rgba(244,245,247,0) 100%), rgba(14,15,17,.56); } html[data-glass] .v51-card--final { -webkit-backdrop-filter: blur(24px) saturate(1.2) brightness(.52); backdrop-filter: blur(24px) saturate(1.2) brightness(.52); } html:not([data-glass]) .v51-card--final { background-color: rgba(14,15,17,.82); } /* без размытия (нет JS) — плотнее: под плашкой светлый кадр */ html[data-faces="off"] .v51-card--final { padding-left: 21px; } /* ── ТИШИНА (§Секция 5): один экран на сайт, одна строка ──────────────── */ .v51-hush { background: var(--bg); } .v51-hush p { font-size: var(--t-5); color: var(--fg3); letter-spacing: -.01em; } /* ── ПОДВАЛ 5.1 (§Секция 0 + слово владельца 28.09 15:0x, реф ose-engineering; круг 2 — ритм по суду вкуса P15/P16) ──── Тёмная земля --bg (подвал — рама, не полотно §12.1). Иерархия как у ose и как просил суд: ярлык группы — мелкий капс Sofia XC (--t-1, --fg3) → ссылка — Inter Tight строчными (--t-2): пункты раздела --fg2, отдельные пункты --fg. Колонки на 12-колонной сетке: знак 1–2 · строка бренда 3–5 · «Балконы» 6–8 · отдельные пункты 9–10 · связь 11–12. Вертикаль — модулем: поле 1 модуль, слово-знак — через 1 модуль под колонками (без пустоты между ссылками и знаком), под ним — линейка засечек во всю ширину контейнера (мелкая ¼ модуля, крупная — модуль; ряд кладки = модуль сетки), нижняя строка — под линейкой. Знак — ВСЁ слово «СТРЕЛОВ» по ширине контейнера (слово владельца 15:1x), бледный. */ .v51-foot { position: relative; overflow: clip; background: var(--bg); border-top: 1px solid var(--line); color: var(--fg3); font-size: var(--t-1); letter-spacing: .12em; } .v51-foot .v51-foot__bg { position: relative; z-index: 0; display: block; margin: var(--m) auto 0; width: min(100% - 2 * var(--gutter), var(--content)); height: auto; pointer-events: none; --mk-ink: rgba(244,245,247,.06); --mk-acc: rgba(244,245,247,.06); } .v51-foot__top, .v51-foot__bottom { position: relative; z-index: 1; } .v51-foot__top { padding: var(--m) 0 0; align-items: start; row-gap: var(--m); } /* текстовые узлы подвала — Inter Tight строчными (футер целиком несёт .v51-lab: ярлыки и нижняя строка остаются капсом) */ .v51-foot__say, .v51-foot__list a, .v51-foot__list span, .v51-foot__call > span:first-child { font-family: var(--font-text); font-weight: 400; font-size: var(--t-2); line-height: 1.3; letter-spacing: 0; text-transform: none; } .v51-foot__mark { grid-column: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; } .v51-foot__mark .mk { height: 22px; } .v51-foot__say { grid-column: 3 / span 3; margin: 0; padding-top: 9px; max-width: 24ch; color: var(--fg); } .v51-foot__nav { grid-column: 6 / span 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); align-content: start; justify-items: start; } .v51-foot__nav > .v51-foot__h, .v51-foot__nav > .v51-foot__list { grid-column: 1 / span 3; } .v51-foot__nav > .v51-foot__list.v51-foot__list--top { grid-column: 4 / span 2; grid-row: 1 / span 2; margin-top: 0; } .v51-foot__talk { grid-column: 11 / span 2; display: grid; justify-items: start; align-content: start; } /* ярлык группы: мелкий капс --fg3, высота строки = цель 44 (первая строка всех колонок на одной линии) */ .v51-foot__h { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg3); text-decoration: none; } .v51-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; align-self: start; } .v51-foot__list + .v51-foot__list { margin-top: 26px; } .v51-foot__list a, .v51-foot__list span { color: var(--fg2); text-decoration: none; } .v51-foot__list--top a, .v51-foot__list--top span { color: var(--fg); } .v51-foot__nav > .v51-foot__list--top { padding-top: 9px; } .v51-foot a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; } /* главное действие подвала: квадрат-маркер акцентом (X4 — акцент маркером, не краской) */ .v51-foot__call { display: grid; grid-template-columns: 7px auto; column-gap: 10px; align-items: baseline; color: var(--fg); text-decoration: none; padding-top: 9px; margin-bottom: 26px; white-space: nowrap; } /* одной строкой: на 1440 выходит в поле на ≤ 8 px */ .v51-foot__call::before { content: ""; width: 7px; height: 7px; background: var(--acc); transform: translateY(-.1em); } .v51-foot__num { grid-column: 2; margin-top: 6px; color: var(--fg3); font-variant-numeric: tabular-nums; } /* внешняя ссылка — стрелка ↗ маской (у шрифта знака нет); мессенджеры до фактов — span с видимым {{…}} */ .v51-foot__ext { display: inline-flex; align-items: baseline; gap: 8px; } .v51-foot__ext::before { content: ""; width: 9px; height: 9px; background: currentColor; align-self: center; transform: translateY(-1px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } .v51-foot__ext i { font-style: normal; color: var(--fg3); } .v51-foot__bottom { align-items: end; padding: 0 0 var(--m); row-gap: 16px; } .v51-foot__bottom p { margin: 0; } .v51-foot__now { grid-column: 1 / span 2; grid-row: 2; font-variant-numeric: tabular-nums; } .v51-foot__now span { margin-left: 26px; } .v51-foot__legal { grid-column: 3 / span 3; grid-row: 2; } .v51-foot__pol { grid-column: 6 / span 5; grid-row: 2; color: var(--fg3); text-decoration: none; display: inline-flex; align-items: flex-end; min-height: 20px; } /* линейка засечек во всю ширину контейнера, между словом-знаком и нижней строкой: мелкая — ¼ модуля, крупная — модуль */ .v51-foot__ruler { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; width: auto; height: 12px; margin-top: 16px; background: linear-gradient(var(--line2), var(--line2)) left bottom / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--line2) 0 1px, transparent 1px calc(var(--m) / 4)) left bottom / 100% 5px no-repeat, repeating-linear-gradient(to right, var(--fg3) 0 1px, transparent 1px var(--m)) left bottom / 100% 12px no-repeat; } /* ── ПЕРЕХОД СТРАНИЦ (X5) — одно объявление на дерево 5.1 ───────────────── */ /* @view-transition — F4-FIX круг 2: объявление перенесено в layout-51.html (inline): страница-цель должна опт-инить переход до первой отрисовки, а не когда придёт таблица */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(.2,.7,.2,1); } /* ── 390 ─────────────────────────────────────────────────────────────────── */ @media (max-width: 47.99rem) { /* подвал на 390: стопкой, модуль 26 — поле и разделы по 1–2 модуля; ссылки двумя колонками, цель 44 px */ .v51-foot__top { padding: calc(2 * var(--m)) 0 0; row-gap: 0; } .v51-foot__mark, .v51-foot__say, .v51-foot__nav, .v51-foot__talk { grid-column: 1; } .v51-foot__say { padding: 16px 0 var(--m); max-width: 30ch; } .v51-foot__nav, .v51-foot__talk { padding: 16px 0 0; border-top: 1px solid var(--line); margin-bottom: var(--m); } .v51-foot__list { gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .v51-foot__nav, .v51-foot__talk { justify-items: stretch; grid-template-columns: minmax(0, 1fr); } .v51-foot__nav > .v51-foot__h, .v51-foot__nav > .v51-foot__list, .v51-foot__nav > .v51-foot__list--top { grid-column: 1; grid-row: auto; } .v51-foot__nav > .v51-foot__list.v51-foot__list--top { grid-column: 1; grid-row: auto; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .v51-foot__list a, .v51-foot__list span, .v51-foot__h { display: inline-flex; align-items: center; min-height: 44px; } .v51-foot__call { margin-bottom: 8px; padding: 6px 0 10px; } .v51-foot__talk { margin-bottom: 0; } .v51-foot .v51-foot__bg { margin-top: var(--m); } .v51-foot__bottom { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .v51-foot__now, .v51-foot__legal, .v51-foot__pol { grid-column: 1; grid-row: auto; } .v51-foot__ruler { grid-column: 1; grid-row: auto; order: -1; margin: 16px 0 12px; } .v51-foot__pol { min-height: 44px; align-items: center; } /* Г2 на 390: портрет 4:5 во всю ширину поля, под ним имя, реплика, действия */ .v51-litso__f, .v51-litso__t { grid-column: 1; } .v51-litso__f { aspect-ratio: 4 / 5; } .v51-litso__t { margin-top: var(--m); justify-content: start; } .v51-litso__go { flex-direction: column; row-gap: 8px; } /* IA-NAV добавка: зазор между «Смотреть работы» и «Позвонить Михаилу» ≥ 8 (был 0) */ /* Г3 на 390: заголовок и строка «11 кадров из 141 · Все работы» столбцом; стрелок нет — листание пальцем */ .v51-works__hd.v51-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .v51-works__h { grid-column: 1; grid-row: 1; } .v51-works__meta { display: contents; } .v51-works__counter { grid-column: 2; grid-row: 1; } .v51-works__all { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); } .v51-works__arrows { display: none; } .v51-work { width: calc(100vw - var(--m) - var(--col-gap) - 70px); } .v51-works__track::after { width: max(1px, calc(var(--left) - var(--col-gap))); } .v51-cmp, .v51-cmp__cap { grid-column: 1; } .v51-cmp__st { aspect-ratio: 4 / 5; } .v51-cmp__cap { margin-top: 12px; gap: 12px; } /* шильдик карточки на 390 — в две строки, как шильдик героя: «Фото объекта | год» / «что на кадре» */ .v51-viewer__nav { display: none; } /* Г4 на 390: липкость и рельса сняты (как home-40.css:508-517), этапы списком, луп во всю ширину, сдвиг чётных 26 */ .v51-etapy__l, .v51-etapy__list { grid-column: 1; } .v51-etapy__l { position: static; margin-bottom: var(--m); gap: 26px; } .v51-etapy__rail { display: none; } .v51-stage { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .v51-stage__f, .v51-stage__t { grid-column: 1; } .v51-bond > :nth-child(even) { margin-right: 0; } /* Г5 на 390 — круг 3 (суд F24): комната во всю ширину поля, под ней три двери строками, как на 1440: миниатюра 40 % слева, справа имя и строка (описания видны); средняя — перевязка 26 px; у гардеробной — «Шкаф в подарок» под строкой. Цель — вся дверь (кнопка-переключатель). Штамп и шильдик на миниатюре 40 % не читаются — класс держит форма (§1.6). */ .v51-scen__hd .v51-h2, .v51-scen__hd .v51-lead { grid-column: 1; } .v51-scen__row { width: auto; margin: var(--m) var(--gutter) 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; } .v51-door.is-open { grid-column: 1; grid-row: auto; margin-bottom: 10px; } .v51-door:not(.is-open) { grid-column: 1; grid-row: auto; grid-template-columns: 40% minmax(0, 1fr); column-gap: 14px; padding-top: 12px; } .v51-door:not(.is-open):nth-child(2 of :not(.is-open)) { margin-left: var(--m); margin-right: 0; } .v51-door:not(.is-open) .v51-door__f { height: auto; aspect-ratio: 4 / 3; grid-row: 1 / span 4; } .v51-door:not(.is-open) .v51-door__h { margin: 0 0 -20px; font-size: var(--t-2); letter-spacing: .03em; } /* имя держит цель 44 (mobile-audit), строка подтянута */ .v51-door:not(.is-open) .v51-door__p { font-size: 15px; line-height: 1.4; } .v51-door--gift:not(.is-open) .v51-door__p { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; } .v51-door--gift:not(.is-open) .v51-door__gift:not(.v51-door__gift--s) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .v51-door--gift:not(.is-open) .v51-door__gift--s { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; margin-top: 6px; font-size: 12px; letter-spacing: .06em; } .v51-door:not(.is-open) .v51-stamp, .v51-door:not(.is-open) .v51-door__plate { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .v51-door.is-open .v51-door__h { font-size: var(--t-3); } /* шторка на 390: 4:5 во всю ширину поля, подпись — под ней столбцом */ .v51-cmp__cap { flex-direction: column; align-items: flex-start; } .v51-cmp__cap .v51-plate { grid-auto-flow: row; grid-template-columns: auto auto; } .v51-cmp__cap .v51-plate > span:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line2); } /* Г6 на 390: маршрут — глагол и строка столбцом, стрелка справа; сдвиг чётных 26 при ширине − 26; вкладки лентой */ .v51-doma__hd .v51-h2 { grid-column: 1; } .v51-routes > li:nth-child(even) { margin-right: 0; } .v51-route { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 6px; min-height: 0; } .v51-route__v, .v51-route__p { grid-column: 1; } .v51-route__go { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; } .v51-house__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .v51-house__tab { grid-column: span 2; min-height: 52px; padding: 0 8px; font-size: 17px; } .v51-house__tab:nth-child(n+4) { grid-column: span 3; } /* 3 + 2, как плитки калькулятора цены */ .v51-house__f, .v51-house__spec, .v51-house__p--org .v51-house__spec { grid-column: 1; } .v51-house__f { aspect-ratio: 4 / 3; } .v51-house__spec dl { grid-template-columns: minmax(0, 1fr); } .v51-house__spec dt { padding-bottom: 0; border-bottom: 0; } /* Г7 на 390: состав — имя и адресат столбцом; тело: кадр, затем состав; высота тела одна у всех (без сдвига) */ .v51-cena__hd .v51-h2 { grid-column: 1; } /* составы на 390: имена — плитками 2×2, тело открытого — под ними на общем месте (вне потока): сдвига нет */ .v51-sets { --sets-h: 860px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; } .v51-set { grid-column: auto; border: 1px solid var(--line2); } .v51-set:last-child { border-bottom: 1px solid var(--line2); } .v51-set[open] { border-color: var(--fg); } .v51-set__s { min-height: 64px; padding: 10px 12px; } .v51-set__h { font-size: 13px; letter-spacing: 0; } .v51-set__mk { display: none; } .v51-set__b { top: calc(2 * 64px + 8px + 2px + 16px); left: 0; grid-template-columns: minmax(0, 1fr); } .v51-set__f, .v51-set__t, .v51-set__who, .v51-set__no { grid-column: 1; } .v51-calc { padding: var(--m) 0; } .v51-calc__steps, .v51-calc__out { grid-column: 1; padding: 0 16px; } .v51-calc__out { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--m); margin-top: var(--m); } .v51-calc__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } .v51-calc__call { width: 100%; } .v51-terms { grid-template-columns: minmax(0, 1fr); } .v51-terms__i, .v51-terms__i--lead { grid-column: 1; padding: 16px 0; border-bottom: 1px solid var(--line); } .v51-metr__t, .v51-metr__bars { grid-column: 1; } .v51-metr__r { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .v51-metr__k { grid-column: 1 / -1; } .v51-zam { flex-basis: 100%; } /* Г8 на 390: всё в одну колонку, реквизиты — после реестра, вопрос над ответом */ .v51-pravila__hd, .v51-rules, .v51-law, .v51-pravila__note, .v51-faq { grid-column: 1; } .v51-law { grid-row: auto; } .v51-rules { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } .v51-faq__i { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .v51-faq__i dt, .v51-faq__i dd { grid-column: 1; } /* Г9 на 390: портрет IMG_1474 во всю ширину сверху (4:5), H2 на нижнем крае кадра, остальное — на земле ниже */ .v51-zvonok { min-height: 0; display: block; padding: 0 0 calc(2 * var(--m)); } .v51-zvonok__media { position: relative; inset: auto; display: block; aspect-ratio: 4 / 5; } .v51-zvonok__f--a { position: absolute; inset: 0; } .v51-zvonok__f--a img { object-position: 30% 60%; } .v51-zvonok__f--b { display: none; } .v51-zvonok__scrim { background: linear-gradient(180deg, rgba(14,15,17,0) 34%, rgba(14,15,17,.78) 66%, rgba(14,15,17,.88) 100%); } .v51-zvonok__plate { top: 16px; right: auto; left: var(--gutter); } .v51-zvonok__in { margin-top: calc(-1 * (26px + 2 * 1.1 * var(--t-5) + 26px)); row-gap: 26px; } .v51-zvonok__t, .v51-card--final { grid-column: 1; justify-self: stretch; } .v51-zvonok__why { flex-direction: column; width: 100%; border-bottom: 0; } .v51-zvonok__why li { border-right: 0; margin: 0; padding: 0; width: 100%; min-height: 36px; font-size: var(--t-2); color: var(--fg2); } .v51-zvonok__why { padding-top: 8px; } .v51-zvonok__act { width: 100%; flex-direction: column; align-items: stretch; } .v51-zvonok__act .v51-call, .v51-zvonok__write { width: 100%; justify-content: center; } .v51-form { padding: 16px; } } /* до 64rem строки этапов — в полной яркости: плато чтения без липкой колонки вырождается (как home-40.css:516) */ @media (max-width: 63.99rem) { html.p .v51-stage[data-p="pass"] { opacity: 1; } } /* уменьшенное движение: луп не грузится, строки этапов — в полной яркости, рельса без заливки */ @media (prefers-reduced-motion: reduce) { .v51-mctl { display: none; } .v51-etapy__rail::after { content: none; } } /* ── цели нажатия ≥ 44 × 44 (mobile-audit): имя двери — сама ссылка растянута на карточку, но и её бокс держит 44; скрытые радио калькулятора лежат поверх своей подписи во всю её площадь; короткие ссылки подвала — не уже 44 ── */ .v51-door__h a { display: inline-flex; align-items: center; min-height: 44px; } .v51-door.is-open .v51-door__h { margin-top: 10px; margin-bottom: 0; } .v51-door:not(.is-open) .v51-door__h a { align-items: flex-start; } /* цель закрытой двери — вся дверь (кнопка); имя держит 44 для mobile-audit */ @media (min-width: 48rem) and (pointer: fine) { .v51-door:not(.is-open) .v51-door__h a { min-height: 0; } } /* F2: на тач-планшете имя двери держит 44 */ /* на десктопе имя — строка текста, цель — кнопка во всю дверь */ .v51-calc__chip input, .v51-calc__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .v51-foot__list a { min-width: 44px; } /* F4-FIX F2: ссылки подвала ≥ 44 px высотой на планшете, телефоне горизонтально и на любом тач-экране (десктоп мышью — прежний облик) */ @media (max-width: 1024px), (pointer: coarse) { .v51-foot__list a, .v51-foot__list span, .v51-foot__h, .v51-foot__pol { display: inline-flex; align-items: center; min-height: 44px; } } /* F4-FIX D7 (планшет 768–1023): подвал без наложений — знак отдельной строкой, «Позвонить Михаилу» не выходит за край */ @media (min-width: 48rem) and (max-width: 79.99rem) { /* до 1279: знак 174 px не помещается в 2 колонки (tablet-l 1024/1180) */ .v51-foot__mark { grid-column: 1 / -1; } .v51-foot__say { grid-column: 1 / span 7; grid-row: 2; max-width: 34ch; } .v51-foot__nav { grid-column: 1 / span 7; grid-row: 3; } .v51-foot__talk { grid-column: 8 / span 5; grid-row: 2 / span 2; } .v51-foot__now { grid-column: 1 / -1; grid-row: 2; } .v51-foot__legal { grid-column: 1 / span 9; grid-row: 3; } .v51-foot__pol { grid-column: 1 / -1; grid-row: 4; } } /* ══ F4-FIX 29.09 · планшет 768–1023: составы «Из чего складывается цена», условия, дом, карточка Михаила ══ Правила только для 48–63.99rem (там на сетке 12 колонок текст сжимался до 110–160 px и ложился на соседей); облик 1024+ и 390 не тронут. */ @media (min-width: 48rem) and (max-width: 63.99rem) { .v51-cena__hd .v51-h2 { grid-column: 1 / -1; } .v51-sets { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; } .v51-set { grid-column: auto; border: 1px solid var(--line2); } .v51-set:last-child { border-bottom: 1px solid var(--line2); } .v51-set[open] { border-color: var(--fg); } .v51-set__s { min-height: 64px; padding: 10px 12px; } .v51-set__h { font-size: 15px; letter-spacing: 0; } .v51-set__mk { display: none; } .v51-set__b { top: calc(64px + 2px + 16px); left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; } .v51-set__f { grid-column: 1; } .v51-set__t { grid-column: 2; } .v51-set__who, .v51-set__no { grid-column: 1 / -1; } .v51-terms__i { grid-column: span 6; } .v51-terms__i--lead { grid-column: 1 / -1; } /* дом: вкладки без склейки (зазор 8), панель — стопкой, «характеристика — значение» в две колонки */ .v51-house__f, .v51-house__spec, .v51-house__p--org .v51-house__spec { grid-column: 1 / -1; } .v51-house__f { aspect-ratio: 16 / 9; } .v51-house__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .v51-house__tab { grid-column: span 2; padding: 0 8px; font-size: 17px; } .v51-house__tab:nth-child(n+4) { grid-column: span 3; } } /* зазор ≥ 8 между вкладками «Какой у вас дом» на любой ширине (F2): каждая вкладка — своя рамка */ .v51-house__tabs { gap: 8px; background: none; border: 0; } .v51-house__tab { border: 1px solid var(--line2); } .v51-house__tab[aria-selected="true"] { border-color: var(--fg); } @media (min-width: 48rem) and (max-width: 63.99rem) { /* калькулятор: шаги и итог друг под другом — в 7 + 5 колонках подписи плиток «дом» ложились друг на друга */ .v51-calc__steps, .v51-calc__out { grid-column: 1 / -1; padding: 0 26px; } .v51-calc__out { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--m); margin-top: var(--m); } } @media (min-width: 48rem) and (max-width: 63.99rem) { /* «Шесть этапов»: липкая колонка + рельса + список в 5 + 1 + 6 колонок оставляли этапу ~110 px — на планшете список идёт под заголовком во всю ширину */ .v51-etapy__l, .v51-etapy__list { grid-column: 1 / -1; } .v51-etapy__l { position: static; margin-bottom: var(--m); gap: 26px; } .v51-etapy__rail { display: none; } } /* ══ F4-FIX 29.09 · F5(320) — самое длинное слово по ширине колонки ══ */ @media (max-width: 22.49rem) { /* 320–359: «складывается» (10,9 em) и «персональных» шире колонки на 9–10 px — последняя буква резалась шторкой заголовка */ html[data-v51] .v51-h2 { font-size: min(var(--t-5), calc((100vw - 2 * var(--gutter)) / 11.3)); } html[data-v51] .v52-h1.v52-h1--s { font-size: min(var(--t-5), calc((100vw - 2 * var(--gutter)) / 11.3)); } } @media (max-width: 47.99rem) { /* шильдик состава: три ячейки в одну строку шире кадра на 320 — третья уходит на вторую строку */ .v51-set__plate { grid-auto-flow: row; grid-template-columns: auto auto; max-width: 100%; } .v51-set__plate > span:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line2); } } /* ══ F4-FIX 29.09 · F13 · главная: секции ниже сгиба (после «Как устроено») не раскладываются, пока не подойдут к экрану ══ Раскладка страницы в первые 3 с при CPU×4 (LoAF: Layout 400 мс + UpdateLayoutTree 216 мс из 3400 объектов) — половина цены в секциях, которых никто ещё не видит. Оценка высоты — по последней раскладке (auto), размер до первой — на глаз; якоря #cena / #zvonok и прокрутка вверх стоят: сдвиг ниже экрана скролл-якорь гасит. Только главная (её секции — по id), pin «Как устроено» не трогаем. */ #scen, #doma, #cena, #pravila, #zvonok { content-visibility: auto; contain-intrinsic-block-size: auto 1500px; } /* оценка до первой раскладки; замер 1440/390/768: scen 1285–1868, doma 1457–1634, cena 2432–3604, pravila 1698–2049, zvonok 900–1024 */ #scen { contain-intrinsic-block-size: auto 1700px; } #cena { contain-intrinsic-block-size: auto 2900px; } #pravila { contain-intrinsic-block-size: auto 1850px; } #zvonok { contain-intrinsic-block-size: auto 950px; } /* F4-FIX F10 · луп этапа: пока постер не пришёл — тон земли карточки, не чёрный блок */ .v51-stage__f { background: #1c1f23; } /* F4-FIX F15 · состав без кадра (слот «кадр — после съёмки» вырезан сборкой): текст занимает место кадра */ .v51-set__b:not(:has(.v51-set__f)) .v51-set__t { grid-column: 1 / span 4; } @media (max-width: 63.99rem) { .v51-set__b:not(:has(.v51-set__f)) .v51-set__t { grid-column: 1 / -1; } } /* F4-FIX F16/D16 · счётчики ленты и телефон в шапке не рвутся на строки */ .v51-works__counter, .v51-works__counter span { white-space: nowrap; } /* ══ F4-FIX 29.09 · F8 · «Михаил Стрелов» (Г2) на планшете 768–1023: текст лежал под фото (колонка 8–12 при кадре шире своих 6 колонок) ══ Кадр — над текстом во всю ширину, текст под ним; ссылки — в ряд с зазором. */ @media (min-width: 48rem) and (max-width: 63.99rem) { .v51-litso__f, .v51-litso__t { grid-column: 1 / -1; } .v51-litso__f { aspect-ratio: 16 / 10; } .v51-litso__t { margin-top: var(--m); justify-content: start; } .v51-litso__go { gap: 8px 32px; } } @media (max-height: 500px) and (orientation: landscape) { .v51-litso__f { aspect-ratio: 16 / 10; } } /* F8: на телефоне горизонтально портрет 4:5 выше окна */ /* F4-FIX F2 · зазор ≥ 8 между строками-ссылками подвала и «Смотреть работы / По правилам» на тач-размерах */ @media (max-width: 1024px), (pointer: coarse) { .v51-foot__list { row-gap: 8px; } .v51-foot__h { margin-bottom: 8px; } .v51-foot__nav > .v51-foot__list--top { padding-top: 0; } } @media (max-width: 47.99rem) { .v52-hand__l { row-gap: 8px; } }