/* Bebas Neue с русскими буквами (Fontfabric, SIL OFL 1.1 — fonts/OFL.txt). Файл лежит в ПРИЛОЖЕНИЕ/fonts/ и уходит на сервер вместе с сайтом; какой шрифт где — настройки в base/format-tokens.css. */ @font-face{ font-family:'Bebas Neue Cyrillic'; src:url(/fonts/BebasNeue-Bold.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* ===== Палитра клуба: один цвет на один смысл ===== Все кнопки и списки берут цвет отсюда. Поменял здесь — поменялось везде. -1 верх, -2 низ, -ink текст на нём (контраст не ниже 4,5:1), -line рамка и надписи на тёмном фоне. */ :root{ /* Главное действие: записаться, подтвердить. Тона глубокие, приглушённые; зелёный — яркий */ --fh-gold-1:#E8C667; --fh-gold-2:#B8892A; --fh-gold-ink:#151B4D; /* Готово: записан, участвую, подтвердил */ --fh-ok-1:#0EAA0E; --fh-ok-2:#005C00; --fh-ok-ink:#FFFFFF; --fh-ok-line:#6FDC95; /* Ожидание: мест нет — запись в лист ожидания, уже в листе */ --fh-wait-1:#5E449E; --fh-wait-2:#3A2868; --fh-wait-ink:#FFFFFF; --fh-wait-line:#C2A6F7; /* Закрыто, отказ */ --fh-bad-1:#9C2B2B; --fh-bad-2:#601818; --fh-bad-ink:#FFFFFF; /* Фирменный синий: приглашение */ --fh-brand-1:#2A4E9C; --fh-brand-2:#142B60; --fh-brand-ink:#FFFFFF; --fh-brand-line:rgba(105,120,235,0.45); /* Второстепенное: описание, списки — серый #BDBDBD на 20%, сквозь него видна афиша */ --fh-quiet-1:rgba(189,189,189,0.2); --fh-quiet-2:rgba(189,189,189,0.2); --fh-quiet-ink:#FFFFFF; --fh-quiet-line:rgba(255,255,255,0.38); /* Тень цветных кнопок: спокойная, без свечения */ --fh-btn-shadow:0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.16); } :root{ --fmt-month-bg: url("/img/img-02.webp"); --fmt-season-bg: url("/img/img-03.webp"); --fmt-year-bg: url("/img/img-04.webp"); --fmt-learn-bg: url("/img/img-05.jpeg"); /* ОФОРМЛЕНИЕ ФОРМАТОВ. У каждой карточки формата (лента, афиша, «Форматы», окно) свои переменные: --fc — цвет формата, --fc-hi — светлее (начало градиента чёлки), --fc-tint — светлый для надписей, --fc-ink — цвет текста поверх цвета, --fmt-bg — фон; --accent — тот же цвет для полуобода (его перекрашивают состояния «идёт»/«рег. закрыта»). Ставит их app.js (fhLookApply / fhLookVars) из оформления формата, заданного в админке; класс fl-full — рамка «обводка», без него — «полуобод». Ниже — те же цвета у финалов на весь сайт (рейтинг, окна финалистов, итоги, окно игрока): это стандартные, app.js заменяет их заданными в админке (fhApplyRoleVars). */ --c-month:#E8B03C; --c-month-hi:#EFC877; --c-month-tint:#F2D494; --c-month-ink:#14161C; --c-season:#E08CFF; --c-season-hi:#E9AFFF; --c-season-tint:#EEC0FF; --c-season-ink:#FFFFFF; --c-year:#3AA0FF; --c-year-hi:#75BDFF; --c-year-tint:#93CBFF; --c-year-ink:#FFFFFF; /* Стандартный фон карточек финалов и обучения — их фирменные картинки (у остальных — синий клуба). */ --fbg-month: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)), var(--fmt-month-bg) center/cover no-repeat; --fbg-season: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--fmt-season-bg) center/cover no-repeat; --fbg-year: var(--fmt-year-bg) center/cover no-repeat; --fbg-learn: var(--fmt-learn-bg) center/cover no-repeat; } :root{ /* ROYAL FULLHOUSE — палитра выверена по фирменным афишам дизайнера (#0F2E73 / #C8A855) */ --royal-top:#1A48B0; --royal-mid:#15358A; --royal-bot:#040F32; --royal-flat:#12368E; --theme-radial-inner:#163F98; --theme-radial-outer:#02081A; --glass-tint:105,120,235; --shadow-tint:1,6,18; --card-glass:55,78,185; --card-glass-a:0.34; --card-border-glow:105,120,235; --card-border-a:0.35; --card-tint:55,78,185; --card-tint-a:0.2; --profile-accent:#6B75E8; --gold:#E8B03C; --gold-light:#F0C45A; --theme-active-icon:#6B75E8; --theme-past-icon:#6A8BB8; --theme-border-accent:105,120,235; --ink-dim:#C0C0EC; --line:rgba(255,255,255,0.17); --radius-mult:1; /* Шрифты сайта — две настройки: текст и заголовки (заглавные, цифры, кнопки, даты, теги). Все правила берут их отсюда; новый шрифт ставится одной строкой. */ --theme-font:'Inter',sans-serif; --theme-hdg-font:'Bebas Neue Cyrillic','Bebas Neue',sans-serif; } /* ===== ТЕМЫ: каждая тема — цветовой фильтр поверх всего телефона (ничего не может «остаться синим») + своя форма и слой текстуры. ===== */ /* ===== Темы интерфейса (только фон / glass / иконки записи) ===== НЕ трогаем: обучение, финалы месяца/года/сезона, их окна, белые элементы. */ /* ===== 5 тем: палитра выверена по HSL фирменных афиш дизайнера — единая насыщенность/светлота у всех тем, чтобы ни одна не «перебивала» другие ===== */ .screen[data-theme-id="brand"], html[data-theme-id="brand"], .phone[data-theme-id="brand"]{ --royal-top:#1A48B0; --royal-mid:#15358A; --royal-bot:#040F32; --royal-flat:#12368E; --theme-radial-inner:#163F98; --theme-radial-outer:#02081A; --glass-tint:105,120,235; --shadow-tint:1,6,18; --card-glass:55,78,185; --card-glass-a:0.44; --card-border-glow:105,120,235; --card-border-a:0.75; --card-tint:55,78,185; --card-tint-a:0.22; --profile-accent:#6B75E8; --theme-active-icon:#6B75E8; --theme-past-icon:#6A8BB8; --theme-border-accent:105,120,235; --gold:#E8B03C; --gold-light:#F0C45A; } .screen[data-theme-id="opal"], html[data-theme-id="opal"], .phone[data-theme-id="opal"]{ /* Чёрный опал — премиум */ --royal-top:#1a1a1c; --royal-mid:#0c0c0e; --royal-bot:#050506; --royal-flat:#121214; --theme-radial-inner:#1c1c1f; --theme-radial-outer:#030304; --glass-tint:180,180,185; --shadow-tint:0,0,0; --card-glass:18,18,20; --card-glass-a:0.82; --card-border-glow:140,140,145; --card-border-a:0.55; --card-tint:12,12,14; --card-tint-a:0.5; --profile-accent:#c8c8cc; --theme-active-icon:#e8e8ea; --theme-past-icon:#5a5a60; --theme-border-accent:120,120,125; --gold:#c9a227; --gold-light:#d4b84a; } .screen[data-theme-id="ruby"], html[data-theme-id="ruby"], .phone[data-theme-id="ruby"]{ --royal-top:#BF182B; --royal-mid:#750F1B; --royal-bot:#3C070D; --royal-flat:#942935; --theme-radial-inner:#A51D2D; --theme-radial-outer:#1C0205; --glass-tint:246,85,104; --shadow-tint:28,2,5; --card-glass:191,24,43; --card-glass-a:0.32; --card-border-glow:246,85,104; --card-border-a:0.75; --card-tint:191,24,43; --card-tint-a:0.22; --profile-accent:#F4344A; --theme-active-icon:#FA384E; --theme-past-icon:#A67A80; --theme-border-accent:246,85,104; --gold:#E8B03C; --gold-light:#F0C45A; } .screen[data-theme-id="emerald"], html[data-theme-id="emerald"], .phone[data-theme-id="emerald"]{ --royal-top:#14A252; --royal-mid:#0C6332; --royal-bot:#063319; --royal-flat:#237E4A; --theme-radial-inner:#188C4B; --theme-radial-outer:#021C0E; --glass-tint:72,209,132; --shadow-tint:2,28,14; --card-glass:20,162,82; --card-glass-a:1; --card-border-glow:72,209,132; --card-border-a:0.75; --card-tint:20,162,82; --card-tint-a:0.22; --profile-accent:#2CCF73; --theme-active-icon:#2FD577; --theme-past-icon:#64937C; --theme-border-accent:72,209,132; --gold:#E8B03C; --gold-light:#F0C45A; } /* Тема → профиль: рамки/подложки в цвет темы; иконки — как в фирменной (не перекрашиваем) */ .settings-slim-btn{ border-color: rgba(var(--theme-border-accent), 0.5) !important; background: rgba(var(--glass-tint), 0.22) !important; } .contacts-tile{ border-color: rgba(var(--theme-border-accent), 0.35) !important; background: rgba(var(--glass-tint), 0.18) !important; } .stat-card{ border-color: rgba(212, 175, 55, 0.38) !important; } #tab-profile .profile-contacts-tile, #tab-profile .big-tile.profile-contacts-tile{ background: linear-gradient(165deg, rgba(var(--glass-tint), 0.18) 0%, transparent 45%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; border: 1.5px solid rgba(var(--theme-border-accent), 0.45) !important; } #tab-profile .settings-slim-btn{ background: linear-gradient(165deg, rgba(var(--glass-tint), 0.18) 0%, transparent 45%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; border-color: rgba(var(--theme-border-accent), 0.5) !important; } .profile-head{ background: transparent !important; } #structure-modal .ir-action-btn, #structure-modal #ir-idea-btn, #structure-modal #ir-review-btn{ opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } #structure-modal .ir-action-btn::before, #structure-modal .ir-action-btn::after, #structure-modal #ir-idea-btn::before, #structure-modal #ir-review-btn::before{ display: none !important; content: none !important; } /* Кристальная глубина: без белой пелены, сочные карты */ .week-card::after{ background: none !important; opacity: 0 !important; } .map-card::before{ /* тонирование темы, без белого */ background: rgba(var(--glass-tint), 0.4) !important; mix-blend-mode: multiply !important; opacity: 0.55 !important; } .map-card::after{ background: rgba(var(--theme-border-accent), 0.18) !important; mix-blend-mode: soft-light !important; opacity: 0.7 !important; } .phone, .screen{ overscroll-behavior-y: auto; background-color: transparent; /* чуть больше сочности на весь интерфейс темы */ --card-border-a: 0.65; } /* 4 плитки: тёмный цвет ТЕМЫ (не чёрные), цифры/заголовки как в статистике */ #tab-profile .big-tile{ opacity: 1 !important; background: /* ещё −44% яркости фона, оттенок темы сохраняется */ linear-gradient(165deg, rgba(0,0,0,0.44), rgba(0,0,0,0.44)), linear-gradient(165deg, rgba(var(--glass-tint), 0.10) 0%, rgba(var(--glass-tint), 0.03) 40%, transparent 70%), linear-gradient(165deg, var(--royal-bot) 0%, var(--royal-mid) 55%, var(--royal-bot) 100%) !important; border: 1px solid rgba(var(--theme-border-accent), 0.28) !important; box-shadow: 0 3px 0 rgba(var(--shadow-tint), 0.55), 0 8px 14px rgba(var(--shadow-tint), 0.35), inset 0 1px 0 rgba(var(--glass-tint), 0.1) !important; } #tab-profile .big-tile, #tab-profile .big-tile *{ filter: none !important; } /* Заголовки плиток — обычный светлый текст, без золота и тени. Золото остаётся только на значениях (см. правило ниже). */ #tab-profile .big-tile .bt-head, #tab-profile .big-tile .bt-head.hdg, #tab-profile .big-tile .hdg{ color: rgba(255,255,255,0.86) !important; text-shadow: none; opacity: 1 !important; } /* как цифры статистики — золотой акцент, только сами значения */ #tab-profile .big-tile .bt-val, #tab-profile .big-tile b{ color: #E8B03C !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4); opacity: 1 !important; } #tab-profile .big-tile .bt-row, #tab-profile .big-tile .bt-label, #tab-profile .big-tile span, #tab-profile .big-tile .contacts-tile-label{ color: rgba(255,255,255,0.78) !important; opacity: 1 !important; } #tab-profile .settings-slim-btn{ filter: none !important; opacity: 1 !important; } .hdg{ font-family: var(--theme-hdg-font); } *{box-sizing:border-box; margin:0; padding:0;} html, body{ overscroll-behavior-y:auto; overscroll-behavior-x:none; overflow-x:hidden; overflow-y:auto; } :root{ --fh-app-max: min(1180px, 100%); --fh-bn-h: 80px; --fh-safe-b: env(safe-area-inset-bottom, 0px); --fh-bn-gap: 20px; --fh-safe-t: env(safe-area-inset-top, 0px); --fh-top-h: 100px; --fh-press-t: scale(0.96) translateY(1px); --fh-press-f: none; } body{ background: var(--theme-radial-outer, #021033); font-family:var(--theme-font); overscroll-behavior-y:auto; } a{color:inherit; text-decoration:none;} button{font-family:inherit;} .hdg{ font-weight:400; letter-spacing:0.04em;} /* Афиша героя: не переносить слово посередине (было видно на "ПЯТНИЧНЫЙ" и "ПРОГРЕССИВ" на узких экранах) — целиком на новую строку, а не рвать слово. Сколько строк — решает fhWordWrapTitle (максимум 2, см. JS). */ #hero-title{ word-break: keep-all; overflow-wrap: normal; } svg.ico{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} /* Универсальная оболочка: колонка до 1180px, якорь .phone. */ .phone{ transition: none; position: relative; width:100%; min-height:100vh; min-height:100dvh; min-height:100svh; background: radial-gradient(circle at 50% 35%, var(--theme-radial-inner) 0%, var(--royal-mid) 55%, var(--theme-radial-outer) 100%); isolation: isolate; border-radius:0; overscroll-behavior:none; box-shadow:none; color:#fff; display:flex; flex-direction:column; } .phone, .screen{ max-width:100%; min-width:0; box-sizing:border-box; } @media (min-width:481px){ .phone{ box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 28px 70px rgba(0,0,0,0.45); } } /* ФОН — ровный фирменный синий, как на промо-карточках клуба */ .bg-fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .bg-fx .glow-gold{ position:absolute; top:-140px; right:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(212,175,90,0.22), rgba(212,175,90,0) 70%); } .bg-fx .glow-deep{ position:absolute; bottom:-180px; left:-140px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, rgba(2,35,90,0.75), rgba(2,35,90,0) 72%); } /* продление фона ВВЕРХ (~2× шапки) той же палитрой — без затемнения экрана */ .phone::before{ content:""; position:absolute; left:0; right:0; top: calc(var(--fh-top-h) * -2); height: calc(var(--fh-top-h) * 2); z-index:0; pointer-events:none; background: radial-gradient(circle at 50% 100%, var(--theme-radial-inner) 0%, var(--royal-mid) 55%, var(--theme-radial-outer) 100%); } .notch-eyebrow{ position:absolute; top:0; left:0; right:0; height:var(--fh-safe-t); background: var(--royal-top, #1A48B0); z-index:41; pointer-events:none; } /* ШАПКА — общая, перекрашивается по вкладке через data-theme на .phone (без перехода — без вспышки) */ .topbar{ position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--fh-app-max, min(1180px, 100%)); z-index:40; display:flex; align-items:center; justify-content:space-between; /* Обычный Safari сам отодвигает контент от чёлки/часов своей строкой адреса. Но когда сайт открыт как отдельное «приложение» с экрана Домой (без строки Safari, статус-бар «black-translucent» лежит поверх контента) — без этого запаса шапка уезжает под часы и чёлку, и кнопки там физически не нажимаются. env(...) возвращает 0 в обычном Safari, так что там ничего не меняется — это добавка только для отдельного «приложения» на iPhone. */ padding:calc(8px + var(--fh-safe-t)) 16px 6px; gap:10px; /* как «после скролла» на главной: цвет темы, без белого тумана и без чернил */ background: linear-gradient(180deg, rgba(var(--shadow-tint), 0.45) 0%, rgba(var(--shadow-tint), 0.28) 100%), linear-gradient(180deg, var(--royal-top) 0%, var(--royal-mid) 100%); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid rgba(var(--card-border-glow, var(--theme-border-accent)), 0.15); box-shadow: 0 6px 16px rgba(0,0,0,0.18); pointer-events: auto; } .topbar > *{ position:relative; z-index:2; } /* HOME: шапка + афиша — одна поверхность; затемнение шапки только при скролле */ .phone[data-theme="home"] .topbar{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; } .phone[data-theme="home"] .topbar::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(var(--shadow-tint), 0.45) 0%, rgba(var(--shadow-tint), 0.28) 100%), linear-gradient(180deg, var(--royal-top) 0%, var(--royal-mid) 100%); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: var(--glass-o, 0); border-bottom: 1px solid rgba(var(--card-border-glow, var(--theme-border-accent)), calc(0.15 * var(--glass-o, 0))); box-shadow: 0 6px 16px rgba(0,0,0, calc(0.18 * var(--glass-o, 0))); transition: none; /* без вспышек — только opacity от скролла */ } /* тот же радиал, что у сайта — не плоская заливка (она давала «полосу») */ .phone[data-theme="home"]{ background: radial-gradient(circle at 50% 35%, var(--theme-radial-inner) 0%, var(--royal-mid) 55%, var(--theme-radial-outer) 100%) !important; } .phone[data-theme="home"] .screen{ background: transparent; } .phone[data-theme="home"] .home-top-zone{ /* фон афиши стыкуется с шапкой без шва */ border-radius: 0 0 24px 24px; } /* continuous surface under header+hero — плоский фон (телефон уже плоский под ним), без слоёного радиального «супа» */ .home-top-zone{ margin: calc(var(--fh-top-h) * -1) 0 4px; padding: var(--fh-top-h) 0 15px; position: relative; border-radius: 0 0 24px 24px; pointer-events: none; /* верхний отступ — просто фон-подложка под шапку, не должен перехватывать клики по .me-bar, который физически лежит под ним */ } .home-top-zone .hero-card{ pointer-events: auto; /* сама афиша и её кнопки кликабельны */ } .home-top-zone .hero-card{ /* Экран целиком на масштабе 80%, афише нужно 100%: zoom 1.0/0.8 = 1.25. Отступы поделены на то же число, чтобы визуально остались 12/12/6. */ zoom: 1.25; margin-left: 9.6px; margin-right: 9.6px; margin-top: 4.8px !important; /* как плитки О клубе/Правила, синий ~+10% насыщеннее */ background: var(--fmt-bg, var(--royal-mid)) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1.5px solid rgba(255,255,255,0.28); border-radius: 18px; box-shadow: 0 20px 48px rgba(var(--shadow-tint), 0.78), 0 10px 20px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.32) inset, 0 -2px 10px rgba(0,0,0,0.2) inset; overflow: hidden; transform: translateZ(0); transition: box-shadow 0.55s ease, border-color 0.45s ease, transform 0.35s ease; } /* Статичная рамка + обычная тень для сегодняшней карточки — без дыхания. */ .home-top-zone .hero-card.is-today:not(.is-started-open):not(.is-reg-closed-red){ border-color: rgba(160, 170, 245, 0.72); box-shadow: 0 0 0 1.5px rgba(195, 185, 250, 0.7), 0 20px 48px rgba(var(--shadow-tint), 0.78), 0 1px 0 rgba(255,255,255,0.22) inset; } .hero-card .hero-accent-bar{ position: absolute; top: 0; left: 0; right: 0; height: 7.99px; background: var(--accent, var(--gold)); border-radius: calc(18px * var(--radius-mult)) calc(18px * var(--radius-mult)) 0 0; z-index: 5; pointer-events: none; } /* Блеск по чёлке — работает всегда, пока турнир не прошёл (сегодня или ещё впереди), не только «сегодня». Бег по ободу (ниже, другое правило) остаётся отдельно, только для сегодняшнего дня — так и отличаем «идёт/скоро» от «именно сегодня» одним взглядом, без дублирования одного и того же эффекта в двух местах. */ .hero-card:not(.is-past-hero) .hero-accent-bar{ overflow: hidden; } .hero-card:not(.is-past-hero) .hero-accent-bar::after{ content: ''; position: absolute; top: 0; left: -40%; width: 34%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent); animation: chelkaSweep 10s linear infinite; } @keyframes chelkaSweep{ 0%, 66% { left: -40%; opacity: 0; } 70% { opacity: 1; } 84% { left: 106%; opacity: 1; } 88%, 100% { left: 106%; opacity: 0; } } .brand-lockup{ display:flex; align-items:center; flex: 0 1 55%; min-width:0; } .brand-img{ height: 68px; width: auto; max-width: 100%; display:block; object-fit: contain; object-position: left center; margin-left: 6px; position: relative; left: -1px; top: -2px; } .topbar-right{ display:flex; flex-direction:row; align-items:flex-start; gap:5px; flex-shrink:0; position: relative; right: 2px; } .soc-and-city{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top: 1px; } .soc-row{ display:flex; align-items:center; justify-content:center; gap:6px; width: 100%; } .soc{ width:29.16px; height:29.16px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: transparent; border: none; color: #fff; box-shadow: none; outline: none; position: relative; left: -1px; -webkit-tap-highlight-color: transparent; } .soc:active{ opacity: 0.7; } .soc svg{ display:block; width:22px; height:22px; } .soc img{ display:none; } .soc-hub{ display:inline-flex; align-items:center; justify-content:center; height:28.43px; padding:0 11.7px; min-width: calc(3 * 29.16px * 1.1 * 0.975); box-sizing: border-box; border-radius:9px; border: 1.5px solid #fff; background: transparent; color: #fff; font-size: 11.2px; font-weight: 750; letter-spacing: 0.02em; text-decoration:none; white-space:nowrap; line-height:1; } .bell{ /* колокольчик слева от «соцсетей/города», в 1,5 раза крупнее прежнего (34.7 → 52) */ width:52px; height:52px; border-radius:16px; flex-shrink:0; background:#050505; border:1px solid rgba(186,230,255,0.55); display:flex; align-items:center; justify-content:center; position:relative; align-self:center; cursor:pointer; } .bell svg{width:21.63px; height:21.63px; stroke-width:1.7; transition:width 0.2s ease, height 0.2s ease, filter 0.2s ease; filter: drop-shadow(0 0 3px rgba(180,230,255,0.9));} .bell.has-unread{ box-shadow: 0 0 10px rgba(160,220,255,0.7); } .bell.has-unread svg{ width:32.45px; height:32.45px; } .bell.has-club{ background: #2D2DD6; border-color: #2D2DD6; box-shadow: 0 0 10px rgba(45,45,214,0.7); } .bell.has-reply{ background: #008000; border-color: #008000; box-shadow: 0 0 10px rgba(0,128,0,0.7); } .bell .dot{ position: absolute; top: -4px; right: -4px; left: auto; transform: none; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background-color: #ff3b30; color: #ffffff; font-family: -apple-system, 'Inter', sans-serif; font-size: 11px; font-weight: 700; line-height: 1; border-radius: 14px; border: none; text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,0.35); } .city-select{ display:inline-flex; align-items:center; gap:3px; flex-shrink:0; font-size:15.2px; color:#fff; font-weight:600; padding:6.6px 13.2px 6.6px 14.3px; background: #111C35; border:1px solid #2EB3AF; border-radius:11.5px; margin-left: -1px; } .city-select .chev{ font-size:15.2px; color:var(--gold-light); margin-left:1px; } .city-select.city-solo{ pointer-events:none; } .city-select.city-solo .chev{ display:none; } /* ОБЛАСТЬ ПРОКРУТКИ — один фон (bg-fx) на всех вкладках */ .screen{ flex:1; overflow:visible; overscroll-behavior-y:auto; /* Тот же запас под чёлку/часы, что и у шапки выше — иначе на отдельном «приложении» с экрана Домой контент под шапкой начинался бы слишком рано и заезжал ей под низ. */ padding-top: calc(var(--fh-top-h) + var(--fh-safe-t)); padding-bottom: calc(var(--fh-bn-h) + var(--fh-safe-b) + var(--fh-bn-gap)); position:relative; z-index:1; /* прозрачный: виден фон .phone; сверху дорисовывает ::before */ background: transparent; } .screen::-webkit-scrollbar{display:none;} .tab-panel{ display:none; } .tab-panel.active{ display:block; } .section{padding:7px 20px 0;} .photo-opt-label{display:none!important;} /* Плашка игрока на главной: тот же синий «стеклянный» вид, что у кнопок-плиток под ней */ .me-bar{display:flex; align-items:center; gap:12px; padding:12px 14px; margin:14px 16px 0; border-radius:15px; background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.01) 70%), linear-gradient(165deg, rgba(25,115,240,0.42) 0%, rgba(12,85,210,0.34) 55%, rgba(8,55,170,0.28) 100%), var(--royal-flat); border:1px solid rgba(58,160,255,0.55); box-shadow: inset 0 2px 0 rgba(255,255,255,0.22), inset 0 -10px 16px rgba(0,0,0,0.38), 0 0 10px rgba(58,160,255,0.22), 0 6px 0 rgba(0,0,0,0.45);} #me-bar .me-ava,.me-ava{width:51px; height:51px; border-radius:50%; flex-shrink:0; overflow:hidden; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.45);} .me-ava img{width:100%; height:100%; object-fit:cover; display:block;} .me-main{flex:1; min-width:0;} .me-row1{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;} .me-nick{font-family:var(--theme-font); font-size:17px; letter-spacing:0.01em; text-transform:none; color:#fff; font-weight:700;} .me-pts{font-size:12px; font-weight:700; color:#E8B03C;} .me-place{font-size:12px; color:rgba(255,255,255,0.7);} .me-track{height:5px; border-radius:99px; background:rgba(255,255,255,0.14); margin:6px 0 5px; overflow:hidden;} #me-bar .me-track{height:7px; margin:8px 0 7px; background:rgba(0,0,0,0.35);} .me-track i{display:block; height:100%; width:0; background:#00b300; border-radius:99px;} .me-goal{font-size:11px; color:#fff; display:inline-flex; align-items:center; gap:4px;} .me-goal-k{color:rgba(255,255,255,0.55);} .me-goal-v{color:#E8B03C; background:#161616; padding:2px 9px; border-radius:99px; font-weight:600; border:none;} .section-head-left{display:flex; align-items:baseline; gap:8px; min-width:0;} .section-head .sched-absent{font-size:11px; color:rgba(255,255,255,0.38); font-weight:400; letter-spacing:0.02em;} .section-head .sched-absent.is-hidden{display:none;} .week-card.is-empty-day{opacity:1;} .week-card .day-num{font-size:11px; letter-spacing:0.02em; color:rgba(255,255,255,0.72); margin-left:4px; font-weight:600;} .week-card .csign{font-size:9px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.55); padding:0 8px 7px;} .week-card .csign.is-signed{display:inline-block; margin:0 8px 7px; padding:2px 7px; border-radius:999px; background:#008800; color:#fff; font-weight:700;} .week-card .csign.is-waitlist{color:#e8c884; white-space:nowrap; font-size:8px; letter-spacing:0.02em; padding:0 3px 7px;} .week-card.is-empty-day .empty-day-lbl{font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,255,255,0.5); padding:0 8px 8px; margin-top:auto; text-align:center; line-height:1.15;} .week-card.is-empty-day .empty-day-lbl.is-no-result{text-transform:none; letter-spacing:0.02em; font-size:10px;} .week-card.is-empty-day .empty-day-date{font-size:11px; color:rgba(255,255,255,0.72); padding:0 8px 4px;} .hero-card.is-empty-hero .btn-structure, .hero-card.is-empty-hero .btn-join, .hero-card.is-empty-hero .join-wrap, .hero-card.is-empty-hero .hero-cards, .hero-card.is-empty-hero #hero-thumb-wrap{display:none !important;} .hero-card.is-empty-hero .hero-tag, .hero-card.is-empty-hero #hero-tag{ color: rgba(180,186,196,0.78) !important; border-color: rgba(232,200,132,0.55) !important; background: rgba(255,255,255,0.05) !important; } .section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;} .section-head h2{font-family:var(--theme-hdg-font); font-size:15.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-light);} .section-head .link{font-size:11px; color:var(--gold); font-family:var(--theme-hdg-font); letter-spacing:0.04em; opacity:0.9;} .eyebrow-sm{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; font-weight:600;} #tab-formats .eyebrow-sm{font-size:15.8px; letter-spacing:0.06em; font-weight:400; color:#C9B37A; font-family:var(--theme-font);} /* СТЕКЛО — стиль анонса турнира, только для афиши */ .glass{ background: var(--fmt-bg, var(--royal-mid)); backdrop-filter: none; -webkit-backdrop-filter: none; border:1px solid rgba(255,255,255,0.22); border-radius:calc(18px * var(--radius-mult)); position:relative; overflow:hidden; box-shadow: 0 14px 32px rgba(var(--shadow-tint), 0.4); } .glass::before, .glass::after{ display:none; } .hero-card.glass::before{ display:none; } .hero-card.is-today.glass::before{ display: none; } .hero-card.is-today.glass::after{ display: none; } /* Плашка «Сегодня»: без блика по стеклу, обводка — ниже. */ /* АФИША — главный турнир, высота фиксирована при любой длине названия. */ .hero-card{ margin:0 12px; padding:10px 14px; position:relative; height:185px; box-sizing:border-box; border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; box-shadow:0 14px 32px rgba(0,0,0,0.58), 0 4px 12px rgba(0,0,0,0.25); display:flex; flex-direction:column; justify-content:space-between; overflow: hidden; } /* .is-today: статичная рамка и тень задаются правилом .home-top-zone .hero-card.is-today выше. */ /* Белая неоновая обводка, как у ближайшего турнира в ленте (.week-card.is-nearest-card), — когда на афише ближайший турнир (fhNearestFeedIso). */ .hero-card.is-nearest-hero{ border-color: rgba(255,255,255,0.9) !important; animation: heroBreathNearest 6s ease-in-out infinite; } @keyframes heroBreathNearest{ 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.78), 0 0 27px 4px rgba(255,255,255,0.32), 0 0 48px 8px rgba(255,255,255,0.14), 0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 0 1.56px rgba(255,255,255,0.9), 0 0 30px 4.6px rgba(255,255,255,0.4), 0 0 55px 10px rgba(255,255,255,0.18), 0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3); } } .hero-card.is-today .hero-accent-bar{ box-shadow: none !important; transition: box-shadow 0.55s ease; } /* Прошедший турнир на афише — тот же приём, что и в карточке дня: затемнение цветом фона, а не opacity/filter на самой карточке, иначе аватарки победителей (которые должны остаться яркими) тоже потускнеют. */ .hero-card.is-past-hero{ background: #000000 !important; border-color: rgba(232, 176, 60, 0.55) !important; } .hero-card.is-past-hero .hero-accent-bar{ opacity: 0.35; } /* всё приглушено, кроме подиума, пула и кнопки итогов */ .hero-card.is-past-hero .day-date, .hero-card.is-past-hero #hero-day1, .hero-card.is-past-hero .hero-past-date, .hero-card.is-past-hero #hero-title, .hero-card.is-past-hero .start-line, .hero-card.is-past-hero .meta{ opacity: 0.38 !important; } .hero-card.is-past-hero #hero-title{ color: rgba(255,255,255,0.55); } .hero-card.is-past-hero .hero-cards{ opacity: 0.4; } .hero-card.is-past-hero .hero-cards img{ filter: grayscale(0.55) brightness(0.7); } .hero-card.is-past-hero .hero-past-pool, .hero-card.is-past-hero .hero-past-pool .hpp-num{ opacity: 1 !important; } .hero-card.is-past-hero .btn-results{ opacity: 1 !important; background: #E8B03C !important; border-color: #E8B03C !important; color: #1a1200 !important; box-shadow: none !important; } .hero-past-pool{ margin-top: 6px; font-size: 11px; color: rgba(255,255,255,0.65); letter-spacing: 0.02em; } .hero-past-pool .hpp-num{ font-family: var(--theme-hdg-font); font-size: 15px; font-weight: 400; color: #E8B03C; letter-spacing: 0.02em; } /* нижняя линия / пустой hero-bottom не нужны */ .hrp-col { background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 148px; flex: 1; } .hrp-city { font-family: var(--theme-hdg-font); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 4px; opacity: 0.4; } .hrp-title { font-family: var(--theme-hdg-font); font-size: 14px; line-height: 1.15; text-transform: uppercase; color: #fff; margin-bottom: 10px; min-height: 32px; opacity: 0.4; } .hrp-pool, .hrp-btn { opacity: 1 !important; } .hrp-pool { font-size: 10.5px; color: rgba(255,255,255,0.65); margin-bottom: 8px; } .hrp-pool .hpp-num { font-family: var(--theme-hdg-font); font-size: 14px; color: #F6CC4D; font-weight: 400; letter-spacing: 0.02em; } .hrp-btn { margin-top: auto; padding: 6px 6px; border-radius: 999px; border: 1.5px solid rgba(120, 180, 255, 0.42); background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(0,79,186,0.28) 50%, rgba(2,35,90,0.36) 100%); color: rgba(255,255,255,0.92); font-family: var(--theme-hdg-font); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; cursor: pointer; box-shadow: 0 2px 0 rgba(2,35,90,0.5), 0 3px 8px rgba(0,0,0,0.22); } .hrp-btn:active { transform: scale(0.95) translateY(2px); filter: brightness(0.86); } .hero-past-date{ font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; margin: 1px 0 2px; } .hero-past-actions{ display: flex; align-items: center; gap: 10px; width: 100%; } .hero-past-avatars{ display: flex; align-items: center; flex-shrink: 0; } .hero-past-avatars .hpa-ava{ width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.1); margin-left: -10px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 13px; color: #fff; } .hero-past-avatars .hpa-ava:first-child{ margin-left: 0; border-color: #F6CC4D; width: 38px; height: 38px; z-index: 3; font-size: 15px; } .hero-past-avatars .hpa-ava:nth-child(2){ border-color: #D6DCE8; z-index: 2; } .hero-past-avatars .hpa-ava:nth-child(3){ border-color: #E0A264; z-index: 1; } .hero-past-avatars .hpa-ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } .hero-past-status{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 16px; } /* Только победитель: «1 аватарка ник» по центру места справа от «Результатов»; длинный ник уменьшает шрифт (fhFitLine). */ .hero-past-status .past-podium-item{ display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .hero-past-status .past-podium-medal{ width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 11px; font-weight: 700; flex-shrink: 0; } .hero-past-status .past-podium-1 .past-podium-medal{ width: auto; height: auto; border-radius: 0; font-size: 15px; color: #E8B03C; } .hero-past-status .past-podium-2 .past-podium-medal{ background: rgba(200,200,200,0.15); border: 1px solid rgba(200,200,200,0.7); color: rgba(220,220,220,0.9); } .hero-past-status .past-podium-3 .past-podium-medal{ background: rgba(205,127,50,0.2); border: 1px solid #CD7F32; color: #e0985a; } .hero-past-status .past-podium-name{ flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); text-align: left; } .btn-results{ flex: 0 0 168px; width: 168px; min-width: 168px; padding: 6px 8px; height: 30px; min-height: 30px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid rgba(120, 180, 255, 0.42); background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(0,79,186,0.30) 48%, rgba(2,35,90,0.38) 100%); color: rgba(255,255,255,0.92); font-weight: 600; font-size: 11px; line-height: 1; text-align: center; cursor: pointer; font-family: var(--theme-hdg-font); letter-spacing: 0.03em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(2, 35, 90, 0.55), 0 4px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.28); } .btn-results:active{ background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(0,79,186,0.34) 50%, rgba(2,35,90,0.42) 100%); box-shadow: 0 1px 0 rgba(2, 35, 90, 0.5), 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18); transform: translateY(1px); } .hero-top{ display:flex; gap:11px; align-items:flex-start; flex:1; min-height:0; } .hero-top .hero-cards{ width:100px; height:100px; flex-shrink:0; position:relative; margin-top: 1px; background:transparent !important; border:none !important; box-shadow:none !important; overflow:hisible; } .hero-cards .hcard-face{ width:100%; height:100%; object-fit:contain; display:block; background:transparent !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55)); transform: scale(1); transform-origin: 50% 50%; animation: none; } .hero-seats-badge{ text-align:right; flex-shrink:0; margin-left:auto; padding-left:6px; font-family:var(--theme-hdg-font); font-size:11.55px; color:var(--ink-dim); margin-top: 5px; } .hero-seats-badge b{ font-size:22.9px; color:#fff; font-weight:558; } /* Режим таймера: круглая кнопка в углу афиши, 1px от правого края и 1px от чёлки (hero-accent-bar), фон = цвет чёлки текущего турнира (var(--accent)), не зашит намертво */ .hero-seats-badge.is-timer{ position: absolute; top: 14px; right: 8px; margin: 0; padding: 0; width: 55px; height: 28px; min-width: 55px; min-height: 28px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; overflow: hidden; background: var(--royal-flat, #12368E); border: 1.5px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,0.45), 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22); color: #fff; line-height: 1; z-index: 6; } .hero-seats-badge.is-timer svg{ width:34px; height:26px; display:block; pointer-events:none; } .hero-seats-badge.is-timer .timer-blinded-label{ display:none; } .hero-seats-badge.is-timer:active{ transform: translateY(1px); opacity: 0.92; } /* max-width всегда одинаковый — при любом состоянии карточки (прошёл/можно записаться/таймер/отменён) заголовок переносится ОДИНАКОВО, а не по-разному в зависимости от того, что показано рядом */ .hero-info{ padding-top:2px; min-width:0; flex:1; max-width:none; } /* день недели −~10%: акцент на названии турнира; фиксированный размер, длинные слова («ПОНЕДЕЛЬНИК») не обрезаются */ .hero-info .day-date{ font-size: 11px; color:var(--gold-light); font-weight:600; letter-spacing:0; white-space:nowrap; overflow:visible; text-overflow:clip; text-transform:uppercase; opacity: 0.92; max-width:100%; } .hero-info .start-line{ font-size:11px; color:rgba(255,255,255,0.92); font-weight:600; letter-spacing:0.02em; margin-top:4px; } .hero-info .start-line b{ font-size:12.65px; color:#fff; font-weight:700; } /* название турнира — акцент, чуть мягче чем предыдущий +20% */ .hero-info h1{ font-size:19.5px; font-weight:600; text-transform:uppercase; line-height:1.12; margin:3px 0 0; letter-spacing:0.01em; white-space:normal; overflow-wrap:break-word; word-break:normal; text-shadow: 0 0 0.3px rgba(255,255,255,0.28), 0.25px 0 0 rgba(255,255,255,0.18), -0.25px 0 0 rgba(255,255,255,0.18), 0 2px 11px rgba(0,0,0,0.42); -webkit-text-stroke: 0.15px rgba(255,255,255,0.15); height:auto; min-height:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; max-width:100%; } .hero-tag{ display:inline-block; margin-top:4px; padding:2.5px 9px; border:1px solid rgba(232,200,132,0.55); border-radius:999px; background:rgba(255,255,255,0.05); font-size:9px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-light); /* без обрезки и троеточия — тег виден целиком */ white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; } .hero-info .meta{ min-height: 14px; } /* одна строка целиком: «Войти в игру можно до 22:00» — без … */ .hero-info .meta{ font-size:10.5px; color:rgba(255,255,255,0.92); line-height:1.2; margin-top:2px; font-weight:600; letter-spacing:0.01em; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; } .hero-info .meta b{color:#fff; font-weight:700; font-size:12.1px;} .hero-info .meta .hero-alive-num{ font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.02em; } .hero-card.is-inplay-hero .start-line{ font-size: 11.5px; color: rgba(255,255,255,0.85); font-weight: 600; } .hero-card.is-inplay-hero .meta{ font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 4px; white-space: nowrap; overflow: visible; text-overflow: clip; } .hero-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid rgba(255,255,255,0.16); flex-shrink: 0; gap: 8px; } /* Три кнопки афиши одного размера: «Записаться» (золотая) · что почитать · кто записан (тёмно-серые) */ .hero-btns{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; width:100%; align-items:center; container-type:inline-size; } .hero-btns .btn-join, .hero-btns .btn-structure{ width:100%; min-width:0; height:32px; min-height:32px; padding:0 4px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:999px; font-family:var(--theme-font); font-weight:700; letter-spacing:0; text-transform:none; /* 12,5px, а на узком экране меньше — так, чтобы самая длинная надпись («Для новичков», ≈7,1 своего размера) влезала в кнопку */ font-size:12.5px; font-size:min(12.5px, calc(((100cqi - 14px) / 3 - 12px) / 7.1)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hero-btns .btn-join{ background:linear-gradient(180deg, var(--fh-gold-1), var(--fh-gold-2)); color:var(--fh-gold-ink); box-shadow:var(--fh-btn-shadow); } /* Свечение по обводке кнопки «Записаться» — бегущий блик по кругу. */ .join-wrap{ --join-a: 0deg; position: relative; flex: 1 1 auto; display: flex; border-radius: 999px; padding: 1.5px; background: conic-gradient(from var(--join-a), color-mix(in srgb, var(--accent, var(--gold)) 0%, transparent) 0 230deg, color-mix(in srgb, var(--accent, var(--gold)) 78%, transparent) 280deg, color-mix(in srgb, var(--accent, var(--gold)) 55%, #fff) 310deg, color-mix(in srgb, var(--accent, var(--gold)) 85%, #000) 340deg, color-mix(in srgb, var(--accent, var(--gold)) 0%, transparent) 360deg); animation: joinGlowSpin 3.5s linear infinite; } /* Свечение только пока ещё можно записаться — как только записан (или это уже прошедшая/финальная кнопка) кольцо гаснет, паддинг остаётся тем же, чтобы кнопка не дёргалась по размеру. */ .join-wrap:has(#btn-join.joined), .join-wrap:has(#btn-join.is-past-join), .join-wrap:has(#btn-join.is-invite-btn), .join-wrap:has(#btn-join.is-invite-refused), .join-wrap:has(#btn-join.is-reg-closed-btn){ background: transparent; animation: none; } .join-wrap .btn-join{ width: 100%; } @property --join-a{ syntax: ''; inherits: true; initial-value: 0deg; } @keyframes joinGlowSpin{ to { --join-a: 360deg; } } /* Обучение: без горизонтальной линии над кнопками */ .hero-card.is-learn .hero-bottom{ border-top: none !important; } /* Вторая и третья кнопки афиши — тёмно-серые */ .btn-structure{ border:1px solid var(--fh-quiet-line); background:linear-gradient(180deg, var(--fh-quiet-1), var(--fh-quiet-2)); color:var(--fh-quiet-ink); cursor:pointer; flex-shrink:0; transform:translateZ(0); } /* «Структура финала» — тёмное стекло с золотой окантовкой: в тон афише финала, а не сливается с ней */ .btn-structure.is-final-struct{ background: linear-gradient(180deg, rgba(34,26,8,0.94) 0%, rgba(0,0,0,0.94) 100%); border: 1.5px solid #E5B533; color: #F2D06A; text-shadow: none; box-shadow: 0 8px 16px rgba(0,0,0,0.5), 0 0 12px rgba(229,181,51,0.35), inset 0 1px 1px rgba(255,235,170,0.35); } .btn-structure:active{ transform: scale(0.95) translateY(2px); filter: brightness(0.86); } .btn-join{ background:linear-gradient(180deg, #9AA6B2 0%, #6E7A86 42%, #4A5560 100%); color:#fff; border: none; padding: 6px 13px; border-radius:999px; font-family:var(--theme-hdg-font); font-size:14.1px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; transition:background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.12s; width: 198px; min-width: 198px; height: 35px; min-height: 35px; box-sizing: border-box; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(0,0,0,0.48), 0 3px 0 rgba(0,0,0,0.38), inset 0 1px 2px rgba(255,255,255,0.32), inset 0 -2px 5px rgba(0,0,0,0.25); } .btn-join.joined{ background:linear-gradient(180deg, var(--fh-ok-1), var(--fh-ok-2)); color:var(--fh-ok-ink); text-shadow:0 1px 2px rgba(0,0,0,0.5); border: none; box-shadow:0 6px 14px rgba(0,120,0,0.32), 0 2px 0 rgba(0,60,0,0.45), inset 0 1px 2px rgba(255,255,255,0.22), inset 0 -2px 5px rgba(0,0,0,0.28); } /* Мест нет — запись в лист ожидания и «В листе · №N»: один фиолетовый */ .btn-join.is-full-btn, .btn-join.is-waitlist-btn{ background:linear-gradient(180deg, var(--fh-wait-1), var(--fh-wait-2)); color:var(--fh-wait-ink); border:none; box-shadow:var(--fh-btn-shadow); } .join-wrap:has(#btn-join.is-full-btn), .join-wrap:has(#btn-join.is-waitlist-btn){ background: transparent; animation: none; } .week-card.is-full-card{ background: linear-gradient(180deg, #6a3fc4 0%, #4b2a91 100%) !important; border-color: rgba(205,180,255,0.5) !important; } .week-card .cwait{ display:inline-block; margin:2px 8px 4px; padding:0 9px; border-radius:999px; background:#000; color:#fff; font-family:var(--theme-hdg-font); font-size:13px; line-height:18px; } .hero-card.is-waitlist-hero, .home-top-zone .hero-card.is-waitlist-hero{ --accent: #c9a8ff !important; background: linear-gradient(165deg, rgba(170, 130, 255, 0.35) 0%, rgba(110, 70, 200, 0.2) 40%, rgba(40, 20, 90, 0.35) 100%), linear-gradient(180deg, #5b34a8 0%, #45257f 55%, #321a5e 100%) !important; border-color: rgba(205, 180, 255, 0.5) !important; box-shadow: 0 18px 40px rgba(30, 10, 70, 0.55), 0 8px 16px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 28px rgba(150, 100, 255, 0.22); } .hero-card.is-waitlist-hero .hero-accent-bar{ box-shadow: 0 4px 12px rgba(190, 150, 255, 0.55); } .btn-join.is-knockout{ background: linear-gradient(180deg, var(--fh-bad-1), var(--fh-bad-2)); color: var(--fh-bad-ink); border: none; box-shadow: var(--fh-btn-shadow); } .btn-join.is-knockout:active{ filter: brightness(0.92); } /* Турнир начался, регистрация ещё открыта */ .btn-join.is-started{ background: #008000; background-image: none; color: #fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 2px 10px rgba(0, 128, 0, 0.3); height: 32px; min-height: 32px; padding: 6px 13px; } /* «Запись закрыта» по времени «войти можно до» — красная, как и закрытая вручную. Только у самой афиши героя (id уникален) — других .btn-join по сайту (кнопки «Сохранить» в модалках) это не касается. */ #btn-join.is-reg-closed-btn{ background: linear-gradient(180deg, var(--fh-bad-1), var(--fh-bad-2)) !important; color: var(--fh-bad-ink) !important; border: none; box-shadow: var(--fh-btn-shadow); } /* Расписание: регистрация закрыта */ .week-card.is-reg-closed{ background: linear-gradient(180deg, #B21807 0%, #7a1005 100%) !important; border-color: rgba(255,255,255,0.22) !important; } .week-card.is-reg-closed .accent-bar{ opacity: 0.55; } .week-card.is-reg-closed .daytag{ opacity: 0; width: 0; overflow: hidden; padding: 0; margin: 0; } .week-card.is-reg-closed:not(.is-inplay) .cardtop{ justify-content: flex-end; } .week-card.cardtop-inplay, .week-card .cardtop-inplay{ justify-content: flex-start !important; } .week-card.is-inplay .cardtop-inplay .reg-closed-badge{ font-size: 11px; letter-spacing: 0.06em; } .week-card.is-inplay .past-players-lbl{ font-size: 9px; letter-spacing: 0.02em; } /* Картинка «Обучения» в ленте — по общему правилу .week-card .thumb-wrap, как у обычных форматов. */ /* Турнир начался, рег. ещё открыта — зелёный (лента + афиша героя) */ .week-card.is-started-open{ background: linear-gradient(180deg, #008000 0%, #006600 100%) !important; border-color: rgba(255,255,255,0.22) !important; } .week-card.is-started-open .accent-bar{ opacity: 0.55; } .hero-card.is-started-open{ --accent: #5CFF9A !important; background: linear-gradient(165deg, rgba(0, 160, 80, 0.35) 0%, rgba(0, 100, 50, 0.2) 40%, rgba(0, 40, 20, 0.35) 100%), linear-gradient(180deg, #008000 0%, #006600 55%, #004d00 100%) !important; border-color: rgba(120, 255, 160, 0.45) !important; box-shadow: 0 18px 40px rgba(0, 40, 15, 0.55), 0 8px 16px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 28px rgba(0, 180, 80, 0.2); } .hero-card.is-started-open .hero-accent-bar{ box-shadow: 0 4px 12px rgba(80, 255, 140, 0.55); } .home-top-zone .hero-card.is-started-open{ background: linear-gradient(165deg, rgba(0, 160, 80, 0.35) 0%, rgba(0, 100, 50, 0.2) 40%, rgba(0, 40, 20, 0.35) 100%), linear-gradient(180deg, #008000 0%, #006600 55%, #004d00 100%) !important; } /* Поздняя регистрация закрылась («войти можно до» прошло) — красный, тем же приёмом, что и зелёное «начался». Если это время совпадает со временем начала — зелёного попросту не будет (окно между стартом и закрытием нулевое), сразу переходит в красное. */ .week-card.is-reg-closed-red{ background: linear-gradient(180deg, #a02020 0%, #7a1414 100%) !important; border-color: rgba(255,255,255,0.22) !important; } .week-card.is-reg-closed-red .accent-bar{ opacity: 0.55; } .hero-card.is-reg-closed-red{ --accent: #FF6B6B !important; background: linear-gradient(165deg, rgba(160, 30, 30, 0.35) 0%, rgba(100, 20, 20, 0.2) 40%, rgba(40, 5, 5, 0.35) 100%), linear-gradient(180deg, #7a1414 0%, #5c0f0f 55%, #400a0a 100%) !important; border-color: rgba(255, 130, 130, 0.45) !important; box-shadow: 0 18px 40px rgba(40, 5, 5, 0.55), 0 8px 16px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 28px rgba(180, 40, 40, 0.2); } .hero-card.is-reg-closed-red .hero-accent-bar{ box-shadow: 0 4px 12px rgba(255, 110, 110, 0.55); } .home-top-zone .hero-card.is-reg-closed-red{ background: linear-gradient(165deg, rgba(160, 30, 30, 0.35) 0%, rgba(100, 20, 20, 0.2) 40%, rgba(40, 5, 5, 0.35) 100%), linear-gradient(180deg, #7a1414 0%, #5c0f0f 55%, #400a0a 100%) !important; } /* ИДЁТ — зелёный (турнир идёт, рег. открыта или как бейдж) */ .week-card .live-badge, .week-card .reg-closed-badge{ background: transparent !important; color: #fff !important; font-family:var(--theme-hdg-font); font-size:9px; font-weight:700; padding:0; border-radius:0; text-transform:uppercase; letter-spacing:0.05em; box-shadow: none !important; border: none !important; text-shadow: 0 1px 3px rgba(0,0,0,0.45); } .week-card .live-badge .dots, .week-card .reg-closed-badge .dots{ display: inline-block; width: 1.15em; text-align: left; overflow: hidden; vertical-align: baseline; position: relative; top: 0.12em; /* точки ближе к низу букв */ } .week-card .live-badge .dots::after, .week-card .reg-closed-badge .dots::after{ content: '...'; display: inline-block; animation: liveDots 2.7s infinite; letter-spacing: 0.02em; } @keyframes liveDots{ 0%, 20% { clip-path: inset(0 100% 0 0); } 30%, 45% { clip-path: inset(0 66% 0 0); } 55%, 70% { clip-path: inset(0 33% 0 0); } 80%, 100% { clip-path: inset(0 0 0 0); } } .live-sec-title{ font-family: var(--theme-hdg-font); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin: 10px 2px 6px; color: rgba(255,255,255,0.7); } .live-sec-title.alive{ color: #6BCB6B; } .live-sec-title.out{ color: rgba(255,255,255,0.45); } .vote-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 12px 16px; } .vote-row{ display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 7px; } .vote-row .vote-name{ margin-right: auto; } .vote-ava{ width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #1a2438; border: 1.5px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 15px; color: #fff; } .vote-ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } .vote-name{ flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vote-fav-card{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 10px; gap: 10px; } .vote-fav-ava{ width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(246, 204, 77, 0.65); box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: #1a2438; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 28px; color: #fff; } .vote-fav-ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } .vote-fav-name{ font-family: var(--theme-hdg-font); font-size: 22px; letter-spacing: 0.04em; color: #fff; } .vote-fav-sub{ font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.78); max-width: 280px; } .vote-fav-votes{ font-size: 12px; color: rgba(255,255,255,0.5); } .vote-fav-votes b{ font-family: var(--theme-hdg-font); font-size: 16px; color: #F6CC4D; font-weight: 400; } .vote-after-note{ margin: 10px 8px 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 13px; line-height: 1.35; color: rgba(255,255,255,0.85); text-align: center; } .live-row{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 5px; } .live-row.out{ opacity: 0.72; } .live-ava{ width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 13px; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.18); } .live-name{ flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-pts{ font-family: var(--theme-hdg-font); font-size: 13px; color: #F6CC4D; flex-shrink: 0; } .live-tag{ font-size: 10px; color: rgba(255,255,255,0.4); flex-shrink: 0; } .confirm-live-btn{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); color: #fff; font-family: var(--theme-hdg-font); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; } .confirm-live-btn:active{ opacity: 0.85; } .confirm-live-btn .live-arrow{ display: inline-block; font-size: 16px; line-height: 1; animation: liveArrowNudge 1.1s ease-in-out infinite; } @keyframes liveArrowNudge{ 0%, 100% { transform: translateX(0); opacity: 0.85; } 50% { transform: translateX(5px); opacity: 1; } } .live-place{ font-family: var(--theme-hdg-font); font-size: 13px; color: rgba(255,255,255,0.5); width: 22px; text-align: center; flex-shrink: 0; } /* ЛЕНТА НЕДЕЛИ */ .week-scroll-wrap{ margin: 0 0 2px; position: relative; /* исходные отступы — без раздувания промежутков до/после ленты */ padding: 2px 0 4px; border-radius: 0; background: transparent; box-shadow: none; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100% ); } .week-scroll{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; /* чуть больше вертикального padding — scale(1.13) из центра не режет обводку */ padding:20px 22px 22px; scrollbar-width:none; align-items:center; scroll-padding-inline: 22px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .week-scroll::-webkit-scrollbar{display:none;} .week-day-group{ position:relative; flex-shrink:0; display:flex; align-items:center; gap:10px; padding:20px 10px 10px; border-radius:20px; border:1.5px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.05); } /* Общий ярлык дня на рамке; внутри рамки в карточках вместо дня и числа показывается время */ .wdg-lab{ position:absolute; top:-12px; left:14px; padding:2px 12px; border-radius:999px; background:var(--royal-bot,#0b1a4a); border:1.5px solid rgba(255,255,255,0.55); font-family:var(--theme-hdg-font); font-size:16px; letter-spacing:0.03em; line-height:1.25; color:#fff; white-space:nowrap; } .wdg-lab i{ font-style:normal; color:rgba(255,255,255,0.72); margin-left:6px; font-size:14px; } .card-time{ display:none; font-family:var(--theme-hdg-font); font-size:14px; line-height:1; } .week-day-group .cardtop.has-time .daytag, .week-day-group .cardtop.has-time .day-num{ display:none; } .week-day-group .cardtop.has-time .card-time{ display:inline; } .week-more{ flex-shrink:0; display:inline-flex; align-items:center; gap:7px; padding:9px 12px 9px 14px; margin:0 4px 0 2px; border:0; border-radius:14px; cursor:pointer; white-space:nowrap; font-family:inherit; color:#1a1203; background:linear-gradient(180deg,#e8c96a 0%,#c8a855 100%); box-shadow:0 4px 0 rgba(90,64,10,0.65), 0 8px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45); -webkit-tap-highlight-color:transparent; } .week-more:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(90,64,10,0.65), 0 4px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45); } .week-more:disabled{ opacity:0.65; cursor:default; } .week-more .wm-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; } .week-more .wm-t{ font-weight:800; font-size:15px; } .week-more .wm-n{ font-weight:600; font-size:12px; opacity:0.85; } .week-card{ flex-shrink:0; width:86px; height:116px; border-radius:calc(14px * var(--radius-mult)); overflow:hidden; position:relative; background: var(--fmt-bg, var(--royal-mid)); background-blend-mode: normal; backdrop-filter: none; -webkit-backdrop-filter: none; border:1.5px solid rgba(255,255,255,0.28); box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.14); cursor:pointer; font-family:inherit; color:#fff; padding:0 0 6px; display:flex; flex-direction:column; transform-origin: center center; } .week-card:active, .week-card.active{ box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.7), inset 0 1px 2px 0 rgba(var(--glass-tint), 0.3); } .week-card:hover{ border-color: rgba(var(--card-border-glow, var(--theme-border-accent)), 0.95); box-shadow: 0 16px 32px -8px rgba(0,0,0,0.7), inset 0 2.5px 3px 0 rgba(var(--glass-tint), 0.5), 0 0 18px rgba(var(--card-border-glow, var(--theme-border-accent)), 0.2); } .week-card.selected .thumb-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center 6%; display:block; } /* selected = только scale + тень. Фон/рамка/картинка НЕ меняются — как у невыбранной */ /* сегодняшний не увеличен, пока не выбран; выделение — свечением */ /* только сегодняшний день подсвечивается (и при выборе тоже) */ .week-card.is-cal-today{ border-color: rgba(160, 170, 245, 0.62) !important; animation: cardBreathToday 6s ease-in-out infinite; } @keyframes cardBreathToday{ 0%, 100% { box-shadow: 0 0 0 1.4px rgba(195, 185, 250, 0.5), 0 0 18px 3px rgba(125, 125, 235, 0.32), 0 0 36px 6px rgba(95, 105, 225, 0.14), 0 14px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.28); } 50% { box-shadow: 0 0 0 1.4px rgba(195, 185, 250, 0.65), 0 0 24px 4px rgba(125, 125, 235, 0.42), 0 0 46px 8px rgba(95, 105, 225, 0.2), 0 14px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.28); } } .week-card.selected{ transform: scale(1.13); transform-origin: center center; z-index: 3; /* подсветка как у афиши героя is-today */ border-color: rgba(180, 180, 255, 0.7) !important; box-shadow: 0 0 0 1.5px rgba(195, 185, 250, 0.55), 0 0 27px 4px rgba(125, 125, 235, 0.37), 0 0 48px 8px rgba(95, 105, 225, 0.18), 0 18px 38px rgba(0,0,0,0.62), 0 6px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28); } .week-card.selected.is-today-card{ border-color: rgba(180, 180, 255, 0.75) !important; box-shadow: 0 0 0 1.5px rgba(195, 185, 250, 0.55), 0 0 27px 4px rgba(125, 125, 235, 0.37), 0 0 48px 8px rgba(95, 105, 225, 0.18), 0 18px 38px rgba(0,0,0,0.62), 0 6px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28); } /* is-today-card сейчас нигде не присваивается (ближайший турнир — is-nearest-card); правило рабочее на будущее. */ Раньше !important стоял у каждой тени по отдельности внутри одного box-shadow — так CSS не работает (валиден только один !important на всё свойство целиком), из-за этого значение могло не применяться вообще. Тут это больше не нужно: у трёх классов и так больше веса, чем у .selected (двух), этого достаточно. */ .week-card.is-cal-today.selected{ border-color: rgba(160, 170, 245, 0.7) !important; animation: cardBreathTodaySelected 6s ease-in-out infinite; } @keyframes cardBreathTodaySelected{ 0%, 100% { box-shadow: 0 0 0 1.6px rgba(195, 185, 250, 0.6), 0 0 24px 4px rgba(125, 125, 235, 0.38), 0 0 44px 8px rgba(95, 105, 225, 0.18), 0 18px 38px rgba(0,0,0,0.62), 0 6px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28); } 50% { box-shadow: 0 0 0 1.6px rgba(195, 185, 250, 0.78), 0 0 30px 5px rgba(125, 125, 235, 0.48), 0 0 55px 10px rgba(95, 105, 225, 0.24), 0 18px 38px rgba(0,0,0,0.62), 0 6px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28); } } .week-card.selected.is-today-card .accent-bar{ box-shadow: none !important; } /* Ближайший турнир — белая неоновая обводка, видна независимо от выбора карточки. */ /* Белая неоновая обводка «ближайшего» турнира в ленте убрана: нагружала карточку. */ .week-card .accent-bar{ height:4px; background:var(--accent); flex-shrink:0; } .week-card .cardtop{ padding:5px 6px 3px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; } .week-card .daytag{ font-family:var(--theme-hdg-font); font-size:14px; line-height:1; } .week-card .today-badge{ position: relative; overflow: visible; background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%), linear-gradient(180deg, #2bb82b 0%, #008800 55%, #006000 100%) !important; color: #fff !important; font-family:var(--theme-hdg-font); font-size:8px; font-weight:700; padding:2.5px 6px; border-radius:20px; text-transform:uppercase; letter-spacing:0.03em; border: none; box-shadow: 0 2px 0 #004a00, 0 4px 7px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.28); text-shadow: 0 1px 1px rgba(0,0,0,.35); } .week-card .tomorrow-label{ font-family:var(--theme-hdg-font); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#fff; background:none; border:none; box-shadow:none; padding:0; } .week-card .thumb-wrap{ margin:0 7px; border-radius:8px; overflow:hidden; height:46px; flex-shrink:0; background:rgba(255,255,255,0.06); box-shadow:0 4px 10px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.1); } .week-card .thumb-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center 6%; display:block; filter: none !important; } .week-card .cname{ font-family:var(--theme-hdg-font); font-size:11px; text-transform:uppercase; padding:4px 5px 0; line-height:1.1; text-align:center; flex:1; display:flex; align-items:center; justify-content:center; } .week-card .csign:empty{ display:none; } .week-card .cseats{ margin:auto 0; padding:1px 2px 0; white-space:nowrap; font-size:8.5px; color:var(--ink-dim); font-family:var(--theme-hdg-font); font-weight:300; text-align:center; } /* Счётчик мест на карточке дня — жирнее и крупнее: на афише его нет, здесь единственное место. */ .week-card .cseats b{ font-size:15.75px; color:#fff; font-weight:700; } .week-card .cseats b .cseat-tot{ font-size:16.6px; } /* STRICT LINE-ICON TILES — О клубе / Правила / Бонусы / Оферта */ .tile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 6px; } .tile{ border-radius:calc(15px * var(--radius-mult)); padding:14px; display:flex; align-items:center; gap:10px; /* royal-flat + +30% синего, без фиолетового ухода */ background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.01) 70%), linear-gradient(165deg, rgba(25,115,240,0.42) 0%, rgba(12,85,210,0.34) 55%, rgba(8,55,170,0.28) 100%), var(--royal-flat); border:1px solid rgba(58,160,255,0.55); box-shadow: inset 0 2px 0 rgba(255,255,255,0.22), inset 0 -10px 16px rgba(0,0,0,0.42), 0 0 10px rgba(58,160,255,0.28), 0 6px 0 rgba(0,0,0,0.45), 0 14px 20px rgba(0,0,0,0.38); } .tile .ic{ width:18px; height:18px; color:var(--gold-light); flex-shrink:0; } .tile .txt{ font-family:var(--theme-hdg-font); font-size:12px; text-transform:uppercase; } .tile .tile-mark{height:32px;width:auto;max-width:78%;display:block;} .tile-fh-name{font-family:var(--theme-font);font-size:17px;font-weight:700;letter-spacing:0;color:#fff;line-height:1;font-style:normal;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .tile-club-live{justify-content:flex-start; gap:10px;} .tile-club-live .tile-heart-wrap{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .tile-club-live .tile-heart{ width:16px; height:16px; color:#E24B4B; fill:#E24B4B; stroke:none; } .tile-live{grid-column:1 / -1; justify-content:center; padding:14px 16px 12px;} .tile-live-text{display:flex; flex-direction:column; align-items:center; gap:1px;} .tile-live-kicker{ display:inline-flex; align-items:center; gap:6px; font-family:var(--theme-hdg-font); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.72); } .live-dot{ width:7px; height:7px; border-radius:50%; background:#E10600; box-shadow:0 0 0 0 rgba(225,6,0,0.55); animation:fhLivePulse 1.4s ease-out infinite; } @keyframes fhLivePulse{ 0%{box-shadow:0 0 0 0 rgba(225,6,0,0.55);} 70%{box-shadow:0 0 0 7px rgba(225,6,0,0);} 100%{box-shadow:0 0 0 0 rgba(225,6,0,0);} } .tile-live .txt{font-size:34px; letter-spacing:0.06em; line-height:0.9;} /* Компактные пункты выпадающего списка городов — масштаб как у самой кнопки .city-select в шапке, но с объёмным 3D-видом тёмных кнопок (тот же тёмный градиент, что у карточек-плиток в остальном приложении) */ .city-opt{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%), rgba(12,16,28,0.55); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border:1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12); color:#fff; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .city-opt:active{ transform: scale(0.95) translateY(2px); filter:brightness(0.86); box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 2px 5px rgba(0,0,0,0.35); } .city-opt.active{ border-color: rgba(255,255,255,0.28); box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); } .city-opt .tile-crest{ width:18px; height:18px; max-width:18px; flex-shrink:0; border-radius:50%; object-fit:cover; border:none; box-shadow:none; } .city-opt .txt{ font-family:var(--theme-hdg-font); font-size:16px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:#fff; } .city-opt-row{ display:flex; align-items:stretch; gap:8px; } .city-opt-row .city-opt{ flex:1 1 auto; } .city-default-btn{ flex-shrink:0; width:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; background: rgba(12,16,28,0.55); border:1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.4); font-size:20px; cursor:pointer; transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .city-default-btn:active{ transform: scale(0.88); } .city-default-btn.is-default{ color:#E8B03C; border-color: rgba(232,176,60,0.55); background: rgba(232,176,60,0.12); } .city-default-wrap{ position:relative; flex-shrink:0; } /* Сообщение при нажатии на звёздочку: title-подсказка на телефоне не срабатывает по тапу (только по наведению мышью), поэтому подтверждение показываем прямо рядом со звёздочкой самим текстом, на пару секунд. */ .city-default-msg{ position:absolute; top:50%; right:calc(100% + 8px); transform:translateY(-50%) translateX(4px); white-space:nowrap; font-size:11px; font-weight:600; color:#E8B03C; background:rgba(12,16,28,0.92); border:1px solid rgba(232,176,60,0.4); border-radius:8px; padding:4px 8px; opacity:0; pointer-events:none; transition: opacity 0.18s ease, transform 0.18s ease; } .city-default-msg.show{ opacity:1; transform:translateY(-50%) translateX(0); } /* Круглые гербы в профиле / переключателе городов — без ободка */ .city-crest-ic{ border-radius: 50% !important; object-fit: cover !important; border: none !important; box-shadow: none !important; } /* окна, открытые из шапки (выбор города), прижаты к верху, а не к низу */ .modal-overlay.anchor-top{ align-items:flex-start; } .modal-overlay.centered .modal-sheet{ background: rgba(var(--glass-tint), 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.18); border-radius: calc(18px * var(--radius-mult)); box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12); overflow: hidden; max-width: 360px; display: flex; flex-direction: column; } .modal-sheet.anchor-sheet{ margin:var(--fh-top-h) 16px 0; border-radius:18px; transform:translateY(-14px); opacity:0; background: rgba(var(--glass-tint), 0.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.18); } .modal-overlay.anchor-top.open .modal-sheet.anchor-sheet{ transform:translateY(0); opacity:1; } /* ФИЛИАЛЫ / КАРТА */ /* ===== карта филиалов (только .map-card) — стиль как на референсе ===== */ .map-filials-title{ position:absolute; left:10px; top:8px; z-index:6; font-family:var(--theme-hdg-font); font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-light); pointer-events:none; /* Тёмная полупрозрачная плашка под подписью: текст читается на любом участке карты Яндекса. */ background:rgba(0,10,30,0.62); padding:3px 9px; border-radius:8px; text-shadow:0 1px 3px rgba(0,0,0,0.5); } .map-card{ margin:10px 20px 4px; height:175px; border-radius:16px; position:relative; overflow:hidden; background: #111C35; border: 1px solid #3AA0FF; box-shadow: 0 0 10px rgba(58,160,255,0.35), 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); } .fh-map{ position:absolute; inset:0; z-index:1; background:#0b1535; } .map-open-btn{ position:absolute; right:8px; top:8px; z-index:6; font-size:11.5px; font-weight:600; color:#fff; text-decoration:none; white-space:nowrap; background:rgba(0,10,30,0.62); border:1px solid rgba(255,255,255,0.35); padding:4px 10px; border-radius:8px; } /* метка филиала: остриё на координатах, подпись по тапу справа от метки */ .fh-pin{ position:relative; width:30px; height:40px; transform:translate(-50%,-100%); cursor:pointer; } .fh-pin-ic{ display:block; width:30px; height:40px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); } .fh-pin-bubble{ display:none; position:absolute; left:36px; top:-6px; width:148px; flex-direction:column; gap:3px; padding:7px 9px; border-radius:10px; box-sizing:border-box; background:#111C35; border:1px solid #2EB3AF; color:#fff; font-size:11.5px; line-height:1.3; box-shadow:0 6px 16px rgba(0,0,0,.5); text-align:left; } .fh-pin.open .fh-pin-bubble{ display:flex; } .fh-pin-bubble b{ font-size:13px; } .fh-pin-bubble span{ color:rgba(255,255,255,.7); } .fh-pin-bubble a{ margin-top:3px; padding:5px 4px; border-radius:8px; text-align:center; white-space:nowrap; font-size:11px; text-decoration:none; background:#F5A83C; color:#111C35; font-weight:700; } .map-card::before{ content: none !important; display: none !important; } .map-card::after{ content: none; display: none; } .map-addr-tip{ display:none; position:absolute; z-index:5; background: #111C35; border: 1px solid #3AA0FF; border-radius: 14px; padding: 6px 12px 6px 6px; font-size: 12px; font-weight: 600; color: #fff; line-height: 1; max-width: none; white-space: nowrap; box-shadow: 0 0 10px rgba(58,160,255,0.35); pointer-events: auto; } .map-addr-tip.show{ display:block; animation: tipFade 0.2s ease; } .map-addr-tip a.map-ya-link{ color:#fff; text-decoration:none; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--theme-font); } .map-addr-tip .map-ya-ic{ width:22px; height:22px; flex-shrink:0; display:block; } @keyframes tipFade{ from{ opacity:0; transform:translateX(-4px);} to{ opacity:1; transform:none;} } /* ВКЛАДКА «РЕЙТИНГ» */ .rating-head{padding:10px 16px 4px;} /* ФИНАЛЫ (вкладка «Рейтинг»): каждый период — отдельный блок, фон ячеек = картинка финала */ /* Переключатель «Рейтинг / Финалы» (вкладка «Рейтинг» и окно игрока): одна общая капсула, по ней переезжает плоский ползунок. «Рейтинг» — синий, «Финалы» — чёрный с тонкой светлой окантовкой. */ .fhw-seg{ position:relative; display:flex; margin:0 16px 12px; padding:4px; height:50px; box-sizing:border-box; border-radius:999px; background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.12); } .fhw-seg button{ position:relative; z-index:2; flex:1; border:none; background:transparent; margin:0; padding:0; color:rgba(255,255,255,0.6); font-size:15px; font-weight:800; letter-spacing:0.03em; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .2s ease; } .fhw-seg button.on{ color:#fff; } .fhw-seg-i{ position:absolute; z-index:1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:#2F5FE3; pointer-events:none; transition:transform .25s cubic-bezier(.3,.8,.3,1), background-color .25s ease, box-shadow .25s ease; } .fhw-seg.r .fhw-seg-i{ transform:translateX(100%); background:#0b0b0d; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.35); } #rating-winners{ padding:0 16px 16px; } .fhw-empty{ padding:24px 8px; text-align:center; font-size:13px; color:rgba(255,255,255,0.55); } .fhw-sub{ display:flex; gap:6px; margin:2px 0 4px; } .fhw-sub button{ border:1px solid rgba(255,255,255,0.22); background:transparent; color:rgba(255,255,255,0.65); font-size:12px; font-weight:700; padding:6px 12px; border-radius:99px; cursor:pointer; } .fhw-sub button.on{ border-color:#E8B03C; color:#E8B03C; } .fhw-per{ --k-ring:var(--c-month); --k-bg:var(--fmt-month-bg); --k-dim:0.20; --k-txt:var(--c-month-tint); display:flex; flex-direction:column; gap:6px; margin-top:0; padding:10px; border-radius:18px; border:1.5px solid rgba(255,255,255,0.16); background:transparent; } .fhw-per.k-season{ --k-ring:var(--c-season); --k-bg:var(--fmt-season-bg); --k-dim:0.15; --k-txt:var(--c-season-tint); } .fhw-per.k-year{ --k-ring:var(--c-year); --k-bg:var(--fmt-year-bg); --k-dim:0; --k-txt:var(--c-year-tint); } /* Название периода — над блоком, белое крупное жирное */ .fhw-ptitle{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:20px 2px 8px; font-size:20px; font-weight:900; color:#fff; letter-spacing:0.01em; } .fhw-mc{ font-size:11px; font-weight:600; color:rgba(255,255,255,0.55); letter-spacing:0.06em; text-align:right; } .fhw-cell{ --c-ring:var(--k-ring); --pc:#F6CC4D; --pc-soft:rgba(246,204,77,0.55); position:relative; overflow:hidden; border-radius:13px; border:1.5px solid var(--c-ring); background:linear-gradient(rgba(0,0,0,var(--k-dim)), rgba(0,0,0,var(--k-dim))), var(--k-bg) center/cover no-repeat; } /* 2 и 3 место: тот же чёрный фон финала, золотые линии перекрашены в серебро и бронзу */ .fhw-cell.p2{ --c-ring:#C9D0DB; --pc:#D7DEE9; --pc-soft:rgba(215,222,233,0.55); } .fhw-cell.p3{ --c-ring:#C98A52; --pc:#D9965B; --pc-soft:rgba(217,150,91,0.55); } .fhw-cell.p2, .fhw-cell.p3{ background:#04050a; } .fhw-cell.p2::before, .fhw-cell.p3::before{ content:''; position:absolute; inset:0; background:var(--k-bg) center/cover no-repeat; } .fhw-cell.p2::before{ filter:grayscale(1) brightness(1.12) contrast(1.05); } .fhw-cell.p3::before{ filter:sepia(1) saturate(2.1) hue-rotate(-16deg) brightness(.82); } /* Месяц: вместо кубка — крупная цифра места и аватарка в двойной обводке цвета места */ .fhw-ring{ display:inline-flex; padding:3px; border-radius:50%; border:1px solid var(--pc-soft); } .fhw-ring .fhw-ava{ border-color:var(--pc); } .fhw-in{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 12px; } .fhw-row.is-first .fhw-in{ padding:12px; } .fhw-tx{ min-width:0; flex:1; } .fhw-pl{ flex:0 0 auto; margin-left:auto; padding-left:8px; font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--pc); text-shadow:0 1px 3px rgba(0,0,0,0.7); } .fhw-row.is-first .fhw-pl{ font-size:12px; } .fhw-nm{ font-size:15px; font-weight:800; color:#fff; word-break:break-word; text-shadow:0 1px 4px rgba(0,0,0,0.7); } .fhw-row.is-first .fhw-nm{ font-size:19px; font-weight:900; color:var(--k-txt); } /* Сезон и год: чемпион на всю ширину, 2 и 3 место рядом ниже */ .fhw-cell{ cursor:pointer; -webkit-tap-highlight-color:transparent; } .fhw-you{ display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.06em; vertical-align:middle; background:#12a34a; color:#04150a; text-shadow:none; } .fhw-cell.is-me{ border-color:#12a34a !important; box-shadow:0 0 0 1.5px #04150a, 0 0 12px 2px rgba(18,163,74,.75) !important; } .fhw-per.fhw-bare{ padding:0; margin:0; border:0; background:none; } .fhw-ava{ flex:0 0 auto; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:radial-gradient(circle at 35% 30%,#3b82f6,#1a2236); border:2px solid rgba(255,255,255,0.4); } .fhw-ava img{ width:100%; height:100%; object-fit:cover; display:block; } /* Кубок места: img-28, 2 место серебро, 3 бронза */ .fh-cup{ width:auto; flex:0 0 auto; border-radius:7px; box-shadow:0 2px 6px rgba(0,0,0,0.5); } .fh-cup.cup-p2{ filter:grayscale(1) brightness(1.35) contrast(1.05); } .fh-cup.cup-p3{ filter:sepia(.75) saturate(1.5) hue-rotate(-18deg) brightness(.8); } /* Завершённый финал в ленте: широкая карточка с фоном финала */ .week-card.is-past-card.is-wide-final{ background: var(--fmt-bg, var(--royal-mid)) !important; border:2px solid var(--fc) !important; animation:none !important; box-shadow:0 0 12px color-mix(in srgb, var(--fc) 45%, transparent) !important; } .week-card.is-past-card.is-wide-final .daytag{ opacity:1; } .week-card.is-past-card.is-wide-final .cardtop{ padding-right:8px; flex-wrap:nowrap; } .week-card.is-past-card.is-wide-final .past-badge{ max-width:none !important; overflow:visible !important; margin-left:auto; font-size:10px !important; padding:2px 8px !important; } .week-card.is-past-card.is-wide-final .card-time{ display:none; } .week-card.is-past-card.is-wide-final .accent-bar{ opacity:1; } .wfd-body{ padding:0 10px 6px; } .wfd-champ{ display:flex; align-items:center; gap:6px; margin-top:6px; } .wfd-tx{ min-width:0; } .wfd-lb{ font-size:9px; font-weight:800; letter-spacing:0.1em; color:var(--fc); } .wfd-nm{ font-size:13px; font-weight:800; color:#fff; line-height:1.1; text-shadow:0 1px 3px rgba(0,0,0,0.6); word-break:break-word; } .wfd-rest{ margin-top:5px; font-size:10px; color:rgba(255,255,255,0.85); line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,0.6); } /* Окно итогов завершённого финала: фон финала, только призёры */ #results-modal.final-month .modal-sheet{ background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), var(--fmt-month-bg) center/cover no-repeat !important; border-color:color-mix(in srgb, var(--c-month) 60%, transparent) !important; } #results-modal.final-season .modal-sheet{ background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), var(--fmt-season-bg) center/cover no-repeat !important; border-color:color-mix(in srgb, var(--c-season) 60%, transparent) !important; } #results-modal.final-year .modal-sheet{ background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), var(--fmt-year-bg) center/cover no-repeat !important; border-color:color-mix(in srgb, var(--c-year) 60%, transparent) !important; } /* Итоги финала — короткое окно: по центру экрана, а не прижатым к низу */ #results-modal.final-month, #results-modal.final-season, #results-modal.final-year{ align-items:center; padding:16px; } #results-modal.final-month .modal-sheet, #results-modal.final-season .modal-sheet, #results-modal.final-year .modal-sheet{ border-radius:20px !important; width:min(100%,420px); max-height:min(78vh, calc(100% - 48px)); } #results-modal.final-month .modal-head, #results-modal.final-season .modal-head, #results-modal.final-year .modal-head{ background:none !important; box-shadow:none !important; border-bottom:0 !important; } #results-modal.final-month .modal-head h2{ color:var(--c-month-tint); } #results-modal.final-season .modal-head h2{ color:var(--c-season-tint); } #results-modal.final-year .modal-head h2{ color:var(--c-year-tint); } #results-modal.final-month .results-sub, #results-modal.final-season .results-sub, #results-modal.final-year .results-sub{ background:none; border-bottom:0; } #results-modal.final-month .results-list, #results-modal.final-season .results-list, #results-modal.final-year .results-list{ padding:4px 14px 18px; display:flex; flex-direction:column; gap:6px; } .rating-head h1{font-size:13.8px; text-transform:none; font-weight:600; color:#E8B03C; letter-spacing:0;} .rating-head .rating-club-line{color:#E8B03C;} .rating-season-year{ font-family:var(--theme-font); font-weight:700; letter-spacing:0; } .search{ margin:10px 20px 4px; padding:9px 14px; border-radius:20px; background:rgba(255,255,255,0.06); border:1px solid var(--line); font-size:11.5px; color:var(--ink-dim); } .r-name .r-city-tag{ display:block; margin-top:1px; font-size:9px; font-weight:500; line-height:1.2; color:rgba(255,255,255,0.42); letter-spacing:0.02em; } .pod-name .r-city-tag{ margin-top:2px; font-size:9px; font-weight:500; color:rgba(255,255,255,0.45); } table.board{width:100%; border-collapse:collapse;} table.board th{ text-align:left; font-family:var(--theme-hdg-font); font-size:8.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.04em; padding:0 4px 8px; font-weight:500; } table.board td{padding:7px 4px; font-size:12px;} .rank{font-family:var(--theme-hdg-font); font-size:14px; color:#fff; width:18px;} .player{display:flex; align-items:center; gap:8px;} .empty-note{ text-align:center; font-size:11px; color:var(--ink-dim); padding:30px 20px; } .fh-city-pills{ display:flex; gap:3px; margin:0 16px 8px; padding:3px; background: rgba(0,0,0,0.28); border-radius: 999px; overflow:hidden; } .fh-city-pills button{ flex:1; min-width:0; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.62); font-size: 11.7px; font-weight: 600; padding: 7.8px 6px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .fh-city-pills button.on{ background: linear-gradient(180deg, #3E3E46 0%, #1A1A1E 52%, #0B0B0D 100%); color: #fff; border-color: rgba(255,255,255,0.16); box-shadow: 0 3px 0 #050506, 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 5px rgba(0,0,0,0.45); } /* ВКЛАДКА «РЕЙТИНГ» */ .rating-months button.rating-overall, .rating-months button[data-month="all"]{ background: linear-gradient(165deg, #004FBA 0%, #073B8A 55%, #02235A 100%); color: #fff; font-weight: 800; box-shadow: 0 3px 0 #021a45, 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.22); border: 1px solid rgba(140,180,255,0.35); } .rating-months button.rating-overall.on, .rating-months button[data-month="all"].on{ box-shadow: 0 0 0 1px rgba(200,220,255,0.4), 0 3px 0 #021a45, inset 0 1px 0 rgba(255,255,255,0.25); } .rating-months button.rating-year-btn{ font-size: 11px !important; letter-spacing: -0.01em; font-weight: 800 !important; background: rgba(232,176,60,0.14) !important; border-color: rgba(232,176,60,0.35) !important; color: rgba(255,230,170,0.9) !important; } .rating-months button.rating-year-btn.on{ background: linear-gradient(180deg, #E8B03C 0%, #B8842A 100%) !important; border-color: rgba(255,220,150,0.6) !important; color: #1a1200 !important; } /* ПОДИУМ: три колонки на всю ширину списка (2-е · 1-е · 3-е), ступенями по высоте. Всё считается от ширины экрана (flex:1) — на любом устройстве заполняет строку. */ .rating-podium{ display:block; margin:0 10px 8px; padding-top:0; } .rating-list .r-row.pod-gold{ background: linear-gradient(90deg, rgba(226,185,90,0.55) 0%, rgba(226,185,90,0.28) 100%), var(--royal-bot) !important; box-shadow: inset 0 0 0 1.5px #f0c445; } .rating-list .r-row.pod-silver{ background: linear-gradient(90deg, rgba(198,206,220,0.5) 0%, rgba(198,206,220,0.24) 100%), var(--royal-bot) !important; box-shadow: inset 0 0 0 1.5px #d7dde6; } .rating-list .r-row.pod-bronze{ background: linear-gradient(90deg, rgba(205,127,50,0.55) 0%, rgba(205,127,50,0.28) 100%), var(--royal-bot) !important; box-shadow: inset 0 0 0 1.5px #cd7f32; } .rating-list .pod-gold .r-num, .rating-list .pod-silver .r-num, .rating-list .pod-bronze .r-num{ font-weight:700; } .rating-list .pod-gold .r-num{ color:#FFD23F; } .rating-list .pod-silver .r-num{ color:#EEF2FA; } .rating-list .pod-bronze .r-num{ color:#FFB070; } /* Лесенка мест: 3-е крупнее остального списка, 2-е ещё крупнее, 1-е самое крупное */ .rating-list .r-row.pod-bronze{ grid-template-columns:25.4px 42.4px minmax(0,1fr) 70.0px 53.0px !important; gap:8.5px !important; padding:12.9px 16px 12.9px 10px !important; } .rating-list.no-ko .r-row.pod-bronze{ grid-template-columns:25.4px 42.4px minmax(0,1fr) 116.6px !important; } .rating-list .r-row.pod-bronze .r-num{ font-size:15.4px !important; } .rating-list .r-row.pod-bronze .r-ava-wrap, .rating-list .r-row.pod-bronze .r-ava-wrap .r-ava, .rating-list .r-row.pod-bronze .r-ava-wrap .r-ava img{ width:42.4px !important; height:42.4px !important; } .rating-list .r-row.pod-bronze .r-ava.empty::before{ line-height:42.4px !important; font-size:19.1px !important; } .rating-list .r-row.pod-bronze .r-name{ font-size:13.8px !important; } .rating-list .r-row.pod-bronze .r-pts{ font-size:17.0px !important; } .rating-list .r-row.pod-bronze .ko-chip{ font-size:18.0px !important; } .rating-list .r-row.pod-silver{ grid-template-columns:26.9px 44.8px minmax(0,1fr) 73.9px 56.0px !important; gap:9.0px !important; padding:14.8px 16px 14.8px 10px !important; } .rating-list.no-ko .r-row.pod-silver{ grid-template-columns:26.9px 44.8px minmax(0,1fr) 123.2px !important; } .rating-list .r-row.pod-silver .r-num{ font-size:16.2px !important; } .rating-list .r-row.pod-silver .r-ava-wrap, .rating-list .r-row.pod-silver .r-ava-wrap .r-ava, .rating-list .r-row.pod-silver .r-ava-wrap .r-ava img{ width:44.8px !important; height:44.8px !important; } .rating-list .r-row.pod-silver .r-ava.empty::before{ line-height:44.8px !important; font-size:20.2px !important; } .rating-list .r-row.pod-silver .r-name{ font-size:14.6px !important; } .rating-list .r-row.pod-silver .r-pts{ font-size:17.9px !important; } .rating-list .r-row.pod-silver .ko-chip{ font-size:19.0px !important; } .rating-list .r-row.pod-gold{ grid-template-columns:28.3px 47.2px minmax(0,1fr) 77.9px 59.0px !important; gap:9.4px !important; padding:16.7px 16px 16.7px 10px !important; } .rating-list.no-ko .r-row.pod-gold{ grid-template-columns:28.3px 47.2px minmax(0,1fr) 129.8px !important; } .rating-list .r-row.pod-gold .r-num{ font-size:17.1px !important; } .rating-list .r-row.pod-gold .r-ava-wrap, .rating-list .r-row.pod-gold .r-ava-wrap .r-ava, .rating-list .r-row.pod-gold .r-ava-wrap .r-ava img{ width:47.2px !important; height:47.2px !important; } .rating-list .r-row.pod-gold .r-ava.empty::before{ line-height:47.2px !important; font-size:21.2px !important; } .rating-list .r-row.pod-gold .r-name{ font-size:15.3px !important; } .rating-list .r-row.pod-gold .r-pts{ font-size:18.9px !important; } .rating-list .r-row.pod-gold .ko-chip{ font-size:20.1px !important; } .pod{ position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content:flex-start; box-sizing: border-box; padding: 0 6px 12px; text-align: center; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); overflow: visible; min-height: 96px; } .pod .pod-name .r-city-tag, .pod-name .r-city-tag{ display: none !important; } .pod.gold{ min-height: 124px; border-color: rgba(255,215,120,0.8); background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 28%), linear-gradient(180deg, #E2B95A 0%, #B8862E 45%, #6E4E16 100%); box-shadow: inset 0 1px 2px rgba(255,245,200,0.6), 0 10px 22px rgba(0,0,0,0.4), 0 0 14px rgba(240,195,80,0.25); } .pod.silver{ min-height: 108px; border-color: rgba(215,222,238,0.7); background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 28%), linear-gradient(180deg, #C2C8D8 0%, #8A90A4 45%, #4C5164 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.55), 0 8px 18px rgba(0,0,0,0.35); } .pod.bronze{ min-height: 96px; border-color: rgba(225,150,85,0.75); background: linear-gradient(180deg, rgba(255,230,200,0.22) 0%, rgba(255,255,255,0) 28%), linear-gradient(180deg, #CC9264 0%, #96602F 45%, #53311A 100%); box-shadow: inset 0 1px 2px rgba(255,225,190,0.5), 0 8px 18px rgba(0,0,0,0.35); } .pod-ava{ border-radius:50%; background:rgba(255,255,255,0.10); border:2px solid rgba(255,255,255,0.35); overflow:hidden; } .pod-ava img{ width:100%; height:100%; object-fit:cover; display:block; } .pod.gold .pod-ava{ border-color:rgba(255,215,110,0.95); } .pod.silver .pod-ava{ border-color:rgba(225,230,245,0.9); } .pod.bronze .pod-ava{ border-color:rgba(235,160,95,0.9); } .pod-name{ display:flex; align-items:center; justify-content:center; gap:4px; font-size:13px; font-weight:700; color:#fff; line-height:1.2; margin-bottom:4px; max-width:100%; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; } .pod.gold .pod-name{ font-size:14px; } .pod-pts{ font-family:var(--theme-hdg-font); font-size:22px; line-height:1.1; color:#fff; white-space:nowrap; } .pod.gold .pod-pts{ font-size:26px; color:#FFF1BF; } .pod-ko{ font-family:var(--theme-font); font-size:12px; font-weight:600; color:rgba(255,255,255,0.78); margin-left:6px; letter-spacing:.3px; } .rating-search-wrap input{ width:100%; } .rating-search-wrap input::placeholder{ color:rgba(255,255,255,0.35); } /* чужой профиль */ /* кнопка настроек аватарки — только в своём профиле */ #tab-profile.viewing-other .avatar-settings-btn{ display:none !important; } #tab-profile.viewing-other .loyalty-card, /* История визитов видна и в чужом профиле */ #tab-profile.viewing-other .loyalty-visits-btn { display: flex !important; } /* чужой профиль: контакты на месте токена, форма как у токена, цвет как у кнопки контактов */ #tab-profile.viewing-other #tile-token{ display:none !important; } #tab-profile.viewing-other #tile-screen-settings{ display:none !important; } #tab-profile:not(.viewing-other) #tile-token{ display:none !important; } /* нижний slim «контакты» в чужом профиле не нужен — плитка уже на месте токена */ #tab-profile.viewing-other .settings-btn-row{ flex-direction: column; gap: 8px; padding: 10px 20px 16px; width: 100%; box-sizing: border-box; } #tab-profile.viewing-other .settings-btn-row{ display:none !important; } .profile-home-btn{ display:none; align-items:center; justify-content:center; gap:5.75px; margin:0 0 5px; padding:5.75px 12.65px; border-radius:999px; border:1px solid rgba(255,255,255,0.65); background:rgba(8,10,26,0.9); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:0.02em; text-transform:none; cursor:pointer; flex-shrink:0; white-space:nowrap; width:fit-content; } .profile-home-btn .triple-chevron{ overflow:hidden; } @keyframes chevFlow{ 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } } .profile-home-btn .triple-chevron .chev1{ animation: chevFlow 1.9s ease-in-out infinite; animation-delay: 0s; } .profile-home-btn .triple-chevron .chev2{ animation: chevFlow 1.9s ease-in-out infinite; animation-delay: 0.22s; } .profile-home-btn .triple-chevron .chev3{ animation: chevFlow 1.9s ease-in-out infinite; animation-delay: 0.44s; } #tab-profile.viewing-other .profile-home-btn{ display:flex; } .avatar-lg img{ position:relative; z-index:1; background:transparent; } .avatar-lg .avatar-empty-icon{ display:none !important; width:55%; height:55%; position:absolute; z-index:0; pointer-events:none; } .avatar-lg.is-empty img{ display:none !important; } .avatar-lg.is-empty .avatar-empty-icon{ display:block !important; } /* рейтинг: один слой аватарки */ .r-ava.empty img{ display:none; } .uname-row{ flex-wrap:nowrap; min-width:0; } .uname-row .uname{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .r-row{ cursor:pointer; } .r-row:active{ background:rgba(255,255,255,0.1); } .pod{ cursor:pointer; } .player-city-line{ display:none; font-size:11px; color:var(--ink-dim); margin-top:2px; font-weight:600; } .rating-list{ margin:0 10px 12px; } .r-row{ display:grid; grid-template-columns:24px 40px minmax(0,1fr) 66px 50px; gap:8px; padding:11px 16px 11px 10px; border-radius:10px; margin-bottom:3px; background: var(--royal-bot); min-height: 40px; overflow: visible; } .r-ava{ width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.08); border:none; overflow:hidden; flex-shrink:0; box-sizing:border-box; } .r-ava img{ width:100%; height:100%; object-fit:cover; display:block; } .r-ava.empty{ background:rgba(255,255,255,0.06); } /* Нет фото — в кружке первая буква ника (как в окне игрока). Центр по высоте — через line-height, потому что ниже кружок принудительно display:block 40×40. */ .r-ava.empty::before{ content:attr(data-letter); display:block; line-height:40px; text-align:center; font-family:var(--theme-font); font-weight:700; font-size:18px; color:rgba(255,255,255,.7); } .r-row:nth-child(even){ background: var(--royal-mid); } /* Стрелки изменения места у номера в рейтинге */ .r-num.has-mv{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .r-mv{ font-family:var(--theme-font); font-size:9px; font-weight:800; line-height:1; margin-top:2px; letter-spacing:0; text-shadow:none; } .r-mv.up{ color:#3ecf8e; } .r-mv.down{ color:#ff6b6b; } .r-mv.eq{ color:#8fa0cc; } .r-mv.new{ color:#7fd0ff; font-size:7px; border:1px solid rgba(127,208,255,0.45); border-radius:4px; padding:1px 2px; } /* Рейтинг на масштабе 90% (общий масштаб экрана 80%): zoom 0.9/0.8 = 1.125 */ #tab-rating > *{ zoom:1.125; } .r-list-head{ display:grid; grid-template-columns:24px 40px minmax(0,1fr) 66px 50px; align-items:end; gap:8px; padding:4px 16px 8px 10px; margin: 0 0 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); } /* «Место / Игрок» — один span на первые 3 колонки (место + аватар + имя), поэтому отступы вокруг слэша ровные. */ .r-list-head .rh-group{ grid-column: 1 / 4; text-align: left; padding-left: 10px; white-space: nowrap; } /* Шапка и строки — одна фиксированная сетка колонок (66px/50px, gap 8px): «ОЧКИ»/«КО» строго над цифрами. */ .r-list-head .rh-pts{ text-align: center; position: relative; } /* Слэш между "Очки" и "КО" — не приклеен ни к одному из слов: стоит отдельным символом ровно в зазоре между колонками (position:absolute, не участвует в раскладке грид-колонок и не сдвигает "КО"). */ .r-list-head .rh-pts::after{ content: '/'; position: absolute; top: 0; right: -7.5px; color: rgba(255,255,255,0.4); } .r-list-head .rh-ko{ text-align: center; padding-left: 4px; } /* Сортировка: «Очки» и «КО» в шапке — кнопки; активная подсвечена и со стрелкой */ .r-list-head .rh-sort{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:rgba(255,255,255,.5); background:none; border:1px solid transparent; border-radius:8px; padding:3px 0; cursor:pointer; } .r-list-head .rh-sort.on{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); } /* Колонка ОЧКИ — сплошная мягкая заливка на всю высоту строки, скруглённая слева: цветом видно, что справа начинается зона показателей (очки + КО), а не просто текст у края. */ .r-pts{ font-family:var(--theme-hdg-font); font-size:16px; color:#fff; white-space:nowrap; text-align: center; background: rgba(255,255,255,0.06); margin: -5px 0; padding: 5px 6px; border-radius: 8px 0 0 8px; } /* КО — та же заливка, что у ОЧКИ, зеркально: слева обрезана (стык с колонкой очков), справа скруглена. Вместе ОЧКИ+КО читаются как один непрерывный "стат-бар", а не как две разные детали. Цифры в обеих плашках — по центру своей плашки. */ .r-ko{ display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); margin: -5px 0; padding: 5px 6px; border-radius: 0 8px 8px 0; } /* За месяцы до сентября 2026 КО не собирали — колонка убирается целиком (сетка сжимается до 4 колонок), очки занимают освободившееся место. */ .rating-list.no-ko .r-list-head, .rating-list.no-ko .r-row{ grid-template-columns:24px 40px minmax(0,1fr) 110px !important; } .rating-list.no-ko .r-pts{ border-radius:8px; } .rating-list.no-ko .r-list-head .rh-pts::after{ display:none; } .r-num{ font-family:var(--theme-hdg-font); color:rgba(255,255,255,0.92); text-align:center; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .r-name{ font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .r-row.final-month-slot, .r-row.out-final-slot{ position: relative; } .r-row.final-month-slot{ /* цвет зоны задаётся --fm-r/g/b — плотнее, видно на плашке */ border: 1.5px solid rgba(var(--fm-r, 40), var(--fm-g, 200), var(--fm-b, 90), 0.55) !important; background: linear-gradient(165deg, rgba(255,255,255,0.14) 0%, transparent 42%), linear-gradient(90deg, rgba(var(--fm-r, 40), var(--fm-g, 200), var(--fm-b, 90), 0.42) 0%, rgba(var(--fm-r, 40), var(--fm-g, 200), var(--fm-b, 90), 0.22) 100%) !important; box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 8px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -2px 6px rgba(0,0,0,0.2) !important; } .r-row.final-month-slot .r-num{ color: #fff !important; opacity: 1 !important; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .r-row.final-month-slot .r-name{ font-weight: 700; color: #fff !important; } .r-row.final-month-slot .r-pts{ color: #fff !important; opacity: 0.95; } /* вне топа — слабый красный, не доминирует */ .r-row.out-final-slot{ border: 1px solid rgba(160, 50, 45, 0.22) !important; background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 40%), linear-gradient(90deg, rgba(140, 40, 36, 0.16) 0%, rgba(140, 40, 36, 0.07) 100%) !important; box-shadow: 0 2px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* Колонка КО целиком — своя заливка (см. .r-ko выше); ширина всегда равна ширине колонки. */ .ko-chip{ font-family:var(--theme-hdg-font); font-size:17px; color:var(--gold-light); white-space: nowrap; } .ko-chip.zero{ color:rgba(255,255,255,0.28); } .rating-meta{ text-align:center; font-size:11px; color:rgba(255,255,255,0.3); margin:4px 14px 16px; } /* ВКЛАДКА «ФОРМАТЫ» — строки одной высоты при любом тексте; финалы — своим цветом */ .fmt-list{ display:flex; flex-direction:column; gap:8px; padding:4px 14px 16px; } .fmt-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; box-sizing:border-box; padding:0 14px; border-radius:16px; position:relative; overflow:hidden; background: var(--fmt-bg, linear-gradient(155deg, var(--royal-top) 0%, var(--royal-bot) 120%)); border:1px solid rgba(255,255,255,0.18); box-shadow:0 12px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06); cursor:pointer; font-family:inherit; color:#fff; text-align:left; width:100%; } .fmt-card.fmt-light{ filter:none; } /* Фон, цвет и рамка любой карточки — из оформления формата (--fmt-bg, --fc, fl-full); у финалов здесь только своя высота. */ .fmt-card.fmt-month{ height: calc(74px * 1.10); } .fmt-card.fmt-season{ height: calc(74px * 1.15); } .fmt-card.fmt-year{ height: calc(74px * 1.20); } /* Финалы — сочнее и выигрышнее остальных форматов (графику/окна не трогаем) */ .fmt-card.fmt-month, .fmt-card.fmt-season, .fmt-card.fmt-year{ position: relative; z-index: 1; isolation: isolate; } .fmt-card.fmt-month .fmt-title, .fmt-card.fmt-season .fmt-title, .fmt-card.fmt-year .fmt-title{ font-size: 21px !important; font-weight: 800 !important; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 0 12px rgba(255,255,255,0.2); } .fmt-card .fmt-trophy img{ filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 12px color-mix(in srgb, var(--fc, #FFDC78) 30%, transparent)); } .fmt-card.fmt-month:active, .fmt-card.fmt-season:active, .fmt-card.fmt-year:active{ transform: translateY(2px) scale(0.99); box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 2px 0 rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.25) !important; } /* Обучение — своя высота и крупный заголовок; фон и рамка — как у всех, из оформления формата */ .fmt-card.fmt-learn{ height: 74px; filter: none !important; } .fmt-card.fmt-learn:active{ filter: none !important; transform: scale(0.985); } .fmt-card.fmt-learn .fmt-title{ text-shadow: 0 1px 3px rgba(0,0,0,0.45); font-size: 24.2px; font-weight: 800; letter-spacing: 0.04em; } .fmt-card.fmt-learn .fmt-desc{ display: inline-block !important; color: #FFFFFF; font-weight: 700; font-size: 12.1px; margin-top: 4px; padding: 2px 8px; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; background: rgba(0,0,0,0.18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* финалы: только кубок, без квадратной аватарки */ .fmt-trophy{ flex-shrink: 0; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0; } .fmt-trophy img{ width: 54px; height: 54px; object-fit: contain; display: block; background: transparent; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55)); } .fmt-card.fmt-season .fmt-trophy img{ width:56px; height:56px; } .fmt-card.fmt-year .fmt-trophy img{ width:58px; height:58px; } /* обучение: пустой слот без стекляшки */ .fmt-slot{ width: 48px; height: 48px; flex-shrink: 0; background: transparent; border: none; } .fmt-card .fmt-info{ min-width:0; overflow:hidden; } .fmt-card .fmt-title{ font-family:var(--theme-hdg-font); font-size:18px; text-transform:uppercase; color:#fff; line-height:1.12; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .fmt-card .fmt-desc{ display:inline-block; font-size:9.5px; color:var(--gold-light); margin-top:5px; padding:2px 8px; box-sizing:border-box; border:1px solid rgba(232,200,132,0.55); border-radius:999px; background:rgba(255,255,255,0.05); font-weight:700; letter-spacing:0.04em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fmt-badge{ width:52px; height:52px; border-radius:12px; flex-shrink:0; overflow:hidden; border:2px solid var(--fc, rgba(255,255,255,0.25)); box-shadow:0 6px 14px rgba(0,0,0,0.4); background:rgba(255,255,255,0.06); } .fmt-badge img{ object-fit:contain; object-position:center; display:block; filter: none !important; /* рисуется сразу нужного размера (не scale) — картинка остаётся чёткой */ width:115%; height:115%; margin:-7.5% 0 0 -7.5%; } .fmt-card.fmt-year .fmt-badge img, .fmt-card.fmt-season .fmt-badge img, .fmt-card.fmt-month .fmt-badge img, .fmt-card.fmt-learn .fmt-badge img{ object-fit: contain; object-position: center; background: transparent; } /* окно формата — только чипы, оба города, без цены */ .fmt-detail-city{ margin-top:19px; } .fmt-detail-city h3{ font-family:var(--theme-hdg-font); font-size:13px; color:var(--gold-light); margin-bottom:8px; } .fmt-detail-stats{ display:flex; gap:8px; } .fmt-detail-stats div{ flex:1; text-align:center; padding:10px 4px; border-radius:10px; background:rgba(255,255,255,0.05); } .fmt-detail-stats b{ display:block; font-family:var(--theme-hdg-font); font-size:15px; color:#fff; } .fmt-detail-stats span{ font-size:8px; color:var(--ink-dim); text-transform:uppercase; } /* ОКНО СТРУКТУРЫ — открывается поверх экрана телефона, плавное появление снизу */ .address-popover{ display:none; position:absolute; z-index:210; min-width: 200px; max-width: 260px; } .address-popover.open{ display:block; } .address-popover-inner{ background: linear-gradient(155deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.03) 100%), linear-gradient(180deg, rgba(30,58,122,0.92) 0%, rgba(12,18,50,0.96) 100%); border: 1px solid rgba(255,255,255,0.32); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.28); color: #fff; } .ap-title{ font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: 6px; } .ap-text{ font-size: 13px; font-weight: 500; line-height: 1.35; } .modal-overlay.near-btn{ align-items: flex-start; justify-content: center; padding: 0; } .modal-overlay.near-btn .modal-sheet{ position: absolute; margin: 0 !important; transform: none !important; opacity: 1 !important; max-height: calc(100% - 200px); overflow: hidden; width: calc(100% - 32px) !important; max-width: none !important; left: 16px !important; right: 16px !important; } #structure-modal.modal-overlay{ z-index: 10100 !important; } .about-seg{display:flex;margin:0 16px 8px;padding:3px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);flex-shrink:0} .about-seg-btn{flex:1;border:0;background:transparent;color:rgba(255,255,255,.55);font-weight:700;font-size:12px;padding:8px 6px;border-radius:8px} .about-seg-btn.on{background:rgba(232,176,60,.22);color:#E8B03C} .profile-docs-list{display:none;margin:8px 0 4px} .profile-docs-list.open{display:block} .profile-docs-row{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:12px;padding:12px 14px;margin-top:7px;font-size:13.5px;font-weight:600;cursor:pointer } .reg-consent-block{ margin-top:8px; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); } .reg-consent-block.confirmed{ border-color: rgba(76,175,80,0.45); background: rgba(76,175,80,0.08); } .reg-consent-row{ display:flex; align-items:center; gap:8px; justify-content:space-between; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:7px 10px; margin-top:6px; } .reg-consent-block .reg-consent-row:first-child{ margin-top:0; } .reg-consent-row .offer-gate-check{ display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.3; } .reg-consent-row .offer-gate-check input{ flex-shrink:0; width:18px; height:18px; accent-color:#4caf50; } .reg-consent-read{ flex-shrink:0; font-size:11px; font-weight:700; color:#fff; cursor:pointer; text-decoration:none; line-height:1; padding:6px 10px; border-radius:8px; background: rgba(232,176,60,0.18); border:1px solid rgba(232,176,60,0.55); } /* Строка «Я ознакомлен и согласен с офертой» / «Я даю согласие на обработку персональных данных» на форме регистрации — зеленеет после нажатия «Подтвердить» (не сразу при отметке галочки). «Читать» рядом открывает текст просто для чтения — там ничего не принимается, принятие только галочками + кнопкой «Подтвердить». */ #auth-reg-offer-row, #auth-reg-pd-row, #auth-reg-img-row{ transition: border-color 0.4s ease, background 0.4s ease; } #auth-reg-offer-row.confirmed, #auth-reg-pd-row.confirmed, #auth-reg-img-row.confirmed{ border-color: rgba(76,175,80,0.5); background: rgba(76,175,80,0.12); } #auth-reg-offer-row.confirmed span, #auth-reg-pd-row.confirmed span, #auth-reg-img-row.confirmed span{ color:#8fe0a0; } .reg-consent-row.confirmed .reg-consent-read, .reg-consent-row.confirmed input{ display:none; } .reg-consent-row .reg-ok{ display:none; flex-shrink:0; width:18px; height:18px; color:#8fe0a0; } .reg-consent-row.confirmed .reg-ok{ display:block; } .reg-consent-confirm-btn{ width:100%; margin-top:8px; padding:9px 12px; border-radius:10px; border:1.5px solid rgba(76,175,80,0.5); background:rgba(76,175,80,0.12); color:#8fe0a0; font-size:13px; font-weight:700; cursor:pointer; text-align:center; opacity:0.4; pointer-events:none; transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .reg-consent-confirm-btn.enabled{ opacity:1; pointer-events:auto; } .reg-consent-confirm-btn.confirmed{ display:none; } #auth-reg-submit-btn{ display:none; margin-top:10px; } #auth-reg-submit-btn.ready{ display:block; opacity:1 !important; } #reg-doc-modal{ position:absolute; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:18px 14px; background:rgba(0,0,0,0.45); } #reg-doc-modal.open{ display:flex; } #reg-doc-sheet{ width:100%; max-width:420px; max-height:78vh; display:flex; flex-direction:column; border-radius:16px; background: linear-gradient(180deg, #2a2d32 0%, #1a1c20 55%, #101114 100%); border:1px solid rgba(255,255,255,0.12); padding:16px 16px 12px; box-sizing:border-box; } #reg-doc-title{ font-family:var(--theme-hdg-font); font-weight:400; letter-spacing:0.05em; font-size:26px; color:#E8B03C; margin:0 0 12px; line-height:1.1; } #reg-doc-scroll{ overflow:auto; flex:1; min-height:0; padding-right:4px; text-align:center; } #reg-doc-body{ font-size:13px; line-height:1.5; color:#cfd3dc; } #reg-doc-body .reg-doc-h{ font-family:var(--theme-font); color:#C49632; font-size:13.5px; font-weight:700; margin:14px 0 6px; line-height:1.3; text-transform:none; letter-spacing:0; } #reg-doc-body .reg-doc-h:first-child{ margin-top:0; } #reg-doc-body p{ margin:0 0 8px; } #reg-doc-hint{ display:none; text-align:center; color:#E8B03C; height:22px; margin-top:4px; } #reg-doc-modal.can-scroll #reg-doc-hint{ display:block; } #reg-doc-hint svg{ width:22px; height:22px; animation: regDocHint 1.4s ease-in-out infinite; } @keyframes regDocHint{ 0%,100%{ transform:translateY(0); opacity:.45;} 50%{ transform:translateY(5px); opacity:1;} } #reg-doc-close{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; margin:16px auto 0; padding:8px 14px; border-radius:10px; border:1px solid rgba(232,176,60,0.45); background:rgba(232,176,60,0.16); color:#fff; font-size:13px; font-weight:700; cursor:pointer; } #reg-doc-title, #reg-doc-body{ text-align:left; } #reg-doc-close .reg-doc-back{ width:16px; height:16px; animation: regDocBack 1.6s ease-in-out infinite; } @keyframes regDocBack{ 0%,100%{ transform:translateX(0); opacity:.55;} 50%{ transform:translateX(-5px); opacity:1;} } .modal-overlay{ position:absolute; inset:0; z-index:200; background:rgba(3,4,10,0); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.35s ease, background 0.35s ease; } .modal-overlay.open{ opacity:1; pointer-events:auto; background:rgba(3,5,20,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .modal-overlay:not(.open) .modal-sheet{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } .modal-sheet{ width:100%; max-height:78%; overflow-y:auto; background:linear-gradient(165deg, var(--royal-mid), var(--royal-bot)); border:1px solid rgba(255,255,255,0.16); border-bottom:none; border-radius:calc(20px * var(--radius-mult)) calc(20px * var(--radius-mult)) 0 0; padding:18px 20px 26px; box-shadow:0 -10px 30px rgba(0,0,0,0.5); transform:translateY(24px); transition:transform 0.4s cubic-bezier(.2,.9,.3,1.1); } /* Экран на масштабе 80%, окнам нужно 100%: содержимое окон увеличено в 1/0.8 = 1.25. Сам лист не растёт — его ширину и место задают проценты и JS, поэтому окно не вылезает за экран. */ .modal-sheet > *, .am-sheet > *, #reg-doc-sheet > *, .avatar-settings-sheet > *, .cf-overlay .cf > *{ zoom: 1.25; } /* окно структуры — тёмно-синее, как карточка дня; окно города — стеклянное, как афиша */ .modal-sheet.sheet-day{ background: linear-gradient(165deg, rgba(var(--shadow-tint), 0.4), rgba(var(--shadow-tint), 0.55)), linear-gradient(180deg, var(--royal-top), var(--royal-bot)); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-color: rgba(var(--card-border-glow, var(--theme-border-accent)), 0.3); } .fancy-sheet{ position:relative; overflow:hidden; padding:0 !important; max-width:100%; } .fancy-sheet .modal-bg{ position:absolute; inset:-16px; background-size:cover; background-position:center 10%; opacity:0.5; filter:blur(16px) brightness(0.55) saturate(1.2); transform:scale(1.15); z-index:0; } .fancy-sheet .modal-tint{ position:absolute; inset:0; z-index:1; background: linear-gradient(165deg, rgba(var(--glass-tint),0.12) 0%, transparent 50%), linear-gradient(165deg, rgba(var(--shadow-tint),0.42) 0%, rgba(var(--shadow-tint),0.72) 100%), linear-gradient(180deg, var(--royal-mid) 0%, var(--royal-bot) 100%); } .fancy-sheet .modal-inner{ position:relative; z-index:2; padding:14px 16px 16px; display:flex; flex-direction:column; min-height:0; max-height:100%; overflow: hidden; } .fancy-sheet .modal-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } .modal-sheet.sheet-hero{ background: rgba(var(--glass-tint), 0.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.18); } .modal-overlay.open .modal-sheet{ transform:translateY(0); } .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .modal-head h2{ font-family:var(--theme-hdg-font); font-size:17px; text-transform:uppercase; color:var(--gold-light); white-space:pre-line; line-height:1.15; overflow-wrap:anywhere; word-break:break-word; max-width:calc(100% - 88px); } /* Заголовок окна формата — светлым оттенком цвета формата (у всех форматов одинаково). Окна без формата (О нас, поддержка…) оттенка не имеют — белый. На фоне-картинке — лёгкая тень. */ #structure-sheet #modal-title{ color: var(--fc-tint, #fff) !important; } #structure-sheet.has-fbg #modal-title{ text-shadow: 0 1px 3px rgba(0,0,0,0.45); } #structure-sheet:not(.fl-full) #modal-body-text{ color: #fff !important; } /* Тег турнира ("БЕЗ АНТЕ", "БЕЗ ПРАВА НА ОШИБКУ" и т.п.) в модалке структуры — отдельный элемент со своей обводкой, не пересекается с чёлкой/акцентом афиши. */ .modal-tag-row{ margin:-6px 0 12px; } .modal-tag-row:empty, .modal-tag-chip:empty{ display:none; } .modal-tag-chip{ display:inline-block; font-family:var(--theme-hdg-font); font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:4px 12px; border-radius:999px; /* Рамка и подложка — цветом формата (узнаваемость), а текст — светлый: тёмные цвета формата (например «Классика», #5A5F72) на тёмном фоне не читались бы. */ border:1.5px solid var(--accent, rgba(255,255,255,0.55)); background: color-mix(in srgb, var(--accent, #4E8FD9) 22%, rgba(0,0,0,0.55)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .modal-close{ width:auto; height:auto; min-height:26px; border-radius:10px; background: rgba(0,0,0,0.85); /* темнее стеклянного окна */ border: 1px solid rgba(0,0,0,0.9); color:rgba(255,255,255,0.9); font-size:11px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; flex-shrink:0; padding: 5px 10px; font-family: inherit; box-shadow: none; margin: 0; } .modal-close:active{ background: rgba(255,255,255,0.14); } .modal-body{ color:#fff; font-size:12.5px; line-height:1.42; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 12px; padding-bottom: 40px; } .modal-body::-webkit-scrollbar{ display:none; } .tile.active{ border:none; box-shadow:0 0 0 1.5px var(--gold); } /* CONFIRM MODAL — same glass-blue palette as the hero announcement, white text, anchored near the Участвовать button */ .confirm-sheet{ background: rgba(var(--glass-tint), 0.62); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.18); border-radius:18px; } .confirm-title{ font-family:var(--theme-hdg-font); font-size:17px; color:#fff; line-height:1.25; } /* окно записи на турнир — компактная карточка по центру, а не вторая афиша */ /* ===== Семья окон-подтверждений (запись, лист ожидания, отмена, очередь, блокировка, разблокировка) ===== Карточка royal-blue, радиус 18, спокойная обводка цвета события: зелёная — запись и разблокировка, сиреневая — лист ожидания, красная — отмена и блокировка. Класс .cf стоит на самом окне, цвет — .cf-join/.cf-wait/... */ .cf, #confirm-modal .modal-sheet.cf{ border-radius:18px !important; padding:18px 14px 14px !important; text-align:center; box-sizing:border-box; background: linear-gradient(165deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 32%, transparent 52%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; box-shadow:0 16px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.22) !important; border:1.5px solid rgba(255,255,255,0.22) !important; font-family:var(--theme-font); } .cf-join, #confirm-modal .modal-sheet.cf-join{ border-color:rgba(46,196,92,0.7) !important; } .cf-wait, #confirm-modal .modal-sheet.cf-wait{ border-color:rgba(176,132,255,0.72) !important; } .cf-cancel, .cf-leave, .cf-ban, #confirm-modal .modal-sheet.cf-cancel, #confirm-modal .modal-sheet.cf-leave{ border-color:rgba(214,92,84,0.72) !important; } .cf-toggle{ border-color:rgba(240,196,90,0.7) !important; } .cf-unlock, #confirm-modal .modal-sheet.cf-unlock{ border-color:rgba(46,196,92,0.75) !important; background: linear-gradient(165deg, rgba(80,220,130,0.16) 0%, rgba(255,255,255,0.03) 36%, transparent 58%), linear-gradient(165deg, #146b45 0%, #0d4a36 46%, #07153f 100%) !important; } /* окно записи/очереди: заголовок и подзаголовок — #confirm-title / #confirm-sub */ .cf .confirm-title{ font-family:inherit; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.3; color:rgba(255,255,255,0.92); margin-bottom:0 !important; } .cf .confirm-sub{ font-family:inherit; font-size:13.5px; line-height:1.4; letter-spacing:0; text-transform:none; color:rgba(255,255,255,0.88); text-align:center; margin:0 0 14px; } .cf .cf-title{ display:block; font-size:22px; font-weight:800; line-height:1.15; color:#fff; margin:6px 0 2px; } .cf .cf-day{ display:block; font-size:13px; font-weight:800; letter-spacing:0.16em; color:var(--gold-light, #F0C45A); margin:6px 0 10px; text-transform:uppercase; } .cf .cf-q{ display:block; font-size:22px; font-weight:800; line-height:1.2; color:#fff; margin:2px 0 8px; } .cf .cf-badge{ display:inline-block; margin:0 auto 10px; padding:5px 12px; border-radius:999px; border:1.5px solid #b388ff; color:#eadcff; font-size:12.5px; font-weight:700; } .cf .cf-queue{ display:block; font-size:13px; font-weight:400; color:rgba(255,255,255,0.7); margin:-2px 0 10px; } .cf .cf-info{ display:block; font-size:17px; font-weight:700; line-height:1.35; color:#fff; margin:2px 0 4px; } .cf .cf-h{ font-size:22px; font-weight:800; line-height:1.2; color:#fff; margin:4px 0 8px; } .cf .cf-p{ font-size:13.5px; line-height:1.45; color:rgba(255,255,255,0.88); margin:0 0 14px; } .cf .cf-field{ width:100%; height:80px; box-sizing:border-box; resize:none; margin:0 0 10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.25); background:rgba(0,0,0,0.28); color:#fff; font:13.5px var(--theme-font); } .cf .cf-status{ font-size:12.5px; color:rgba(255,255,255,0.8); margin-top:8px; min-height:1em; } .cf .confirm-btn-row, .cf .cf-btns{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:0; } .cf .cf-btns.col{ flex-direction:column; align-items:stretch; } .cf .confirm-btn, .cf .cf-btn{ flex:1 1 0; min-width:0; height:42px; padding:0 6px; border:none; border-radius:999px; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:0.03em; text-transform:none; color:#fff; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,0.32), inset 0 -2px 4px rgba(0,0,0,0.22); } .cf .confirm-btn.is-main, .cf .cf-btn.is-main{ flex:1.18; height:46px; font-size:15px; letter-spacing:0.02em; } .cf .cf-btn.full{ flex:none; width:100%; } .cf .confirm-grey, .cf .cf-grey{ background:linear-gradient(180deg,#6a707b 0%,#4A4E58 55%,#3A3E46 100%); } .cf .confirm-violet, .cf .cf-violet{ background:linear-gradient(180deg,#a06bff 0%,#7a3fe0 52%,#5b27b8 100%); } .cf .confirm-blue, .cf .cf-blue{ background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, var(--royal-top) 0%, var(--royal-bot) 100%); } .cf .confirm-red, .cf .cf-red{ background:linear-gradient(180deg,#d06a62 0%,#A33E38 55%,#7E2E2A 100%); } .cf .confirm-green, .cf .cf-green{ background:linear-gradient(180deg,#1ec01e 0%,#0a9a0a 52%,#067006 100%); } .cf .confirm-started{ background:linear-gradient(180deg,#1ec01e 0%,#0a9a0a 52%,#067006 100%); } /* плашка внизу: правило про неявки */ .cf .confirm-note, .cf .cf-foot{ margin:14px 0 0 !important; padding:10px 8px !important; border:none !important; border-radius:12px; background:rgba(255,255,255,0.28); color:#111 !important; font-size:13px !important; font-weight:700; line-height:1.35 !important; text-align:center; } .cf .confirm-note:empty{ display:none; } /* окно записи у кнопки: 91% ширины экрана, по центру */ #confirm-modal.near-btn .cf{ width:91% !important; left:4.5% !important; right:4.5% !important; max-width:none !important; padding-bottom:14px !important; } /* окна, которые строит программа сама (блокировка, разблокировка, повторные записи) */ .cf .cf-reply{ margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.10); text-align:left; } .cf .cf-reply-h{ font-size:12px; font-weight:800; letter-spacing:0.04em; color:var(--gold-light, #F0C45A); margin-bottom:4px; } .cf .cf-reply-t{ font-size:13.5px; line-height:1.4; color:rgba(255,255,255,0.92); white-space:pre-wrap; } .cf-overlay{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(2,8,26,0.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .cf-overlay .cf{ width:91%; max-width:none; } .confirm-sub{ font-family:var(--theme-hdg-font); font-size:14px; color:#fff; margin-top:8px; letter-spacing:0.02em; } .confirm-note{ font-size:11px; color:rgba(255,255,255,0.75); line-height:1.5; margin-top:19px; } .confirm-btn-row{ display:flex; justify-content:center; align-items:stretch; gap:10px; margin-top:18px; } .confirm-btn{ flex:0 0 30%; min-width:78px; padding:12px 10px; border-radius:999px; font-family:var(--theme-hdg-font); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap; transition:transform 0.08s, filter 0.08s, box-shadow 0.08s; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 6px 14px rgba(0,0,0,0.35), 0 2px 0 rgba(255,255,255,0.22) inset, 0 -3px 6px rgba(0,0,0,0.28) inset; } .confirm-btn:active{ transform:scale(0.95) translateY(2px); filter:brightness(0.86); } .confirm-green{ background: linear-gradient(180deg, var(--fh-ok-1), var(--fh-ok-2)); color:var(--fh-ok-ink); border:1px solid rgba(255,255,255,0.18); } /* как зелёная кнопка «Участвовать», когда турнир уже начался */ .confirm-started{ background: #008000; background-image: none; color:#fff; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 3px 12px rgba(0, 128, 0, 0.35), 0 2px 0 rgba(255,255,255,0.18) inset, 0 -3px 6px rgba(0,0,0,0.28) inset; } #support-modal select, #support-modal textarea{ width:100%; margin-top:4px; margin-bottom:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:#fff; font:inherit; } #support-modal .support-lab{display:block;margin-top:8px;font-size:11px;color:rgba(255,255,255,0.45);} .confirm-grey{ background: linear-gradient(180deg, #5C616C 0%, #4A4E58 48%, #3A3E46 100%); color:#fff; border:1px solid rgba(255,255,255,0.18); } .confirm-red{ background: linear-gradient(180deg, #C45A52 0%, #A33E38 50%, #7E2E2A 100%); color:#fff; border:1px solid rgba(255,255,255,0.16); } /* размер: равные кнопки (да/нет) или одна главная (отмена / подтвердить участие) */ .confirm-size-eq{ flex:0 0 40%; } .confirm-size-sm{ flex:0 0 26%; font-size:12px; padding:12px 6px; } .confirm-size-lg{ flex:1 1 62%; font-size:12.5px; } .confirm-plain{ background:rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,0.3); } /* simple list rows reused for Медали / Free Entry info */ .modal-list{ display:flex; flex-direction:column; gap:8px; } .modal-list .row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); } .modal-list .row .num{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.08); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--theme-hdg-font); font-size:13px; } .modal-list .row .tt{ font-size:12.5px; font-weight:600; } .modal-list .row .dd{ font-size:10.5px; color:var(--ink-dim); margin-top:2px; } .preview-profile-row{ order: 1; } .preview-profile-row{ flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100%; } .preview-profile-look{ display: flex; flex-direction: column; align-items: center; gap: 10px; } /* ник в рейтинге — полоса фона, без «коробочки» */ .r-row{ align-items: center !important; } .r-name{ min-width: 0; flex: 1; z-index: 2; position: relative; } .r-row-ghost{opacity:0.42;filter:grayscale(0.25);} .r-row-ghost .r-name,.r-row-ghost .r-pts{color:rgba(255,255,255,0.55)!important;} .r-row-veteran{ border-radius: 8px; } /* Своя строка: sticky. bottom отрицательный — padding-bottom .screen уже равен бару+gap+safe, bottom:0 сидит НАД баром на величину этого padding. JS ниже ставит точный px. */ .rating-list .r-row.r-row-own{ position: -webkit-sticky; position: sticky; bottom: calc(58px - var(--fh-bn-h) - var(--fh-bn-gap)); z-index: 8; overflow: visible !important; background: linear-gradient(165deg, rgba(26,72,176,0.85) 0%, rgba(16,48,130,0.78) 100%) !important; border: 1.5px solid #0d6b32 !important; box-shadow: 0 0 0 1.5px #04150a, 0 0 8px 1px rgba(12,120,48,0.7), inset 0 1px 0 rgba(140,230,170,0.12) !important; } .rating-list .r-row.r-row-own.is-away::after{ content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #12a34a; pointer-events: none; z-index: 5; } .r-nick-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r-name-inner{ display: inline-flex; align-items: center; gap: 4px; max-width: 100%; } /* стили фона ника из мастерства */ .profile-head .player-name-row{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; max-width: 100%; } .photo-opt-label{ opacity: 0.75; } .results-sub{ font-size:11px; color:rgba(255,255,255,0.7); margin:0; padding:0 16px 10px; text-transform:uppercase; letter-spacing:0.04em; flex-shrink:0; } #results-modal .modal-sheet{ padding: 0; overflow: hidden; display: flex; flex-direction: column; } #results-modal .modal-head{ position: sticky; top: 0; z-index: 6; margin: 0; padding: 14px 16px 10px; flex-shrink: 0; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), linear-gradient(165deg, var(--results-accent, var(--royal-top)) 0%, var(--royal-bot) 120%); border-bottom: 1px solid rgba(255,255,255,0.14); box-shadow: 0 8px 18px rgba(0,0,0,0.25); } #results-modal .modal-head h2{ color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35); max-width: calc(100% - 88px); } #results-modal .results-sub{ background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.04)); border-bottom: 1px solid rgba(255,255,255,0.08); } .results-list{ display:flex; flex-direction:column; gap:6px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; padding: 12px 16px 18px; } .results-list::-webkit-scrollbar{ width: 0; height: 0; } /* «Игроки» / «Участники»: записанные — зелёная группа, лист ожидания — фиолетовая */ .pl-h{ margin:6px 2px 0; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; } .pl-h.pl-in{ color:var(--fh-ok-line); } .pl-h.pl-wait{ margin-top:14px; color:var(--fh-wait-line); } .results-row.pl-in{ background:color-mix(in srgb, var(--fh-ok-1) 18%, transparent); border-color:color-mix(in srgb, var(--fh-ok-line) 40%, transparent); } .results-row.pl-wait{ background:color-mix(in srgb, var(--fh-wait-1) 20%, transparent); border-color:color-mix(in srgb, var(--fh-wait-line) 40%, transparent); } /* Своя строка в любом списке: золотая обводка и прилипает к низу окна, если ушла вниз */ .results-row.is-me, .vote-row.is-me{ position:sticky; bottom:0; z-index:2; outline:2px solid #F2C94C; outline-offset:-2px; } /* прилипшая строка непрозрачна — под ней не просвечивают соседние */ .results-row.is-me{ background:#16306e; } .results-row.pl-in.is-me{ background:color-mix(in srgb, var(--fh-ok-1) 18%, #16306e); } .results-row.pl-wait.is-me{ background:color-mix(in srgb, var(--fh-wait-1) 20%, #16306e); } .results-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); } .results-row .rr-place{ font-family:var(--theme-hdg-font); font-size:15px; color:rgba(255,255,255,0.55); width:22px; text-align:center; flex-shrink:0; } .results-row .rr-name{ flex:1; font-size:13px; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .results-row .rr-ko{ font-size:11px; color:rgba(255,255,255,0.55); flex-shrink:0; white-space:nowrap; min-width:46px; text-align:right; } .results-row .rr-ko.has{ color:var(--gold-light); font-weight:600; } .results-row .rr-ko:not(.has){ color:rgba(255,255,255,0.28); } /* Подписи столбцов над списком: те же ширины, что и в строках (место+аватар | ник | очки | нокауты) */ .results-head{ display:flex; align-items:center; gap:10px; padding:2px 11px 0; font-size:10px; letter-spacing:0.02em; color:rgba(255,255,255,0.5); } .results-head .rh-pl{ width:60px; flex-shrink:0; } .results-head .rh-name{ flex:1; min-width:0; } .results-head .rh-pts{ min-width:44px; text-align:right; flex-shrink:0; } .results-head .rh-ko{ min-width:46px; text-align:right; flex-shrink:0; } .results-row .rr-pts{ font-family:var(--theme-hdg-font); font-size:14px; color:rgba(255,255,255,0.85); flex-shrink:0; min-width:44px; text-align:right; } .results-podium{ margin: 0 0 10px; padding: 10px 8px 10px; border-radius: 12px; background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.10); } .results-podium .rp-title{ font-family:var(--theme-hdg-font); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:#F6CC4D; text-align:center; margin-bottom:10px; } .results-podium .rp-grid{ display: grid; /* minmax(0, …) — без него колонка сетки растёт под целиком неразрывный ник (white-space:nowrap), даже если стоит text-overflow:ellipsis: браузер сперва измеряет «сколько нужно» ДО всякой обрезки. Из-за этого длинный ник раздувал всю карточку, а не обрезался. */ grid-template-columns: minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr); gap: 7px; align-items: end; } .results-podium .rp-card{ border-radius: 12px; padding: 10px 6px 9px; text-align: center; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; align-items: center; } .results-podium .rp-card.gold{ border-color: rgba(246,204,77,0.55); background: linear-gradient(180deg, rgba(246,204,77,0.16), rgba(0,0,0,0.18)); padding-top: 12px; padding-bottom: 11px; } .results-podium .rp-card.silver{ border-color: rgba(200,210,230,0.40); background: linear-gradient(180deg, rgba(200,210,230,0.12), rgba(0,0,0,0.18)); } .results-podium .rp-card.bronze{ border-color: rgba(212,149,106,0.42); background: linear-gradient(180deg, rgba(212,149,106,0.12), rgba(0,0,0,0.18)); } .results-podium .rp-ava{ width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 18px; color: #fff; margin-bottom: 6px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.35); } .results-podium .rp-card.gold .rp-ava{ width: 46px; height: 46px; font-size: 20px; background: linear-gradient(160deg, #3a2e0a, #1a1406); border: 2px solid #F6CC4D; box-shadow: 0 0 0 1px rgba(246,204,77,0.35), 0 4px 10px rgba(212,175,90,0.35); } .results-podium .rp-card.silver .rp-ava{ background: linear-gradient(160deg, #2a3038, #15181c); border: 2px solid #C8D0E0; } .results-podium .rp-card.bronze .rp-ava{ background: linear-gradient(160deg, #3a2412, #1a1008); border: 2px solid #D4956A; } .results-podium .rp-place{ font-family:var(--theme-hdg-font); font-size:10px; letter-spacing:0.04em; text-transform: uppercase; margin-bottom: 3px; color: rgba(255,255,255,0.45); } .results-podium .rp-card.gold .rp-place{ color:#F6CC4D; } .results-podium .rp-card.silver .rp-place{ color:#D6DCE8; } .results-podium .rp-card.bronze .rp-place{ color:#E0A264; } .results-podium .rp-name{ font-size: 11.5px; font-weight: 700; color:#fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; padding: 0 2px; } .results-podium .rp-card.gold .rp-name{ font-size: 12.5px; color:#F6CC4D; } .results-podium .rp-pts{ font-family:var(--theme-hdg-font); font-size:14px; color:rgba(255,255,255,0.9); } .results-podium .rp-card.gold .rp-pts{ font-size:15px; color:#F6CC4D; } .results-podium .rp-ko{ font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; } .results-thanks{ text-align: center; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.92); font-weight: 500; margin: 0 4px 12px; padding: 2px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.12); } /* список остальных — с аватарками-буквами */ .results-row .rr-ava{ width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--theme-hdg-font); font-size: 13px; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.18); overflow: hidden; } .results-row .rr-ava img{ width:100%; height:100%; object-fit:cover; display:block; } /* 1–3 место в списке результатов: только тонкая обводка, без яркой заливки */ .results-row.gold{ border-color:#f0c445; box-shadow: inset 0 0 0 1px #f0c445; } .results-row.gold .rr-place{ color:#F6CC4D; } .results-row.silver{ border-color:#d7dde6; box-shadow: inset 0 0 0 1px #d7dde6; } .results-row.silver .rr-place{ color:#D6DCE8; } .results-row.bronze{ border-color:#cd7f32; box-shadow: inset 0 0 0 1px #cd7f32; } .results-row.bronze .rr-place{ color:#E0A264; } .pf-tabs{ display:flex; gap:8px; margin-bottom:12px; } .pf-tab{ flex:1; padding:10px 8px; border-radius:10px; cursor:pointer; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color:#fff; font-family: var(--theme-hdg-font); font-size: 13px; letter-spacing: 0.03em; } .pf-tab.active{ background: linear-gradient(165deg, rgba(59,130,246,0.35), rgba(30,58,138,0.5)); border-color: rgba(100,160,255,0.5); } /* Декоративная рамка-орнамент вокруг аватара (не тонкая обводка) */ .avatar-frame-wrap{ align-items: center; justify-content: center; } #tab-profile .avatar-lg, #my-avatar{ border: none !important; box-shadow: none !important; } .avatar-lg{ border: none !important; } .avatar-ornament{ inset: -12% !important; } .avatar-lg{ position: relative; z-index: 1; } .avatar-ornament{ position: absolute; pointer-events: none; z-index: 2; } .avatar-ornament svg{ width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); } /* превью в настройках — чуть крупнее слот */ .settings-block{ margin-top:19px; } .settings-label{ display:block; font-family:var(--theme-hdg-font); font-size:12px; color:var(--gold-light); margin-bottom:8px; } .settings-input{ width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:10px; padding:11px 13px; color:#fff; font-size:13px; font-family:inherit; } /* ---- Выбор темы: сетка карточек-превью ---- */ /* Темы — без подписей, с объёмным 3D-видом (как у кнопок выбора города). Четыре небольшие плитки в один ряд. Фирменная — тот же размер, логотип на синем. */ .theme-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:4px 0 2px; } .theme-dot-wrap{ position:relative; min-width:0; } .theme-dot{ position:relative; width:100%; aspect-ratio:1; height:auto; padding:0; border-radius:14px; overflow:hidden; flex-shrink:0; border:1.5px solid rgba(255,255,255,0.18); cursor:pointer; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, transparent 70%), rgba(var(--card-glass), 0.45); box-shadow:0 8px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .theme-dot img{ width:100%; height:100%; object-fit:cover; display:block; } .theme-dot-brand, .theme-dot.tc-brand{ background: linear-gradient(145deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.02) 28%, transparent 52%), linear-gradient(165deg, #3A72E8 0%, #1A48B0 28%, #12368E 58%, #07102A 100%) !important; border: 1.5px solid rgba(232, 176, 60, 0.55); box-shadow: 0 14px 28px rgba(0,0,0,0.45), 0 2px 0 rgba(255,255,255,0.18) inset, 0 -10px 18px rgba(0,0,0,0.35) inset, 0 0 0 1px rgba(8,16,40,0.5); } .theme-dot-brand img, .theme-dot.tc-brand img{ object-fit:contain; padding:12%; box-sizing:border-box; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45)) drop-shadow(0 1px 0 rgba(255,236,180,0.35)); } .theme-dot:active{ transform: scale(0.97) translateY(1px); } .theme-dot.active{ border-color:var(--gold-light); box-shadow:0 0 0 2px var(--gold-light), 0 8px 18px rgba(212,175,90,0.28); } /* ВКЛАДКА «ПРОФИЛЬ» */ .profile-head{display:flex; align-items:center; gap:14px; padding:20px 20px 6px;} .avatar-wrap .avatar-settings-btn{ pointer-events:auto; } .avatar-settings-btn svg{ width:12px; height:12px; display:block; } .avatar-settings-modal{ display:none; position:fixed; inset:0; z-index:99998; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,0.55); } .avatar-settings-modal.open{ display:flex; } .avatar-settings-sheet{ width:min(320px,100%); text-align:center; background: rgba(16, 22, 34, 0.92); border: 1px solid rgba(255,255,255,0.08); border-radius:16px; padding:18px 16px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.45); } .avatar-settings-sheet .btn-join, .avatar-settings-sheet .confirm-btn{ border-radius: 14px; } .avatar-settings-sheet .confirm-grey{ background: rgba(120,120,130,0.28); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.12); } .avatar-settings-sheet h3{ margin:0 0 14px; font-size:15px; color:#fff; font-weight:700; } .avatar-settings-preview{ width:140px; height:140px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 14px; background:rgba(255,255,255,0.06); } .avatar-settings-sheet .btn-row{ display:flex; flex-direction:column; gap:8px; } .avatar-lg{ border-radius:50%; background:rgba(255,255,255,0.06); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--gold-light); } .avatar-lg svg{ width:55%; height:55%; } .uname-row{ display:flex; align-items:center; gap:8px; } .profile-head .uname{font-family:var(--theme-hdg-font); font-size:16.5px; letter-spacing:0.01em;} .profile-head .subs{font-size:11px; color:var(--ink-dim); margin-top:5px;} .stat-card-head h2{ font-family:var(--theme-hdg-font); font-size:15px; text-transform:uppercase; } .stat-row-5{ display:flex; justify-content:space-between; text-align:center; } .stat-row-5 .stat-hero b{ font-size:18px; } .stat-rank-hero{ display: grid !important; grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch; gap: 0 8px; padding: 2px 0 8px; } .stat-rank-hero > div{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } .stat-rank-hero > div span{ margin-top: auto !important; } .stat-rank-hero .stat-hero b{ color: #fff; } .stat-rank-hero .stat-hero span{ font-size: 10px; letter-spacing: .16em; } .stat-rank-hero .stat-side b{ color: #fff; } .stat-row-extra b{ font-size: 20px !important; } .stat-row-extra span{ font-size: 9.5px !important; } .stat-row-5 b{ display:block; font-family:var(--theme-hdg-font); font-size:12px; } /* Регуляр — широкая плитка + путь прогресса */ #tab-profile .big-tile.profile-contacts-tile{ display: flex !important; flex-direction: column; justify-content: center; height: 86px; min-height: 86px; max-height: 86px; box-sizing: border-box; cursor: pointer; } .loyalty-track{ position:relative; margin: 10px 2px 8px; padding: 10px 6px 4px; } .loyalty-track-bar{ height: 6.6px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; margin: 6px 0; } .loyalty-track-bar i{ display:block; height:100%; width:8%; border-radius: 999px; background: linear-gradient(90deg, #2ecc71, #f0c45a); } .loyalty-track-dots{ position:absolute; left:6px; right:6px; top: 10px; height: 20px; pointer-events:none; } .loyalty-track-dots span{ position:absolute; top:50%; width: 17.6px; height: 17.6px; margin: 0; border-radius: 50%; background: #12352c; border: 2px solid rgba(255,230,150,0.75); box-shadow: 0 0 0 3px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.45); transform: translate(-50%, -50%); pointer-events:auto; cursor:pointer; } .loyalty-track-dots span.on{ border-color: #f0c45a; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,0.28), 0 1px 3px rgba(0,0,0,0.4); } .loyalty-track-labels{ position:relative; height: 14px; margin-top: 6px; font-size: 10px; color: rgba(255,255,255,0.62); } .loyalty-track-labels span{ position:absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; } .loyalty-card .loyalty-track:active{ transform: none; filter: none; } /* Единый ритм профиля: 8px между блоками, 16px по бокам */ #tab-profile .loyalty-card{ margin: 0 16px 8px !important; border-radius: 14px !important; } #tab-profile .stat-card{ width: auto !important; box-sizing: border-box !important; } #tab-profile .loyalty-visits-btn{ width: calc(100% - 32px) !important; margin: 0 16px 8px !important; border-radius: 14px !important; } #tab-profile .two-col{ padding: 0 16px !important; gap: 8px !important; margin: 0 0 8px !important; } #tab-profile .two-col .big-tile{ margin-top: 0 !important; } #tab-profile .settings-btn-row{ padding: 0 16px 14px !important; gap: 8px !important; margin: 0 !important; } #tab-profile .settings-slim-btn{ margin: 0 !important; } .loyalty-visits-btn + .two-col{ padding-top: 0 !important; } .loyalty-track{ cursor: pointer; } .loyalty-divider{ height: 0; margin: 12px 4px 4px; border: none; border-top: 1px solid rgba(255,255,255,0.14); } .loyalty-card{ margin: 0 20px 6px; padding: 14px 14px 16px; border-radius: 14px; border: 1.5px solid rgba(var(--theme-border-accent), 0.5) !important; background: linear-gradient(165deg, rgba(var(--glass-tint), 0.22) 0%, rgba(var(--glass-tint), 0.06) 40%, rgba(var(--shadow-tint), 0.35) 100%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; box-shadow: 0 10px 24px rgba(var(--shadow-tint), 0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important; } .loyalty-discount-3d{ display: flex; align-items: center; justify-content: center; margin-top: 12px; } .loyalty-discount-3d b{ font-family: var(--theme-hdg-font); font-size: 42px; line-height: 1; letter-spacing: 0.04em; color: #7CFC9A; text-shadow: 0 1px 0 #fff, 0 2px 0 #b8f5c8, 0 3px 0 #5ad87a, 0 4px 0 #2e9e52, 0 5px 0 #1e7a3c, 0 6px 0 #145c2c, 0 8px 12px rgba(0,0,0,0.55), 0 0 24px rgba(80, 255, 140, 0.35); transform: perspective(200px) rotateX(8deg); } .loyalty-discount-3d span.pct{ font-family: var(--theme-hdg-font); font-size: 22px; margin-left: 4px; color: #b8f5c8; text-shadow: 0 2px 0 #1e7a3c, 0 4px 8px rgba(0,0,0,0.45); } .loyalty-tokens-row{ display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10px; color: rgba(255,255,255,0.75); cursor: pointer; } .loyalty-tokens-row b{ color: var(--gold-light); font-family: var(--theme-hdg-font); font-size: 13px; margin-left: 3px; } .loyalty-visits-btn{ display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); margin: 0 20px 6px; box-sizing: border-box; padding: 14px 14px; min-height: calc(1em + 28px); border-radius: 14px; cursor: pointer; color: #fff; font-family: var(--theme-hdg-font); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; border: 1.5px solid rgba(var(--theme-border-accent), 0.5) !important; background: linear-gradient(165deg, rgba(var(--glass-tint), 0.22) 0%, rgba(var(--glass-tint), 0.06) 40%, rgba(var(--shadow-tint), 0.35) 100%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; box-shadow: 0 10px 24px rgba(var(--shadow-tint), 0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important; } #tab-profile .loyalty-visits-btn, #tab-profile.viewing-other .loyalty-visits-btn{ border: 1.5px solid rgba(var(--theme-border-accent), 0.5) !important; background: linear-gradient(165deg, rgba(var(--glass-tint), 0.22) 0%, rgba(var(--glass-tint), 0.06) 40%, rgba(var(--shadow-tint), 0.35) 100%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%) !important; box-shadow: 0 10px 24px rgba(var(--shadow-tint), 0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important; } /* Охотник месяца: ширина на всю сетку, высота = ½ от «Финал месяца» */ .hunter-back-txt{ font-size: 13px; font-weight: 700; color: #fff; text-align: center; line-height: 1.35; padding: 8px 6px; } .hunter-back-hint{ font-size: 9px; color: rgba(255,255,255,0.65); text-align: center; margin-top: 8px; line-height: 1.3; } .hunter-sights{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap: 18%; z-index:1; padding: 0 12px 18px; box-sizing:border-box; } .hunter-sight{ width: 22%; max-width: 36px; opacity: 0.38; filter: brightness(0.7); } .hunter-sight .hunter-xhair{ width:100%; height:auto; display:block; } /* базовый цвет металла всегда виден */ .hunter-sight.bronze{ color:#cd7f32; } .hunter-sight.silver{ color:#c0c8d4; } .hunter-sight.gold{ color:#f0c45a; } .hunter-sight.on{ opacity: 1; filter: drop-shadow(0 0 5px rgba(255,220,120,0.45)); } .hunter-sight.on.bronze{ filter: drop-shadow(0 0 5px rgba(205,127,50,0.65)); } .hunter-sight.on.silver{ filter: drop-shadow(0 0 5px rgba(200,210,230,0.55)); } .hunter-sight.on.gold{ filter: drop-shadow(0 0 6px rgba(240,196,90,0.65)); } /* кубок финалов — оттенок по месту */ /* фон карточки трофея — цвет финала */ /* кубки финалов — меньше, целиком в карточке */ .regular-tile{ margin: 0 14px 10px; padding: 12px 12px 14px; border-radius: 14px; cursor: pointer; background: linear-gradient(165deg, rgba(255,255,255,0.1) 0%, transparent 45%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%); border: 1px solid rgba(var(--theme-border-accent), 0.4); box-shadow: 0 3px 0 rgba(var(--shadow-tint), 0.85), 0 6px 14px rgba(0,0,0,0.35); } .regular-tile .bt-head{ margin-bottom: 6px; } .regular-path{ position: relative; height: 36px; margin-top: 8px; } .regular-path-line{ position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,0.15); } .regular-path-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 8%; border-radius: 2px; background: var(--gold-light, #f0c45a); } .regular-path-marks{ position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 2%; } .regular-mark{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 1.5px solid rgba(255,255,255,0.5); flex-shrink: 0; position: relative; } .regular-mark.on{ background: var(--gold-light, #f0c45a); border-color: #fff; } .regular-mark span{ position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 7px; white-space: nowrap; color: rgba(255,255,255,0.65); text-transform: uppercase; } .regular-meta{ display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 8px; flex-wrap: wrap; } .regular-meta b{ font-family:var(--theme-hdg-font); font-size: 13px; color: var(--gold-light); } .regular-meta span{ font-size: 10px; color: rgba(255,255,255,0.75); } .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:6px 20px 0; } .loyalty-visits-btn + .two-col .big-tile{ margin-top: 4px; } .big-tile{ padding:14px; border-radius:16px; background:linear-gradient(165deg,#17181F,#000); border:1px solid rgba(255,255,255,0.13); box-shadow:0 8px 18px rgba(0,0,0,0.35); margin-top:10px; } .big-tile.wide{ margin:10px 20px 0; } .big-tile .bt-head{ font-family:var(--theme-hdg-font); font-size:13px; text-transform:uppercase; } .big-tile .bt-row{ display:flex; align-items:center; gap:8px; margin-top:11px; } .big-tile .bt-row .ic{ width:19px; height:19px; color:var(--gold-light); flex-shrink:0; } .big-tile .bt-row span{ font-family:var(--theme-hdg-font); font-size:15px; color:#fff; font-weight:600; } .big-tile .bar{ height:3px; background:rgba(255,255,255,0.1); border-radius:2px; margin-top:11px; overflow:hidden; } .big-tile .bar i{ display:block; height:100%; background:var(--gold); } .big-tile.mail-tile .bt-row{ justify-content:space-between; } .big-tile.mail-tile .bt-row .left{ display:flex; align-items:center; gap:8px; min-width:0; } .big-tile.mail-tile .bt-row span{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .edit-btn{ background:rgba(255,255,255,0.1); border:none; color:#fff; font-size:10.5px; font-weight:600; padding:7px 14px; border-radius:20px; flex-shrink:0; } .city-crest-ic{ width:32px; height:32px; flex-shrink:0; } /* BOTTOM NAV — strict monochrome, label shows only on the active tab; подсветка активной вкладки — одна плашка (.navbar::before), которая скользит к выбранной кнопке (индекс --nav-i ставит fhSetNavActive) */ .nav-glass{ position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: min(860px, calc(100% - 24px)); right: auto; bottom: 0; z-index: 50; background: transparent; padding: 6px 0 calc(var(--fh-safe-b, 0px) + 10px); display: flex; justify-content: center; pointer-events: none; filter: none; } .nav-glass .navbar, .nav-glass > * { pointer-events: auto; } .navbar{ margin:0; background:linear-gradient(180deg,#3f4258 0%,#2b2e42 45%,#14152a 80%,#000 100%); border:1px solid #1a1c22; border-radius:calc(18px * var(--radius-mult)); display:flex; justify-content:space-around; align-items:stretch; padding:0; position:relative; z-index:1; width: 100%; min-height: 52px; box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18); overflow: hidden; /* Экран на масштабе 80%, панели нужно 90%: zoom 0.9/0.8 = 1.125 */ zoom: 1.125; } .navbar::before{ content:''; position:absolute; top:2px; bottom:2px; left:2px; width: calc(25% - 4px); border-radius: 16px; background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); transform: translateX(calc(var(--nav-i, 0) * (100% + 4px))); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .navbar .item{ position: relative; z-index: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:8px; color:rgba(255,255,255,0.5); text-transform:uppercase; font-weight:700; background:none; border:none; letter-spacing:0.02em; padding:6px 10px; border-radius:0; flex:1; } .navbar .item .icon-wrap{ width:19px; height:19px; display:flex; align-items:center; justify-content:center; } .navbar .item .lbl{ display:none; font-size:7.5px; } .navbar .item.active{ color: #fff; } .navbar .item.active .lbl{ display:block; color: #fff; } .navbar .item.active .icon-wrap{ color:#fff; filter: none; } button:active, a:active, .tile:active, .week-card:active, .fmt-card:active, .navbar .item:active, .r-row:active, .pod:active, .big-tile:active{ transform: var(--fh-press-t); filter: var(--fh-press-f); } .stat-card:active:not(:has(#stat-period-btn:active)):not(:has(#stat-overall-btn:active)):not(:has(#stat-period-menu button:active)){ transform: var(--fh-press-t); filter: var(--fh-press-f); } .loyalty-card:active, .loyalty-track:active, .loyalty-visits-btn:active, .loyalty-track-dots span:active, .regular-tile:active, .regular-path:active, .regular-mark:active{ transform: none; filter: none; } /* Единое нажатие афиши: карточка со всем содержимым (кнопки, места) прожимается целиком, куда бы ни тапнули. */ .hero-card:active{ transform: var(--fh-press-t); filter: var(--fh-press-f); } /* Кнопки внутри афиши — id уникальны на странице, поэтому это гасит именно их собственное нажатие (у других .btn-join/.btn-structure по сайту, вне афиши, свой :active остаётся как был). */ #btn-structure:active, #btn-join:active, .hero-card #hero-seats.is-timer:active{ transform: none; filter: none; } .big-tile :active{ transform: none; filter: none; } .stat-card #stat-period-menu button:active, .stat-card #stat-overall-btn:active, .stat-card #stat-period-btn:active, .stat-period-menu button:active, .stat-overall-fixed:active{ transform: none; filter: none; } .stat-card:has(#stat-period-menu button:active), .stat-card:has(#stat-overall-btn:active), .stat-card:has(#stat-period-btn:active){ transform: none; filter: none; } .modal-overlay :active, .modal-overlay button:active, .modal-overlay a:active{ transform: none; filter: none; } .modal-overlay:active, .panel-backdrop:active, .address-popover:active, .map-card:active, input:active, textarea:active{ transform: none; filter: none; } button, a, [onclick], .tile, .week-card, .fmt-card, .navbar .item, .loyalty-card, .stat-card, .hero-card, .big-tile{ transition: transform 0.18s ease-out, filter 0.18s ease-out; } /* Длинный текст: полоса прокрутки сбоку и стрелка внизу */ .modal-body-wrap{ position:relative; flex:1 1 auto; min-height:0; display:flex; } .modal-body{ flex:1 1 auto; min-height:0; } .modal-scroll-track{ position:absolute; top:4px; right:3px; bottom:32px; width:4px; background:rgba(255,255,255,0.18); border-radius:3px; opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:5; } .modal-body-wrap.has-overflow .modal-scroll-track{ opacity:1; } .modal-scroll-thumb{ position:absolute; left:0; width:4px; border-radius:3px; background:rgba(255,255,255,0.65); min-height:28px; top:0; transition: background 0.15s; box-shadow: 0 0 6px rgba(255,255,255,0.25); } .modal-scroll-hint{ position:absolute; left:0; right:0; bottom:0; height:44px; display:flex; align-items:flex-end; justify-content:center; padding-bottom: 6px; pointer-events:none; z-index:5; background: linear-gradient(to top, rgba(var(--shadow-tint), 0.92) 0%, rgba(var(--shadow-tint), 0.55) 45%, transparent 100%); opacity:0; transition:opacity 0.25s; } .modal-body-wrap.has-overflow .modal-scroll-hint{ opacity:1; } /* в идеях/отзывах с нижней кнопкой — градиент чуть выше кнопки */ /* Идеи/отзывы: только .active; текст гаснет у края кнопки, кнопка без затемнения */ .ir-panel{ position: relative; display: none !important; flex-direction: column !important; min-height: 0; } /* градиент НАД кнопкой — гасит только текст, не кнопку */ .ir-panel.active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 56px; /* высота зоны кнопки */ height: 40px; pointer-events: none; z-index: 3; background: linear-gradient(to top, rgba(var(--shadow-tint), 0.88) 0%, rgba(var(--shadow-tint), 0.4) 55%, transparent 100%); } .ir-action-btn, #ir-idea-btn, #ir-review-btn{ left: 0 !important; right: 0 !important; top: auto !important; z-index: 5 !important; -webkit-filter: none !important; mix-blend-mode: normal !important; } .ir-action-btn::before, #ir-idea-btn::before, #ir-review-btn::before, .ir-action-btn::after, #ir-idea-btn::after, #ir-review-btn::after{ content: none !important; display: none !important; background: transparent !important; } .modal-scroll-hint .hint-arrow{ width:22px; height:22px; color:rgba(255,255,255,0.9); transition: transform 0.25s ease; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); animation: hint-bounce 1.2s ease-in-out infinite; } @keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .modal-body-wrap.at-bottom .modal-scroll-hint .hint-arrow{ animation: none; } .modal-body-wrap.at-bottom .modal-scroll-hint .hint-arrow{ transform: rotate(180deg); } .modal-body-wrap.at-bottom .modal-scroll-hint{ background: linear-gradient(to bottom, rgba(12,18,40,0.5) 10%, transparent); } #structure-sheet.modal-sheet{ min-height: 0; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Окно без своего фона — синее клуба; окно формата с фоном (финалы, обучение, загруженный в админке) — его фон с затемнением под текст (у обучения без затемнения: фон светлый). */ #structure-sheet.modal-sheet:not(.has-fbg){ background: linear-gradient(180deg, var(--royal-top), var(--royal-bot)) !important; } #structure-sheet.modal-sheet.has-fbg{ background: linear-gradient(rgba(0,0,0,var(--sheet-dim, 0.5)), rgba(0,0,0,var(--sheet-dim, 0.5))), var(--fmt-bg) !important; } #structure-sheet.theme-learn{ --sheet-dim: 0; } #structure-sheet .modal-bg, #structure-sheet #structure-bg{ filter: none !important; -webkit-filter: none !important; opacity: 0 !important; display: none !important; } /* Структура: окно растёт с текстом, без прокрутки */ #structure-sheet.fit-content{ height: auto !important; max-height: 72% !important; min-height: 0 !important; } .modal-overlay.open:has(#structure-sheet.fit-content){ align-items: center !important; } #structure-sheet.fit-content .modal-inner{ padding: 12px 14px 6px !important; /* нижний отступ — 1/4 от обычных 16–24 */ } #structure-sheet.fit-content .modal-body{ padding-bottom: 2px !important; } #structure-sheet.fit-content #modal-body-text{ margin-bottom: 0 !important; padding-bottom: 0 !important; } #structure-sheet.fit-content .modal-inner{ overflow: visible; max-height: none; } #structure-sheet.fit-content .modal-body-wrap{ flex: 0 0 auto; min-height: 0; overflow: visible; } #structure-sheet.fit-content .modal-body{ overflow-x: hidden !important; overflow-y: visible !important; flex: none; max-height: none !important; width: 100%; } #structure-sheet.fit-content .modal-inner{ overflow-x: hidden; width: 100%; box-sizing: border-box; } #structure-sheet.fit-content .modal-scroll-track, #structure-sheet.fit-content .modal-scroll-hint{ display: none !important; } /* Окно формата с рамкой «обводка»: рамка цветом формата со свечением, название — светлым оттенком цвета, текст — почти белым с тем же оттенком (как карточка формата). */ #structure-sheet.fl-full{ border: 1.5px solid var(--fc) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 35%, transparent) !important; } #structure-sheet.fl-full #modal-body-text{ color: color-mix(in srgb, var(--fc-tint) 22%, #fff); } /* Info modals: shared size (matched to Бонусы) */ #structure-sheet.info-fixed{ display: flex !important; flex-direction: column; } #structure-sheet.info-fixed .modal-inner{ flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; } #structure-sheet.info-fixed .modal-body-wrap{ flex: 1 1 auto; min-height: 0; overflow: hidden; } #structure-sheet.info-fixed .modal-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; max-height: none !important; } /* «Идеи и отзывы»: вкладки и записи */ .ir-tabs{ display:flex; gap:6px; margin:0 0 12px; padding:3px; background:rgba(255,255,255,0.08); border-radius:12px; } .ir-tab{ flex:1; padding:9px 8px; border:none; border-radius:10px; font-family:var(--theme-hdg-font); font-size:14px; letter-spacing:0.03em; background:transparent; color:rgba(255,255,255,0.55); cursor:pointer; transition: all 0.2s ease; } .ir-tab.active{ background:rgba(255,255,255,0.16); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.18); } .ir-pending{ display:inline-block; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:0.03em; color:#ffe9a8; border:1px solid rgba(240,196,69,0.5); border-radius:999px; padding:1px 8px; vertical-align:1px; } .ir-item{ background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:11px 12px; margin-bottom:9px; } .ir-badge{ font-size:11px; font-weight:600; margin-bottom:5px; color:rgba(255,255,255,0.7); } .ir-text{ font-size:13px; line-height:1.45; color:#fff; margin-bottom:6px; } .ir-meta{ font-size:11px; color:rgba(255,255,255,0.45); } .ir-action-btn{ display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700; transition: transform 0.15s ease, filter 0.15s ease; } .ir-action-btn:active{ transform:scale(0.95) translateY(2px); filter:brightness(0.86); } .ir-item.good, .ir-item.mid, .ir-item.bad{ border-left: none; } .ir-votes{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .ir-vote{ border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#fff; border-radius:999px; padding:5px 10px; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .ir-vote:active{ transform:scale(0.96); } .notif-item .ir-vote.picked{ background: transparent !important; border-color: transparent !important; opacity: 1; } .ir-vote.voted{ opacity:0.55; pointer-events:none; } .ir-vote.picked{ opacity:1; border-color:rgba(63,165,121,0.55); background:rgba(63,165,121,0.22); } .ir-vote.picked[data-v="-1"]{ border-color:rgba(232,54,43,0.55); background:rgba(232,54,43,0.2); } /* ПОДЛОЖКА ПАНЕЛЕЙ — общее затемнение и размытие под выпадающими панелями (уведомления, выбор города) */ .panel-backdrop{ position:absolute; inset:0; z-index:80; background:rgba(3,5,20,0); opacity:0; pointer-events:none; transition:opacity 0.3s ease, background 0.3s ease; } .panel-backdrop.open{ opacity:1; pointer-events:auto; background:rgba(3,5,20,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* ПАНЕЛЬ УВЕДОМЛЕНИЙ — по площади как афиша с лентой; положение и высоту задаёт JS по текущей раскладке */ .notif-panel{ left:12px; right:12px; z-index:90; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), rgba(var(--glass-tint), 0.90); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); border:1px solid rgba(255,255,255,0.18); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,0.5); display:flex; flex-direction:column; opacity:0; transform:translateY(-8px) scale(0.98); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; } .notif-panel{ position: absolute; /* контейнер подсказки */} .notif-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .notif-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; flex-shrink:0; flex-wrap:wrap; row-gap:8px; border-bottom:1px solid rgba(255,255,255,0.12); } .notif-head h3{ font-family:var(--theme-hdg-font); font-size:16px; letter-spacing:0.03em; text-transform:uppercase; color:var(--gold-light); } #city-confirm-title{ font-family: var(--theme-font) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.04em; text-transform: none !important; color: rgba(255,255,255,0.82) !important; } .notif-close{ width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,0.12); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .notif-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 14px 14px; -webkit-overflow-scrolling:touch; } .notif-item:last-child{ margin-bottom:0; } .notif-date{ font-size:11px; color:var(--gold-light); font-weight:700; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:4px; } /* ВЫБОР ГОРОДА — выпадает под кнопкой в шапке; положение и размер задаёт JS (positionCityPanel) */ .city-panel{ position:absolute; z-index:90; background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, transparent 65%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 55%, var(--royal-bot) 100%); backdrop-filter: blur(22px) saturate(1.05); -webkit-backdrop-filter: blur(22px) saturate(1.05); border:1px solid rgba(212, 175, 55, 0.32); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18); display:flex; flex-direction:column; opacity:0; transform:translateY(-8px) scale(0.98); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; } .city-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .city-body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; padding:12px 12px 20px; } .city-body .city-opt{ width:100%; box-sizing:border-box; } .notif-title{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:2px; } .notif-text{ font-size:12.5px; line-height:1.42; color:#fff; white-space:pre-wrap; } .fh-form{ margin-top:10px; margin-bottom:4px; padding:14px 12px 12px; /* непрозрачный фон — форма не «тонет» в градиенте над кнопкой */ background: linear-gradient(165deg, rgba(12, 28, 68, 0.98) 0%, rgba(6, 14, 36, 0.99) 100%); border:1px solid rgba(255,255,255,0.18); border-radius:14px; opacity:0; transform: translateY(12px); transition: opacity 0.28s ease, transform 0.28s ease; position: relative; z-index: 8; box-shadow: 0 -10px 28px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.3); } /* пока открыта форма — убираем тёмную «пелену» над кнопкой */ .ir-panel.is-composing::after{ display: none !important; content: none !important; opacity: 0 !important; } #structure-modal.is-composing .ir-panel.active::after{ display: none !important; content: none !important; } #structure-modal.is-composing .ir-panel-scroll{ padding-bottom: 12px !important; } /* Поддержка: FAQ на месте, форма — absolute-оверлей поверх (без сдвига) */ #structure-modal #modal-body-text{ position: relative; } #support-form-slot{ position: relative; left: auto; right: auto; bottom: auto; z-index: 1; pointer-events: none; padding: 0; margin: 8px 0 0; } #support-form-slot[data-open="1"]{ pointer-events: auto; } #support-form-slot .fh-form, #support-form-slot .fh-form-ok-btn{ display:block; margin:14px auto 0; min-width:96px; border:1px solid rgba(255,255,255,0.18); background:rgba(160,160,160,0.28); color:#e8e8e8; font-size:14px; font-weight:600; padding:8px 22px; border-radius:10px; cursor:pointer; } .fh-form-ok{ margin: 0 0 4px; box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35); } #structure-modal.is-composing-support .faq-list{ flex: 1 1 auto !important; min-height: 0 !important; } .fh-form.fh-form-show{ opacity:1; transform: translateY(0); } .fh-form.fh-form-leave, .fh-form-ok.fh-form-leave{ opacity:0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; } .fh-form-ok{ opacity:0; transform: translateY(8px); transition: opacity 0.28s ease, transform 0.28s ease; } .fh-form-ok.fh-form-show{ opacity:1; transform: translateY(0); } .fh-form-row{ position: relative; z-index: 2; } .fh-form-title{ font-family:var(--theme-hdg-font); font-size:14px; letter-spacing:0.03em; color:rgba(255,255,255,0.85); margin-bottom:8px; } .fh-form-ta{ width:100%; box-sizing:border-box; min-height:88px; resize:vertical; border-radius:12px; border:1.5px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); color:#fff; padding:10px 12px; font-size:13px; line-height:1.4; outline:none; font-family:inherit; } .fh-form-ta:focus{ border-color:rgba(63,165,121,0.65); } .fh-form-ta::placeholder{ color:rgba(255,255,255,0.35); } .fh-form-row{ display:flex; gap:8px; margin-top:10px; } .fh-form-cancel, .fh-form-send{ flex:1; padding:11px 8px; border-radius:999px; font-family:var(--theme-hdg-font); font-size:13px; letter-spacing:0.03em; text-transform:uppercase; cursor:pointer; } .fh-form-cancel{ background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); } .fh-form-send{ border:none; background:#008800; color:#fff; box-shadow:0 3px 12px rgba(0,136,0,0.35); } .fh-form-send:active, .fh-form-cancel:active{ transform:scale(0.95) translateY(2px); filter:brightness(0.86); } .fh-form-ok{ margin-top:10px; padding:14px 12px; text-align:center; border-radius:12px; background:rgba(63,165,121,0.18); border:1px solid rgba(63,165,121,0.35); color:#fff; font-size:13px; font-weight:600; } /* Частые вопросы — раскрывающийся список */ .faq-heading{ font-family:var(--theme-hdg-font); font-size:15px; letter-spacing:0.03em; color:rgba(255,255,255,0.9); margin:0 0 10px; text-transform:uppercase; } .faq-list{ display:flex; flex-direction:column; gap:7px; } .faq-item{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden; } .sup-topics{display:flex;flex-direction:column;gap:8px;border:none;background:transparent;overflow:visible;} .sup-topic{ width:100%; border:1px solid rgba(255,255,255,0.16); padding:13px 14px; text-align:left; cursor:pointer; color:#fff; font-size:13px; font-weight:600; background:rgba(255,255,255,0.08); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .sup-topic::after{content:'›'; opacity:0.7; font-size:18px; line-height:1; font-weight:400;} .sup-topic:nth-child(even){background:rgba(255,255,255,0.08);} .sup-topics.is-hidden{display:none;} .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 13px; border:none; background:transparent; color:#fff; font-size:13px; font-weight:500; text-align:left; cursor:pointer; line-height:1.35; } .faq-chevron{ width:16px; height:16px; flex-shrink:0; opacity:0.55; transition: transform 0.25s ease; } .faq-item.open .faq-chevron{ transform:rotate(180deg); opacity:0.9; } .faq-a{ max-height:0; overflow:hidden; padding:0 13px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.78); transition: max-height 0.28s ease, padding 0.28s ease; } .faq-item.open .faq-a{ max-height: min(70vh, 900px); padding:0 13px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Бонусы only: hug text, no empty space */ #structure-sheet.fit-bonuses{ height: auto !important; max-height: calc(100% - 160px) !important; } #structure-sheet.fit-bonuses .modal-body{ overflow: visible !important; flex: none; max-height: none !important; } #structure-sheet.fit-bonuses .modal-scroll-track, #structure-sheet.fit-bonuses .modal-scroll-hint{ display: none !important; } /* текст окна «Обучения» — на тёмной подложке: фон у обучения светлый */ .learn-body-text{ font-size:12.5px; line-height:1.5; color:#FFFFFF !important; margin-bottom:14px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,0.42); text-shadow: 0 1px 2px rgba(0,0,0,0.35); box-sizing: border-box; } #structure-sheet.theme-learn .learn-body-text{ color: #FFFFFF !important; } /* картинка формата под текстом окна «Обучения» */ .learn-pic-wrap{ width:100%; display:flex; justify-content:center; align-items:center; margin:0; } .learn-pic{ width:76%; max-width:76%; height:auto; object-fit:contain; display:block; margin:0 auto; background:transparent; transform: translate(6%, 14%); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); } /* Оферта перед записью — только вопрос */ .offer-gate-sheet{ padding: 18px 16px 16px; } .offer-gate-title{ font-family:var(--theme-hdg-font); font-size:17px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-light); margin-bottom:10px; text-align:center; } .offer-gate-text{ font-size:13px; line-height:1.45; color:rgba(255,255,255,0.82); margin-bottom:14px; text-align:center; } .offer-gate-tile-wrap{ display:flex; justify-content:center; margin-bottom:14px; } .offer-gate-tile-wrap .tile{ min-width: 160px; justify-content:center; } .offer-gate-actions{ display:flex; gap:10px; margin-top:4px; } .offer-gate-actions .confirm-btn{ flex:1; } /* 3D flip L→R for «Мой город» */ .big-tile.city-flip-tile{ perspective: 900px; transform-style: preserve-3d; } .big-tile.city-flip-tile .city-flip-inner{ transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1); transform-style: preserve-3d; position: relative; } .big-tile.city-flip-tile.is-flipped .city-flip-inner{ transform: rotateY(180deg); } .city-flip-face{ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .city-flip-face.face-front{ position: relative; } .city-flip-face.face-back{ position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; } .big-tile.city-flip-tile{ overflow: hidden; } .big-tile.city-flip-tile .city-flip-inner{ min-height: 72px; } .city-flip-face.face-back{ padding: 0; box-sizing: border-box; justify-content: flex-start; } .city-flip-face.face-back .addr-text{ font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; } /* Финалы: кубок по центру на размытом фоне, высота окна — по содержимому */ #structure-sheet.theme-year, #structure-sheet.theme-season, #structure-sheet.theme-month{ min-height: 0 !important; } #structure-sheet.sheet-cabinet{ background: linear-gradient(165deg, var(--royal-mid), var(--royal-bot)) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important; } #structure-sheet.sheet-cabinet #structure-tint{ display: none !important; } /* Окно обычного формата с рамкой «полуобод»: кромка цветом формата (у «обводки» — правило fl-full выше) */ #structure-sheet.theme-regular:not(.fl-full){ border: 2px solid color-mix(in srgb, var(--accent, #4E8FD9) 55%, #000) !important; box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 16px 28px rgba(0,0,0,0.48), inset 0 1px 0 color-mix(in srgb, var(--accent, #4E8FD9) 35%, #fff), inset 0 -8px 16px rgba(0,0,0,0.38) !important; } #structure-sheet.theme-learn{ min-height: 0 !important; } #structure-sheet.theme-learn .modal-close, #structure-sheet.theme-learn .modal-x, #structure-sheet.theme-learn button.modal-close{ color: #FFFFFF !important; } /* отступы текста в окне обучения */ #structure-sheet.theme-learn .modal-body{ padding-bottom: 16px !important; padding-right: 16px !important; } /* Фото аватарки в профиле */ .avatar-lg{ overflow: hidden; cursor: pointer; } .avatar-lg img{ width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-zoom-overlay{ position: absolute; inset: 0; z-index: 80; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .avatar-zoom-overlay.open{ opacity: 1; pointer-events: auto; } .avatar-zoom-overlay img{ width: min(78%, 270px); height: min(78%, 270px); border-radius: 50%; object-fit: cover; box-shadow: 0 12px 40px rgba(0,0,0,0.55); border: 1.5px solid rgba(74,114,212,0.9); transform: scale(0.92); transition: transform 0.25s cubic-bezier(0.32,0.72,0,1); } .avatar-zoom-overlay.open img{ transform: scale(1); } .stat-period-btn{ border-radius: 10px; padding: 5px 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .stat-period-chev{ font-size: 11px; opacity: 0.7; } .stat-period-menu.open{ display: block; } /* Кнопки действий прилипают к низу в «Идеях», «Отзывах» и «Поддержке» */ .ir-panel{ padding-bottom: 0; } .ir-panel-scroll{ -webkit-overflow-scrolling: touch; } .ir-action-btn{ width: 100%; padding: 13px 16px; font-family: var(--theme-hdg-font); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; cursor: pointer; background: linear-gradient(165deg, #004FBA 0%, #073B8A 55%, #02235A 100%); } .ir-sticky-fade{ position: sticky; bottom: 48px; margin-top: -28px; pointer-events: none; z-index: 4; } /* Поддержка: то же */ .faq-list{ max-height: 62vh; overflow-y: auto; padding-bottom: 8px; } .notif-item{ padding: 12px 12px; margin-bottom: 9px; border-radius: 14px; background: linear-gradient(165deg, #004FBA 0%, #073B8A 50%, #02235A 100%); border: 1px solid rgba(140,180,255,0.35); box-shadow: 0 3px 0 #021a45, 0 6px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18); transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease; position: relative; } .notif-item.is-read{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); box-shadow: none; opacity: 1; } .notif-item .notif-date{ color: #8a8a8a; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; margin-top: -2px; display: inline-block; padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,0.05); } .notif-item .notif-title{ color: #fff; font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 2px; } .notif-item .notif-text{ color: #fff; font-size: 14.45px; line-height: 1.35; } .notif-item.is-read .notif-text{ color: #fff; opacity: 1; } .notif-item.is-read .notif-date{ color: #8a8a8a; opacity: 1; background: rgba(255,255,255,0.05); } .notif-filters{ display:flex; gap:6px; order:3; width:100%; margin:0; } .notif-filter{ border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.72); font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; cursor:pointer; } /* выбранная вкладка — в стиле кнопки выбора города в шапке */ .notif-filter.on{ background:#111C35; color:#fff; border-color:#2EB3AF; } .notif-filter{ position:relative; } .notif-filter .nf-count{ display:none; font-style:normal; margin-left:6px; min-width:17px; height:17px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:#ff3b30; color:#fff; font-size:11px; font-weight:700; line-height:17px; text-align:center; vertical-align:1px; } .notif-item.is-reply{ background: linear-gradient(165deg, #0d6b45 0%, #085534 50%, #033822 100%); border: 1px solid rgba(120,220,170,0.38); box-shadow: 0 3px 0 #022a1a, 0 6px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.16); } .notif-item.is-reply.is-read{ background: rgba(20,80,50,0.18); border: 1px solid rgba(120,220,170,0.14); box-shadow: none; } .notif-kind{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-left:6px; padding:2px 7px; border-radius:7px; } .notif-item.is-reply .notif-kind{ background:rgba(80,200,140,0.22); color:#b8f0d0; } .notif-empty{ color:rgba(255,255,255,0.55); font-size:13.5px; padding:18px 8px; text-align:center; } /* подсказка «ниже есть непрочитанные» */ .notif-more-hint{ position: absolute; right: 10px; left: auto; bottom: 23px; z-index: 6; display: none; flex-direction: column; align-items: center; gap: 3px; pointer-events: auto; cursor: pointer; } .notif-more-hint.show{ display: flex; } .notif-more-hint .nmh-arrow{ width: 21.6px; height: 21.6px; color: rgba(200,220,255,0.9); animation: notifArrowBob 1.2s ease-in-out infinite; } .notif-more-hint .nmh-count{ font-family: var(--theme-hdg-font); font-size: 13.2px; color: #fff; background: #ff3b30; border-radius: 999px; min-width: 19px; height: 19px; padding: 0 5px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } @keyframes notifArrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .settings-btn-row{ display: flex; flex-direction: column; gap: 8px; margin: 10px 20px 16px; } .settings-slim-btn{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 16.1px 14px; min-height: calc(1em + 32px); border-radius: 12px; border: 1px solid rgba(140,180,255,0.28); box-shadow: 0 3px 0 rgba(var(--shadow-tint), 0.9), 0 6px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.25); color: #fff; cursor: pointer; text-align: left; box-sizing: border-box; } .settings-slim-btn .ico{ width: 19.26px; height: 19.26px; color: var(--gold-light); flex-shrink: 0; } .settings-slim-btn span{ font-family: var(--theme-hdg-font); font-size: 14.98px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .settings-slim-btn:active{ transform: translateY(2px) scale(0.99); box-shadow: 0 1px 0 #041028, 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12); } #nickname-block{ position: relative; /* место оставлено заранее — ничего не прыгает, когда кнопка появится */ margin-bottom: 0; padding-bottom: 0; } .nick-edit-btn{ display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 3; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 20px; cursor: pointer; } .nick-edit-btn.show{ display: inline-block; } .avatar-gallery-btn{ position: absolute; top: -2px; right: -4px; z-index: 8; padding: 5px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1.2; color: #fff; background: rgba(12, 18, 36, 0.92); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.4); cursor: pointer; white-space: nowrap; max-width: 88px; } .avatar-gallery-btn-plain{ position: static !important; top: auto !important; right: auto !important; max-width: none !important; padding: 8px 16px !important; font-size: 13px !important; border-radius: 10px !important; background: linear-gradient(165deg, #1e4a8c 0%, #0c1e3a 100%) !important; } .avatar-gallery-btn:active{ transform: scale(0.96); } /* накладка рамки из PNG */ .avatar-gear-btn{ position: absolute; right: 2px; bottom: 2px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: #fff; background: rgba(12, 16, 28, 0.88); border: 1.5px solid rgba(255,255,255,0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.45); } .avatar-gear-btn:active{ transform: scale(0.94); } .pick-photo-btn{ flex-shrink: 0; } .pick-photo-btn{ background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 12px; font-weight: 700; padding: 10px 14px; border-radius: 14px; cursor: pointer; max-width: 120px; line-height: 1.25; text-align: center; } .pick-photo-btn:active{ transform: scale(0.95); } .photo-picker{ margin: 0 0 12px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.1); } .photo-picker[hidden]{ display: none !important; } .photo-opt{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); background: linear-gradient(165deg, #004FBA 0%, #073B8A 100%); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; } .photo-opt .po-ic{ font-size: 18px; } .photo-opt-label{ font-family: var(--theme-hdg-font); font-size: 12px; letter-spacing: 0.06em; color: var(--gold-light); margin: 4px 0 8px; text-transform: uppercase; } /* объёмные плитки профиля */ #tab-profile .settings-slim-btn, #tab-profile .edit-btn, #tab-profile .pick-photo-btn, #tab-profile .btn-join { box-shadow: 0 3px 0 rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.2); } .profile-contacts-tile{ border-color: rgba(var(--theme-border-accent), 0.4) !important; background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, transparent 45%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 55%, var(--royal-bot) 100%) !important; box-shadow: 0 3px 0 rgba(var(--shadow-tint), 0.85), 0 8px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14) !important; } #tab-profile .pick-photo-btn { background: linear-gradient(165deg, #1a4a9e 0%, #0d2f6e 100%); border-color: rgba(140,180,255,0.3); font-weight: 700; } #tab-profile .photo-opt { box-shadow: 0 3px 0 #021a45, 0 6px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2); } .notif-read-label{ margin-left: 8px; font-size: 12.5px; color: #0D7030; opacity: 1; font-style: normal; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; align-self: flex-end; line-height: 1; padding-bottom: 2px; } .notif-item .ir-vote{ -webkit-tap-highlight-color: transparent; outline: none !important; box-shadow: none !important; border: none !important; background: transparent; appearance: none; -webkit-appearance: none; } .notif-item .ir-vote:focus, .notif-item .ir-vote:active{ outline: none !important; box-shadow: none !important; border: none !important; background: transparent !important; filter: none !important; transform: none !important; } .notif-item.is-read, .notif-item.is-read *{ filter: none !important; } .rating-months{ display: flex; gap: 8px; margin: 0; padding: 4px 6px 4px 10px; background: rgba(0,0,0,0.2); border-radius: 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; scroll-behavior: smooth; flex: 1; min-width: 0; margin-left: -8px; padding-left: 16px; } .rating-months::-webkit-scrollbar{ display: none; } .rating-months button{ flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.12); background: rgba(120,120,130,0.28); color: rgba(255,255,255,0.72); font-size: 13.8px; font-weight: 400; padding: 9.2px 16px; border-radius: 999px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; white-space: nowrap; } /* единая полоса месяцев рейтинга */ .rating-months-wrap .rating-overall-fixed.on{ opacity: 1 !important; } .rating-podium .pod-name-text{ min-width: 0; text-align: center; } /* Список рейтинга: ник до 22 символов виден целиком (при нехватке места переносится на вторую строку) */ .rating-list .r-row .r-name, .rating-list .r-row .r-nick-text{ white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.15; } /* полоса месяцев рейтинга */ .rating-months-wrap{ background: rgba(0,0,0,0.28) !important; border-radius: 20px !important; padding: 5px 6px 5px 5px !important; overflow: hidden !important; } .rating-months-wrap .rating-overall-fixed{ position: relative !important; z-index: 4 !important; border: 1px solid rgba(255,255,255,0.1) !important; background: #1a1a1e !important; color: rgba(255,255,255,0.75) !important; font-size: 13.8px !important; font-weight: 800 !important; padding: 9.2px 16px !important; border-radius: 999px !important; cursor: pointer !important; opacity: 1 !important; box-shadow: none !important; } .rating-months-wrap .rating-overall-fixed.on{ background: linear-gradient(180deg, #4A72D4 0%, #1A3F9A 48%, #0C1E52 100%) !important; color: #fff !important; border-color: rgba(190,215,255,0.5) !important; box-shadow: 0 3px 0 #07122e, 0 7px 14px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -3px 6px rgba(0,0,0,0.35) !important; filter: none !important; } .rating-months-wrap .rating-months{ background: transparent !important; padding: 0 10px 0 4px !important; border-radius: 0 !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%) !important; } .rating-months button.on{ background: linear-gradient(180deg, #4A72D4 0%, #1A3F9A 48%, #0C1E52 100%) !important; color: #fff !important; border-color: rgba(190,215,255,0.5) !important; box-shadow: 0 3px 0 #07122e, 0 7px 14px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -3px 6px rgba(0,0,0,0.35) !important; filter: none !important; opacity: 1 !important; } .stat-row-extra{ margin-top: 19px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,0.12); } /* профиль: аватар ×0.5 от прежнего 145px */ #tab-profile .avatar-lg, .avatar-lg{ width: 72px !important; height: 72px !important; } /* ник как в рейтинге — без принудительных капсов Bebas */ #tab-profile .uname, .uname{ font-family: inherit !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; text-transform: none !important; } #tab-profile .uname.hdg{ font-family: inherit !important; text-transform: none !important; letter-spacing: 0.01em !important; } .stat-card-head{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 14px !important; position: relative !important; } .stat-card-head .stat-title, .stat-card-head .stat-period-btn{ transition: opacity 0.22s ease; } .stat-card-head.is-picking .stat-title, .stat-card-head.is-picking .stat-period-btn{ opacity: 0 !important; pointer-events: none !important; } .stat-period-inline{ display: flex; position: absolute; left: 0; right: 0; top: 0; bottom: 0; align-items: center; gap: 6px; min-width: 0; background: rgba(0,0,0,0.28); border-radius: 20px; padding: 4px 5px; /* Единая прокручиваемая лента: «Все месяцы» и отдельные месяцы едут ОДНИМ рядом, а не двумя соседними скролл-блоками — нечему прятаться друг под другом, растушёвка только по внешним краям всего ряда. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); opacity: 0; pointer-events: none; transform: translateX(28%); transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } .stat-period-inline::-webkit-scrollbar{ display: none; } .stat-card-head.is-picking .stat-period-inline{ display: flex !important; opacity: 1; pointer-events: auto; transform: translateX(0); } .stat-overall-fixed{ flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.1); background: #1a1a1e; color: rgba(255,255,255,0.75); font-size: 12.5px; font-weight: 800; padding: 7px 14px; border-radius: 999px; cursor: pointer; } .stat-overall-fixed.on{ background: linear-gradient(180deg, #4A72D4 0%, #1A3F9A 48%, #0C1E52 100%); color: #fff; border-color: rgba(190,215,255,0.5); box-shadow: 0 3px 0 #07122e, 0 7px 14px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -3px 6px rgba(0,0,0,0.35); } /* .stat-period-menu — не отдельная прокрутка: display:contents отдаёт кнопки-месяцы в общий ряд .stat-period-inline. */ .stat-period-menu{ display: contents; } .stat-period-inline .stat-period-menu button{ display: inline-flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(120,120,130,0.25) !important; color: rgba(255,255,255,0.75) !important; padding: 7px 14px !important; font-size: 12.5px !important; font-weight: 600 !important; border-radius: 999px !important; cursor: pointer; } .stat-period-inline .stat-period-menu button.on{ background: linear-gradient(180deg, #4A72D4 0%, #1A3F9A 48%, #0C1E52 100%) !important; color: #fff !important; border: 1px solid rgba(190,215,255,0.5) !important; font-weight: 800 !important; } /* «Все месяцы 2026» — текст длиннее обычного месяца, ужимаем шрифт и межбуквенный интервал, а не саму кнопку (высота ленты не растёт). */ .stat-period-inline .stat-period-menu button.stat-year-btn{ font-size: 10.5px !important; letter-spacing: -0.01em !important; font-weight: 800 !important; background: rgba(232,176,60,0.14) !important; border-color: rgba(232,176,60,0.35) !important; color: rgba(255,230,170,0.9) !important; } .stat-period-inline .stat-period-menu button.stat-year-btn.on{ background: linear-gradient(180deg, #E8B03C 0%, #B8842A 100%) !important; border-color: rgba(255,220,150,0.6) !important; color: #1a1200 !important; } .stat-period-btn.is-disabled{ opacity: 0.35; pointer-events: none; } .stat-row-extra{ justify-content: space-around; } .stat-empty-note{ text-align: center; padding: 10px 8px 2px; font-size: 12.5px; color: rgba(255,255,255,0.65); font-weight: 600; } .avatar-wrap{ position: relative; display: inline-block; flex-shrink: 0; } .avatar-wrap .avatar-settings-btn{ display: flex !important; position: absolute; top: 0; right: 0; z-index: 6; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: #fff; background: rgba(12, 16, 28, 0.9); border: 1.5px solid rgba(255,255,255,0.35); box-shadow: 0 2px 8px rgba(0,0,0,0.45); } .avatar-settings-btn img{ width: 15px; height: 15px; display: block; object-fit: contain; } .avatar-settings-btn:active{ transform: scale(0.96); box-shadow: none; } .rating-search-wrap{ margin: 0 14px 10px; display: flex; align-items: center; gap: 8px; position: relative; } .rating-search-wrap input{ flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.3); border-radius: 12px; padding: 10px 14px; color: #fff; font-size: 13px; outline: none; } .rating-find-btn{ display: none; flex-shrink: 0; border: 1px solid rgba(140,180,255,0.35); background: linear-gradient(165deg, #004FBA 0%, #073B8A 55%, #02235A 100%); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 0 #021a45, inset 0 1px 0 rgba(255,255,255,0.2); } .rating-search-wrap.is-focused .rating-find-btn, .rating-search-wrap.has-query .rating-find-btn{ display: inline-flex; align-items: center; justify-content: center; } .stat-card-head{ min-height: 40px !important; height: 40px !important; overflow: hidden !important; } .stat-card-head.is-picking{ height: 40px !important; } .stat-period-inline{ height: 100%; box-sizing: border-box; } .photo-opt-row{ display: flex; align-items: stretch; gap: 8px; margin-bottom: 0; } .photo-opt-row .gallery-opt{ margin-bottom: 10px; } .photo-opt-row .gallery-opt{ flex: 1; min-width: 0; } .photo-done-btn{ flex-shrink: 0; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); background: linear-gradient(165deg, #004FBA 0%, #073B8A 100%); color: #fff; font-size: 13px; font-weight: 700; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; cursor: pointer; white-space: nowrap; box-sizing: border-box; min-height: 48px; } .stat-card{ margin: 16px 20px 4px !important; padding: 18px 15px 24px !important; border-radius: 20px !important; position: relative !important; background: radial-gradient(120% 90% at 50% 18%, rgba(80,150,255,0.35) 0%, transparent 55%), radial-gradient(90% 70% at 50% 100%, rgba(0,40,120,0.55) 0%, transparent 55%), linear-gradient(165deg, #1a6fd8 0%, #0a4db0 28%, #053a8a 58%, #021f55 100%) !important; border: 2px solid rgba(190,205,220,0.55) !important; box-shadow: /* outer depth */ 0 10px 0 #0a0e18, 0 16px 28px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.2), /* rim light like silver bezel */ inset 0 2px 0 rgba(230,240,255,0.45), inset 0 -3px 0 rgba(0,20,60,0.45), inset 2px 0 0 rgba(255,255,255,0.12), inset -2px 0 0 rgba(0,0,0,0.2), /* inner bowl depth */ inset 0 12px 22px rgba(0,0,0,0.25), inset 0 -10px 18px rgba(40,120,255,0.18) !important; } .stat-card-head h2, .stat-card-head .hdg, .stat-title{ color: var(--gold) !important; text-shadow: 0 1px 0 rgba(255,230,150,0.25), 0 1px 2px rgba(0,0,0,0.45); } .stat-row-5 b{ color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.55); font-weight: 400; letter-spacing: 0.02em; } .stat-row-5 span{ text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .stat-period-btn{ background: rgba(0,0,0,0.25) !important; border: 1px solid rgba(255,255,255,0.22) !important; color: #fff !important; } .stat-row-5:not(.stat-rank-hero){ display: flex !important; justify-content: space-between !important; text-align: center !important; align-items: flex-start !important; } .stat-row-5 .stat-cell, .stat-row-5 > div{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; } .stat-row-5:not(.stat-rank-hero) b{ display: block !important; height: auto !important; line-height: 1 !important; font-size: 20px !important; margin: 0 !important; padding: 0 !important; } .stat-rank-hero .stat-hero b{ height: auto !important; line-height: .85 !important; font-size: 60px !important; } .stat-rank-hero .stat-side b{ height: auto !important; line-height: 1 !important; font-size: 30px !important; } .stat-row-5 span{ display: block !important; min-height: 16px !important; line-height: 1.15 !important; font-size: 9.5px !important; margin-top: 3px !important; color: rgba(255,255,255,0.82) !important; text-transform: uppercase; } .stat-row-extra .stat-cell span, .stat-row-extra span{ min-height: 22px !important; } .btn-save-3d{ position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.02) 60%), var(--royal-flat) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); border: 1.5px solid rgba(255,255,255,0.32) !important; color: #fff !important; border-radius: 14px !important; padding: 14px 16px !important; font-size: 15px !important; letter-spacing: 0.06em !important; box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 10px 20px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 8px rgba(0,0,0,0.2) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important; transform: translateY(0); } .btn-save-3d:active, .btn-save-3d.is-pressing{ transform: translateY(5px) !important; box-shadow: 0 1px 0 #021028, 0 4px 10px rgba(0,0,0,0.35), inset 0 2px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important; filter: brightness(0.95); } .btn-save-3d.is-saving{ pointer-events: none; } .btn-save-3d.is-saving::after{ content: ' ✓'; } .modal-overlay.closing{ opacity: 0 !important; transition: opacity 0.32s ease !important; } .modal-overlay.closing .modal-sheet{ transform: translateY(12px) scale(0.98) !important; opacity: 0 !important; transition: transform 0.32s ease, opacity 0.32s ease !important; } /* «Идеи», «Отзывы», «Поддержка»: без стрелки и затемнения внизу, кнопки действий прилипают к низу */ .ir-sticky-fade{ display: none !important; height: 0 !important; margin: 0 !important; background: none !important; } .ir-panel.active{ display: flex !important; flex-direction: column !important; min-height: 0 !important; max-height: 100%; } .ir-panel-scroll{ flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; padding-bottom: 8px !important; } .ir-action-btn{ flex-shrink: 0 !important; border-radius: 14px !important; border: 1.5px solid #000 !important; box-shadow: 0 3px 0 #000, 0 6px 14px rgba(0,0,0,0.35) !important; } /* Идея — синий + оранжевый */ .ir-action-btn, .ir-btn-idea, .ir-btn-review, #ir-idea-btn, #ir-review-btn{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); opacity: 1 !important; filter: none !important; } .ir-btn-idea, #ir-idea-btn{ background: linear-gradient(165deg, #5aa0ff 0%, #2f6fd0 40%, #c87820 130%) !important; background-color: #3d7fd0 !important; background-image: linear-gradient(165deg, #4f92e8 0%, #2a62b8 45%, #d4892a 160%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 4px rgba(0,0,0,0.12) !important; } /* Отзыв — синий + зелёный */ .ir-btn-review, #ir-review-btn{ background-image: linear-gradient(165deg, #5aade8 0%, #3a88c8 40%, #3cb87a 150%) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 4px rgba(0,0,0,0.12) !important; } /* стрелка и затемнение внизу окна структуры скрыты только для «Идей», «Отзывов» и «Поддержки» */ #structure-modal.no-scroll-chrome .modal-scroll-hint, #structure-modal.no-scroll-chrome .modal-scroll-track{ display: none !important; opacity: 0 !important; } #structure-modal.no-scroll-chrome .modal-body-wrap.has-overflow .modal-scroll-hint{ opacity: 0 !important; } .ir-panel.active{ position: relative !important; } #ir-idea-btn, #ir-review-btn, .ir-action-btn.ir-btn-idea, .ir-action-btn.ir-btn-review{ position: relative !important; bottom: auto !important; margin: 10px 0 0 !important; } /* тело окна растягивается, чтобы прилипшие кнопки стояли у самого низа */ #structure-modal.no-scroll-chrome .modal-inner{ display: flex !important; flex-direction: column !important; padding-bottom: 3px !important; } #structure-modal.no-scroll-chrome .modal-body-wrap, #structure-modal.no-scroll-chrome .modal-body, #structure-modal.no-scroll-chrome #modal-body-text{ flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; height: 100% !important; max-height: 100% !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } #structure-modal.no-scroll-chrome .ir-tabs{ flex-shrink: 0 !important; } /* Идеи и отзывы — «стена» нормального размера сразу, список прокручивается внутри, кнопка внизу ничего не перекрывает */ #structure-modal.no-scroll-chrome #modal-body-text:has(.ir-tabs){ height: min(68vh, 560px) !important; } #structure-modal.no-scroll-chrome .ir-panel.active{ flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; height: 100% !important; } #structure-modal.no-scroll-chrome .ir-panel-scroll, #structure-modal.no-scroll-chrome .faq-list{ flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; max-height: none !important; } #structure-modal.no-scroll-chrome .ir-action-btn, #structure-modal.no-scroll-chrome #ir-idea-btn, #structure-modal.no-scroll-chrome #ir-review-btn{ position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 10px 0 0 !important; z-index: 5 !important; opacity: 1 !important; filter: none !important; } /* текст гаснет только над кнопкой */ #structure-modal.no-scroll-chrome .ir-panel.active::after{ content: '' !important; display: block !important; position: absolute !important; left: 0; right: 0; bottom: 56px; height: 40px; pointer-events: none; z-index: 3; background: linear-gradient(to top, rgba(var(--shadow-tint), 0.9) 0%, rgba(var(--shadow-tint), 0.45) 50%, transparent 100%) !important; } /* форма открыта — пелену полностью гасим (иначе перекрывает textarea) */ #structure-modal.no-scroll-chrome.is-composing .ir-panel.active::after, #structure-modal.no-scroll-chrome .ir-panel.is-composing::after{ display: none !important; content: none !important; opacity: 0 !important; height: 0 !important; } /* Прокрутка запрещена точечно (лента месяцев в рейтинге и т.п.), а не на .phone/.screen/body/html целиком — иначе не работает жест «потянуть вниз, чтобы обновить». */ #rating-months { overscroll-behavior-x: contain; overscroll-behavior-y: none; } /* Рамка формата в «Форматах» — одна из двух, у любого формата (выбирается в админке): «полуобод» — цветная кромка слева и сверху, гаснет к правому краю; «обводка» (fl-full) — рамка цветом формата со свечением. */ .fmt-card:not(.fl-full)::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; box-shadow: inset 4.5px 0 0 0 var(--fc, var(--gold)), inset 0 4.5px 0 0 var(--fc, var(--gold)); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 56px), transparent 100%); } .fmt-card.fl-full{ border: 1.5px solid var(--fc) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--fc) 85%, transparent), 0 0 18px color-mix(in srgb, var(--fc) 40%, transparent) !important; } /* у обводки название — светлым оттенком цвета формата, тег — белой рамкой */ .fmt-card.fl-full .fmt-title{ color: var(--fc-tint) !important; } .fmt-card.fl-full .fmt-desc{ color: #ffffff; border-color: rgba(255,255,255,0.55); } .rating-months-wrap{ position: relative !important; } .rating-months-wrap .rating-overall-fixed{ flex: 0 0 auto !important; } .rating-months-wrap #rating-months, .rating-months-wrap .rating-months{ flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; width: auto !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x; } /* касания в рейтинге не прокручивают страницу */ #tab-rating{ overscroll-behavior: none; touch-action: pan-y; } #tab-rating .rating-months-wrap{ touch-action: pan-x; } .rating-months-wrap { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 14px 12px !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box !important; } #rating-months.rating-months, .rating-months-wrap > #rating-months { flex: 1 1 0 !important; min-width: 0 !important; width: 0 !important; /* flex-сжатие для горизонтальной прокрутки */ margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: auto !important; } .confirm-note.confirm-note-warn{ font-weight: 600; } .confirm-title:empty{ display: none !important; } .confirm-sub:empty{ display: none !important; } /* Занятия (обучение, набор): фон, рамка и чёлка — из оформления формата; фон держится поверх цветов состояний турнира (у занятия их нет) */ .week-card.is-learn{ background: var(--fmt-bg, var(--royal-mid)) !important; box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255,255,255,0.35); } .week-card.is-learn .accent-bar{ display: block !important; height: 4px !important; box-shadow: none !important; flex-shrink: 0; } /* Картинка «Обучения» в ленте — по общему правилу .week-card .thumb-wrap img, как у обычных форматов. */ .week-card.is-learn .daytag, .week-card.is-learn .cname{ text-shadow: 0 1px 3px rgba(0,0,0,0.4); font-weight: 800; } .week-card.is-learn .cseats{ color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .week-card.is-learn .cseats b{ color: #FFFFFF !important; } .hero-card.is-learn{ background: var(--fmt-bg, var(--royal-mid)) !important; } .hero-card.is-learn .hero-accent-bar, .hero-card.is-learn.is-today .hero-accent-bar, .home-top-zone .hero-card.is-learn .hero-accent-bar{ display: block !important; height: 7.99px !important; opacity: 1 !important; box-shadow: none !important; visibility: visible !important; } /* убрать белую верхнюю кромку у обучения */ .hero-card.is-learn, .home-top-zone .hero-card.is-learn, .hero-card.is-learn.is-today{ box-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2) !important; } /* Картинка «Обучения» на афише — по общим правилам .hero-top .hero-cards / .hero-cards .hcard-face. */ .hero-card.is-learn .day-date, .hero-card.is-learn .start-line, .hero-card.is-learn #hero-title, .hero-card.is-learn .meta{ color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } .hero-card.is-learn #hero-title{ font-size: 21.6px !important; font-weight: 800 !important; letter-spacing: 0.04em; color: #FFFFFF !important; } .hero-card.is-learn .start-line b, .hero-card.is-learn #hero-title b, .hero-card.is-learn .meta b{ color: #FFFFFF !important; } .hero-card.is-learn .meta b, .hero-card.is-learn #hero-time{ color: #FFFFFF !important; } .hero-card.is-learn .hero-bottom{ gap: 10px; align-items: flex-end; } .hero-card.is-learn .hero-tag, .hero-card.is-learn #hero-tag{ display: none !important; } /* Скролл только внутри .screen. */ html, body { overflow: hidden; min-height: 100%; height: 100vh; height: 100dvh; } body { display: flex; justify-content: center; align-items: stretch; padding: 0; box-sizing: border-box; } .phone { overflow: hidden; flex-shrink: 0; } .screen { overflow-x: hidden; overflow-y: auto; } /* лента месяцев рейтинга: прокрутка не передаётся странице */ #rating-months { overscroll-behavior: contain; touch-action: pan-x; } .hero-learn-tag{ display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,0.22); color: #FFFFFF; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; border: 1px solid rgba(255,255,255,0.35); } .hero-card.is-learn .start-line{ line-height: 1.4; font-size: 15.7px !important; /* ещё +30% */ font-weight: 700 !important; } .hero-card.is-learn .start-line b{ font-size: 15.7px !important; font-weight: 800 !important; } .hero-card.is-learn .meta{ display: none; } .contacts-list{ display:flex; flex-direction:column; gap:10px; } .contacts-row{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); } .contacts-ico{ width:18px; height:18px; flex-shrink:0; color:#C8D6EC; } .contacts-ico svg{ width:18px; height:18px; display:block; fill:currentColor; } .contacts-ico-phone{ color:#3B82F6; } .contacts-ico-phone svg{ fill:none; stroke:#3B82F6; } .contacts-ico-mail{ color:#fff; } .contacts-ico-mail svg{ fill:none; stroke:#fff; } .contacts-ico-img img{ width:22px; height:22px; display:block; border-radius:6px; object-fit:cover; } .contacts-label{ font-family:var(--theme-hdg-font); font-size:14px; letter-spacing:0.04em; color:var(--gold-light); text-transform:uppercase; flex-shrink:0; } .contacts-val{ font-size:13px; font-weight:600; color:#fff; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; } .contacts-val.is-hidden-mark{ color: transparent; } .contacts-priv-lab{ display:none; font-size:11px; color:rgba(255,255,255,0.5); flex-shrink:0; margin-left:auto; } #contacts-modal.is-own .contacts-priv-lab.is-on{ display:inline; } .contacts-hide-check{ display: none; appearance: none; -webkit-appearance: none; width: 42px; height: 24px; flex-shrink: 0; border-radius: 999px; background: #3a4250; border: 1px solid rgba(255,255,255,0.18); position: relative; cursor: pointer; } .contacts-hide-check::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition: left 0.15s ease; } .contacts-hide-check:checked{ background:#2f9e5f; } .contacts-hide-check:checked::after{ left:20px; } #contacts-modal.is-own .contacts-hide-check{ display: block; } .contacts-actions{ display:none; } .contacts-vis-caption{ display:none; } #contacts-modal .contacts-priv-head{ margin: 0 4px 8px; font-size: 11px; line-height: 1.2; color: #8E9AAF; text-align: right; padding-right: 8px; } #contacts-modal .contacts-val-input{ background: transparent; border: 0; outline: none; color: #fff; font-size: 13px; font-weight: 600; min-width: 0; flex: 1; z-index: 2; position: relative; } #contacts-modal .contacts-val-input::placeholder{ color: rgba(255,255,255,0.38); font-weight: 500; } #contacts-modal .contacts-row{ position: relative; z-index: 1; } #contacts-modal .contacts-hide-check{ z-index: 3; position: relative; } /* Окна по центру — при любой прокрутке и на любом устройстве */ .modal-overlay.centered { align-items: center !important; justify-content: center !important; padding: 16px !important; } .modal-overlay.centered .modal-sheet { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 auto !important; max-height: min(78vh, calc(100% - 48px)) !important; width: min(100%, 420px) !important; transform: none !important; } .phone.modal-open .topbar { z-index: 1 !important; pointer-events: none !important; } .phone:not(.modal-open) .topbar { z-index: 40 !important; pointer-events: auto !important; } #achievements-modal.modal-overlay, #contacts-modal.modal-overlay, #screen-settings-modal.modal-overlay { align-items: center !important; justify-content: center !important; padding: 16px !important; } #achievements-modal .modal-sheet, #contacts-modal .modal-sheet, #screen-settings-modal .modal-sheet, #results-modal .modal-sheet, #month-finalists-modal .modal-sheet, #month-invite-modal .modal-sheet, #vote-modal .modal-sheet { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; margin: 0 auto !important; max-height: min(78vh, calc(100% - 48px)) !important; width: min(100%, 420px) !important; border-radius: 18px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; } #contacts-modal .modal-sheet, #screen-settings-modal .modal-sheet, #results-modal .modal-sheet, #month-finalists-modal .modal-sheet, #month-invite-modal .modal-sheet, #vote-modal .modal-sheet, #confirm-modal .modal-sheet { border: 1px solid rgba(255,255,255,0.16) !important; background: linear-gradient(165deg, var(--royal-mid), var(--royal-bot)) !important; padding-bottom: 22px !important; } #month-finalists-modal.final-month .modal-sheet, #month-invite-modal.final-month .modal-sheet{ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--fmt-month-bg) center/cover no-repeat !important; } #month-finalists-modal.final-season .modal-sheet, #month-invite-modal.final-season .modal-sheet{ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--fmt-season-bg) center/cover no-repeat !important; } #month-finalists-modal.final-year .modal-sheet, #month-invite-modal.final-year .modal-sheet{ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), var(--fmt-year-bg) center/cover no-repeat !important; } #month-finalists-modal.final-month .modal-sheet, #month-invite-modal.final-month .modal-sheet{ border: 1.5px solid var(--c-month) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--c-month) 35%, transparent) !important; } #month-finalists-modal.final-season .modal-sheet, #month-invite-modal.final-season .modal-sheet{ border: 1.5px solid var(--c-season) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--c-season) 35%, transparent) !important; } #month-finalists-modal.final-year .modal-sheet, #month-invite-modal.final-year .modal-sheet{ border: 1.5px solid var(--c-year) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--c-year) 35%, transparent) !important; } #offer-gate-sheet, #structure-sheet.is-offer { background: rgba(9, 11, 16, 0.96) !important; backdrop-filter: blur(22px) saturate(1.05) !important; -webkit-backdrop-filter: blur(22px) saturate(1.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; } #notif-panel { position: absolute !important; left: 16px !important; right: 16px !important; width: auto !important; box-sizing: border-box !important; z-index: 10000 !important; } /* Пока открыто окно, страница не прокручивается */ .phone.modal-open .screen { overflow: hidden !important; touch-action: none !important; } .phone.modal-open { overflow: hidden !important; } /* Achievements: scroll INSIDE the sheet only (трофеи — правило TROPHIES ниже) */ #achievements-modal .modal-sheet { display: flex !important; flex-direction: column !important; max-height: min(78vh, calc(100% - 48px)) !important; overflow: hidden !important; overscroll-behavior: contain; } #achievements-modal .modal-head { flex-shrink: 0; } #achievements-modal.modal-overlay { touch-action: none; } #achievements-modal .modal-sheet { background: var(--royal-flat, #12368E) !important; border: 1px solid rgba(var(--theme-border-accent), 0.28) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12) !important; } /* Bottom fade: more content below (НЕ в идеях/отзывах) */ .fh-scroll-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; z-index: 6; background: linear-gradient(to top, rgba(6,12,32,0.95) 10%, rgba(6,12,32,0.55) 55%, transparent 100%); opacity: 0; transition: opacity 0.2s ease; } .fh-scroll-fade.is-visible { opacity: 1; } /* Идеи и отзывы — полностью без затемнения */ #structure-modal.no-scroll-chrome .fh-scroll-fade, .ir-panel .fh-scroll-fade, .ir-panel-scroll ~ .fh-scroll-fade, .ir-panel > .fh-scroll-fade { display: none !important; opacity: 0 !important; height: 0 !important; background: none !important; } /* затухание — над нижними кнопками в «Идеях» и «Поддержке» */ #structure-modal .modal-sheet { position: relative; } #structure-modal.no-scroll-chrome .ir-panel.active, #structure-modal.no-scroll-chrome .faq-list { position: relative; } /* Идеи/отзывы — без чёрного затемнения внизу */ #structure-modal.no-scroll-chrome .modal-scroll-hint { display: none !important; opacity: 0 !important; background: none !important; height: 0 !important; } #structure-modal.no-scroll-chrome .modal-body-wrap.at-bottom .modal-scroll-hint { display: none !important; opacity: 0 !important; } .confirm-note.confirm-note-warn, .confirm-note.confirm-note-white { color: #ffffff !important; font-size: 13px !important; line-height: 1.45 !important; text-align: center !important; margin-top: 14px !important; margin-bottom: 4px !important; } .confirm-title { margin-bottom: 12px !important; text-align: center; } .confirm-note .confirm-emph { font-size: 1.1em; /* +10% */ font-weight: 700; /* заметно жирнее (~+20%) */ letter-spacing: 0.02em; } .confirm-title .confirm-day { text-transform: uppercase; font-weight: 800; /* на ~20% жирнее обычного заголовка */ letter-spacing: 0.04em; } /* Затемнение через собственный цвет фона, а не opacity/filter на кнопке — opacity родителя физически ограничивает яркость всех потомков, а числа игроков/пула должны оставаться полностью чёткими на фоне затемнённой карточки (см. past-players-block / past-pool-block ниже). */ .week-card.is-past-card { background: #000000 !important; border: 1.5px solid rgba(232, 176, 60, 0.55) !important; } .week-card.is-past-card .past-badge { background: rgba(232, 176, 60, 0.14) !important; color: #E8B03C !important; display: inline-block; font-weight: 700; border-radius: 999px; border: 1px solid rgba(232, 176, 60, 0.35); } .week-card.is-past-card .accent-bar { opacity: 0.4; } .past-players-block{ flex: 1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 2px 4px; } .past-players-num{ font-family:var(--theme-hdg-font); font-size:28px; line-height:1; color:#fff; } .past-players-lbl{ font-size:9px; text-transform:uppercase; letter-spacing:0.03em; color:rgba(255,255,255,0.8); margin-top:3px; } .past-pool-block{ padding: 2px 6px 6px; text-align:center; flex-shrink:0; } .past-pool-num{ font-family:var(--theme-hdg-font); font-size:14px; color:#F6CC4D; letter-spacing:0.02em; line-height:1.15; } .past-pool-lbl{ font-size:8px; text-transform:uppercase; letter-spacing:0.04em; color:rgba(255,255,255,0.65); margin-top:1px; } #btn-join.is-past-join { opacity: 0.55; filter: grayscale(0.2); pointer-events: none; background: rgba(40, 48, 70, 0.9) !important; color: rgba(255,255,255,0.7) !important; } .hero-past-winners { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255,255,255,0.12); } .hero-past-winners .hpw-title { font-family: var(--theme-hdg-font); font-size: 16px; letter-spacing: 0.06em; color: rgba(255,255,255,0.9); margin-bottom: 4px; } .hero-past-winners .hpw-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .hero-past-winners .hpw-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; } .hero-past-winners .hpw-place { color: rgba(255, 220, 140, 0.95); font-weight: 600; } .hero-past-winners .hpw-name { color: #fff; font-weight: 600; } .week-card.is-past-card .past-badge { font-size: 9px !important; padding: 2px 6px !important; letter-spacing: 0.02em !important; line-height: 1.1 !important; text-transform: none !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-card.is-past-hero .start-line, .hero-card.is-past-hero .join-line, .hero-card.is-past-hero #hero-day2, .hero-card.is-past-hero #hero-seats, .hero-card.is-past-hero #hero-meta, .hero-card.is-past-hero .meta { display: none !important; } /* прошедшая афиша: без аватарок; слева кнопка «Результаты» по размеру слова, за ней победитель */ .hero-card.is-past-hero .hero-past-avatars { display: none !important; } .hero-card.is-past-hero .hero-past-actions { gap: 10px; } .hero-card.is-past-hero .btn-results { flex: 0 0 auto; width: auto; min-width: 0; padding: 6px 18px; } .week-card.is-past-card .cseats { font-size: 10px; } .phone { filter: none !important; /* filter только у .screen */ } .theme-row-divider{ width:72%; height:1px; margin:10px auto 6px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent); border:0; } .theme-row-special{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; width:100%; } .theme-dot.is-locked{ opacity: 0.32; filter: grayscale(0.85) brightness(0.7); cursor: default; pointer-events: none; } .theme-dot.is-locked img{ opacity: 0.85; } .theme-dot-wrap{ align-items:stretch; } .theme-row-others,.theme-row-special{ align-items:flex-start; } html[data-theme-id="opal"] .phone{ background:linear-gradient(180deg,#121214 0%,#08080a 45%,#030304 100%) !important; } html[data-theme-id="opal"] .hero-card,html[data-theme-id="opal"] .week-card,html[data-theme-id="opal"] .tile,html[data-theme-id="opal"] .modal-sheet{ border-color:rgba(160,160,165,0.45) !important; background:linear-gradient(165deg,#1a1a1c 0%,#0e0e10 55%,#0a0a0c 100%) !important; box-shadow:0 0 0 1px rgba(0,0,0,0.8), inset 0 1px 0 rgba(220,220,225,0.12), 0 12px 28px rgba(0,0,0,0.55) !important; backdrop-filter:none !important; } @keyframes fhCpPulse{ 0%,100%{box-shadow:0 0 18px rgba(255,0,127,0.45)} 50%{box-shadow:0 0 32px rgba(255,0,127,0.75)} } /* город по центру над аватаркой */ #tab-profile .player-city-line{ text-align: center !important; font-size: 12px !important; font-weight: 600 !important; opacity: 0.75 !important; position: static !important; left: auto !important; } /* строка рейтинга целиком для особого стиля ника */ .r-row.r-row-veteran .r-name{ background: transparent !important; } /* рамка — только накладка, размер аватарки фиксирован */ .avatar-frame-wrap{ display: inline-block !important; } #tab-profile .avatar-frame-wrap#my-avatar-frame-wrap{ width: 96px !important; height: 96px !important; } #my-avatar.avatar-lg, #my-avatar{ box-shadow: none !important; transform: none !important; } #my-avatar-frame-wrap .avatar-ornament, .avatar-frame-wrap .avatar-ornament{ position: absolute !important; inset: -18% !important; width: auto !important; height: auto !important; pointer-events: none !important; z-index: 2 !important; } .r-row.r-row-veteran{ position: relative !important; background: linear-gradient(135deg, rgba(0,255,200,0.08) 0%, rgba(30,64,175,0.35) 40%, rgba(99,102,241,0.2) 100%) !important; border: 1px solid rgba(0, 255, 204, 0.45) !important; box-shadow: 0 0 12px rgba(0, 255, 204, 0.25), inset 0 0 18px rgba(59, 130, 246, 0.2) !important; border-radius: 10px !important; overflow: hidden !important; } .r-row.r-row-veteran::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(0,255,204,0.35) 50%, transparent 100%) top / 100% 1px no-repeat, linear-gradient(90deg, transparent 0%, rgba(96,165,250,0.35) 50%, transparent 100%) bottom / 100% 1px no-repeat, linear-gradient(180deg, transparent 0%, rgba(0,255,204,0.25) 50%, transparent 100%) left / 1px 100% no-repeat, linear-gradient(180deg, transparent 0%, rgba(96,165,250,0.25) 50%, transparent 100%) right / 1px 100% no-repeat; } .r-row.r-row-veteran::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, rgba(0,255,204,0.12), transparent); } /* строка города над аватаркой не показывается */#tab-profile .player-city-line, #tab-profile.viewing-other .player-city-line{ display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .r-num{ font-size: 14.5px; } .r-name{ font-size: 13px; padding-left: 4px; } /* рамка аватарки без сдвига раскладки */#tab-profile #my-avatar-frame-wrap{ margin: 0 !important; } #tab-profile .avatar-wrap{ overflow: visible !important; } #tab-profile .profile-head{ overflow: visible !important; } #tab-profile .loyalty-card{ position: relative !important; z-index: 1 !important; margin-top: 12px !important; } /* рамка точно по размеру аватарки */ /* Значки только круглые, без квадратной подложки */ /* Рейтинг: значок в 2 раза больше */ /* полоса фона под ником ветерана */.r-row-veteran{ background: linear-gradient(90deg, rgba(29,78,216,0.22), rgba(15,23,42,0.15) 40%, transparent), repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(96,165,250,0.08) 12px, rgba(96,165,250,0.08) 13px) !important; border: 1px solid rgba(96,165,250,0.35) !important; box-shadow: inset 0 0 14px rgba(59,130,246,0.15) !important; } /* профиль и окна: обёртка = размер аватарки, накладка в той же коробке */#my-avatar-frame-wrap, .avatar-frame-wrap{ position: relative !important; width: 88px !important; height: 88px !important; overflow: visible !important; flex-shrink: 0 !important; margin: 0 !important; } #my-avatar, #my-avatar.avatar-lg, .avatar-frame-wrap > .avatar-lg{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; border-radius: 50% !important; overflow: hidden !important; z-index: 1 !important; margin: 0 !important; border: none !important; box-sizing: border-box !important; } #my-avatar-ornament, .avatar-frame-wrap > .avatar-ornament{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; margin: 0 !important; padding: 0 !important; transform: none !important; inset: auto !important; z-index: 5 !important; pointer-events: none !important; display: block !important; overflow: visible !important; } #my-avatar-ornament svg, #my-avatar-ornament img, .avatar-frame-wrap > .avatar-ornament svg, .avatar-frame-wrap > .avatar-ornament img{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; margin: 0 !important; display: block !important; object-fit: fill !important; transform: none !important; } /* кольцо рамки — в той же коробке, что фото аватарки */#tab-profile #my-avatar-frame-wrap{ position: relative !important; width: 88px !important; height: 88px !important; display: block !important; flex-shrink: 0 !important; } #tab-profile #my-avatar{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; overflow: hidden !important; z-index: 1 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #tab-profile #my-avatar-ornament{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; margin: 0 !important; padding: 0 !important; border: none !important; transform: none !important; z-index: 2 !important; pointer-events: none !important; box-sizing: border-box !important; } #tab-profile #my-avatar-ornament svg, #tab-profile #my-avatar-ornament img{ position: absolute !important; left: 0 !important; top: 0 !important; width: 88px !important; height: 88px !important; margin: 0 !important; padding: 0 !important; border: none !important; transform: none !important; display: block !important; object-fit: fill !important; box-sizing: border-box !important; } /* Аватар в рамке — фото занимает весь размер рамки, без зазора; орнамент рамки накладывается поверх тем же боксом */ .r-ava-wrap{ position: relative !important; width: 40px !important; height: 40px !important; flex-shrink: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* фото и рамка — оба absolute в одном боксе 40×40, общий центр */ .r-ava-wrap .r-ava, .r-ava-wrap .r-ava.empty{ position: absolute !important; left: 0 !important; top: 0 !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50% !important; overflow: hidden !important; z-index: 1 !important; display: block !important; box-sizing: border-box !important; background: rgba(255,255,255,0.08); } .r-ava-wrap .r-ava img{ position: absolute !important; left: 0 !important; top: 0 !important; width: 40px !important; height: 40px !important; margin: 0 !important; border: none !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; } .r-ava-wrap .avatar-ornament{ position: absolute !important; left: 0 !important; top: 0 !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: none !important; transform: none !important; pointer-events: none !important; z-index: 2 !important; overflow: visible !important; } .r-ava-wrap .avatar-ornament svg, .r-ava-wrap .avatar-ornament img{ position: absolute !important; left: 0 !important; top: 0 !important; width: 40px !important; height: 40px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; display: block !important; } .pod-ava-wrap{ position: relative !important; width: 56px !important; height: 56px !important; margin: -30px auto 8px; overflow: visible !important; flex-shrink: 0 !important; } .pod.gold .pod-ava-wrap{ width: 66px !important; height: 66px !important; margin-top: -36px; } .pod-ava-wrap .pod-ava{ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50% !important; overflow: hidden !important; z-index: 1 !important; } .pod-ava-wrap .avatar-ornament{ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important; inset: auto !important; pointer-events: none !important; z-index: 2 !important; } .pod-ava-wrap .avatar-ornament svg, .pod-ava-wrap .avatar-ornament img{ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; margin: 0 !important; display: block !important; } .month-invite-msg{ text-align: center; font-size: 14px; line-height: 1.4; color: #fff; font-weight: 600; margin: 8px 4px 8px; } .month-invite-msg.month-invite-other{ font-weight: 500; color: rgba(255,255,255,0.85); font-size: 13px; margin-bottom: 8px; } .month-btn-confirm{ display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; font-family: var(--theme-hdg-font); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-bottom: 8px; box-sizing: border-box; color: #fff; background: #1FA34A; border: none; box-shadow: none; } .month-btn-confirm:active{ background:#188a3e; } .fh-final-list{ zoom:.8; } .fh-fr{ gap:6px; padding:7px 8px 7px 7px; } .fh-fr .vote-ava{ width:30px; height:30px; } .fh-fr-n{ flex:0 0 auto; min-width:20px; font-family:var(--theme-hdg-font); font-size:15px; color:rgba(255,255,255,0.85); text-align:left; } .fh-fr-pts{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; background:rgba(255,255,255,0.08); border-radius:8px; padding:3px 8px; line-height:1.25; white-space:nowrap; } .fh-fr-top{ display:flex; align-items:center; gap:5px; font-family:var(--theme-hdg-font); font-size:15px; color:#fff; } .fh-fr-rate{ font-size:10px; opacity:0.75; } .fh-fr-mark{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:4px; background:#1FA34A; color:#fff; font-family:system-ui,sans-serif; font-size:11px; font-weight:800; line-height:1; } .fh-final-frame{ margin:2px 0 4px; padding:8px; border:1px solid rgba(255,255,255,0.85); border-radius:16px; box-shadow:0 0 6px rgba(255,255,255,0.55),0 0 16px rgba(255,255,255,0.22),inset 0 0 8px rgba(255,255,255,0.14); } .mi-status{ display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:12px; margin:0 0 10px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); text-align:left; } .mi-status .mi-ic{ flex:0 0 22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-top:1px; background:#5a6390; color:#fff; } .mi-status b{ display:block; font-size:14px; line-height:1.3; margin-bottom:1px; color:#fff; } .mi-status small{ display:block; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,0.72); } .mi-status.is-good{ background:rgba(31,163,74,0.18); border-color:rgba(31,163,74,0.6); } .mi-status.is-good .mi-ic{ background:#1FA34A; } .mi-status.is-bad{ background:rgba(201,59,50,0.18); border-color:rgba(201,59,50,0.6); } .mi-status.is-bad .mi-ic{ background:#C93B32; } .mi-status.is-warn{ background:rgba(232,176,60,0.14); border-color:rgba(232,176,60,0.5); } .mi-status.is-warn .mi-ic{ background:#b98a22; } .mi-link{ display:block; width:100%; background:none; border:none; color:rgba(255,255,255,0.75); font-size:13px; font-family:inherit; padding:8px; margin:0 0 6px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } .mi-toast{ padding:9px 12px; border-radius:10px; margin:0 0 10px; font-size:13px; text-align:left; background:rgba(31,163,74,0.2); color:#c6f3d5; border:1px solid rgba(31,163,74,0.45); } .mi-toast.is-red{ background:rgba(201,59,50,0.2); color:#ffd0cc; border-color:rgba(201,59,50,0.45); } .mi-ask{ padding:12px; border-radius:12px; margin:0 0 10px; background:rgba(8,12,28,0.85); border:1px solid rgba(255,255,255,0.25); font-size:13.5px; line-height:1.45; text-align:left; } .mi-ask-row{ display:flex; gap:8px; margin-top:10px; } .mi-ask-row button{ flex:1; padding:11px; border-radius:10px; border:none; font-size:14px; font-weight:700; font-family:inherit; color:#fff; cursor:pointer; } .mi-ask-row .is-back{ background:rgba(255,255,255,0.14); } .mi-ask-row .is-go{ background:#b8352d; } /* «По приглашению» — фирменный синий */ #btn-join.is-invite-btn{ background: linear-gradient(180deg, var(--fh-brand-1), var(--fh-brand-2)) !important; color: var(--fh-brand-ink) !important; border: 1px solid var(--fh-brand-line) !important; box-shadow: var(--fh-btn-shadow) !important; } #btn-join.is-invite-refused{ background: linear-gradient(180deg, var(--fh-bad-1), var(--fh-bad-2)) !important; color: var(--fh-bad-ink) !important; border: 1px solid rgba(255,120,100,0.4) !important; box-shadow: var(--fh-btn-shadow) !important; } /* Финалы в ленте: фон — из оформления формата (стандартно — фирменная картинка финала) и держится поверх цветов состояний; рамка, чёлка и надписи — общие правила «обводки» ниже (fl-full). */ .week-card.is-month-final, .week-card.is-season-final, .week-card.is-year-final{ background: var(--fmt-bg, var(--royal-mid)) !important; } .week-card.is-month-final .accent-bar, .week-card.is-season-final .accent-bar, .week-card.is-year-final .accent-bar{ display: block !important; } .week-card.is-month-final .thumb-wrap{ background: transparent !important; box-shadow: none !important; } .week-card.is-month-final .thumb-wrap{ overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; } .week-card.is-month-final .thumb-wrap img{ display: block !important; width: auto !important; max-width: 92% !important; height: auto !important; max-height: 88% !important; margin: 0 auto !important; object-fit: contain !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); } .week-card.is-month-final .cseats, .week-card.is-month-final .cseats b{ color: #fff !important; } /* ===== Широкая карточка финала: двойная ширина, рамка, корона, «дыхание» — цветом формата (--fc). Если финал сегодня/ближайший — рамку и свечение ведёт общая подсветка карточек (как у остальных), форма, корона и содержимое остаются. ===== */ .week-card.is-wide-final{ width:194px; } .week-card.is-wide-final:not(.is-cal-today){ border: 2px solid var(--fc) !important; animation: fhFinalBreath 2.6s ease-in-out infinite; } @keyframes fhFinalBreath{ 0%, 100%{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-tint) 40%, transparent), 0 0 12px 2px color-mix(in srgb, var(--fc) 45%, transparent), 0 0 26px 6px color-mix(in srgb, var(--fc) 20%, transparent), 0 16px 32px -8px rgba(0,0,0,.92); } 50%{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-tint) 60%, transparent), 0 0 18px 4px color-mix(in srgb, var(--fc) 75%, transparent), 0 0 38px 10px color-mix(in srgb, var(--fc) 35%, transparent), 0 16px 32px -8px rgba(0,0,0,.92); } } .week-card.is-wide-final .cardtop{ padding-right: 34px; } /* Финал месяца идёт: чёлка цвета формата становится лентой «● ИДЁТ…», без пульсации и свечения */ .week-card.is-final-live .accent-bar{ height:16px !important; opacity:1 !important; background:linear-gradient(90deg, var(--fc-hi), var(--fc)) !important; border-radius:11px 11px 0 0; } .week-card.is-final-live .accent-bar::after{ content:'● ИДЁТ · ВХОД ДО ' attr(data-join); position:absolute; left:10px; top:2px; font:700 10px var(--theme-hdg-font); letter-spacing:.08em; color:var(--fc-ink); } .week-card.is-final-live .reg-closed-badge, .week-card.is-final-live .live-badge{ display:none !important; } .week-card.is-final-live.fl-closed .accent-bar::after{ content:'● ИДЁТ · ВХОД ЗАКРЫТ'; } .week-card.is-final-live.fl-nojoin .accent-bar::after{ content:'● ИДЁТ СЕЙЧАС'; } .week-card.is-final-live .cardtop{ padding-top:18px !important; } .week-card.is-wide-final.is-final-live{ animation:none !important; border-color: var(--fc) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-tint) 35%, transparent), 0 14px 28px -8px rgba(0,0,0,.7) !important; } #btn-join.live-final-btn{ background: linear-gradient(180deg, var(--fh-ok-1), var(--fh-ok-2)) !important; color:var(--fh-ok-ink) !important; border-color: rgba(255,255,255,.35) !important; box-shadow: 0 0 18px rgba(34,180,85,.45) !important; } .week-card.is-wide-final .day-num{ color: var(--fc-tint); text-shadow: 0 1px 3px rgba(0,0,0,0.45); } .wf-crown{ position:absolute; top:-1px; right:-1px; width:30px; height:30px; background:linear-gradient(135deg, var(--fc-hi), var(--fc)); border-radius:0 12px 0 14px; display:flex; align-items:center; justify-content:center; box-shadow:-2px 2px 6px rgba(0,0,0,.4); z-index:2; } .wf-crown svg{ width:18px; height:18px; } .wf-body{ display:flex; gap:8px; padding:0 9px 2px; flex:1; min-height:0; align-items:center; text-align:left; } .week-card.is-wide-final .thumb-wrap{ flex:0 0 42px; width:42px; height:auto !important; margin:0 !important; } .week-card.is-wide-final .thumb-wrap img{ max-width:100% !important; max-height:60px !important; } .wf-info{ flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; overflow:hidden; } .wf-title{ font-family:var(--theme-hdg-font); font-size:14px; white-space:nowrap; line-height:1; color:var(--fc-tint); text-shadow:0 1px 3px rgba(0,0,0,.5); letter-spacing:.02em; } .wf-conf{ margin-top:7px; font-size:10px; color:rgba(255,255,255,.85); white-space:nowrap; } .wf-conf b{ color:#fff; font-size:12px; } .wf-bar{ margin-top:4px; height:5px; display:flex; gap:2px; } .wf-bar i{ flex:1; height:100%; background:rgba(255,255,255,.22); } .wf-bar i.on{ background:#fff; } .wf-avas{ display:flex; margin-top:6px; min-height:20px; align-items:center; } .wf-ava{ width:20px; height:20px; border-radius:50%; margin-left:-5px; border:1.5px solid #2a1c05; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; color:#fff; background:#3a4f9a; overflow:hidden; flex-shrink:0; } .wf-ava:first-child{ margin-left:0; } .wf-ava img{ width:100%; height:100%; object-fit:cover; display:block; } .wf-ava-more{ background:rgba(255,255,255,.22); font-size:8px; } .wf-nobody{ font-size:10px; color:rgba(255,255,255,.65); } /* Финалы на афише: фон — из оформления формата и держится поверх цветов состояний; кубок вместо карт */ .hero-card.is-month-final, .home-top-zone .hero-card.is-month-final, .hero-card.is-season-final, .home-top-zone .hero-card.is-season-final, .hero-card.is-year-final, .home-top-zone .hero-card.is-year-final{ background: var(--fmt-bg, var(--royal-mid)) !important; border-radius: 18px !important; box-shadow: none !important; filter: none !important; } .hero-card.is-month-final .hero-accent-bar, .hero-card.is-season-final .hero-accent-bar, .hero-card.is-year-final .hero-accent-bar{ display: block !important; } .hero-card.is-month-final .hero-cards, .hero-card.is-season-final .hero-cards, .hero-card.is-year-final .hero-cards{ background: transparent !important; } .hero-card.is-month-final .hero-cards .hcard-face, .hero-card.is-season-final .hero-cards .hcard-face, .hero-card.is-year-final .hero-cards .hcard-face{ object-fit: contain !important; width: 100% !important; height: 100% !important; transform: scale(0.82); transform-origin: 50% 50%; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)) drop-shadow(0 0 12px color-mix(in srgb, var(--fc) 30%, transparent)); } /* Финалы сезона и года в ленте: кубок по центру, места белым */ .week-card.is-season-final .thumb-wrap, .week-card.is-year-final .thumb-wrap{ overflow: visible !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; box-shadow: none !important; } .week-card.is-season-final .thumb-wrap img, .week-card.is-year-final .thumb-wrap img{ display: block !important; width: auto !important; max-width: 92% !important; height: auto !important; max-height: 88% !important; margin: 0 auto !important; object-fit: contain !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); } .week-card.is-season-final .cseats, .week-card.is-season-final .cseats b, .week-card.is-year-final .cseats, .week-card.is-year-final .cseats b{ color: #fff !important; } /* ===== РАМКА «ОБВОДКА» (fl-full) — одна на ленту и афишу, у любого формата ===== Цветная рамка, чёлка градиентом цвета формата, название и день — светлым оттенком цвета. У «полуобода» (без fl-full) — обычная рамка карточки и чёлка цветом формата (--accent). */ .week-card.fl-full{ border-color: color-mix(in srgb, var(--fc) 70%, transparent) !important; } .week-card.fl-full .accent-bar{ background: linear-gradient(90deg, var(--fc-hi), var(--fc)) !important; } .week-card.fl-full .daytag, .week-card.fl-full .cname{ color: var(--fc-tint) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.45); } .hero-card.fl-full, .home-top-zone .hero-card.fl-full{ border: 1.5px solid var(--fc) !important; } .hero-card.fl-full .hero-accent-bar{ background: linear-gradient(90deg, var(--fc-hi), var(--fc)) !important; } .hero-card.fl-full #hero-title, .hero-card.fl-full .day-date, .hero-card.fl-full .hero-tag{ color: var(--fc-tint) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* Дни без турниров — потухшие + 3D «?» */ .week-card.is-paused{ background: linear-gradient(165deg, rgba(40,48,72,0.55) 0%, rgba(22,28,45,0.7) 100%) !important; border-color: rgba(255,255,255,0.12) !important; opacity: 0.78; filter: saturate(0.45) brightness(0.85); } .week-card.is-paused .accent-bar{ opacity: 0.25 !important; } .week-card.is-paused .daytag{ color: rgba(255,255,255,0.55) !important; text-shadow: none !important; } .week-card.is-paused .pause-qmark{ font-family: var(--theme-hdg-font); font-size: 42px; line-height: 1; text-align: center; color: #c8d0e8; text-shadow: 0 1px 0 #fff, 0 2px 0 #9aa3bd, 0 3px 0 #7a849e, 0 4px 0 #5c6580, 0 6px 10px rgba(0,0,0,0.45), 0 0 18px rgba(140,160,220,0.35); margin: 4px 0 2px; transform: perspective(120px) rotateX(8deg); } .week-card.is-paused .pause-day{ text-align: center; font-family: var(--theme-font); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.02em; } .hero-card.is-paused{ background: linear-gradient(165deg, rgba(36,44,68,0.92) 0%, rgba(18,24,40,0.95) 100%) !important; border: 1.5px solid rgba(255,255,255,0.14) !important; filter: saturate(0.5) brightness(0.9); } .hero-card.is-paused .hero-cards{ align-items: center; justify-content: center; background: transparent !important; } .hero-card.is-paused .hero-cards{ display: none !important; } .hero-card.is-paused .hero-cards .hcard-face{ display: none !important; } .hero-card.is-paused .hero-cards::after{ content: none !important; display: none !important; } .hero-card.is-paused #hero-tag, .hero-card.is-paused #hero-meta, .hero-card.is-paused #hero-seats, .hero-card.is-paused .hero-past-actions, .hero-card.is-paused #btn-structure, .hero-card.is-paused #btn-join, .hero-card.is-paused .hero-bottom, .hero-card.is-paused .hero-accent-bar, .hero-card.is-paused .start-line, .hero-card.is-paused .day-date { display: none !important; } .hero-card.is-paused #hero-title{ color: #fff !important; text-shadow: none !important; font-size: 28px !important; font-weight: 700 !important; text-align: center; width: 100%; max-width: 100%; letter-spacing: 0.04em; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; padding: 48px 16px; box-sizing: border-box; } .hero-card.is-paused #hero-tag{ display: none !important; } .hero-card.is-paused .hero-info{ min-width: 0; max-width: 100%; flex: 1 1 100%; overflow: visible !important; display: flex !important; justify-content: center !important; } .week-card.is-paused .pause-cancel{ text-align: center; font-family: var(--theme-font); font-size: 11px; font-weight: 700; line-height: 1.2; color: rgba(255,255,255,0.7); padding: 6px 4px 2px; } .week-card.is-paused .pause-qmark{ display: none !important; } /* Пауза на афише: проще и стабильнее */ .hero-card.is-paused .hero-top{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 140px; width: 100%; } .hero-card.is-paused .hero-info{ width: 100%; align-items: center !important; text-align: center; } .hero-card.is-paused .hero-cards{ width: 100% !important; height: 80px !important; margin: 0 auto 8px !important; } /* показатели в профиле: спокойная карточка, одна главная цифра, читаемый второй ряд */ #tab-profile .stat-card{ filter: none !important; margin: 8px 16px 10px !important; padding: 10px 14px 12px !important; border-radius: 14px !important; background: linear-gradient(165deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 38%, transparent 62%), linear-gradient(165deg, #243456 0%, #151c2a 52%, #0b0e14 100%) !important; border: 1px solid rgba(212, 175, 55, 0.34) !important; box-shadow: 0 14px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22) !important; } #tab-profile .stat-card-head{ margin: 0 0 6px !important; align-items: flex-start !important; } #tab-profile .stat-rank-hero{ padding: 0 0 4px !important; } #tab-profile .stat-rank-hero .stat-hero b{ font-size: 22px !important; color: #F3E2A8 !important; text-shadow: 0 1px 10px rgba(243,210,120,0.22) !important; } #tab-profile .stat-rank-hero .stat-side b{ font-size: 20px !important; color: #C9D7EC !important; text-shadow: none !important; } #tab-profile .stat-rank-hero span{ min-height: 0 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: rgba(210, 220, 235, 0.65) !important; font-weight: 600 !important; } #tab-profile .stat-row-extra{ padding-top: 7px !important; margin-top: 2px !important; border-top: 3px solid rgba(255,255,255,0.1) !important; } #tab-profile .stat-row-extra b{ color: rgba(210,222,238,0.8) !important; font-size: 13px !important; text-shadow: none !important; height: auto !important; } #tab-profile .stat-row-extra span{ font-size: 10px !important; color: rgba(210, 220, 235, 0.45) !important; min-height: 0 !important; } /* зоны профиля — иерархия и объёмная подложка */ #tab-profile .profile-zone{ margin: 8px 12px 12px; padding: 10px 8px 12px; border-radius: 16px; } #tab-profile .profile-zone-label{ font-family: var(--theme-hdg-font); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 6px 8px; } #tab-profile .profile-zone-dash .stat-card{ margin-left: 4px !important; margin-right: 4px !important; width: auto !important; } #tab-profile .profile-zone-progress .two-col{ padding: 0 4px !important; margin: 0 !important; } #tab-profile .profile-zone-club .tile-grid{ padding-left: 4px; padding-right: 4px; } #tab-profile .profile-head{ margin: 0 12px 4px; padding: 15px 12px 10px !important; border-radius: 16px; background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, transparent 42%), linear-gradient(180deg, rgba(20,28,48,0.55) 0%, rgba(8,10,18,0.2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px rgba(0,0,0,0.28); } #tab-profile .two-col .big-tile{ background: linear-gradient(165deg, color-mix(in srgb, var(--royal-mid) 15%, transparent), color-mix(in srgb, var(--royal-mid) 15%, transparent)), linear-gradient(165deg, rgba(0,0,0,0.44), rgba(0,0,0,0.44)), linear-gradient(165deg, rgba(var(--glass-tint), 0.10) 0%, rgba(var(--glass-tint), 0.03) 40%, transparent 70%), linear-gradient(165deg, var(--royal-bot) 0%, var(--royal-mid) 55%, var(--royal-bot) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -8px 14px rgba(0,0,0,0.28), 0 6px 0 rgba(0,0,0,0.4), 0 12px 16px rgba(0,0,0,0.32) !important; } #tab-profile .profile-zone-club .section{ margin: 0; padding: 0; } #tab-profile .profile-zone-club .section-head{ padding: 0 6px 8px; } /* цвета ролей в профиле — без полос по зонам */ #tab-profile .profile-zone{ border-left: 1px solid rgba(255,255,255,0.08); background: rgba(8,12,20,0.28); } #tab-profile .profile-zone-label{ color: rgba(255,255,255,0.42); } /* аватарка: пустая накладка рамки с засечками не показывается */ #tab-profile #my-avatar-ornament{ display: none !important; } #tab-profile #my-avatar-ornament:has(svg), #tab-profile #my-avatar-ornament:has(img){ display: block !important; } #tab-profile #my-avatar, #tab-profile #my-avatar.avatar-lg, #tab-profile #my-avatar-frame-wrap{ border: none !important; outline: none !important; box-shadow: none !important; } #tab-profile #my-avatar, #tab-profile #my-avatar.avatar-lg{ border-radius: 50% !important; } /* блоки профиля: оттенок роли на самой зоне */ #tab-profile .profile-zone{ border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.22); } #tab-profile .profile-zone-dash{ position: relative; background: rgba(16, 22, 34, 0.72); padding-bottom: 10px; } #tab-profile .profile-zone-dash .profile-zone-label{ color: rgba(210,220,235,0.55); } #tab-profile:not(.viewing-other) .profile-head{ display: none !important; } #tab-profile.viewing-other .profile-ident{ display:none !important; } .profile-player-label{ color: #E8B03C; padding: 0 6px 6px; margin: 6px 4px 0; } .profile-ident{ /* плашке игрока нужен масштаб 95% при общем 80%: zoom 0.95/0.8 = 1.1875; отступы поделены на то же число (визуально 4/4/8) */ zoom: 1.1875; display:flex; align-items:center; gap:10px; margin: 0 3.37px 6.74px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(165deg, rgba(255,255,255,0.12) 0%, transparent 45%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 50%, var(--royal-bot) 100%); border: 1px solid rgba(140,180,255,0.28); box-shadow: 0 3px 0 rgba(var(--shadow-tint), 0.9), 0 6px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.22); } .profile-stats-lead{ display:flex; flex-direction:column; align-items:stretch; gap:8px; margin: 0 4px 8px; } .profile-stats-lead .fh-city-pills{ margin:0; } .profile-season-mark b{ font-weight:700; } .profile-season-mark{ position:static; font-size:14px; line-height:1; pointer-events:none; color: #E8B03C; font-weight:700; } .profile-season-mark span{ color: rgba(210,220,235,0.45); font-weight:400; margin-right:6px; } .profile-ident-ava-wrap{ position:relative; flex-shrink:0; width:80px; height:80px; overflow:visible; } .profile-ident-ava{ width:80px; height:80px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,0.08); border:1.5px solid rgba(74,114,212,0.85); cursor:pointer; -webkit-tap-highlight-color: transparent; } .profile-ident-ava img{ width:100%; height:100%; object-fit:cover; display:block; } .profile-ident-ava img:not([src]), .profile-ident-ava img[src=""]{ display:none; } .profile-ident-goal-row{ display:flex; align-items:center; gap:8px; } .profile-ident-nick{ font-family:var(--theme-font); font-size:14px; font-weight:600; color:rgba(255,255,255,0.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .profile-ident-main .me-track{ margin: 0; } .profile-ident-gear{ position:static; top:auto; left:auto; flex-shrink:0; width:22px; height:22px; padding:0; border-radius:50%; border:1.5px solid rgba(255,255,255,0.35); background: rgba(12, 16, 28, 0.9); color:#fff; box-shadow: 0 2px 8px rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; cursor:pointer; } .profile-ident-gear svg{ width:14px; height:14px; } #tab-profile.viewing-other .profile-ident-gear{ display:none !important; } .profile-ident-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; } #profile-ident-goal{ margin: 0; display: flex; align-items: center; gap: 8px; } #profile-ident-goal .me-goal-v{ font-size: 11px; } #tab-profile #stat-title{ font-size: 11px; letter-spacing: 0.06em; font-weight: 700; color: rgba(210, 220, 235, 0.4); } #tab-profile .profile-zone-progress{ background: rgba(16, 22, 34, 0.72); } #tab-profile .profile-zone-progress .big-tile{ box-shadow: inset 0 2px 0 rgba(255,255,255,0.38), inset 0 8px 14px rgba(255,255,255,0.08), inset 0 -12px 18px rgba(0,0,0,0.45), 0 3px 0 rgba(255,255,255,0.12), 0 8px 0 rgba(0,0,0,0.55), 0 16px 22px rgba(0,0,0,0.42) !important; } #tab-profile .profile-zone-progress .bt-head{ color: #E8B03C; } #tab-profile .profile-zone-progress .ic{ color: #E8B03C !important; } #tab-profile .profile-zone-club{ background: rgba(12, 20, 34, 0.62); } #tab-profile .profile-zone-club .profile-zone-label, #tab-profile .profile-zone-club .section-head .hdg{ color: #8eb4e8; } #tab-profile .tile-role-info .ic{ color: #8eb4e8 !important; } #tab-profile .tile-role-doc .ic{ color: #2b2b2f !important; } #tab-profile .tile-role-faq .ic{ color: #e53935 !important; } #tab-profile .tile-role-reward .ic{ color: #E8B03C !important; } #tab-profile .tile-role-feedback .ic{ color: #ffd400 !important; } /* Роли внутри «Клуба» — каждая своим цветом. */ #tab-profile .tile-role-about .ic{ color: var(--gold-light) !important; } #tab-profile .tile-role-theme .ic{ color: #ffffff !important; } #tab-profile .tile-role-contacts .ic{ color: #8eb4e8 !important; } #tab-profile .tile-role-install .ic{ color: #3ecf8e !important; } #tab-profile #tile-screen-settings .contacts-tile-ico{ object-fit: contain; display: block; background: none; } /* место рамки не обрезается — там живёт шестерёнка настроек */ #tab-profile #my-avatar-frame-wrap{ overflow: visible !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } #tab-profile #my-avatar-frame-wrap:not(.has-frame) #my-avatar-ornament{ display: none !important; } #tab-profile .avatar-settings-btn{ display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 8 !important; } /* пустая аватарка — того же света, что засечки обода; фото её закрывает */ #tab-profile #my-avatar, #tab-profile #my-avatar.avatar-lg{ background: rgba(255,255,255,0.30) !important; } #tab-profile #my-avatar.is-empty .avatar-empty-icon{ display: none !important; } /* даты будущих дней — полная яркость; приглушены только прошедшие */ .week-card:not(.is-past-card) .cname, .week-card:not(.is-past-card) .empty-day-date{ color: #fff !important; opacity: 1 !important; } .week-card.is-past-card .cname, .week-card.is-past-card .empty-day-date, .week-card.is-past-card .daytag{ color: rgba(255,255,255,0.45) !important; opacity: 0.7; } .week-card.is-empty-day .empty-day-date{ white-space: nowrap; } .week-card .past-plaque{ display:flex; flex-direction: column; align-items:center; justify-content:center; gap:5px; margin: 4px 6px 8px; padding: 6px 4px; border-radius: 8px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.12); } .week-card .past-plaque-num{ display:flex; flex-direction:column; align-items:center; line-height:1.1; } .week-card .past-plaque .past-players-num{ font-size:14px; font-weight:700; color:#fff; } .week-card .past-plaque .past-players-lbl{ font-size:8px; text-transform:uppercase; opacity:0.7; } /* длинные окна структуры/информации сохраняют затемнение внизу */ #structure-sheet.fit-content.scrollable .modal-inner{ overflow: hidden !important; max-height: 100% !important; } #structure-sheet.fit-content.scrollable .modal-body-wrap{ flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #structure-sheet.fit-content.scrollable .modal-body{ overflow-y: auto !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; } #structure-sheet.fit-content.scrollable .modal-scroll-hint{ display: flex !important; height: 52px !important; } #structure-sheet.fit-content.scrollable .modal-body-wrap.has-overflow .modal-scroll-hint{ opacity: 1 !important; } #tab-profile #tile-screen-settings .contacts-tile-ico{ width: 30px; height: 30px; flex-shrink: 0; overflow: visible; fill: none !important; } #tab-profile #tile-screen-settings .contacts-tile-ico path{ fill: none !important; stroke: #FFFFFF !important; } .fmt-title .fmt-legal, #modal-title .fmt-legal{ font-size: 0.67em; font-weight: 400; letter-spacing: 0.03em; color: rgba(255,255,255,0.48); opacity: 1; } .city-select-wrap{ display: flex; flex-direction: column; align-items: center; gap: 3px; } .city-legal{ font-size: 9px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.42); white-space: nowrap; line-height: 1; text-align: center; } /* ===== Установка на телефон: плашка + модалки iOS/Android ===== */ #install-banner { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 70; background: linear-gradient(90deg, #1A2F6A 0%, #3A67C8 100%); border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 8px 6px 8px 10px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); } #install-banner.hidden { display: none !important; pointer-events: none !important; } #install-banner .ib-icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: #0A1128; display: flex; align-items: center; justify-content: center; font-size: 15px; } #install-banner .ib-txt { flex: 1; font-size: 11.5px; line-height: 1.25; color: #F4F7FF; } #install-banner .ib-txt b { display: block; font-size: 12.5px; } #install-banner .ib-install-btn { background: #111C35; border: 1px solid #F5A83C; color: #fff; font-size: 11px; font-weight: 600; padding: 7px 11px; border-radius: 9px; white-space: nowrap; cursor: pointer; } #install-banner .ib-close { font-size: 15px; color: rgba(244,247,255,0.6); cursor: pointer; padding: 10px; margin: -10px -4px -10px 0; line-height: 1; } #install-modal-overlay { position: absolute; inset: 0; z-index: 10200; display: none; align-items: flex-end; justify-content: center; background: rgba(4,6,5,0.55); } #install-modal-overlay.open { display: flex; } #install-modal-overlay .im-sheet { width: 100%; background: #14225C; border-top: 1px solid rgba(210,220,255,0.18); border-radius: 22px 22px 0 0; padding: 22px 20px 20px; max-height: 82%; overflow-y: auto; box-sizing: border-box; } #install-modal-overlay h2 { font-size: 19px; font-weight: 700; margin: 0 0 6px; color: #F5F7FF; } #install-modal-overlay .im-sub { font-size: 13.5px; color: #9FADD9; line-height: 1.5; margin: 0 0 20px; } #install-modal-overlay .im-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } #install-modal-overlay .im-step { display: flex; align-items: center; gap: 12px; } #install-modal-overlay .im-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #F5A83C; color: #F5A83C; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; } #install-modal-overlay .im-step-text { font-size: 13.5px; line-height: 1.4; color: #F5F7FF; } #install-modal-overlay .im-android-cta { width: 100%; background: #1B2E70; color: #F5F7FF; border: 1px solid rgba(210,220,255,0.18); border-radius: 14px; padding: 14px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; } #install-modal-overlay .im-fallback { font-size: 12.5px; color: #9FADD9; line-height: 1.5; margin: 0 0 20px; } #install-modal-overlay .im-footnote { display: flex; gap: 10px; background: rgba(245,168,60,0.09); border: 1px solid rgba(210,220,255,0.10); border-radius: 12px; padding: 12px; margin-bottom: 18px; } #install-modal-overlay .im-footnote p { margin: 0; font-size: 12px; line-height: 1.5; color: #9FADD9; } #install-modal-overlay .im-close-btn { width: 100%; background: transparent; border: 1px solid rgba(210,220,255,0.18); color: #F5F7FF; border-radius: 14px; padding: 13px; font-size: 15px; font-weight: 500; cursor: pointer; } #install-modal-overlay .im-status { text-align: center; padding-top: 26px; } #install-modal-overlay .im-status .im-sub { margin-bottom: 22px; } #install-modal-overlay .im-status-mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; } #install-modal-overlay .im-status.is-busy .im-status-mark { border: 4px solid rgba(245,168,60,0.25); border-top-color: #F5A83C; animation: imSpin .9s linear infinite; } #install-modal-overlay .im-status.is-done .im-status-mark { border: 3px solid #2ECC71; color: #2ECC71; } #install-modal-overlay .im-status.is-busy .im-close-btn { display: none; } @keyframes imSpin { to { transform: rotate(360deg); } } /* задний фон тем: ленты + глубина. не трогает кнопки */ .fh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .fh-bg-glow,.fh-bg-fog,.fh-bg-b1,.fh-bg-b2,.fh-bg-d1,.fh-bg-d2{position:absolute;pointer-events:none} .fh-bg-glow,.fh-bg-fog{inset:0} .fh-bg-b1,.fh-bg-b2,.fh-bg-d1,.fh-bg-d2{inset:-16% -22%;background:#000} .fh-bg-b1{opacity:.9;clip-path:polygon(-12% -10%, 22% -2%, 48% 12%, 76% 30%, 112% 52%, 110% 70%, 74% 46%, 46% 28%, 20% 12%, -8% 2%)} .fh-bg-b2{opacity:.88;clip-path:polygon(-12% 18%, 18% 30%, 44% 48%, 72% 68%, 112% 90%, 110% 108%, 70% 84%, 42% 64%, 16% 44%, -8% 30%)} .fh-bg-d1{opacity:.4;filter:blur(22px);transform:translate(16px,26px);clip-path:polygon(-12% -10%, 22% -2%, 48% 12%, 76% 30%, 112% 52%, 110% 70%, 74% 46%, 46% 28%, 20% 12%, -8% 2%)} .fh-bg-d2{opacity:.36;filter:blur(26px);transform:translate(12px,30px);clip-path:polygon(-12% 18%, 18% 30%, 44% 48%, 72% 68%, 112% 90%, 110% 108%, 70% 84%, 42% 64%, 16% 44%, -8% 30%)} .fh-bg-fog{background:radial-gradient(120% 90% at 20% 8%, transparent 0%, rgba(0,0,0,.28) 72%)} html[data-theme-id="brand"] .fh-bg-glow, .phone[data-theme-id="brand"] .fh-bg-glow, .screen[data-theme-id="brand"] .fh-bg-glow{ background:radial-gradient(80% 50% at 80% 110%, rgba(80,140,255,.26), transparent 55%),radial-gradient(60% 40% at 10% 0%, rgba(26,72,176,.3), transparent 50%)} html[data-theme-id="opal"] .fh-bg-glow, .phone[data-theme-id="opal"] .fh-bg-glow, .screen[data-theme-id="opal"] .fh-bg-glow{ background:radial-gradient(70% 50% at 85% 20%, rgba(70,40,180,.32), transparent 50%),radial-gradient(50% 40% at 20% 80%, rgba(20,90,160,.28), transparent 55%),radial-gradient(40% 30% at 60% 60%, rgba(180,40,90,.16), transparent 50%)} html[data-theme-id="ruby"] .fh-bg-glow, .phone[data-theme-id="ruby"] .fh-bg-glow, .screen[data-theme-id="ruby"] .fh-bg-glow{ background:radial-gradient(80% 55% at 85% 100%, rgba(246,85,104,.26), transparent 55%),radial-gradient(50% 40% at 15% 10%, rgba(191,24,43,.32), transparent 50%)} html[data-theme-id="emerald"] .fh-bg-glow, .phone[data-theme-id="emerald"] .fh-bg-glow, .screen[data-theme-id="emerald"] .fh-bg-glow{ background:radial-gradient(80% 55% at 85% 100%, rgba(80,230,140,.2), transparent 55%),radial-gradient(50% 40% at 10% 5%, rgba(24,191,96,.26), transparent 50%)} /* изумруд приглушён в корневых --royal-* выше, без второго фильтра */ #player-peek-modal.modal-overlay{ align-items:center !important; justify-content:center !important; padding:16px !important; } #player-peek-modal .modal-sheet{ width:min(100%,420px) !important; margin:0 auto !important; border-radius:18px !important; background: linear-gradient(165deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 36%, transparent 60%), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 52%, var(--royal-bot) 100%) !important; border:1px solid rgba(212, 175, 55, 0.34) !important; box-shadow: 0 4px 0 rgba(0,0,0,0.55), 0 14px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -8px 16px rgba(0,0,0,0.28) !important; } /* Появление окна: вырастает и проявляется (только transform и opacity) */ #player-peek-modal .modal-sheet{ transform:scale(.9); opacity:0; transition:transform .34s cubic-bezier(.32,.72,0,1), opacity .24s ease; } #player-peek-modal.open .modal-sheet{ transform:scale(1); opacity:1; } .peek-head{ display:flex; flex-direction:row; align-items:center; gap:14px; padding:8px 0 4px; } /* слева — данные игрока в своей рамке, справа — крупная аватарка */ .peek-info{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; align-self:stretch; gap:2px; text-align:center; padding:10px 14px; border-radius:14px; box-sizing:border-box; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.16); } .peek-total-lbl{ font-size:13px; color:rgba(255,255,255,.55); margin-top:4px; } .peek-total{ font-family:var(--theme-hdg-font); font-size:26px; line-height:1.05; color:#F0C45A; } .peek-ava{ flex-shrink:0; width:124px; height:124px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.08); border:1.5px solid rgba(232,176,60,.45); box-shadow:0 8px 20px rgba(0,0,0,.35); } .peek-ava img{ width:100%; height:100%; object-fit:cover; display:block; } .peek-ava.is-empty{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:50px; font-weight:700; font-family:var(--theme-font); } .peek-ava.is-empty img{ display:none; } .peek-ava:not(.is-empty){ cursor:pointer; } .peek-ava.is-empty::before{ content:attr(data-letter); } /* Обычный шрифт, не Bebas Neue — тот рисует прописные и строчные буквы одинаково, регистр и эмодзи в никнейме теряются. Ник как в рейтинге. */ .peek-nick{ font-family:var(--theme-font); font-weight:700; font-size:20px; letter-spacing:0.01em; color:#fff; overflow-wrap:anywhere; } .peek-city{ font-size:13px; color:rgba(255,255,255,.55); } /* Выбор города — своя статистика по каждому городу клуба, открывается в контексте того города, откуда кликнули, дальше можно переключать. */ .peek-city-tabs{ display:flex; gap:4px; background:rgba(0,0,0,.25); border-radius:999px; padding:3px; margin-top:14px; } .peek-city-tabs button{ flex:1; text-align:center; font-size:11.5px; font-weight:600; padding:7px 0; border-radius:999px; border:none; background:transparent; color:rgba(255,255,255,.6); cursor:pointer; } .peek-city-tabs button.on{ background: linear-gradient(180deg, #3E3E46 0%, #1A1A1E 52%, #0B0B0D 100%); color:#fff; box-shadow: 0 3px 0 #050506, 0 6px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -3px 5px rgba(0,0,0,0.45); } /* Лента месяцев всегда открыта — только те месяцы, где у игрока есть результат (плюс «Все месяцы»); один общий скролл-ряд, как в починенных «Показателях» — ничему не под чем прятаться. */ .peek-months-row{ display:flex; gap:6px; margin:10px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 4px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); } .peek-months-row::-webkit-scrollbar{ display:none; } .peek-months-row button{ flex:0 0 auto; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(120,120,130,.28); color:rgba(255,255,255,.8); cursor:pointer; white-space:nowrap; } .peek-months-row button.on{ background:linear-gradient(180deg,#4A72D4 0%,#1A3F9A 48%,#0C1E52 100%); color:#fff; border-color:rgba(190,215,255,.5); font-weight:800; } .peek-months-row button.peek-year-btn{ font-size:10px; letter-spacing:-0.01em; font-weight:800; background:rgba(232,176,60,.14); border-color:rgba(232,176,60,.35); color:rgba(255,230,170,.9); } .peek-months-row button.peek-year-btn.on{ background:linear-gradient(180deg,#E8B03C 0%,#B8842A 100%); border-color:rgba(255,220,150,.6); color:#1a1200; } /* Карточка «Показатели» — тот же вид, что в своём профиле, вместо «Достижения»: трофеи/мастерство — личное, чужому смотрящему незачем. */ .peek-stat-card{ border-radius:14px; padding:14px; background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, transparent 50%), linear-gradient(165deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5)), linear-gradient(165deg, var(--royal-top) 0%, var(--royal-mid) 52%, var(--royal-bot) 100%); border:1px solid rgba(212, 175, 55, 0.34); box-shadow: 0 4px 0 rgba(0,0,0,0.55), 0 14px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -8px 16px rgba(0,0,0,0.28); } .peek-stat-row-3{ display:flex; justify-content:space-around; text-align:center; margin-bottom:10px; } .peek-stat-row-3 b{ display:block; font-family:var(--theme-hdg-font); font-size:22px; font-weight:400; color:#fff; } .peek-stat-hero b{ color:#F0C45A !important; font-size:26px; } .peek-stat-row-3 span{ font-size:10px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px; } .peek-stat-div{ height:1px; background:rgba(255,255,255,.12); margin:0 0 10px; } .peek-stat-row-4{ display:flex; justify-content:space-around; text-align:center; } .peek-stat-row-4 b{ display:block; font-family:var(--theme-hdg-font); font-size:16px; font-weight:400; color:#fff; } .peek-stat-row-4 span{ font-size:9px; color:rgba(255,255,255,.55); text-transform:uppercase; } /* Свой жест «потянуть вниз, чтобы обновить» — одинаково в Chrome и Safari (у Safari встроенного нет). */ #fh-ptr{ position: fixed; left:50%; top:0; transform: translate(-50%, -100%); z-index: 100000; display:flex; align-items:center; gap:8px; background: rgba(15,20,40,0.92); color:#fff; font-size:12.5px; font-weight:600; padding: 8px 16px; border-radius: 0 0 14px 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: transform 0.18s ease, background 0.2s ease; pointer-events: none; } #fh-ptr.fh-ptr-show{ transform: translate(-50%, 0); } #fh-ptr .fh-ptr-spin{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; animation: fh-ptr-spin 0.7s linear infinite; display:none; } #fh-ptr.fh-ptr-loading .fh-ptr-spin{ display:block; } #fh-ptr.fh-ptr-loading .fh-ptr-arrow{ display:none; } #fh-ptr .fh-ptr-arrow{ width:14px; height:14px; transition: transform 0.15s ease; } #fh-ptr.fh-ptr-ready .fh-ptr-arrow{ transform: rotate(180deg); } #fh-ptr.fh-ptr-ok{ background: rgba(20,120,60,0.95); } #fh-ptr.fh-ptr-err{ background: rgba(150,30,30,0.95); } @keyframes fh-ptr-spin{ to{ transform: rotate(360deg); } } #auth-modal{ align-items:center; padding:16px 14px; z-index:10050; } #auth-modal.open{ pointer-events:auto; } #auth-modal .am-sheet{ width:100%; max-width:332px; margin:0 auto; padding:22px 18px 18px; border-radius:22px; background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(232,176,60,.16), transparent 52%), radial-gradient(ellipse 80% 40% at 80% 100%, rgba(60,110,210,.18), transparent 55%), linear-gradient(165deg,#1c1c24 0%,#0a0a0e 55%,#050506 100%); border:1px solid rgba(232,176,60,.38); box-shadow:0 22px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); } #auth-modal .am-logo{ display:block; width:min(260px,86%); height:auto; margin:4px auto 12px; } #auth-modal .am-title{ font-family:var(--theme-hdg-font); font-size:22px; letter-spacing:.02em; color:#fff; text-align:center; margin:0 0 4px; } #auth-modal .am-sub{ font-size:12.5px; color:rgba(255,255,255,.55); margin-bottom:14px; text-align:center; line-height:1.4; } #auth-modal .am-lab{ display:block; text-align:left; font-size:11.5px; color:rgba(255,255,255,.55); margin:0 0 4px 2px; line-height:1.3; } #auth-modal .am-req{ color:#F0C45A; font-weight:800; margin-left:2px; } #auth-modal .am-opt{ font-size:10px; color:rgba(255,255,255,.32); margin:-2px 0 8px 2px; } #auth-modal .am-input{ width:100%; padding:11px 13px; margin-bottom:8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:#fff; font:400 14px 'Manrope',sans-serif; outline:none; } #auth-modal .am-input::placeholder{ color:rgba(255,255,255,.32); } #auth-modal .am-input:focus{ border-color:#E8B03C; background:rgba(232,176,60,.06); } #auth-modal .am-input.am-opt-field{ border-style:dashed; background:rgba(255,255,255,.025); } #auth-modal .am-city-row{ display:flex; gap:8px; margin:0 0 12px; } #auth-modal .am-city{ flex:1; padding:10px; border-radius:12px; font-weight:700; font-size:12.5px; cursor:pointer; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); } #auth-modal .am-city.sel{ background:linear-gradient(135deg,rgba(232,176,60,.25),rgba(232,176,60,.06)); border-color:#E8B03C; color:#fff; } #auth-modal .am-btn-gold{ width:100%; padding:13px; border-radius:13px; border:none; cursor:pointer; font:800 14.5px 'Manrope',sans-serif; background:linear-gradient(135deg,#F0C45A,#E8B03C); color:#1a1440; box-shadow:0 8px 20px rgba(232,176,60,.32); } #auth-modal .am-btn-ghost{ width:100%; padding:11px; margin-top:8px; border-radius:13px; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.65); font:700 13.5px 'Manrope',sans-serif; } #auth-modal .am-pass-wrap{ position:relative; } #auth-modal .am-pass-wrap .am-input{ padding-right:38px; } #auth-modal .am-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer; font-size:15px; opacity:0.5; user-select:none; } /* ===== Чат с FullHouse: клуб — синий слева, игрок — зелёный справа; тонкая неоновая обводка + полупрозрачный фон ===== */ .fhc{ display:flex; flex-direction:column; height:min(56vh,460px); min-height:300px; } /* В колокольчике чат занимает всю высоту панели */ /* Узор мастей и тёмная поверхность — только у самого чата; шапка с вкладками остаётся на обычном фоне панели, как у «Новостей клуба» */ .notif-list:has(.fhc){ display:flex; flex-direction:column; overflow:hidden; padding-bottom:12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='rgba%28255,255,255,0.06%29' font-size='22' font-family='Arial,sans-serif'%3E%3Ctext x='10' y='30'%3E%E2%99%A0%3C/text%3E%3Ctext x='70' y='60'%3E%E2%99%A5%3C/text%3E%3Ctext x='20' y='95'%3E%E2%99%A6%3C/text%3E%3Ctext x='80' y='112'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg,#0a1a4a 0%,#06102f 100%); border-radius: 0 0 17px 17px; } .notif-list .fhc{ flex:1 1 auto; height:auto; min-height:0; } .fhc-msgs{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 4px; display:flex; flex-direction:column; gap:8px; } .fhc-day{ align-self:center; font-size:11px; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.08); padding:3px 10px; border-radius:999px; margin:8px 0 4px; } .fhc-row{ display:flex; flex-direction:column; max-width:84%; } .fhc-row.me{ align-self:flex-end; align-items:flex-end; } .fhc-row.club{ align-self:flex-start; align-items:flex-start; } .fhc-who{ font-size:11px; font-weight:700; margin:0 8px 3px; } .fhc-row.me .fhc-who{ color:#6dffa0; } .fhc-row.club .fhc-who{ color:#8fb8ff; } .fhc-bub{ padding:8px 12px 6px; border-radius:14px; font-size:14px; line-height:1.4; color:#fff; white-space:pre-wrap; word-break:break-word; } .fhc-row.me .fhc-bub{ background:rgba(20,120,60,0.34); border:1px solid #35e07a; box-shadow:0 0 9px rgba(53,224,122,0.35); border-bottom-right-radius:4px; } .fhc-row.club .fhc-bub{ background:rgba(25,60,150,0.38); border:1px solid #4d8dff; box-shadow:0 0 9px rgba(77,141,255,0.38); border-bottom-left-radius:4px; } .fhc-sub{ font-weight:800; margin-bottom:2px; } .fhc-time{ font-size:10px; opacity:0.65; margin-top:3px; text-align:right; } .fhc-del{ font-style:italic; opacity:0.65; } .fhc-empty{ padding:18px 8px; text-align:center; font-size:13px; line-height:1.45; opacity:0.75; } .fhc-login{ display:block; margin:12px auto 0; padding:9px 22px; border:none; border-radius:12px; background:#1fa34a; color:#fff; font-weight:700; font-size:14px; cursor:pointer; } .fhc-input{ flex:0 0 auto; display:flex; gap:8px; align-items:flex-end; padding-top:8px; border-top:1px solid rgba(255,255,255,0.12); } .fhc-ta{ flex:1; resize:none; min-height:42px; max-height:110px; box-sizing:border-box; border-radius:14px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); color:#fff; padding:10px 12px; font:inherit; font-size:16px; line-height:1.3; outline:none; } .fhc-send{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:none; background:#1fa34a; color:#fff; font-size:18px; cursor:pointer; } .fhc-send:disabled{ opacity:0.5; } /* Места 1-3: обводка аватарки цвета места — двойная (кольцо + тонкая внешняя линия). Если у игрока своя рамка профиля — она главнее, обводка места не рисуется. */ .rating-list .r-row.pod-gold{ --pod-c:#F6CC4D; } .rating-list .r-row.pod-silver{ --pod-c:#C8D0E0; } .rating-list .r-row.pod-bronze{ --pod-c:#D4956A; } .rating-list .r-row.pod-gold .r-ava-wrap:not(:has(.avatar-ornament))::before, .rating-list .r-row.pod-silver .r-ava-wrap:not(:has(.avatar-ornament))::before, .rating-list .r-row.pod-bronze .r-ava-wrap:not(:has(.avatar-ornament))::before{ content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--pod-c); z-index:3; pointer-events:none; } .rating-list .r-row.pod-gold .r-ava-wrap:not(:has(.avatar-ornament))::after, .rating-list .r-row.pod-silver .r-ava-wrap:not(:has(.avatar-ornament))::after, .rating-list .r-row.pod-bronze .r-ava-wrap:not(:has(.avatar-ornament))::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--pod-c); opacity:.55; z-index:3; pointer-events:none; } .results-row.lesson-row .rr-name{ font-size:14px; } /* Окно игрока → «Финалы»: только его плашки; длинный список прокручивается внутри окна */ /* высоту задаёт JS (fhPeekSetView): та же, что у блока «Рейтинг», чтобы окно не прыгало при переключении */ .peek-finals-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; box-sizing: border-box; } /* Окно игрока → «Финалы»: узкие плашки, фон — картинка финала (у 2 места серебро, у 3 бронза) */ .pf-sec{ margin: 9px 2px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #E8B03C; } .pf-sec:first-child{ margin-top: 2px; } .pf-card{ --pc:#F6CC4D; position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:10px; border:1.5px solid var(--pc); background:#04050a; } .pf-card::before{ content:''; position:absolute; inset:0; background:var(--k-bg) center/cover no-repeat; } .pf-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.25)); } .pf-card.p2{ --pc:#D7DEE9; } .pf-card.p3{ --pc:#D9965B; } .pf-card.p2::before{ filter:grayscale(1) brightness(1.12) contrast(1.05); } .pf-card.p3::before{ filter:sepia(1) saturate(2.1) hue-rotate(-16deg) brightness(.82); } .pf-card > *{ position:relative; z-index:1; } .pf-n{ flex:0 0 auto; min-width:22px; display:flex; align-items:center; justify-content:center; } .pf-n .fh-cup{ max-width:34px; object-fit:contain; box-shadow:none; } .pf-t{ flex:1; min-width:0; font-size:13px; line-height:1.1; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.7); } .pf-t small{ display:block; font-size:9px; font-weight:600; color:rgba(255,255,255,0.65); letter-spacing:0.04em; } .pf-k{ font-size:10px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--pc); text-shadow:0 1px 3px rgba(0,0,0,0.7); } .peek-view-seg{ margin: 8px 0 10px !important; } /* «Набор в дилеры» в «Форматах»: название в две строки — карточка выше остальных */ .fmt-card.fmt-learn.fmt-dealers{ height: auto; min-height: 92px; padding-top: 10px; padding-bottom: 10px; } /* ===== ОТДЕЛЬНЫЕ ЦВЕТА ФОРМАТА (задаются в админке; пусто = стандартный) ===== Каждый цвет включается классом на карточке / афише / окне (см. FH_OWN в formats/format-look.js): fl-line — обводка; fl-tagbg / fl-tagfg / fl-tagbd — заливка, буквы, обводка тега; fl-titlefg — название; fl-dayfg — день недели и число; fl-timefg — слова у времени; fl-timenum — цифры времени. */html body .fmt-card.fl-line{ border:1.5px solid var(--fc-line) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--fc-line) 80%, transparent), 0 0 18px color-mix(in srgb, var(--fc-line) 35%, transparent) !important; } html body .week-card.fl-line.fl-line.fl-line{ border-color: var(--fc-line) !important; } html body .week-card.is-wide-final.fl-line.fl-line.fl-line{ box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc-line) 40%, transparent), 0 0 14px color-mix(in srgb, var(--fc-line) 45%, transparent), 0 14px 28px -8px rgba(0,0,0,0.6) !important; } html body .home-top-zone .hero-card.fl-line{ border:1.5px solid var(--fc-line) !important; } html body #structure-sheet.fl-line.fl-line{ border:1.5px solid var(--fc-line) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--fc-line) 35%, transparent) !important; } html body .fmt-card.fl-tagbg .fmt-desc{ background: var(--tag-bg) !important; border-color: var(--tag-bg) !important; } html body .fmt-card.fl-tagfg .fmt-desc{ color: var(--tag-fg) !important; } html body .fmt-card.fl-tagbd .fmt-desc{ border-color: var(--tag-bd) !important; } html body .hero-card.fl-tagbg #hero-tag{ background: var(--tag-bg) !important; border-color: var(--tag-bg) !important; text-shadow: none !important; } html body .hero-card.fl-tagfg #hero-tag{ color: var(--tag-fg) !important; text-shadow: none !important; } html body .hero-card.fl-tagbd #hero-tag{ border-color: var(--tag-bd) !important; } html body #structure-sheet.fl-tagbg .modal-tag-chip{ background: var(--tag-bg) !important; border-color: var(--tag-bg) !important; } html body #structure-sheet.fl-tagfg .modal-tag-chip{ color: var(--tag-fg) !important; text-shadow: none !important; } html body #structure-sheet.fl-tagbd .modal-tag-chip{ border-color: var(--tag-bd) !important; } html body .fmt-card.fl-titlefg .fmt-title, html body .hero-card.fl-titlefg #hero-title, html body .week-card.fl-titlefg .wf-title, html body #structure-sheet.fl-titlefg #modal-title{ color: var(--title-fg) !important; } html body .hero-card.fl-dayfg .day-date, html body .hero-card.fl-dayfg #hero-day1, html body .week-card.fl-dayfg .daytag, html body .week-card.fl-dayfg .day-num{ color: var(--day-fg) !important; } html body .hero-card.fl-timefg .start-line, html body .hero-card.fl-timefg #hero-meta{ color: var(--time-fg) !important; } html body .hero-card.fl-timenum .start-line b, html body .hero-card.fl-timenum #hero-meta b, html body .week-card.fl-timenum .card-time{ color: var(--time-num) !important; }