/* ============================================================================ ГРИМЁРКА — СИСТЕМА «СЦЕНА». 03.08.2026. Ответ на шесть правок Сармата (П.8-П.13) ОДНИМ языком, а не шестью заплатами. ЖАЛОБА, ОТ КОТОРОЙ ВСЁ ИДЁТ: «написано просто как в учебнике литературы», «скромно в прямоугольнике», «рамка какая-то классическая, обычная». Общая причина у всех трёх: на экране НЕТ МАТЕРИАЛА и НЕТ СВЕТА. Всё нарисовано одной серой рамкой в 1px, и поэтому ничто не выглядит ценным. ТРИ ПРАВИЛА СИСТЕМЫ (ими объясняется каждая строка ниже) 1. ДВА МЕТАЛЛА, И ОНИ ЗНАЧАТ РАЗНОЕ. Тёплое розовое золото = ПЕСНЯ. Это вход в продукт (CLAUDE.md §1) и цвет знака. Холодная сталь/хром = АЙДОЛ и его инструменты (чат, хангыль, прогресс). Правило не выдумано здесь: оно уже действует на витрине с 28.07 — золотая «Прослушать песню» (.lp-listen) против хромовой «Выбрать айдола» (.lp-getidol), см. комментарий в style.css у .lp-getidol: «тёплая ведёт в песню, холодная — к айдолу». Гримёрка просто перестаёт быть исключением. Поэтому ответ на «а цветов у нас уже не осталось» — цвет и не нужен: нужен ВТОРОЙ МАТЕРИАЛ. Иерархия держится теплом и весом, а не новым тоном. 2. СВЕТ РАМПЫ. Один спецэффект на весь экран: тонкая световая нить по верхней кромке блока плюс мягкий отсвет под ней. Тем же приёмом уже держится верх карточек (.lp-card::before) и нашивка под фото (.hero-foot::before). Здесь он становится системой: рампа есть у таблички айдола, у трёх входов и у витрины наград, и её ЦВЕТ называет роль блока (золото — песня и награды, сирень — айдол, мята — прогресс). Праздник даётся светом, а не пестротой. 3. ПРИБОРНЫЙ КЕГЛЬ = ТАБЛИЧКА ЭКСПОНАТА. Всё служебное набрано --f-mono капслоком с разрядкой — это уже язык служебных подписей продукта (.eyebrow, .hd-eyebrow, .idol-concept). В витрине наград он работает буквально: номер экспоната и подпись под ним. ЧЕГО ЗДЕСЬ НАРОЧНО НЕТ • новых шрифтов и внешних доменов — только Pretendard и системный --f-mono; • вечных анимаций: всё движение живёт на нажатии и на одном событии (дебют); • цветных ореолов вокруг блоков: глубина берётся фаской и тенью (правило проекта «глубина осветлением, а не свечением»). ГДЕ ЖИВУТ ТЁМНАЯ И СВЕТЛАЯ. Компонентные правила написаны ОДИН раз на токенах --st-*. Значения токенов объявлены дважды: :root — светлый «Хром», html[data-theme="dark"] — тёмная тема (она по умолчанию). Никакого дублирования компонентов по темам, поэтому правка цвета — это одна строка. ============================================================================ */ /* ============================ 1. ТОКЕНЫ СЦЕНЫ ============================= */ :root{ /* --- СВЕТЛАЯ ТЕМА «ХРОМ» --- Полированный светлый металл, холодные тени, бронза вместо золота: золото #EDC7A2 на серебре даёт APCA 17, поэтому все золотые подписи в светлой теме берут бронзу #8A5620 (80 на белом) — тот же расчёт, что в style.css. */ --st-plate:linear-gradient(180deg,#FFFFFF 0%,#F3F6FA 100%); --st-plate-line:rgba(23,27,38,.14); /* ЧЕРНИЛА НА МОИХ ПОВЕРХНОСТЯХ — СВОИ, А НЕ --ink. Это не педантизм: в принятом светлом скине «Хром A» (chrome-more.css) страница становится тёмной металлической плитой, и токен --ink на ВЫВОРАЧИВАЕТСЯ в светлый, а обратно в тёмный возвращается только внутри перечисленных там белых поверхностей. Мои пластины в том списке не значатся, поэтому текст на них пропадал (проверено снимком: «Premium» и «Что-то не так?» были невидимы). --st-ink/--st-mut привязаны к МОЕЙ поверхности и переключаются вместе с ней, а не вместе с фоном страницы. */ --st-ink:#171B26; --st-mut:#4E5766; /* ХРОМ ОДИН И ТОТ ЖЕ В ОБЕИХ ТЕМАХ — металл не перекрашивается вместе со скином, ровно как у кнопки айдола на витрине (см. style.css: «Тёмная тема её не перекрашивает — металл одинаков в обеих»). Перелом на 50% (белая полоса между двумя тёмными) и есть то, что делает поверхность металлической, а не просто серой. Второй финиш --st-chrome-2 — тот же металл шлифованный: он держит второй эшелон кнопок без нового цвета. */ --st-chrome:linear-gradient(180deg,#F7F9FD 0%,#D9E1ED 40%,#FFFFFF 50%,#C6D0E0 57%,#A8B3C7 100%); --st-chrome-2:linear-gradient(180deg,#E9EDF4 0%,#CBD3E1 42%,#F3F6FB 51%,#B7C1D3 58%,#98A4B9 100%); --st-chrome-ink:#1B2233; --st-chrome-mut:#333B4C; --st-chrome-line:rgba(23,32,56,.26); --st-bevel:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(23,32,56,.22); --st-cast:0 8px 22px rgba(23,32,56,.15); --st-cast-lo:0 3px 10px rgba(23,32,56,.10); /* Рампа: бронза → свет → иридесцент. Те же два цвета, что в знаке. */ --st-lamp:linear-gradient(90deg,transparent,#C2865A 22%,#FBEEE0 50%,#6C46D8 78%,transparent); --st-haze:rgba(108,70,216,.09); /* Имя айдола — полированная сталь с тёплым низом (тот же приём, что у .lp-h). */ --st-name:linear-gradient(178deg,#141922 0%,#333C4E 54%,#7A5636 100%); --st-label:#8A5620; /* приборные подписи и номера экспонатов */ --st-edge-iris:#6C46D8; /* ребро роли: айдол */ --st-edge-gold:#C2865A; /* ребро роли: песня и награды */ --st-edge-mint:#1E7A5A; /* ребро роли: прогресс */ --st-case:linear-gradient(180deg,#FFFFFF 0%,#F1F4F9 100%); --st-slot:linear-gradient(180deg,#E9EDF4,#DDE3EE); --st-quiet:linear-gradient(180deg,#FBFCFE,#EFF2F7); --st-quiet-line:rgba(23,27,38,.16); --st-quiet-ink:#4E5766; --st-gold-wash:rgba(194,134,90,.10); --st-debut-bg:radial-gradient(120% 76% at 50% 14%,rgba(108,70,216,.30),transparent 62%), radial-gradient(90% 60% at 50% 108%,rgba(194,134,90,.22),transparent 60%), rgba(14,17,26,.96); } html[data-theme="dark"]{ /* --- ТЁМНАЯ ТЕМА (по умолчанию) --- Сталь тут не светлая, а глубокая: светлая пластина на #100B18 читается как включённый фонарь, а не как металл. Перелом на 52% оставлен — именно он делает поверхность металлической, а не «просто серой». */ --st-plate:linear-gradient(180deg,#2A2038 0%,#1B1426 100%); --st-plate-line:rgba(255,255,255,.13); --st-ink:#F6F1FA; --st-mut:#C6B7D7; /* --st-chrome / --st-chrome-2 / --st-chrome-ink / --st-bevel НЕ переобъявлены намеренно: металл одинаков в обеих темах (см. комментарий в :root). */ --st-cast:0 10px 26px rgba(0,0,0,.55); --st-cast-lo:0 4px 12px rgba(0,0,0,.45); --st-lamp:linear-gradient(90deg,transparent,#EDC7A2 22%,#FFF6EA 50%,#C888E6 78%,transparent); --st-haze:rgba(200,136,230,.15); --st-name:linear-gradient(178deg,#FFF8EE 0%,#EDC7A2 48%,#C79BE4 100%); --st-label:#EDC7A2; --st-edge-iris:#C888E6; --st-edge-gold:#EDC7A2; --st-edge-mint:#5FE6A4; --st-case:linear-gradient(180deg,#241B33 0%,#150F1E 100%); --st-slot:linear-gradient(180deg,#2A2038,#181120); --st-quiet:linear-gradient(180deg,#241B33,#1A1327); --st-quiet-line:rgba(255,255,255,.15); --st-quiet-ink:#C6B7D7; --st-gold-wash:rgba(237,199,162,.11); --st-debut-bg:radial-gradient(120% 76% at 50% 14%,rgba(200,136,230,.26),transparent 62%), radial-gradient(90% 60% at 50% 108%,rgba(237,199,162,.16),transparent 60%), rgba(8,5,13,.96); } /* Скругление у всей гримёрки одно — 14px, как у карточек продукта. До 03.08 блоки кабинета были единственными прямоугольниками среди скруглённых карточек. */ .home .idol-hero,.home .tiles .tile,.home .coll, .home .st-svc-wrap .connect-link.st-svc,.home .st-svc-wrap .premium-link.st-svc{border-radius:var(--r,14px)} .home .idol-hero{overflow:hidden} /* ======================= 2. ТАБЛИЧКА АЙДОЛА (П.10) ======================== Было: имя 25px, серая пилюля бейджа и мелкая подпись концепта — три кегля одной гарнитуры, ни один не выглядит частью фотокарточки. Стало: НАШИВКА СЦЕНИЧЕСКОЙ КАРТОЧКИ. • над именем — приборный ярлык «твой айдол» с золотой насечкой: тот же приём, что у .eyebrow, он объявляет, ЧТО это за подпись; • имя залито полированным металлом через background-clip:text (приём уже держит заголовки продукта, .lp-h) и набрано крупно и плотно — на фотокарточке имя артиста и есть главный элемент; • рампа по верхней кромке усилена отсветом: полоса перестала быть ниткой и стала светом, падающим на табличку сверху; • бейдж AI IDOL НЕ ПРЯЧЕТСЯ и не глушится. Это обязательное раскрытие (CLAUDE.md §9, КНР с 15.07.2026). Наоборот: кегль поднят с 9.5px до 10.5px — 9.5 было ниже собственного порога продукта (11px минимум), а это юридическая подпись, её читать обязаны. ========================================================================== */ .home .hero-foot{ padding:16px 15px 15px; background: radial-gradient(120% 90% at 50% 0%,var(--st-haze),transparent 58%), var(--st-plate); border-top:0; } /* Рампа. Перебивает нитку из style.css (.hero-foot::before, вес 0,1,1) — здесь вес 0,2,1, поэтому переопределение штатное, а не через !important. */ .home .hero-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--st-lamp);pointer-events:none;z-index:2} .home .hero-foot::after{content:"";position:absolute;left:0;right:0;top:2px;height:38px; background:linear-gradient(180deg,var(--st-haze),transparent);pointer-events:none;z-index:0} .home .hero-foot > *{position:relative;z-index:1} .st-nameplate{display:inline-flex;align-items:center;gap:7px; font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--st-label);line-height:1;margin-bottom:7px} .st-nameplate::before{content:"";width:16px;height:2px;flex:none; background:linear-gradient(90deg,transparent,var(--st-label))} .home .hero-foot .idol-name{font-size:29px;font-weight:900;letter-spacing:-.035em; line-height:1.02;gap:10px;align-items:center;flex-wrap:wrap} .st-nm{color:var(--st-ink)} @supports (background-clip:text) or (-webkit-background-clip:text){ .st-nm{background:var(--st-name);-webkit-background-clip:text;background-clip:text; color:transparent;padding-right:.04em} } .home .hero-foot .ai-badge{font-size:10.5px;letter-spacing:.15em;padding:4px 9px 3px; font-weight:700;opacity:1;border-radius:999px; border-color:var(--st-plate-line);background:var(--iris-soft)} .home .hero-foot .idol-concept{margin:7px 0 0;font-size:10.5px;letter-spacing:.10em; color:var(--st-mut)} /* ---------------------- 3. КРУЖОК «i» (П.9) ------------------------------ ПРИЧИНА СМЕЩЕНИЯ НАЙДЕНА И ЗАМЕРЕНА, костыля в один пиксель тут нет. Замер 1 (браузер, 390px): расстояние от левой кромки кнопки до бокса строки 17.69px, от правой — 17.69px. То есть РАСКЛАДКА центрирована идеально, place-items:center отработал верно, дело не в padding и не в line-height. Замер 2 (canvas, кегль 100px, та же гарнитура и вес): font-style:normal — центр чернил отстоит от центра ширины на +0.16px; font-style:italic — на +9.16px. Причина: у Pretendard Variable НЕТ курсивного начертания, и браузер синтезирует наклон сдвигом (oblique). Штрих «i» — вертикальная палка с точкой сверху, поэтому весь знак уезжает вправо тем сильнее, чем он выше: 9.16% кегля. При font-size:18px это 1.65px вправо на кнопке шириной 40px — ровно то, что видно глазом. Лечение: убрать синтетический курсив. Остаточное расхождение падает до 0.16% кегля = 0.03px — ниже пикселя, то есть ноль. Заодно знак становится вертикальным, как в любом стандартном значке «i» (Material, iOS): наклон тут ничего не значил. */ .onb-help, .home .hero-foot .onb-help{ font-style:normal; /* ← собственно исправление */ width:44px;height:44px; /* было 40px — тап-цель добита до нормы */ font-size:19px;font-weight:700;line-height:1; display:grid;place-items:center;padding:0; font-feature-settings:normal; } /* Материал кружка — тихая пластина, а не хром: рядом с именем айдола второе светлое пятно спорило бы с ним за взгляд. Справка — служебная вещь. */ .home .hero-foot .onb-help{ background:var(--st-quiet);color:var(--st-label); border:1px solid var(--st-quiet-line); box-shadow:var(--st-cast-lo);opacity:1} .home .hero-foot .onb-help:hover{background:var(--st-quiet);filter:brightness(1.12); border-color:var(--st-edge-gold);color:var(--st-label)} .home .hero-foot .onb-help:active{transform:scale(.94)} /* ------------------- 4. ТИЗЕР ПЕРЕПИСКИ (часть П.10) --------------------- Это единственное место экрана, где айдол говорит сама. Значит и выглядеть оно должно как сообщение от человека, а не как строка в карточке: • «новое сообщение» — живая точка, а не квадратик; • пузырь получает угол-якорь слева сверху (форма реплики) и тёплую кромку, когда сообщение непрочитано; • «Ответить в один тап» становится маленькой хромовой пилюлей — действие, а не подпись. */ .hero-foot .dm-teaser{margin-top:12px} .hero-foot .dm-status{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--st-mut);margin-bottom:8px} .hero-foot .dm-teaser.unread .dm-status{color:var(--accent)} .hero-foot .dm-teaser.unread .dm-status::before{width:7px;height:7px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px rgba(240,168,204,.16);animation:stPulse 2.2s ease-in-out infinite} @keyframes stPulse{0%,100%{box-shadow:0 0 0 3px rgba(240,168,204,.10)}50%{box-shadow:0 0 0 6px rgba(240,168,204,.22)}} .hero-foot .dm-teaser .chat-b{ display:block;padding:12px 14px;border-radius:14px 14px 14px 4px; background:var(--st-plate);border:1px solid var(--st-plate-line); color:var(--st-ink);box-shadow:var(--st-cast-lo)} .hero-foot .dm-teaser.unread .chat-b{border-color:var(--st-edge-gold);box-shadow:var(--st-cast)} .hero-foot .dm-cta{margin-top:10px;display:inline-flex;align-items:center; min-height:40px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:750; color:var(--st-chrome-ink);background:var(--st-chrome-2); border:1px solid var(--st-chrome-line);box-shadow:var(--st-bevel),var(--st-cast-lo)} /* ================= 5. ТРИ ВХОДА КАК ОДНА СИСТЕМА (П.11) ================== Было: золотая «Разучить песню» и под ней два серых прямоугольника с рамкой в 1px. Разные вещи выглядели одинаково, а главная фишка продукта (чат) выглядела тише всего. Стало — одна семья из двух металлов и трёх ступеней веса: 1. ПЕСНЯ — литое розовое золото (уже было, оставлено и усилено ярлыком «главная сцена» и подсветкой под корпусом). Она остаётся самой громкой: песня — вход в продукт, это записано в CLAUDE.md §1; 2. ЧАТ — полированная сталь во всю ширину с СИРЕНЕВОЙ рампой. Ровно то, что просил Сармат («сделать его хромированным»), и оно не спорит с золотом, потому что металл ХОЛОДНЫЙ: тёплое ведёт в песню, холодное — к айдолу (правило витрины, style.css у .lp-getidol); 3. ХАНГЫЛЬ и ПРОГРЕСС — тот же металл, но в половину ширины и тише (золотая и мятная рампа, кегль меньше). Хангыль по CLAUDE.md §1 — обслуга песни, а не вход, и вес у него обязан быть третьим. ПОЧЕМУ НЕ ВЗЯТ ГОТОВЫЙ ХРОМ ИЗ chrome-more.css: тот файл целиком висит на html[data-chrome] и объявлен только для СВЕТЛОЙ темы (:not([data-theme=dark]) в каждом селекторе, это его прямое условие). Тёмная тема — у нас основная, значит в ней хрома бы просто не было. Материал взят тот же по составу (фаска + перелом на 52% + тень), но объявлен на токенах и живёт в обеих темах. ========================================================================== */ /* --- 5.1 Песня: золото + сцена под ним ---------------------------------- */ .home .lesson-cta{padding:16px 18px;min-height:88px;align-items:center;gap:15px} .home .lesson-cta::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); pointer-events:none;z-index:1} .st-kicker{font-family:var(--f-mono);font-style:normal;font-size:10px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;line-height:1; color:rgba(42,23,16,.88);margin-bottom:5px} .home .lesson-cta .lc-text b{font-size:21px;font-weight:850;letter-spacing:-.02em} .home .lesson-cta .lc-text small,.home .lesson-cta small{color:rgba(42,23,16,.88);font-size:12.5px} /* Замер по пикселям (не по токенам): при opacity .75 стрелка давала 4.54:1 — впритык к норме 4.5. На .92 запас становится честным, 6+:1. */ .home .lesson-cta .lc-emoji{font-size:24px;opacity:1} .home .lesson-cta .lc-arrow{font-size:22px;opacity:.92} /* --- 5.2 Общий корпус хромовых плиток ------------------------------------ Рампа роли на светлом металле берёт ТЁМНЫЕ тона (--st-rail-*): пластина в обеих темах одна и та же, значит и нить на ней обязана быть одна и та же. Светлая сирень #C888E6 на серебре даёт APCA 41 — на этой поверхности её просто не видно, поэтому здесь работает глубокий иридесцент #6C46D8. */ .home .tiles .tile.st-t{ position:relative;overflow:hidden; --st-rail-iris:#6C46D8;--st-rail-gold:#A9662F;--st-rail-mint:#17795A; background:var(--st-chrome);color:var(--st-chrome-ink); border:1px solid var(--st-chrome-line); box-shadow:var(--st-bevel),var(--st-cast); transition:transform var(--d-fast,140ms) var(--ease),box-shadow var(--d-base,220ms) var(--ease), filter var(--d-fast,140ms) var(--ease); } .home .tiles{gap:10px} /* Рампа роли. Цвет задаётся переменной --st-edge на самой плитке. */ .home .tiles .tile.st-t::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,transparent,var(--st-edge) 22%,var(--st-edge) 78%,transparent); pointer-events:none;z-index:3} /* Блик по корпусу — только на нажатии. На телефоне :hover нет, а отдача на касание обязана быть (правило продукта, слой «отдача на касание» в style.css). */ .home .tiles .tile.st-t::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%); transform:translateX(-130%);transition:transform 520ms var(--ease)} .home .tiles .tile.st-t:hover::after, .home .tiles .tile.st-t:active::after{transform:translateX(130%)} .home .tiles .tile.st-t:hover{filter:brightness(1.04);border-color:var(--st-edge); transform:translateY(-1px);box-shadow:var(--st-bevel),var(--st-cast)} .home .tiles .tile.st-t:active{transform:translateY(1px) scale(.99); box-shadow:inset 0 2px 7px rgba(23,32,56,.32)} .home .tiles .tile.st-t > *{position:relative;z-index:2} .home .tiles .tile.st-t b{color:var(--st-chrome-ink)} .home .tiles .tile.st-t small{color:var(--st-chrome-mut)} /* Значок в чипе, вырезанном в металле. Эмодзи здесь нет намеренно: цветной системный эмодзи на стальной пластине не красится вместе с ней и выглядит наклейкой (та же причина, по которой глобус в шапке набран знаком, а не 🌐). */ .st-ic{display:grid;place-items:center;flex:none; width:38px;height:38px;border-radius:11px; background:linear-gradient(180deg,rgba(23,32,56,.13),rgba(23,32,56,.05)); border:1px solid rgba(23,32,56,.18); box-shadow:inset 0 1px 2px rgba(23,32,56,.22),0 1px 0 rgba(255,255,255,.55); color:var(--st-chrome-ink);font-size:19px;line-height:1;margin:0} .st-ic-chat::before{content:"";width:21px;height:21px;background:currentColor; -webkit-mask:var(--ic-bubble) center/contain no-repeat;mask:var(--ic-bubble) center/contain no-repeat} .st-ic-ko{font-family:var(--f-ko);font-weight:700;font-size:20px} /* Прогресс — три столбика, нарисованные разметкой самого значка. */ .st-ic-prog{gap:3px;grid-auto-flow:column;align-items:end;padding-bottom:11px} .st-ic-prog i{display:block;width:4px;background:currentColor;border-radius:1px} .st-ic-prog i:nth-child(1){height:7px;opacity:.55} .st-ic-prog i:nth-child(2){height:12px;opacity:.78} .st-ic-prog i:nth-child(3){height:17px} /* --- 5.3 Чат: полная ширина, полированный хром, сиреневая рампа ---------- Самая громкая холодная вещь экрана — так и задумано: чат это главная фишка продукта, и до 03.08 он выглядел тише всех. Громче него остаётся только золото песни, потому что песня — вход в продукт. */ .home .tiles .tile.st-chat{--st-edge:var(--st-rail-iris); grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:14px; align-items:center;padding:16px 16px;min-height:84px} .home .tiles .tile.st-chat .st-ic{grid-row:1/3;width:46px;height:46px;font-size:22px} .home .tiles .tile.st-chat .st-ic-chat::before{width:24px;height:24px} .home .tiles .tile.st-chat b{font-size:18px;font-weight:850;letter-spacing:-.01em;align-self:end} .home .tiles .tile.st-chat small{font-size:13px;align-self:start;margin-top:2px} /* --- 5.4 Хангыль и Прогресс: тот же металл, шлифованный финиш ------------ «В такой же стилистике», как просил Сармат, но вторым эшелоном: половина ширины и матовая шлифовка вместо зеркала. Приём не новый — им уже отделены «Ещё раз»/«Выбрать песню» от главной кнопки на витрине («тот же металл, но приглушённый — второй план», style.css у .lp-ghost). */ .home .tiles .tile.st-half{display:flex;flex-direction:column;align-items:flex-start; gap:2px;padding:14px 13px 15px;min-height:106px;background:var(--st-chrome-2)} .home .tiles .tile.st-half::after{background:linear-gradient(104deg,transparent 34%, rgba(255,255,255,.62) 50%,transparent 66%)} .home .tiles .tile.st-half .st-ic{margin-bottom:9px} .home .tiles .tile.st-half b{font-size:15px;font-weight:850;letter-spacing:-.01em} .home .tiles .tile.st-half small{font-size:11.5px;line-height:1.35} .home .tiles .tile.st-hangul{--st-edge:var(--st-rail-gold)} .home .tiles .tile.st-prog{--st-edge:var(--st-rail-mint)} /* ==================== 6. ВИТРИНА НАГРАД (П.12) =========================== Правка дословно: «это его библиотека, это должно выглядеть прям как сценическая библиотека наград — куда киноактёры Оскары складывают». ПРАВДА, ОТ КОТОРОЙ НЕЛЬЗЯ УЙТИ: настоящих карточек ещё нет, открыта ровно одна из восьми (см. комментарий в renderCabinet). Значит витрина обязана хорошо выглядеть именно при 1 из 8 — иначе это пустая полка с одной вещью. Решение — не сетка из восьми одинаковых квадратов, а ДВА ЯРУСА: • ПОДИУМ: единственный полученный экспонат под лампой, крупно, с табличкой рядом — номер, имя, статус. Ровно так экспонируют одну награду; • ПОЛКА: семь узких мест с номерами 02..08 под общей полкой-кромкой. Пустое место с номером читается как «ещё не занято», а не как замок — и это честно: карточек пока нет. Замка в интерфейсе нет вовсе, он значит «тебе нельзя». При 1 из 8 экран выглядит как начало коллекции, а не как ошибка. Когда карточек станет больше, подиум превращается в ряд (см. .st-podium) — переписывать блок не придётся. ========================================================================== */ .home .coll.st-case{ padding:0;overflow:hidden;position:relative; background:var(--st-case);border:1px solid var(--st-plate-line); box-shadow:var(--st-bevel),var(--st-cast); -webkit-backdrop-filter:none;backdrop-filter:none} .home .coll.st-case::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--st-lamp);pointer-events:none;z-index:3} .home .st-case .coll-h{display:flex;align-items:center;gap:10px;margin:0; padding:13px 15px;border-bottom:1px solid var(--st-plate-line); background:linear-gradient(180deg,var(--st-haze),transparent)} .st-case-t{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--st-label)} /* СЧЁТЧИК БЕЗ ЗНАМЕНАТЕЛЯ (правка Сармата 04.08). Было «1 из 8»: восьмёрка — наше внутреннее число, а человеку она читается как ПОТОЛОК коллекции. Теперь считаем только открытое («открыта 1» / «1 unlocked»), знаменателя нет нигде — ни в счётчике, ни на полке. Кегль тот же приборный, что у заголовка витрины, но чернилами, а не золотом: заголовок называет витрину, счётчик — состояние. */ /* Селектор длинный не от жадности: в style.css есть `.coll-h span{color:champ}` с весом (0,1,1), и короткое `.st-case-n` ему проигрывало — счётчик красился в то же золото, что и заголовок, и строка читалась одним словом. */ .home .st-case .coll-h .st-case-n{margin-left:auto;font-family:var(--f-mono); font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--st-ink);white-space:nowrap} /* --- Подиум --------------------------------------------------------------- */ .st-podium{display:flex;flex-wrap:wrap;gap:14px;padding:16px 15px 14px} /* ЭКСПОНАТ — КНОПКА (правка Сармата 04.08): «нажимает на первую фотографию — она должна открываться в большем размере». Именно