/* ============================================================= Матч&мяч — release v75. Шапка профиля игрока. Отдельный неймспейс .ph-* и отдельный файл. Старый блок .pp-hero правился в шести файлах разных релизов, и менять там композицию означало наращивать специфичность и !important поверх чужих правил. Новые классы ни с чем не пересекаются, поэтому весь блок описан здесь и только здесь. Композиция: .ph — одна карточка вместо двух разноцветных панелей .ph-top — идентичность (слева) + рейтинг силы (справа) .ph-stats — полоса показателей: число сверху, подпись под ним .pp-rating-trend — график динамики (разметка переиспользована как есть) Темизация: вариант «Издательский» включается классом ace-hero-editorial на из админки и меняет только типографику и акцент, не композицию. ============================================================= */ .ph { position: relative; display: flex; flex-direction: column; gap: 0; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 140% at 88% 0%, rgba(198, 242, 78, .10), transparent 58%), linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022) 46%, rgba(255, 255, 255, .012)); border: 1px solid var(--border, rgba(255, 255, 255, .09)); box-shadow: 0 28px 52px -46px rgba(0, 0, 0, .9); } /* Состояние чемпиона — акцент на самой карточке, а не отдельной лентой сверху. Прежний баннер читался как рекламная плашка, приклеенная к профилю. Цвет — тот же фирменный лайм, что и везде. Отдельный «золотой» оттенок выглядел как элемент из чужой дизайн-системы: на странице появлялся второй акцент, который больше нигде в Матч&мяч не встречается. Титул выделяется формой (корона, обводка, подпись), а не новым цветом. */ .ph.is-champion { border-color: color-mix(in srgb, var(--accent, #C6F24E) 34%, transparent); background: radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--accent, #C6F24E) 16%, transparent), transparent 58%), linear-gradient(168deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .022) 46%, rgba(255, 255, 255, .012)); } /* ---------- Верхняя часть ---------- */ .ph-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 26px 28px 24px; } .ph-identity { display: flex; gap: 20px; min-width: 0; } /* ---------- Аватар ---------- */ .ph-avatar { position: relative; flex: 0 0 108px; width: 108px; height: 108px; border-radius: 22px; overflow: visible; background: rgba(255, 255, 255, .06); border: 1px solid var(--border, rgba(255, 255, 255, .1)); } .ph-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; display: block; } .ph-avatar-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 42px; font-weight: 800; color: var(--text-muted, #969C94); } .ph.is-champion .ph-avatar { border-color: color-mix(in srgb, var(--accent, #C6F24E) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #C6F24E) 14%, transparent); } /* Корона — маркер титула на самом игроке. */ .ph-crown { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent, #C6F24E); color: #0F110E; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); } /* NTRP остаётся на аватаре: это «паспортная» характеристика игрока, и рядом с лицом она читается как часть его идентичности. */ .ph-ntrp { position: absolute; right: -10px; bottom: -8px; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 6px 9px; border-radius: 11px; background: var(--bg, #0F110E); border: 1px solid var(--border, rgba(255, 255, 255, .14)); } .ph-ntrp b { font-size: 15px; font-weight: 800; } .ph-ntrp i { font-style: normal; font-size: 8.5px; letter-spacing: .1em; color: var(--text-muted, #969C94); margin-top: 2px; } /* ---------- Имя и статус ---------- */ .ph-id { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; } .ph-kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted, #969C94); } .ph-kicker span { display: inline-flex; align-items: center; gap: 5px; } .ph-kicker svg { width: 12px; height: 12px; } .ph-kicker-title { color: var(--accent, #C6F24E); } .ph-kicker-sep { opacity: .45; } .ph-name { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; /* Длинное имя не должно распирать сетку и ломать правую колонку. */ overflow-wrap: anywhere; } .ph-inactive { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted, #969C94); background: rgba(255, 255, 255, .07); } /* ---------- Категория игры ---------- */ .ph-tier { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border, rgba(255, 255, 255, .08)); } .ph-tier-key { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent, #C6F24E); color: #0F110E; font-size: 16px; font-weight: 800; } .ph-tier-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ph-tier-text strong { font-size: 14.5px; font-weight: 700; } .ph-tier-text small { font-size: 12.5px; color: var(--text-muted, #969C94); } /* ---------- Чипы ---------- */ /* Раньше это были два блока: «мета» рядом с именем и отдельная сетка «фактов» ниже. Вместе они занимали половину карточки и оставляли пустоту, если игрок не заполнил профиль. Один ряд чипов сжимается до фактического содержания. */ .ph-chips { display: flex; flex-wrap: wrap; gap: 7px; } .ph-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; color: var(--text-muted, #969C94); background: rgba(255, 255, 255, .05); border: 1px solid transparent; text-decoration: none; } .ph-chip svg { width: 13px; height: 13px; opacity: .75; } .ph-chip-link:hover { color: var(--text, #F2F4F0); border-color: color-mix(in srgb, var(--accent, #C6F24E) 45%, transparent); } .ph-bio { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted, #969C94); max-width: 62ch; } .ph-bio-add { align-self: flex-start; padding: 0; border: none; background: none; font-family: inherit; font-size: 14px; color: var(--accent, #C6F24E); cursor: pointer; opacity: .85; } .ph-bio-add:hover { opacity: 1; } .ph-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; } /* ---------- Рейтинг силы ---------- */ .ph-power { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 18px; background: rgba(0, 0, 0, .26); border: 1px solid var(--border, rgba(255, 255, 255, .08)); } .ph-power-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ph-power-label { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted, #969C94); } .ph-delta { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .07); color: var(--text-muted, #969C94); } .ph-delta.is-positive { color: var(--accent, #C6F24E); background: color-mix(in srgb, var(--accent, #C6F24E) 16%, transparent); } .ph-delta.is-negative { color: #E4735F; background: rgba(228, 115, 95, .16); } .ph-elo { font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; margin-top: 8px; /* Табличные цифры: при анимации счётчика ширина не должна дёргаться. */ font-variant-numeric: tabular-nums; color: var(--accent, #C6F24E); } .ph-power-sub { margin-top: 4px; font-size: 13px; color: var(--text-muted, #969C94); } .ph-scale { position: relative; height: 5px; margin: 18px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; } .ph-scale > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #C6F24E) 55%, transparent), var(--accent, #C6F24E)); } .ph-scale-peak { position: absolute; right: 0; top: -2px; width: 2px; height: 9px; background: rgba(255, 255, 255, .5); } .ph-scale-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted, #969C94); } .ph-scale-axis b { color: var(--text, #F2F4F0); font-weight: 700; } .ph-scale-axis svg { width: 12px; height: 12px; vertical-align: -2px; } .ph-doubles { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border, rgba(255, 255, 255, .07)); } .ph-doubles-label { font-size: 13px; color: var(--text-muted, #969C94); } .ph-doubles b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .ph-doubles small { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted, #969C94); } .ph-doubles.is-empty b { color: var(--text-muted, #969C94); } /* ---------- Полоса показателей ---------- */ .ph-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border, rgba(255, 255, 255, .07)); background: rgba(0, 0, 0, .16); } .ph-stat { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 22px; min-height: 92px; } .ph-stat + .ph-stat { border-left: 1px solid var(--border, rgba(255, 255, 255, .06)); } /* Число первым, подпись под ним. В прежней версии подпись стояла сверху, а значение прижималось к нижнему краю карточки — взгляд шёл к тексту, хотя смысл блока в цифре. */ .ph-stat-value { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ph-stat-value i { font-style: normal; font-size: .6em; color: var(--text-muted, #969C94); margin: 0 1px; } .ph-stat-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted, #969C94); white-space: nowrap; } .ph-stat-label svg { width: 13px; height: 13px; opacity: .7; } .ph-stat-form-row { display: flex; align-items: center; gap: 4px; min-height: 30px; } .ph-form-empty { font-size: 13px; color: var(--text-muted, #969C94); } /* ---------- График динамики ---------- */ /* Разметка .pp-rating-trend переиспользована из прежней версии без изменений — она работала хорошо. Здесь только посадочные отступы под новую карточку. */ .ph .pp-rating-trend { padding: 20px 28px 22px; border-top: 1px solid var(--border, rgba(255, 255, 255, .07)); } /* ---------- Планшет ---------- */ @media (max-width: 1080px) { .ph-top { grid-template-columns: 1fr; gap: 20px; } /* Рейтинг силы уходит под идентичность, но остаётся горизонтально компактным: на планшете он не должен занимать целый экран. */ .ph-power { padding: 18px 20px; } .ph-doubles { margin-top: 16px; } } /* ---------- Телефон ---------- */ @media (max-width: 720px) { .ph { border-radius: 18px; } .ph-top { padding: 20px 18px 18px; gap: 18px; } .ph-identity { gap: 14px; } .ph-avatar { flex-basis: 76px; width: 76px; height: 76px; border-radius: 18px; } .ph-avatar img { border-radius: 17px; } .ph-avatar-letter { font-size: 30px; } .ph-crown { width: 24px; height: 24px; top: -8px; left: -8px; } .ph-ntrp { padding: 4px 7px; right: -8px; } .ph-ntrp b { font-size: 13px; } .ph-name { font-size: 27px; } .ph-id { gap: 9px; } .ph-tier { padding: 8px 12px 8px 8px; gap: 10px; } .ph-tier-key { width: 30px; height: 30px; font-size: 14px; } .ph-elo { font-size: 46px; } .ph-actions { margin-top: 2px; } .ph-actions .btn { flex: 1 1 auto; justify-content: center; } /* Показатели в две колонки: четыре в ряд на 360px дают по 80px на ячейку, и подписи вроде «Баланс матчей» там не помещаются ни в одну строку. */ .ph-stats { grid-template-columns: 1fr 1fr; } .ph-stat { padding: 14px 16px; min-height: 78px; } .ph-stat + .ph-stat { border-left: none; } .ph-stat:nth-child(even) { border-left: 1px solid var(--border, rgba(255, 255, 255, .06)); } .ph-stat:nth-child(n+3) { border-top: 1px solid var(--border, rgba(255, 255, 255, .06)); } .ph-stat-value { font-size: 25px; } .ph-stat-label { font-size: 12px; white-space: normal; } .ph .pp-rating-trend { padding: 18px 18px 20px; } } @media (prefers-reduced-motion: reduce) { .ph-scale > span { transition: none; } } /* ---------- График: точка последнего значения ---------- */ /* SVG растягивается по ширине (preserveAspectRatio="none"), поэтому внутри него превращался в эллипс. Точку рисуем обычным элементом поверх графика: он позиционируется в процентах, но сам не масштабируется. */ .ph .pp-rating-plot { position: relative; } .ph .pp-rating-plot svg { display: block; width: 100%; } .ph .pp-rating-dot-fixed { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent, #C6F24E); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #C6F24E) 22%, transparent); pointer-events: none; } /* ---------- Мобильная раскладка идентичности ---------- */ @media (max-width: 720px) { /* Аватар встаёт в строку с именем, а категория, чипы и кнопки разворачиваются на всю ширину. Иначе на 390px под текст остаётся около 270px, и подпись категории рвётся на три строки. display: contents у .ph-id поднимает её детей на уровень сетки — так обходимся без дублирования разметки под мобильный. */ .ph-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center; } .ph-id { display: contents; } .ph-id-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ph-id-body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ph-tier { align-self: stretch; } .ph-tier-text small { font-size: 12px; } } /* На десктопе структура прежняя: аватар и колонка с текстом. */ @media (min-width: 721px) { .ph-id-head { display: flex; flex-direction: column; gap: 8px; } .ph-id-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } } /* ============================================================= ВАРИАНТЫ ОФОРМЛЕНИЯ Переключаются в админке и ставятся классом на сервером, до отрисовки, поэтому шапка не перестраивается на глазах у пользователя. ace-hero-classic — базовый: одна карточка (правила выше) ace-hero-editorial — типографский: без плашек, на линиях ace-hero-compact — блочный: плотная мозаика модулей Разметка у всех трёх одна. Три отдельных набора HTML пришлось бы и тестировать втрое, и чинить в трёх местах при каждой правке данных. Шрифты во всех вариантах проектные — Manrope и IBM Plex Mono. Прежний editorial подключал Playfair Display, которого в проекте нет: браузер молча откатывался на Georgia, и вариант выглядел случайной ошибкой вёрстки. ============================================================= */ /* ---------- Издательский ---------- */ /* Смысл варианта — убрать всю «мебель» и оставить типографику: без карточек, заливок и скруглений, разделение только горизонтальными линиями. */ .ace-hero-editorial .ph { background: none; border: none; border-top: 2px solid var(--text, #F2F4F0); border-radius: 0; box-shadow: none; } .ace-hero-editorial .ph.is-champion { background: none; border-top-color: var(--accent, #C6F24E); } .ace-hero-editorial .ph-top { padding: 24px 0 22px; } .ace-hero-editorial .ph-avatar { border-radius: 50%; } .ace-hero-editorial .ph-avatar img { border-radius: 50%; } .ace-hero-editorial .ph-name { font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -0.035em; } .ace-hero-editorial .ph-kicker { letter-spacing: .18em; } /* Категория и рейтинг теряют плашки: остаётся только текст и линия. */ .ace-hero-editorial .ph-tier { background: none; border: none; border-left: 2px solid var(--accent, #C6F24E); border-radius: 0; padding: 2px 0 2px 12px; } .ace-hero-editorial .ph-tier-key { background: none; color: var(--accent, #C6F24E); width: auto; height: auto; font-size: 22px; } .ace-hero-editorial .ph-power { background: none; border: none; border-left: 1px solid var(--border, rgba(255, 255, 255, .12)); border-radius: 0; padding: 4px 0 4px 24px; } .ace-hero-editorial .ph-elo { font-size: 66px; } .ace-hero-editorial .ph-chip { background: none; border: none; border-bottom: 1px solid var(--border, rgba(255, 255, 255, .14)); border-radius: 0; padding: 4px 2px; } .ace-hero-editorial .ph-stats { background: none; } .ace-hero-editorial .ph-stat + .ph-stat { border-left: none; } .ace-hero-editorial .ph-stat { padding: 18px 0; } .ace-hero-editorial .ph-stat + .ph-stat { padding-left: 32px; } @media (max-width: 1080px) { .ace-hero-editorial .ph-power { border-left: none; border-top: 1px solid var(--border, rgba(255, 255, 255, .12)); padding: 18px 0 0; } } /* ---------- Блочный ---------- */ /* Здесь карточка расформирована на самостоятельные модули с зазорами. Задача варианта — плотность: меньше воздуха внутри блоков, больше между ними. Взгляд читает страницу как набор плиток, а не как один длинный холст. .ph-top и .ph-stats переводятся в display: contents — их дети поднимаются на уровень общей сетки и становятся плитками сами. Так обходимся без отдельной разметки под этот вариант. */ .ace-hero-compact .ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; } .ace-hero-compact .ph-top, .ace-hero-compact .ph-stats { display: contents; } .ace-hero-compact .ph-identity, .ace-hero-compact .ph-power, .ace-hero-compact .ph-stat, .ace-hero-compact .pp-rating-trend { border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border, rgba(255, 255, 255, .08)); } .ace-hero-compact .ph-identity { grid-column: span 3; padding: 18px 20px; align-items: center; } .ace-hero-compact.ph-champ-fallback .ph-identity { border-color: var(--accent, #C6F24E); } .ace-hero-compact .ph.is-champion .ph-identity { border-color: color-mix(in srgb, var(--accent, #C6F24E) 40%, transparent); } .ace-hero-compact .ph-power { grid-column: span 1; padding: 16px 18px; background: rgba(0, 0, 0, .28); } .ace-hero-compact .ph-stat { padding: 14px 16px; min-height: 0; gap: 5px; } .ace-hero-compact .ph-stat + .ph-stat { border-left: 1px solid var(--border, rgba(255, 255, 255, .08)); } .ace-hero-compact .pp-rating-trend { grid-column: 1 / -1; padding: 16px 20px 18px; border-top: 1px solid var(--border, rgba(255, 255, 255, .08)); } /* Плотнее внутри: аватар меньше, цифры мельче, отступы короче. Крупный кегль уместен на просторной карточке, а в плитке он распирает её изнутри. */ .ace-hero-compact .ph-avatar { flex-basis: 80px; width: 80px; height: 80px; border-radius: 16px; } .ace-hero-compact .ph-avatar img { border-radius: 15px; } .ace-hero-compact .ph-name { font-size: clamp(24px, 2.4vw, 32px); } .ace-hero-compact .ph-elo { font-size: 40px; margin-top: 6px; } .ace-hero-compact .ph-stat-value { font-size: 24px; } .ace-hero-compact .ph-id { gap: 7px; } .ace-hero-compact .ph-id-body { gap: 8px; margin-top: 7px; } .ace-hero-compact .ph-tier { padding: 7px 11px 7px 7px; } .ace-hero-compact .ph-tier-key { width: 28px; height: 28px; font-size: 13px; } .ace-hero-compact .ph-scale { margin: 12px 0 7px; } .ace-hero-compact .ph-doubles { padding-top: 12px; } .ace-hero-compact .ph-bio { font-size: 13.5px; } @media (max-width: 1080px) { .ace-hero-compact .ph { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ace-hero-compact .ph-identity { grid-column: 1 / -1; } .ace-hero-compact .ph-power { grid-column: 1 / -1; } .ace-hero-compact .ph-stat + .ph-stat { border-left: 1px solid var(--border, rgba(255, 255, 255, .08)); } } @media (max-width: 720px) { .ace-hero-compact .ph { gap: 8px; } .ace-hero-compact .ph-identity { padding: 16px; } /* Плитки показателей уже разделены зазором, поэтому внутренние границы, которые базовый вариант рисует для слитной полосы, здесь лишние. */ .ace-hero-compact .ph-stat, .ace-hero-compact .ph-stat:nth-child(even), .ace-hero-compact .ph-stat:nth-child(n+3) { border: 1px solid var(--border, rgba(255, 255, 255, .08)); } }