/* Owncome — стили лендинга. Разметка перенесена из макета Claude Design как есть (стили на элементах), здесь только то, что макет держал в рантайме: наведение, фокус и адаптив. */ /* Авторский блок из макета. Он лежал в , а при снятии DOM берётся , поэтому его надо вернуть явно — иначе ссылки становятся подчёркнутыми, а страница теряет фон и шрифт. */ body { margin: 0; background: var(--nm-page); font-family: var(--nm-font-text); -webkit-font-smoothing: antialiased; } /* Страница не должна двигаться вбок вообще. overflow-x: hidden делает её прокручиваемым контейнером — прокрутки нет, но остаётся отскок «резинкой» при попытке сдвинуть. clip не создаёт контейнера, а overscroll-behavior убирает сам отскок. */ html, body { overflow-x: clip; overscroll-behavior-x: none; } a { color: var(--nm-accent); text-decoration: none; } a:hover { color: var(--nm-accent-hover); } /* Видимый фокус с клавиатуры — в макете его не было */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--nm-accent); outline-offset: 2px; } img { max-width: 100%; } /* Широкие кадры (1040x693) на телефоне втискивались в почти квадратный бокс и теряли по 40% по бокам — крайних персонажей просто не было видно. Показываем кадр целиком. Правильное решение — отдельный кроп под мобильный экран, он заказан дизайнеру в спеке; до тех пор лучше целый кадр, чем половина. */ @media (max-width: 767px) { /* Широкий кадр целиком в узкой колонке выходит мелким, да ещё с полями по бокам. Пускаем во всю ширину экрана: кадр крупнее, боковых отступов нет, и ничего не срезано. */ div:has(> img[src*="own-aha-recipe"]), div:has(> img[src*="own-aha-night"]) { height: auto !important; background: transparent !important; /* Ширину не задаём: блочный элемент с отрицательными полями сам займёт ровно ширину родителя плюс его поля. Любой calc здесь промахивается на пару пикселей и страница начинает ездить вбок. */ width: auto !important; max-width: none !important; margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; } img[src*="own-aha-recipe"], img[src*="own-aha-night"] { object-fit: contain !important; height: auto !important; width: 100% !important; } /* Портреты агентов квадратные, а бокс был 250x200 — срезало 20% по высоте */ .grid-5 img { height: auto !important; aspect-ratio: 1 / 1; } } /* Плашка с правилом стоит сбоку от текста. На узком экране ей тесно, поэтому уводим под текст и растягиваем на всю ширину. */ @media (max-width: 900px) { [data-team-head] { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; } [data-team-head] > div { max-width: none !important; margin-left: 0 !important; } } /* Safari на iOS сам зумит страницу, если у поля шрифт меньше 16px, и обратно не отматывает: после заполнения формы сайт остаётся увеличенным, а вёрстка выглядит обрезанной. Лечим размером шрифта, а не запретом масштабирования — maximum-scale ломает доступность. */ @media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } } /* Пояснение к числам ставим под них, а не сбоку: рядом с цифрами оно сжимается в узкую колонку и читается плохо. */ [data-case="stat-row"] { flex-wrap: wrap !important; align-items: flex-start !important; } [data-case="stat-row"] > p { flex: 1 1 100% !important; max-width: none !important; margin-top: 4px !important; } @media (max-width: 767px) { [data-case="stat-row"] { gap: 16px !important; } } /* ── Адаптив по спеке дизайнера («Owncome Мобильная версия»). Точки перестроения: ≥1160 как в макете, 768–1159 планшет, <768 один столбец. */ /* Кнопка меню видна только на телефоне */ #mnav-open { display: none; } /* ── планшет: 768–1159 ─────────────────────────────────────────────────── */ @media (max-width: 1159px) { .wrap { padding-left: 32px !important; padding-right: 32px !important; } /* Герой остаётся двухколонным, правая колонка сужается до 290 */ .grid-hero { grid-template-columns: minmax(0, 1fr) 290px !important; gap: 36px !important; } /* Бокс держит пропорцию макета (468x540), иначе кадр режется по высоте */ .grid-hero > *:last-child > div { height: auto !important; aspect-ratio: 468 / 540; } .grid-hero img { height: 100% !important; } /* Пять агентов — сетка 3 + 2, шестая ячейка не пустует */ .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* Сравнение «от чего отказаться»: заголовок над текстом, а не сбоку */ .grid-side { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } .grid-cta { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } .grid-media { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } h1 { font-size: 44px !important; letter-spacing: -1.2px !important; } h2 { font-size: 34px !important; letter-spacing: -0.8px !important; } } /* ── телефон: до 768 ───────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Поля 16px, корпус не ниже 15px, тап-цели от 44px */ .wrap { padding-left: 16px !important; padding-right: 16px !important; } /* Навигация не прячется молча — уходит в шторку снизу. Кнопка «Заявка» остаётся в шапке всегда. */ header nav { display: none !important; } #mnav-open { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 12px; margin-left: -12px; background: none; border: none; cursor: pointer; } #mnav-open span { display: block; height: 1.5px; background: var(--nm-ink); border-radius: 2px; } /* Все сетки в один столбец */ .grid-hero, .grid-cta, .grid-2, .grid-3, .grid-4, .grid-side, .grid-media { grid-template-columns: minmax(0, 1fr) !important; } /* Иллюстрация уходит под текст: первый экран — слова, а не картинка */ .grid-hero { gap: 28px !important; } .grid-hero > *:last-child { order: 2; } /* Кадр показываем целиком. Три вещи резали его одновременно: заданная высота бокса, пропорция от планшетного правила и маска, которая делает прозрачными по 7% слева и справа. */ .grid-hero > *:last-child > div { height: auto !important; aspect-ratio: auto !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } .grid-hero img { height: auto !important; object-fit: contain !important; } /* Заголовок и подзаголовок — во всю ширину экрана, без ограничений макета */ h1, .grid-hero p, .grid-hero > *:first-child > div { max-width: none !important; } /* Цифры 2×2, кегль числа 30px */ .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid-4 span:first-child { font-size: 30px !important; letter-spacing: -0.9px !important; } /* Пять карточек в столбик — полторы прокрутки пустоты. Кладём в горизонтальную ленту: карточка 250px, следующая подглядывает справа. */ .grid-5 { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px !important; padding: 0 16px 4px !important; gap: 12px !important; } .grid-5::-webkit-scrollbar { display: none; } .grid-5 > * { flex: 0 0 250px; scroll-snap-align: start; } h1 { font-size: 34px !important; line-height: 1.12 !important; letter-spacing: -0.8px !important; } h2 { font-size: 26px !important; line-height: 1.16 !important; letter-spacing: -0.4px !important; } section { padding-top: 48px !important; padding-bottom: 48px !important; } p, li { font-size: 15px !important; } } /* ── шторка меню ───────────────────────────────────────────────────────── */ #mnav-sheet { position: fixed; inset: 0; z-index: 9998; } #mnav-sheet[hidden] { display: none; } #mnav-sheet .mnav-back { position: absolute; inset: 0; background: rgba(17, 19, 26, 0.5); } #mnav-sheet .mnav-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--nm-surface); border-radius: 18px 18px 0 0; box-shadow: var(--nm-shadow-pop); } #mnav-sheet .mnav-panel a { display: flex; align-items: center; min-height: 52px; font: 500 16px var(--nm-font-text); color: var(--nm-ink); border-bottom: 0.5px solid var(--nm-hairline); } #mnav-sheet .mnav-panel a:last-child { border-bottom: none; } #mnav-sheet .mnav-cta { justify-content: center; margin-top: 12px; min-height: 52px; background: var(--nm-accent); color: #fff !important; border-radius: 12px; border-bottom: none !important; font-weight: 600; } #mnav-sheet .mnav-mail { color: var(--nm-ink-3) !important; font: 500 13px var(--nm-font-mono) !important; } /* ── cookie на узких экранах ─────────────────────────────────────────────── В макете плашка — строка «текст + три кнопки». На планшете ей уже тесно, а на телефоне текст сжимался в узкую колонку, и «Настроить» уезжало за экран. По спеке: главное действие на всю ширину, два второстепенных под ним. */ /* Планшет: кнопки переносим под текст, но оставляем в ряд */ @media (max-width: 1024px) { [data-branch="cookieBar"] > div > div { flex-wrap: wrap !important; gap: 16px !important; } [data-branch="cookieBar"] > div > div > p { flex: 1 1 100% !important; } [data-branch="cookieBar"] > div > div > div { margin-left: auto; } } /* Телефон: столбцом, главная кнопка сверху и на всю ширину */ @media (max-width: 767px) { [data-branch="cookieBar"] > div { padding: 12px !important; } [data-branch="cookieBar"] > div > div { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 16px !important; } [data-branch="cookieBar"] > div > div > p { flex: 0 0 auto !important; font-size: 13px !important; } [data-branch="cookieBar"] > div > div > div { display: flex !important; flex-wrap: wrap !important; margin-left: 0; gap: 8px !important; } [data-branch="cookieBar"] [data-action] { height: 44px !important; } [data-branch="cookieBar"] [data-action="cookie-all"] { order: -1; flex: 1 1 100% !important; } [data-branch="cookieBar"] [data-action="cookie-essential"], [data-branch="cookieBar"] [data-action="cookie-settings"] { flex: 1 1 0 !important; } } /* Окно настроек: на телефоне поля по краям меньше, кнопки не сжимаются */ @media (max-width: 767px) { [data-branch="cookieModal"] > div { padding: 12px !important; align-items: flex-end !important; } [data-branch="cookieModal"] [data-action] { min-height: 44px; } }