/* GREY'S — мобильная версия по референсу ref.png (макет 440pt, снят с кропов 1:1.94). Тёмный панк-лендинг: граффити-заголовки (Rubik Wet Paint / Spray Paint), кислотный #c6f21e, горизонтальные ленты работ и услуг. Герой-фото и стикер-сердце вырезаны из самого референса: - hero_face.png кладётся на почти совпадающий CSS-фон и растворяется mask-градиентами по краям (жёсткий край чужого чёрного нельзя); - sticker_heart.png несёт чёрную подложку — гасится mix-blend-mode: screen, поэтому между ним и не должно появиться stacking context (filter/transform/opacity на предках). */ /* == CRITICAL:BEGIN == Всё до парного CRITICAL:END инлайнится в mobile.html (первый экран: шрифты, root/reset, topbar, menu, hero, CTA) — mobile.css там грузится асинхронно и первую отрисовку не блокирует. После правок внутри блока запусти `py tools/inline_critical.py`, иначе инлайн разойдётся с файлом. */ /* шрифт владельца для заголовков (кириллический граффити-тег, ofont.ru). woff2 пережат из TTF (fontTools), TTF остаётся фолбэком для древних браузеров */ @font-face { font-family: 'TagType'; src: url('../mobile_assets/fonts/TagType.woff2') format('woff2'), url('../mobile_assets/ofont.ru_TagType.ttf') format('truetype'); font-display: swap; } /* Google-шрифты хостим сами (mobile_assets/fonts/): блокирующий CSS fonts.googleapis.com держал первую отрисовку ~900 мс. Сабсеты и unicode-range скопированы дословно из выдачи Google Fonts (Chrome UA); latin-ext у Manrope обязателен — в нём живёт знак ₽ (U+20BD). */ /* Manrope — variable 400..600 (один файл на сабсет вместо трёх весов) */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../mobile_assets/fonts/manrope-var-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../mobile_assets/fonts/manrope-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../mobile_assets/fonts/manrope-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Rubik Spray Paint — фолбэк TagType; пока TagType грузится, не скачивается вовсе */ @font-face { font-family: 'Rubik Spray Paint'; font-style: normal; font-weight: 400; font-display: swap; src: url('../mobile_assets/fonts/rubik-spray-paint-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Rubik Spray Paint'; font-style: normal; font-weight: 400; font-display: swap; src: url('../mobile_assets/fonts/rubik-spray-paint-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* PT Mono — цены и календарь (services/booking); ₽ в нём нет — падает в Manrope */ @font-face { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../mobile_assets/fonts/pt-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../mobile_assets/fonts/pt-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #0c0d0c; --bg-card: #1b1b1d; --acid: #c6f21e; --ink: #f5f5f2; --muted: #9c9c9e; --font-marker: 'TagType', 'Rubik Spray Paint', cursive; /* заголовки секций, карточки */ --font-body: 'Manrope', 'Segoe UI', sans-serif; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { overscroll-behavior-y: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html, body { overflow-x: hidden; overflow-x: clip; } body { /* фон почти плоский тёмный; лёгкое высветление к верхнему правому — там, где кроп героя несёт свой свет, шов маскируется совпадением тонов */ background-color: var(--bg); background-image: radial-gradient(90% 400px at 88% 50px, #1c1d1c 0%, #121312 45%, transparent 75%); background-repeat: no-repeat; color: var(--ink); font: 400 16px/1.5 var(--font-body); max-width: 440px; margin-inline: auto; padding-bottom: env(safe-area-inset-bottom); } a, button { touch-action: manipulation; } /* картинки по умолчанию перетаскиваемы: «схватиться» за фото в ленте начинало нативный drag и жест уходил ему, а не скроллу. Гасим drag/callout, чтобы палец всегда скроллил (у всех в разметке ещё и draggable="false"). */ img { user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } ul, ol { list-style: none; } .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- шапка ---------- */ .topbar { position: relative; z-index: 5; display: flex; align-items: center; padding: 10px 24px 0 27px; } .topbar__home, .footer__home { display: inline-flex; } .topbar__logo { width: 84px; height: auto; } .topbar__tag { display: flex; align-items: center; gap: 10px; margin-left: 74px; font: 400 12.5px/1.4 var(--font-body); letter-spacing: 0.02em; } .spark { color: var(--acid); flex: none; } .spark--tag { width: 20px; height: 20px; transform: rotate(-12deg); } .topbar__burger { width: 46px; height: 46px; margin-left: auto; border-radius: 50%; border: 1.5px solid rgba(198, 242, 30, 0.85); background: transparent; color: #f0f0ee; display: grid; place-items: center; cursor: pointer; } .topbar__burger:active { background: rgba(198, 242, 30, 0.12); } /* ---------- бургер-оверлей ---------- */ .menu { position: fixed; inset: 0; z-index: 30; background: rgba(7, 7, 8, 0.97); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .menu.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; } .menu__list { display: grid; gap: 26px; text-align: center; } .menu__list a { font: 400 24px var(--font-marker); letter-spacing: 0.05em; color: var(--ink); text-decoration: none; text-transform: uppercase; } .menu__list a:active { color: var(--acid); } .menu__tel { font-family: var(--font-body); font-size: 17px; color: var(--muted); text-transform: none; } /* ---------- герой ---------- Вертикали (CSS px от верха, из референса /1.94): фото 103…, КРЕЙЗИ ~150, МАНИКЮР ~235, подзаголовок ~310, CTA 374–441. */ .hero { position: relative; } /* — только обёртка для выбора кадра (телефон/десктоп), в раскладке её быть не должно: сам абсолютный, а пустой инлайн-бокс обёртки мог бы породить строчный бокс и сдвинуть заголовок вниз. display: contents убирает её из дерева боксов целиком; на выбор картинки это не влияет — он делается на уровне HTML, а не раскладки. */ .hero picture { display: contents; } .hero__photo { /* верх фото в макете — 59px от верха страницы; .hero начинается после шапки (~77px) */ position: absolute; z-index: 0; top: -18px; right: 0; width: 218px; height: auto; pointer-events: none; /* растворение краёв: слева/сверху тонкая кромка, снизу шире — запястье уходит в фон */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px), linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 16px), linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); mask-composite: intersect; } .doodle { position: absolute; pointer-events: none; } .doodle--star-left { left: 14px; top: 173px; width: 26px; color: #e8e8e4; } /* Овал вокруг «кто» снят по просьбе владелицы (2026-07-28) — и на мобильном, и на десктопе. Гасим стилем, а не удаляем из вёрстки: так правка отменяется одной строкой, если решение переиграют. Значения ниже больше ни на что не влияют, но оставлены как след исходной геометрии. */ .doodle--circle { display: none; left: 148px; top: 161px; width: 112px; color: rgba(200, 200, 195, 0.75); z-index: 2; } .doodle--star-cta { right: -16px; bottom: 16px; width: 15px; color: var(--acid); } .hero__title { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0 0 27px; } .hero__wordmark { width: 212px; height: auto; pointer-events: none; } .hero__sub { position: relative; z-index: 1; margin: 34px 0 0 46px; font-size: 17px; line-height: 1.22; letter-spacing: 0.22em; color: #d6d6d4; } /* CTA: кислотная пилюля внутри рваной белой рамки-обводки (SVG) */ .cta-wrap { position: relative; z-index: 1; width: 186px; height: 70px; margin: 29px 0 0 24px; } /* краска овала в Book_stroke.png смещена от центра холста (центр ≈ 93.5,36.5 из 200×68) — ширина и сдвиги подобраны так, чтобы центр овала совпал с центром пилюли (93,35) */ .cta-frame { position: absolute; left: 0; top: -1px; width: 198px; height: auto; transform: rotate(-0.6deg); } .cta { position: absolute; left: 12px; top: 13px; width: 162px; height: 44px; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--acid); border-radius: 22px; color: #101110; text-decoration: none; font: 600 15.5px var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; } .cta:active { filter: brightness(0.92); } .cta__arrow { width: 17px; height: 17px; } /* ---------- секции: шапка-строка + пилюля ---------- */ .sec { margin-top: 40px; } #services { margin-top: 30px; } .sec__head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 28px; } .sec__head h2, .steps__head h2 { display: flex; align-items: center; gap: 12px; font: 400 22px var(--font-marker); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .sec__head .spark, .steps__head .spark { width: 28px; height: 28px; transform: rotate(-8deg); } .pill { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 33px; padding: 0 17px; border: 1px solid rgba(198, 242, 30, 0.8); border-radius: 999px; color: var(--ink); text-decoration: none; font: 400 14px var(--font-body); } .pill svg { width: 14px; height: 14px; color: var(--acid); } .pill:active { background: rgba(198, 242, 30, 0.1); } /* ---------- ленты (нативный горизонтальный скролл) ---------- */ .rail { display: flex; gap: 9px; overflow-x: auto; /* overflow-x:auto заставляет overflow-y вычислиться в auto — лента становилась вертикально прокручиваемым контейнером (хватало 1px переполнения от обрывков .scard::before), и вертикальный свайп по «пустому» месту карточки тянул саму ленту вместо страницы. overflow-y:hidden убирает вертикальный ход ленты структурно: вертикальный жест уходит цепочкой на страницу, горизонтальный по-прежнему листает ленту. Обрывки .scard::before помещаются в паддинг (18/10px). touch-action НЕ ограничиваем: pan-x запрещает вертикальный пан для касаний, начатых на ленте (палец на фото работ глушил вертикальный скролл страницы) — нативному горизонтальному скроллеру нужен обычный auto. */ overflow-y: hidden; padding: 16px 10px 4px; scroll-snap-type: x proximity; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > li { flex: none; scroll-snap-align: start; } .rail--works { padding-bottom: 0; } .rail--works img { width: 114px; height: 118px; object-fit: cover; border-radius: 5px; display: block; } /* == CRITICAL:END == Конец критического блока именно ЗДЕСЬ, а не после hero: секция работ задевает низ первого экрана, и пока стили ленты ехали асинхронно, миниатюры рендерились в свой intrinsic-размер (320×427 из width/height атрибутов) и при доезде CSS схлопывались до 114×118 — Lighthouse считал это как CLS 0.49. Ленте (.sec/.rail/.rail--works) место в инлайне. */ /* ---------- карточки услуг ---------- */ .rail--cards { gap: 20px; padding: 18px 20px 10px 23px; } /* рваный контур: клип на внутреннем слое, обрывок «бумаги» — на
  • под ним (clip-path режет и ::before, поэтому обрывок живёт на непорезанном родителе) */ .scard { position: relative; width: 178px; } .scard::before { content: ''; position: absolute; z-index: 0; left: -5px; bottom: -7px; width: 64px; height: 24px; background: #d9d6cf; clip-path: polygon(0 45%, 14% 0, 38% 28%, 62% 6%, 100% 40%, 82% 100%, 18% 88%); transform: rotate(-7deg); } /* Четыре формы обрывка по кругу (4n+1 — базовое правило выше). Раньше это были nth-child(2|3|4): карточки редактируются из админки, и на пятой все следующие получали бы форму первой, то есть один и тот же обрывок подряд. */ .scard:nth-child(4n + 2)::before { left: auto; right: -4px; bottom: -6px; width: 48px; height: 18px; transform: rotate(5deg); } .scard:nth-child(4n + 3)::before { left: 30%; bottom: auto; top: -6px; width: 52px; height: 18px; transform: rotate(3deg); } .scard:nth-child(4n)::before { left: -4px; bottom: auto; top: 30%; width: 20px; height: 44px; transform: rotate(2deg); } .scard__in { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 122px; height: 100%; padding: 13px 14px 13px 18px; background-color: var(--bg-card); background-image: radial-gradient(120% 90% at 30% 0%, #232325 0%, transparent 55%), var(--noise); clip-path: polygon( 2.5% 3%, 9% 0.5%, 28% 1.8%, 47% 0%, 68% 1.5%, 88% 0.5%, 97% 2.5%, 99.5% 8%, 98.6% 26%, 100% 47%, 98.8% 68%, 99.6% 88%, 97% 97%, 88% 99.4%, 66% 98.2%, 45% 100%, 24% 98.4%, 8% 99.6%, 2% 96.5%, 0.4% 86%, 1.4% 64%, 0% 44%, 1.2% 22%, 0.6% 9%); } .scard__in h3 { display: flex; align-items: center; gap: 8px; font: 400 17px var(--font-marker); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .scard__in h3 .spark { width: 17px; height: 17px; } .scard__in p { margin-top: 8px; font-size: 12.5px; line-height: 1.38; color: #c7c7c9; } .scard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; } .scard__price { font: 600 16px var(--font-body); letter-spacing: 0.02em; color: var(--acid); } .scard__plus { position: relative; width: 27px; height: 27px; border: 1.5px solid var(--acid); border-radius: 50%; color: var(--acid); display: grid; place-items: center; } .scard__plus svg { width: 12px; height: 12px; } .scard__plus::after { content: ''; position: absolute; inset: -9px; } /* зона тапа */ .scard__plus:active { background: rgba(198, 242, 30, 0.14); } /* ---------- как проходит запись ---------- */ .steps { position: relative; margin-top: 8px; padding: 0 27px; } .steps__head { position: relative; } .steps__head h2 { display: block; line-height: 1.3; font-size: 24px; max-width: 230px; white-space: normal; } .steps__head .spark { display: inline-block; margin-left: 10px; vertical-align: -3px; } .steps__sticker { /* heart.png — вырезанный кластер с прозрачным фоном, бленды не нужны */ position: absolute; right: 10px; top: -10px; width: 195px; height: auto; pointer-events: none; } .steps__list { margin-top: 30px; } .steps__list li { display: flex; gap: 18px; align-items: baseline; padding: 15px 2px; } .steps__list li + li { border-top: 1px dashed rgba(255, 255, 255, 0.16); } .steps__num { flex: none; width: 44px; font: 400 21px var(--font-marker); color: var(--acid); } .steps__list h3 { font: 600 15px var(--font-body); letter-spacing: 0.02em; } .steps__list p { margin-top: 3px; font-size: 13px; color: var(--muted); } .cta-wrap--center { margin: 26px auto 0; } /* ---------- футер ---------- */ .footer { margin-top: 52px; padding: 24px 27px calc(30px + env(safe-area-inset-bottom)); display: grid; justify-items: start; gap: 9px; } .footer__tear { width: calc(100% + 54px); margin: 0 -27px 10px; height: 12px; } .footer__logo { width: 58px; height: auto; } .footer__addr { font-size: 13px; color: var(--muted); } .footer__hours { font-size: 13px; color: var(--muted); } .footer__tel { font: 600 15px var(--font-body); color: var(--ink); text-decoration: none; } .footer__soc { display: flex; gap: 20px; margin-top: 4px; } .footer__soc a { font-size: 13px; color: var(--acid); text-decoration: none; } .footer__req { margin-top: 6px; font-size: 11px; line-height: 1.5; color: #737375; } .footer__copy { margin-top: 10px; font-size: 11.5px; color: #737375; } /* ---------- узкие экраны (iPhone SE и близкие) ---------- */ /* == CRITICAL:BEGIN == (медиазапрос правит и первый экран — уезжает в инлайн целиком) */ @media (max-width: 385px) { .topbar { padding-inline: 20px; } .topbar__tag { margin-left: 34px; } .hero__title { padding-left: 20px; } .hero__wordmark { width: 182px; } .hero__photo { width: 176px; } .hero__sub { margin-left: 34px; font-size: 15px; } .doodle--star-left { top: 178px; width: 22px; } .doodle--circle { left: 118px; top: 168px; width: 100px; } .cta-wrap { margin-left: 16px; } .sec__head { padding: 0 14px 0 20px; } .sec__head h2 { font-size: 21px; } .pill { height: 30px; padding: 0 13px; font-size: 13px; } .steps { padding-inline: 20px; } .steps__head h2 { font-size: 23px; max-width: 200px; } .steps__sticker { width: 146px; right: 0; top: -8px; } .footer { padding-inline: 20px; } .footer__tear { width: calc(100% + 40px); margin-inline: -20px; } } /* == CRITICAL:END == */ /* ---------- плашка о cookie ---------- Намеренно на body-шрифте (Manrope), без граффити-начертания: это служебный текст, и «крейзи»-подача в юридической плашке читается как несерьёзность. z-index ниже меню (30), чтобы открытый бургер её перекрывал. Появления НЕТ намеренно. Сначала оно было переходом по классу из requestAnimationFrame, потом CSS-анимацией с fill-mode: both — и оба раза в фоновой вкладке плашка застревала на первом кадре, то есть висела невидимой, но продолжала ловить клики внизу экрана. Никакая плавность этого не стоит: базовое состояние теперь просто «видима». */ .cookiebar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 25; display: flex; flex-direction: column; gap: 12px; padding: 15px 16px 16px; font-family: var(--font-body); background: #17181a; border: 1px solid rgba(245, 245, 242, 0.16); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); } .cookiebar[hidden] { display: none; } .cookiebar__text { margin: 0; font-size: 13px; line-height: 1.5; color: #cfcfcd; } .cookiebar__text a { color: var(--acid); text-decoration: none; white-space: nowrap; } .cookiebar__text a:hover { text-decoration: underline; } .cookiebar__row { display: flex; align-items: center; gap: 12px; } .cookiebar__btn { flex: none; min-height: 40px; padding: 0 22px; font: 600 14px/1 var(--font-body); letter-spacing: 0.01em; color: #10110f; background: var(--acid); border: 0; border-radius: 999px; cursor: pointer; } .cookiebar__btn:active { transform: translateY(1px); } /* Уход: только прозрачность, без transform — на широких экранах transform занят центрированием, и его перебивка сдвинула бы плашку вбок. */ .cookiebar.is-out { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .cookiebar.is-out { transition: opacity 0.2s ease; } } @media (min-width: 560px) { .cookiebar { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); flex-direction: row; align-items: center; gap: 16px; } } /* ---------- десктоп ---------- Мобильный макет (колонка 440) расширяется до 1160; ниже 768px не меняется ничего. Разделено на ДВА блока подряд: 1) этот, огороженный CRITICAL — первый экран, уезжает в инлайн mobile.html; 2) следующий, без ограды — всё ниже сгиба, приезжает с асинхронным файлом. Осознанный размен: на десктопе карточки/шаги/футер мгновение рисуются по-мобильному и перекладываются по приезде файла. Это ниже сгиба, CLS не стоит, и ровно так же устроена существующая ограда выше по файлу. ПОСЛЕ ЛЮБОЙ ПРАВКИ ВНУТРИ ОГРАДЫ: py tools/inline_critical.py */ /* == CRITICAL:BEGIN == (первый экран десктопа; продолжение — блоком ниже) */ @media (min-width: 768px) { /* Единственные две переменные в проекте. Заведены не ради «шкалы отступов» (в файле везде литералы и так лучше), а потому что каждая связывает значения, которые обязаны двигаться вместе: --gutter держит вылет .footer__tear, --hero-top держит оба дудла. Объявлены ВНУТРИ медиазапроса, поэтому на мобильном их не существует вовсе. */ /* Поля вместо колонки (правка 2026-07-28 по макету владелицы: «сайт сжат по ширине»). Раньше было max-width: 1160px, и на 1920 страница занимала 60% экрана. Теперь ширину задаёт ТОЛЬКО поле: clamp(40px, 6.6vw, 120px) — 6.6vw даёт ~95px на 1440, как в макете; max(..., (100vw - 1700px)/2) — на очень широких экранах поле растёт само и держит контент в пределах 1700px, чтобы строки не превращались в простыню. Одно выражение заменяет и контейнер, и его предел. */ :root { --gutter: max(clamp(40px, 6.6vw, 120px), calc((100vw - 1700px) / 2)); /* На сколько фото героя заезжает ВВЕРХ под шапку. Ноль до 1160px — и это не лень, а необходимость: там меню ещё двухстрочная полоса во всю ширину, и поднятое фото накрывало пилюлю «Записаться» (замерено на 1159px). Перекрытие включается только вместе с однострочной шапкой, которая специально выровнена вправо и ложится на тёмный верх кадра. */ --header-h: 0px; } /* body во всю ширину — это НЕ косметика, а условие полосного героя: у html и body стоит overflow-x: clip, и фото, вылезающее за колонку, срезалось бы по её краю. Отступ по-прежнему посекционный: padding-inline у body появиться не может — .hero его прямой ребёнок, и абсолютные координаты дудлов ушли бы в минус, где их съест тот же clip. */ body { max-width: none; background-image: none; } /* ---- шапка ---- */ .topbar { padding: 18px var(--gutter) 0; } .topbar__logo { width: 104px; } /* margin-left: 74px — хардкод под колонку 440, растянуть его нечем: строка не перераспределяется. Заменяем на auto, слоган уходит вправо. */ .topbar__tag { margin-left: auto; font-size: 13.5px; } .topbar__burger { display: none; } /* ---- меню строкой ---- #menu — СОСЕД .topbar, оба прямые дети body. Шесть пунктов маркерным начертанием занимают ~850px: вместе с логотипом и слоганом в одну строку они не помещаются (~1130 при контенте 1064), поэтому меню становится статичной полосой под строкой логотипа. Селектор пишется «.menu, .menu.open» намеренно: базовое .menu.open — это (0,2,0) и перебило бы голое .menu по transition. Так открытое и закрытое состояние на десктопе одинаковы, и клик по недостижимому бургеру не может дать странный вид. js/mobile.js при этом не трогаем вообще. */ .menu, .menu.open { position: static; inset: auto; z-index: auto; display: block; background: transparent; /* place-items ОБЯЗАТЕЛЬНО сбрасывать вместе с display. В современном Chrome justify-items/justify-self действуют и на блочные боксы, а не только на grid: оставшийся от базового правила `place-items: center` продолжал ужимать