/* ========================================================================== Номерика — прототип главной. Дизайн-система по образцу «Триумфа»: те же приёмы (токены, контейнер 1440 с полями 52, крупные скругления, секции surface/band/dark, кнопки-пилюли), но своя палитра и свой смысл. Палитра «Полночь», выбрана из четырёх вариантов сравнением на живой странице. По умолчанию тёмная тема; светлая включается атрибутом data-theme="light" на . Компоненты про конкретные цвета не знают — работают только через токены. Префикс nm- (Номерика): с tri-* и gl-* не пересекается. ========================================================================== */ /* ── 1. ТОКЕНЫ ─────────────────────────────────────────────────────────── */ /* Палитра «Полночь» — выбрана 20.08.2026 из четырёх вариантов, которые сравнивались прямо на странице. Самая контрастная: почти чёрная база и холодный синий акцент, цифры на ней читаются резче всего. Остальные три (песок, хвоя, медь) отброшены — характер у них ярче, но продукт продают цифры, а не настроение. ПО УМОЛЧАНИЮ ТЁМНАЯ: сначала объявляем тёмные значения, а светлые — только под [data-theme="light"]. Так страница открывается тёмной даже до того, как отработает скрипт, и не моргает белым. -------------------------------------------------------------------------- */ :root { --nm-bg: #0b0d12; --nm-surface: #131720; --nm-surface-2: #1c212c; --nm-ink: #e6e9ef; --nm-ink-2: #b6bcc8; --nm-muted: #878e9c; --nm-faint: #7c8391; --nm-line: #232935; --nm-line-soft: #191d26; --nm-accent: #6aa5d8; --nm-band: #151a24; --nm-dark: #07090d; --nm-on-dark: #e6e9ef; --nm-btn: #6aa5d8; --nm-btn-ink: #08131d; --nm-glow: #6aa5d8; --nm-shadow: rgba(0, 0, 0, .6); } /* Светлая — по желанию читателя. Переключатель ставит data-theme="light". */ [data-theme="light"] { --nm-bg: #eaecef; --nm-surface: #fff; --nm-surface-2: #dfe2e8; --nm-ink: #12151c; --nm-ink-2: #383d49; --nm-muted: #565c6a; --nm-faint: #666c7b; --nm-line: #d3d7de; --nm-line-soft: #e4e7ec; --nm-accent: #1f4d7a; --nm-band: #dee3ea; --nm-dark: #101319; --nm-on-dark: #eaecef; --nm-btn: #1f4d7a; --nm-btn-ink: #fff; --nm-glow: #6aa5d8; --nm-shadow: rgba(16, 20, 28, .15); } :root { --nm-container: 1440px; --nm-pad: 52px; --nm-radius: clamp(16px, 2vw, 26px); --nm-radius-lg: clamp(22px, 2.8vw, 34px); --nm-radius-sm: 18px; /* Тот же набор, что на apartico.ru: Rubik в заголовках, Nunito Sans в тексте, JetBrains Mono в надзаголовках. Запасные семейства — не формальность: пока шрифт едет по слабой сети (или не доедет вовсе), текст обязан остаться читаемым. */ --nm-font-head: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; --nm-font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --nm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --nm-ease: cubic-bezier(.22, .61, .36, 1); } /* ── 2. БАЗА ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--nm-bg); } body { margin: 0; background: var(--nm-bg); color: var(--nm-ink); font-family: var(--nm-font-text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } h1, h2, h3 { font-family: var(--nm-font-head); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; margin: 0; text-wrap: pretty; } h1 { font-size: clamp(30px, 4.8vw, 58px); letter-spacing: -.03em; } h2 { font-size: clamp(24px, 3.4vw, 38px); } h3 { font-size: clamp(18px, 2.2vw, 23px); line-height: 1.28; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--nm-accent); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--nm-ink); } img { max-width: 100%; display: block; } /* Надзаголовок моноширинным — как на apartico.ru: разрядка в моноширинном читается ровнее, буквы не разъезжаются. */ .nm-kicker { display: block; font-family: var(--nm-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--nm-accent); } .nm-lead { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7; color: var(--nm-ink-2); } .nm-muted { color: var(--nm-muted); font-size: 14px; line-height: 1.65; } .nm-faint { color: var(--nm-faint); font-size: 13px; } /* ── 3. РАСКЛАДКА ──────────────────────────────────────────────────────── */ .nm-site { max-width: var(--nm-container); margin: 0 auto; background: var(--nm-bg); } .nm-container { width: 100%; margin: 0 auto; padding-left: var(--nm-pad); padding-right: var(--nm-pad); } @media (max-width: 980px) { :root { --nm-pad: 20px; } } @media (max-width: 560px) { :root { --nm-pad: 14px; } } .nm-section { padding-top: clamp(44px, 6vw, 88px); padding-bottom: clamp(44px, 6vw, 88px); } .nm-section--surface { background: var(--nm-surface); } .nm-section--band { background: var(--nm-band); } .nm-section--dark { background: var(--nm-dark); color: var(--nm-on-dark); } .nm-section--dark h2, .nm-section--dark h3 { color: #fff; } .nm-section--dark .nm-kicker { color: var(--nm-glow); } .nm-section--dark .nm-lead, .nm-section--dark p { color: rgba(255, 255, 255, .8); } .nm-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); } .nm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* Строго две колонки: auto-fit на широком экране раскладывает четыре карточки как 3 + 1, и последняя висит одна. Пары держатся парами. */ .nm-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .nm-grid--pair { grid-template-columns: 1fr; } } .nm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .nm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); } .nm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(26px, 4vw, 56px); align-items: center; } .nm-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .nm-stack { display: flex; flex-direction: column; gap: 16px; } .nm-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); } /* ── 4. ШАПКА ──────────────────────────────────────────────────────────── */ .nm-header { position: sticky; top: 0; z-index: 50; background: var(--nm-bg); border-bottom: 1px solid var(--nm-line-soft); } .nm-header__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 14px; padding-bottom: 14px; } /* Лого — картинкой, а не набором: у бренда есть готовые файлы под тёмный и светлый фон. Нужный показывается через CSS, поэтому переключение темы не требует ни строчки скрипта. */ .nm-logo { display: inline-flex; align-items: center; } .nm-logo img { height: 34px; width: auto; } .nm-logo__dark { display: block; } .nm-logo__light { display: none; } [data-theme="light"] .nm-logo__dark { display: none; } [data-theme="light"] .nm-logo__light { display: block; } .nm-footer .nm-logo img { height: 30px; } .nm-footer .nm-logo__light { display: none !important; } .nm-footer .nm-logo__dark { display: block !important; } .nm-nav { display: flex; gap: 4px; background: var(--nm-surface); border-radius: 100px; padding: 5px; } /* nowrap обязателен: без него длинный пункт переносится на вторую строку и шапка вырастает вдвое, а вместе с ней разъезжается всё меню. Отступы поуже — шесть пунктов должны влезать в строку на ноутбуке, а не только на широком мониторе. */ .nm-nav a { padding: 8px 13px; border-radius: 100px; font-size: 13.5px; font-weight: 600; color: var(--nm-ink-2); white-space: nowrap; } .nm-nav a:hover { background: var(--nm-band); color: var(--nm-ink); } /* Вход — кнопка с обводкой. Заливка в шапке одна и достаётся главному действию для нового человека; вход рядом должен быть так же заметен, но не спорить с ним за внимание. */ .nm-header .nm-btn--ghost { border-color: color-mix(in srgb, var(--nm-accent) 45%, var(--nm-line)); } @media (max-width: 980px) { .nm-nav { display: none; } } /* ── 5. КНОПКИ ─────────────────────────────────────────────────────────── */ .nm-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--nm-font-head); font-size: 15px; font-weight: 600; line-height: 1; padding: 18px 30px; min-height: 52px; border: 0; border-radius: 100px; background: var(--nm-btn); color: var(--nm-btn-ink); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } a.nm-btn, a.nm-btn:hover { color: var(--nm-btn-ink); } .nm-btn:hover { background: var(--nm-accent); } .nm-btn--ghost { background: transparent; color: var(--nm-ink); border: 1px solid var(--nm-line); } a.nm-btn--ghost, a.nm-btn--ghost:hover { color: var(--nm-ink); } .nm-btn--ghost:hover { border-color: var(--nm-accent); background: transparent; } .nm-btn--on-dark { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; } a.nm-btn--on-dark, a.nm-btn--on-dark:hover { color: #fff; } .nm-btn--on-dark:hover { border-color: #fff; background: transparent; } .nm-btn--sm { min-height: 42px; padding: 12px 20px; font-size: 14px; } /* ── 6. ОБЛОЖКА ────────────────────────────────────────────────────────── */ .nm-hero { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 36px); } .nm-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; } .nm-hero__body { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); } .nm-hero__body h1 { max-width: 15ch; } .nm-hero__body .nm-lead { max-width: 46ch; } .nm-hero__proof { display: flex; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; padding-top: 6px; } /* Экран продукта — не скриншот, а его смысловой макет: сетка карточек, которая сразу показывает, что внутри цифры, а не «красивый интерфейс». */ .nm-screen { position: relative; border-radius: var(--nm-radius-lg); overflow: hidden; background: var(--nm-dark); padding: clamp(16px, 2vw, 24px); box-shadow: 0 30px 70px -30px var(--nm-shadow); } .nm-screen__bar { display: flex; gap: 6px; padding-bottom: 14px; } .nm-screen__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); } .nm-screen__body { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .nm-screen__tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px 16px; color: #fff; } .nm-screen__tile--wide { grid-column: 1 / -1; } .nm-screen__val { font-family: var(--nm-font-head); font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1; } .nm-screen__lbl { font-size: 12px; color: rgba(255,255,255,.6); padding-top: 6px; } .nm-screen__up { color: var(--nm-glow); font-size: 12px; font-weight: 600; } .nm-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; padding-top: 12px; } .nm-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.18); } .nm-bars i.on { background: var(--nm-glow); } /* ── 7. КАРТОЧКИ И БЛОКИ ───────────────────────────────────────────────── */ .nm-card { background: var(--nm-surface); border-radius: var(--nm-radius-sm); padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .25s ease; } .nm-card:hover { box-shadow: 0 16px 36px var(--nm-shadow); } .nm-card--flat { background: var(--nm-surface-2); } .nm-card--line { background: transparent; border: 1px solid var(--nm-line); } .nm-card__title { font-family: var(--nm-font-head); font-size: 19px; font-weight: 700; line-height: 1.28; } .nm-card__num { font-family: var(--nm-font-head); font-size: 13px; font-weight: 700; color: var(--nm-btn); letter-spacing: .04em; } .nm-stat__value { font-family: var(--nm-font-head); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1; } .nm-stat__label { font-size: 13px; color: var(--nm-faint); line-height: 1.45; padding-top: 6px; } .nm-section--dark .nm-stat__label { color: rgba(255,255,255,.6); } .nm-feature { border-left: 2px solid var(--nm-line); padding: 4px 0 4px 18px; display: flex; flex-direction: column; gap: 6px; } .nm-feature__title { font-family: var(--nm-font-head); font-weight: 700; font-size: 17px; } .nm-note { background: var(--nm-band); border-radius: var(--nm-radius-sm); padding: clamp(18px, 2.4vw, 26px); font-size: 15px; line-height: 1.7; color: var(--nm-ink-2); } .nm-cta { position: relative; overflow: hidden; border-radius: var(--nm-radius-lg); background: var(--nm-dark); color: var(--nm-on-dark); padding: clamp(30px, 5vw, 66px) clamp(22px, 4vw, 52px); } .nm-cta h2 { color: #fff; max-width: 18ch; } .nm-cta p { color: rgba(255,255,255,.78); max-width: 52ch; } /* ── 8. ПОДВАЛ ─────────────────────────────────────────────────────────── */ .nm-footer { background: var(--nm-dark); color: var(--nm-on-dark); padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(26px, 3vw, 40px); } .nm-footer a { color: rgba(255,255,255,.72); } .nm-footer a:hover { color: #fff; } .nm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(20px, 3vw, 40px); } .nm-footer__bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: clamp(24px, 3vw, 36px); padding-top: 20px; font-size: 13px; color: rgba(255,255,255,.55); } /* ── 9. ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ───────────────────────────────────────────────── Живёт в шапке справа, рядом с кнопкой действия: люди ищут его именно там, а не в углу экрана. Размером и формой повторяет соседнюю кнопку, чтобы не спорить с ней. */ .nm-theme { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--nm-line); border-radius: 100px; background: var(--nm-surface); color: var(--nm-ink); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .nm-theme:hover { border-color: var(--nm-accent); } /* Знак меняется вместе с темой: в тёмной предлагаем светлую и наоборот. */ .nm-theme__sun { display: none; } .nm-theme__moon { display: block; } [data-theme="light"] .nm-theme__sun { display: block; } [data-theme="light"] .nm-theme__moon { display: none; } /* ── 10. РЕЗУЛЬТАТЫ ПО ГРУППАМ (перенесено из Droome) ────────────────────── Показываем ДИАПАЗОН и медиану, а не одну среднюю цифру: средняя прячет и тот объект, что вырос вдвое, и тот, что не сдвинулся. Полоса — это разброс, засечка на ней — медиана. */ .nm-res { display: flex; flex-direction: column; gap: 14px; } .nm-res__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .nm-res__name { font-family: var(--nm-font-head); font-size: 18px; font-weight: 700; line-height: 1.25; } /* ── Наша география: реальные объекты клиентов ────────────────────────────────── */ /* Карточек четырнадцать, и это осмысленно: сетка показывает разброс — город, лес, озеро. На узком экране идут по две: одна в ряд растянула бы блок на три экрана прокрутки. */ .nm-geo { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .nm-geo__item { background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); overflow: hidden; } .nm-geo__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--nm-surface-2); } .nm-geo__photo img { width: 100%; height: 100%; object-fit: cover; } .nm-geo__body { padding: 12px 14px 14px; } .nm-geo__name { font-family: var(--nm-font-head); font-size: 15px; font-weight: 600; line-height: 1.25; } .nm-geo__where { font-size: 12.5px; color: var(--nm-muted); margin-top: 4px; line-height: 1.4; } /* ── Частые вопросы ───────────────────────────────────────────────────────────── */ /* Нативный
вместо своего аккордеона: он открывается без единой строки скрипта, работает с клавиатуры и читается программой экранного доступа. Прячем только маркер. */ .nm-faq { display: grid; gap: 10px; max-width: 820px; } .nm-faq__item { background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: var(--nm-radius); } .nm-faq__item summary { padding: 15px 18px; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; gap: 12px; align-items: center; } .nm-faq__item summary::-webkit-details-marker { display: none; } .nm-faq__item summary::after { content: "+"; margin-left: auto; color: var(--nm-faint); font-weight: 400; font-size: 20px; line-height: 1; } .nm-faq__item[open] summary::after { content: "\2212"; } .nm-faq__item summary:hover { color: var(--nm-accent); } .nm-faq__item p { padding: 0 18px 16px; } .nm-res__n { font-size: 12px; color: var(--nm-faint); white-space: nowrap; } .nm-res__scale { position: relative; height: 8px; border-radius: 100px; background: var(--nm-line); } .nm-res__span { position: absolute; top: 0; bottom: 0; border-radius: 100px; background: linear-gradient(90deg, var(--nm-accent) 0%, var(--nm-glow) 100%); opacity: .55; } .nm-res__mark { position: absolute; top: -4px; width: 3px; height: 16px; border-radius: 2px; background: var(--nm-accent); } .nm-res__legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--nm-faint); } .nm-res__median { font-family: var(--nm-font-head); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--nm-ink); } .nm-res__unit { font-size: 13px; color: var(--nm-muted); padding-top: 6px; } /* ── 11. ФОРМА ДЕМО-ДОСТУПА ──────────────────────────────────────────────── Живёт внутри тёмного блока, поэтому цвета берёт не из общих токенов поверхности, а свои: на почти чёрном фоне светлое поле ввода читается лучше рамки. */ .nm-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .nm-form__wide { grid-column: 1 / -1; } .nm-input { width: 100%; font: inherit; font-size: 15px; padding: 16px 18px; min-height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; transition: border-color .2s ease, background-color .2s ease; } .nm-input::placeholder { color: rgba(255,255,255,.42); } .nm-input:focus { outline: none; border-color: var(--nm-glow); background: rgba(255,255,255,.09); } .nm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); cursor: pointer; } .nm-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--nm-glow); flex: none; } .nm-consent a { color: rgba(255,255,255,.82); text-decoration: underline; } .nm-form__msg { font-size: 14px; min-height: 20px; } .nm-form__msg--err { color: #ff9d9d; } .nm-form__msg--ok { color: var(--nm-glow); } /* ── 12. ПРЕДЛОЖЕНИЕ «БЕСПЛАТНО ДО КОНЦА ГОДА» ──────────────────────────── Отдельный визуальный вес: это главный довод зайти сейчас, а не «когда-нибудь». */ .nm-offer { position: relative; overflow: hidden; border-radius: var(--nm-radius-lg); background: var(--nm-surface); border: 1px solid var(--nm-line); padding: clamp(26px, 4vw, 52px); } /* Мягкое свечение в углу — единственный декоративный элемент на странице. Он тут не ради красоты: взгляд должен цепляться именно за этот блок. */ .nm-offer::before { content: ''; position: absolute; top: -140px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--nm-glow) 0%, transparent 70%); opacity: .16; pointer-events: none; } .nm-offer > * { position: relative; z-index: 1; } .nm-offer__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--nm-btn); color: var(--nm-btn-ink); font-family: var(--nm-font-head); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; } .nm-offer h2 { max-width: 20ch; margin-top: 16px; } .nm-offer__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 6px 0 2px; } .nm-offer__now { font-family: var(--nm-font-head); font-size: clamp(38px, 6vw, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1; } .nm-offer__till { font-size: 15px; color: var(--nm-muted); } .nm-offer__list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); padding-top: 6px; } .nm-offer__item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; } /* ⚠️ Прозрачность задаём ФОНУ, а не элементу: opacity на самом кружке гасит и галочку внутри него — она рисуется псевдоэлементом и наследует прозрачность родителя. */ .nm-offer__item i { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; background: color-mix(in srgb, var(--nm-glow) 22%, transparent); position: relative; } .nm-offer__item i::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 9px; border: 2px solid var(--nm-glow); border-top: 0; border-left: 0; transform: rotate(42deg); } .nm-offer__later { border-top: 1px solid var(--nm-line); margin-top: clamp(20px, 3vw, 30px); padding-top: 16px; font-size: 14px; color: var(--nm-muted); line-height: 1.6; } /* ── 13. СИСТЕМЫ БРОНИРОВАНИЯ ───────────────────────────────────────────── Список короткий и конечный: их ровно две. Прятать это незачем — человек с третьей системой должен понять, что ему пока не к нам, за пять секунд, а не после регистрации. */ .nm-pms { display: flex; flex-direction: column; gap: 12px; } .nm-pms__name { font-family: var(--nm-font-head); font-size: 21px; font-weight: 700; } .nm-pms__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .nm-pms__steps li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--nm-ink-2); } .nm-pms__steps b { flex: none; width: 20px; font-family: var(--nm-font-head); font-weight: 700; color: var(--nm-accent); } .nm-pms__time { font-size: 13px; color: var(--nm-faint); border-top: 1px solid var(--nm-line); padding-top: 12px; margin-top: auto; } /* ── 14. КАРТИНКИ ────────────────────────────────────────────────────────── Страница из одного текста не продаёт: человек листает, а зацепиться взгляду не за что. Показываем настоящие экраны платформы и настоящие объекты, а не стоковые картинки. */ /* Снимок экрана в рамке: тёмная подложка совпадает с интерфейсом, поэтому граница почти не читается — снимок выглядит частью страницы, а не наклейкой на ней. */ .nm-shot { position: relative; border-radius: var(--nm-radius-lg); overflow: hidden; background: var(--nm-dark); border: 1px solid var(--nm-line); box-shadow: 0 30px 70px -30px var(--nm-shadow); } .nm-shot img { width: 100%; height: auto; display: block; } .nm-shot--crop { aspect-ratio: 16 / 10; } .nm-shot--crop img { height: 100%; object-fit: cover; object-position: top center; } /* Карточка с миниатюрой экрана: картинка сверху, смысл под ней. */ .nm-tile { background: var(--nm-surface); border-radius: var(--nm-radius-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s ease; } .nm-tile:hover { box-shadow: 0 16px 36px var(--nm-shadow); } .nm-tile__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nm-dark); } .nm-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s var(--nm-ease); } .nm-tile:hover .nm-tile__media img { transform: scale(1.03); } .nm-tile__body { padding: clamp(18px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 8px; } /* Лента объектов: визуальная пауза между текстовыми блоками. Подписей нет намеренно — это не портфолио, а напоминание, что за цифрами стоят живые номера. */ .nm-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; } .nm-strip figure { margin: 0; border-radius: var(--nm-radius-sm); overflow: hidden; aspect-ratio: 3 / 2; background: var(--nm-surface-2); } .nm-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--nm-ease); } .nm-strip figure:hover img { transform: scale(1.05); } /* На узком экране лента превращается в горизонтальную прокрутку — так она не съедает пол-экрана высоты и остаётся паузой, а не отдельным разделом. */ @media (max-width: 700px) { .nm-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .nm-strip::-webkit-scrollbar { display: none; } .nm-strip figure { flex: 0 0 76%; scroll-snap-align: start; } /* Минимум 210px в сетке географии на телефоне даёт одну колонку — четырнадцать карточек растянулись бы на три экрана прокрутки. Две в ряд листаются быстро и остаются читаемыми. */ .nm-geo { grid-template-columns: repeat(2, 1fr); gap: 10px; } .nm-geo__body { padding: 10px 11px 12px; } .nm-geo__name { font-size: 14px; } .nm-geo__where { font-size: 11.5px; } } /* ── 15. ЖИВОЙ ЭКРАН: ОБЗОР И ПРИБЛИЖЕНИЕ ───────────────────────────────── Статичный снимок показывает, что продукт есть. Движение показывает, ЧТО В НЁМ: камера отъезжает на весь экран, потом приближается к тревогам, к показателям, к разбору загрузки. Человек успевает прочитать каждый кадр — по четыре секунды на остановку. Двигаем transform, а не размеры и не позицию фона: только он и opacity анимируются на видеокарте, остальное заставляет браузер пересчитывать раскладку в каждом кадре. */ .nm-live { position: relative; overflow: hidden; border-radius: var(--nm-radius-lg); background: var(--nm-dark); border: 1px solid var(--nm-line); aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -30px var(--nm-shadow); } /* ⚠️ height: auto ОБЯЗАТЕЛЕН. Атрибуты width/height на теге браузер применяет как жёсткие CSS-размеры; ширину мы переопределяем, а высота остаётся из атрибута — и снимок растягивается по вертикали в три с лишним раза. Общее правило `img { max-width: 100% }` от этого не спасает: оно про ширину. */ .nm-live img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; transform-origin: 0 0; will-change: transform; animation: nm-tour 28s cubic-bezier(.45, 0, .25, 1) infinite; } /* Проценты подобраны по самому снимку: 0–8% высоты это шапка и тревога, 18% — карточки «рынок вперёд», 30% — «наше сейчас», 42% — загрузка по периодам. */ @keyframes nm-tour { 0%, 14% { transform: scale(1) translate(0, 0); } /* весь экран — дольше всех */ 22%, 32% { transform: scale(1.55) translate(-4%, -3%); } /* тревога «стоп-кран» */ 40%, 50% { transform: scale(1.5) translate(-3%, -11%); } /* рынок вперёд */ 58%, 68% { transform: scale(1.5) translate(-3%, -17%); } /* наша позиция */ 76%, 86% { transform: scale(1.4) translate(-2%, -25%); } /* загрузка по периодам */ 94%, 100% { transform: scale(1) translate(0, 0); } /* снова весь экран */ } /* Уважаем системную настройку: если человек просил меньше движения — показываем неподвижный экран. Анимация здесь украшение, а не смысл, и отнимать её не жалко. */ @media (prefers-reduced-motion: reduce) { .nm-live img { animation: none; } } /* Подпись поверх кадра: объясняет, что человек сейчас видит, и не даёт принять движение за случайное. */ .nm-live__hint { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(7, 9, 13, .72); backdrop-filter: blur(6px); color: rgba(255,255,255,.9); font-size: 12.5px; letter-spacing: .01em; padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,.12); }