/* ========================================================================== ui-frame.css — рама интерфейса по главному референсу `as/4.png`. Зачем отдельный файл. Словарь (`ui-tokens.css`) и библиотека (`ui-components.css`) описывают правильные цвета и правильные компоненты, но пятьдесят файлов разделов писались до них и рисуют свои поверхности сами: почти чёрная карточка с волосяной рамкой, заголовок простым текстом в пустоте, кнопка `.ui-btn--gold`, у которой вообще нет описания, — и она выходит белой системной кнопкой. Референс требует обратного: тёплое дерево вместо черноты, толстая кромка, направленная нижняя грань, заголовок на деревянной табличке, щит в навигации, тёмный чип ресурса с золотым ободком у значка. Поэтому файл подключается ПОСЛЕДНИМ и переопределяет материал — только материал. Размеры, сетки и раскладку разделов он не трогает: иначе полсотни живых экранов поедут. ПОЧЕМУ СПИСКИ СЕЛЕКТОРОВ ДЛИННЫЕ. Первый заход описывал материал для десятка классов — и рама легла на десяток экранов из двадцати шести, а остальные остались в старом материале: полупрозрачная чернота поверх размытой фотографии. Именно это владелец видел как «совсем не похоже». Поэтому здесь перечислены ВСЕ классы поверхностей, найденные по разделам (`-hero`, `-card`, `-row`, `-panel`, `-note`, `-chip`, `-empty`, `-tabs`). Список точный, а не по подстроке: `[class*=...]` зацепил бы `-hero-inner`, `-card-art`, `-row-note` и залил бы материалом внутренности, которым нужен другой материал. Порядок разделов: фон → таблички → подписи → ленты → панели → карточки → строки → утопленные поверхности → кнопки → чипы → вкладки → навигация → полосы → профиль → главная → служебное. ========================================================================== */ /* ========================================================================== 1. ФОН Референс тёплый: под панелями видно дерево и землю, а не чёрный провал. Прежний фон уходил в #05040f — почти чёрный, из-за него любая панель выглядела наклейкой на пустоте. ========================================================================== */ /* * Фон — РОВНОЕ тёмное дерево, а не провал к чёрному. * * Замер по референсу: во всех шести кадрах поле под панелями держится в * узком коридоре #151244…#0d0a2c, то есть ровно на тоне --ui-panel-dark. * У нас же фон уезжал вниз к #060617, и нижняя половина любого экрана * превращалась в чёрную дыру: карточка сверху выглядела доской, а точно * такая же карточка снизу — наклейкой на пустоте. Именно этот провал * читался как «совсем не похоже на референс». * * Перепад с панелями остаётся: панель --ui-panel-main на ступень светлее * фона, и её отделяет не разница в яркости фона, а тёмная кромка с * направленной нижней гранью — как на всех кадрах. */ body { /* * Фон по кадрам `grok/8-9.png`: почти чёрный сине-фиолетовый, ровный, * с одним мягким лиловым свечением сверху. Прежний тёплый градиент по * дереву снят вместе со всей коричневой темой. */ background: var(--ui-dirt-wide), radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--ui-purple-light) 30%, transparent) 0%, color-mix(in srgb, var(--ui-purple) 12%, transparent) 45%, rgba(0, 0, 0, 0) 75%), linear-gradient(180deg, var(--ui-bg-dark) 0%, var(--ui-bg-dark) 45%, var(--ui-bg-deep) 100%); } /* ========================================================================== 2. ТАБЛИЧКА ЗАГОЛОВКА В референсе у каждого экрана деревянная вывеска с широкими краями, а не строка текста. Форма собрана из трёх слоёв: корпус, светлая фаска сверху и тёмная грань снизу — тот же приём, что у кнопки. Второй заход по кадру 2 («КАРТА УРОВНЕЙ»), замеры при коэффициенте 1.18. Расхождений было три, и все заметные: 1. Вывеска там ШИРОКАЯ — 190px кадра из 317, то есть около 60 % экрана, и стоит между двумя круглыми кнопками. У нас она была `fit-content`: «ШОП» давал табличку в 90px, и она читалась как кнопка, а не как вывеска раздела. 2. Сквозь неё проходит тонкая ПЕРЕКЛАДИНА — доска, уходящая к обоим краям экрана. У нас вместо неё стояли два прямоугольных «уха» высотой почти во всю табличку: они выглядели обрубками, а не продолжением доски. 3. Надпись набрана плотным капслоком с тёмной обводкой. Unbounded здесь широкий и круглый: в вывеску влезает вдвое меньше букв, и длинные названия («ЕЖЕДНЕВНЫЕ ЗАДАНИЯ») ужимались до нечитаемого кегля. ========================================================================== */ .ui-plate, .trumpamole__page-title, .trumpamole__ref-hero-title, .trumpamole__match3-page-title, .trumpamole__arenapvp-page-title, .trumpamole__tw-title, .trumpamole__tasks-page-title, .trumpamole__skins-hero .trumpamole__page-title, .trumpamole__title-block .trumpamole__page-title { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px var(--ui-space-6); border-radius: var(--ui-radius-lg); /* * ВЫВЕСКА СТАЛА ЛИЛОВОЙ ПОЛОСОЙ ЗАГОЛОВКА. * * На каждом кадре `grok/8-9.png` экран подписан одинаково: широкая * лиловая полоса #34147A во всю ширину, белый капслок по центру, * круглая кнопка «назад» слева. Деревянной таблички там нет ни разу. */ /* * Заклёпки в углах — прямо с кадра (§108 ТЗ: decorative bolts). * * У лиловой полосы группы на `grok/8.png` («MOLE SKINS», «POWER UPS») * в верхних углах стоит маленький светлый ромб — единственная деталь, * которая отличает нарисованную деталь корпуса от закрашенного * прямоугольника. Значок лежит слоями фона, а не псевдоэлементом: * `::before` и `::after` вывески заняты — они принудительно погашены * ниже, потому что половина разделов рисует ими «уши». */ background: var(--ui-bolt) left 12px top 9px / 16px 16px no-repeat, var(--ui-bolt) right 12px top 9px / 16px 16px no-repeat, var(--ui-dirt-wide), linear-gradient(180deg, var(--ui-head-light) 0%, var(--ui-head) 45%, var(--ui-head-dark) 100%); border: var(--ui-border) solid color-mix(in srgb, var(--ui-purple-glow) 35%, transparent); box-shadow: 0 4px 0 var(--ui-purple-deep), var(--ui-shadow-soft), inset 0 2px 0 color-mix(in srgb, var(--ui-purple-glow) 35%, transparent); font-family: var(--ui-font-condensed); font-weight: 900; font-size: 24px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ui-ivory-light); /* Обводка, а не мягкая тень: на кадрах у надписи вывески чёткий тёмный контур, он и держит её на светлеющем к верху дереве. */ text-shadow: -2px -2px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 2px -2px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), -2px 2px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 2px 2px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 0 4px 0 color-mix(in srgb, var(--ui-text-outline) 50%, transparent); text-align: center; /* * ПОЛОСА ЗАГОЛОВКА ВО ВСЮ ШИРИНУ. * * На кадрах `grok/8-9.png` («SHOP», «PROFILE», «QUESTS», «SKINS», * «TOWER», «MAPS», «EVENT», «LEADERBOARD», «INVENTORY») экран всегда * подписан одинаково: лиловая полоса от края до края, белый капслок * по центру, круглая кнопка «назад» слева. Табличка `fit-content` * шириной в 60 % была из прежнего, деревянного контракта. */ width: 100%; max-width: none; margin-left: 0; margin-right: 0; align-self: stretch; border-radius: var(--ui-radius-md); } /* * ПЕРЕКЛАДИНЫ НЕТ. * * Прошлый заход дорисовал вывеске «уши» — доску, уходящую к обоим краям * экрана. Приём взят с кадра «КАРТА УРОВНЕЙ», но там сквозь вывеску * проходит полоса шапки между двумя круглыми кнопками, а у нас она * оказалась двумя обрубками, прилипшими к табличке по бокам. Владелец * назвал их «боковыми ерундовинами» и потребовал вид страницы «ДРУЗЬЯ», * где вывеска стоит одна. * * Правило `content: none` оставлено явным (а не удалением блока): * у половины разделов свои `::before/::after` на этом же селекторе * прописаны в файлах разделов, и их тоже нужно снять. */ .ui-plate::before, .ui-plate::after, .trumpamole__page-title::before, .trumpamole__page-title::after, .trumpamole__tasks-page-title::before, .trumpamole__tasks-page-title::after, .trumpamole__ref-hero-title::before, .trumpamole__ref-hero-title::after, .trumpamole__match3-page-title::before, .trumpamole__match3-page-title::after, .trumpamole__arenapvp-page-title::before, .trumpamole__arenapvp-page-title::after, .trumpamole__tw-title::before, .trumpamole__tw-title::after { content: none; } /* Блок заголовка вместе с подписью тоже собирается по центру. */ .trumpamole__title-block { align-items: center; text-align: center; } /* * Полоса заголовка не режет вывеску. * * «Уши» вывески выходят за её габарит, а верхние ленты разделов почти * все закрыты `overflow: hidden` — из-за этого края таблички исчезали и * она выглядела обычной тёмной плашкой. */ .tam-store__top-body, .trumpamole__skins-title-box, .trumpamole__title-block, .trumpamole__tasks-title-block, .trumpamole__arenapvp-title-block, .trumpamole__match3-title-block, .tam-arena__title-block { overflow: visible; } /* ========================================================================== 3. ПОДПИСЬ СЕКЦИИ В референсе подпись внутри панели стоит по центру и набрана светлым капслоком: «ЛУЧШИЕ ДОСТИЖЕНИЯ», «НОВЫЕ СКИНЫ». Слева от края её там нет ни разу. ========================================================================== */ /* Колонка, а не строка: у половины заголовков есть подпись вторым элементом, и в строке она уезжала вправо от названия. */ .trumpamole__skins-section-header, .trumpamole__leaderboard-section-header, .trumpamole__ref-section-header, .trumpamole__arenapvp-section-header, .trumpamole__profile-section-header, .trumpamole__tasks-section-header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: var(--ui-space-5) 0 var(--ui-space-3); text-align: center; /* Колонка увела вниз и кнопки, стоявшие в строке справа от подписи: обновление списка друзей висело отдельным кружком под заголовком. Такие кнопки уходят в угол абсолютом, а подпись остаётся по центру. */ position: relative; } /* Кнопка при подписи секции — в правом углу строки, а не под ней. */ .trumpamole__ref-header-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .trumpamole__skins-section-header > span, .trumpamole__skins-section-header .trumpamole__hint, .trumpamole__leaderboard-section-header .trumpamole__hint, .trumpamole__ref-section-header .trumpamole__hint, .trumpamole__profile-section-header .trumpamole__hint, .trumpamole__tasks-section-header .trumpamole__hint, .trumpamole__arenapvp-section-header .trumpamole__hint, /* «Найдено 5 из 10 · пыль 270» под вывеской музея — та же вторая строка подписи секции, только стоит она не внутри `...-section-header`, а прямо в шапке витрины. Раздел держал у себя её копию тремя объявлениями. */ .tam-museum__sub { color: var(--ui-text-muted); font-family: var(--ui-font-main); font-size: var(--ui-size-small); font-weight: var(--ui-weight-body); } .trumpamole__skins-section-header h2, .trumpamole__skins-section-header h3, .trumpamole__leaderboard-section-header h2, .trumpamole__ref-section-header h2, .trumpamole__arenapvp-section-header h2, .trumpamole__profile-section-header h2, .trumpamole__tasks-section-header h2, .trumpamole__leaderboard-top-title, .tam-vault__section-title, .tam-hero__story-title, /* «МУЗЕЙ АРТЕФАКТОВ» — подпись секции витрины в профиле. Раздел набирал её своей копией этих же семи объявлений вместе с пятью тенями обводки: при смене кегля подписей музей остался бы один в старом. */ .tam-museum__title { position: relative; margin: 0; padding: 0 var(--ui-space-3); /* * Подпись секции набрана тем же плотным капслоком с обводкой, что и * вывеска: «ЛУЧШИЕ ДОСТИЖЕНИЯ», «НОВЫЕ СКИНЫ», «РЕСУРСЫ» на кадрах * — это белая буква в тёмном контуре, а не серый мелкий текст. */ font-family: var(--ui-font-condensed); font-weight: 900; font-size: var(--ui-size-value); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ivory-light); /* * Центрирование задаётся самой подписью, а не только контейнером. * * Половина подписей стоит не внутри `...-section-header`, а прямо в * разделе: «ИСТОРИЯ ГЕРОЯ» в снаряжении, «НА СТОЛЕ» в лаборатории, * «ЗАПИСИ» в хронике. Они получали набор отсюда, но выравнивание — * от своего блока, и оставались у левого края, пока соседние подписи * стояли по центру. На кадрах референса подписи секций всегда по * центру панели. */ text-align: center; text-shadow: -1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), -1px 1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 1px 1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 0 3px 0 color-mix(in srgb, var(--ui-text-outline) 45%, transparent); } /* * Планок по бокам подписи нет. * * Их поставил первый заход, чтобы заголовок «не висел в воздухе». На * референсе таких планок нет ни у одной из шести подписей: держит их * та же обводка, что и надпись вывески. Две светлые чёрточки рядом с * капслоком читались как обрезанная линейка. */ .trumpamole__skins-section-header h2::before, .trumpamole__skins-section-header h2::after, .trumpamole__leaderboard-section-header h2::before, .trumpamole__leaderboard-section-header h2::after, .trumpamole__ref-section-header h2::before, .trumpamole__ref-section-header h2::after, .trumpamole__arenapvp-section-header h2::before, .trumpamole__arenapvp-section-header h2::after { content: none; } /* ========================================================================== 4. ВЕРХНЯЯ ЛЕНТА РАЗДЕЛА Главная беда старого интерфейса: лента раздела — это размытая фотография интерьера, поверх неё полупрозрачная чернота `rgba(0,0,0,.18)`, а на этом стоит содержимое. Получается серо-бурый туман, в котором не читается ни арт, ни текст, и ни одна поверхность не имеет края. В референсе (кадры 3, 4, 5) верх раздела — плотная деревянная доска с толстой тёмной кромкой и направленной нижней гранью. Арт остаётся, но уходит в фактуру: он подсказывает место, а не спорит с содержимым. Ленты игровых экранов (главная, «три в ряд») сюда не входят: там арт — это сама игра. ========================================================================== */ .trumpamole__profile-hero, .trumpamole__leaderboard-hero, .trumpamole__ref-hero, .trumpamole__ref-card-full, .trumpamole__skins-hero, .trumpamole__skins-active-full, .trumpamole__tasks-hero, .trumpamole__arenapvp-hero, .tam-store__top, .tam-event-hero { /* * Лента — это ФОН, а не поверхность. * * Первый заход сделал её светлым деревом, и экран стал плоским: * панель того же тона лежала на панели, кромки не читались. На * кадрах 3-5 референса верх раздела такой же тёмный, как всё * остальное поле, и светлые в нём только вывеска и карточки — * именно этот перепад и делает панели объёмными. * * Но «такой же тёмный» на референсе — это #1c1750, а не чернота. * Лента у половины разделов ростом во весь экран (в профиле она * 646px), и градиент до #060617 закрашивал низ страницы чёрным. * Поэтому тон ровный, как у фона: разницу даёт нижняя грань. */ background: var(--ui-dirt-wide), linear-gradient(180deg, var(--ui-wood) 0%, var(--ui-panel-dark) 45%, var(--ui-bg-dark) 100%); border-bottom: var(--ui-border-thick) solid var(--ui-panel-edge); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), var(--ui-shadow-soft), inset 0 2px 0 color-mix(in srgb, var(--ui-purple-glow) 18%, transparent); } /* Слой фотографии: из главного изображения в фактуру доски. */ .trumpamole__profile-hero::before, .trumpamole__leaderboard-hero::before, .trumpamole__leaderboard-league-panel::before, .trumpamole__leaderboard-podium-wrap-full::before, /* Полоса побед и поражений дуэли — тот же подиум, что в рейтинге. Своей записи здесь не было, и раздел глушил фотографию сам: `saturate(.5)` с `brightness(.6)` вместо общих 0.94 — колизей под медалями оставался единственной серо-бурой картинкой игры. */ .trumpamole__arenapvp-podium-wrap-full::before, .trumpamole__ref-hero::before, .trumpamole__ref-card-full::before, .trumpamole__skins-hero::before, .trumpamole__skins-active-full::before, .trumpamole__tasks-hero::before, .trumpamole__arenapvp-hero::before { /* * Картинка раздела ВИДНА, а не угадывается. * * Стояло 0.24 с размытием в 2px и яркостью 0.6 — рисунок магазина, * скинов и рефералов превращался в бурое пятно, и владелец сказал * прямо: фоновые изображения нужно сделать заметнее. На кадрах * референса верх раздела — читаемая иллюстрация: видно и «TRUMP * TOWER», и фонтан на карте, и лестницу в профиле. * * Порог держит НЕ прозрачность, а тёмная накладка ::after ниже: она * тянет низ ленты к --ui-panel-dark, поэтому подпись и вывеска стоят * на ровном тоне при любой картинке. Размытие оставлено, но в 1px: * оно снимает шум JPEG, не превращая рисунок в кисель. */ /* Второй заход по прямому указанию владельца: «фоновые изображения сделай ещё чуть более видимыми на страницах типа скины, магазин, рефералы». 0.52 → 0.66, яркость 0.86 → 0.94. Читаемость держит накладка ::after ниже, а не приглушение самой картинки. */ opacity: 0.66; filter: blur(1px) saturate(1) brightness(0.94); } /* * Верх магазина держит фотографию отдельной картинкой, а не фоном * псевдоэлемента, поэтому в список выше он не попадал и остался в старом * материале: портрет за вывеской «МАГАЗИН» читался как иллюстрация и * спорил с надписью. Значения те же — расходиться этим двум слоям нельзя. */ .tam-store__top-art img { /* Второй заход по прямому указанию владельца: «фоновые изображения сделай ещё чуть более видимыми на страницах типа скины, магазин, рефералы». 0.52 → 0.66, яркость 0.86 → 0.94. Читаемость держит накладка ::after ниже, а не приглушение самой картинки. */ opacity: 0.66; filter: blur(1px) saturate(1) brightness(0.94); } /* Затемнение над фотографией: тёплое, а не серо-чёрное. */ .trumpamole__profile-hero::after, .trumpamole__leaderboard-hero::after, .trumpamole__leaderboard-league-panel::after, .trumpamole__leaderboard-podium-wrap-full::after, .trumpamole__arenapvp-podium-wrap-full::after, .trumpamole__ref-hero::after, .trumpamole__ref-card-full::after, .trumpamole__skins-hero::after, .trumpamole__skins-active-full::after, .trumpamole__tasks-hero::after, .trumpamole__arenapvp-hero::after, /* Верх магазина держит фотографию отдельным слоем (`__top-art`), и затемнение у него своё — на псевдоэлементе этого слоя. Копия градиента жила в `store.css` и уже разошлась с общим на сотые доли и на оттенок синего. Расходиться этим двум слоям нельзя. */ .tam-store__top-art::after { /* * Накладка стала верхом ленты, а не вуалью поверх картинки: сверху * почти прозрачно (рисунок виден), к низу выходит на тон панели, * чтобы вывеска и подпись стояли на ровном фоне. Так картинку можно * было отпустить до 0.52, не потеряв читаемость текста. */ background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-dark) 10%, transparent) 0%, color-mix(in srgb, var(--ui-bg-dark) 46%, transparent) 46%, color-mix(in srgb, var(--ui-bg-dark) 88%, transparent) 82%, color-mix(in srgb, var(--ui-bg-dark) 97%, transparent) 100%); } .trumpamole__leaderboard-league-panel, .trumpamole__leaderboard-podium-wrap-full, .trumpamole__arenapvp-podium-wrap-full { background: var(--ui-dirt-wide), linear-gradient(180deg, var(--ui-wood) 0%, var(--ui-panel-dark) 100%); } /* * Реплика лиги — карточка, а не мутный прямоугольник. * * Стрелки переключения лиг лежали поверх текста и накрывали последнее * слово описания: у реплики теперь есть поля под них. */ .trumpamole__leaderboard-speech { background: var(--ui-dirt-wide), linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-panel-main) 52%, var(--ui-panel-dark) 100%); border: var(--ui-border) solid color-mix(in srgb, var(--ui-purple-glow) 28%, transparent); border-radius: var(--ui-radius-lg); box-shadow: 0 4px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 2px 0 color-mix(in srgb, var(--ui-purple-glow) 25%, transparent); padding-right: 42px; } .trumpamole__leaderboard-nav-btn { width: 40px; height: 40px; border-radius: var(--ui-radius-md); background: var(--ui-dirt-wide), linear-gradient(180deg, var(--ui-wood) 0%, var(--ui-wood-dark) 100%); border: var(--ui-border) solid color-mix(in srgb, var(--ui-purple-glow) 28%, transparent); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), var(--ui-inner-top); color: var(--ui-gold-light); } /* * Двойного приглушения у шапки магазина нет. * * Здесь стояло `opacity: 0.34` НА КОНТЕЙНЕРЕ, а картинка внутри него * получала ещё 0.66 своим правилом: в сумме 0.22 — от лавки оставалось * бурое пятно. Владелец потребовал вернуть фоновую картинку «как везде», * поэтому приглушает ровно один слой — сама картинка. */ .tam-store__top-art { opacity: 1; filter: none; } /* * Лента раздела собирается по центру. * * Прежняя сетка «1fr | 120px» держала место под значок раздела, и * вывеска вместе с подписью центровалась не по экрану, а по левой * колонке — на глаз это выглядело сдвигом влево. Значок есть у трёх * разделов из десяти, поэтому он уходит в правый край поверх ленты, а * текст получает всю ширину. */ .trumpamole__skins-hero-inner, .trumpamole__tasks-hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .trumpamole__tasks-title-block { align-items: center; text-align: center; } /* Значок раздела в шапке заданий повторял вывеску и отнимал полосу. */ .trumpamole__tasks-top-icon { display: none; } /* * Значок раздела снят: он повторял то, что и так нарисовано фоном * ленты, а в один столбец наезжал на кнопку сбора дохода в башне. * Раздел узнаётся по фону и вывеске — как на всех кадрах референса. */ .trumpamole__skins-hero-icon { display: none; } /* * Строка счётчиков ленты — ВО ВСЮ ШИРИНУ, как в магазине. * * Здесь стояло `justify-content: center`, и пара чипов собиралась в * кучку посреди полосы: «ВЫПОЛНЕНО 4» и «ПОЛУЧЕНО 0» в заданиях, * «МОНЕТЫ» и «ЗЕМЛЯ» в скинах занимали половину ширины, а по бокам * оставались пустые поля. В магазине те же два чипа расходятся от края * до края и держат полосу — владелец потребовал этот вид везде. * * `flex: 1 1 0` вместо `1 1 auto` намеренно: чипов в ряду два-три, и * равные доли выглядят ровнее, чем ширина по длине подписи. */ .tam-cos__stats, .trumpamole__skins-stats-row, .trumpamole__tasks-stats-row, .trumpamole__arenapvp-stats-row { display: flex; align-items: stretch; justify-content: stretch; gap: var(--ui-space-3); width: 100%; max-width: none; } .tam-cos__stats > *, .trumpamole__skins-stats-row > *, .trumpamole__tasks-stats-row > *, .trumpamole__arenapvp-stats-row > * { flex: 1 1 0; min-width: 0; justify-content: center; } /* ========================================================================== 5. ПАНЕЛЬ РАЗДЕЛА Тело раздела — не поверхность, а место для карточек: своего материала у него быть не должно, иначе экран превращается в панель на панели. ========================================================================== */ .trumpamole__skins-main-panel, .trumpamole__profile-main-panel, .trumpamole__leaderboard-main-panel, .trumpamole__ref-main-panel, .trumpamole__tasks-main-panel, .trumpamole__arenapvp-main-panel { background: transparent; border: 0; } /* * Боковое поле раздела — ОДНО на всю игру. * * Здесь стоял только `skins-main-inner` на 12px, а лента над ним держала * свои 14px, задания — 14, магазин — 12, инвентарь — 16, главная — 10. * Перескок в 2-6px виден при переходе между вкладками: край столбца * содержимого дёргается влево-вправо, хотя карточки одни и те же. Список * ниже — все «столбцы содержимого» игры; они берут поле из * `--ui-gutter`, который к тому же сужается на узком экране. * * Новый раздел дописывать сюда, а не заводить своё число. */ .trumpamole__skins-hero-inner, .trumpamole__skins-active-inner, .trumpamole__profile-hero-inner, .trumpamole__tasks-hero-inner, .trumpamole__skins-main-inner, .trumpamole__profile-main-inner, .trumpamole__tasks-main-inner, .tam-store__top-body, .tam-hero__head, .tam-inv__bottom, .tam-challenge, .trumpamole__home { padding-left: var(--ui-gutter); padding-right: var(--ui-gutter); } /* ========================================================================== 6. КАРТОЧКИ Один материал на всю игру: корпус светлее фона, толстая тёмная кромка, светлая фаска сверху, направленная грань снизу. Это и есть главный приём референса — каждая поверхность выглядит вырезанной из дерева. ========================================================================== */ .ui-card, .tam-arena__card, .tam-arena__rival, .tam-arena__poster, .tam-arena__defense, .tam-blocker__card, /* Цель вызова — главная и единственная панель приземления: без записи здесь она держала свой градиент и волосяную кромку в 1px, то есть ровно тот плоский card, что запрещает §62. */ .tam-challenge__target, /* Кланы: карточка клана в шапке вкладки, карточка задачи, три доски штаба и карточка облавы. Все шесть красили себя сами полупрозрачной чернотой с золотой волосяной рамкой — тем самым плоским card, который §62 запрещает поимённо. Класса `.tam-clan__card`, стоявшего здесь раньше, в разметке игры нет ни одного: строка была мёртвой. */ .tam-clan__head, .tam-clan__task, .tam-hq__project, .tam-hq__wall, .tam-hq__perks, .tam-raid, .tam-col__card, /* Сцена стойки молотов, плитка молота в ряду под ней и полка витрины профиля. Все три заливали себя сами — градиент по прозрачной черноте с золотой линией в 1px, — и вкладки «МОЛОТКИ» и «ТРОФЕИ» оставались единственными в коллекции без кромки и направленной грани. */ .tam-col__rack-stage, .tam-col__rack-item, .tam-col__showcase, .tam-cos__card, .tam-cos__base-card, /* Сцена предпросмотра гардероба: своей записи у неё не было, и она осталась единственной коричневой доской экрана посреди фиолетовых карточек — ровно тот «обычный чужой card», что запрещает §62. */ .tam-cos__stage, .tam-lab__card, .tam-museum__card, .tam-rivalry__card, .tam-share__card, .tam-store__card, .tam-store__item, .tam-item, .tam-vault__card, .trumpamole__arenapvp-card, /* Карточка боя дуэли — самая крупная поверхность своего экрана: во время боя она занимает его целиком. Своей записи здесь не было, и она заливала себя прозрачной чернотой в 22 % без кромки и грани; поверх этого вариант `.has-arena` вешал внутреннюю тень, которая перебивала бы и материал, взятый отсюда. */ .trumpamole__arenapvp-match, .trumpamole__map-card, /* Шапка карты: название раздела и две плитки сводки. Своей записи не было, и она осталась единственной доской экрана, собранной по `--brown-*` — на пол-тона мимо карточек остальной игры. */ .trumpamole__map-head, .trumpamole__profile-pick-card, .trumpamole__ref-card, .trumpamole__return-card, .trumpamole__skins-card, .trumpamole__tasks-card, .trumpamole__tasks-info-card, /* Плитка дня в ленте ежедневных наград и доска важных дел. Первая держала свою копию этого материала числами (#26196a → #1a1148), то есть на полтона мимо карточек остальной игры; вторая заливала себя чернотой в 18 % без единой кромки и вешала поверх содержимого ещё один тёмный градиент — ровно тот плоский card, что запрещает §62. */ .trumpamole__tasks-card-mini, .trumpamole__tasks-important-wrap, .trumpamole__tw-sheet-card, .tam-event-card, .tam-event-goods, .tam-event-ms, .tam-event-next, .tam-event-story, .tam-event-task, .tam-season__chapter, /* История героя (§5) и ступени сета (§6) — такие же панели, как всё остальное на экране героя: без записи здесь они остались бы в старом материале и выглядели бы дырой посреди раздела. */ .tam-hero__story, .tam-set, /* Полоса босса над полем боя: имя, портрет и точки частей. Своей записи здесь не было, и полоса держала копию корпуса числами (`rgba(37, 31, 100, .92)` → `rgba(11, 9, 37, .94)`) — то есть висела над тёмным полем ровно того же тона, что поле, без фактуры и без направленной грани. */ .tam-boss, /* Состав призов колеса: панель держала свой градиент и золотую рамку в 1px — единственная поверхность мини-игры вне общего материала. */ .trumpamole__fortune-oddsBox, /* Карточка реплики сюжетной сцены. Она лежит поверх полноэкранного кадра, то есть это единственная поверхность на экране, — и держала свой градиент по `--brown-*` с волосяной рамкой в 1px. На кадре с персонажем такая подложка читается подписью к картинке, а не панелью игры: ни кромки, ни направленной грани, ни фактуры. */ .trumpamole__story-card, /* Сцена кабинета на главной — самая крупная поверхность игры, и своей записи у неё не было: коробка держала кромку в 2px чёрным по 45 % и заливку `--brown-0`, то есть висела на экране без направленной грани, тогда как карточка «что делать» прямо под ней эту грань имеет. Заливка тут не видна — кадр закрывает её целиком, — но кромка и грань решают, читается сцена вырезанным окном или наклеенной картинкой. */ .trumpamole__home-scene { background: var(--ui-dirt-wide), var(--ui-dirt), linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-panel-main) 52%, var(--ui-panel-dark) 100%); border: var(--ui-border-thick) solid var(--ui-panel-edge); border-radius: var(--ui-radius-lg); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 2px 0 color-mix(in srgb, var(--ui-purple-glow) 22%, transparent); color: var(--ui-text-main); } /* * Редкость — кольцо ВНУТРИ кромки, а не сама кромка. * * Карточки редкости красили свой `border-color`. Пока кромка была * волосяной, это читалось как подсветка; с толстой кромкой референса * карточка получила ярко-синюю раму во весь периметр — в хранилище * шесть таких рам стояли рядом и спорили друг с другом. Кромка остаётся * почти чёрной у всех, а редкость даёт кольцо и свечение под ним. * * Карточки гардероба (`.tam-cos__card.is-<редкость>`) добавлены в те же * списки: редкость там была подписана только словом под названием, и * §15 ТЗ, требующий рамку, свечение и подпись СРАЗУ, выполнялся на * треть. Имя класса у них другое (`is-rare`, а не `--rare`) — вид * собирает его сам, и менять разметку ради единообразия имени * означало бы трогать рабочий JS без нужды. * * Плитки снаряжения (`.tam-item--<редкость>`) вошли сюда же. Вид * инвентаря писал этот класс с самого начала, а описания у него не было * ни одного: сорок вещей в полосе лежали одинаковыми досками, и легендарный * молот ничем не отличался от обычной рукавицы. Надетое (`.tam-item.is-on`, * вес 0-2-0) кольцо редкости не перебивает — состояние важнее качества. * * Прилавок магазина (`.tam-store__item--<редкость>`) и карточка * подходящего товара (`.tam-store__card--<редкость>`) — последние из * ряда. §28 ТЗ требует редкость на карточке товара прямо, а сорок вещей * снаряжения и десяток обликов лежали в витрине одинаковыми досками: * легендарная тема кабинета за 60 000 выглядела так же, как обычная * рукавица за 400. Редкость товару даёт его состав (`ShopProduct::rarity`), * у пакетов монет и энергии её нет вовсе — там кольца и не будет. */ .tam-vault__card--common, .tam-col__card--common, .tam-museum__card--common, .tam-item--common, .tam-store__item--common, .tam-store__card--common, .tam-cos__card.is-common { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-rar-common) 55%, transparent); } .tam-vault__card--uncommon, .tam-col__card--uncommon, .tam-museum__card--uncommon, .tam-item--uncommon, .tam-store__item--uncommon, .tam-store__card--uncommon, .tam-cos__card.is-uncommon { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-rar-uncommon) 62%, transparent), inset 0 0 14px color-mix(in srgb, var(--ui-rar-uncommon) 30%, transparent); } .tam-vault__card--rare, .tam-col__card--rare, .tam-museum__card--rare, .tam-item--rare, .tam-store__item--rare, .tam-store__card--rare, .tam-cos__card.is-rare { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-rar-rare) 62%, transparent), inset 0 0 14px color-mix(in srgb, var(--ui-rar-rare) 30%, transparent); } .tam-vault__card--epic, .tam-col__card--epic, .tam-museum__card--epic, .tam-item--epic, .tam-store__item--epic, .tam-store__card--epic, .tam-cos__card.is-epic { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-rar-epic) 62%, transparent), inset 0 0 14px color-mix(in srgb, var(--ui-rar-epic) 32%, transparent); } .tam-vault__card--legendary, .tam-col__card--legendary, .tam-museum__card--legendary, .tam-item--legendary, .tam-store__item--legendary, .tam-store__card--legendary, .tam-cos__card.is-legendary { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 68%, transparent), inset 0 0 16px color-mix(in srgb, var(--ui-gold) 34%, transparent); } .tam-vault__card--mythic, .tam-col__card--mythic, .tam-museum__card--mythic, .tam-item--mythic, .tam-store__item--mythic, .tam-store__card--mythic, .tam-cos__card.is-mythic { border-color: var(--ui-panel-edge); box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft), inset 0 0 0 2px color-mix(in srgb, var(--ui-red-light) 62%, transparent), inset 0 0 16px color-mix(in srgb, var(--ui-red-light) 32%, transparent); } /* * 6.1. ПАНЕЛЬ ПРЕДЛОЖЕНИЯ — «НАБОР ПОБЕДИТЕЛЯ» с кадра as/5.png. * * Единственная карточка игры, которая не деревянная: особое предложение * стоит первым экраном магазина и обязано отличаться от прилавка под * ним. Цвета сняты пипеткой по вертикали при x=530 кадра — #4a1e6b * сверху, #612a7d в середине, #44235a у низа, светлый рим #74419c в * пиксель, тёмная кромка по периметру; в словаре это набор * `--ui-purple-panel-*`. * * Золотого канта на кадре нет: панель держит тот же тёмный контур, что * и всё остальное, а «дорого» говорит сам цвет. * * Материал переехал сюда из `store.css`, где рядом с ним лежал ещё и * золотой корпус «на случай обычного предложения» — класс `is-premium` * вид ставит всегда, и золотой набор не доходил до экрана ни разу. */ .tam-store__hero { border: var(--ui-border-thick) solid var(--ui-panel-edge); border-radius: var(--ui-radius-lg); background: var(--ui-dirt-lite), linear-gradient(180deg, var(--ui-purple-panel-top) 0%, var(--ui-purple-panel) 34%, var(--ui-purple-panel) 62%, var(--ui-purple-panel-low) 100%); box-shadow: 0 5px 0 var(--ui-purple-deep), var(--ui-shadow-deep), inset 0 1px 0 var(--ui-purple-panel-rim); color: var(--ui-text-main); } /* Картинка набора — та же выемка §8, но в кольце золота: на кадре у предмета предложения есть золотая рама, и это единственное золото панели помимо кнопки. */ .tam-store__hero-art { border: var(--ui-border) solid var(--ui-gold-dark); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-purple-deep) 62%, transparent); } /* Чип состава внутри фиолетовой панели — глубже её корпуса: тёмный чип §10 читался бы на ней заплаткой из другого набора. */ .tam-store__hero .tam-store__content { background: var(--ui-dirt-wide), var(--ui-dirt), linear-gradient(180deg, var(--ui-purple-dark) 0%, var(--ui-purple-deep) 100%); box-shadow: var(--ui-inner-well), inset 0 1px 0 color-mix(in srgb, var(--ui-purple-panel-rim) 50%, transparent); } /* ========================================================================== 7. СТРОКИ СПИСКОВ Строка — та же доска, но тоньше: у списка из двадцати позиций направленная грань под каждой строкой превращает экран в лестницу. Поэтому кромка есть, а нижней грани нет. ========================================================================== */ .ui-row, .trumpamole__row, .trumpamole__ref-row, .trumpamole__tasks-row, .trumpamole__leaderboard-player-row, .trumpamole__profile-support-row, .trumpamole__profile-ach-row, .tam-arena__ladder-row, .tam-arena__log-row, /* Строка дуэли — такой же список, как журнал боёв рядом: до правки она красилась парой `--rowA/--rowB` из старого словаря и стояла на пол-тона мимо соседей. */ .trumpamole__arenapvp-duel, .tam-chr__row, .tam-clan__donate-row, /* Участник клана, клан в списке поиска и выбор проекта в штабе: те же строки списка, что журнал боёв рядом. Держали собственную заливку `rgba(20, 14, 12, .6)` — последний коричневый остаток тёплого мира в разделе, на фиолетовой доске читавшийся грязным пятном. */ .tam-clan__member, .tam-clan__row, .tam-hq__pick, /* Таблица вклада в облаву стояла в списке карточек §6 и выходила вдвое тяжелее вех над ней: толстая кромка и направленная грань под каждой из десяти строк превращали таблицу в лестницу — ровно то, из-за чего у строки грани нет. */ .tam-raid__row, .tam-col__dossier-row, .tam-season__top-row, /* Вход в сезон на странице заданий: кнопка-строка держала пару `var(--rowA, #2a1f1f)` — псевдоним с тёплой запаской прежнего мира. Запаска переживает смену палитры и врёт: там, где `--rowA` не объявлена, строка выходила бурой посреди фиолетового списка. */ .tam-season-banner, .tam-tower__list-row, /* Этаж лифта: строка держала собственную копию этого же градиента, написанную числами (#26196a → #1a1148), и стояла на пол-тона мимо всех остальных списков игры. */ .trumpamole__map-lift-floor, /* Строка титула в окне выбора: держала ту же копию градиента числами. */ .tam-title__row, /* Карточка соперника недели над таблицей лидеров: держала запаску `var(--rowA, #2a1f1f)` — псевдоним с бурым прямоугольником прежнего мира на случай, которого не бывает. Показывает она то же, что строка таблицы под ней, и материал у неё тот же. */ .tam-rivalry__card, /* Строка рекорда Трампивуда: собственная заливка #2a1f1f → #241a1a была последней коричневой поверхностью квартала — две такие строки стояли бурыми брусками посреди фиолетового нижнего листа. */ .trumpamole__tw-record, .tam-box-row { background: var(--ui-dirt-wide), var(--ui-dirt), linear-gradient(180deg, var(--ui-panel-light) 0%, var(--ui-wood) 100%); border: var(--ui-border) solid var(--ui-panel-edge); border-radius: var(--ui-radius-md); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-purple-glow) 18%, transparent), var(--ui-shadow-xs); color: var(--ui-text-main); } /* Чередование строк остаётся, но в пределах одного материала. */ .trumpamole__row.alt, .trumpamole__ref-row.alt, .trumpamole__tasks-row.alt, /* Строка рейтинга приходит из `leaderboard.js` с модификатором `--alt`, а не с классом `alt`: селектор `.trumpamole__leaderboard-player-row.alt` не совпадал ни разу, и вся таблица шла одним тоном без чередования. */ .trumpamole__leaderboard-player-row--alt, .tam-arena__ladder-row.alt, .tam-tower__list-row.alt, /* Строка достижения чередовалась парой `--rowA/--rowB` из старого словаря: пока в раме её не было, полосатость держалась мимо материала списка. */ .trumpamole__profile-ach-row.alt, /* В журнале боёв чередование считает браузер, а не разметка: строки приходят одним списком без класса `alt`. */ .tam-arena__log-row:nth-child(even) { background: var(--ui-dirt-wide), var(--ui-dirt), linear-gradient(180deg, var(--ui-wood) 0%, var(--ui-wood) 100%); } /* * СВОЯ СТРОКА В ТАБЛИЦЕ — ЗОЛОТО ПОВЕРХ МАТЕРИАЛА (§27 ТЗ). * * `leaderboard.css` красил её в #2f2323 — бурый прямоугольник прежнего * мира, последний в разделе. Рецепт тот же, что у текущей лиги в лестнице * арены (`arena.css`, `.is-current`): подсветка ЛОЖИТСЯ на материал * строки, а не заменяет его, и держит пыль по золоту — ровная заливка * одним цветом выпадает из ряда сразу. Кольцо добавлено потому, что своя * строка стоит посреди сорока таких же, и одного оттенка ей мало. Кромкой, * а не кольцом через `box-shadow`: тень строке задана строкой выше, и * сокращённая запись погасила бы её ради одной линии. */ .trumpamole__leaderboard-player-row--me { background: var(--ui-dirt-lite), linear-gradient(180deg, color-mix(in srgb, var(--ui-gold) 26%, var(--ui-panel-light)) 0%, color-mix(in srgb, var(--ui-gold) 14%, var(--ui-wood)) 100%); border-color: var(--ui-gold-dark); color: var(--ui-text-main); } /* * Итог таблицы взносов — подпись под списком, а не ещё одна строка. * * `clans.css` красил её в `--brown-2` с золотой цифрой, но `.tam-clan__donate-row` * стоит в списке выше, рама грузится последней — и «ВЕСЬ КЛАН» выходила * ровно такой же доской, как строка игрока над ней. Итог обязан читаться * иначе: корпус на ступень темнее строки, цифра золотая. */ .tam-clan__donate-row--sum { background: var(--ui-dirt-wide), var(--ui-dirt), linear-gradient(180deg, var(--ui-row-b) 0%, var(--ui-bg-dark) 100%); border-color: rgba(0, 0, 0, 0.55); box-shadow: var(--ui-inner-well); color: var(--ui-gold-light); } /* ========================================================================== 8. УТОПЛЕННЫЕ ПОВЕРХНОСТИ Значение, состав набора, портрет, пустое состояние, примечание — всё, что в референсе вырезано внутрь доски: тёмная заливка, внутренняя тень, без направленной грани. «Тёмная» здесь — тоже дерево. Замер по кадру профиля: доска #201a5e, вырезанная в ней плашка со счётчиком #171346 — на ступень темнее, и только. Прежняя заливка уходила к #0a0822, и вместо выемки в дереве получалась чёрная дыра: этим были заняты обе плашки трофеев в профиле и весь состав набора в магазине. ========================================================================== */ .ui-card__surface, .trumpamole__ref-note, .trumpamole__ref-field-value, .trumpamole__reward-box, .trumpamole__profile-showcase-empty, .trumpamole__profile-tower-empty, /* Часы дуэли — такое же окно времени, что часы боя: цифры вырезаны В доске. Держали прозрачную черноту в 40 % с волосяной лиловой линией, то есть висели над полем без края — а это единственное, на что игрок смотрит в последние секунды. */ .trumpamole__arenapvp-timer, /* Состав набора на утопленной подложке — ТОЛЬКО в панели предложения. В карточке товара внутри состава лежит один чип («35 энергии»), и выемка под ним читалась плашкой в плашке: у карточки VIP она тянулась во всю ширину, а чип занимал её половину. */ .tam-store__hero .tam-store__contents, .tam-store__item-art, .tam-store__card-art, .tam-arena__rival-block, .tam-arena__defense-note, .tam-arena__poster-note, /* Суточные попытки арены: строка стоит между заголовком раздела и подиумом и до записи здесь заливала себя сама — полупрозрачный прямоугольник с волосяной рамкой, то есть ровно тот web-элемент, что запрещает §62. */ .tam-arena__attempts, .tam-clan__task-note, .tam-col__rack-note, .tam-col__track-note, .tam-cos__card-note, .tam-hq__pick-note, .tam-season__chapter-note, .tam-season__source-note, .tam-tower__floor-note, .tam-tower__list-note, .tam-card__stat, /* Счёт серии вызовов: табло вырезано В экране, как любое значение. */ .tam-challenge__series, /* Строка приза колеса: последние коричневые плитки игры (#2a1f1f). */ .trumpamole__fortune-odd, .tam-chr__chip-icon, /* Поиск по хронике и гнездо значка записи: обе выемки были выписаны руками (#171346 → #100e33) — это ровно `--ui-row-a` и `--ui-panel-dark` строкой ниже, то есть копия общего материала мимо словаря. Поле поиска — то же, что поиск клана и поиск офиса башни. */ .tam-chr__search-input, .tam-chr__row-icon, .tam-clan__apps, .tam-clan__search, /* Строка остатка взносов, шапка таблицы взносов и поля окна создания клана: значение и ввод вырезаны В доске. Первая заливала себя золотой плёнкой `rgba(245, 214, 90, .08)`, вторая — псевдонимом `--brown-2`, поля — прозрачной чернотой с волосяной рамкой. */ .tam-clan__donate-line, .tam-clan__donate-head, .tam-clanform__field input, .tam-clanform__field textarea, /* Кадр стройки штаба, картинка облавы и кружок с уровнем перка — тоже вырезы: под ними лежит изображение, а не корпус панели. */ .tam-hq__site, .tam-hq__perk-level, .tam-raid__art, /* Выбор языка — единственный `