/* ============================================================ ПОСАДОЧНЫЕ СО СТУДИЕЙ: НАШЕ ОФОРМЛЕНИЕ (INT-80, 04.11.2026) Поверх lp.css (стили дизайн-системы посадочных из макетов). Владелец: «проработай дизайн получше… полосы контента… без нейрослопа», чек-лист ~/Desktop/КЛОД БРАТ/Дизайн/ЧЕК-ЛИСТ-САЙТЫ.md. Классы макета здесь — с приставкой lpt- (её ставит сборщик), наши — prizyv и lp-polosa. ============================================================ */ /* ---------- Полосы во всю ширину рабочей области ---------- Текст лежит в .content студии, у которой поля по бокам (app.css: на ПК 32 слева и 40 справа, на телефоне по 16). Полосы выводим на них, иначе они стояли коробками с отступами. Масштаб: у студии html { zoom: .9 }, тексту возвращаем 1 на разделах, а не на .lpt — иначе зум растянул бы и эти отрицательные поля. */ .content > .lpt { zoom: 1; margin: var(--s16) -40px 0 -32px; border-top: 1px solid rgba(255, 255, 255, .06); } .content > .lpt > * { zoom: calc(1 / .9); } @media (max-width: 900px) { .content > .lpt { margin: var(--s12) -16px 0; } } .lpt .lpt-polosa { background: #121118; border-block: 1px solid rgba(255, 255, 255, .05); } /* ---------- Заголовки ---------- */ /* На телефоне заголовок заполняет строку: без balance, кегль по чек-листу */ @media (max-width: 900px) { .lpt .lv-section__title { font-size: clamp(24px, 7.2vw, 31px); text-wrap: wrap; } } /* ---------- Заголовок страницы под студией ---------- По левому краю, как весь текст (по центру — только вопросы и финал). */ .lpt .lpt-lp-hero { padding: var(--lv-s24) 0 0; text-align: left; } .lpt .lpt-lp-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.05; } .lpt .lpt-lp-hero p:not(.lv-kicker) { margin: 20px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; } @media (max-width: 900px) { .lpt .lpt-lp-hero { padding-top: var(--lv-s16); } .lpt .lpt-lp-hero h1 { max-width: none; font-size: clamp(26px, 7.7vw, 34px); text-wrap: wrap; } .lpt .lpt-lp-hero p:not(.lv-kicker) { font-size: 16px; } } /* Цифры: строка без коробок и без градиентного текста — числа белые, колонки разделены тонкой линией */ .lpt #cifry { padding-bottom: var(--lv-s24) !important; } .lpt .lpt-facts { gap: 0; margin-top: var(--lv-s4); border-top: 1px solid var(--lv-border-2); } .lpt .lpt-fact { padding: 28px 24px 0 0; background: none; border: 0; border-radius: 0; } .lpt .lpt-fact + .lpt-fact { padding-left: 24px; border-left: 1px solid var(--lv-border-2); } .lpt .lpt-fact b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--lv-text-1); } .lpt .lpt-fact span { display: block; margin-top: 10px; color: var(--lv-text-2); font-size: 15px; line-height: 1.45; } @media (max-width: 900px) { .lpt #cifry { padding-bottom: var(--lv-s16) !important; } .lpt .lpt-fact { padding: 20px 12px 20px 0; } .lpt .lpt-fact + .lpt-fact { padding-left: 12px; } .lpt .lpt-fact:nth-child(3) { padding-left: 0; border-left: 0; } .lpt .lpt-fact:nth-child(n+3) { border-top: 1px solid var(--lv-border-2); } } /* ---------- Кадры студии ---------- Без цветного свечения за кадром (маркер ИИ по чек-листу): рамка и тень. */ .lpt .lpt-shot::before { display: none; } .lpt .lpt-shot__ramka { padding: 8px; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); } .lpt .lpt-stx .lpt-shot { --shot-w: 560px; } /* ---------- Шаги ---------- Номер — крупной цифрой без кружка (кружки с цифрами — маркер ИИ). */ .lpt .lpt-stx__n { display: block; width: auto; height: auto; border-radius: 0; background: none; color: #3a3846; font: 800 64px/1 var(--lv-font-head); letter-spacing: -.04em; } .lpt .lpt-stx__t { margin-top: var(--lv-s3); } /* Подсказка шага — обычной строкой, без розовой плашки и значка */ .lpt .lpt-stx__tip { display: block; padding: 0; background: none; color: var(--lv-text-3); font: 400 15px/1.55 var(--lv-font-ui); } .lpt .lpt-stx__tip .lv-ico { display: none; } .lpt .lpt-stx__tip a { color: var(--lv-text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); } /* ---------- Три тезиса в ряд (без регистрации, без страйков) ---------- Не карточки: тонкая линия сверху, заголовок и текст. */ .lpt .lpt-rights .lpt-tip { padding: var(--lv-s6) 0 0; background: none; border: 0; border-top: 1px solid var(--lv-border-1); border-radius: 0; } .lpt .lpt-rights .lpt-tip h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--lv-font-head); } .lpt .lpt-rights .lpt-tip p { margin: 0; color: var(--lv-text-2); font-size: 16px; line-height: 1.55; } /* Советы «так хуже / так лучше» остаются карточками: в них пример */ .lpt .lpt-tips .lpt-tip h3 { margin-top: 0; } /* ---------- Таблица сравнения ---------- Колонка Luvi чуть подсвечена. На телефоне — две колонки рядом и строка с названием над ними, вбок ничего не листается. */ .lpt .lpt-cmp-wrap { overflow: visible; } .lpt .lpt-cmp { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--lv-font-ui); } .lpt .lpt-cmp th, .lpt .lpt-cmp td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lv-border-2); } .lpt .lpt-cmp th { color: var(--lv-text-1); font: 700 16px/1.3 var(--lv-font-head); } .lpt .lpt-cmp td { color: var(--lv-text-2); } .lpt .lpt-cmp td:first-child { width: 22%; padding-left: 0; color: var(--lv-text-3); } .lpt .lpt-cmp th:last-child, .lpt .lpt-cmp td:last-child { background: rgba(253, 66, 156, .07); color: var(--lv-text-1); } @media (max-width: 700px) { .lpt .lpt-cmp, .lpt .lpt-cmp thead, .lpt .lpt-cmp tbody { display: block; } .lpt .lpt-cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lpt .lpt-cmp th:first-child { display: none; } .lpt .lpt-cmp th, .lpt .lpt-cmp td { padding: 10px 12px 14px; font-size: 15px; } .lpt .lpt-cmp tbody td:first-child { grid-column: 1 / -1; width: auto; padding: 18px 0 6px; border-bottom: 0; color: var(--lv-text-1); font: 700 15px/1.3 var(--lv-font-head); } } /* ---------- Вопросы по центру (правило владельца) ---------- */ .lpt #voprosy .lv-section__head { margin-inline: auto; text-align: center; } .lpt #voprosy .lv-acc { margin-inline: auto; } /* ---------- Тарифы ---------- */ /* ---------- Карточка-призыв с живым кадром ---------- Как «Сделайте свою первую песню» на главной: текст слева, фото справа до края карточки, на телефоне фото сверху. */ .lpt .prizyv { padding-top: 0; } .lpt .prizyv__karta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 380px; overflow: hidden; border-radius: 24px; border: 1px solid var(--lv-border-2); background: var(--lv-surface-1); } .lpt .prizyv__txt { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 56px 48px; } .lpt .prizyv__t { margin: 0; font: 800 clamp(30px, 3vw, 40px)/1.1 var(--lv-font-head); letter-spacing: -.025em; text-wrap: balance; } .lpt .prizyv__d { margin: 0; max-width: 40ch; color: var(--lv-text-2); font: 400 17px/1.55 var(--lv-font-ui); } .lpt .prizyv__go { align-self: flex-start; margin-top: 8px; } .lpt .prizyv__note { margin: 0; color: var(--lv-text-3); font: 400 13px/1.4 var(--lv-font-ui); } .lpt .prizyv__foto { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%); } @media (max-width: 900px) { .lpt .prizyv__karta { grid-template-columns: minmax(0, 1fr); min-height: 0; } .lpt .prizyv__foto { order: -1; height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); } .lpt .prizyv__txt { padding: 8px 20px 28px; } .lpt .prizyv__t { font-size: clamp(24px, 7.2vw, 31px); text-wrap: wrap; } .lpt .prizyv__go { align-self: stretch; text-align: center; } } /* ============================================================ ЛИПКАЯ КНОПКА РЕГИСТРАЦИИ — как на главной luvimusic.ru (pages/home, .lv-sticky; владелец 06.11.2026). Выезжает, когда студия ушла с экрана; прячется рядом со студией и у финального призыва. На ПК — пилюля по центру рабочей области (правее меню): сердце, подпись, кнопка. На телефоне — одна кнопка во всю ширину над нижним меню, сверху полоса растворяется в странице. Лежит вне .lpt, в масштабе студии (0.9). ============================================================ */ .lp-polosa { position: fixed; z-index: var(--z-sticky); left: 240px; right: 0; bottom: var(--s6); display: flex; justify-content: center; padding: 0 var(--s6); pointer-events: none; } body[data-side="mini"] .lp-polosa { left: 72px; } .lp-polosa__in { display: flex; align-items: center; gap: var(--s4); max-width: 100%; padding: 10px 10px 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(21, 20, 27, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 48px rgba(0, 0, 0, .55); transform: translateY(calc(100% + 40px)); opacity: 0; transition: transform .35s var(--ease-out), opacity .25s ease; pointer-events: none; } .lp-polosa.is-on .lp-polosa__in { transform: none; opacity: 1; pointer-events: auto; } .lp-polosa__t { font: 600 15px/1.2 var(--font-ui); color: var(--text-1); white-space: nowrap; } .lp-polosa__go { flex: none; height: 48px; padding: 0 24px; font-size: 16px; border-radius: 999px; } /* Сердце-эквалайзер, как на главной: полосы дышат вокруг середины, знак целиком коротко бьётся и держит паузу. */ .lp-serdce { flex: none; display: block; width: 40px; animation: lp-serdce-udar 2.6s ease-in-out infinite; } .lp-serdce__z { display: block; width: 100%; height: auto; overflow: visible; } .lp-serdce__z rect { fill: url(#lp-serdce-grad); transform-box: fill-box; transform-origin: center; animation: lp-serdce-dyshit 1.05s ease-in-out infinite alternate; } .lp-serdce__z rect:nth-of-type(1), .lp-serdce__z rect:nth-of-type(11) { animation-delay: -.86s; } .lp-serdce__z rect:nth-of-type(2), .lp-serdce__z rect:nth-of-type(10) { animation-delay: -.52s; } .lp-serdce__z rect:nth-of-type(3), .lp-serdce__z rect:nth-of-type(9) { animation-delay: -.18s; } .lp-serdce__z rect:nth-of-type(4), .lp-serdce__z rect:nth-of-type(8) { animation-delay: -.68s; } .lp-serdce__z rect:nth-of-type(5), .lp-serdce__z rect:nth-of-type(7) { animation-delay: -.34s; } @keyframes lp-serdce-dyshit { from { transform: scaleY(.78); } to { transform: scaleY(1); } } @keyframes lp-serdce-udar { 0%, 62%, 100% { transform: scale(1); } 8% { transform: scale(1.1); } 16% { transform: scale(1); } 24% { transform: scale(1.06); } 32% { transform: scale(1); } } @media (max-width: 900px) { .lp-polosa { left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 28px 16px 10px; background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 58%, rgba(12, 11, 16, 0) 100%); opacity: 0; transition: opacity .25s ease; } .lp-polosa.is-on { opacity: 1; } .lp-polosa__in { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transform: none; transition: none; } /* на телефоне в полосе живёт одна кнопка, как на главной */ .lp-polosa__t, .lp-polosa .lp-serdce { display: none; } /* 58 × 0.9 ≈ 52 px и 18 × 0.9 ≈ 16 px на экране — как у кнопки главной */ .lp-polosa__go { width: 100%; height: auto; min-height: 58px; font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .lp-polosa__in { transition: opacity .2s ease; transform: none; } .lp-serdce, .lp-serdce__z rect { animation: none; } } /* ---------- Мелочи после просмотра ---------- */ /* надпись над H1 — по той же левой линии, что и заголовок */ .lpt .lpt-lp-hero .lv-kicker { text-align: left; margin-left: 0; } /* «Другие возможности»: четыре плитки на всю ширину, картинка крупнее */ .lpt .lpt-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lpt .lpt-tool--art { grid-template-columns: 64px minmax(0, 1fr); padding: var(--lv-s4) var(--lv-s4) var(--lv-s4) var(--lv-s3); } .lpt .lpt-tool__art { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; } @media (max-width: 900px) { .lpt .lpt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lpt .lpt-tool--art { grid-template-columns: minmax(0, 1fr); } .lpt .lpt-tool__art { width: 100%; height: auto; aspect-ratio: 1; } } /* ---------- Телефон: размеры по чек-листу (замер 04.11.2026) ---------- Подписи не мельче 14 px, цели нажатия не меньше 44 px. Колонка примеров и полоса живут в масштабе студии 0.9, поэтому их размеры на 1/0.9 больше. */ @media (max-width: 900px) { .lpt .lv-fcard__d { font-size: 14px; line-height: 1.45; } .lpt .lv-fcard__go { font-size: 14px; } .lpt .lpt-prompt__t { font-size: 15px; } .lpt .lpt-prompt__r, .lpt .prizyv__note { font-size: 14px; } .lpt .lpt-tip__ex .lpt-bad, .lpt .lpt-tip__ex .lpt-good, .lpt .lpt-tip__ex span { font-size: 14px; } .lpt .lpt-tip p, .lpt .lpt-tool span { font-size: 15px; } } /* Кадр «одна песня» в блоке «Нейросеть, которая напишет песню за вас» (владелец 06.11.2026): кадр низкий, и метка справа на 29 % высоты ложилась на описание песни — ставим её под карточку. */ .lpt .lpt-shot:has(img[src*="shot-dva-varianta"]) .lv-metka--b { top: auto; bottom: -9%; } /* Самые узкие телефоны (320 px, первый iPhone SE): в двух колонках подвала длинные слова («конфиденциальности») не помещались и давали прокрутку вбок на 11 px — ссылки в одну колонку. */ @media (max-width: 359px) { .lpt .lv-footer__top { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ Этап 2 (06.11.2026): /pesnya-svoim-golosom, /beat, /sounds ============================================================ */ /* Плавающие метки у кадров («Темп и тональность») покачиваются и на Android на мгновение заходили за край экрана: прокрутка вбок на 1 px. Всё, что вылезает за ширину страницы, подрезаем (clip, а не hidden: прокрутки внутри не появляется). */ .lpt { overflow-x: clip; } /* H1 с переносом после двоеточия: вторая часть на ПК одной строкой. На телефоне переноса нет и кегль обычный — заголовок в три строки, а не в четыре (владелец 06.11.2026). */ @media (min-width: 1100px) { .lpt .lpt-lp-hero h1:has(.lpt-h1-2) { max-width: none; font-size: clamp(36px, 3.6vw, 52px); } .lpt .lpt-h1-2 { white-space: nowrap; } } @media (max-width: 1099px) { .lpt .lpt-lp-hero h1 br { display: none; } } /* Фото раздела, на его углу — кадр студии (биты и лупы — с рэперами) */ .lpt .lpt-sfoto { position: relative; justify-self: stretch; padding-bottom: 64px; } .lpt .lpt-sfoto__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; border: 1px solid var(--lv-border-2); } .lpt .lpt-sfoto__kadr { position: absolute; left: -28px; bottom: 0; width: min(64%, 360px); z-index: 2; justify-self: auto; } /* фото у шага — по ширине колонки шага */ .lpt .lpt-stx .lpt-sfoto--shag { width: min(100%, 520px); justify-self: center; } /* метки у кадра поверх фото «плавали» по картинке (владелец 06.11.2026) — без них */ .lpt .lpt-sfoto .lv-metka { display: none; } @media (max-width: 900px) { .lpt .lpt-sfoto { padding-bottom: 48px; } .lpt .lpt-sfoto__kadr { left: 10px; width: 74%; } } /* Советы и идеи с фото сверху (/pesnya-svoim-golosom) */ .lpt .lpt-tip:has(> .lpt-tip__img), .lpt .lpt-prompt:has(> .lpt-prompt__img) { overflow: hidden; } .lpt .lpt-tip__img, .lpt .lpt-prompt__img { display: block; width: calc(100% + 2 * var(--lv-s4)); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: calc(-1 * var(--lv-s4)) calc(-1 * var(--lv-s4)) var(--lv-s4); } .lpt .lpt-prompt__img { margin-bottom: 0; } /* «Попробовать» и «Выбрать» на телефоне (владелец 06.11.2026: «слишком здоровые»): нажимается вся карточка, кнопка — строкой-ссылкой. */ @media (max-width: 900px) { .lpt .lpt-prompt:has([data-try], [data-pick]) { cursor: pointer; } .lpt .lpt-prompt .lv-btn[data-try], .lpt .lpt-prompt .lv-btn[data-pick] { height: auto; min-height: 0; padding: 2px 0; border: 0; background: none; box-shadow: none; color: var(--lv-accent); font-size: 15px; font-weight: 700; } .lpt .lpt-prompt .lv-btn[data-try]::after, .lpt .lpt-prompt .lv-btn[data-pick]::after { content: " →"; } } /* ---------- Общая шапка сайта над студией (Катя, 06.11.2026) ---------- Гостю и роботу над студией та же шапка, что на остальных страницах (komponenty.ts → шапкаНадСтудией). Она прилипает к верху (64 px на ПК), поэтому меню студии прилипает под ней и короче на её высоту — иначе низ меню («Начать бесплатно», «Войти») уходил бы за экран. На телефоне меню студии выезжает шторкой поверх всего, его не трогаем. */ @media (min-width: 901px) { /* --luvi-shapka-h — высота шапки (komponenty.ts), с вырезом экрана в режиме приложения */ #luvi-shapka ~ .app .sidebar { top: var(--luvi-shapka-h, 64px); height: calc(var(--vh) - var(--luvi-shapka-h, 64px)); } /* логотип уже в шапке прямо над меню — второй рядом не нужен, остаётся только кнопка «свернуть меню» */ #luvi-shapka ~ .app .sidebar__logo { display: none; } #luvi-shapka ~ .app .sidebar__head { justify-content: flex-end; height: 48px; } }