/* ============================================================================ «БОЛЬШЕ ХРОМА» — ДВЕ ВЕРСИИ НА ВЫБОР. 29.07.2026. Правка Сармата: «стиль этого хрома нравится даже больше, чем тёмный, но его только вверху — хочется побольше». В «Хроме» (style.css) металл действительно живёт ровно в одном месте: тёмная плашка шапки. Всё остальное — холодное серебро корпуса и белая бумага карточек. Файл подключается ПОСЛЕ style.css и theme-dark.css и весь висит на атрибуте html[data-chrome]. Атрибута нет — не применяется ни одна строка, прод ровно такой, каким был. Ставит его theme.js по адресу ?chrome=a | ?chrome=b, снимает — ?chrome=off. Выбор запоминается между экранами. ОБЕ ВЕРСИИ ЖИВУТ ТОЛЬКО В СВЕТЛОЙ ТЕМЕ — отсюда :not([data-theme="dark"]) в каждом селекторе. Тёмная тема это уже другой скин целиком, накладывать на неё третий слой значит получить кашу из двух палитр. --------------------------------------------------------------------------- ВЕРСИЯ A — «КОРПУС ИЗ МЕТАЛЛА», дословно по описанию Сармата. Серебряная подложка страницы заменяется тёмной хромовой плитой. Белым остаётся ровно то, что он перечислил: карточка айдола с портретом, плитки «Чат с айдолом» и «Хангыль», рамка с фотокарточками. Всё, что позади них, — металл. Что пришлось доделать сверх описания: текст, который лежит ПРЯМО на фоне (подвал, ссылка мессенджера, подписи пустых экранов), перекрашен в светлый. Токены цвета трогать нельзя — на них же держится чёрный текст внутри белых карточек, и глобальная перекраска сделала бы его невидимым. Поэтому перекрашены поимённо только те элементы, что стоят на фоне. ВЕРСИЯ B — «МЕТАЛЛ В РАМЕ И В КНОПКАХ», моя. Страница остаётся светлой — читаемость длинных строк разбора на серебре измерена и подтверждена, менять её ради фактуры я не хочу. Металла становится больше по-другому: 1. подвал превращается в такую же плиту, как шапка. Страница получает металлическую раму сверху и снизу, а не одну планку наверху; 2. вторичные кнопки (плитки, «Общайся в мессенджере», «Понятно») становятся полированным хромом с фаской и бликом — ровно то, что Сармат и предложил: «кнопки какие-то сделать хромированными»; 3. нашивка под портретом и рамка коллекции получают металлическую кромку — карточка выглядит вставленной в оправу. Главная кнопка (розовое золото) не трогается ни в одной версии: это цвет знака и единственного главного действия, и разбавлять его вторым металлом значит потерять единственную точку, которая на экране кричит «нажми». ============================================================================ */ /* Общие заготовки материала. Живут в :root, потому что нужны обеим версиям. */ :root{ /* Тёмная плита: тот же тон, что у шапки (#232B40 → #1B2233), плюс шлифовка — косой блик и волосяная вертикальная риска. Без риски градиент читается как «просто тёмный фон», с ней — как металл. */ --chrome-plate: linear-gradient(104deg,rgba(255,255,255,0) 33%,rgba(255,255,255,.05) 45%, rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 56%,rgba(255,255,255,0) 67%), repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px), linear-gradient(180deg,#2A3247 0%,#1E2536 48%,#171D2B 100%); /* Светлый полированный хром для кнопок: белый блик сверху, перелом на 52%, тень снизу. Перелом и делает поверхность «металлической», а не «серой». */ --chrome-face: linear-gradient(180deg,#FFFFFF 0%,#F1F4F9 44%,#E1E6F0 52%,#F7F9FD 100%); --chrome-bevel: inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(23,27,38,.10); --chrome-ink:#EDF1F9; /* текст на тёмной плите */ --chrome-ink-mut:#B7C1D4; } /* ========================================================================== ВЕРСИЯ A — КОРПУС ИЗ МЕТАЛЛА ========================================================================== */ html:not([data-theme="dark"])[data-chrome="a"] body{ background: radial-gradient(58% 40% at 96% 0%, rgba(140,110,220,.20), transparent 62%), radial-gradient(56% 44% at 0% 100%, rgba(217,160,124,.13), transparent 62%), var(--chrome-plate); background-attachment:fixed;background-color:#1B2233;color:var(--chrome-ink); } /* ТЕКСТ НА ПЛИТЕ — ЧЕРЕЗ ТОКЕНЫ, А НЕ СПИСКОМ СЕЛЕКТОРОВ. Первая попытка перечисляла элементы поимённо, и снимок экрана «Айдолы» сразу показал, чем это кончается: подзаголовок витрины и невыбранная вкладка «Парни» остались тёмно-серыми на тёмной плите — их в списке не было. Список всегда будет неполным: цветов текста в продукте три (--ink/--mut/--dim), а мест, где они лежат на фоне, десятки. Поэтому светлая палитра объявляется один раз на , а внутри БЕЛЫХ поверхностей возвращается тёмная. Наследование переменных делает всё остальное само, включая экраны, которых я тут не открывал. --iris тоже поднимается: #6C46D8 считался под серебро, на плите он даёт 22 при норме 60 для мелкого — это подписи-надзаголовки в приборном кегле. */ html:not([data-theme="dark"])[data-chrome="a"] body{ --ink:#EDF1F9;--mut:#B7C1D4;--dim:#9AA5B8; --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.20); --iris:#C9AAF6;--iris-soft:rgba(201,170,246,.14); --panel2:rgba(255,255,255,.07); } html:not([data-theme="dark"])[data-chrome="a"] .hero-foot, html:not([data-theme="dark"])[data-chrome="a"] .tile, html:not([data-theme="dark"])[data-chrome="a"] .coll, html:not([data-theme="dark"])[data-chrome="a"] .card, html:not([data-theme="dark"])[data-chrome="a"] .lp-card, html:not([data-theme="dark"])[data-chrome="a"] .hd, html:not([data-theme="dark"])[data-chrome="a"] .onb-card, html:not([data-theme="dark"])[data-chrome="a"] .chat-box, html:not([data-theme="dark"])[data-chrome="a"] .lesson-box, html:not([data-theme="dark"])[data-chrome="a"] .help-box, /* Пилюля помощи тоже белая — без неё знак вопроса светлел вместе с фоном и растворялся в собственной подложке. */ html:not([data-theme="dark"])[data-chrome="a"] .help-fab, html:not([data-theme="dark"])[data-chrome="a"] .result{ --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); --panel2:#E7EBF2; color:var(--ink); } html:not([data-theme="dark"])[data-chrome="a"] footer{border-top-color:rgba(255,255,255,.14)} /* Заголовки в «Хроме» залиты градиентом через background-clip:text — обычный color их не берёт, нужно переопределить саму заливку. */ @supports (background-clip:text) or (-webkit-background-clip:text){ html:not([data-theme="dark"])[data-chrome="a"] .lp-h, html:not([data-theme="dark"])[data-chrome="a"] .sec-h h2, html:not([data-theme="dark"])[data-chrome="a"] .hd h2, html:not([data-theme="dark"])[data-chrome="a"] .pick-h{ background:linear-gradient(180deg,#FFFFFF,#C6CFE0); -webkit-background-clip:text;background-clip:text;color:transparent} } /* Ссылка «Общайся с айдолом в мессенджере» — единственная кнопка, стоящая прямо на фоне. На плите её волосяная рамка исчезала. */ html:not([data-theme="dark"])[data-chrome="a"] .connect-link{ color:var(--chrome-ink);border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06)} html:not([data-theme="dark"])[data-chrome="a"] .connect-link:hover{ background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)} /* Белым остаётся то, что перечислил Сармат. .coll в «Хроме» был полупрозрачным (rgba(255,255,255,.78)) — на плите это давало грязно-серую рамку вместо белой. */ html:not([data-theme="dark"])[data-chrome="a"] .coll{ background:#FFFFFF;border-color:rgba(23,27,38,.12)} html:not([data-theme="dark"])[data-chrome="a"] .tile, html:not([data-theme="dark"])[data-chrome="a"] .hero-foot{background:#FFFFFF} /* Тени под белыми карточками на тёмном не видны — глубину даёт светлая кромка. */ html:not([data-theme="dark"])[data-chrome="a"] .idol-hero, html:not([data-theme="dark"])[data-chrome="a"] .coll, html:not([data-theme="dark"])[data-chrome="a"] .tile{ box-shadow:0 1px 0 rgba(255,255,255,.14),0 14px 34px rgba(0,0,0,.42)} /* ========================================================================== ВЕРСИЯ B — МЕТАЛЛ В РАМЕ И В КНОПКАХ ========================================================================== */ /* 1. ПОДВАЛ-ПЛИТА. Во всю ширину, поэтому фон рисуется на самом