/* ============================================================================ KHL Prediction — публичный дизайн-язык. Палитра унифицирована с проектом odp_site: зелёный акцент #5cb85c, тёмные поверхности #121212/#1e1e1e, шрифт Roboto. Рукописный CSS на дизайн-токенах: офлайн, без пересборки Tailwind. Приоритет — производительность: без backdrop-blur, без transition: all, лёгкие карточки и списки. ============================================================================ */ /* --- Дизайн-токены (гамма odp_site) --- */ :root { color-scheme: dark; --bg: #121212; /* background-color */ --bg-soft: #1a1a1a; /* navbar/footer bg */ --surface: #1e1e1e; /* card-bg */ --surface-2: #2d2d2d; /* secondary-bg */ --surface-hover: #363636; --border: #2d2d2d; /* бордеры карточек */ --border-strong: #3d3d3d; /* border-color / ховер */ --text: #e5e5e5; --text-soft: #adb5bd; /* muted-text из odp */ --text-muted: #7d848c; /* более глухой производный от muted */ --accent: #5cb85c; /* primary-color — зелёный бренд */ --accent-hover: #479a47; --accent-ink: #ffffff; --accent-soft: rgba(92, 184, 92, 0.12); --accent-ring: rgba(92, 184, 92, 0.3); /* Статусы сигналов: успех — яркий vivid-зелёный, чтобы не сливаться с приглушённым фирменным #5cb85c; провал — danger из odp. */ --over: #4ade80; /* зашло / ТБ / сильный сигнал */ --over-soft: rgba(74, 222, 128, 0.12); --under: #d9534f; /* не зашло / ТМ / слабый сигнал (danger-color) */ --under-soft: rgba(217, 83, 79, 0.12); --home: #4da3ff; --away: #c084fc; --warn: #ffc107; /* warning-color */ --warn-soft: rgba(255, 193, 7, 0.12); /* Короткие семантические алиасы для продуктовых страниц. */ --line: var(--border); --muted: var(--text-soft); --success: var(--over); --danger: var(--under); --accent-blue: #007bff; /* accent-color — вторичный синий */ --tg-from: #2aabee; /* градиент кнопки Telegram */ --tg-to: #229ed9; --radius: 0.5rem; /* карточки */ --radius-lg: 0.5rem; --radius-btn: 0.25rem; /* кнопки */ --radius-pill: 999px; /* бейджи/пилюли */ --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --maxw: 1120px; --gap: 16px; /* App-shell: левый сайдбар + мобильный топбар/таб-бар (как в odp_site) */ --sidebar-w: 252px; --topbar-h: 56px; --tabbar-h: 56px; } /* --- Светлая тема (единый паттерн CSP): [data-theme="light"] на . Важно: body.public-site переопределяет токены на уровне body, поэтому светлые значения нужно задать и там. --- */ html[data-theme='light'], html[data-theme='light'] body.public-site { color-scheme: light; --bg: #f4f6f8; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #eef1f4; --surface-hover: #e7ebee; --border: #dde3e9; --border-strong: #c8d1da; --text: #1c2630; --text-soft: #47566a; --text-muted: #64748b; --accent: #15803d; --accent-hover: #116632; --accent-ink: #ffffff; --accent-soft: rgba(21, 128, 61, 0.1); --accent-ring: rgba(21, 128, 61, 0.28); --over: #16a34a; --over-soft: rgba(22, 163, 74, 0.12); --under: #b91c1c; --under-soft: rgba(185, 28, 28, 0.1); --home: #1d63c4; --away: #7c3aed; --warn: #a16207; --warn-soft: rgba(161, 98, 7, 0.12); --accent-blue: #1d63c4; --shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.08); } /* --- База --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Roboto', Arial, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .muted { color: var(--text-muted); } .soft { color: var(--text-soft); } .eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } /* Фокус: контур + мягкое зелёное кольцо (как в odp) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible, button:focus-visible, .btn:focus-visible, .app-nav__link:focus-visible, .app-tabbar__link:focus-visible, .chip:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); } /* --- App-shell: левый сайдбар (паттерн odp_site base.html) --- */ .app-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; height: 100dvh; background: rgba(10, 15, 23, 0.98); border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; z-index: 60; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; } .app-sidebar::-webkit-scrollbar { width: 8px; } .app-sidebar::-webkit-scrollbar-thumb { background: #34383f; border-radius: 4px; } .app-brand { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 0; background: rgba(10, 15, 23, 0.98); z-index: 2; } .app-brand__logo { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; } .app-brand__text { display: flex; flex-direction: column; min-width: 0; } .app-brand__name { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; } .app-brand__sub { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-top: 1px; } /* Бейдж «Премиум всем» — плашка под логотипом */ .app-premium { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 12px 0; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(92, 184, 92, 0.35); } .app-premium:hover { color: #fff; background: rgba(92, 184, 92, 0.2); } .app-nav { padding: 8px; flex: 1 1 auto; } .app-nav__group { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; font-weight: 700; color: #6c7682; padding: 14px 13px 6px; } .app-nav__link { display: flex; align-items: center; gap: 10px; color: #c2c8d0; min-height: 40px; font-size: 14px; font-weight: 500; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; margin: 1px 0; transition: background-color .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; } .app-nav__icon { width: 18px; height: 18px; flex: none; color: #72849a; opacity: 0.9; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .app-nav__link:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(151, 172, 199, 0.12); color: #fff; } /* Активный пункт повторяет спокойный подсвеченный паттерн публичного ODP. */ .app-nav__link.is-active { background: linear-gradient(100deg, rgba(114, 213, 114, 0.17), rgba(77, 163, 255, 0.075)); border-color: rgba(114, 213, 114, 0.26); color: #effff2; box-shadow: inset 3px 0 var(--accent), 0 10px 34px rgba(0, 0, 0, 0.12); } .app-nav__link.is-active .app-nav__icon { color: var(--accent); opacity: 1; } .app-sidebar__footer { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 8px; background: rgba(7, 11, 17, 0.72); } /* Кнопки Telegram/входа — фирменный сине-голубой градиент (значения odp) */ .app-tg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 12px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(34, 158, 217, 0.35); transition: filter .15s ease; } .app-tg-btn:hover { filter: brightness(1.08); color: #fff; } .app-nav__link--profile { padding: 8px 12px; } /* Контентная область справа от сайдбара */ .app-content { margin-left: var(--sidebar-w); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .app-content > main { flex: 1 0 auto; } /* Мобильный топбар (скрыт на десктопе) */ .app-topbar { display: none; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 16px; position: sticky; top: 0; z-index: 50; background: rgba(26, 26, 26, 0.95); border-bottom: 1px solid var(--border); } .app-burger { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; border-radius: 8px; min-width: 64px; height: 40px; padding: 0 12px; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; } .app-topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .app-topbar__brand img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; } .app-topbar__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .app-topbar__name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; } .app-topbar__page { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar__auth { margin-left: auto; flex: none; display: inline-flex; align-items: center; background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(34, 158, 217, 0.35); } .app-topbar__auth:hover { filter: brightness(1.08); color: #fff; } /* Оверлей под drawer на мобильных */ .app-backdrop { display: none; position: fixed; inset: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.55); z-index: 55; cursor: pointer; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 90; padding: 10px 14px; border-radius: 7px; background: #fff; color: #111; font-weight: 700; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } .app-sidebar__footer form { margin: 0; } .app-sidebar__logout { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; } /* --- Переключатель языка RU / EN (как на CSP) --- */ .app-lang { display: inline-flex; align-self: flex-start; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.03); } .app-lang__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 34px; padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-soft); text-transform: uppercase; transition: background-color .15s ease, color .15s ease; } .app-lang__link + .app-lang__link { border-left: 1px solid rgba(255, 255, 255, 0.12); } .app-lang__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .app-lang__link.is-active { color: #0b1015; background: var(--accent); } /* --- Группы матчей по дням: Сегодня / Завтра / дата (как на CSP) --- */ .day-groups { display: flex; flex-direction: column; gap: 18px; } .day-group__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .day-group__label { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .day-group__date { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .day-group__count { margin-left: auto; min-width: 24px; text-align: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); } .day-group--today .day-group__label { color: var(--accent); } .day-group--today .day-group__count { color: #0b1015; background: var(--accent); border-color: var(--accent); } /* --- NTDevLab ecosystem: отдельная группа в конце сайдбара --- */ .app-nav--eco { margin: 8px 8px 10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .app-nav__group--eco { color: #6c7682; display: flex; align-items: center; gap: 8px; } .app-nav__group--eco::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(114, 213, 114, 0.35), transparent); } .app-nav__link--eco { font-size: 13px; color: #aebbc6; } .app-eco-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; font-size: 8px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); background: rgba(114, 213, 114, 0.1); border: 1px solid rgba(114, 213, 114, 0.28); } .app-nav__link--eco:hover .app-eco-icon { background: rgba(114, 213, 114, 0.2); } .app-nav__link--eco.is-current { color: var(--text); } .app-nav__link--eco.is-current .app-eco-icon { color: #0b1015; background: var(--accent); border-color: var(--accent); } /* --- Светлая тема:shell-компоненты с фиксированными тёмными цветами --- */ html[data-theme='light'] .app-sidebar, html[data-theme='light'] .app-brand { background: #ffffff; border-color: var(--border); } html[data-theme='light'] .app-sidebar { border-right: 1px solid var(--border); } html[data-theme='light'] .app-brand__name, html[data-theme='light'] .app-topbar__name, html[data-theme='light'] .app-nav__link:hover, html[data-theme='light'] .app-lang__link:hover { color: var(--text); } html[data-theme='light'] .app-nav__link { color: var(--text-soft); } html[data-theme='light'] .app-nav__link.is-active { background: linear-gradient(100deg, rgba(21, 128, 61, 0.12), rgba(29, 99, 196, 0.06)); border-color: rgba(21, 128, 61, 0.24); color: #14532d; box-shadow: inset 3px 0 var(--accent); } html[data-theme='light'] .app-nav__group, html[data-theme='light'] .app-nav__group--eco { color: var(--text-muted); } html[data-theme='light'] .app-nav__icon { color: var(--text-muted); } html[data-theme='light'] .app-sidebar__footer { background: transparent; border-top-color: var(--border); } html[data-theme='light'] .app-lang, html[data-theme='light'] .app-lang__link + .app-lang__link { border-color: var(--border-strong); background: transparent; } html[data-theme='light'] .app-lang__link.is-active { color: #ffffff; background: var(--accent); } html[data-theme='light'] .app-nav--eco { border-top-color: var(--border); } html[data-theme='light'] .app-nav__link--eco { color: var(--text-soft); } html[data-theme='light'] .app-eco-icon { color: var(--accent); background: rgba(21, 128, 61, 0.08); border-color: rgba(21, 128, 61, 0.3); } html[data-theme='light'] .app-nav__link--eco.is-current .app-eco-icon { color: #ffffff; background: var(--accent); } html[data-theme='light'] .app-topbar { background: rgba(255, 255, 255, 0.96); border-bottom-color: var(--border); } html[data-theme='light'] .app-burger { border-color: var(--border-strong); color: var(--text); } html[data-theme='light'] .app-tabbar { background: #ffffff; } html[data-theme='light'] .app-premium { color: var(--accent); } html[data-theme='light'] .app-premium:hover { color: var(--accent-hover); background: rgba(21, 128, 61, 0.12); } html[data-theme='light'] body.public-site { background: radial-gradient(800px 420px at 15% -120px, rgba(29, 99, 196, 0.07), transparent 70%), var(--bg); } html[data-theme='light'] .site-header { background: rgba(244, 246, 248, 0.96); border-bottom-color: var(--border); } html[data-theme='light'] .error-bar { color: #7f1d1d; } /* --- Кнопка переключения темы (как на CSP) --- */ .app-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 34px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); color: var(--text-soft); font-size: 14px; padding: 0; transition: background-color .15s ease, border-color .15s ease; } .app-theme-toggle:hover { background: rgba(255, 255, 255, 0.06); } .app-theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); } .app-theme-toggle .icon-moon { display: none; } html[data-theme='light'] .app-theme-toggle .icon-sun { display: none; } html[data-theme='light'] .app-theme-toggle .icon-moon { display: inline; } html[data-theme='light'] .app-theme-toggle { border-color: var(--border-strong); background: transparent; } html[data-theme='light'] .app-theme-toggle:hover { background: var(--surface-2); } .app-sidebar__controls { display: flex; align-items: center; gap: 8px; } /* The shell keeps its dimensions even on short pages and narrow viewports. */ .app-sidebar > .app-brand, .app-sidebar > .app-premium, .app-sidebar > .app-nav, .app-sidebar > .app-sidebar__footer { flex-shrink: 0; } .app-sidebar__controls { min-height: 44px; } .app-lang__link, .app-theme-toggle { min-height: 44px; } .app-nav__link--eco { min-height: 38px; } /* Нижний таб-бар (скрыт на десктопе) */ .app-tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-soft); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } .app-tabbar__link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; color: var(--text-soft); } .app-tabbar__link svg { width: 20px; height: 20px; } .app-tabbar__link small { font-size: 10px; line-height: 1.1; white-space: nowrap; } .app-tabbar__link.is-active { color: var(--accent); } @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); } body.app-sidebar-open .app-sidebar { transform: translateX(0); } body.app-sidebar-open .app-backdrop { display: block; } body.app-sidebar-open { overflow: hidden; } .app-content { margin-left: 0; } .app-topbar { display: flex; } } /* --- Сезонный баннер --- */ .season-banner { background: linear-gradient(90deg, var(--accent-soft), transparent); border-bottom: 1px solid var(--border); } .season-banner__inner { max-width: var(--maxw); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--text-soft); text-align: center; } .season-banner strong { color: var(--text); } .season-banner a { color: var(--accent); font-weight: 600; } /* --- Карточки/секции --- */ main { padding: 28px 0 64px; } .section { margin-top: 28px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .section__title { font-size: 19px; } .section__hint { font-size: 13px; color: var(--text-muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; } .card--pad-sm { padding: 14px; } /* --- Hero: мягкая градиентная подложка зелёный→синий (стиль odp) --- */ .hero { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 24px; background: linear-gradient(135deg, rgba(92, 184, 92, 0.16), rgba(13, 110, 253, 0.08)), var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); padding: 28px; } .hero h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; } .hero p { color: var(--text-soft); margin: 14px 0 0; max-width: 46ch; } .hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; } .stat-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .stat-cell__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); } .stat-cell__value { font-size: 28px; font-weight: 700; margin-top: 6px; } @media (max-width: 880px) { .hero { grid-template-columns: 1fr; padding: 22px; } } /* --- Кнопки --- */ .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 18px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .btn:hover { background: var(--surface-hover); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn--primary:hover { background: var(--accent-hover); } .btn--ghost { background: transparent; } .btn--sm { padding: 7px 13px; font-size: 13px; } .btn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; } /* --- Бейджи / пилюли --- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--border); color: var(--text-soft); background: var(--surface-2); } .badge--phase { color: var(--accent); border-color: var(--border-strong); background: var(--accent-soft); } .badge--playoff { color: var(--warn); background: var(--warn-soft); border-color: rgba(255, 193, 7, 0.3); } .badge--live { color: var(--text-strong); background: rgba(184, 236, 254, 0.12); border-color: rgba(184, 236, 254, 0.5); } .badge--done { color: var(--text-muted); border-left-color: var(--ok); } /* Уверенность сигнала */ .conf { padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; } .conf--very-high, .conf--очень-высокая { color: var(--over); background: var(--over-soft); } .conf--high, .conf--высокая { color: var(--home); background: rgba(77, 163, 255, 0.12); } .conf--medium, .conf--средняя { color: var(--warn); background: var(--warn-soft); } .conf--low, .conf--низкая { color: var(--text-soft); background: var(--surface-2); } .conf--none, .conf--без-перевеса { color: var(--text-muted); background: var(--surface-2); } /* --- Компактный список матчей --- */ .match-list { display: flex; flex-direction: column; gap: 10px; } .match-row { display: grid; grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 18px; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; transition: border-color .15s ease, background-color .15s ease; cursor: pointer; } .match-row:hover { border-color: var(--border-strong); background: var(--surface-2); } .match-row__date { font-size: 12px; color: var(--text-muted); line-height: 1.35; } .match-row__date b { display: block; color: var(--text-soft); font-weight: 600; font-size: 13px; } .match-row__teams { min-width: 0; } .match-row__team { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .match-row__vs { color: var(--text-muted); font-size: 12px; margin: 1px 0; } .match-row__meta { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; } .match-row__chev { color: var(--text-muted); justify-self: end; } /* Главный сигнал в строке */ .signal { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .signal__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .signal__pick { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .signal__row { display: flex; align-items: center; gap: 8px; min-width: 0; } .signal__pick { min-width: 0; } .signal__row .conf { flex: none; } .signal__prob { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-soft); } .signal--over .signal__pick { color: var(--over); } .signal--under .signal__pick { color: var(--under); } /* На завершённых матчах окраска по факту (зашла/не зашла), а не по направлению ТБ/ТМ. */ .signal--win .signal__pick { color: var(--over); } .signal--loss .signal__pick { color: var(--under); } .signal__mark { font-weight: 800; margin-right: 4px; } .signal__mark--win { color: var(--over); } .signal__mark--loss { color: var(--under); } @media (max-width: 760px) { .match-row { grid-template-columns: 56px 1fr auto; grid-template-areas: "date teams chev" "date sigwin sigwin" "date sigtot sigtot"; row-gap: 8px; padding: 12px; gap: 10px; } .match-row__date { grid-area: date; } .match-row__teams { grid-area: teams; } .match-row__chev { grid-area: chev; } /* Якоря по классам signal--kind-*, которые ставит matchRow в app.js (nth-of-type тут ненадёжен: сигналы — не первые div среди соседей). */ .match-row .signal--kind-winner { grid-area: sigwin; } .match-row .signal--kind-total { grid-area: sigtot; } .match-row .signal { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } } /* --- Фильтры --- */ .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filter-input, .filter-select { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-btn); padding: 8px 14px; font-size: 13px; font-family: inherit; } .filter-input::placeholder { color: var(--text-muted); } .chip { padding: 7px 13px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; border: 1px solid var(--border); color: var(--text-soft); background: var(--bg-soft); cursor: pointer; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .chip:hover { color: var(--text); } .chip.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--border-strong); } /* --- Страница матча --- */ .match-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .match-header__teams { font-size: clamp(22px, 4vw, 34px); font-weight: 800; } .match-header__teams .vs { color: var(--text-muted); font-weight: 500; margin: 0 10px; } .match-header__sub { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .scoreline { font-size: clamp(24px, 5vw, 38px); font-weight: 800; font-variant-numeric: tabular-nums; } .scoreline--pending { font-size: 16px; font-weight: 600; color: var(--text-muted); } /* Сетка статистики команд */ .teamstat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 16px; align-items: center; } .teamstat__label { text-align: center; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .teamstat__h { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .teamstat__a { text-align: left; font-weight: 600; font-variant-numeric: tabular-nums; } .teamstat__bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; position: relative; } .teamstat__bar > i { position: absolute; top: 0; bottom: 0; left: 50%; background: var(--accent); } .form-pills { display: inline-flex; gap: 4px; } .form-pill { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .form-pill--w { background: var(--over-soft); color: var(--over); } .form-pill--l { background: var(--under-soft); color: var(--under); } /* Блоки метрик */ .blocks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 760px) { .blocks { grid-template-columns: 1fr; } } .metric-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; } .metric-block--wide { grid-column: 1 / -1; } .metric-block__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-soft); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .metric-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); } .metric-row:first-of-type { border-top: none; } .metric-row__name { color: var(--text-soft); font-size: 14px; } .metric-row__val { font-weight: 700; font-variant-numeric: tabular-nums; } /* Полоса вероятности */ .prob { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 9px 0; border-top: 1px solid var(--border); } .prob:first-of-type { border-top: none; } .prob__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .prob__name { color: var(--text-soft); } .prob__val { font-weight: 700; font-variant-numeric: tabular-nums; } .prob__bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .prob__bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .prob__bar.is-over > i { background: var(--over); } .prob__bar.is-under > i { background: var(--under); } /* Топ-пик / рекомендации */ .toppick { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, var(--accent-soft), transparent); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 18px 20px; } .toppick__pick { font-size: 20px; font-weight: 800; } .toppick__market { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); } .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .rec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .rec__market { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .rec__pick { font-weight: 700; font-size: 15px; margin-top: 4px; } .rec__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .rec__prob { font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: 13px; } /* История версий */ .history { display: flex; flex-direction: column; gap: 10px; } .hist-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; } .hist-item.is-latest { border-color: rgba(92, 184, 92, 0.4); } .hist-item__head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .hist-item__meta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* CTA подписки на бота (ненавязчивый) */ .tg-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; color: var(--text-soft); } .tg-cta b { color: var(--text); } /* --- Состояния --- */ .empty { text-align: center; color: var(--text-muted); padding: 40px 20px; } .error-bar { display: none; background: var(--under-soft); border: 1px solid rgba(217, 83, 79, 0.35); color: #f2b8b5; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; } .error-bar.is-on { display: block; } .skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); border-radius: var(--radius); height: 64px; } .spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border-strong); border-top-color: var(--accent); border-radius:50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Футер --- */ .footer { background: var(--bg-soft); border-top: 1px solid var(--border); margin-top: 48px; } .footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; } .footer a:hover { color: var(--text-soft); } /* --- Публичный продуктовый каркас 2026: матчи и аналитика вместо dashboard-сайдбара --- */ body.public-site { --bg: #0b1015; --bg-soft: #0f161e; --surface: #131b24; --surface-2: #18232e; --surface-hover: #1b2834; --border: #23313e; --border-strong: #344858; --text: #f2f5f7; --text-soft: #aebbc6; --text-muted: #738390; --accent: #72d572; --accent-hover: #5ec35e; --accent-soft: rgba(114, 213, 114, 0.1); --maxw: 1180px; background: radial-gradient(800px 420px at 15% -120px, rgba(58, 121, 154, 0.15), transparent 70%), var(--bg); } body.public-site .app-content { margin-left: var(--sidebar-w); min-height: 100vh; min-height: 100dvh; } .site-header { position: sticky; top: 0; z-index: 60; min-height: 68px; background: rgba(11, 16, 21, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .site-header__inner { max-width: var(--maxw); min-height: 68px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 34px; } .site-brand { display: flex; align-items: center; gap: 10px; flex: none; } .site-brand__logo { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); } .site-brand__copy { display: flex; flex-direction: column; line-height: 1.15; } .site-brand__copy strong { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; } .site-brand__copy small { margin-top: 4px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.11em; } .site-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; } .site-nav__link { position: relative; display: flex; align-items: center; padding: 0 13px; color: var(--text-soft); font-size: 14px; font-weight: 600; } .site-nav__link:hover { color: var(--text); } .site-nav__link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: transparent; } .site-nav__link.is-active { color: var(--text); } .site-nav__link.is-active::after { background: var(--accent); } .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 9px; } .header-action { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-soft); font-size: 13px; font-weight: 600; } .header-action svg, .header-profile svg { width: 16px; height: 16px; } .header-action:hover { color: var(--text); border-color: var(--border-strong); } .header-action--telegram { border-color: rgba(42, 171, 238, 0.28); color: #77caf4; } .header-action--support { color: #f1c574; border-color: rgba(241, 197, 116, 0.3); background: rgba(241, 197, 116, 0.05); } .header-action--support:hover, .header-action--support.is-active { color: #ffe0a4; border-color: rgba(241, 197, 116, 0.55); } .header-profile { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); border: 1px solid var(--border); border-radius: 50%; } .header-profile:hover, .header-profile.is-active { color: var(--text); border-color: var(--accent); } .access-note { background: rgba(114, 213, 114, 0.055); border-bottom: 1px solid rgba(114, 213, 114, 0.12); } .access-note__inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--text-soft); font-size: 12px; } .access-note__inner a { color: var(--accent); font-weight: 600; } body.public-site main { padding: 34px 0 72px; } body.public-site .section { margin-top: 38px; } body.public-site .section__head { align-items: flex-end; margin-bottom: 16px; } body.public-site .section__title { margin-top: 5px; font-size: 23px; } .section-link { color: var(--accent); font-size: 13px; font-weight: 600; } .home-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.75fr); gap: 24px; align-items: stretch; } .home-intro__copy { min-height: 262px; display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(105deg, var(--surface), var(--surface-2)); } .home-intro h1 { margin-top: 8px; font-size: clamp(34px, 5vw, 56px); line-height: 0.98; letter-spacing: -0.045em; } .home-intro__copy p { max-width: 620px; margin: 18px 0 0; color: var(--text-soft); font-size: 16px; line-height: 1.65; } .home-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .model-trust { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 262px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); } .model-trust::after { content: ''; position: absolute; width: 190px; height: 190px; right: -72px; bottom: -90px; border: 34px solid rgba(114, 213, 114, 0.055); border-radius: 50%; } .model-trust:hover { border-color: var(--border-strong); } .model-trust__eyebrow { color: var(--text-soft); font-size: 13px; } .model-trust__metrics { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; } .model-trust__metrics span { display: flex; flex-direction: column; min-width: 0; } .model-trust__metrics b { font-size: clamp(22px, 2.3vw, 28px); letter-spacing: -0.035em; font-weight: 900; font-variant-numeric: tabular-nums; } .model-trust__metrics small { margin-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 1.25; } .model-trust__link { position: relative; z-index: 1; color: var(--accent); font-size: 13px; font-weight: 700; } .matchday { padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); } .matchday__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .matchday__head h2 { margin-top: 5px; font-size: 25px; } body.public-site .match-list { gap: 12px; } body.public-site .match-row.match-card { display: block; padding: 0; overflow: hidden; border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); } body.public-site .match-row.match-card:hover { background: var(--surface-hover); border-color: #3a5061; } .match-card__head { min-height: 41px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 12px; border-bottom: 1px solid var(--border); } .match-card__status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .match-card__main { display: grid; grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px 24px 16px; } .match-card__team { display: flex; align-items: center; gap: 14px; min-width: 0; } .match-card__team strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; } .match-card__team span { flex: none; color: var(--text-soft); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; } .match-card__team--away { flex-direction: row-reverse; text-align: right; } .match-card__score { display: flex; flex-direction: column; align-items: center; } .match-card__score small { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.11em; } .match-card__score b { margin-top: 3px; font-size: 23px; font-weight: 900; font-variant-numeric: tabular-nums; } .match-card__prob { height: 4px; margin: 0 24px; display: flex; overflow: hidden; border-radius: 2px; background: var(--surface-2); } .match-card__prob i { display: block; height: 100%; background: var(--home); } .match-card__prob b { display: block; height: 100%; background: var(--away); } .match-card__insights { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .match-card__insight { min-width: 0; padding: 12px 16px; display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #111922; } .match-card__insight small { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .match-card__insight strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .match-card__insight span { color: var(--text-soft); font-size: 12px; white-space: nowrap; } .match-card__insight--total strong { color: #e0bd77; } .match-card__insight.is-win strong { color: var(--over); } .match-card__insight.is-loss strong { color: #ef7773; } .match-card__pending { margin-top: 16px; padding: 13px 16px; color: var(--text-muted); font-size: 12px; text-align: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #111922; } .match-card__total { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 0 24px 14px; } .match-card__total small { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; } .match-card__total b { font-size: 15px; font-weight: 800; color: #e0bd77; font-variant-numeric: tabular-nums; } .match-card__foot { padding: 9px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--text-muted); font-size: 12px; } .match-card__foot b { color: var(--accent); font-size: 16px; } .community-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .community-strip__item { min-width: 0; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid rgba(42, 171, 238, 0.24); border-radius: 10px; background: rgba(42, 171, 238, 0.045); } .community-strip__item--support { border-color: rgba(241, 197, 116, 0.24); background: rgba(241, 197, 116, 0.035); } .community-strip__item strong { font-size: 14px; } .community-strip__item p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; } .btn--support { color: #ffe0a4; border-color: rgba(241, 197, 116, 0.3); background: rgba(241, 197, 116, 0.07); } body.public-site .footer { background: #0c1218; } .footer__inner--product { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px 48px; } .footer__brand { display: flex; flex-direction: column; gap: 6px; } .footer__brand strong { color: var(--text); font-size: 15px; } .footer__links { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; } .footer__links a { color: var(--text-soft); } .footer__project { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--border); } .footer__project a { color: var(--accent); } @media (max-width: 960px) { .site-header__inner { gap: 18px; } .site-brand__copy small { display: none; } .site-nav__link { padding: 0 9px; } .site-nav__link::after { left: 9px; right: 9px; } .header-action--telegram span { display: none; } .home-intro { grid-template-columns: 1fr; } .home-intro__copy, .model-trust { min-height: auto; } .model-trust__metrics { max-width: 520px; } .community-strip { grid-template-columns: 1fr; } } @media (max-width: 991.98px) { body.public-site .app-content { margin-left: 0; } } @media (max-width: 680px) { .site-header, .site-header__inner { min-height: 58px; } .site-header__inner { padding: 0 14px; } .site-brand__logo { width: 32px; height: 32px; } .site-brand__copy strong { font-size: 14px; } .site-nav, .header-action { display: none; } .site-header__actions { margin-left: auto; } body.public-site main { padding: 22px 0 50px; } body.public-site .container { padding: 0 12px; } .access-note__inner { display: grid; gap: 2px; padding: 7px 14px; text-align: center; white-space: normal; } .home-intro__copy { min-height: 242px; padding: 28px 22px; } .home-intro h1 { font-size: 38px; } .home-intro__copy p { font-size: 14px; } .model-trust { padding: 22px; } .model-trust__metrics { gap: 8px; } .matchday { margin-left: -12px; margin-right: -12px; padding: 20px 12px; border-left: 0; border-right: 0; border-radius: 0; } .matchday__head { align-items: flex-start; } .matchday__head h2 { font-size: 21px; } .match-card__main { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 10px; padding: 18px 14px 14px; } .match-card__team { flex-direction: column; gap: 4px; align-items: flex-start; } .match-card__team--away { align-items: flex-end; text-align: right; } .match-card__team strong { width: 100%; font-size: 15px; } .match-card__team span { font-size: 14px; } .match-card__score b { font-size: 19px; } .match-card__prob { margin: 0 14px; } .match-card__insights { grid-template-columns: 1fr; } .match-card__insight { grid-template-columns: 86px minmax(0, 1fr); } .match-card__insight span { grid-column: 2; } .community-strip__item { grid-template-columns: minmax(0, 1fr); padding: 16px; } .community-strip__item .btn { grid-column: 1; justify-self: start; } .footer__inner--product { grid-template-columns: 1fr; } .footer__links { justify-content: flex-start; } .footer__project { grid-column: 1; } } /* Product pages: power ranking, team profiles, model transparency and protocol data. */ .page-hero--compact { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 34px; margin-top: 18px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 82% 20%, rgba(63, 205, 151, .14), transparent 34%), var(--surface); } .page-hero--compact h1 { margin: 7px 0 10px; font-size: clamp(30px, 5vw, 52px); line-height: 1; } .page-hero--compact p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; } .hero-proof { min-width: 160px; padding: 24px; text-align: center; border: 1px solid var(--line); border-radius: 18px; background: rgba(7, 12, 16, .6); } .hero-proof strong { display: block; color: var(--accent); font-size: 38px; line-height: 1; } .hero-proof span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .power-table { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } .power-table__head, .power-row { display: grid; grid-template-columns: 48px minmax(200px, 1.6fr) .8fr 1fr .8fr .9fr; align-items: center; gap: 14px; } .power-table__head { padding: 12px 18px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .power-row { min-height: 70px; padding: 10px 18px; color: var(--text); border-top: 1px solid var(--line); text-decoration: none; transition: background .18s ease, transform .18s ease; } .power-row:hover { background: rgba(63, 205, 151, .06); } .power-row__rank { color: var(--muted); font-size: 20px; font-weight: 800; } .power-row__team { display: flex; align-items: center; gap: 12px; min-width: 0; } .power-row__team img { width: 42px; height: 42px; object-fit: contain; } .power-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } .trend { display: inline !important; margin-left: 5px; font-weight: 700; } .trend--up { color: var(--success) !important; } .trend--down { color: var(--danger) !important; } .team-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; color: #06110d; background: var(--accent); font-weight: 900; } .team-mark--large { width: 84px; height: 84px; font-size: 32px; } .breadcrumbs { display: flex; gap: 8px; margin: 20px 0 10px; color: var(--muted); font-size: 13px; } .breadcrumbs a { color: var(--accent); } .team-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(120deg, rgba(63,205,151,.09), transparent 46%), var(--surface); } .team-hero__identity { display: flex; align-items: center; gap: 22px; } .team-hero__identity img { width: 104px; height: 104px; object-fit: contain; } .team-hero h1 { margin: 6px 0; font-size: clamp(34px, 5vw, 58px); line-height: 1; } .team-hero p { margin: 0; color: var(--muted); } .team-hero__actions { display: grid; justify-items: end; gap: 10px; } .rank-orb { display: grid; place-items: center; width: 126px; height: 126px; border: 1px solid rgba(63,205,151,.35); border-radius: 50%; background: rgba(63,205,151,.07); text-align: center; } .rank-orb strong { display: block; color: var(--accent); font-size: 36px; line-height: 1; } .rank-orb span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .team-kpis { margin-top: 16px; grid-template-columns: repeat(4, 1fr); } .stat-cell small { display: block; margin-top: 5px; color: var(--muted); } .team-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; } .result-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .result-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; color: var(--text); border-bottom: 1px solid var(--line); text-decoration: none; } .result-row:last-child { border-bottom: 0; } .result-row:hover { background: rgba(255,255,255,.025); } .result-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } .insight-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); } .insight-strip > div { padding: 20px; background: var(--surface); } .insight-strip strong, .insight-strip span { display: block; } .insight-strip span { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; } .match-header__teams a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .match-team-logo { width: 48px; height: 48px; object-fit: contain; } .match-header__venue { margin-top: 10px; color: var(--muted); font-size: 13px; } .match-ssr h1 a { color: inherit; text-decoration: none; } .match-follow__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .js-follow-team.is-followed { color: #06110d; border-color: var(--accent); background: var(--accent); } .protocol-compare { padding: 8px 18px; } .protocol-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: center; } .protocol-row:last-child { border-bottom: 0; } .protocol-row span { color: var(--muted); font-size: 13px; } .protocol-row b:first-child { text-align: right; } .protocol-row b:last-child { text-align: left; } .protocol-row--teams b { color: var(--accent); } .forecast-chart { margin-bottom:14px; overflow:hidden; } .forecast-chart__head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:10px; } .forecast-chart__head b { color:var(--accent); font-size:18px; white-space:nowrap; } .forecast-chart svg { display:block; width:100%; height:auto; max-height:250px; } .forecast-chart text { fill:var(--muted); font-size:12px; } .forecast-chart__grid { stroke:rgba(148,163,184,.18); stroke-width:1; stroke-dasharray:5 7; } .forecast-chart__line { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; } .forecast-chart circle { fill:var(--surface); stroke:var(--accent); stroke-width:3; } .forecast-chart__axis-label { font-weight:700; } .confidence-band { display: grid; grid-template-columns: 155px 1fr 62px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .confidence-band:last-child { border-bottom: 0; } .confidence-band span:first-child strong, .confidence-band span:first-child small { display: block; } .confidence-band small { margin-top: 2px; color: var(--muted); } .confidence-band__bar { overflow: hidden; height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); } .confidence-band__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .confidence-band > b { text-align: right; } .model-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; } .watchlist-chips { display: flex; flex-wrap: wrap; gap: 7px; } .watchlist-settings { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px; margin-top: 16px; } .watchlist-settings label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; } .watchlist-settings select { min-width: 140px; padding: 9px 12px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); } .watchlist-settings .toggle-line { display: flex; align-items: center; align-self: center; color: var(--text); font-size: 14px; } .watchlist-settings__status { grid-column: 1 / -1; } .ranking-preview { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .ranking-preview__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-height: 78px; padding: 14px; color: var(--text); border-right: 1px solid var(--line); text-decoration: none; } .ranking-preview__item:last-child { border-right: 0; } .ranking-preview__item:hover { background: rgba(63,205,151,.06); } .ranking-preview__item > span { display: grid; place-items: center; width: 28px; height: 28px; color: #07110c; border-radius: 50%; background: var(--accent); font-weight: 900; } .ranking-preview__item > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ranking-preview__item > small { grid-column: 3; color: var(--muted); } .ranking-preview__item > small.is-up { color: var(--success); } .ranking-preview__item > small.is-down { color: var(--danger); } @media (max-width: 900px) { .power-table__head { display: none; } .power-row { grid-template-columns: 36px minmax(150px, 1fr) auto; gap: 10px; } .power-row > :nth-child(4), .power-row > :nth-child(5), .power-row > :nth-child(6) { display: none; } .team-layout { grid-template-columns: 1fr; } .team-kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .page-hero--compact, .team-hero { align-items: stretch; flex-direction: column; padding: 22px; } .hero-proof { min-width: 0; } .team-hero__identity { align-items: flex-start; } .team-hero__identity img { width: 74px; height: 74px; } .team-hero__actions { justify-items: stretch; } .rank-orb { width: auto; height: auto; padding: 15px; border-radius: 15px; } .insight-strip { grid-template-columns: 1fr; } .confidence-band { grid-template-columns: 105px 1fr 52px; gap: 8px; } .watchlist-settings { grid-template-columns: 1fr; align-items: stretch; } .ranking-preview { grid-template-columns: 1fr; } .ranking-preview__item { min-height: 58px; border-right: 0; border-bottom: 1px solid var(--line); } .protocol-row { grid-template-columns: .7fr 1.5fr .7fr; gap: 8px; } .match-team-logo { width: 34px; height: 34px; } } /* ============================================================================ Админка: чистый каркас на тех же токенах + нейтрализация лагов легаси-контента. admin_base.html грузит site.css ПЕРЕД app.css, поэтому здешние правила перебивают тяжёлые глобалы старого стиля. ============================================================================ */ body.admin { background: radial-gradient(900px 400px at 90% -10%, rgba(92, 184, 92, 0.05), transparent 60%), var(--bg); } /* Новый рабочий каркас: постоянная навигация на десктопе и drawer на телефоне. */ .admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; width: 252px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--text); background: #15171c; border-right: 1px solid rgba(255,255,255,.07); overflow-y: auto; } .admin-sidebar__brand { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); } .admin-sidebar__brand img { width: 38px; height: 38px; flex: none; border-radius: 50%; } .admin-sidebar__brand span { display: grid; min-width: 0; line-height: 1.2; } .admin-sidebar__brand strong { color: #fff; font-size: 15px; } .admin-sidebar__brand small { margin-top: 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .admin-nav { flex: 1 1 auto; padding: 8px 10px 18px; } .admin-nav__group + .admin-nav__group { margin-top: 8px; } .admin-nav__label { padding: 12px 10px 5px; color: #697481; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .admin-nav__link { display: flex; align-items: center; min-height: 42px; margin: 2px 0; padding: 9px 12px; color: #bcc3cc; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .admin-nav__link:hover { color: #fff; background: rgba(255,255,255,.055); } .admin-nav__link.is-active { color: #fff; background: rgba(92,184,92,.14); border-color: rgba(92,184,92,.35); } .admin-sidebar__footer { display: grid; gap: 8px; padding: 14px; border-top: 1px solid rgba(255,255,255,.07); } .admin-identity { display: grid; padding: 2px 2px 8px; } .admin-identity span { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; } .admin-identity strong { margin-top: 3px; color: var(--text-soft); font-size: 13px; font-weight: 600; } .admin-sidebar__action { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; color: var(--text-soft); background: transparent; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; } .admin-sidebar__action:hover { color: #fff; border-color: rgba(92,184,92,.55); } .admin-sidebar__action--button { appearance: none; } .admin-mobile-bar, .admin-nav-backdrop { display: none; } .admin-workspace { min-height: 100vh; min-height: 100dvh; margin-left: 252px; } .admin-shell { width: 100%; max-width: 1380px; margin: 0 auto; padding: 38px 32px 64px; } .admin-page-header { max-width: 760px; margin-bottom: 24px; } .admin-page-header h1 { margin-top: 7px; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; } .admin-page-header p { margin: 10px 0 0; line-height: 1.65; } .admin-overview-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* Вход: вместо одинокой карточки — компактная продуктовая точка входа. */ .admin-login-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 28px; } .admin-login-shell { width: min(940px, 100%); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.24); } .admin-login-intro { display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; padding: 46px; background: linear-gradient(145deg, #17231c 0%, #12181b 72%); border-right: 1px solid var(--border); } .admin-login-brand { display: flex; align-items: center; gap: 13px; } .admin-login-brand img { width: 46px; height: 46px; border-radius: 50%; } .admin-login-brand span { display: grid; line-height: 1.2; } .admin-login-brand strong { color: #fff; font-size: 17px; } .admin-login-brand small { margin-top: 4px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .admin-login-intro h1 { max-width: 430px; margin-top: 60px; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; } .admin-login-intro p { max-width: 420px; margin: 18px 0 0; color: var(--text-soft); } .admin-login-note { margin-top: 36px; color: var(--text-muted); font-size: 12px; } .admin-login-panel { align-self: center; padding: 46px; } .admin-login-panel h2 { font-size: 25px; } .admin-login-panel > p { margin: 10px 0 26px; color: var(--text-soft); font-size: 14px; } .admin-login-form { display: grid; gap: 16px; } .admin-login-form label { display: grid; gap: 7px; color: var(--text-soft); font-size: 13px; font-weight: 600; } .admin-login-form .filter-input { width: 100%; min-height: 46px; border-radius: 7px; } .admin-login-form .btn { min-height: 46px; justify-content: center; margin-top: 3px; } .admin-login-links { margin-top: 24px; color: var(--text-muted); font-size: 13px; line-height: 1.7; } .admin-login-links a { color: var(--accent); } /* Главный источник лагов в site.css — `.transition { transition-property: all }`, из-за чего любой ховер вызывал reflow всего поддерева. Ограничиваем дешёвыми свойствами. Плюс убираем тяжёлые blur/тени у легаси-контента в админке. */ body.admin .transition, body.admin [class*="transition"] { transition-property: color, background-color, border-color, transform, opacity !important; transition-duration: 150ms !important; } body.admin .khl-sticky-nav, body.admin .khl-modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .admin-shell { margin-right: auto; margin-left: auto; } /* Шапка админки */ .admin-top { position: sticky; top: 0; z-index: 40; background: rgba(26, 26, 26, 0.95); border-bottom: 1px solid var(--border); } .admin-top__row { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .admin-top__tabs { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 10px; display: flex; gap: 6px; flex-wrap: wrap; } .admin-badge { padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); } /* KPI-плитки */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; } .kpi__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .kpi__value { font-size: 24px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; } /* Таблицы админки */ .adm-table { width: 100%; border-collapse: collapse; font-size: 14px; } .adm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); background: var(--surface); padding: 8px 10px; border-bottom: 1px solid var(--border); } .adm-table td { padding: 10px; border-bottom: 1px solid var(--border); } .adm-table tr:hover td { background: var(--surface-2); } /* Лог фоновых задач */ .log-box { background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; color: var(--text-soft); max-height: 320px; overflow: auto; white-space: pre-wrap; } /* Тумблер */ .toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle__track { width: 44px; height: 24px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); transition: background-color .15s ease; position: relative; flex: none; } .toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: transform .15s ease, background-color .15s ease; } .toggle input:checked + .toggle__track { background: var(--accent-soft); border-color: var(--accent); } .toggle input:checked + .toggle__track::after { transform: translateX(20px); background: var(--accent); } /* ---------------------------------------------------------------------------- РЕСКИН КОНТЕНТА АДМИНКИ. tailwind.css грузится только в админке, поэтому ретемим легаси-Tailwind-утилиты под новые токены — разом для всех 6 страниц (и статической разметки, и того, что рисует ui.js). Без переписывания шаблонов. Всё scoped под body.admin, паблик не затрагивается. ---------------------------------------------------------------------------- */ /* Поверхности карточек */ body.admin .bg-slate-950\/75, body.admin .bg-slate-950\/70, body.admin .bg-slate-900\/80, body.admin .bg-slate-900\/70, body.admin .bg-slate-900\/60, body.admin .bg-slate-900\/50, body.admin .bg-slate-900 { background-color: var(--surface) !important; } /* Поля ввода и более тёмные плашки */ body.admin .bg-slate-950, body.admin .bg-\[\#111622\], body.admin .bg-\[\#0f1626\] { background-color: var(--bg-soft) !important; } body.admin input, body.admin select, body.admin textarea { background-color: var(--bg-soft) !important; color: var(--text) !important; } /* Границы */ body.admin .border-white\/10, body.admin .border-white\/5, body.admin .border-white\/15 { border-color: var(--border) !important; } /* Радиусы */ body.admin .rounded-\[28px\], body.admin .rounded-\[24px\], body.admin .rounded-3xl { border-radius: var(--radius-lg) !important; } body.admin .rounded-2xl, body.admin .rounded-xl { border-radius: var(--radius) !important; } /* Акцентный текст */ body.admin .text-cyan-100, body.admin .text-cyan-200, body.admin .text-cyan-300, body.admin .text-cyan-400 { color: var(--accent) !important; } /* Приглушённый/мягкий текст */ body.admin .text-slate-500 { color: var(--text-muted) !important; } body.admin .text-slate-400, body.admin .text-slate-300, body.admin .text-slate-200 { color: var(--text-soft) !important; } /* Акцентные мягкие фоны */ body.admin .bg-cyan-500\/30, body.admin .bg-cyan-500\/20, body.admin .bg-cyan-500\/10, body.admin .bg-cyan-400\/15, body.admin .bg-cyan-400\/10, body.admin .bg-cyan-500\/8 { background-color: var(--accent-soft) !important; } /* Семантические мягкие фоны */ body.admin .bg-emerald-500\/15, body.admin .bg-emerald-500\/10, body.admin .bg-emerald-400\/15, body.admin .bg-emerald-400\/10 { background-color: var(--over-soft) !important; } body.admin .text-emerald-100, body.admin .text-emerald-200, body.admin .text-emerald-300, body.admin .text-emerald-400 { color: var(--over) !important; } body.admin .bg-rose-500\/10, body.admin .bg-rose-500\/15 { background-color: var(--under-soft) !important; } body.admin .text-rose-200, body.admin .text-rose-300, body.admin .text-rose-400 { color: var(--under) !important; } body.admin .bg-amber-500\/10 { background-color: var(--warn-soft) !important; } body.admin .text-amber-200, body.admin .text-amber-300, body.admin .text-amber-400 { color: var(--warn) !important; } /* Светлые («белые») кнопки → акцент */ body.admin .bg-white, body.admin .bg-cyan-100, body.admin .bg-cyan-200, body.admin .bg-cyan-300 { background-color: var(--accent) !important; } body.admin .hover\:bg-cyan-100:hover, body.admin .hover\:bg-cyan-400\/15:hover { background-color: var(--accent) !important; opacity: .92; } /* Тяжёлые тени → мягкие */ body.admin [class*="shadow-2xl"], body.admin [class*="shadow-cyan"] { box-shadow: var(--shadow) !important; } @media (max-width: 1100px) { .admin-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { body.admin-nav-open { overflow: hidden; } .admin-sidebar { width: min(310px, 86vw); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 18px 0 50px rgba(0,0,0,.4); } body.admin-nav-open .admin-sidebar { transform: translateX(0); } .admin-nav-backdrop { position: fixed; inset: 0; z-index: 65; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.62); } body.admin-nav-open .admin-nav-backdrop { display: block; } .admin-mobile-bar { position: sticky; top: 0; z-index: 60; min-height: 58px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px; background: rgba(21,23,28,.98); border-bottom: 1px solid var(--border); } .admin-mobile-bar__menu { min-width: 58px; min-height: 40px; padding: 8px 11px; color: #fff; background: transparent; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: 13px; font-weight: 700; } .admin-mobile-bar__brand { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .admin-mobile-bar__brand img { width: 28px; height: 28px; border-radius: 50%; } .admin-mobile-bar__page { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .admin-workspace { margin-left: 0; } .admin-shell { max-width: 100%; padding: 26px 20px 56px; } .admin-page-header { margin-bottom: 18px; } } @media (max-width: 640px) { .admin-shell { padding: 22px 14px 44px; overflow: visible; } .admin-shell > *, .admin-shell section, .admin-shell section > div, .admin-shell [class*="grid"], .admin-shell [class*="grid"] > * { min-width: 0; max-width: 100%; } .admin-shell .overflow-x-auto { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto !important; } .admin-shell h1, .admin-shell h2, .admin-shell h3, .admin-shell p, .admin-shell [class*="text-"] { overflow-wrap: anywhere; } .admin-page-header h1 { font-size: 28px; } .admin-overview-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .admin-overview-kpis > div { min-width: 0; padding: 16px !important; } .admin-overview-kpis > div > div:last-child { font-size: 24px !important; overflow-wrap: anywhere; } body.admin input, body.admin select, body.admin textarea { max-width: 100%; font-size: 16px !important; } body.admin button, body.admin .btn, body.admin a.rounded-full { min-height: 44px; } body.admin .overflow-x-auto { max-width: 100%; -webkit-overflow-scrolling: touch; } body.admin table { min-width: 680px; } body.admin .log-box, body.admin pre { max-width: 100%; overflow-wrap: anywhere; } .admin-login-page { padding: 0; place-items: stretch; } .admin-login-shell { min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; } .admin-login-intro { min-height: auto; padding: 28px 22px; border-right: 0; border-bottom: 1px solid var(--border); } .admin-login-intro h1 { margin-top: 40px; font-size: 34px; } .admin-login-note { margin-top: 24px; } .admin-login-panel { width: 100%; padding: 30px 22px 40px; } } @media (max-width: 390px) { .admin-mobile-bar { grid-template-columns: auto 1fr; } .admin-mobile-bar__page { display: none; } .admin-overview-kpis { grid-template-columns: 1fr; } } /* Уважение к prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* --- Премиум: баннер «доступен всем», бейдж в шапке, плашка locked-рынков --- */ .premium-banner { background: var(--accent-soft); border: 1px solid rgba(92, 184, 92, 0.35); color: var(--accent); border-radius: var(--radius); padding: 12px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .premium-banner a { color: var(--accent); font-weight: 600; } /* Замок «в премиуме» — приглушённый, без кричащего жёлтого */ .badge--lock { color: var(--text-muted); background: var(--surface-2); border-color: var(--border-strong); margin-left: 6px; } .lock-plaque { border-color: var(--border-strong) !important; } .lock-plaque .metric-block__title { color: var(--text-muted); } .history-intro { margin: 10px 0 24px; max-width: 850px; } .history-intro h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 8px 0 14px; } .history-intro p { font-size: 16px; line-height: 1.6; } .history-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; } .history-filters label { flex: 1 1 170px; display: grid; gap: 7px; color: var(--text-soft); font-size: 13px; } .history-filters .filter-input { width: 100%; min-height: 44px; } .history-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 22px 0; } .history-tab { flex: 1 0 126px; padding: 14px; display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .history-tab span { color: var(--text-muted); font-size: 12px; } .history-tab.is-active { background: var(--accent-soft); border-color: var(--accent); } .history-tab.is-active strong { color: var(--accent); } .history-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .history-kpis .card { display: flex; flex-direction: column; gap: 9px; } .history-kpis strong { font-size: 32px; font-variant-numeric: tabular-nums; } .history-kpis span, .history-kpis small { color: var(--text-soft); } .history-win { color: var(--over); } .history-loss { color: var(--under); } .history-chart { display: flex; gap: 8px; overflow-x: auto; padding-top: 6px; } .history-chart__day { flex: 1 0 35px; max-width: 80px; text-align: center; } .history-chart__track { height: 84px; background: var(--surface-2); border-radius: 4px; overflow: hidden; display: flex; align-items: end; } .history-chart__track i { width: 100%; min-height: 2px; background: var(--accent); } .history-chart__day small { color: var(--text-soft); font-size: 11px; } .history-rows { display: grid; gap: 10px; } .history-row { display: grid; grid-template-columns: minmax(230px, 2fr) minmax(130px, 1fr) 100px 100px; align-items: center; gap: 20px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); } .history-row:hover { border-color: var(--accent); background: var(--surface-hover); } .history-row__match, .history-row__pick, .history-row__score { display: grid; gap: 6px; } .history-row time, .history-row small { color: var(--text-soft); font-size: 12px; } .history-row__match strong { font-size: 15px; } .history-outcome { display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 12px; color: var(--text-soft); } .history-outcome b { font-size: 26px; } .history-outcome--win { color: var(--over); } .history-outcome--loss { color: var(--under); } .history-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0; } .history-method { margin-top: 22px; color: var(--text-soft); line-height: 1.6; } .history-method summary { cursor: pointer; font-weight: 700; color: var(--text); } @media (max-width: 760px) { .history-row { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; } .history-row__match { grid-column: 1 / -1; } .history-row__score { text-align: right; } .history-outcome { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 8px; } .history-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .history-kpis strong { font-size: 26px; } } /* Public light theme: keep every panel and label readable on a light canvas. */ html[data-theme='light'] body.public-site { --bg: #f2f5f8; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #e8eef3; --surface-hover: #dfe8ef; --border: #c7d2dc; --border-strong: #9eacb8; --text: #17212b; --text-soft: #3f5060; --text-muted: #5b6b78; --accent: #176b35; --accent-hover: #0e5428; --accent-soft: #dcefe2; --over: #087443; --under: #b42318; --home: #1457a6; --away: #6d28a8; --warn: #8a5a00; background: radial-gradient(circle at 8% -10%, rgba(23,107,53,.08), transparent 34%), var(--bg); } html[data-theme='light'] body.public-site .app-sidebar, html[data-theme='light'] body.public-site .app-brand, html[data-theme='light'] body.public-site .app-topbar { background: var(--surface); color: var(--text); } html[data-theme='light'] body.public-site .app-brand__name, html[data-theme='light'] body.public-site .app-topbar__name, html[data-theme='light'] body.public-site .app-topbar__page, html[data-theme='light'] body.public-site .app-nav__link, html[data-theme='light'] body.public-site .app-nav__group { color: var(--text); } html[data-theme='light'] body.public-site .app-nav__link:hover, html[data-theme='light'] body.public-site .app-nav__link.is-active { background: var(--surface-2); color: var(--accent); } html[data-theme='light'] body.public-site .match-card__insight, html[data-theme='light'] body.public-site .match-card__total, html[data-theme='light'] body.public-site .power-table__head, html[data-theme='light'] body.public-site .metric-block, html[data-theme='light'] body.public-site .stat-cell { background: var(--surface-2); border-color: var(--border); color: var(--text); } html[data-theme='light'] body.public-site .match-card__total b { color: var(--warn); } html[data-theme='light'] body.public-site .match-card__team strong, html[data-theme='light'] body.public-site .match-card__team span, html[data-theme='light'] body.public-site .match-card__score small { color: var(--text); } html[data-theme='light'] body.public-site .result-row:hover { background: var(--surface-hover); } html[data-theme='light'] body.public-site .confidence-band__bar { background: var(--border-strong); } html[data-theme='light'] body.public-site .footer { background: var(--bg-soft); color: var(--text-soft); border-top-color: var(--border); } html[data-theme='light'] body.public-site .site-header { background: rgba(242,245,248,.96); } html[data-theme='light'] body.public-site .app-tg-btn, html[data-theme='light'] body.public-site .app-topbar__auth { color: #fff; } /* Matchday cards: stable layout shared by server and client rendering. */ .public-site .match-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .public-site .match-card--fixture { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); transition:border-color .18s,transform .18s; } .public-site .match-card--fixture:hover { border-color:var(--accent); transform:translateY(-2px); } .public-site .match-card--fixture:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .public-site .match-card--fixture .match-card__head { padding:14px 18px; gap:8px; font-size:11px; } .fixture-teams { display:grid; gap:12px; padding:8px 18px 18px; } .fixture-team { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; } .fixture-team strong { font-size:18px; line-height:1.25; overflow-wrap:anywhere; color:var(--text); } .fixture-team__crest { display:grid; place-items:center; width:44px; height:44px; background:#f3f5f8; border-radius:12px; color:#344454; font-size:13px; font-weight:800; } .fixture-team__crest img { object-fit:contain; max-width:38px; max-height:38px; } .fixture-team__prob { font-variant-numeric:tabular-nums; color:var(--text-soft); font-size:15px; } .public-site .match-card--fixture .match-card__prob { margin:0 18px; height:3px; opacity:.75; } .public-site .match-card__prob.is-skip { filter:grayscale(1); opacity:.35; } .public-site .match-card--fixture .match-card__insights { display:grid; grid-template-columns:1fr 1fr; padding:16px 18px 12px; gap:10px; margin:0; } .public-site .match-card--fixture .match-card__insight { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; padding:10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); } .public-site .match-card--fixture .match-card__insight strong { white-space:normal; overflow-wrap:anywhere; color:var(--text); line-height:1.3; } .public-site .match-card--fixture .match-card__insight span { white-space:normal; font-size:11px; } .public-site .match-card--fixture .match-card__insight.is-skip strong { color:var(--text-muted); } .public-site .match-card--fixture .match-card__insight.is-win strong { color:var(--over); } .public-site .match-card--fixture .match-card__insight.is-loss strong { color:var(--under); } .fixture-context { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px 14px; font-size:12px; color:var(--text-muted); } .fixture-context b { color:var(--text-soft); font-variant-numeric:tabular-nums; } .public-site .match-card--fixture .match-card__foot { margin-top:auto; padding:12px 18px; border-top:1px solid var(--border); justify-content:space-between; color:var(--text-soft); } .public-site .match-card--fixture .match-card__pending { margin:0 18px 16px; padding:12px; font-size:13px; } .matchday__head .soft { max-width:560px; font-size:13px; margin:8px 0 0; } @media (max-width:760px) { .public-site .match-list { grid-template-columns:1fr; } .fixture-team strong { font-size:17px; } } @media (prefers-reduced-motion:reduce) { .public-site .match-card--fixture { transition:none; } } .public-site .history-unverified { color:var(--warn); } .matchday-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; } .matchday-tabs button { cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:24px; border:1px solid var(--border); background:var(--surface); color:var(--text-soft); font:inherit; font-size:13px; } .matchday-tabs button[aria-pressed='true'] { color:var(--text); border-color:var(--accent); background:var(--accent-soft); } .matchday-tabs button span { font-size:11px; opacity:.7; } .day-group[hidden] { display:none !important; } .fixture-team__crest > * { grid-area:1 / 1; } .fixture-team__crest img { background:#f3f5f8; } .public-site .match-card--fixture .match-card__insights { background:transparent; border:0; } .public-site .match-card--fixture .match-card__pending { background:var(--surface-2); } /* Server-rendered calendars and statistics remain usable without JavaScript. */ .schedule-nav { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 22px; } .schedule-nav [aria-current="page"] { border-color:var(--accent); } .seo-table-scroll { max-width:100%; overflow-x:auto; margin:14px 0; border:1px solid var(--line, #29333e); border-radius:12px; } .seo-table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; line-height:1.55; } .seo-table caption { text-align:left; padding:12px 16px; font-weight:600; } .seo-table th, .seo-table td { padding:12px 16px; border-bottom:1px solid var(--line, #29333e); vertical-align:top; } .seo-table thead th { color:var(--muted); font-size:12px; font-weight:500; } .seo-table tbody th { font-weight:500; } .seo-table small, #team-prediction-record small { display:block; color:var(--muted); font-size:12px; font-weight:400; } .seo-table tr:last-child td, .seo-table tr:last-child th { border-bottom:0; } .match-ssr h1 { overflow-wrap:anywhere; } @media (max-width:600px) { .seo-table th, .seo-table td { padding:10px 9px; } .seo-table { font-size:13px; } .seo-table .form-pills { min-width:100px; } }