/* Вторая версия лендинга. ──────────────────────────────────────────────────────────────────────── Раскладка первого экрана снята с референса Convix: скруглённый блок, ролик фоном, плавающая пилюля-шапка. На подносе, где в референсе лежит картинка панели, у нас настоящая карточка справочника — единственная форма на сайте. Три шрифтовые роли, и у каждой своя работа: Onest — весь текст и заголовки; Playfair Display — курсивом ровно одно слово в заголовке; JetBrains Mono — подписи, ключи полей, адреса, единицы. Моноширинный здесь не украшение: карточка организации — это запись в справочнике, а ключи записи набирают именно так. Шрифты лежат у нас: из России Google Fonts отдаётся нестабильно. Цвет означает состояние: жёлтый маркер — пустая строка «Сайт», то, чего у клиента нет; зелёный — то, что появилось; янтарный — то, что можно нажать. Больше цвет ни на что не тратится. */ :root { --ink: #0b0f1a; --ink-2: #40474d; --ink-3: #6b7276; --line: #e4e4e1; --line-2: #efefec; --page: #ededed; --paper: #fff; --frame: #d9d9d9; --tray: #f5f2ee; --amber: #d9880c; --amber-soft: rgb(217 136 12 / .1); --yellow: #f5e13c; --green: #16a34a; --bad: #c2410c; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Playfair Display', Georgia, serif; --sans: Onest, system-ui, -apple-system, sans-serif; --gap: 12px; --wrap: 1160px; --pad: 24px; } @media (min-width: 640px) { :root { --gap: 16px; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.v2 { margin: 0; color: var(--ink); background: var(--page); background-image: linear-gradient(180deg, #f2f1ee 0%, var(--page) 34%, #e8e7e3 100%); background-attachment: fixed; font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .v2 img, .v2 video { display: block; max-width: 100%; } .v2 ::selection { background: rgb(245 225 60 / .55); color: var(--ink); } .v2 :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } /* У полей карточки рамка вокруг всей строки выглядела заплаткой поверх вёрстки. Признак фокуса тот же по силе, но на своём месте: подчёркивание и ключ поля меняют цвет. Правило перечисляет и input, и textarea: комментарий — единственная textarea на странице, и без неё он один получал янтарную рамку, когда все соседи обходились подчёркиванием. */ .v2 .rec input:focus-visible, .v2 .rec textarea:focus-visible { outline: none; } .rec__org:focus-within, .fld:focus-within { border-bottom-color: var(--amber); } .fld:focus-within .fld__k { color: var(--amber); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } .sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip:focus { position: fixed; inset: 12px auto auto 12px; z-index: 99; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; } .ic { width: 18px; height: 18px; flex: none; } .ic--sm { width: 14px; height: 14px; } /* Курсивная антиква — единственный акцент в типографике, ровно одно слово на страницу. Playfair крупнее Onest в том же кегле, поэтому уменьшен. */ .hd__it { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95em; } /* Появление ---------------------------------------------------------------- */ /* Прячем блоки только когда скрипт точно жив: страховочный таймер в снимает класс js, если main.js не доехал, и страница остаётся видимой. */ .js .reveal, .js .proc { opacity: 0; transform: translateY(22px); } .js .reveal.is-in, .js .proc.is-in { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s cubic-bezier(.22, .7, .3, 1); transition-delay: calc(var(--i, 0) * 65ms); } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .proc { opacity: 1; transform: none; transition: none; } } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .nv__wrap, .hd__badge, .hd__h, .hd__lead, .tray { opacity: 0; animation: rise .65s ease-out var(--d, 0s) forwards; } .nv__wrap { --d: .05s; } .hd__badge { --d: .15s; } .hd__h { --d: .25s; } .hd__lead { --d: .35s; } .tray { --d: .45s; } @media (prefers-reduced-motion: reduce) { .nv__wrap, .hd__badge, .hd__h, .hd__lead, .tray { opacity: 1; animation: none; } } /* Общие детали ------------------------------------------------------------- */ .eyebrow { margin: 0 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); } .sec { padding: 96px 0; } @media (min-width: 768px) { .sec { padding: 128px 0; } } .sec__head { max-width: 720px; margin: 0 auto 44px; text-align: center; } .sec__h { margin: 0; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(28px, 4.4vw, 46px); } .sec__lead { margin: 18px auto 0; color: var(--ink-2); max-width: 620px; } .btn, .rec__go, .bar__go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; background: var(--ink); color: #fff; border-radius: 999px; padding: 14px 26px; font: 500 15px/1 var(--sans); transition: background .2s, transform .15s; } .btn:hover, .rec__go:hover, .bar__go:hover { background: #242a38; } .btn:active, .rec__go:active { transform: translateY(1px); } .btn--wide { width: 100%; } .mark { background: linear-gradient(transparent 56%, rgb(245 225 60 / .9) 56%); padding: 0 3px; box-decoration-break: clone; } /* Кадр --------------------------------------------------------------------- */ .frame { position: relative; margin: var(--gap); overflow: hidden; min-height: calc(100svh - var(--gap) * 2); border-radius: 20px; background: var(--frame); display: flex; } @media (min-width: 640px) { .frame { border-radius: 26px; } } .frame__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Параллакс включается только на большом экране и только скриптом: запас на увеличение нужен, чтобы сдвиг не обнажил край кадра, и держать его там, где параллакса нет, незачем. */ .frame__v.is-parallax { transform: scale(1.07); will-change: transform; } /* Плёнка поверх ролика: шёлк местами уходит в серое, и по тёмным складкам тёмный текст терял контраст. Осветляем кадр, а не затемняем, — заголовок здесь тёмный, и белая плёнка работает на него. */ .frame__tint { position: absolute; inset: 0; background: rgb(255 255 255 / .18); } .frame__in { position: relative; z-index: 10; width: 100%; display: flex; flex-direction: column; padding: 62px 0 28px; } @media (min-width: 640px) { .frame__in { padding: 78px 0 40px; } } /* Шапка-пилюля ------------------------------------------------------------- */ /* Шапка едет по всей странице и по дороге меняет форму: над первым экраном она широкая и плотная, ниже — сжимается и становится полупрозрачной. Морфинг идёт по ширине, отступам и фону одновременно, с лёгким перелётом в конце, — так это выглядит на «динамическом острове». Переход навешен на .nv, а не на обёртку: обёртка задаёт только положение, и её ширина в анимации не участвует. */ .nv__wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 14px 12px 0; pointer-events: none; transition: padding-top .45s cubic-bezier(.22, .9, .3, 1); } @media (min-width: 640px) { .nv__wrap { padding: 22px 16px 0; } } /* В пути по странице шапка подбирается к самому краю: наверху ей нужен воздух, чтобы читаться частью первого экрана, а ниже — наоборот, чем плотнее к краю, тем меньше она забирает у контента. */ .nv__wrap.is-up { padding-top: 5px; } @media (min-width: 640px) { .nv__wrap.is-up { padding-top: 6px; } } @media (prefers-reduced-motion: reduce) { .nv__wrap { transition: none; } } .nv__wrap > * { pointer-events: auto; } /* Метка конца первого экрана: по ней скрипт понимает, что пора сжиматься. */ .nv__mark-line { position: absolute; top: 190px; left: 0; width: 1px; height: 1px; } .nv { position: relative; width: 100%; max-width: 860px; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 2px rgb(11 15 26 / .06); padding: 8px; overflow: hidden; transition: max-width .62s cubic-bezier(.34, 1.28, .5, 1), padding .62s cubic-bezier(.34, 1.28, .5, 1), background-color .5s ease, border-color .5s ease, box-shadow .5s ease; } /* СЖАТИЕ ШАПКИ ОТКЛЮЧЕНО по просьбе заказчика: шапка едет по странице, но размер не меняет. Правила ниже рабочие — чтобы вернуть «динамический остров», достаточно снять этот комментарий целиком. (* Сжатое состояние. Ширина, отступы и плотность меняются вместе — если двигать что-то одно, морфинга не читается, получается просто скачок. *) .nv.is-float { max-width: 580px; padding: 6px; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-color: rgb(11 15 26 / .07); box-shadow: 0 10px 30px rgb(11 15 26 / .12); } .nv.is-float .nv__links { gap: 18px; } .nv.is-float .nv__links a { font-size: 13.5px; } .nv.is-float .nv__sign { width: 56px; height: 56px; } .nv.is-float .cta { padding: 5px 5px 5px 14px; font-size: 13.5px; } .nv.is-float .cta__o { width: 22px; height: 22px; } .nv.is-float .nv__tg { opacity: 0; width: 0; overflow: hidden; } */ /* Пока сжатия нет, состояние is-float меняет только плотность фона: над первым экраном шапка белая, ниже — полупрозрачная с размытием. */ .nv.is-float { background: rgb(255 255 255 / .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-color: rgb(11 15 26 / .07); box-shadow: 0 10px 30px rgb(11 15 26 / .12); } .nv__links, .nv__links a, .nv__sign, .nv__sign::after, .cta, .cta__o, .nv__tg { transition: all .62s cubic-bezier(.34, 1.28, .5, 1); } /* Возврат к широкому виду сопровождается одним проходом света по пилюле — тем же приёмом, что и на готовой кнопке карточки. */ .nv.is-back::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 34%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .85), transparent); transform: skewX(-18deg); animation: navShine .9s ease-out 1; pointer-events: none; } @keyframes navShine { to { left: 120%; } } @media (prefers-reduced-motion: reduce) { .nv, .nv__links, .nv__links a, .nv__sign, .cta, .cta__o, .nv__tg { transition: none; } .nv.is-back::after { animation: none; } } /* Знак и слово рядом: заглавные с разрядкой держатся на одной высоте с плиткой и не спорят со львом за внимание. */ .nv__mark { flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .nv__name { font: 600 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: font-size .62s cubic-bezier(.34, 1.28, .5, 1), opacity .4s ease; } .nv.is-float .nv__name { font-size: 13px; } @media (max-width: 400px) { .nv__name { display: none; } } /* Знак — белый лев на монете. До этого он был одноцветным и брал цвет текста рядом: в белой пилюле шапки это давало чернильного льва, и заказчик его не принял — знак должен быть белым. Белое на белом не живёт, поэтому под знаком диск. Именно диск, а не плитка: квадрат в круглой по торцам пилюле читается чужой наклейкой — это уже проверяли и отклоняли. Металл — янтарь кнопки на полтона глубже: сверху сам --amber, книзу темнее. Серебро пробовали первым, оно спокойнее, но знак тогда живёт отдельно от единственного цветного элемента сайта. Здесь наоборот: диск и кнопка «Получить макет» звучат одним цветом. Прежний запрет на янтарь снят вместе с плоской заливкой. Он касался золотого знака на белом: в 18 px золото теряло просветы между прядями гривы. Теперь янтарь ушёл в диск, а лев поверх него белый, и просветы держит подложка, а не сам знак. Каёмка волосяная: кольцо в один пиксель по краю и светлое кольцо внутри, вместе они дают прочтение «монета». Кольцо взято от самого металла, только темнее: чернильное на тёплом диске выглядит грязью. Толстый гурт с фаской пробовали — в 45 px он превращается в обруч и забирает внимание у самого льва. Пробовали 28.08.2026 снять кольца и увеличить льва (как на выгрузках для мессенджера) — заказчик отклонил: на сайте знак остаётся монетой. Сплошное поле без колец живёт только в значке вкладки и в аватарках. Ореол снят: размытая тёмная копия имела смысл под чернильным знаком, под белым на диске она только грязнит края. */ .nv__sign { display: block; width: 45px; height: 45px; position: relative; border-radius: 50%; background: linear-gradient(160deg, var(--amber), #a8630a); box-shadow: inset 0 0 0 1px rgb(70 40 2 / .34), inset 0 0 0 3px rgb(255 255 255 / .22); } .nv__sign::before { content: none; } .nv__sign::after { content: ''; position: absolute; inset: 17%; -webkit-mask: url(../img/lion.svg) center/contain no-repeat; mask: url(../img/lion.svg) center/contain no-repeat; /* Заливка знака — не плоский белый, а полоса света внутри маски. Она едет по фону, поэтому по гриве идёт блик, а форма льва цела. */ background: linear-gradient(100deg, #fff 40%, rgb(255 255 255 / .45) 50%, #fff 60%); background-size: 300% 100%; } /* Проявление: знак выходит из ничего, чуть перелетает и садится на место. Дальше по нему раз в 3.6 с проходит блик — тот же приём, что на кнопке карточки и на возврате шапки, так что движение на сайте одно и то же. Задержка блика равна длине проявления, иначе на стыке виден скачок. Под классом js: если скрипт не доехал, знак просто виден. */ .js .nv__sign::after { animation: signCore 1.5s cubic-bezier(.22, 1.1, .36, 1) both, signSweep 3.6s ease-in-out 1.5s infinite; } @keyframes signCore { 0% { opacity: 0; transform: scale(.72); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes signSweep { 0% { background-position: 100% 0; } 60%, 100% { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { .js .nv__sign::after { animation: none; } } @media (min-width: 640px) { .nv__sign { width: 50px; height: 50px; } } .nv__links { display: none; gap: 20px; margin-left: 16px; } .nv__links a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); text-decoration: none; font-size: 14px; } .nv__links a:hover { color: var(--ink-2); } .nv__links .is-accent { color: var(--amber); } .nv__links a.is-here { color: var(--amber); } .nv__menu a.is-here { color: var(--amber); } .nv__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); } .nv__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nv__tg { display: none; color: var(--ink-2); text-decoration: none; font-size: 14px; } .nv__tg:hover { color: var(--ink); } @media (min-width: 900px) { .nv__links { display: flex; } .nv__tg { display: inline; } } /* Кнопка со вписанным кружком — узнаваемая деталь референса. */ .cta { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: var(--amber); color: #fff; text-decoration: none; border-radius: 999px; padding: 6px 6px 6px 16px; font: 500 14px/1 var(--sans); transition: filter .2s, transform .15s; } .cta:hover { filter: brightness(1.08); } .cta:active { transform: translateY(1px); } .cta__o { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgb(255 255 255 / .22); } .cta--dark { background: var(--ink); } .cta--dark:hover { background: #242a38; filter: none; } .cta--lg { padding: 9px 9px 9px 26px; font-size: 15px; gap: 12px; } .cta--lg .cta__o { width: 30px; height: 30px; } .cta__t--sm { display: inline; } .cta__t--lg { display: none; } @media (min-width: 640px) { .cta__t--sm { display: none; } .cta__t--lg { display: inline; } } .nv__burger { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--ink); cursor: pointer; padding: 0; } @media (min-width: 900px) { .nv__burger { display: none; } } .nv__menu { position: fixed; top: 66px; left: 14px; right: 14px; z-index: 70; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 32px rgb(11 15 26 / .14); padding: 8px; display: flex; flex-direction: column; } .nv__menu[hidden] { display: none; } .nv__menu a { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: var(--ink); text-decoration: none; font-size: 15px; border-radius: 12px; } .nv__menu a:hover { background: var(--page); } .nv__menu .is-accent { color: var(--amber); } /* Заголовок первого экрана -------------------------------------------------- */ .hd { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 16px 26px; } @media (min-width: 640px) { .hd { padding: 48px 16px 34px; } } .hd__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; background: var(--paper); border-radius: 999px; padding: 6px 16px; box-shadow: 0 1px 2px rgb(11 15 26 / .07); font-size: 13px; font-weight: 500; } .hd__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } .hd__h { margin: 20px 0 0; max-width: 900px; font-size: clamp(36px, 8vw, 72px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; } .hd__lead { margin: 16px 0 0; max-width: 560px; padding: 0 8px; color: #363d43; font-size: clamp(14px, 3.5vw, 17px); } /* Поднос и карточка справочника --------------------------------------------- */ .tray { margin-top: auto; padding: 0 12px; } @media (min-width: 640px) { .tray { padding: 0 16px; } } .tray__in { width: 100%; max-width: 860px; margin: 0 auto; background: linear-gradient(180deg, #faf8f5, var(--tray)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 18px 50px rgb(11 15 26 / .07); border-radius: 24px; padding: 12px; } @media (min-width: 640px) { .tray__in { padding: 16px; } } /* Куда встаёт страница по ссылке на карточку. Без этого браузер ставит верх формы вплотную к верху окна, и её накрывает плавающая шапка — человек попадает в середину карточки и не видит, с чего она начинается. Отступ равен высоте пилюли с её полями плюс немного воздуха. */ .rec { scroll-margin-top: 104px; } @media (max-width: 639px) { .rec { scroll-margin-top: 84px; } } .rec { position: relative; background: var(--paper); border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgb(11 15 26 / .06); } @media (min-width: 640px) { .rec { padding: 24px 26px; } } .rec__top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .rec__rest { color: var(--ink-3); } .rec.is-ready .rec__rest { color: var(--green); } /* Полоса заполнения. Едет через scaleX на композиторе, а не перерисовкой градиента: значение ставит main.js в --pn долей, а не процентами. */ .rec__bar { display: block; height: 3px; border-radius: 999px; background: var(--line-2); position: relative; overflow: hidden; margin-bottom: 18px; } .rec__bar::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--amber); transform: scaleX(var(--pn, 0)); transform-origin: left; transition: transform .35s cubic-bezier(.22, .7, .3, 1), background .3s; } .rec.is-ready .rec__bar::after { background: var(--green); } .rec__org { margin: 0 0 4px; border-bottom: 1px solid var(--line); transition: border-color .2s; } .rec__orgIn { width: 100%; border: 0; background: none; font: 500 clamp(20px, 3.4vw, 26px)/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink); padding: 4px 0 12px; outline: none; } .rec__orgIn::placeholder { color: #b7bcbe; } .rec__grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 620px) { .rec__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; } } .fld { display: grid; grid-template-columns: 84px 1fr; align-items: baseline; gap: 4px 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .fld__k { font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .fld--req .fld__k::after { content: '*'; color: var(--amber); margin-left: 3px; } .fld__v { border: 0; background: none; outline: none; width: 100%; padding: 0; font: 400 16px/1.4 var(--sans); color: var(--ink); } .fld__v::placeholder { color: #b7bcbe; } /* Комментарий занимает обе колонки: строка свободная, и делить её пополам с соседним полем не за чем. */ .fld--note { grid-column: 1 / -1; } .fld__area { resize: none; overflow: hidden; min-height: 24px; font-family: var(--sans); line-height: 1.5; } .fld__area::placeholder { color: #b7bcbe; } .fld__err { grid-column: 2; font-size: 12px; color: var(--bad); } .fld__err:empty { display: none; } .fld.is-bad { border-bottom-color: var(--bad); } .rec__org.is-bad { border-bottom-color: var(--bad); } .chk.is-bad .chk__l span { color: var(--bad); } /* Строка «Сайт» — то, ради чего страница написана. У клиента она пустая в 2ГИС и на Картах; здесь маркер медленно дышит, пока карточка не заполнена, и гаснет, когда остаётся только нажать. */ .rec__site { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .rec__k { font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); width: 84px; flex: none; } .rec__val { flex: 1; min-width: 140px; display: flex; align-items: center; } .rec__before .mark { font-size: 16px; animation: breathe 3.4s ease-in-out infinite; } .rec.is-ready .rec__before .mark { animation: none; } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .rec__before .mark { animation: none; } } .rec__after { display: none; align-items: center; gap: 8px; font-size: 16px; color: var(--green); } .rec.is-live .rec__before { display: none; } .rec.is-live .rec__after { display: flex; } .rec__after .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgb(22 163 74 / .2); } .rec__domain { font-family: var(--mono); font-size: 15px; white-space: pre; } .rec__after.is-typing .rec__domain::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--green); vertical-align: -2px; animation: caret .6s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .rec__live { opacity: 0; transition: opacity .4s ease; } .rec__after.is-typed .rec__live { opacity: 1; } .rec__live { color: var(--ink-3); font-size: 12px; } .rec__go { padding: 13px 10px 13px 22px; } .rec__go .cta__o { background: rgb(255 255 255 / .16); } .rec__go[disabled] { opacity: .55; cursor: default; } /* Когда заполнено всё — по кнопке один раз проходит блик: сигнал, что осталось только нажать. Дальше он не повторяется, чтобы не мельтешить. */ .rec.is-ready .rec__go { position: relative; overflow: hidden; } .rec.is-ready .rec__go::after { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .3), transparent); transform: skewX(-18deg); animation: shine 1.1s ease-out .1s 1; } @keyframes shine { to { left: 130%; } } @media (prefers-reduced-motion: reduce) { .rec.is-ready .rec__go::after { animation: none; } } .rec__fine { margin: 16px 0 0; display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-2); } .chk { margin: 0; } .chk__l { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; line-height: 1.45; } .chk__l input { margin: 3px 0 0; accent-color: var(--amber); flex: none; } .chk__l a { color: inherit; } .chk__l i { color: var(--ink-3); font-style: normal; } .chk .fld__err { display: block; padding-left: 24px; } .trap { position: absolute; left: -9999px; } .rec__status { margin: 10px 0 0; font-size: 14px; color: var(--bad); } .rec__status[data-ok] { color: var(--green); } .rec__status:empty { display: none; } /* Бегущая строка ------------------------------------------------------------ */ .marq { display: flex; gap: 0; overflow: hidden; padding: 22px 0; background: var(--paper); border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marq__row { display: flex; flex: none; gap: 0; list-style: none; margin: 0; padding: 0; font: 400 14px/1 var(--mono); letter-spacing: .04em; text-transform: lowercase; color: var(--ink-2); animation: marq 46s linear infinite; animation-play-state: paused; } .marq.is-on .marq__row { animation-play-state: running; } .marq__row li { display: flex; align-items: center; white-space: nowrap; } .marq__dot { margin: 0 18px; color: var(--amber); } @keyframes marq { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .marq__row { animation: none; } } /* Сравнение ----------------------------------------------------------------- */ .cmp { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } /* Таблица уезжает вбок внутри своей обёртки, а не тащит за собой страницу. */ .cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp__t { width: 100%; min-width: 660px; border-collapse: collapse; text-align: left; } .cmp__t thead th { vertical-align: bottom; padding: 22px 20px 16px; border-bottom: 1px solid var(--line); font-weight: 400; } .cmp__name { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; } /* Имя внутри строки набирается так же, как в шапке: заглавные с разрядкой, полужирный. Кегль на шаг меньше — при одинаковом размере капитель рядом со строчными выглядит крупнее соседних заголовков и ломает ряд. Разрядка тоже уже шапочной (.16em → .1em): там имя стоит одно, здесь — в конце фразы, и широкий трекинг отрывал его от «Заказать в». */ .cmp__brand { font-weight: 600; font-size: .88em; letter-spacing: .1em; text-transform: uppercase; } .cmp__about { display: block; margin-top: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } /* Всё в строке прижато к её низу. Значения в чужих колонках часто занимают две строки, а в нашей — одну, и при верхней привязке короткое значение висело в воздухе над длинным. По нижнему краю последние строки всех ячеек стоят на одной линии, и ряд читается как ряд. */ .cmp__k { font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; padding: 20px 20px 10px; width: 190px; vertical-align: bottom; } .cmp__t tbody td { padding: 20px 20px 10px; font-size: 15px; color: var(--ink-2); vertical-align: bottom; } /* Последней строке нужен пол под ногами: 10 px, которых хватает между строками, у нижнего края блока читаются как обрезка — текст упирается в скруглённый угол карточки. Добавляем отступ только снизу, привязка к низу оставляет сам текст на месте, а карточка вырастает под ним. */ .cmp__t tbody tr:last-child th, .cmp__t tbody tr:last-child td { padding-bottom: 26px; } /* Разделитель один на всю таблицу и построен от чернила, а не от --line-2: тот тон задуман для белого фона и на песочной подложке нашей колонки совпадает с ней по светлоте — линия обрывалась ровно там, где колонка начиналась. Прозрачное чернило даёт один и тот же контраст на обоих фонах, и строка читается сквозной. */ .cmp__t tbody tr + tr th, .cmp__t tbody tr + tr td { border-top: 1px solid rgb(11 15 26 / .12); } /* Наша колонка стоит первой, сразу за ключами строк. Раньше она была третьей — по логике «сначала чужие варианты, потом наш», но при прокрутке вбок она уезжала за край первой, и на телефоне сравнение начиналось с конструктора. Теперь читатель видит наш столбец сразу, а чужие варианты досматривает, если захочет. Цветом колонка не кричит — просто светлее фона и темнее текстом: на странице уже есть янтарь на кнопках, и третий акцент здесь лишний. */ .cmp__t .is-us { background: var(--tray); } /* Наша колонка шире соседних: ей отдана треть таблицы, чужим по пятой части. Ширина задаётся в заголовке — остальные ячейки столбца тянутся за ним. Сумма меньше 100 %: остаток забирает колонка с ключами строк. */ .cmp__t thead th.is-us { width: 32%; } .cmp__t thead th:not(.is-us) { width: 20%; } /* Раз колонка шире, ей и воздуха внутри больше — иначе выигранное место уходит в пустоту справа, а не в саму строку. */ .cmp__t .is-us { padding-left: 26px; padding-right: 26px; } .cmp__t tbody .is-us { color: var(--ink); font-weight: 500; } .cmp__t thead .is-us { border-bottom-color: var(--ink); } /* Сноска слева, кнопка прижата к правому краю. Порядок в разметке тот же, что и на экране: сначала оговорка про усреднённые цифры, потом действие. */ .cmp__foot { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; } .cmp__note { font-size: 13px; color: var(--ink-3); max-width: 460px; } .cmp__foot .btn { margin-left: auto; } /* На узком экране кнопка возвращается под сноску во всю ширину: прижимать её вправо там некуда, а половинная кнопка в строке выглядит обрубком. */ @media (max-width: 560px) { .cmp__foot .btn { margin-left: 0; width: 100%; } } /* Что входит ---------------------------------------------------------------- */ /* align-items: start — иначе строка сетки тянется по самой высокой карточке, и когда одна раскрыта, соседняя растёт вместе с ней, показывая пустоту. Читается это как «вторая тоже открылась». */ .incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-items: start; } @media (min-width: 720px) { .incl { grid-template-columns: 1fr 1fr; gap: 14px; } } .incl__i { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .25s, transform .25s; } .incl__i:hover { border-color: #d5d2cc; box-shadow: 0 10px 28px rgb(11 15 26 / .06); transform: translateY(-2px); } .incl__d { flex: 1 0 auto; } .incl__sum { display: grid; grid-template-columns: 24px 1fr 20px; gap: 6px 14px; align-items: center; cursor: pointer; list-style: none; } .incl__sum::-webkit-details-marker { display: none; } .ico { width: 22px; height: 22px; color: var(--amber); grid-row: span 2; align-self: start; } .incl__t { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .incl__short { grid-column: 2; margin: 0; font-size: 14px; color: var(--ink-3); min-height: 2.9em; } .incl__toggle { grid-column: 3; grid-row: 1; width: 20px; height: 20px; position: relative; border-radius: 50%; background: var(--page); transition: background .2s; } .incl__toggle::before, .incl__toggle::after { content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 1.5px; background: var(--ink-2); border-radius: 2px; transition: transform .25s cubic-bezier(.22, .7, .3, 1); } .incl__toggle::after { transform: rotate(90deg); } .incl__d[open] .incl__toggle::after { transform: rotate(0); } .incl__d[open] .incl__toggle { background: var(--amber-soft); } .incl__more { margin: 14px 0 0; padding-left: 38px; font-size: 15px; color: var(--ink-2); animation: rise .35s ease-out; } .incl__from { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-3); } /* Как работаем -------------------------------------------------------------- */ /* Нумерация здесь по дням, а не «01 / 02 / 03»: последовательность настоящая, и читателю важен именно день, а не порядковый номер шага. */ .proc { list-style: none; margin: 0; position: relative; display: grid; gap: 28px; background: linear-gradient(180deg, #faf8f5, var(--tray)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9); border-radius: 26px; padding: 32px 28px; } @media (min-width: 860px) { .proc { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 70px 40px 44px; } } .proc__rail { position: absolute; left: 35px; top: 38px; bottom: 38px; width: 2px; background: #dedbd6; border-radius: 2px; } @media (min-width: 860px) { .proc__rail { left: 40px; right: 40px; top: 42px; bottom: auto; width: auto; height: 2px; } } .proc__fill { display: block; background: var(--amber); border-radius: 2px; height: 0; width: 100%; transition: height 1.6s ease .2s; } .proc.is-in .proc__fill { height: 100%; } @media (min-width: 860px) { .proc__fill { height: 100%; width: 0; transition: width 1.8s ease .2s; } .proc.is-in .proc__fill { width: 100%; } } @media (prefers-reduced-motion: reduce) { .proc__fill { transition: none; } } .proc__s { padding-left: 30px; position: relative; } @media (max-width: 859px) { .proc__s::before { left: -1px; } } @media (min-width: 860px) { .proc__s { padding: 0; } } .proc__s::before { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--tray); border: 2px solid var(--amber); } @media (min-width: 860px) { .proc__s::before { top: -35px; left: 0; } } .proc__day { display: inline-block; margin-bottom: 8px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); } .proc__t { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; } .proc__d { margin: 0; font-size: 15px; color: var(--ink-2); } /* Три обещания -------------------------------------------------------------- */ .sec--prom { padding: 0 0 96px; } @media (min-width: 768px) { .sec--prom { padding: 0 0 128px; } } .prom { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } @media (min-width: 700px) { .prom { grid-template-columns: repeat(3, 1fr); } } .prom__i { background: var(--paper); padding: 32px 28px; } .prom__n { display: block; font-size: clamp(38px, 6vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1; } .prom__t { display: block; margin: 10px 0 8px; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); } .prom__d { margin: 0; font-size: 15px; color: var(--ink-2); } /* Гарантии ------------------------------------------------------------------ */ .sec--guar { padding-top: 0; } .guar { list-style: none; margin: 0; display: grid; gap: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: 32px 28px; } @media (min-width: 760px) { .guar { grid-template-columns: 1fr 1fr; gap: 34px 48px; padding: 44px 44px; } } .guar__i { padding-left: 22px; border-left: 2px solid var(--amber); } .guar__t { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; } .guar__d { margin: 0; color: var(--ink-2); font-size: 15px; } /* Цена ---------------------------------------------------------------------- */ .tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } @media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .tier { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column; } .tier--pick { border-color: var(--ink); box-shadow: 0 18px 48px rgb(11 15 26 / .1); } .tier__badge { position: absolute; top: -11px; left: 24px; background: var(--ink); color: #fff; border-radius: 999px; padding: 5px 14px; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .tier__name { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; } .tier__story { margin: 0 0 12px; font-size: 14px; color: var(--ink-3); } .tier__fit { margin: 0 0 14px; font-size: 14px; } .tier__fit span { background: var(--amber-soft); color: #9a6208; border-radius: 6px; padding: 3px 8px; } .tier__price { margin: 0; display: flex; align-items: baseline; gap: 10px; } .tier__was { color: var(--ink-3); font-size: 15px; } .tier__now { font-size: 30px; font-weight: 500; letter-spacing: -.03em; } .tier__term { margin: 4px 0 14px; font: 400 12px/1 var(--mono); color: var(--ink-3); } .tier__about { margin: 0 0 18px; font-size: 15px; color: var(--ink-2); } .tier .btn { margin-bottom: 10px; } .tier--pick .btn { background: var(--amber); } .tier--pick .btn:hover { background: #c27a0a; } .tier__risk { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-3); text-align: center; } .tier__specs { margin: 0 0 16px; display: grid; gap: 1px; background: var(--line-2); } .tier__specs > div { display: flex; justify-content: space-between; gap: 12px; background: var(--paper); padding: 9px 0; font-size: 14px; } .tier__specs dt { color: var(--ink-3); } .tier__specs dd { margin: 0; font-family: var(--mono); font-size: 13px; } .tier__inherits { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); font-style: italic; } .tier__f { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; } .tier__f li { display: flex; gap: 10px; color: var(--ink-2); } .tier__f li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--amber); } .tier__gift { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); } @media (hover: hover) and (min-width: 900px) { .tier { transition: opacity .25s ease, transform .25s cubic-bezier(.22,.7,.3,1), box-shadow .25s; } .tiers:hover .tier { opacity: .94; } .tiers:hover .tier:hover { opacity: 1; transform: translateY(-6px); z-index: 1; box-shadow: 0 22px 54px rgb(11 15 26 / .13); } } @media (prefers-reduced-motion: reduce) { .tier { transition: none; } } /* Число обещания считается вниз, поэтому цифры не должны прыгать в ширине. */ .prom__n { font-variant-numeric: tabular-nums; } .tiers__nav { display: none; } .allin { margin-top: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px; } .allin__t { margin: 0 0 14px; font-size: 17px; font-weight: 500; } .allin__f { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); } @media (min-width: 700px) { .allin__f { grid-template-columns: 1fr 1fr; gap: 8px 32px; } } .allin__f li { display: flex; gap: 10px; } .allin__f li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--green); } /* Сложнее тарифа ------------------------------------------------------------ */ .sec--custom { padding-top: 0; } .custom { background: var(--ink); color: #fff; border-radius: 24px; padding: 40px 32px; display: grid; gap: 32px; } @media (min-width: 860px) { .custom { grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px 48px; } } .custom .eyebrow { color: #f0c05a; } .custom .sec__h { color: #fff; } .custom .sec__head { margin-bottom: 24px; } .custom .sec__lead { color: rgb(255 255 255 / .68); } .custom__price { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.03em; } .custom__term { margin: 4px 0 22px; font: 400 12px/1 var(--mono); color: rgb(255 255 255 / .55); } .custom .btn { background: #fff; color: var(--ink); } .custom .btn:hover { background: #eae7e1; } .custom__f { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; color: rgb(255 255 255 / .8); } .custom__f li { display: flex; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / .12); } .custom__f li::before { content: '—'; color: #f0c05a; } /* Вопросы ------------------------------------------------------------------- */ /* Поднос со скруглением — то же устройство, что и в первом экране: серая подложка, на ней белые карточки. Так секция читается как продолжение шапки страницы, а не как чужой блок в конце. */ .qs { max-width: 880px; margin: 0 auto; background: linear-gradient(180deg, #faf8f5, var(--tray)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9); border-radius: 26px; padding: 12px; display: grid; gap: 8px; } @media (min-width: 640px) { .qs { padding: 16px; gap: 10px; } } .q { position: relative; background: var(--paper); border-radius: 16px; transition: box-shadow .25s ease, transform .25s cubic-bezier(.22, .7, .3, 1); } /* Открытая карточка приподнимается и получает янтарную засечку слева: видно, какой ответ читаешь, даже если открыто несколько. */ .q::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); opacity: 0; transition: opacity .25s ease; } .q[open] { box-shadow: 0 12px 34px rgb(11 15 26 / .08); } .q[open]::before { opacity: 1; } @media (hover: hover) { .q:not([open]):hover { transform: translateY(-1px); } } .q__s { display: flex; align-items: center; gap: 20px; cursor: pointer; list-style: none; padding: 20px 22px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; } @media (min-width: 640px) { .q__s { padding: 22px 26px; font-size: 17px; } } .q__s::-webkit-details-marker { display: none; } .q__t { flex: 1; } /* Тот же знак, что и в «Что входит»: плюс поворачивается в крест. */ .q__i { flex: none; width: 26px; height: 26px; position: relative; border-radius: 50%; background: var(--page); transition: background .2s; } .q__i::before, .q__i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 1.6px; background: var(--ink-2); border-radius: 2px; transition: transform .3s cubic-bezier(.22, .7, .3, 1), background .2s; } .q__i::after { transform: rotate(90deg); } .q[open] .q__i { background: var(--amber-soft); } .q[open] .q__i::before, .q[open] .q__i::after { background: var(--amber); } .q[open] .q__i::after { transform: rotate(0); } .q__a { padding: 0 26px 22px; animation: rise .35s ease-out; } @media (max-width: 639px) { .q__a { padding: 0 22px 20px; } } .q__a p { margin: 0; padding-top: 2px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { .q__a { animation: none; } } .qs__foot { max-width: 880px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--ink-3); } .qs__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .qs__foot a:hover { color: var(--amber); } /* Липкая полоса ------------------------------------------------------------- */ .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; transform: translateY(120%); transition: transform .35s cubic-bezier(.22, .7, .3, 1); pointer-events: none; } .bar.is-on { transform: none; pointer-events: auto; } /* Полоса светлая, как пилюля шапки: две тёмные плашки на одной странице — шапка сверху и полоса снизу — зажимали контент в рамку. Теперь снизу тот же белый носитель, и единственное цветное пятно в полосе — янтарная кнопка, ради которой полоса и существует. Отделяет её от страницы не цвет, а тень и волосяная граница. */ .bar__in { display: flex; align-items: center; gap: 16px; margin: 0 auto 12px; max-width: 720px; background: var(--paper); color: var(--ink); border-radius: 999px; border: 1px solid var(--line); padding: 10px 10px 10px 22px; box-shadow: 0 12px 32px rgb(11 15 26 / .16); } .bar__t { margin: 0; font-size: 14px; flex: 1; } .bar__go { background: var(--amber); padding: 11px 20px; font-size: 14px; } .bar__go:hover { background: #c27a0a; } .bar__arr { display: none; } /* Крестик на светлом: серая заливка вместо белой прозрачной, глиф чернильный. Прозрачное белое на белом было бы невидимым. */ .bar__x { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: rgb(11 15 26 / .07); color: var(--ink-2); position: relative; transition: background .2s, color .2s; } .bar__x:hover { background: rgb(11 15 26 / .12); color: var(--ink); } .bar__x::before, .bar__x::after { content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 1.5px; background: currentColor; } .bar__x::before { transform: rotate(45deg); } .bar__x::after { transform: rotate(-45deg); } @media (max-width: 560px) { .bar__t { display: none; } .bar__in { justify-content: space-between; } } /* Последний шаг -------------------------------------------------------------- */ /* Тот же кадр и то же скругление, что и в первом экране: страница заканчивается там же, где началась. Ролик здесь один и тот же файл — он уже в кэше, и второй загрузки не происходит. */ .band { position: relative; margin: 0 var(--gap) var(--gap); overflow: hidden; border-radius: 20px; background: var(--frame); display: grid; place-items: center; min-height: 380px; padding: 64px 24px; } @media (min-width: 640px) { .band { border-radius: 26px; min-height: 440px; padding: 80px 32px; } } .band__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .band__tint { position: absolute; inset: 0; background: rgb(255 255 255 / .2); } .band__in { position: relative; z-index: 2; text-align: center; max-width: 680px; } .band__eyebrow { margin: 0 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); } .band__h { margin: 0; font-weight: 500; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(30px, 5.2vw, 52px); } .band__lead { margin: 18px auto 0; max-width: 520px; color: #363d43; font-size: clamp(14px, 3.5vw, 17px); } .band__go { margin: 28px 0 0; } /* Подвал -------------------------------------------------------------------- */ .ft { background: var(--paper); border-top: 1px solid var(--line); } .ft__in { padding-block: 56px 40px; display: grid; gap: 40px; } @media (min-width: 860px) { .ft__in { grid-template-columns: 1fr 1.15fr; gap: 64px; } } .ft__mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .ft__mark .nv__sign { width: 64px; height: 64px; } .ft__name { font: 600 16px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; } .ft__line { margin: 18px 0 0; max-width: 320px; font-size: clamp(19px, 2.4vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; } .ft__go { margin: 22px 0 0; } .ft__cols { display: grid; gap: 28px; } @media (min-width: 520px) { .ft__cols { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .ft__col p { margin: 0 0 9px; font-size: 14px; color: var(--ink-2); } .ft__k { font: 400 11px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) !important; margin-bottom: 14px !important; } .ft__hours { color: var(--ink-3) !important; margin-top: 12px !important; max-width: 220px; line-height: 1.5; } .ft a { color: var(--ink-2); text-decoration: none; } .ft a:hover { color: var(--amber); } .ft__mark:hover { color: var(--ink); } .ft__foot { padding-block: 18px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } .ft__foot p { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--ink-3); } /* Примеры работ — /reference/ ------------------------------------------------ Отдельная страница, но своей темы у неё нет: те же токены, та же сетка, те же кнопки. Новых цветов здесь сознательно ноль — витрина не должна выглядеть как другой сайт. */ /* Внутренние страницы начинаются не с полноэкранного блока, поэтому шапка не плавает над роликом, а стоит на светлом фоне. */ .v2--inner { background: var(--page); } .v2--inner .nv__wrap { position: sticky; top: 12px; z-index: 40; } /* Шапка витрины идёт во всю ширину: слева заголовок, справа пояснение. До этого здесь стоял max-width:760px, и весь блок висел узкой колонкой ровно по центру страницы — на широком экране он читался как чужая вставка, а не как начало раздела. */ .wkh__in { padding-block: 28px 40px; } .wkh__back { margin: 0 0 26px; font-size: 14px; } .wkh__back a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); text-decoration: none; } .wkh__back a:hover { color: var(--amber); } .wkh__row { display: grid; gap: 20px; } /* Обе колонки начинаются с одной верхней кромки. Выравнивание по низу роняло заголовок вниз, и он оказывался ниже пояснения справа. */ @media (min-width: 900px) { .wkh__row { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 48px; align-items: baseline; padding-bottom: 26px; border-bottom: 1px solid var(--line); } /* Именно baseline, а не start. По start совпадали бы верхние границы блоков — а у надзаголовка в 11px и у абзаца в 17px с интерлиньяжем 1.6 буквы внутри своих строк сидят на разной высоте, и «Портфолио» оказывалось заметно выше «Ниши у нас нет». Grid по baseline ровняет первые базовые линии колонок, то есть сами строки. */ .wkh__eyebrow { margin-bottom: 12px; } } .wkh__eyebrow { margin: 0 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); } .wkh__h { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(32px, 7vw, 68px); } .wkh__lead { margin: 0; color: #363d43; font-size: clamp(14px, 3.5vw, 17px); } .wkh__count { margin: 16px 0 0; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .wkh__count b { color: var(--amber); font-weight: 500; } /* Витрина работ ------------------------------------------------------------- */ /* Ролик на фоне держится на экране всю секцию: прокрутка карточек идёт ПО нему. Работает на position:sticky, а не на fixed, — именно поэтому он уезжает сам, как только карточки кончились, и не тянется дальше через блок с призывом и подвал. Слоя два, и это не лишняя обёртка. Внешний .wks__bg — absolute во всю секцию: он задаёт границы, внутри которых можно липнуть, и при этом не занимает места в потоке, поэтому первая карточка начинается ПОВЕРХ ролика, а не под ним. Внутренний .wks__pin — собственно липкий экран. Вариант «сам .wks__bg липкий, а вниз ему отрицательный margin» не годится: отрицательный отступ расширяет область прилипания ровно на высоту экрана, ролик перестаёт отцепляться в конце секции и наезжает на «Хочу такой же». */ .wks { position: relative; isolation: isolate; padding-bottom: 72px; } .wks__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .wks__pin { position: sticky; top: var(--gap); height: calc(100svh - var(--gap) * 2); margin: 0 var(--gap); border-radius: 20px; overflow: hidden; background: var(--frame); } @media (min-width: 640px) { .wks__pin { border-radius: 26px; } } .wks__v { width: 100%; height: 100%; object-fit: cover; } /* Плёнка тёмная, в отличие от первого экрана: там по ролику идёт тёмный заголовок и кадр осветляют, здесь по ролику идут белые карточки — и без затемнения они сливаются со светлыми складками шёлка. */ .wks__tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 13 15 / .88) 0%, rgb(10 13 15 / .74) 42%, rgb(10 13 15 / .9) 100%); } /* Ролик — украшение. Тем, кто просил не двигать картинку, остаётся постер: он и так стоит на