/* v51-home.css · рама и первый экран 5.1 (VSPEC-5.1 §Секция 0–1). Перенос блоков 2–9 стенда site/stands/v51-stand.css (раунд 2, sha256 017bf91531a166e6…) байт в байт. Правка — здесь, стенд — история. */ /* ── 2 · ШАПКА ГЛАВНОЙ (внутри первого экрана, поверх кадра) ──────────────── */ .v51-head { position: absolute; z-index: 5; inset: 0 0 auto 0; height: var(--head-h); } .v51-head__in { height: 100%; align-items: center; } .v51-head__brand { grid-column: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; } .v51-head__brand .mk { height: 17px; } .v51-head__nav { grid-column: 3 / span 7; display: flex; gap: 0 26px; justify-content: center; } .v51-head__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--fg2); text-decoration: none; } /* F2: цель ≥ 44 × 44; зазор пунктов 26 */ .v51-head__nav a:hover { color: var(--fg); } .v51-head__end { grid-column: 10 / span 3; display: flex; justify-content: flex-end; align-items: center; gap: 16px; } .v51-head__tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; white-space: nowrap; } .v51-head__tel:hover { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 5px; } .v51-head__zamer { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--fg); text-decoration: none; border: 1px solid var(--line2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } .v51-head__zamer { position: relative; border-color: transparent; --fr: var(--line2); } .v51-head__zamer::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--fr); clip-path: polygon(evenodd, 0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 0, 1px 1px, 1px calc(100% - 1px), calc(100% - 8.414px) calc(100% - 1px), calc(100% - 1px) calc(100% - 8.414px), calc(100% - 1px) 1px, 1px 1px); } .v51-head__zamer:hover { --fr: var(--acc); } /* кромка по срезу угла целиком (было: border обрывался clip-path) */ .v51-head__ico, .v51-head__menu { display: none; } /* ── 3 · ПЕРВЫЙ ЭКРАН ────────────────────────────────────────────────────── */ .v51-hero { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; background: var(--bg); color: var(--fg); } .v51-hero__body { position: relative; z-index: 2; min-height: 100svh; align-content: end; padding: calc(var(--head-h) + var(--m)) 0 calc(var(--strip-h) + var(--m)); } .v51-hero__text { grid-column: 1 / span 9; } .v51-hero__side { grid-column: 10 / span 3; align-self: end; display: grid; justify-items: end; gap: 16px; } .v51-eyebrow { margin: 0 0 13px; font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-3); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); } /* кегль H1: не больше --t-7 и не больше колонки / 8,7 em — самое длинное слово «СТАНОВИТСЯ» 8,60 em (326,9 px при 38) на 360 шире колонки 308 (прибор clip52, 29.09; слово Серга 01:38). На 390 и шире — прежний --t-7 (390: min(38; 38,85) = 38). */ .v51-h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: min(var(--t-7), calc((100vw - 2 * var(--gutter)) / 8.7)); line-height: 1.1; letter-spacing: -.03em; text-transform: uppercase; color: var(--fg); /* 1.1, а не .92 T2+: крышка «Й» в «КОМНАТОЙ» задевала «Т» строкой выше — дефект есть и в бою /v4/ */ text-wrap: balance; } /* F-19: H1 + подстрока ≤ 4 строк (DESIGN-LAW.md:37-39) — на 1440 подстрока одной строкой */ .v51-sub { margin: 26px 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); white-space: nowrap; } .v51-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: var(--m); } .v51-call { min-height: 56px; padding: 0 26px; font-size: var(--t-btn); } /* ── 4 · РОТАЦИЯ: слот S-HERO + биты ПРАВДЫ ────────────────────────────── Стопка готовых кадров, .is-active, кроссфейд только opacity. Каждый кадр несёт паспорт предмета data-subject (доли исходника) и свой кадр в кадре: позиция, масштаб, точка масштаба — так ключевая деталь встаёт в свободную зону (колонки 10–12 и выше текста), а не под H1 (F-15). Масштаб ≤ 1,35, кадр 2880. */ .v51-rot { position: absolute; inset: 0; z-index: 0; background: var(--bg2); } .v51-rot__f { position: absolute; inset: 0; margin: 0; overflow: clip; opacity: 0; transition: opacity var(--dur-fade) cubic-bezier(.4, 0, .2, 1); } .v51-rot__f.is-active { opacity: 1; } .v51-rot__f picture { display: contents; } .v51-rot__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: var(--grade-real); transform: scale(var(--zoom, 1)); transform-origin: var(--origin, 50% 50%); } .v51-rot__f[data-class="visualization"] img { filter: var(--grade-vis); } /* диптих: шов — межколонник сетки 8|9 (F-16): левая часть — под текстом, правая — свободная зона */ .v51-rot__f--duo { display: grid; grid-template-columns: calc((100% - var(--content)) / 2 + 16 * var(--m) - var(--col-gap)) 1fr; column-gap: var(--col-gap); background: var(--bg); } .v51-rot__f--duo .v51-rot__half { position: relative; overflow: clip; } .v51-rot__f--duo .v51-rot__half:nth-child(2) img { object-position: var(--pos2, 50% 50%); transform: none; } /* затемнение: сверху под шапкой; текстовая зона — до кромки H1 + 1 модуль, дальше кадр чистый */ .v51-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14,15,17,.62) 0, rgba(14,15,17,0) 16%); } /* спад за 2 модуля с мягким хвостом: спад за 1 модуль (.6 → 0 на 52 px) читался светлой вертикальной полосой через весь кадр */ .v51-hero__scrim::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--scrim-edge); background: linear-gradient(90deg, rgba(14,15,17,.88) 0, rgba(14,15,17,.8) 50%, rgba(14,15,17,.6) calc(100% - 2 * var(--m)), rgba(14,15,17,.3) calc(100% - var(--m)), rgba(14,15,17,.1) calc(100% - var(--m) / 3), rgba(14,15,17,0) 100%); } .v51-hero__scrim::after { content: ""; position: absolute; inset: 70% 0 0 0; background: linear-gradient(180deg, rgba(14,15,17,0) 0, rgba(14,15,17,.55) 100%); } /* шильдик класса картинки — правило одно на класс (VSPEC-5.1 §1.6) */ .v51-plate { display: inline-grid; grid-auto-flow: column; align-items: stretch; margin: 0; background: rgba(14,15,17,.92); border-left: 3px solid var(--fg); color: var(--fg2); } .v51-plate > span { display: flex; align-items: center; padding: 8px 12px; } .v51-plate > span + span { border-left: 1px solid var(--line2); } .v51-plate > span[hidden] { display: none; } /* визуализация без года: ячейки нет (R-82) */ .v51-plate > span:first-child { color: var(--fg); } .v51-plate--m { display: none; } .v51-plate--stack { grid-auto-flow: row; grid-template-columns: auto auto; } .v51-plate--stack > span:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line2); } /* класс ВИЗУАЛИЗАЦИЯ: срез угла у шильдика и слово «визуализация» первым */ .v51-plate[data-class="visualization"] { border-left-color: var(--acc-cold); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); } /* точки-биты и пауза: цели ≥ 44 × 44, видимая часть — черта 24 × 3 */ .v51-ctl { display: flex; align-items: center; gap: 0; } .v51-dots { display: flex; } .v51-dots button { appearance: none; border: 0; background: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; } .v51-dots button::before { content: ""; width: 24px; height: 3px; background: var(--line2); transition: background .2s ease; } .v51-dots button[aria-current="true"]::before { background: var(--fg); } .v51-dots button:focus-visible { outline: 2px solid var(--acc); outline-offset: -4px; } .v51-pause { appearance: none; width: 44px; height: 44px; margin-left: 8px; display: grid; place-items: center; border: 1px solid var(--line2); background: rgba(14,15,17,.72); color: var(--fg2); cursor: pointer; } .v51-pause:hover { border-color: var(--fg); color: var(--fg); } .v51-pause svg { width: 12px; height: 12px; } .v51-pause .i-play { display: none; } .v51-pause[aria-pressed="true"] .i-play { display: block; } .v51-pause[aria-pressed="true"] .i-pause { display: none; } /* карточка «Михаил Стрелов · мастер, Тольятти»: вход в «Работы» (М9, R-21, R-25). Круг 2 — слово владельца 28.09 17:05: «нормальную сделать глассморфизную подложку, а то там графитовый квадрат не в размер самой плашки стоит». Плашка — стекло над кадром: полупрозрачная заливка + размытие того, что под ней (backdrop-filter), волосяная кромка по всему контуру, включая срез угла; теней нет (закон §2/§2-bis). Закон §3 запрещает НЕпрозрачную плашку поверх кадра (DESIGN-LAW.md:126-127) — стекло полупрозрачно, кадр сквозь него виден. Портрет — вырезка с альфой (фон снят), бюст во всю высоту плашки заподлицо с левым, верхним и нижним краем: квадрата «не в размер» больше нет. Размеры — внутренние кромки компонента, модулем не меряются (F-18): высота плашки --card-h (104 · 116 · 124 на 390 · 1440 · 2560), колонка портрета — --card-h × 1,089 (пропорция кадра бюста 2352 × 2160). */ .v51-card { --card-h: clamp(104px, calc(92px + 1.667vw), 124px); --card-pw: calc(var(--card-h) * 1.089); --bw: 1px; position: relative; isolation: isolate; display: grid; grid-template-columns: var(--card-pw) minmax(0, 1fr); column-gap: 20px; align-items: center; min-height: var(--card-h); padding: 0 calc(var(--chamfer) + 12px) 0 0; color: var(--fg); text-decoration: none; background: linear-gradient(160deg, rgba(244,245,247,.12) 0, rgba(244,245,247,.05) 45%, rgba(244,245,247,.02) 100%), rgba(22,24,27,.36); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); } /* размытие — после load + простоя (v51-home.js ставит html[data-glass]): на первой отрисовке оно стоило LCP 0,3–0,4 с на 390 под Slow 4G + CPU×4 (A/B круга 2); до включения и без JS плашка — та же подкраска без размытия (под ней скрим .8–.88) */ html[data-glass] .v51-card { -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(.88); backdrop-filter: blur(22px) saturate(1.4) brightness(.88); } /* волосяная кромка стекла: рамка одним многоугольником с дырой (evenodd) — идёт и по срезу угла; сверху светлее (блик ребра) */ .v51-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(244,245,247,.46), rgba(244,245,247,.16)); clip-path: polygon(evenodd, 0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 0, var(--bw) var(--bw), var(--bw) calc(100% - var(--bw)), calc(100% - var(--chamfer) - var(--bw) * .414) calc(100% - var(--bw)), calc(100% - var(--bw)) calc(100% - var(--chamfer) - var(--bw) * .414), calc(100% - var(--bw)) var(--bw), var(--bw) var(--bw)); } a.v51-card:hover::after { background: linear-gradient(180deg, rgba(244,245,247,.72), rgba(244,245,247,.28)); } a.v51-card:focus-visible { outline: none; --bw: 2px; } a.v51-card:focus-visible::after { background: var(--acc); } .v51-card__f { position: relative; z-index: 1; align-self: stretch; width: var(--card-pw); overflow: clip; } .v51-card__f picture { display: contents; } .v51-card__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: var(--grade-vis); } .v51-card__t { position: relative; z-index: 1; display: grid; gap: 3px; padding-block: 10px; } .v51-card__n { font-family: var(--font-mono); font-weight: var(--w-mono); font-size: var(--t-2); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--fg); } .v51-card__r { color: var(--fg2); } /* подпись класса на стекле — ступень ряда --n-200, не --fg3: к пикселям под стеклом --fg3 давал 4,34–4,68 на Г1 и 3,52 на Г9 (замер круга 2, instruments/photo) — класс картинки обязан читаться (§1.6); 13 на 1440, 12 на 390 */ .v51-card__cls { color: var(--n-200); font-size: var(--t-1); } .v51-card__go { font-size: var(--t-2); line-height: 1.35; color: var(--fg); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ── 5 · ОФФЕР-СТРОКА под сгибом: список перевязкой на всех ширинах (F-17) ── */ .v51-offer { background: var(--bg); padding: var(--m) 0 calc(2 * var(--m)); } .v51-offer__list { display: grid; } .v51-offer__i { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; padding: 16px 0 21px; border-top: 1px solid var(--line2); color: var(--fg); text-decoration: none; } /* излом «перевязка»: 2-й и 4-й ряд на полкирпича (первый ребёнок — подстрока для 390). Ряд сдвигается ЦЕЛИКОМ и сохраняет ширину — выходит на 1 модуль в правое поле; иначе сетка ряда пересчитывается на узкой ширине и строка уезжает на 35 px, не на модуль (кадр раунда 2). На 390 ширина ряда − 26 — как заявлено в vkus.breaks. */ .v51-offer__i:nth-child(odd) { margin-left: var(--m); margin-right: calc(-1 * var(--m)); } .v51-offer__lead { display: none; } a.v51-offer__i:hover { border-top-color: var(--fg); } .v51-offer__t { grid-column: 1 / span 4; display: flex; align-items: baseline; gap: 12px; 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; } .v51-offer__t::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--fg); transform: translateY(-.18em); } .v51-offer__i--gift .v51-offer__t::before { background: var(--acc); } .v51-offer__p { grid-column: 5 / span 7; margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); } /* ── 6 · СЛУЖЕБНАЯ ПОЛОСА: подарок и телефон в каждом окне (F-23, О3), телефон — якорь ── */ .v51-strip { position: fixed; z-index: 30; inset: auto 0 0 0; height: calc(var(--strip-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); border-top: 1px solid var(--line); color: var(--fg2); } .v51-strip__in { height: var(--strip-h); display: flex; align-items: center; gap: 0 32px; } .v51-strip__c { display: flex; align-items: center; gap: 10px; white-space: nowrap; } .v51-strip__c::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--fg3); } .v51-strip__c--gift { color: var(--fg); } .v51-strip__c--gift::before { background: var(--acc); } .v51-strip__c a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 5px; } .v51-strip__c--gift a { text-decoration-color: var(--line2); } .v51-strip__end { margin-left: auto; color: var(--fg3); } /* меню на 390: лист под шапкой, ссылки ≥ 44 */ .v51-menu { position: fixed; z-index: 40; inset: var(--head-h) 0 auto 0; display: grid; padding: 8px var(--gutter) 21px; background: var(--bg); border-bottom: 1px solid var(--line); max-height: calc(100svh - var(--head-h) - var(--strip-h)); overflow-y: auto; overscroll-behavior: contain; } /* F1: на 375 высотой лист не выходит за окно */ .v51-menu a { display: flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); } .v51-menu[hidden] { display: none; } /* хвост стенда: где кончается первый экран (на бою его нет) */ .v51-next { padding: calc(2 * var(--m)) 0; background: var(--bg2); color: var(--fg3); } /* ── 7 · ДО 64rem ────────────────────────────────────────────────────────── */ @media (max-width: 63.99rem) { .v51-head__nav { display: none; } .v51-head__end { grid-column: 5 / -1; } .v51-sub { white-space: normal; } /* F4-FIX F1: бургер до 1023 включительно, десктопная навигация — с 1024 (планшет 768–834, телефон горизонтально 844/932) */ .v51-head__menu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; } .v51-head__menu svg { width: 20px; height: 20px; } } @media (min-width: 48rem) and (max-width: 63.99rem) { .v51-head__end { gap: 16px; } } /* ── 8 · 390 ─────────────────────────────────────────────────────────────── */ @media (max-width: 47.99rem) { .v51-grid { grid-template-columns: minmax(0, 1fr); } .v51-rot__f img { object-position: var(--pos-m, 50% 50%); transform: scale(var(--zoom-m, 1)); transform-origin: var(--origin-m, 50% 50%); } .v51-rot__f--duo { grid-template-columns: 1fr; } .v51-rot__f--duo .v51-rot__half:nth-child(2) { display: none; } .v51-head__brand { grid-column: 1; grid-row: 1; justify-self: start; } .v51-head__end { grid-column: 1; grid-row: 1; justify-self: end; gap: 8px; } /* F2: зазор трубка↔бургер ≥ 8 */ .v51-head__tel, .v51-head__zamer { display: none; } .v51-head__ico, .v51-head__menu { display: grid; place-items: center; width: 44px; height: 44px; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; } .v51-head__ico svg, .v51-head__menu svg { width: 20px; height: 20px; } .v51-head__menu { margin-right: -12px; } /* затемнение на 390: только снизу, под текстовой полосой; верх кадра — свободная зона предмета */ .v51-hero__scrim { background: linear-gradient(180deg, rgba(14,15,17,.55) 0, rgba(14,15,17,0) 10%, rgba(14,15,17,0) 36%, rgba(14,15,17,.8) 54%, rgba(14,15,17,.88) 100%); } .v51-hero__scrim::before, .v51-hero__scrim::after { display: none; } /* строки: управление кадром · свободное поле · текст (шильдик, надзаголовок, H1, звонок, карточка) · подстрока ниже сгиба */ .v51-hero__body { grid-template-rows: auto 1fr auto; align-content: stretch; padding: calc(var(--head-h) + 8px) 0 calc(var(--strip-h) + 16px); } .v51-hero__side { display: contents; } .v51-hero__side > .v51-plate { display: none; } /* колонка одна: span 9 с десктопа иначе рождает 8 неявных колонок, и управление уезжает к середине кадра */ .v51-ctl { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; flex-direction: column; } .v51-dots { flex-direction: column; } /* LATER-06: черты без плашки, контраст на кадре — тёмный контур 1 px */ .v51-dots button::before { width: 3px; height: 20px; outline: 1px solid rgba(14,15,17,.7); } .v51-pause { margin: 4px 0 0; background: rgba(14,15,17,.55); } .v51-hero__text { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-direction: column; } .v51-plate--m { display: inline-grid; align-self: flex-start; margin-bottom: 13px; } .v51-eyebrow { font-size: var(--t-3); margin-bottom: 10px; } .v51-actions { flex-direction: column; align-items: stretch; margin-top: 26px; gap: 16px; } .v51-call { width: 100%; } .v51-hero .v51-sub { display: none; } /* F-19: в первом окне телефона только H1 — подстрока открывает оффер-строку */ .v51-offer__lead { display: block; margin: 0 0 26px; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); } .v51-card { column-gap: 14px; padding-right: calc(var(--chamfer) + 8px); } .v51-card__n { font-size: var(--t-3); } .v51-card__t { padding-block: 8px; gap: 2px; } .v51-offer__i { grid-template-columns: minmax(0, 1fr); gap: 8px; } .v51-offer__i:nth-child(odd) { margin-right: 0; } .v51-offer__t, .v51-offer__p { grid-column: 1; } .v51-strip__in { gap: 0 16px; } .v51-strip__c--name, .v51-strip__c--guar, .v51-strip__end { display: none; } .v51-strip__c--tel { order: -1; } } /* ── 9 · уменьшенное движение: ротация стоит, точки переключают мгновенно ── */ @media (prefers-reduced-motion: reduce) { .v51-rot__f { transition: none; } } /* ══ ДОПОЛНЕНИЯ СБОРКИ 5.1 (craftsman-5da246, 28.09) — не из стенда: правила первого экрана, которые должны стоять в критическом пути (v51-sections.css грузится без блокировки отрисовки — он весь ниже сгиба). ══ */ /* висячий маршрут (сборщик превращает в , VSPEC §0) стоит в строке как пункт, а не текстом: правила стенда написаны на «a» — здесь их повтор для span, без :hover (перехода нет) */ .v51-head__nav > span { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg3); } .v51-menu > span { display: flex; align-items: center; min-height: 44px; color: var(--fg3); border-bottom: 1px solid var(--line); } /* ── faces=off (§1.8 «право»): карточка Михаила без квадрата — колонка лица схлопывается ── */ html[data-faces="off"] .v51-card { grid-template-columns: minmax(0, 1fr); padding-left: 21px; } /* высота та же: --card-h */ /* ── слот S-HERO (§1.8): луп пролёта поверх постера того же кадра; класс ВИЗУАЛИЗАЦИЯ — стальной грейд. Разметка слота готова: