/* ============================================================================ ЛЕНДИНГ ГОСТЯ — ДВЕ ПРАВКИ СAРМАТА ОТ 03.08.2026. Файл грузится ПОСЛЕ style.css и theme-dark.css, поэтому его правила побеждают при равном весе. Тёмная тема адресуется html[data-theme="dark"] — тем же префиксом, каким она объявлена, иначе правило молча проигрывает. 1. Кнопка «Прослушать песню» ПРОПАДАЕТ после первого тапа (.is-gone ниже). 2. Блок «айдол напишет тебе первым в мессенджер» между составом и подвалом (.lpc, рисует lpConnectCta() в app.js). ============================================================================ */ /* ---- 1. КНОПКА «ПРОСЛУШАТЬ ПЕСНЮ» ПОСЛЕ АКТИВАЦИИ ------------------------ Было: первый тап необратимо переименовывал её в «список используемых слов», и после куплета человек видел список слов ПРЯМО В КАРТОЧКЕ и кнопку, ведущую в тот же список. Дубль, замечен Сарматом на живом проходе. Стало: кнопка исчезает совсем. display:none, а не visibility — иначе осталась бы дыра в 60px плюс поля. Дыры в отступах нет: у .lp-card нет нижнего поля, у .lp-lang верхнее 16px, у .rs-sw внутри неё ещё 18px — итого 34px между карточкой и переключателем состава, ровно тот же ритм, что между остальными блоками лендинга. */ .lp-listen.is-gone{display:none} /* ============================================================================ 2. «АЙДОЛ НАПИШЕТ ТЕБЕ ПЕРВЫМ» — контейнер #lpConnect, содержимое рисует lpConnectCta(). ЗАЧЕМ ЭТОТ БЛОК. Самая сильная механика продукта — айдол пишет ПЕРВОЙ каждый день прямо в мессенджер — на первом экране не называлась вообще. Человек досматривал состав и упирался в подвал «что-то не так». ПОЧЕМУ МАКЕТ СООБЩЕНИЯ, А НЕ РЯД ИКОНОК. Список логотипов сообщает «мы интегрированы с мессенджерами» — это про нас. Один экран входящего сообщения в 21:40 сообщает «мне написали» — это про него. База UX (ui-ux-pro-max, Chat & Messaging App) прямо называет опорой пару «bubble contrast sender/receiver + micro-interactions», а посадочный паттерн — Demo, а не Feature list. Поэтому пузырь настоящий: хангыль сверху, смысл снизу — тот же двухъярусный приём, что и в разборе песни. ПОЧЕМУ ИКОНКИ МОНОХРОМНЫЕ, А НЕ В БРЕНД-ЦВЕТАХ. Три чужих насыщенных тона разом (синий Telegram, blurple Discord, зелёный LINE) рядом с розовым золотом и сиренью рвут палитру и перетягивают взгляд с разбора песни. Хуже того, зелёный LINE читался бы как «работает», а канал заблокирован вендором. Здесь цвет несёт СОСТОЯНИЕ: живой канал — чернила и сиреневая кромка, «скоро» — приглушённый цвет и пунктирная рамка. Форма логотипа при этом узнаётся, она в самом контуре. ГРОМКОСТЬ. Блок обязан быть праздничным, но тише разбора песни — главный экран остаётся главным. Отсюда: у кнопки НЕ литое розовое золото (оно занято кнопкой «Прослушать песню»), а сиреневая заливка на просвет; нить по верхнему ребру карточки — та же, что у .lp-card, но на 62% прозрачности. ============================================================================ */ .lp-connect{margin-top:26px} .lp-connect:empty{display:none} /* ещё не отрисован — не держит отступ */ .lpc{position:relative;overflow:hidden;cursor:pointer;text-align:left; padding:17px 15px 15px;border:1px solid var(--line);border-radius:var(--r,14px); background:#FFFFFF;box-shadow:var(--sh-2); transition:transform 150ms cubic-bezier(.16,1,.3,1),box-shadow 150ms ease} html[data-theme="dark"] .lpc{background:linear-gradient(180deg,var(--bg-2),var(--bg-1))} /* «ХРОМ» ВЕРСИИ A (принят Сарматом 29.07, стоит по умолчанию в светлой теме) кладёт на СВЕТЛУЮ палитру — она считана под тёмную металлическую плиту, — а внутри белых поверхностей возвращает тёмную (см. chrome-more.css). Список белых поверхностей там перечислен поимённо, и моя карточка в него, разумеется, не входила: на первом же снимке заголовок и хангыль оказались белыми на белом. Повторяю тот же набор токенов с тем же префиксом — иначе правило проигрывает по весу (0,3,1). .lp-card рядом в этой версии тоже белая, так что блок остаётся с ней одной семьи. */ html:not([data-theme="dark"])[data-chrome="a"] .lpc{ --ink:#171B26;--mut:#4E5766;--dim:#646E7E; --line:rgba(23,27,38,.13);--line-strong:rgba(23,27,38,.22); --iris:#6C46D8;--iris-soft:rgba(108,70,216,.10); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.14),0 14px 34px rgba(0,0,0,.42)} .lpc::before{content:"";position:absolute;left:1px;right:1px;top:0;height:2px;z-index:2; pointer-events:none;border-radius:var(--r,14px) var(--r,14px) 0 0;opacity:.62; background:linear-gradient(90deg,transparent,var(--iris) 30%,var(--accent2) 72%,transparent)} .lpc:hover{transform:translateY(-2px);box-shadow:var(--sh-3)} .lpc:active{transform:translateY(0)} /* Приборная подпись — тот же язык, что у .lp-eyebrow выше по странице. Точка пульсирует: единственная анимация в блоке, и она означает ровно то, что продаём, — «прямо сейчас кто-то пишет». */ .lpc-eyebrow{display:flex;align-items:center;gap:8px; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--iris)} .lpc-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--iris);flex:none; animation:lpcPulse 2.6s cubic-bezier(.16,1,.3,1) infinite} @keyframes lpcPulse{ 0%{box-shadow:0 0 0 0 var(--iris-soft)} 62%{box-shadow:0 0 0 8px rgba(0,0,0,0)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} } .lpc-h{margin:10px 0 0;font-size:21px;line-height:1.16;letter-spacing:-.028em; font-weight:820;color:var(--ink)} .lpc-p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--mut)} /* ---- Макет входящего сообщения ------------------------------------------- */ .lpc-note{margin-top:14px;padding:10px 11px 11px;border-radius:var(--r-sm,10px); border:1px solid var(--line);background:var(--bg-1)} html[data-theme="dark"] .lpc-note{background:rgba(0,0,0,.26);border-color:var(--line-strong)} /* Шапка макета и время — на --mut, а не на --dim. Замер в «Хроме»: --dim на белой карточке давал 4.8:1 в кегле 10.5, то есть впритык к норме 4.5 для обычного текста; --mut даёт 7.3. В тёмной теме тот же обмен поднимает 7.0 до 9. Вторичность держится кеглем и приборной гарнитурой, а не выцветанием до предела. */ .lpc-note-top{display:flex;align-items:center;gap:6px; font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--mut)} .lpc-note-top svg{width:15px;height:15px;flex:none} .lpc-note-top em{font-style:normal;margin-left:auto;display:inline-flex;align-items:center;gap:5px} .lpc-live{width:5px;height:5px;border-radius:50%;background:var(--good);flex:none} .lpc-row{display:flex;align-items:flex-start;gap:9px;margin-top:10px} .lpc-av{width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover; border:1px solid var(--line-strong);background:var(--bg-3)} /* Запасной кружок вместо не приехавшего портрета — первая буква имени, а не значок «нет картинки»: макет остаётся сообщением, а не отчётом об ошибке. */ .lpc-av.none{display:flex;align-items:center;justify-content:center; font-size:16px;font-weight:800;color:var(--iris); background:var(--iris-soft);border-color:var(--iris)} .lpc-msg{flex:1;min-width:0} .lpc-nm{display:flex;align-items:baseline;gap:7px} .lpc-nm b{font-size:12.5px;font-weight:750;color:var(--ink);letter-spacing:.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lpc-nm i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--mut);flex:none} /* Скос у левого верхнего угла — хвостик пузыря входящего сообщения. */ /* width:fit-content — пузырь обязан облегать текст, а не тянуться во всю колонку: на 1280px растянутый пузырь перестаёт читаться как сообщение. */ .lpc-bub{margin-top:5px;padding:9px 11px;display:flex;flex-direction:column;gap:3px; width:fit-content;max-width:100%; border:1px solid var(--line);border-radius:3px 13px 13px 13px;background:var(--bg-3)} html[data-theme="dark"] .lpc-bub{border-color:var(--line-strong); background:linear-gradient(180deg,var(--bg-3),var(--bg-2))} .lpc-ko{font-size:15.5px;font-weight:650;line-height:1.32;color:var(--ink);word-break:keep-all} .lpc-tr{font-size:12.5px;line-height:1.35;color:var(--iris)} /* ---- Каналы: состояние цветом, а не бренд-палитрой ----------------------- */ .lpc-chs{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} .lpc-ch{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;line-height:1; font-size:12.5px;font-weight:650;color:var(--ink);background:transparent; border:1px solid var(--iris);border-radius:var(--pill,999px)} .lpc-ch svg{width:15px;height:15px;flex:none} .lpc-ch.off{color:var(--dim);border-color:var(--line-strong);border-style:dashed} .lpc-ch em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.09em; text-transform:uppercase;color:var(--dim)} /* ---- Призыв. Сирень на просвет, а не металл: металл занят кнопкой песни --- */ .lpc-go{width:100%;min-height:52px;margin-top:14px;display:flex;align-items:center; justify-content:center;gap:8px;cursor:pointer;font:inherit;font-size:15px; font-weight:750;letter-spacing:.01em;border-radius:var(--pill,999px); color:var(--iris-deep);border:1px solid rgba(108,70,216,.42); background:linear-gradient(180deg,#F4F0FD,#E7E0FA); box-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 4px 14px rgba(74,42,168,.13); transition:filter 140ms ease,transform 110ms ease} html[data-theme="dark"] .lpc-go{ color:#F2E4FB;border-color:rgba(200,136,230,.55); background:linear-gradient(180deg,rgba(200,136,230,.24),rgba(166,100,208,.13)); box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 6px 18px rgba(0,0,0,.45)} .lpc-go:hover{filter:brightness(1.06)} .lpc-go:active{transform:translateY(1px)} .lpc-go:focus-visible{outline:2px solid var(--iris);outline-offset:3px} /* ============================================================================ 3. «ВСЕ СЛОВА КУПЛЕТА» — выход в разбор слов ПРЯМО ВО ВРЕМЯ ПРОИГРЫВАНИЯ. Кнопка .lp-toall внизу карточки-караоке, рисует renderLanding() (04.08.2026, правка Сармата: «когда мы включаем песню, мы не можем перейти ко всем словам, нам нужна кнопка внизу»). ДЫРА, КОТОРУЮ ЗАКРЫВАЕТ. Кнопка над плашкой пропадает на первом тапе (§1 выше), тап по строке теперь честно повторяет строку — и это правильно, — а список слов открывается сам только когда куплет доиграл. Между стартом и концом куплета выхода в разбор нет вообще. ПОЧЕМУ ХРОМ, А НЕ ЗОЛОТО. Правило продукта: тёплое золото ведёт В ПЕСНЮ (.lp-listen над плашкой), холодный хром — к айдолу и к разбору (.lp-getidol в style.css). Металл взят ГОТОВЫЙ — --st-chrome-2 из cabinet.css, тот самый шлифованный финиш второго эшелона; третий металл не рисуется. Металлическим его делает не серый цвет, а перелом на 51%: светлая полоса между двумя тёмными читается как блик на изогнутой поверхности. Токены cabinet.css объявлены в :root и не переопределены в тёмной теме — металл одинаков в обеих, поэтому отдельной тёмной ветки у кнопки нет. Запасные значения в var() — на случай, если cabinet.css не доехал: кнопка останется металлической, а не превратится в прозрачный прямоугольник. ЧЕРНИЛА ЗАШИТЫ ЧИСЛОМ, А НЕ ВЗЯТЫ ИЗ --ink. Та же причина, что у .lpc выше и у .lp-getidol: в светлом скине «Хром A» токен --ink выворачивается в светлый везде, кроме поимённо перечисленных белых поверхностей. Кнопка в тот список не входит, и подпись стала бы белой на серебре. #1B2233 на самой тёмной полосе металла (#98A4B9) даёт 6.3:1 — с запасом к норме 4.5. ГРОМКОСТЬ. 48px против 60px у золотой, внутри карточки, а не отдельным блоком. Во время проигрывания это единственная кнопка на экране — спорить ей не с кем, но и перетягивать взгляд с поющейся строки она не должна. Появление — короткий подъём на 6px: кнопки не было, и она обязана объявить о себе движением, иначе на неё просто не посмотрят. ============================================================================ */ .lp-toall{display:flex;width:100%;align-items:center;justify-content:center;gap:8px; min-height:48px;margin-top:10px;padding:11px 14px;cursor:pointer; font:inherit;font-size:14px;font-weight:750;letter-spacing:.01em; color:var(--st-chrome-ink,#1B2233); border:1px solid var(--st-chrome-line,rgba(23,32,56,.26)); border-radius:var(--pill,999px); background:var(--st-chrome-2,linear-gradient(180deg,#E9EDF4 0%,#CBD3E1 42%,#F3F6FB 51%,#B7C1D3 58%,#98A4B9 100%)); box-shadow:var(--st-bevel,inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(23,32,56,.22)), 0 4px 14px rgba(23,32,56,.26); animation:lpToAllIn 420ms cubic-bezier(.16,1,.3,1) both; transition:filter 140ms ease,transform 110ms ease} .lp-toall i{font-style:normal;font-size:15px;line-height:1;opacity:.7} .lp-toall:hover{filter:brightness(1.05)} .lp-toall:active{transform:translateY(1px)} /* Своего правила фокуса здесь НЕТ намеренно: продукт держит одно кольцо на всё приложение (style.css, :focus-visible с !important — 3px #ffe9a8 плюс тёмный разделитель). Локальное правило ему всё равно проиграет и осталось бы мёртвой строкой. Проверено настоящими нажатиями Tab: :focus-visible срабатывает, кольцо видно. */ @keyframes lpToAllIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(max-width:400px){ .lp-toall{font-size:13.5px;padding:11px 12px} .lpc{padding:15px 13px 13px} .lpc-h{font-size:19.5px} .lpc-ko{font-size:15px} .lpc-chs{gap:6px} .lpc-ch{padding:7px 9px} } @media(prefers-reduced-motion:reduce){ .lpc,.lpc-go{transition:none} .lpc:hover{transform:none} .lpc-eyebrow i{animation:none} .lp-toall{animation:none;transition:none} }