:root { /* ── Типографические токены (нормализация текста) ── display — заголовки, цифры, имена; ui — плашки/кнопки/метки (Manrope); body — абзацы и вторичный текст (Inter). Playfair удалён. */ --font-display: 'IBM Plex Sans Condensed', sans-serif; --font-ui: Manrope, sans-serif; --font-body: Inter, sans-serif; --text-2xs: 10px; --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-lg: 17px; --text-h3: clamp(20px, 1.6vw, 26px); --text-h2: clamp(28px, 2.7vw, 42px); --text-h1: clamp(36px, 4vw, 56px); --text-display: clamp(60px, 7vw, 100px); --ls-caps: 0.16em; --ls-tight: -0.02em; /* ── База фона ── Единая глубина под всеми секциями. Кадр (hero, треки, партнёры) и стеклянные панели всплывают над ней. Секции без кадра ничего своего не рисуют и показывают именно эту базу: если дать каждой собственный градиент, на стыке виден сброс тона — низ одной темнее верха следующей. Тон задаётся один раз здесь, .landing-lock в hero-variant-a.css его разворачивает по высоте страницы. */ --bg-base-top: #0a0d10; --bg-base-mid: #080a0d; --bg-base: #070809; --bg-base-deep: #050607; } /* Завеса прихода к секции трека (#track-* в адресе): секции подгружаются fetch'ем после первого кадра, и без завесы виден hero с его анимацией, а затем прыжок вниз. Класс ставит инлайн-скрипт в главной до рендера, снимает live-track-page.js после мгновенного скролла к секции. */ html.vt-arrive-track::before { content: ''; position: fixed; inset: 0; z-index: 2000; background: var(--bg-base-deep, #050607); opacity: 1; transition: opacity 320ms ease; pointer-events: none; } html.vt-arrive-track.vt-arrived::before { opacity: 0; } :root { --page: var(--bg-base-deep); --ink: #f4f1ea; --muted: rgba(244, 241, 234, 0.5); --muted-soft: rgba(244, 241, 234, 0.55); --line-soft: rgba(255, 255, 255, 0.08); --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.16); --line-hover: rgba(255, 255, 255, 0.24); --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 26px; --radius-fluid: clamp(22px, 3vw, 34px); --radius-pill: 999px; --gold: #e8c36a; --gold-border: rgba(232, 195, 106, 0.55); --color-text: #f3f0ea; --color-text-muted: #a8adb7; --color-gold-text: #e1b14f; --color-gold-bright: #d3a13a; --color-accent: #b7ff3c; --color-award: #d8b46a; /* ── Стекло ── Три ступени вместо россыпи значений: soft — мелочь поверх кадра (пилюли, переключатели), обычная — рабочая (карточки, панели, шапка), strong — крупное перекрытие (мега-меню, оверлеи, футер). Тон один на все три. ГЛАВНОЕ ПРАВИЛО: backdrop-filter ставится только там, где под элементом есть кадр. Где кадра нет, блюр размывает ровную заливку и стоит впустую — там непрозрачная подложка (.panel / --panel), а не стекло. */ --glass-blur-soft: 12px; --glass-blur: 18px; --glass-blur-strong: 24px; --glass-sat: 125%; --glass-tint: 22, 25, 30; --glass-soft: rgba(var(--glass-tint), 0.42); --glass: rgba(var(--glass-tint), 0.52); --glass-strong: rgba(16, 18, 22, 0.72); --glass-line: rgba(255, 255, 255, 0.16); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.36); --film-line: rgba(243, 240, 234, 0.12); --slab-ease: cubic-bezier(0.22, 1, 0.36, 1); --track-title-edge: 0 0 1px rgba(0, 0, 0, 0.92), 0 0 10px rgba(0, 0, 0, 0.42), 0 2px 18px rgba(0, 0, 0, 0.34), 1px 0 0 rgba(0, 0, 0, 0.38), -1px 0 0 rgba(0, 0, 0, 0.38), 0 1px 0 rgba(0, 0, 0, 0.38), 0 -1px 0 rgba(0, 0, 0, 0.38); } /* ── Подложка ── Готовая основа для панелей и карточек: рамка, радиус и фон берутся из системы, а не собираются заново. Новому блоку достаточно class="panel" (внешняя панель) или class="panel panel--card" (карточка внутри панели); модификаторы --soft, --pill и --flush меняют только линию и скругление. Собственные отступы, сетка и типографика остаются за компонентом. */ .panel { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--panel, rgba(13, 16, 20, 0.72)); } .panel--card { border-color: var(--line); border-radius: var(--radius-md); } .panel--soft { border-color: var(--line-soft); } .panel--pill { border-radius: var(--radius-pill); } .panel--flush { border-radius: 0; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--page); color: var(--ink); font-family: Manrope, system-ui, sans-serif; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-soft { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes bottom-hinge-reveal { 0% { opacity: 0; filter: blur(7px); transform: perspective(1200px) rotateX(-72deg) translateY(38px); } 24% { opacity: 0.72; filter: blur(3px); transform: perspective(1200px) rotateX(-54deg) translateY(28px); } 52% { opacity: 1; filter: blur(0.8px); transform: perspective(1200px) rotateX(-32deg) translateY(17px); } 76% { filter: blur(0); transform: perspective(1200px) rotateX(-14deg) translateY(7px); } 100% { opacity: 1; filter: blur(0); transform: perspective(1200px) rotateX(0deg) translateY(0); } } @keyframes live-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 195, 106, 0.55); } 70% { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(232, 195, 106, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 195, 106, 0); } } @keyframes live-pulse-hot { 0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(232, 195, 106, 0.75), 0 0 14px rgba(232, 195, 106, 0.7); } 45% { transform: scale(1.22); opacity: 1; box-shadow: 0 0 0 6px rgba(232, 195, 106, 0), 0 0 16px rgba(232, 195, 106, 0.3); } 70% { transform: scale(0.96); opacity: 0.7; box-shadow: 0 0 0 0 rgba(232, 195, 106, 0), 0 0 8px rgba(232, 195, 106, 0.4); } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(232, 195, 106, 0), 0 0 12px rgba(232, 195, 106, 0.65); } } @keyframes wreath-draw { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 0.85; } } a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(232, 195, 106, 0.22); } a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .prototype-shell { --tracks-to-faq-handoff: clamp(70px, 7vw, 120px); position: relative; z-index: 3; padding: clamp(10px, 1.4vw, 20px); /* Симметричный кадр: последняя карточка отбивается тем же отступом, что и боковые, плюс ритм-зазор 18px как между карточками — без чёрной пустоты до FAQ. */ padding-bottom: calc(clamp(10px, 1.4vw, 20px) + 18px); } /* Затемняющего слоя над низом карточки нет — фото идёт в полную яркость до края. */ .live-track { --track-film-brightness: 1.04; --track-film-contrast: 0.82; --track-film-cool: 0; --track-film-veil-top: rgba(8, 9, 10, 0.03); --track-film-veil-mid: rgba(8, 9, 10, 0.12); --track-film-veil-bottom: rgba(5, 6, 8, 0.4); --track-film-side: rgba(5, 6, 8, 0.4); --track-film-grain-opacity: 0.08; --track-film-print-wash: 0.08; position: relative; isolation: isolate; display: flex; flex-direction: column; /* Единая высота треков. Пол во весь экран сам по себе секции не выравнивал: контент распирал их на 695 / 765 / 801, и ритм при скролле сбивался. 800 — по самой высокой (фитнес, естественная высота 801). max() сохраняет прежнее «один трек — один экран» на высоких мониторах, а на низких держит общие 800. Именно min-height, а не height: у секции overflow: hidden, и жёсткая высота молча срезала бы фитнесу его 1 px. */ min-height: max(800px, calc(100svh - clamp(20px, 2.8vw, 40px))); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-fluid); background: linear-gradient(180deg, #0b0e13 0%, #050505 100%); } /* --track-film-cool: 0.18 у всех пяти треков. Значение и раньше применялось — его писала инлайн панель «Настройка фона» (scripts/track-tune-panel.js), а CSS держал 0, и код расходился с тем, что на экране. Здесь зафиксировано то, что видно; вернуть кадры к нейтральному тону — поставить 0 в обоих местах. */ #track-professional-sport { --track-film-cool: 0.18; --track-film-brightness: 1.31; --track-film-contrast: 0.86; --track-film-shade-opacity: 1.4; --track-film-veil-opacity: 1.14; --track-film-print-wash: 0.05; --track-film-grain-opacity: 0.16; } #track-amateur-sport { --track-film-cool: 0.18; --track-film-brightness: 1.26; --track-film-contrast: 1.02; --track-film-shade-opacity: 1.4; --track-film-veil-opacity: 1.4; --track-film-print-wash: 0.03; --track-film-grain-opacity: 0.16; } #track-fitness { --track-film-cool: 0.18; --track-film-brightness: 1.27; --track-film-contrast: 0.92; --track-film-shade-opacity: 0.3; --track-film-veil-opacity: 1.4; --track-film-print-wash: 0.03; --track-film-grain-opacity: 0.06; } /* Под cyber-hero-wide: снимок вдвое темнее прежнего (средняя яркость 32 против 44, правая половина 19 против 40), и прежние 1.31/1.03 при shade 1.4 вымывали чёрные в серую пелену. Плотность важнее подъёма — яркость снижена, контраст поднят. Тот же id несёт hero подстраницы трека, и там теперь тот же кадр, так что значения общие для обеих страниц (дубль — в scripts/track-tune-panel.js). */ #track-esports-phygital { --track-film-cool: 0.18; --track-film-brightness: 1.02; --track-film-contrast: 1.08; --track-film-shade-opacity: 0.75; --track-film-veil-opacity: 0.03; --track-film-print-wash: 0.01; --track-film-grain-opacity: 0.11; } /* Холодный фильтр здесь слабее общих 0.18 — по решению владельца 28.07.2026 */ #track-sports-medicine { --track-film-cool: 0.06; --track-film-brightness: 1.11; --track-film-contrast: 1.06; --track-film-shade-opacity: 1.39; --track-film-veil-opacity: 1.25; --track-film-print-wash: 0.1; --track-film-grain-opacity: 0.16; } /* Кадра под «Основателем» и «Этапами» нет — плёнка и зерно на нуле, иначе зерно поверх базы читается серой пеленой (дубль — в scripts/track-tune-panel.js; раньше эти значения писала инлайн панель настройки, теперь она только в дев-режиме). */ #founder { --track-film-brightness: 0.7; --track-film-contrast: 0.6; --track-film-cool: 0; --track-film-shade-opacity: 0; --track-film-veil-opacity: 0; --track-film-print-wash: 0; --track-film-grain-opacity: 0; --track-film-blur: 7px; } #timeline { --track-film-brightness: 0.7; --track-film-contrast: 0.6; --track-film-cool: 0; --track-film-shade-opacity: 0; --track-film-veil-opacity: 0; --track-film-print-wash: 0; --track-film-grain-opacity: 0; --track-film-blur: 3px; } #founder.glassbg--through .glassbg__img, #timeline.glassbg--through .glassbg__img, #timeline.lock-section--timeline.glassbg--through .glassbg__img { filter: grayscale(1) sepia(var(--track-film-cool, 0)) hue-rotate(200deg) blur(var(--track-film-blur)) brightness(var(--track-film-brightness)) contrast(var(--track-film-contrast)); } #founder.glassbg.glassbg--through .glassbg__veil, #timeline.glassbg.glassbg--through.lock-section--timeline .glassbg__veil { opacity: 1; background: none; } #founder .glassbg__veil::before, #founder .glassbg__veil::after, #timeline .glassbg__veil::before, #timeline .glassbg__veil::after { content: ''; position: absolute; inset: 0; pointer-events: none; } #founder .glassbg__veil::before { opacity: var(--track-film-veil-opacity, 1); background: linear-gradient( 180deg, rgba(var(--glass-tint), 0.46) 0%, rgba(var(--glass-tint), 0.66) 48%, rgba(18, 20, 24, 0.86) 100% ), radial-gradient(ellipse 70rem 40rem at 78% 0%, transparent, rgba(18, 20, 24, 0.4) 75%); } #timeline .glassbg__veil::before { opacity: var(--track-film-veil-opacity, 1); background: linear-gradient( 180deg, rgba(var(--glass-tint), 0.34) 0%, rgba(var(--glass-tint), 0.5) 48%, rgba(18, 20, 24, 0.74) 100% ), radial-gradient(ellipse 70rem 40rem at 78% 0%, transparent, rgba(18, 20, 24, 0.26) 75%); } #founder .glassbg__veil::after, #timeline .glassbg__veil::after { opacity: var(--track-film-print-wash, 0); background: rgba(255, 255, 255, 0.9); mix-blend-mode: screen; } #founder::before, #timeline::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--track-film-shade-opacity, 1); background: linear-gradient(90deg, rgba(5, 6, 8, 0.26), transparent 58%), linear-gradient(0deg, rgba(5, 6, 8, 0.42), transparent 52%); } #founder.glassbg::after, #timeline.glassbg::after { content: ''; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--track-film-grain-opacity, 0); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); background-size: 200px 200px; } .live-track__hero { position: absolute; inset: 0; z-index: 0; opacity: 1; transition: opacity 320ms ease; } .live-track__hero img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(var(--track-film-cool, 0)) hue-rotate(200deg) brightness(var(--track-film-brightness)) contrast(var(--track-film-contrast)); } .live-track__hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, var(--track-film-print-wash)); mix-blend-mode: screen; } .live-track[data-stage='launch'] .live-track__hero { opacity: 1; } .live-track[data-stage='jury'] .live-track__hero { opacity: 0.78; } .live-track[data-stage='nominees'] .live-track__hero { opacity: 0.72; } .live-track[data-stage='final'] .live-track__hero { opacity: 0.8; } .live-track__veil, .live-track__hero-shade, .live-track__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Единая обработка фонов: мягкая ч/б плёнка, ближе к партнёрскому блоку. */ .live-track__veil { opacity: var(--track-film-veil-opacity, 1); background: linear-gradient( 180deg, var(--track-film-veil-top) 0%, var(--track-film-veil-mid) 48%, var(--track-film-veil-bottom) 100% ), radial-gradient(ellipse 72rem 42rem at 78% 0%, transparent 18%, rgba(5, 6, 8, 0.12) 78%); } /* Стык медицина → FAQ: дополнительного затемнения низа карточки нет — фон FAQ и так выходит из того же #050505, что и фон страницы. */ .live-track__hero-shade { opacity: var(--track-film-shade-opacity, 1); background-image: linear-gradient( 90deg, var(--track-film-side) 0%, rgba(5, 6, 8, 0.32) 28%, rgba(5, 6, 8, 0.14) 62%, rgba(5, 6, 8, 0.05) 100% ), linear-gradient(0deg, rgba(5, 6, 8, 0.42) 0%, rgba(5, 6, 8, 0.025) 46%), linear-gradient(180deg, rgba(5, 6, 8, 0.14) 0%, rgba(5, 6, 8, 0) 24%); } .live-track__grid { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: linear-gradient(90deg, transparent 28%, black 100%); mask-image: linear-gradient(90deg, transparent 28%, black 100%); opacity: 0.14; } .live-track::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--track-film-grain-opacity); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .live-track__inner { position: relative; z-index: 3; flex: 1; min-height: 0; padding: clamp(24px, 3.4vw, 54px); display: flex; flex-direction: column; } .stage-view { flex: 1; display: flex; flex-direction: column; animation: fade-soft 420ms ease both; } /* Каскадный вход активного этапа: проигрывается один раз при показе секции */ .stage-view > *, .jury-layout > *, .esp-jury-layout > *, .expert-grid > *, .nominee-grid > *, .winner-grid > * { animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } .stage-view[data-stage-view='launch'] .launch-top { animation-delay: 60ms; } .stage-view[data-stage-view='launch'] .launch-head { animation-delay: 140ms; } .stage-view[data-stage-view='launch'] .launch-bottom { animation-delay: 260ms; } .stage-view[data-stage-view='jury'] .compact-bar { animation-delay: 60ms; } .stage-view[data-stage-view='jury'] { flex: 0 1 auto; } .jury-layout > .leader-card--vertical { animation-delay: 150ms; } .jury-layout > .jury-panel { animation-delay: 220ms; } .expert-grid > *:nth-child(1) { animation-delay: 300ms; } .expert-grid > *:nth-child(2) { animation-delay: 360ms; } .expert-grid > *:nth-child(3) { animation-delay: 420ms; } .expert-grid > *:nth-child(4) { animation-delay: 480ms; } .stage-view[data-stage-view='nominees'] .nominees-head { animation-delay: 60ms; } .stage-view[data-stage-view='nominees'] .nominees-panel { animation-delay: 160ms; } .stage-view[data-stage-view='nominees'] .nominees-footer { animation-delay: 480ms; } .nominee-grid > *:nth-child(1) { animation-delay: 240ms; } .nominee-grid > *:nth-child(2) { animation-delay: 320ms; } .nominee-grid > *:nth-child(3) { animation-delay: 400ms; } .stage-view[data-stage-view='final'] .final-head { animation-delay: 60ms; } .winner-grid > *:nth-child(1) { animation-delay: 200ms; } .winner-grid > *:nth-child(2) { animation-delay: 300ms; } .winner-grid > *:nth-child(3) { animation-delay: 400ms; } .stage-view[hidden] { display: none !important; } #tracks { scroll-margin-top: clamp(84px, 9vw, 116px); } .track-stage-devtool { align-self: flex-start; width: min(100%, 420px); margin: 0 0 clamp(14px, 2vh, 22px); color: var(--ink); } .track-stage-devtool__summary { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: rgba(8, 9, 10, 0.52); color: rgba(244, 241, 234, 0.72); cursor: pointer; font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)); } .track-stage-devtool__summary::-webkit-details-marker { display: none; } .track-stage-devtool__summary::after { content: '+'; color: var(--gold); font: 800 14px/1 Manrope, sans-serif; } .track-stage-devtool[open] .track-stage-devtool__summary::after { content: '−'; } .track-stage-devtool__summary strong { color: var(--gold); font: inherit; } .track-stage-switcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(10, 11, 13, 0.64); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-sat)); } .track-stage-devtool:not([open]) .track-stage-switcher { display: none !important; } .track-stage-switcher__tab { min-height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 5px; cursor: pointer; font: 700 10px/1.05 Manrope, sans-serif; color: rgba(244, 241, 234, 0.64); background: transparent; } .track-stage-switcher__tab[aria-selected='true'] { border-color: var(--gold); background: var(--gold); color: #0b0d10; } .stage-console, .track-cta { display: none !important; } .track-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--gold-border); border-radius: var(--radius-sm); color: var(--ink); font: 800 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: border-color 180ms ease, background-color 180ms ease; } .track-cta:hover { border-color: var(--gold); background: rgba(232, 195, 106, 0.1); } .track-cta__arrow { color: var(--gold); } .live-track:not(.live-track--esports) .track-cta { position: relative; isolation: isolate; min-height: 56px; gap: 14px; overflow: hidden; padding: 0 7px 0 0; border-color: rgba(232, 195, 106, 0.38); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)), rgba(8, 9, 10, 0.36); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .live-track:not(.live-track--esports) .track-cta::before { content: '00'; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 54px; border-right: 1px solid rgba(232, 195, 106, 0.22); background: linear-gradient(180deg, rgba(232, 195, 106, 0.14), rgba(232, 195, 106, 0.025)), rgba(0, 0, 0, 0.18); color: var(--gold); font: 800 17px/1 'IBM Plex Sans Condensed', sans-serif; letter-spacing: 0.03em; } .live-track.live-track--professional .track-cta::before { content: '01'; } .live-track.live-track--amateur .track-cta::before { content: '02'; } .live-track.live-track--fitness .track-cta::before { content: '03'; } .live-track#track-sports-medicine .track-cta::before { content: '05'; } .live-track:not(.live-track--esports) .track-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 34%); opacity: 0; transition: opacity 180ms ease; } .live-track:not(.live-track--esports) .track-cta__arrow { align-self: stretch; display: inline-grid; min-width: 44px; place-items: center; margin-left: 2px; border-left: 1px solid rgba(232, 195, 106, 0.2); border-radius: var(--radius-sm); background: rgba(232, 195, 106, 0.08); transition: background-color 180ms ease, transform 180ms ease; } .live-track:not(.live-track--esports) .track-cta:hover, .live-track:not(.live-track--esports) .track-cta:focus-visible { border-color: rgba(232, 195, 106, 0.72); background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)), rgba(8, 9, 10, 0.44); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(232, 195, 106, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: translateY(-2px); } .live-track:not(.live-track--esports) .track-cta:hover::after, .live-track:not(.live-track--esports) .track-cta:focus-visible::after { opacity: 1; } .live-track:not(.live-track--esports) .track-cta:hover .track-cta__arrow, .live-track:not(.live-track--esports) .track-cta:focus-visible .track-cta__arrow { background: rgba(232, 195, 106, 0.16); transform: translateX(2px); } .live-track--fitness .track-cta { border-radius: var(--radius-pill); } .track-num { color: var(--gold); font: 800 clamp(18px, 2vw, 30px) / 1 'IBM Plex Sans Condensed', sans-serif; } .track-title { margin: 14px 0 0; max-width: 640px; font: 700 var(--text-display) / 0.9 var(--font-display); letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; text-shadow: var(--track-title-edge); } .track-thesis { margin: 26px 0 0; max-width: 440px; color: var(--ink); font: 700 clamp(12px, 1.05vw, 16px) / 1.5 Manrope, sans-serif; letter-spacing: var(--ls-caps); text-transform: uppercase; } /* Launch */ .launch-top { display: flex; justify-content: flex-end; } .launch-head { margin-top: clamp(-46px, -6vh, -30px); } .leader-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); width: fit-content; max-width: 600px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); /* Лежит на кадре трека — настоящее стекло, рабочая ступень шкалы. */ background: var(--glass); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .leader-card:hover, .leader-card:focus-visible { border-color: rgba(232, 195, 106, 0.4); background: rgba(5, 6, 8, 0.72); } .leader-card--hinge-reveal { opacity: 0; filter: blur(7px); transform: perspective(1200px) rotateX(-72deg) translateY(38px); transform-origin: 50% 100%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity, filter; } .leader-card--hinge-reveal.is-hinge-revealed { animation: bottom-hinge-reveal 1450ms linear 0ms both; } .leader-card--hinge-reveal::after { content: ''; position: absolute; right: 14px; bottom: 9px; left: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 195, 106, 0.72), transparent); opacity: 0.72; pointer-events: none; } .fitness-duo .leader-card--hinge-reveal:nth-child(2), .esp-leaders-duo .leader-card--hinge-reveal:nth-child(2) { animation-delay: 120ms; } [data-stagger] { opacity: 1 !important; transform: none !important; filter: none !important; } @media (prefers-reduced-motion: no-preference) { [data-stagger] > * { opacity: 0; transform: translateY(68px) scale(0.972); filter: blur(9px); transition: opacity 1.05s var(--slab-ease), transform 1.15s var(--slab-ease), filter 1s var(--slab-ease); will-change: opacity, transform, filter; } [data-stagger].is-revealed > * { opacity: 1; transform: none; filter: none; } [data-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.1s; } [data-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.2s; } [data-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.3s; } [data-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.4s; } [data-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.5s; } } /* Зеркальная раскладка (любительский спорт): текст слева, фото справа */ .leader-card--reverse { grid-template-columns: minmax(0, 1fr) auto; } .leader-card--reverse .leader-card__photo { order: 2; } .leader-card--reverse .leader-card__body { order: 1; text-align: left; align-items: flex-start; } .leader-card__photo { width: 188px; height: 248px; border-radius: var(--radius-sm); overflow: hidden; display: block; } /* Launch: одиночная горизонтальная карточка — высота как у duo (fitness/esports) */ .stage-view[data-stage-view='launch'] .launch-bottom > .leader-card:not(.leader-card--vertical) { --leader-launch-h: clamp(300px, 38vh, 380px); min-height: var(--leader-launch-h); max-width: min(100%, 760px); align-items: stretch; padding: 16px; } .stage-view[data-stage-view='launch'] .launch-bottom > .leader-card:not(.leader-card--vertical) .leader-card__photo { width: calc((var(--leader-launch-h) - 32px) * 188 / 248); height: auto; min-height: 0; align-self: stretch; } .stage-view[data-stage-view='launch'] .launch-bottom > .leader-card:not(.leader-card--vertical) .leader-card__body { justify-content: center; padding: 12px 32px; } /* Любительский спорт: узкая карточка как у одиночных лидеров — длинный текст уходит вниз */ .live-track--amateur .stage-view[data-stage-view='launch'] .leader-card--reverse { max-width: min(100%, 560px); } .live-track--amateur .leader-card--reverse .leader-card__role { max-width: 240px; -webkit-line-clamp: 7; line-clamp: 7; min-height: 0; } /* Полная роль на десктопе, краткая — на мобиле (см. mobile-home.css) */ .live-track--amateur .leader-card__role-brief { display: none; } .leader-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Esports-карточки управляют цветом фото собственными lph/lpf-режимами */ .leader-card:not(.leader-card--esp-launch):is(:hover, :focus-visible) .leader-card__photo img { filter: none; } /* Заглушка-инициалы для лидера без загруженного фото. Нейтральная: отсутствие снимка — не повод для золота. */ .leader-card__photo--initials, .fitness-leader-card__photo--initials { display: grid; place-items: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), #11161b); color: rgba(244, 241, 234, 0.72); font: 800 clamp(40px, 6vw, 68px) / 1 var(--font-display, 'IBM Plex Sans Condensed', sans-serif); letter-spacing: -0.02em; } .leader-card__body { padding: 8px 28px; display: flex; flex-direction: column; justify-content: center; } .leader-card__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .leader-card__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--gold); box-shadow: 0 0 14px var(--gold); animation: live-pulse 2.4s ease-out infinite; } .leader-card:is(:hover, :focus-visible) .leader-card__dot, .fitness-leader-card:is(:hover, :focus-visible) .leader-card__dot, .sport-leader-card:is(:hover, :focus-visible) .leader-card__dot { animation: live-pulse-hot 0.7s ease-out infinite; } .leader-card__name { margin-top: 16px; font: 700 var(--text-h2) / 0.98 var(--font-display); letter-spacing: var(--ls-tight); } .leader-card__role { margin-top: 14px; max-width: 240px; color: var(--muted); font: 400 var(--text-sm)/1.5 var(--font-body); /* Должность — ровно две строки */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.9em; transition: color 180ms ease; } .leader-card:is(:hover, :focus-visible) .leader-card__role { color: var(--ink); } .leader-card__link { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .launch-bottom { margin-top: auto; padding-top: clamp(26px, 4vh, 52px); } /* Jury */ .compact-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(18px, 2vw, 32px); padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; } .compact-bar .track-cta { align-self: start; margin-top: 8px; } .jury-layout { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: end; } .stage-view[data-stage-view='jury'] .jury-layout { flex: 0 1 auto; width: 100%; } @media (min-width: 901px) { .stage-view[data-stage-view='jury'] { flex: 1; min-height: 0; } .stage-view[data-stage-view='jury'] .jury-layout { margin-top: auto; padding-top: clamp(40px, 5vh, 72px); } .jury-panel .expert-grid { grid-template-columns: repeat(4, minmax(160px, 200px)); width: 100%; max-width: none; justify-content: start; align-content: start; } .jury-panel .expert-card { width: 100%; max-width: 200px; } .jury-panel .expert-card__photo { height: 200px; } } .leader-card--vertical { display: flex; flex-direction: column; width: 100%; max-width: none; height: fit-content; align-self: end; grid-template-columns: none; border-radius: var(--radius-md); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); backdrop-filter: none; box-shadow: none; padding: 14px; } .leader-card--vertical:hover, .leader-card--vertical:focus-visible { border-color: rgba(232, 195, 106, 0.4); background: rgba(5, 6, 8, 0.72); } .leader-card--vertical::before { display: none; } .leader-card--vertical .leader-card__photo { width: 100%; height: 300px; flex: 0 0 auto; border-radius: var(--radius-sm); } .leader-card--vertical .leader-card__body { padding: 0; } .leader-card__rule { display: block; width: 34px; height: 2px; background: var(--gold); margin: 22px 0 14px; } .leader-card__caption { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; } .jury-panel { display: flex; flex-direction: column; height: fit-content; align-self: end; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; padding: 0; } .jury-panel .panel-title { margin-top: 0; } .panel-kicker { margin: 0; color: var(--gold); font: 800 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .panel-title { margin: 12px 0 0; font: 500 clamp(26px, 2.6vw, 40px) / 1 'IBM Plex Sans Condensed', sans-serif; letter-spacing: -0.01em; } .expert-grid { margin-top: clamp(18px, 2.5vh, 30px); display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 14px; align-items: start; align-content: start; grid-auto-rows: auto; } .expert-card { display: flex; flex-direction: column; height: auto; align-self: start; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03); padding: 14px; text-decoration: none; color: inherit; transition: border-color 180ms ease, background-color 180ms ease; } .expert-card:hover { border-color: rgba(232, 195, 106, 0.4); background: rgba(255, 255, 255, 0.06); } .expert-card__photo { width: 100%; height: 200px; flex: 0 0 auto; max-height: 200px; border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); color: rgba(244, 241, 234, 0.72); font: 700 28px/1 'IBM Plex Sans Condensed', sans-serif; } .expert-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1); } .expert-card:is(:hover, :focus-visible) .expert-card__photo img { filter: none; } .expert-card strong { margin-top: 14px; font: 600 16px/1.15 'IBM Plex Sans Condensed', sans-serif; color: var(--ink); } .expert-card__role, .expert-card > span:not(.expert-card__photo) { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; transition: color 180ms ease; } .expert-card:hover .expert-card__role, .expert-card:focus-visible .expert-card__role, .expert-card:hover > span:not(.expert-card__photo), .expert-card:focus-visible > span:not(.expert-card__photo) { color: var(--ink); } /* Nominees */ .nominees-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(18px, 2vw, 32px); } .nominees-head__num { font: 700 clamp(70px, 9vw, 150px) / 0.78 'IBM Plex Sans Condensed', sans-serif; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgba(232, 195, 106, 0.7); } .nominees-head__body { padding-top: 8px; } .nominees-head__title { margin: 0; font: 600 var(--text-h2) / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; } .nominees-head__thesis { margin: 14px 0 0; max-width: 430px; color: var(--muted); font-size: var(--text-md); line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; } .nominees-panel { margin-top: clamp(18px, 3vh, 34px); display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; padding: 0; } .stage-view[data-stage-view='nominees'] { flex: 0 1 auto; } .stage-view[data-stage-view='nominees'] .nominees-panel { flex: 0 1 auto; } .nominee-grid { margin-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(18px, 2vw, 28px); align-items: stretch; } .nominee-col { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 100%; padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.045); overflow: visible; } .nominee-col__head { display: flex; align-items: flex-start; } .nominee-col__tag { display: inline-flex; align-items: center; padding: 11px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: rgba(232, 195, 106, 0.14); color: #f6e0a0; font: 800 var(--text-xs)/1.15 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .nominee-rows { margin: clamp(20px, 2.4vh, 28px) 0 0; padding: 0; list-style: none; } .nominee-rows li { position: relative; } .nominee-rows li:has(.nominee-detail:not([hidden])) { z-index: 2; } .nominee-row-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; cursor: pointer; text-align: left; color: rgba(244, 241, 234, 0.92); font: 600 clamp(16px, 1.35vw, 19px) / 1.35 Manrope, sans-serif; transition: color 180ms ease; } .nominee-row-btn[aria-expanded='true'] { color: var(--ink); } .nominee-row-btn__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex: 0 0 auto; background: rgba(232, 195, 106, 0.6); transition: background-color 180ms ease, box-shadow 180ms ease; } .nominee-row-btn[aria-expanded='true'] .nominee-row-btn__dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); } .nominee-row-btn__sign { margin-left: auto; flex: 0 0 auto; color: rgba(244, 241, 234, 0.45); font-size: 20px; line-height: 1; transition: transform 180ms ease; } .nominee-row-btn[aria-expanded='true'] .nominee-row-btn__sign { transform: rotate(45deg); } .nominee-detail { margin: 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: rgba(232, 195, 106, 0.06); animation: fade-in 240ms ease both; } .nominee-detail:not([hidden]) { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; /* Раскрытая деталь номинанта перекрывает кадр целиком — плотная подложка, блюр под ней уже ничего не даёт. */ background: rgba(14, 13, 11, 0.94); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); } .nominee-rows li:last-child .nominee-detail:not([hidden]) { top: auto; bottom: 100%; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5); } .nominee-detail[hidden] { display: none; } .nominee-detail__meta { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .nominee-detail__meta-dot { width: 3px; height: 3px; border-radius: var(--radius-pill); background: rgba(232, 195, 106, 0.6); } .nominee-detail p { margin: 10px 0 0; color: rgba(244, 241, 234, 0.72); font: 400 13px/1.5 var(--font-body); } .nominee-detail a { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; } .nominee-col__more { margin-top: auto; padding-top: clamp(18px, 2.2vh, 26px); display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font: 800 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; } .nominees-footer { margin-top: clamp(28px, 4vh, 44px); display: flex; align-items: center; justify-content: center; padding-top: clamp(24px, 3.5vh, 36px); border-top: 1px solid var(--line); } .nominees-total { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; } .nominees-total--cta { align-self: start; margin-top: 2px; padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px); border: 1px solid rgba(232, 195, 106, 0.55); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(232, 195, 106, 0.16), rgba(232, 195, 106, 0.05)); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } .nominees-total--cta:hover { border-color: var(--gold); background: rgba(232, 195, 106, 0.2); } .nominees-total__num { font: 700 clamp(44px, 4.8vw, 72px) / 0.8 'IBM Plex Sans Condensed', sans-serif; color: var(--gold); letter-spacing: -0.03em; } .nominees-total__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .nominees-total__label { color: rgba(244, 241, 234, 0.78); font: 800 var(--text-xs)/1.35 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .nominees-total__go { color: var(--gold); font: 900 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .council { display: flex; flex-direction: column; gap: 18px; min-width: 0; width: 100%; align-items: center; text-align: center; } .council__label { color: #f6e0a0; font: 800 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .council-carousel { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .council-carousel::-webkit-scrollbar { display: none; } .council-carousel__track { display: flex; justify-content: safe center; gap: 14px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px 16px 8px; } .council-card { flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: row; align-items: center; gap: 12px; width: clamp(228px, 20vw, 276px); min-height: 64px; padding: 9px 14px 9px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(232, 195, 106, 0.12), rgba(232, 195, 106, 0.04)); text-decoration: none; color: inherit; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; } .council-card:hover { border-color: rgba(232, 195, 106, 0.55); background: rgba(232, 195, 106, 0.12); transform: translateY(-1px); } .council-card__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-pill); overflow: hidden; border: 1.5px solid rgba(232, 195, 106, 0.52); display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: rgba(244, 241, 234, 0.82); font: 700 14px/1 'IBM Plex Sans Condensed', sans-serif; } .council-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .council-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; } .council-card__name { color: rgba(244, 241, 234, 0.94); font: 600 13px/1.25 Manrope, sans-serif; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .council-card__role { color: rgba(244, 241, 234, 0.56); font: 400 12px/1.35 var(--font-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .track-cta--emphasis { min-height: 52px; padding: 0 26px; border-radius: var(--radius-sm); background: rgba(232, 195, 106, 0.08); font-size: var(--text-xs); letter-spacing: var(--ls-caps); } .track-cta--emphasis:hover { background: rgba(232, 195, 106, 0.16); } /* Final */ .final-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .final-id { margin-top: 0; display: flex; align-items: baseline; gap: clamp(14px, 1.8vw, 28px); } .final-id__num { font: 800 clamp(48px, 7vw, 104px) / 0.82 'IBM Plex Sans Condensed', sans-serif; letter-spacing: -0.04em; background: linear-gradient(180deg, #f6e0a0, #bd8c34); -webkit-background-clip: text; background-clip: text; color: transparent; } .final-id__title { margin: 0; font: 700 var(--text-h1) / 0.9 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; } .final-thesis { margin: 18px 0 0; max-width: 430px; color: var(--muted-soft); font: 400 var(--text-md) / 1.55 var(--font-body); text-transform: none; letter-spacing: 0; } .winners-panel { flex: 1; margin-top: clamp(56px, 10vh, 96px); } .winner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); align-items: stretch; } .winner-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; min-height: 100%; padding: clamp(20px, 1.8vw, 28px) clamp(16px, 1.6vw, 22px) clamp(22px, 2vw, 30px); border: 1px solid rgba(232, 195, 106, 0.4); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(34, 28, 15, 0.62), rgba(12, 11, 9, 0.72)); } .winner-card::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 224, 160, 0.95), transparent); } .winner-card__wreath { position: relative; width: 122px; height: 104px; display: block; flex: 0 0 auto; } .winner-card__wreath svg { position: absolute; inset: 0; } .stage-view[data-stage-view='final'] .winner-card__wreath svg path { stroke-dasharray: 120; animation: wreath-draw 900ms ease both; animation-delay: 420ms; } .stage-view[data-stage-view='final'] .winner-card__wreath svg g[fill] { animation: fade-soft 760ms ease both; animation-delay: 760ms; } .stage-view[data-stage-view='final'] .winner-card__avatar { animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 520ms; } .winner-card__avatar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border-radius: var(--radius-pill); border: 1.5px solid rgba(232, 195, 106, 0.6); overflow: hidden; background: rgba(232, 195, 106, 0.06); } .winner-card__avatar img, .winner-card__avatar span { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font: 700 22px/1 'IBM Plex Sans Condensed', sans-serif; color: rgba(244, 241, 234, 0.8); } .winner-card__tag { margin-top: 14px; color: var(--gold); font: 900 var(--text-2xs)/1.4 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; } .winner-card__name { margin-top: 14px; min-height: calc(2 * 1.05em); font: 700 var(--text-h3) / 1.05 var(--font-display); color: #f6f2ea; letter-spacing: var(--ls-tight); } .winner-card__rule { width: 24px; height: 2px; background: var(--gold); margin: 16px 0; flex: 0 0 auto; } .winner-card__desc { flex: 1; width: 100%; color: rgba(244, 241, 234, 0.6); font: 400 13px/1.55 var(--font-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* ---- Золотые шевроны перехода на страницу трека ---- Ссылка стоит первым элементом в h1: при top:auto абсолютный элемент остаётся на статической позиции первой строки заголовка. Containing block — контейнер заголовка (у него transform от анимации rise), поэтому контейнеры заголовков растянуты на всю ширину контента, а right/left: 0 прижимает шеврон к краю секции. */ .track-open { position: absolute; right: 0; z-index: 5; display: inline-flex; align-items: stretch; gap: 0.12em; height: 0.72em; text-decoration: none; transform: translateY(0.1em); transition: gap 280ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* Заголовок справа (зеркальные секции) — шеврон слева и смотрит влево */ .live-track--mirror .track-open, .live-track--esports .track-open { right: auto; left: 0; transform: translateY(0.1em) scaleX(-1); } .track-open__chev { flex: none; width: 0.4em; height: 100%; clip-path: polygon(0 0, 42% 0, 100% 50%, 42% 100%, 0 100%, 58% 50%); background-image: linear-gradient( 105deg, var(--gold) 0%, var(--gold) 28%, rgb(255, 228, 150) 40%, rgb(255, 245, 210) 46%, #ffffff 50%, rgb(255, 245, 210) 54%, rgb(255, 228, 150) 60%, var(--gold) 72%, var(--gold) 100% ); background-size: 280% 100%; background-position: 120% 50%; /* Проход ~0.45s; короче пауза между проходами */ animation: track-open-shimmer 1.1s cubic-bezier(0.45, 0, 0.25, 1) infinite; } .track-open__chev:nth-child(2) { animation-delay: 0.08s; } .track-open__chev:nth-child(3) { animation-delay: 0.16s; } /* Скорость блика та же (~0.45s), меняется только пауза */ @keyframes track-open-shimmer { 0% { background-position: 120% 50%; } 41% { background-position: -20% 50%; } 41.01%, 100% { background-position: 120% 50%; } } @keyframes track-open-shimmer-hot { 0% { background-position: 120% 50%; } 60% { background-position: -20% 50%; } 60.01%, 100% { background-position: 120% 50%; } } .track-open:hover, .track-open:focus-visible { gap: 0.34em; } .track-open:hover .track-open__chev, .track-open:focus-visible .track-open__chev { animation-name: track-open-shimmer-hot; animation-duration: 0.75s; animation-delay: 0s; } .track-open:hover .track-open__chev:nth-child(2), .track-open:focus-visible .track-open__chev:nth-child(2) { animation-delay: 0.06s; } .track-open:hover .track-open__chev:nth-child(3), .track-open:focus-visible .track-open__chev:nth-child(3) { animation-delay: 0.12s; } @media (prefers-reduced-motion: reduce) { .track-open { transition: none; } .track-open__chev { animation: none; } }