/* Масштаб сайту 80% на ПК (замовник 2026-10-04: «сайт по вході також на 80% zoom»). Клас tf-z — лише в base.html * (адмінка й вікно гри не масштабуються). Під zoom одиниці vh/vw теж множаться на .8, тому всі вони в tf.css/app.css * записані як calc(Nvh * var(--vz)) — так 100vh лишається на всю висоту, як при справжньому зумі браузера. * JS, що ставить координати з getBoundingClientRect у style, ділить їх на tfZoom() (tf.js). */ :root { --vz: 1; } @media (min-width: 1025px) { html.tf-z { zoom: .8; --vz: 1.25; } } /* ========================================================================== TwinForge — редизайн 2026 (шар поверх app.css) -------------------------------------------------------------------------- Layout: верхня шапка на всю ширину, контент у колонці до 1280px, повні ширини для hero-блоків. Старі сторінки лишаються на класах app.css, але беруть нові токени — тож одразу в кольорах бренду. Теми гравців продовжують працювати: вони перевизначають ті самі шість змінних (--bg, --surface, --accent, …) на . Тут лише нові типові значення — для гостей і тих, хто тему не міняв. ========================================================================== */ :root { --bg: #07080c; --surface: #12151d; --accent: #f7b733; --primary: #f2f4f8; --secondary: #a0a8ba; --text: #f2f4f8; --radius: 16px; --on-accent: #1a1206; --ember: #ff5e2b; --gold-hi: #ffd66b; --ink-2: #a0a8ba; --ink-3: #636c80; --role-owner: #ff3d6e; --role-admin: #3b7bff; --role-supreme: #ffc83d; --role-boss: #a45bff; --role-pro: #34e08a; --font-display: "Unbounded", "Arial Black", system-ui, sans-serif; --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --wrap: 1280px; --gutter: clamp(16px, calc(4vw * var(--vz)), 48px); --top-h: 72px; } /* Казахська: в Unbounded немає Ә, Ғ, Қ, Ң, Ө, Ұ, Ү, Һ — у заголовку вони б підставлялись з іншого шрифту посеред слова. Тому заголовки казахською — Onest (у ньому ці літери є); слово-логотип лишається Unbounded. */ html:lang(kk) { --font-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html:lang(kk) .tf-brand-word { font-family: "Unbounded", "Arial Black", sans-serif; } body { font-family: var(--font-body); font-size: 15px; background: radial-gradient(1200px 520px at 50% -180px, color-mix(in srgb, var(--ember) 16%, transparent), transparent 70%), var(--bg); } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; text-wrap: balance; } .tf-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .tf-main { min-height: calc(70vh * var(--vz)); display: block; } .tf-main .content-inner { padding-block: 8px 64px; max-width: var(--wrap); } .tf-main .messages { padding-top: 16px; } /* ----- знак: крила, черга з AK, жар кузні --------------------------------- */ /* Емблема (tools/logo/build_logo.py; замовник 2026-10-03: «зроби лого більш анімованим»). Рух — лише з class="is-live", розкриття крил — ще й з "is-intro" (великі знаки: головна, вхід). Цикл --tf-t = 6 с: 0–44% спокій (пера крил дихають хвилею), 44–60% помах крил, 60 / 63,5 / 67% — три постріли (спалах, віддача, трасер, гільза, спалах обідка й світло на стіні щита), 73–90% відблиск по щиту. Жарини й жар кузні — у власних ритмах. Наведення — швидка стрільба. Точки обертання — у px поля 320×200: браузер рахує їх у локальних координатах елемента, тож у віддзеркаленому правому крилі працюють ті самі числа. */ .tf-mark { overflow: visible; flex: none; } .tf-mark .tf-wing, .tf-mark .tf-wing-u { transform-box: view-box; transform-origin: 128px 100px; } /* «плече» */ .tf-mark .tf-f { transform-box: view-box; } /* основа пера — в inline style */ .tf-mark .tf-soldier { transform-box: view-box; transform-origin: 168px 104px; } .tf-mark .tf-shield { transform-box: view-box; transform-origin: 160px 112px; } .tf-mark .tf-forge, .tf-mark .tf-spark { transform-box: fill-box; transform-origin: center; } .tf-mark .tf-flash, .tf-mark .tf-tracer, .tf-mark .tf-shell, .tf-mark .tf-ember { transform-box: view-box; transform-origin: 0 0; } .tf-mark .tf-flash { opacity: .85; } .tf-mark .tf-shine { transform: translateX(-60px); opacity: 0; } .tf-mark.is-live { --tf-t: 6s; } .tf-mark.is-live .tf-f { animation: tf-feather 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); } .tf-mark.is-live .tf-wing { animation: tf-flap var(--tf-t) cubic-bezier(.45, 0, .4, 1) var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-flash { opacity: 0; animation: tf-shot var(--tf-t) linear var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-flash-star { opacity: 1; } .tf-mark.is-live .tf-flash-glow { opacity: .55; } .tf-mark.is-live .tf-soldier { animation: tf-recoil var(--tf-t) ease-out var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-tracer { animation: tf-tracer var(--tf-t) linear var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-shell { animation: tf-shell var(--tf-t) linear var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-sh2 { animation-delay: calc(var(--tf-delay, 0s) + var(--tf-t) * .035); } .tf-mark.is-live .tf-sh3 { animation-delay: calc(var(--tf-delay, 0s) + var(--tf-t) * .07); } .tf-mark.is-live .tf-rim, .tf-mark.is-live .tf-lit { animation: tf-glare var(--tf-t) ease-out var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-shine { animation: tf-shield-shine var(--tf-t) ease-in-out var(--tf-delay, 0s) infinite; } .tf-mark.is-live .tf-forge { animation: tf-forge 3.4s ease-in-out infinite alternate; } .tf-mark.is-live .tf-ember { animation: tf-ember var(--d, 5s) linear var(--dl, 0s) infinite; } .tf-mark.is-live .tf-spark { animation: tf-twinkle 2.2s ease-in-out infinite; } .tf-mark.is-live .tf-s2 { animation-delay: -.8s; } .tf-mark.is-live .tf-s3 { animation-delay: -1.5s; } /* Поява великого знака: крила розкриваються з-за щита, щит виринає; перша черга — одразу після. */ .tf-mark.is-intro { --tf-delay: -2.4s; } .tf-mark.is-intro .tf-wing-u { animation: tf-unfold 1.15s cubic-bezier(.2, .85, .25, 1.12) both; } .tf-mark.is-intro .tf-shield { animation: tf-pop .75s cubic-bezier(.2, .9, .3, 1.35) both; } /* Наведення на знак у шапці (чи на великий знак) — безперервна стрільба й часті помахи. */ .tf-brand:hover .tf-mark.is-live .tf-wing, .tf-mark.is-live:hover .tf-wing { animation: tf-flap-fast 1.1s ease-in-out infinite; } .tf-brand:hover .tf-mark.is-live .tf-flash, .tf-mark.is-live:hover .tf-flash { animation: tf-rapid-shot .3s linear infinite; } .tf-brand:hover .tf-mark.is-live .tf-soldier, .tf-mark.is-live:hover .tf-soldier { animation: tf-rapid-recoil .3s ease-out infinite; } .tf-brand:hover .tf-mark.is-live .tf-tracer, .tf-mark.is-live:hover .tf-tracer { animation: tf-rapid-tracer .3s linear infinite; } .tf-brand:hover .tf-mark.is-live :is(.tf-rim, .tf-lit), .tf-mark.is-live:hover :is(.tf-rim, .tf-lit) { animation: tf-rapid-glare .3s ease-out infinite; } .tf-brand:hover .tf-mark.is-live .tf-shell, .tf-mark.is-live:hover .tf-shell { animation: tf-rapid-shell .9s linear infinite; } .tf-brand:hover .tf-mark.is-live .tf-sh2, .tf-mark.is-live:hover .tf-sh2 { animation-delay: .3s; } .tf-brand:hover .tf-mark.is-live .tf-sh3, .tf-mark.is-live:hover .tf-sh3 { animation-delay: .6s; } /* Крило: + — угору (у локальних координатах лівого; праве віддзеркалене тим самим). */ @keyframes tf-feather { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.6deg); } } @keyframes tf-flap { 0%, 44%, 100% { transform: rotate(0deg); } 54% { transform: rotate(9deg); } 61% { transform: rotate(-4deg); } 68% { transform: rotate(2deg); } 76% { transform: rotate(0deg); } } @keyframes tf-flap-fast { 0%, 100% { transform: rotate(-2deg); } 45% { transform: rotate(8deg); } } @keyframes tf-unfold { 0% { transform: rotate(-62deg) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes tf-pop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: none; opacity: 1; } } /* Черга: три постріли за 0,4 с. */ @keyframes tf-shot { 0%, 59.8% { opacity: 0; transform: scale(.25) rotate(0deg); } 60.3% { opacity: 1; transform: scale(1.2) rotate(-7deg); } 61.9% { opacity: 0; transform: scale(.65) rotate(-7deg); } 63.3% { opacity: 0; transform: scale(.25) rotate(5deg); } 63.8% { opacity: 1; transform: scale(1) rotate(5deg); } 65.4% { opacity: 0; transform: scale(.6) rotate(5deg); } 66.8% { opacity: 0; transform: scale(.25) rotate(-2deg); } 67.3% { opacity: 1; transform: scale(1.3) rotate(-2deg); } 69.2%, 100% { opacity: 0; transform: scale(.7) rotate(-2deg); } } @keyframes tf-recoil { 0%, 59.9%, 62.6%, 66.1%, 69.8%, 100% { transform: none; } 60.4%, 63.9%, 67.4% { transform: translate(-2.6px, .8px) rotate(-1.6deg); } } @keyframes tf-tracer { 0%, 60.1% { opacity: 0; transform: translateX(0); } 60.4% { opacity: 1; transform: translateX(6px); } 61.6% { opacity: 1; transform: translateX(64px); } 61.9% { opacity: 0; transform: translateX(76px); } 63.6% { opacity: 0; transform: translateX(0); } 63.9% { opacity: 1; transform: translateX(6px); } 65.1% { opacity: 1; transform: translateX(64px); } 65.4% { opacity: 0; transform: translateX(76px); } 67.1% { opacity: 0; transform: translateX(0); } 67.4% { opacity: 1; transform: translateX(6px); } 68.6% { opacity: 1; transform: translateX(64px); } 68.9%, 100% { opacity: 0; transform: translateX(76px); } } @keyframes tf-shell { 0%, 60.2% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 60.6% { opacity: 1; transform: translate(1px, -5px) rotate(50deg); } 62.8% { opacity: 1; transform: translate(9px, -24px) rotate(260deg); } 65.6% { opacity: 1; transform: translate(17px, -10px) rotate(450deg); } 68.2%, 100% { opacity: 0; transform: translate(22px, 16px) rotate(610deg); } } @keyframes tf-glare { 0%, 59.9% { opacity: 0; } 60.4% { opacity: .85; } 62.4% { opacity: .1; } 63.9% { opacity: .8; } 65.9% { opacity: .1; } 67.4% { opacity: 1; } 70.5%, 100% { opacity: 0; } } @keyframes tf-shield-shine { 0%, 73% { transform: translateX(-60px); opacity: 0; } 76% { opacity: 1; } 90%, 100% { transform: translateX(160px); opacity: 0; } } /* Наведення: безперервний вогонь. */ @keyframes tf-rapid-shot { 0% { opacity: 1; transform: scale(1.15) rotate(-5deg); } 45% { opacity: 0; transform: scale(.6) rotate(4deg); } 100% { opacity: 0; transform: scale(.25); } } @keyframes tf-rapid-recoil { 0% { transform: translate(-2.6px, .8px) rotate(-1.6deg); } 60%, 100% { transform: none; } } @keyframes tf-rapid-tracer { 0% { opacity: 1; transform: translateX(6px); } 34% { opacity: 1; transform: translateX(64px); } 40%, 100% { opacity: 0; transform: translateX(76px); } } @keyframes tf-rapid-glare { 0% { opacity: .85; } 60%, 100% { opacity: .1; } } @keyframes tf-rapid-shell { 0% { opacity: 1; transform: translate(1px, -5px) rotate(50deg); } 30% { transform: translate(9px, -24px) rotate(260deg); } 65% { opacity: 1; transform: translate(17px, -10px) rotate(450deg); } 90%, 100% { opacity: 0; transform: translate(22px, 16px) rotate(610deg); } } /* Кузня: жар дихає, жарини здіймаються й гаснуть. */ @keyframes tf-forge { from { opacity: .35; transform: scale(.94); } to { opacity: .75; transform: scale(1.05); } } @keyframes tf-ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 10% { opacity: 1; } 55% { opacity: .85; transform: translate(var(--x, 0px), -78px) scale(.85); } 100% { opacity: 0; transform: translate(calc(var(--x, 0px) * -.5), -150px) scale(.3); } } @keyframes tf-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .6; } } /* ----- шапка ------------------------------------------------------------- */ .tf-top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } /* Скло шапки — на псевдоелементі, не на самій .tf-top: backdrop-filter робить * елемент контейнером для position: fixed, і шторка меню на телефоні * (fixed, на всю висоту) обрізалась до 72 px шапки разом із затемненням. */ .tf-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .tf-top-in { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); height: var(--top-h); display: flex; align-items: center; gap: 28px; } .tf-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; flex: none; } .tf-brand .tf-mark { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ember) 45%, transparent)); } .tf-brand-word { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; } /* Напис у шапці: після черги відблиск із щита (73–90% циклу знака) перебігає на літери — той самий цикл 6 с. */ @media (prefers-reduced-motion: no-preference) { .tf-top .tf-brand-word { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--text) 0 42%, #FFE7A6 47%, #F7B733 50%, #FFE7A6 53%, var(--text) 58% 100%); background-size: 320% 100%; background-position: 100% 0; animation: tf-word-glint 6s ease-in-out infinite; } } @keyframes tf-word-glint { 0%, 76% { background-position: 100% 0; } 94%, 100% { background-position: 0% 0; } } .tf-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; } .tf-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 14.5px; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; transition: color .15s, background-color .15s; } .tf-nav-link::-webkit-details-marker { display: none; } .tf-nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-nav-link.is-active { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); font-weight: 600; } .tf-nav-link.is-soon { cursor: default; opacity: .55; } .tf-nav-link.is-soon:hover { background: none; color: var(--ink-2); } .tf-nav-link em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .tf-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); display: inline-block; } .tf-more, .tf-user { position: relative; } .tf-more > summary, .tf-user > summary { list-style: none; } .tf-more > summary::-webkit-details-marker, .tf-user > summary::-webkit-details-marker { display: none; } .tf-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; z-index: 50; display: grid; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, white 2%); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8); } .tf-menu.is-right { left: auto; right: 0; } .tf-menu a, .tf-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; color: var(--text); text-decoration: none; font: 500 14px var(--font-body); background: none; border: 0; cursor: pointer; } .tf-menu a:hover, .tf-menu button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .tf-menu .is-danger { color: #ff6b7d; } /* Пункти шапки, що переїхали в «Ще» (tf.js navFit), — як решта пунктів меню. */ .tf-menu > .tf-nav-link { display: flex; padding: 10px 12px; border-radius: 9px; color: var(--text); font: 500 14px var(--font-body); } .tf-menu > .tf-nav-link.is-active { background: color-mix(in srgb, var(--text) 8%, transparent); font-weight: 600; } .tf-menu > .tf-nav-link.is-soon { color: var(--ink-2); } .tf-menu-sep { border: 0; height: 1px; margin: 5px 8px; background: color-mix(in srgb, var(--text) 9%, transparent); } .tf-top-right { display: flex; align-items: center; gap: 12px; flex: none; } .tf-online { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--role-pro) 11%, transparent); color: var(--role-pro); font-weight: 600; font-size: 13.5px; white-space: nowrap; } .tf-online i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: tf-pulse 1.8s ease-in-out infinite; } .tf-online.is-off { color: var(--ink-3); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-online.is-off i { animation: none; box-shadow: none; } .tf-online b { font-family: var(--font-mono); } @keyframes tf-pulse { 50% { opacity: .35; } } .tf-user > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-user > summary .avatar { width: 32px; height: 32px; } .tf-user-name { font-weight: 600; font-size: 14px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); background: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; } .tf-burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--text); } .tf-drawer-account, .tf-drawer-more { display: none; } /* ----- кнопки ------------------------------------------------------------ */ .tf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px; border: 1px solid transparent; font: 700 15.5px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .2s, background-color .2s, border-color .2s; } .tf-btn:hover { transform: translateY(-1px); } .tf-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .tf-btn-sm { padding: 9px 16px; border-radius: 11px; font-size: 14px; } .tf-btn-gold { color: var(--on-accent); background: linear-gradient(180deg, var(--gold-hi), var(--accent)); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } .tf-btn-gold:hover { box-shadow: 0 14px 38px -10px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.45); } .tf-btn-ghost { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); border-color: color-mix(in srgb, var(--text) 14%, transparent); } .tf-btn-ghost:hover { border-color: color-mix(in srgb, var(--text) 26%, transparent); } .tf-btn-soft { color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .tf-btn-soft:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } /* ----- заголовок сторінки (для всіх, крім головної) ---------------------- */ .tf-page-head { padding-block: 40px 20px; } .tf-page-head h1 { margin: 0; font-size: clamp(28px, calc(4vw * var(--vz)), 42px); font-weight: 900; } .tf-page-head p { margin: 8px 0 0; color: var(--ink-2); max-width: 62ch; } /* ----- секції ------------------------------------------------------------ */ .tf-section { padding-block: 32px; } .tf-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .tf-eyebrow { display: block; font: 700 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .tf-sec-head h2 { margin: 0; font-size: clamp(24px, calc(3vw * var(--vz)), 34px); font-weight: 700; } .tf-link { color: var(--ink-2); font-weight: 600; text-decoration: none; } .tf-link:hover { color: var(--text); } .tf-panel { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 22px; padding: 26px; } .tf-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .tf-panel-head h3 { margin: 0; font-size: 20px; font-weight: 700; } .tf-count { padding: 3px 10px; border-radius: 999px; font: 700 13px var(--font-mono); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } /* ----- ролі: колір ніка, кільце аватарки, бейдж -------------------------- */ .role-owner { --role: var(--role-owner); } .role-admin { --role: var(--role-admin); } .role-supreme { --role: var(--role-supreme); } .role-boss { --role: var(--role-boss); } .role-pro, .role-night { --role: var(--role-pro); } .tf-nick { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } [class*="role-"] .tf-nick, .tf-nick[class*="role-"] { color: var(--role); text-shadow: 0 0 18px color-mix(in srgb, var(--role) 45%, transparent); } .tf-ava { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--ink-2); font: 700 15px var(--font-body); overflow: hidden; } .tf-ava img { width: 100%; height: 100%; object-fit: cover; } [class*="role-"] > .tf-ava { box-shadow: 0 0 0 2px var(--role), 0 0 14px color-mix(in srgb, var(--role) 55%, transparent); } .tf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; flex: none; font: 800 10.5px var(--font-body); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); border: 1px solid color-mix(in srgb, var(--role) 45%, transparent); } .role-supreme .tf-badge, .tf-badge.role-supreme { background: linear-gradient(90deg, color-mix(in srgb, var(--role-supreme) 22%, transparent), color-mix(in srgb, var(--ember) 18%, transparent)); } .role-owner .tf-badge, .tf-badge.role-owner { box-shadow: 0 0 14px color-mix(in srgb, var(--role-owner) 35%, transparent); } /* Паки без зірочок (замовник, 2026-10-18): рівень видно з того, як живе колір, і що вищий пак — то багатше. * PRO — смарагдовий метал, відблиск раз на кілька секунд, рівне дихання світла. * BOSS — плазма: фіолет / пурпур / синій перетікають, двобарвне сяйво пульсує. * SUPREME — розплавлене золото з білим відблиском, вогняне сяйво й іскри довкола назви. * Назва — .tf-pk.pk-<ключ>, бейдж ролі — .role-<ключ> .tf-badge, картка магазину — .tf-spack.is-<ключ> * (рамкою біжить світло: @property --tf-pk-a). prefers-reduced-motion — усе статичне, кольори лишаються. */ @property --tf-pk-a { syntax: ""; inherits: false; initial-value: 0deg; } .tf-pk { color: var(--role); font-weight: 800; } .tf-pk.pk-pro { --role: var(--role-pro); } .tf-pk.pk-boss { --role: var(--role-boss); } .tf-pk.pk-supreme { --role: var(--role-supreme); } @media (prefers-reduced-motion: no-preference) { .tf-pk.pk-pro, .tf-pk.pk-boss, .tf-pk.pk-supreme { color: transparent; -webkit-background-clip: text; background-clip: text; } .tf-pk.pk-pro { background-image: linear-gradient(105deg, #1fae6a 0 38%, #b9ffd9 46%, #fff 50%, #b9ffd9 54%, #34e08a 62% 100%); background-size: 250% 100%; animation: tf-pk-sweep 4.5s ease-in-out infinite, tf-pk-pro 4.5s ease-in-out infinite; } .tf-pk.pk-boss { background-image: linear-gradient(90deg, #8f45ff, #e070ff, #5b7bff, #b14dff, #8f45ff); background-size: 300% 100%; animation: tf-pk-flow 3.2s linear infinite, tf-pk-boss 2.4s ease-in-out infinite; } .tf-pk.pk-supreme { position: relative; display: inline-block; background-image: linear-gradient(100deg, #b8650f 0, #ffb020 22%, #ffe7a6 40%, #fff 47%, #ffe7a6 54%, #ffc83d 68%, #d9821a 85%, #ffb020 100%); background-size: 260% 100%; animation: tf-pk-flow 2.4s linear infinite, tf-pk-supreme 1.8s ease-in-out infinite; } /* Іскри біля SUPREME — дві чотирипроменеві зірочки, що спалахують по черзі. */ .tf-pk.pk-supreme::before, .tf-pk.pk-supreme::after { content: "✦"; position: absolute; font-size: .42em; line-height: 1; color: #fff3c4; -webkit-text-fill-color: #fff3c4; text-shadow: 0 0 6px #ffc83d, 0 0 12px #ff9a1f; pointer-events: none; animation: tf-pk-spark 2.4s ease-in-out infinite; } .tf-pk.pk-supreme::before { left: -.45em; top: -.15em; } .tf-pk.pk-supreme::after { right: -.5em; bottom: -.05em; animation-delay: -1.2s; } .role-pro .tf-badge, .tf-badge.role-pro { animation: tf-badge-pro 4.5s ease-in-out infinite; } .role-boss .tf-badge, .tf-badge.role-boss { background: linear-gradient(90deg, color-mix(in srgb, #8f45ff 30%, transparent), color-mix(in srgb, #e070ff 18%, transparent), color-mix(in srgb, #5b7bff 26%, transparent), color-mix(in srgb, #8f45ff 30%, transparent)) 0 0 / 300% 100%; animation: tf-pk-flow 3.2s linear infinite, tf-badge-boss 2.4s ease-in-out infinite; } .role-supreme .tf-badge, .tf-badge.role-supreme { color: #ffe7a6; background: linear-gradient(100deg, color-mix(in srgb, var(--role-supreme) 24%, transparent) 0 35%, color-mix(in srgb, #fff 45%, transparent) 50%, color-mix(in srgb, var(--role-supreme) 24%, transparent) 65% 100%) 0 0 / 300% 100%; animation: tf-pk-flow 2.4s linear infinite, tf-badge-supreme 1.8s ease-in-out infinite; } /* Картка паку в магазині: світло біжить рамкою (вузька дуга з conic-gradient під маскою). */ .tf-spack.is-pro, .tf-spack.is-boss, .tf-spack.is-supreme { isolation: isolate; } .tf-spack.is-pro::before, .tf-spack.is-boss::before, .tf-spack.is-supreme::before { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 3px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: tf-pk-spin var(--tf-pk-spin, 8s) linear infinite; } .tf-spack.is-pro::before { background: conic-gradient(from var(--tf-pk-a), transparent 0 78%, #34e08a 90%, #d6ffe9 96%, transparent 100%); } .tf-spack.is-pro { animation: tf-pk-card-pro 4.5s ease-in-out infinite; } .tf-spack.is-boss { --tf-pk-spin: 5s; animation: tf-pk-card-boss 2.4s ease-in-out infinite; } .tf-spack.is-boss::before { background: conic-gradient(from var(--tf-pk-a), transparent 0 30%, #e070ff 42%, transparent 50% 80%, #5b7bff 92%, transparent 100%); } .tf-spack.is-supreme { --tf-pk-spin: 3.6s; animation: tf-pk-card-supreme 1.8s ease-in-out infinite; } .tf-spack.is-supreme::before { padding: 3.5px; background: conic-gradient(from var(--tf-pk-a), #ffb020, #fff3c4 8%, #ff8a1f 18%, transparent 26% 46%, #ffc83d 54%, #fff 60%, #ff9a1f 68%, transparent 76% 96%, #ffb020); } .tf-spack.is-boss .tf-spack-stage::after { animation: tf-pk-floor 2.4s ease-in-out infinite; } .tf-spack.is-supreme .tf-spack-stage::after { animation: tf-pk-floor 1.8s ease-in-out infinite; } /* SUPREME: іскри здіймаються з-під моделі. */ .tf-spack.is-supreme .tf-spack-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 80%, #ffe7a6, transparent), radial-gradient(1.5px 1.5px at 35% 90%, #ffc83d, transparent), radial-gradient(2px 2px at 62% 85%, #fff3c4, transparent), radial-gradient(1.5px 1.5px at 78% 92%, #ffb020, transparent), radial-gradient(2.5px 2.5px at 50% 95%, #ffd76a, transparent), radial-gradient(1.5px 1.5px at 88% 78%, #ffe7a6, transparent); background-size: 100% 100%; animation: tf-pk-embers 3.2s linear infinite; } } @keyframes tf-pk-flow { from { background-position: 100% 0; } to { background-position: -50% 0; } } @keyframes tf-pk-sweep { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } } @keyframes tf-pk-spin { to { --tf-pk-a: 360deg; } } @keyframes tf-pk-pro { 0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--role-pro) 35%, transparent)); } 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--role-pro) 70%, transparent)); } } @keyframes tf-pk-boss { 0%, 100% { filter: drop-shadow(-1px 0 4px #e070ffaa) drop-shadow(1px 0 4px #5b7bff88); } 50% { filter: drop-shadow(-2px 0 10px #e070ffdd) drop-shadow(2px 0 12px #5b7bffcc); } } @keyframes tf-pk-supreme { 0%, 100% { filter: drop-shadow(0 0 4px #ffc83d99) drop-shadow(0 0 1px #fff8); } 50% { filter: drop-shadow(0 0 12px #ffc83d) drop-shadow(0 0 22px #ff8a1f99) drop-shadow(0 0 2px #fff); } } @keyframes tf-pk-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 70% { opacity: .2; transform: scale(.7) rotate(80deg); } } @keyframes tf-pk-card-supreme { 0%, 100% { box-shadow: 0 30px 90px -40px #ffc83daa, 0 0 0 0 transparent; } 50% { box-shadow: 0 30px 110px -30px #ffc83d, 0 0 40px -10px #ff8a1f88; } } @keyframes tf-pk-card-pro { 0%, 100% { box-shadow: 0 20px 70px -40px #34e08a99; } 50% { box-shadow: 0 24px 90px -30px #34e08acc, 0 0 30px -12px #34e08a88; } } @keyframes tf-pk-card-boss { 0%, 100% { box-shadow: -10px 24px 80px -40px #e070ffaa, 10px 24px 80px -40px #5b7bffaa; } 50% { box-shadow: -14px 28px 100px -28px #e070ff, 14px 28px 100px -28px #5b7bff, 0 0 34px -12px #b14dffaa; } } @keyframes tf-pk-floor { 0%, 100% { opacity: .7; transform: scaleX(.92); } 50% { opacity: 1; transform: scaleX(1.06); } } @keyframes tf-pk-embers { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-55%); opacity: 0; } } @keyframes tf-badge-pro { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 10px color-mix(in srgb, var(--role-pro) 45%, transparent); } } @keyframes tf-badge-boss { 0%, 100% { box-shadow: -2px 0 8px #e070ff44, 2px 0 8px #5b7bff44; } 50% { box-shadow: -3px 0 16px #e070ff88, 3px 0 16px #5b7bff88; } } @keyframes tf-badge-supreme { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--role-supreme) 45%, transparent); } 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--role-supreme) 85%, transparent), 0 0 4px #fff6; } } /* ----- hero -------------------------------------------------------------- */ .tf-hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .tf-hero-sub { color: var(--ink-2); font-size: 18.5px; line-height: 1.55; max-width: 52ch; margin: 0 0 30px; } .tf-hero-sub b { color: var(--text); } .tf-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .tf-ip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); color: var(--ink-2); font: 500 14.5px var(--font-mono); cursor: pointer; } .tf-ip:hover { color: var(--text); border-color: var(--accent); } .tf-ip svg { width: 16px; height: 16px; color: var(--accent); } .tf-moon { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset -4px -1px 0 0 currentColor; transform: rotate(-20deg); } /* ----- картка сервера (у hero й у сітці) --------------------------------- */ .tf-srv-live { position: absolute; left: 18px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(7, 8, 12, .7); backdrop-filter: blur(6px); font: 700 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .tf-srv-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--role-pro); box-shadow: 0 0 10px var(--role-pro); animation: tf-pulse 1.4s infinite; } .tf-srv-live.is-off i { background: var(--ink-3); box-shadow: none; animation: none; } .tf-srv-live .map { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-2); } .tf-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; } .tf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--role-pro), var(--accent)); } /* ----- топ і «хто був сьогодні» ----------------------------------------- */ .tf-duo { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; } .tf-rows { display: grid; gap: 4px; } .tf-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; min-width: 0; color: inherit; text-decoration: none; } a.tf-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .tf-row.is-first { background: linear-gradient(90deg, color-mix(in srgb, var(--role-supreme) 12%, transparent), transparent 80%); } .tf-rank { width: 26px; text-align: center; font: 900 18px var(--font-display); color: var(--ink-3); flex: none; } .tf-rank.r1 { color: #ffc83d; } .tf-rank.r2 { color: #c9d2e3; } .tf-rank.r3 { color: #e08a4b; } .tf-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .tf-num { font: 700 15px var(--font-mono); font-variant-numeric: tabular-nums; flex: none; } .tf-dim { color: var(--ink-3); font: 500 13px var(--font-mono); flex: none; } .tf-kd { color: var(--ink-2); font: 500 13px var(--font-mono); flex: none; } .tf-kill { height: 14px; opacity: .7; flex: none; } .tf-when { font-size: 13px; color: var(--ink-3); flex: none; } .tf-when.is-live { color: var(--role-pro); font-weight: 600; } /* Скільки зіграно сьогодні — у «Хто був сьогодні» (головна й вікно /who/), 2026-10-09. */ .tf-played { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 7px; border-radius: 999px; font: 600 12px var(--font-mono); color: var(--ink-2); background: color-mix(in srgb, var(--text) 6%, transparent); white-space: nowrap; } .tf-played svg { opacity: .7; } /* Пінг живого гравця з RCON status (poll_servers.mark_bots) — у «Зараз у грі», 2026-10-09. */ .tf-ping { font: 600 11.5px var(--font-mono); font-style: normal; margin-left: 6px; white-space: nowrap; } .tf-ping.is-good { color: var(--role-pro); } .tf-ping.is-mid { color: var(--role-supreme); } .tf-ping.is-bad { color: #ff6b6b; } .tf-empty { color: var(--ink-3); padding: 18px 12px; } .tf-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); margin-left: auto; } .tf-tabs button { border: 0; background: none; color: var(--ink-3); font: 600 13px var(--font-body); padding: 7px 12px; border-radius: 8px; cursor: pointer; } .tf-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--text) 10%, var(--surface)); color: var(--text); } /* ----- новини ------------------------------------------------------------ */ .tf-news { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; } .tf-news-card { position: relative; overflow: hidden; border-radius: 22px; min-height: 240px; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); text-decoration: none; } .tf-news-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .tf-news-card .bg { position: absolute; inset: 0; z-index: 0; object-fit: cover; width: 100%; height: 100%; opacity: .35; } .tf-news-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, var(--surface) 90%); z-index: 0; } .tf-news-card > *:not(.bg) { position: relative; z-index: 1; } .tf-news-card .kind { align-self: flex-start; font: 800 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-news-card h3 { margin: 0; font-size: 20px; line-height: 1.25; } .tf-news-card p { margin: 0; color: var(--ink-2); font-size: 14px; } /* ----- підвал ------------------------------------------------------------ */ .tf-foot { margin-top: 48px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); background: color-mix(in srgb, var(--bg) 70%, black); } .tf-foot-in { max-width: var(--wrap); margin-inline: auto; padding: 48px var(--gutter) 32px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } .tf-foot-brand p { color: var(--ink-2); max-width: 40ch; margin: 16px 0; line-height: 1.6; } .tf-foot-col { display: grid; gap: 10px; align-content: start; } .tf-foot-col b { font: 700 13px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .tf-foot-col a { color: var(--ink-2); text-decoration: none; } .tf-foot-col a:hover { color: var(--text); } .tf-social { display: flex; gap: 8px; } .tf-social a, .tf-social span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-social svg { width: 18px; height: 18px; } .tf-social .is-soon { opacity: .4; } .tf-foot-base { max-width: var(--wrap); margin-inline: auto; padding: 18px var(--gutter) 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--text) 5%, transparent); } /* ----- адаптив ----------------------------------------------------------- */ @media (max-width: 1180px) { .tf-nav-link { padding: 9px 10px; } .tf-online { display: none; } } @media (max-width: 1024px) { .tf-burger { display: inline-flex; } .tf-nav-links { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, calc(86vw * var(--vz))); z-index: 60; flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-right: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; } .tf-nav-links.is-open { transform: none; } .tf-nav-link { padding: 12px 14px; font-size: 16px; } .tf-more { display: none; } .tf-drawer-more { display: grid; gap: 4px; } .tf-drawer-account { display: grid; gap: 4px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); margin-top: 8px; padding-top: 8px; } .tf-top .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; } .tf-top .scrim.is-open { opacity: 1; pointer-events: auto; } .tf-top-right { margin-left: auto; } .tf-duo { grid-template-columns: 1fr; } .tf-news { grid-template-columns: 1fr; } .tf-foot-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .tf-brand-word { display: none; } .tf-user-name { display: none; } .tf-hero-sub { font-size: 16.5px; } .tf-foot-in { grid-template-columns: 1fr; } .tf-kd, .tf-dim.hide-xs { display: none; } .tf-panel { padding: 20px 16px; } } @media (prefers-reduced-motion: reduce) { .tf-mark *, .tf-online i, .tf-srv-live i { animation: none !important; } .tf-hero-canvas { display: none; } } /* ----- вхід / реєстрація / відновлення ----------------------------------- */ .tf-auth { position: relative; overflow: hidden; isolation: isolate; min-height: calc(calc(100vh * var(--vz)) - var(--top-h)); display: flex; align-items: center; } .tf-auth::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(800px 600px at 22% 50%, color-mix(in srgb, var(--ember) 20%, transparent), transparent 70%); } .tf-auth-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: center; padding-block: 56px; } .tf-auth-brand { display: grid; gap: 22px; justify-items: start; } .tf-auth-mark { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--ember) 55%, transparent)); } .tf-auth-brand h2 { margin: 0; font-size: clamp(30px, calc(4vw * var(--vz)), 48px); font-weight: 900; line-height: 1.05; } .tf-auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--ink-2); font-size: 16px; } .tf-auth-perks li { display: flex; gap: 12px; } .tf-auth-perks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-hi), var(--ember)); } .tf-auth-perks b { color: var(--text); } .tf-auth-card { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 26px; padding: 36px; box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); display: grid; gap: 18px; } .tf-auth-card h1 { margin: 0; font-size: 30px; font-weight: 900; } .tf-auth-lead { margin: -6px 0 0; color: var(--ink-2); line-height: 1.55; } .tf-auth-lead a, .tf-fine a { color: var(--accent); font-weight: 600; text-decoration: none; } .tf-auth-lead a:hover, .tf-fine a:hover { text-decoration: underline; } .tf-fine { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; } .tf-auth-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-auth-icon.is-ok { color: var(--role-pro); background: color-mix(in srgb, var(--role-pro) 14%, transparent); } .tf-auth-icon.is-bad { color: #ff6b7d; background: color-mix(in srgb, #ff6b7d 14%, transparent); } .tf-btn-block { width: 100%; } .tf-btn-google { color: #1f1f1f; background: #fff; font-weight: 600; } .tf-btn-google:hover { box-shadow: 0 10px 30px -12px rgba(255,255,255,.35); } .tf-btn-google.is-disabled { opacity: .5; cursor: not-allowed; transform: none; } .tf-btn-google em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; background: #eee; color: #555; } .tf-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; } .tf-or::before, .tf-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 10%, transparent); } .tf-form { display: grid; gap: 16px; } .tf-field { display: grid; gap: 7px; } .tf-field label { font-weight: 600; font-size: 14px; } .tf-field input { width: 100%; padding: 13px 15px; border-radius: 12px; font: 500 15.5px var(--font-body); color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 13%, transparent); outline: none; transition: border-color .15s, box-shadow .15s; } .tf-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .tf-field.has-error input { border-color: #ff6b7d; } .tf-hint { color: var(--ink-3); font-size: 13px; } .tf-errors { list-style: none; margin: 0; padding: 0; color: #ff8593; font-size: 13.5px; display: grid; gap: 4px; } .tf-form-row { display: flex; justify-content: flex-end; margin-top: -6px; } .tf-link-sm { color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; } .tf-link-sm:hover { color: var(--accent); } .tf-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; } .tf-strength i { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background-color .2s; } .tf-strength span { font-size: 12.5px; color: var(--ink-3); margin-left: 6px; white-space: nowrap; } .tf-strength[data-level="1"] i:nth-child(-n+1) { background: #ff6b7d; } .tf-strength[data-level="2"] i:nth-child(-n+2) { background: var(--warn, #f5a524); } .tf-strength[data-level="3"] i:nth-child(-n+3) { background: var(--accent); } .tf-strength[data-level="4"] i:nth-child(-n+4) { background: var(--role-pro); } @media (max-width: 1024px) { .tf-auth-in { grid-template-columns: 1fr; gap: 28px; padding-block: 32px 48px; } .tf-auth-brand { justify-items: center; text-align: center; } .tf-auth-perks { display: none; } .tf-auth-mark { width: 88px; height: 88px; } .tf-auth-card { padding: 26px 20px; } } /* ----- картка гравця (профіль) ------------------------------------------- */ .tf-pc:not([class*="role-"]), .tf-packrow:not([class*="role-"]) { --role: var(--accent); } .tf-pc { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-pc::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 420px at 12% 20%, color-mix(in srgb, var(--role) 22%, transparent), transparent 70%), radial-gradient(600px 380px at 90% 100%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-pc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .tf-pc-banner { width: 100%; height: 100%; object-fit: cover; opacity: .28; } .tf-pc-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, var(--bg)); } .tf-pc-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: center; padding-block: 56px 28px; } .tf-pc-ava { position: relative; width: 148px; height: 148px; border-radius: 36px; flex: none; background: linear-gradient(145deg, var(--role), color-mix(in srgb, var(--role) 20%, var(--ember))); padding: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--role) 40%, transparent), 0 20px 60px -16px color-mix(in srgb, var(--role) 70%, transparent); } .tf-pc-ava img, .tf-pc-ava > span { width: 100%; height: 100%; border-radius: 33px; object-fit: cover; display: grid; place-items: center; background: var(--surface); font: 900 58px var(--font-display); color: var(--role); } .tf-pc-dot { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--role-pro); border: 5px solid var(--bg); box-shadow: 0 0 16px var(--role-pro); animation: tf-pulse 1.6s infinite; } .tf-pc-id { display: grid; gap: 12px; min-width: 0; justify-items: start; } .tf-pc-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tf-pc-tags .tf-badge { font-size: 11.5px; padding: 5px 10px; } .tf-lvl { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; font: 900 13px var(--font-display); color: var(--on-accent); background: var(--lvl, var(--accent)); } .s-low { --lvl: #8a93a6; } .s-mid { --lvl: #3fb6ff; } .s-high { --lvl: #34e08a; } .s-pro { --lvl: #a45bff; } .s-god { --lvl: #ffc83d; } .tf-pc-place { font: 700 13px var(--font-mono); color: var(--text); padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); } .tf-pc-place small { color: var(--ink-3); font-weight: 500; } .tf-pc-guest { font-size: 12.5px; color: var(--ink-3); padding: 4px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); } .tf-pc-name { margin: 0; font-size: clamp(30px, calc(4.6vw * var(--vz)), 56px); font-weight: 900; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--text); } .tf-pc[class*="role-"] .tf-pc-name { color: var(--role); text-shadow: 0 0 40px color-mix(in srgb, var(--role) 40%, transparent); } .tf-pc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--ink-2); font-size: 14px; } .tf-pc-meta a { color: var(--ink-2); text-decoration: none; font-weight: 600; } .tf-pc-meta a:hover { color: var(--text); } .tf-pc-meta > span { display: inline-flex; align-items: center; gap: 7px; } .tf-pc-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; } .tf-pc-sid { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); font: 500 13.5px var(--font-mono); } .tf-pc-sid svg { width: 14px; height: 14px; opacity: .6; } .tf-pc-sid:hover { color: var(--text); } .tf-pc-now { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--role-pro); background: color-mix(in srgb, var(--role-pro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--role-pro) 35%, transparent); text-decoration: none; } .tf-pc-now i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: tf-pulse 1.4s infinite; } .tf-pc-now b { font-family: var(--font-mono); font-weight: 600; } .tf-pc-now.is-off { color: var(--ink-2); background: color-mix(in srgb, var(--text) 5%, transparent); border-color: color-mix(in srgb, var(--text) 10%, transparent); } .tf-pc-now.is-off i { background: var(--ink-3); box-shadow: none; animation: none; } .tf-pc-bio { margin: 0; color: var(--ink-2); max-width: 64ch; line-height: 1.6; } .tf-pc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .tf-pc-actions:empty { display: none; } .tf-pc-actions form { margin: 0; } .tf-pc-actions .tf-btn svg { flex: none; } .tf-ring-card { position: relative; display: grid; justify-items: center; gap: 10px; padding: 20px 22px; border-radius: 24px; width: 200px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-ring { width: 128px; height: 128px; rotate: -90deg; } .tf-ring circle { fill: none; stroke-width: 9; } .tf-ring-track { stroke: color-mix(in srgb, var(--text) 8%, transparent); } .tf-ring-fill { stroke: var(--lvl, var(--accent)); stroke-linecap: round; stroke-dasharray: var(--p) 100; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lvl, var(--accent)) 70%, transparent)); } .tf-ring-mid { position: absolute; top: 20px; width: 128px; height: 128px; display: grid; place-content: center; text-align: center; } .tf-ring-mid b { font: 900 38px var(--font-display); line-height: 1; } .tf-ring-mid span { font: 600 13px var(--font-mono); color: var(--ink-2); margin-top: 4px; } .tf-ring-card p { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; } .tf-ring-card p b { color: var(--text); font-family: var(--font-mono); } .tf-pc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 28px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-pc-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px 20px; background: color-mix(in srgb, var(--surface) 92%, transparent); } .tf-pc-facts svg { grid-row: span 2; width: 22px; height: 22px; color: var(--accent); } .tf-pc-facts span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .tf-pc-facts b { font: 700 16px var(--font-body); } .tf-prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 24px; } .tf-note { padding: 14px 18px; border-radius: 14px; color: var(--ink-2); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .tf-note b { color: var(--text); } .tf-note a { color: var(--accent); font-weight: 600; } .tf-note.is-warn { background: color-mix(in srgb, var(--ember) 10%, transparent); border-color: color-mix(in srgb, var(--ember) 40%, transparent); } .tf-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); justify-self: start; border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-seg a { padding: 8px 14px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; text-decoration: none; } .tf-seg a:hover { color: var(--text); } .tf-seg a[aria-current] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .tf-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .tf-kpi { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-kpi span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .tf-kpi b { font: 900 28px var(--font-display); line-height: 1.1; font-variant-numeric: tabular-nums; } .tf-kpi b em { font: 600 14px var(--font-body); font-style: normal; color: var(--ink-2); margin-left: 4px; } .tf-kpi small { color: var(--ink-2); font-size: 13px; } .tf-kpi img { position: absolute; right: 14px; top: 16px; height: 18px; opacity: .25; filter: invert(1); } .tf-kpi.is-gold { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .tf-kpi.is-gold b { color: var(--accent); } .tf-kpi b.is-up { color: var(--role-pro); } .tf-kpi b.is-down { color: #ff8a6b; } .tf-prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; } .tf-prof-main, .tf-prof-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; } .tf-prof .tf-panel-head .tf-dim { margin-left: auto; font-family: var(--font-body); } .tf-srvtime { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .tf-srvtime-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 14px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid transparent; transition: border-color .15s; } .tf-srvtime-row:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .tf-srvtime-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .tf-srvtime-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .tf-srvtime-top b { font: 700 16px var(--font-mono); flex: none; color: var(--accent); } .tf-srvtime-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-3); } .tf-srvtime-sub span:last-child { margin-left: auto; } .tf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--role-pro); box-shadow: 0 0 10px var(--role-pro); flex: none; animation: tf-pulse 1.4s infinite; } .tf-sides { display: grid; gap: 8px; margin-bottom: 18px; } .tf-sides-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 3px; background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-sides-bar i { display: block; min-width: 4px; } .tf-sides-bar .ct { flex: var(--ct) 1 0; background: linear-gradient(90deg, #2f6bff, #5ab0ff); } .tf-sides-bar .t { flex: var(--t) 1 0; background: linear-gradient(90deg, #ffb13b, #ff5e2b); } .tf-sides-legend { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); } .tf-sides-legend b { font-family: var(--font-mono); color: var(--text); } .tf-sides-legend .ct { color: #7ab8ff; } .tf-sides-legend .t { color: #ffae6b; } .tf-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; } .tf-mini > div { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-mini dt { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; } .tf-mini dd { margin: 0; font: 700 17px var(--font-mono); } .tf-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .tf-map { position: relative; overflow: hidden; border-radius: 16px; min-height: 176px; display: flex; align-items: flex-end; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), #0b0d13; border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-map img { position: absolute; left: 50%; top: 8px; translate: -50% 0; height: 118px; width: auto; opacity: .75; filter: saturate(.8); } .tf-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, color-mix(in srgb, var(--surface) 96%, transparent) 72%); } .tf-map-body { position: relative; z-index: 1; display: grid; gap: 4px; padding: 14px 16px; width: 100%; } .tf-map-body > b { font: 700 15px var(--font-mono); } .tf-map-body > span { font-size: 12.5px; color: var(--ink-3); } .tf-map-nums { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); } .tf-map-nums b { font-family: var(--font-mono); color: var(--text); } .tf-heat { display: grid; grid-template-columns: 26px repeat(var(--w, 20), minmax(0, 1fr)); gap: 4px; } .tf-heat-days, .tf-heat-col { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 4px; } .tf-heat-days span { font-size: 10.5px; color: var(--ink-3); display: flex; align-items: center; } .tf-heat i { display: block; width: 100%; aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-heat-key i { display: block; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-heat i.l-1 { background: none; } .tf-heat i.l1, .tf-heat-key .l1 { background: color-mix(in srgb, var(--ember) 30%, transparent); } .tf-heat i.l2, .tf-heat-key .l2 { background: color-mix(in srgb, var(--ember) 55%, transparent); } .tf-heat i.l3, .tf-heat-key .l3 { background: color-mix(in srgb, var(--accent) 80%, var(--ember)); } .tf-heat i.l4, .tf-heat-key .l4 { background: var(--gold-hi); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); } .tf-heat-key { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--ink-3); } .tf-heat-key span { margin: 0 4px; } .tf-matches { display: grid; gap: 6px; } .tf-match { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, transparent); border-left: 3px solid var(--res); --res: var(--ink-3); } .tf-match.is-win { --res: var(--role-pro); } .tf-match.is-lose { --res: #ff5d73; } .tf-match-res { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font: 900 13px var(--font-display); color: var(--res); background: color-mix(in srgb, var(--res) 14%, transparent); } .tf-match-map { width: 44px; height: 44px; border-radius: 10px; flex: none; background: #0b0d13 center / 90% no-repeat; } .tf-match-who { display: grid; min-width: 0; flex: 1; } .tf-match-who b { font: 600 14px var(--font-mono); } .tf-match-who span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-match-kd { font: 500 14px var(--font-mono); color: var(--ink-2); flex: none; } .tf-match-kd b { color: var(--text); } .tf-match-kd small { color: var(--accent); margin-left: 6px; } .tf-prof-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding-block: 48px; } .tf-prof-empty svg { width: 44px; height: 44px; color: var(--accent); } .tf-prof-empty h3 { margin: 0; } .tf-prof-empty p { margin: 0; color: var(--ink-2); max-width: 44ch; } .tf-packlist { display: grid; gap: 8px; margin-bottom: 14px; } .tf-packrow { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--role) 12%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--role) 26%, transparent); } .tf-packrow > div { display: grid; min-width: 0; } .tf-packrow-srv { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-packrow-left { font-size: 12.5px; color: var(--ink-2); } .tf-prof-side .tf-panel > .tf-btn-block { width: 100%; } .tf-ach { display: grid; gap: 6px; } .tf-ach-item { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; opacity: .55; } .tf-ach-item.is-got { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); } .tf-ach-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--ink-2); } .tf-ach-item.is-got .tf-ach-ico { color: var(--on-accent); background: linear-gradient(145deg, var(--gold-hi), var(--ember)); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--ember) 70%, transparent); } .tf-ach-ico svg { width: 22px; height: 22px; } .tf-ach-ico img { max-width: 30px; max-height: 20px; filter: invert(1) brightness(.8); } .tf-ach-item.is-got .tf-ach-ico img { filter: brightness(0) opacity(.8); } .tf-ach-txt { display: grid; gap: 2px; min-width: 0; flex: 1; } .tf-ach-txt b { font-size: 14px; } .tf-ach-txt span { font-size: 12.5px; color: var(--ink-3); } .tf-ach-txt .tf-bar { height: 4px; margin-top: 5px; } .tf-ach-lock { width: 15px; height: 15px; color: var(--ink-3); flex: none; } .tf-rep { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; color: var(--ink-2); } .tf-rep svg { width: 22px; height: 22px; flex: none; } .tf-rep.is-ok svg { color: var(--role-pro); } .tf-rep.is-bad b { color: #ff8593; } .tf-grants { display: grid; gap: 6px; } .tf-grant { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); color: inherit; text-decoration: none; } .tf-grant > div { display: grid; min-width: 0; } .tf-grant b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-grant span { font-size: 12.5px; color: var(--ink-3); } .tf-grant em { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px; flex: none; color: var(--ink-3); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-grant em.is-on { color: var(--role-pro); background: color-mix(in srgb, var(--role-pro) 12%, transparent); } .tf-grant em.is-wait { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-grant.is-off { opacity: .6; } #moderation, #steam-link, #giveaway, #crew, #apply, #my { scroll-margin-top: calc(var(--top-h) + 16px); } @media (max-width: 1180px) { .tf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-prof-grid { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 1024px) { .tf-pc-in { grid-template-columns: auto minmax(0, 1fr); gap: 24px; padding-block: 36px 24px; } .tf-ring-card { grid-column: 1 / -1; width: auto; grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 18px; } .tf-ring-card .tf-ring { width: 88px; height: 88px; grid-row: span 2; } .tf-ring-mid { top: 20px; left: 22px; width: 88px; height: 88px; } .tf-ring-mid b { font-size: 26px; } .tf-ring-mid span { font-size: 11px; } .tf-ring-card p { text-align: left; font-size: 14px; grid-column: 2; grid-row: 1; align-self: center; } .tf-ring-card .tf-ring { grid-column: 1; grid-row: 1; } .tf-pc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-prof-grid { grid-template-columns: minmax(0, 1fr); } .tf-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tf-pc-in { grid-template-columns: 1fr; justify-items: start; } .tf-pc-ava { width: 104px; height: 104px; border-radius: 28px; } .tf-pc-ava img, .tf-pc-ava > span { border-radius: 25px; font-size: 42px; } .tf-pc-facts > div { padding: 12px 14px; } .tf-pc-facts b { font-size: 14.5px; } .tf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-kpi { padding: 14px 16px; } .tf-kpi b { font-size: 22px; } .tf-srvtime-sub span:last-child { margin-left: 0; } .tf-match-map { display: none; } .tf-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-map { min-height: 150px; } .tf-map img { height: 92px; } .tf-map-nums { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .tf-pc-dot, .tf-pc-now i, .tf-live-dot { animation: none !important; } } @media (max-width: 560px) { .tf-heat { gap: 2px; grid-template-columns: 22px repeat(var(--w, 20), minmax(0, 1fr)); } .tf-heat-col { gap: 2px; } .tf-heat i { border-radius: 2px; } } /* ========================================================================== Редизайн v2 (2026-09-30): рух, фактура, головна з моделями з гри ========================================================================== */ /* ----- фактура й переходи між сторінками --------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } /* Поява при прокрутці: вмикається, лише коли JS живий (клас на ). */ .js-motion [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); } .js-motion [data-reveal].is-in { opacity: 1; translate: 0 0; } /* Відблиск на золотій кнопці — раз на кілька секунд, як іскра по металу. */ .tf-btn-shine { position: relative; overflow: hidden; isolation: isolate; } .tf-btn-shine::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); translate: -120% 0; animation: tf-shine 4.5s ease-in-out infinite; } @keyframes tf-shine { 0%, 62% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } } [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease; will-change: transform; } /* ----- hero з моделями --------------------------------------------------- */ @keyframes tf-float { 50% { translate: 0 -10px; } } .tf-ticker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 36px; border-radius: 20px; overflow: hidden; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); backdrop-filter: blur(10px); } .tf-tick { display: grid; gap: 4px; padding: 18px 24px; border-left: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-tick:first-child { border-left: 0; } .tf-tick b { font: 900 30px var(--font-display); line-height: 1; font-variant-numeric: tabular-nums; } .tf-tick span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; } .tf-tick.is-live b { color: var(--role-pro); } .tf-tick.is-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--role-pro); box-shadow: 0 0 8px var(--role-pro); animation: tf-pulse 1.6s infinite; } /* ----- твоя кузня / три кроки -------------------------------------------- */ .tf-me { --role: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: 40px; padding: 20px 24px; border-radius: 24px; background: linear-gradient(100deg, color-mix(in srgb, var(--role) 12%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--role) 30%, transparent); } .tf-me-id { display: flex; gap: 14px; align-items: center; min-width: 0; } .tf-me-id > div { display: grid; gap: 2px; justify-items: start; min-width: 0; } .tf-me-id .tf-eyebrow { margin: 0; } .tf-me-ava { width: 60px; height: 60px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--surface); font: 900 24px var(--font-display); color: var(--role); box-shadow: 0 0 0 2px var(--role), 0 0 24px color-mix(in srgb, var(--role) 45%, transparent); } .tf-me-ava img { width: 100%; height: 100%; object-fit: cover; } .tf-me-name { font: 800 18px var(--font-display); color: var(--role); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-me-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; } .tf-me-stats > div { display: grid; gap: 2px; } .tf-me-stats span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .tf-me-stats b { font: 800 20px var(--font-display); } .tf-me-stats b.is-gold { color: var(--accent); } .tf-me-stats b.is-dim { color: var(--ink-3); font-size: 16px; } .tf-me-stats small { font-size: 12px; color: var(--ink-2); } .tf-me-stats .tf-lvl { font-size: 14px; height: 30px; } .tf-me-note { margin: 0; color: var(--ink-2); } .tf-me-cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .tf-steps { margin-top: 40px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 28px; align-items: center; padding: 26px 28px; border-radius: 24px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-steps-head h2 { margin: 0; font-size: 24px; } .tf-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .tf-steps li { display: flex; gap: 14px; align-items: flex-start; } .tf-steps li > b { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 900 16px var(--font-display); color: var(--on-accent); background: linear-gradient(145deg, var(--gold-hi), var(--ember)); } .tf-steps h3 { margin: 0 0 4px; font-size: 15px; } .tf-steps p { margin: 0 0 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } .tf-steps code { font: 500 12.5px var(--font-mono); color: var(--accent); cursor: pointer; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 6px; } /* ----- сервери v2: моделі режиму «виходять» з картки --------------------- */ .tf-srv2-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tf-srv2-tags .tf-srv-live { position: static; } .tf-mode { padding: 5px 11px; border-radius: 999px; font: 800 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mode); background: color-mix(in srgb, var(--mode) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mode) 40%, transparent); } /* ----- підказка кольорів ролей ------------------------------------------- */ .tf-legend-tip { position: relative; margin-left: 6px; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; cursor: help; font: 700 12px var(--font-body); color: var(--ink-3); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); } .tf-legend-pop { position: absolute; top: calc(100% + 8px); right: -10px; z-index: 20; display: none; flex-wrap: wrap; gap: 6px; width: 260px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, white 2%); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); } .tf-legend-tip:hover .tf-legend-pop, .tf-legend-tip:focus .tf-legend-pop { display: flex; } /* ----- паки v2: модель над карткою --------------------------------------- */ @media (max-width: 1024px) { .tf-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-tick:nth-child(3) { border-left: 0; } .tf-tick:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-me { grid-template-columns: 1fr; gap: 18px; } .tf-me-cta { justify-content: flex-start; } .tf-steps { grid-template-columns: 1fr; } .tf-steps ol { grid-template-columns: 1fr; } } @media (max-width: 560px) { .tf-tick { padding: 14px 16px; } .tf-tick b { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .tf-btn-shine::after, .tf-tick.is-live i { animation: none !important; } [data-tilt] { transform: none !important; } } /* ----- магазин v2 --------------------------------------------------------- */ .tf-shop-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-shop-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(800px 460px at 80% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(700px 420px at 10% 20%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 70%); } .tf-shop-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 56px 48px; } .tf-shop-hero h1 { margin: 10px 0 18px; font-size: clamp(38px, calc(5.4vw * var(--vz)), 72px); line-height: 1; font-weight: 900; letter-spacing: -0.02em; } .tf-shop-hero h1 .hot { background: linear-gradient(90deg, var(--gold-hi), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .tf-trust span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-trust svg { width: 16px; height: 16px; color: var(--accent); } .tf-trust .tf-moon { width: 12px; height: 12px; color: var(--role-pro); } .tf-shop-nav { display: flex; flex-wrap: wrap; gap: 4px; } .tf-shop-nav a { padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; } .tf-shop-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-fan { position: relative; height: 380px; } .tf-fan img { position: absolute; width: auto; transition: transform .35s ease-out; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)) drop-shadow(0 0 16px color-mix(in srgb, var(--ember) 25%, transparent)); } .tf-fan .f1 { width: 88%; right: 0; top: 34%; rotate: -8deg; z-index: 4; } .tf-fan .f2 { width: 92%; right: 4%; top: 6%; rotate: 6deg; z-index: 2; opacity: .9; } .tf-fan .f3 { width: 40%; left: 2%; bottom: 0; rotate: -14deg; z-index: 5; } .tf-fan .f4 { width: 46%; right: 2%; bottom: 2%; rotate: 16deg; z-index: 3; opacity: .85; } .tf-shop-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .tf-spack { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; scroll-margin-top: calc(var(--top-h) + 20px); background: linear-gradient(180deg, color-mix(in srgb, var(--role) 14%, var(--surface)), var(--surface) 50%); border: 1px solid color-mix(in srgb, var(--role) 30%, transparent); } .tf-spack.is-top { border-color: color-mix(in srgb, var(--role) 60%, transparent); box-shadow: 0 30px 90px -40px color-mix(in srgb, var(--role) 70%, transparent); } .tf-spack .ribbon { position: absolute; right: 16px; top: 16px; z-index: 4; padding: 4px 10px; border-radius: 8px; font: 800 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--role); } .tf-spack-stage { position: relative; height: 340px; overflow: hidden; background: radial-gradient(closest-side at 50% 62%, color-mix(in srgb, var(--role) 30%, transparent), transparent), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 4%, transparent) 31px 32px); } .tf-spack-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 14px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--role) 45%, transparent), transparent); filter: blur(4px); } .tf-spack-model { position: absolute; left: 50%; bottom: 22px; height: 300px; width: auto; translate: -50% 0; z-index: 2; opacity: 0; scale: .96; transition: opacity .35s ease, scale .35s ease; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--role) 40%, transparent)); } .tf-spack-model.is-on { opacity: 1; scale: 1; } .tf-side-switch { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); } .tf-side-switch button { border: 0; background: none; color: var(--ink-2); font: 800 12px var(--font-body); letter-spacing: .06em; padding: 6px 11px; border-radius: 7px; cursor: pointer; } .tf-side-switch button[aria-pressed="true"] { background: var(--role); color: var(--on-accent); } .tf-spack-body { display: grid; gap: 12px; padding: 18px 24px 24px; flex: 1; align-content: start; } .tf-spack h3 { margin: -6px 0 0; font-size: 32px; font-weight: 900; color: var(--role); text-shadow: 0 0 30px color-mix(in srgb, var(--role) 45%, transparent); } .tf-spack-tag { margin: -6px 0 0; color: var(--ink-2); font-size: 14px; } .tf-spack ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .tf-spack li { display: flex; gap: 10px; font-size: 14px; } .tf-spack li::before { content: ""; width: 6px; height: 6px; margin-top: 7px; border-radius: 2px; background: var(--role); transform: rotate(45deg); flex: none; } .tf-buy { display: grid; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-dur { display: flex; flex-wrap: wrap; gap: 6px; } .tf-dur button { position: relative; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: none; color: var(--ink-2); cursor: pointer; font: 700 13px var(--font-body); padding: 8px 12px; border-radius: 10px; } .tf-dur button[aria-checked="true"] { color: var(--text); border-color: var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); } .tf-dur em { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 5px; background: var(--ember); color: #fff; } .tf-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tf-buy-price { display: grid; } .tf-buy-price b { font: 900 30px var(--font-display); line-height: 1; } .tf-buy-price span { color: var(--ink-2); font-size: 14px; } .tf-buy-price small { color: var(--ink-3); font-size: 12.5px; } .tf-buy-soon { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); } .tf-buy-soon > b { font-size: 14px; } .tf-buy-soon span { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } .tf-buy-soon span b { color: var(--role); } .tf-buy-alt { margin: -4px 0 0; color: var(--ink-3); font-size: 12.5px; } .tf-buy code, .tf-faq code { font: 500 12.5px var(--font-mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 6px; } .tf-compare { overflow-x: auto; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); background: var(--surface); } .tf-compare table { width: 100%; border-collapse: collapse; min-width: 720px; } .tf-compare th, .tf-compare td { padding: 13px 18px; text-align: center; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-compare tbody th { text-align: left; font-weight: 500; color: var(--ink-2); } .tf-compare thead th { font: 900 17px var(--font-display); color: var(--role, var(--ink-2)); position: sticky; top: 0; background: var(--surface); } .tf-compare thead th span { display: block; font-size: 11px; letter-spacing: .2em; margin-bottom: 2px; } .tf-compare td { font: 600 14px var(--font-mono); color: var(--text); } .tf-compare td:not(.c-std) { background: color-mix(in srgb, var(--role) 5%, transparent); } .tf-compare .c-std { color: var(--ink-3); font-family: var(--font-body); } .tf-compare tbody tr:last-child > * { border-bottom: 0; } .tf-compare tbody tr:hover > * { background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-tabs button[aria-selected="true"] { color: var(--role, var(--text)); } .tf-skinset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: stretch; } .tf-skinset[hidden] { display: none; } .tf-pov { position: relative; margin: 0; border-radius: 22px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; justify-content: flex-end; background: linear-gradient(transparent 55%, rgba(0,0,0,.6)), url("../img/cs/art/menu.1e26a7723acd.webp") center / cover; border: 1px solid color-mix(in srgb, var(--role) 30%, transparent); } .tf-pov::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(3px) saturate(.6); } .tf-pov::after { content: ""; position: absolute; left: 50%; top: 45%; width: 22px; height: 22px; translate: -50% -50%; opacity: .8; background: linear-gradient(#5f5, #5f5) center / 2px 8px no-repeat, linear-gradient(90deg, #5f5, #5f5) center / 8px 2px no-repeat; } .tf-pov img { position: relative; z-index: 1; width: 78%; height: auto; display: block; } .tf-pov figcaption { position: absolute; left: 18px; top: 16px; z-index: 2; display: grid; gap: 2px; } .tf-pov figcaption b { font: 800 18px var(--font-display); color: var(--role); } .tf-pov figcaption span { font-size: 13px; color: var(--ink-2); } .tf-guns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tf-gun { margin: 0; position: relative; display: grid; place-items: center; min-height: 118px; padding: 16px 16px 30px; border-radius: 18px; background: radial-gradient(closest-side, color-mix(in srgb, var(--role) 22%, transparent), transparent), var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .2s, translate .2s; } .tf-gun:hover { border-color: color-mix(in srgb, var(--role) 45%, transparent); translate: 0 -2px; } .tf-gun img { max-width: 100%; max-height: 90px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); } .tf-gun figcaption, .tf-gun-cap { position: absolute; left: 14px; bottom: 10px; font: 700 12.5px var(--font-body); color: var(--ink-2); } .tf-note-sm { margin-top: 14px; font-family: var(--font-body); } .tf-models { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .tf-model { margin: 0; position: relative; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 14px 10px 12px; background: radial-gradient(closest-side at 50% 55%, color-mix(in srgb, var(--accent) 16%, transparent), transparent), var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-model img { height: 210px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)); } .tf-model figcaption, .tf-model-cap { display: grid; gap: 2px; text-align: center; margin-top: 8px; } .tf-model b { font-size: 14px; } .tf-model-cap span { font-size: 12px; color: var(--ink-3); } .tf-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tf-extra { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .2s; } a.tf-extra:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .tf-extra-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; font-size: 20px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .tf-extra-ico svg { width: 22px; height: 22px; } .tf-extra-body { display: grid; gap: 2px; min-width: 0; flex: 1; } .tf-extra-body b { font-size: 15px; } .tf-extra-body span { font-size: 13px; color: var(--ink-2); } .tf-extra-price { text-align: right; flex: none; color: var(--ink-2); font-size: 13px; } .tf-extra-price b { font: 900 22px var(--font-display); color: var(--text); } .tf-extra-price small { display: block; color: var(--ink-3); } .tf-extra.is-admin { grid-column: 1 / -1; border-style: dashed; } .tf-extra.is-admin .tf-extra-ico { background: color-mix(in srgb, var(--role-admin) 14%, transparent); color: var(--role-admin); } .tf-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tf-how-step { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-how-step b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font: 900 16px var(--font-display); color: var(--on-accent); background: linear-gradient(145deg, var(--gold-hi), var(--ember)); margin-bottom: 10px; } .tf-how-step h3 { margin: 0 0 6px; font-size: 16px; } .tf-how-step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; } .tf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-faq details { border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .tf-faq summary::-webkit-details-marker { display: none; } .tf-faq summary::after { content: "+"; color: var(--accent); font: 700 18px var(--font-body); transition: rotate .2s; } .tf-faq details[open] summary::after { rotate: 45deg; } .tf-faq p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); line-height: 1.6; } @media (max-width: 1180px) { .tf-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .tf-shop-hero-in { grid-template-columns: 1fr; } .tf-fan { height: 260px; } .tf-shop-packs { grid-template-columns: 1fr; } .tf-skinset { grid-template-columns: 1fr; } .tf-extras, .tf-how, .tf-faq { grid-template-columns: 1fr; } } @media (max-width: 560px) { .tf-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-model img { height: 170px; } .tf-guns { grid-template-columns: 1fr 1fr; } .tf-gun { min-height: 96px; } .tf-spack-stage { height: 300px; } .tf-spack-model { height: 262px; } .tf-fan { height: 200px; } } .tf-sec-head .tf-dim { flex: 0 1 auto; font-family: var(--font-body); } @media (max-width: 700px) { .tf-compare table { min-width: 0; table-layout: fixed; } .tf-compare .c-std { display: none; } .tf-compare tbody th { width: 40%; } .tf-compare th, .tf-compare td { padding: 10px 6px; font-size: 12.5px; overflow-wrap: anywhere; } .tf-compare thead th { font-size: 13px; } .tf-compare tbody th { padding-left: 12px; } } @media (max-width: 700px) { .tf-compare thead th { font-size: 11px; overflow-wrap: normal; letter-spacing: 0; } } /* ----- профіль v2: модель гравця в шапці ---------------------------------- */ .tf-pc-in { grid-template-columns: auto minmax(0, 1fr) 400px; align-items: end; padding-block: 40px 0; } .tf-pc-id { padding-bottom: 32px; } .tf-pc-ava { margin-bottom: 32px; } .tf-pc-stage { --hero: var(--accent); position: relative; height: 400px; align-self: end; } .tf-pc-floor { position: absolute; left: 10%; right: 10%; bottom: -6px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hero) 55%, transparent), transparent); filter: blur(4px); } .tf-pc-stage::before { content: ""; position: absolute; left: 50%; bottom: 10%; width: 110%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--hero) 26%, transparent), transparent 62%); } .tf-pc-model { position: absolute; left: 56%; bottom: 0; height: 100%; width: auto; translate: -50% 0; z-index: 1; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--hero) 45%, transparent)) drop-shadow(0 24px 24px rgba(0,0,0,.55)); } .tf-pc-model-cap { position: absolute; right: 0; bottom: 40px; z-index: 2; display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; text-align: right; font-size: 12px; color: var(--ink-2); background: rgba(7, 8, 12, .7); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--hero) 35%, transparent); } .tf-pc-model-cap b { font: 800 13.5px var(--font-body); color: var(--hero); } .tf-pc-stage .tf-ring-card { position: absolute; left: 0; top: 10px; z-index: 2; width: 150px; padding: 14px 12px; gap: 6px; } .tf-pc-stage .tf-ring { width: 96px; height: 96px; } .tf-pc-stage .tf-ring-mid { top: 14px; width: 96px; height: 96px; left: 50%; translate: -50% 0; } .tf-pc-stage .tf-ring-mid b { font-size: 28px; } .tf-pc-stage .tf-ring-mid span { font-size: 11px; } .tf-pc-stage .tf-ring-card p { font-size: 11.5px; } .tf-pc-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); position: relative; z-index: 2; } .tf-pc-facts b.is-gold { color: var(--accent); } .tf-srvtime-top .tf-mode { flex: none; font-size: 10.5px; padding: 3px 9px; } .tf-srvtime-top { justify-content: flex-start; } .tf-srvtime-top > b { margin-left: auto; } .tf-srvtime-sub .tf-lvl { height: 20px; min-width: 26px; font-size: 11px; padding: 0 6px; border-radius: 6px; margin-right: 4px; vertical-align: 1px; } .tf-anew { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .tf-anew svg { width: 22px; height: 22px; color: var(--accent); flex: none; } .tf-anew div { display: grid; } .tf-anew b { font-size: 15px; } .tf-anew span { font-size: 12.5px; color: var(--ink-2); } .tf-ownskins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-ownskin { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 16px; text-align: center; background: radial-gradient(closest-side at 50% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent), color-mix(in srgb, var(--text) 3%, transparent); } .tf-ownskin img { height: 120px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,0,0,.5)); } .tf-ownskin b { font-size: 13.5px; } .tf-ownskin span { font-size: 12px; color: var(--ink-3); } @media (max-width: 1180px) { .tf-pc-in { grid-template-columns: auto minmax(0, 1fr) 320px; } .tf-pc-stage { height: 340px; } } @media (max-width: 1024px) { .tf-pc-in { grid-template-columns: auto minmax(0, 1fr); } .tf-pc-stage { grid-column: 1 / -1; height: 320px; width: min(460px, 100%); justify-self: center; } .tf-pc-id, .tf-pc-ava { padding-bottom: 0; margin-bottom: 0; } } @media (max-width: 560px) { .tf-pc-stage { height: 290px; } .tf-pc-stage .tf-ring-card { width: 124px; padding: 10px 8px; } .tf-pc-stage .tf-ring { width: 80px; height: 80px; } .tf-pc-stage .tf-ring-mid { width: 80px; height: 80px; top: 10px; } .tf-pc-stage .tf-ring-mid b { font-size: 22px; } } @media (max-width: 1024px) { .tf-pc-stage .tf-ring-card { grid-column: auto; grid-template-columns: 1fr; justify-items: center; width: 140px; } .tf-pc-stage .tf-ring-card .tf-ring { grid-row: auto; } .tf-pc-stage .tf-ring-card p { grid-column: auto; grid-row: auto; text-align: center; font-size: 11px; } .tf-srvtime-top { flex-wrap: wrap; } .tf-srvtime-name { order: 3; flex-basis: 100%; white-space: normal; } } @media (max-width: 560px) { .tf-pc-in { grid-template-columns: 1fr; } .tf-pc-stage { width: 100%; } .tf-pc-stage .tf-ring-card { width: 120px; } .tf-pc-name { font-size: clamp(26px, calc(8vw * var(--vz)), 34px); } } /* ----- рейтинг v2 ---------------------------------------------------------- */ .tf-lb-hero { --mode: var(--accent); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-lb-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 380px at 82% 60%, color-mix(in srgb, var(--mode) 18%, transparent), transparent 70%), radial-gradient(600px 360px at 8% 10%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-lb-art { position: absolute; right: max(2%, calc(50% - 700px)); bottom: -6px; height: 100%; width: 420px; z-index: -1; pointer-events: none; } .tf-lb-art img { position: absolute; bottom: 0; height: 92%; width: auto; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--mode) 35%, transparent)); opacity: .9; } .tf-lb-art .l { left: 0; } .tf-lb-art .r { right: 0; scale: -1 1; height: 84%; filter: brightness(.7) drop-shadow(0 0 20px color-mix(in srgb, var(--mode) 35%, transparent)); } .tf-lb-hero-in { padding-block: 48px 36px; max-width: var(--wrap); } .tf-lb-hero h1 { margin: 8px 0 12px; font-size: clamp(34px, calc(5vw * var(--vz)), 60px); font-weight: 900; line-height: 1.02; } .tf-lb-hero .tf-hero-sub { max-width: 58ch; margin-bottom: 20px; font-size: 16.5px; } .tf-lb-one { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-weight: 700; } .tf-lb-servers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .tf-lb-servers a { padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-lb-servers a[aria-current] { color: var(--text); border-color: var(--mode); background: color-mix(in srgb, var(--mode) 14%, transparent); } .tf-lb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 820px; } .tf-lb-tools .tf-seg { justify-self: auto; } .tf-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .tf-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; } .tf-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: 500 14.5px var(--font-body); padding: 11px 0; } .tf-lb-tools select { padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text); font: 600 14px var(--font-body); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .tf-lb { display: grid; gap: 20px; padding-top: 28px; padding-bottom: 32px; } .tf-lb-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 18px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .tf-lb-me span { color: var(--ink-2); font-size: 14px; } .tf-lb-me b { font: 900 22px var(--font-display); color: var(--accent); } .tf-lb-me .tf-link { margin-left: auto; } /* Медаль місця 1–3 (partials/medal.html): SVG зі стрічкою й вінком, цифра — шрифтом сайту, відблиск біжить по металу * (маска тієї ж картинки). Розмір — --ms. Малює tools/art/medals/build_medals.py. */ .tf-medal { --ms: 64px; --mi: #6b4a08; position: relative; display: inline-block; flex: none; width: var(--ms); aspect-ratio: 120 / 136; line-height: 0; } .tf-medal.m1 { --mm: url("../img/medals/place-1.566709cb2378.svg"); --mg: #ffc83d; } .tf-medal.m2 { --mm: url("../img/medals/place-2.f45b6bf88621.svg"); --mg: #c9d2e3; --mi: #3d4557; } .tf-medal.m3 { --mm: url("../img/medals/place-3.0e0c2351ed26.svg"); --mg: #e0894a; --mi: #5a280c; } .tf-medal img { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--mg) 45%, transparent)); } .tf-medal b { position: absolute; left: 0; right: 0; top: 60.3%; translate: 0 -50%; text-align: center; line-height: 1; font: 900 calc(var(--ms) * .3) var(--font-display); color: var(--mi); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); } .tf-medal::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mm) center / contain no-repeat; mask: var(--mm) center / contain no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .8) 48%, transparent 58%) 150% 0 / 260% 100% no-repeat; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .tf-medal::after { opacity: 1; animation: tf-medal-shine 5s ease-in-out infinite; } .tf-medal.m2::after { animation-delay: -1.6s; } .tf-medal.m3::after { animation-delay: -3.2s; } } @keyframes tf-medal-shine { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -60% 0; } } /* П'єдестал рейтингу (замовник 2026-10-18: «1–3 місця цікавіші й яскравіші»): велика медаль над карткою, промені * кольору металу, у першого — світло біжить рамкою (як у карток паків) та іскри. */ .tf-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: end; padding-top: 44px; } .tf-pod { --medal: #c9d2e3; --medal-hi: #ffffff; position: relative; isolation: isolate; display: grid; justify-items: center; gap: 8px; padding: 66px 18px 22px; border-radius: 24px; text-align: center; color: var(--text); text-decoration: none; min-width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 18%, var(--surface)), var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--medal) 45%, transparent); box-shadow: 0 30px 70px -45px color-mix(in srgb, var(--medal) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--medal-hi) 25%, transparent); } .tf-pod.p1 { --medal: #ffc83d; --medal-hi: #fff4c2; order: 2; padding-top: 84px; padding-bottom: 30px; box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--medal) 85%, transparent), inset 0 1px 0 color-mix(in srgb, var(--medal-hi) 40%, transparent); } .tf-pod.p2 { order: 1; } .tf-pod.p3 { --medal: #e0894a; --medal-hi: #ffd2a8; order: 3; } .tf-pod-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } .tf-pod-rays { position: absolute; left: 50%; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--medal) 20%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); opacity: .55; } .tf-pod.p1 .tf-pod-rays { opacity: .9; } .tf-pod-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px 2px #ffc83d; opacity: .8; } .tf-pod-spark:nth-child(2) { left: 14%; top: 30%; } .tf-pod-spark:nth-child(3) { right: 12%; top: 22%; } .tf-pod-spark:nth-child(4) { left: 22%; bottom: 18%; } .tf-pod-spark:nth-child(5) { right: 18%; bottom: 30%; } .tf-pod-medal { position: absolute; top: -46px; left: 50%; translate: -50% 0; } .tf-pod-medal .tf-medal { --ms: 84px; } .tf-pod.p1 .tf-pod-medal { top: -58px; } .tf-pod.p1 .tf-pod-medal .tf-medal { --ms: 104px; } .tf-pod-title { font: 800 11px var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--medal); text-shadow: 0 0 14px color-mix(in srgb, var(--medal) 60%, transparent); } .tf-pod-ava { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 900 28px var(--font-display); background: color-mix(in srgb, var(--text) 8%, var(--surface)); color: var(--medal); border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 3px var(--medal), 0 0 0 6px color-mix(in srgb, var(--medal) 22%, transparent), 0 10px 30px -8px var(--medal); } .tf-pod.p1 .tf-pod-ava { width: 92px; height: 92px; font-size: 34px; } .tf-pod-ava img { width: 100%; height: 100%; object-fit: cover; } .tf-pod .tf-nick { font-size: 16px; max-width: 100%; } .tf-pod.p1 .tf-nick { font-size: 18px; } .tf-pod-main b { font: 900 30px var(--font-display); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, var(--medal-hi), var(--medal) 60%, color-mix(in srgb, var(--medal) 70%, #000)); } .tf-pod.p1 .tf-pod-main b { font-size: 40px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--medal) 45%, transparent)); } .tf-pod-main small { margin-left: 6px; color: var(--ink-2); } .tf-pod-sub { color: var(--ink-3); font: 500 12.5px var(--font-mono); } .tf-pod .tf-lvl { position: absolute; right: 14px; top: 14px; } @media (prefers-reduced-motion: no-preference) { .tf-pod-rays { animation: tf-rays-spin 40s linear infinite; } .tf-pod.p1::before { content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--tf-pk-a), transparent 0 20%, #ffc83d 32%, #fff4c2 37%, transparent 48% 70%, #ffb020 82%, #fff 86%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: tf-pk-spin 6s linear infinite; } .tf-pod-spark { animation: tf-twinkle 2.6s ease-in-out infinite; } .tf-pod-spark:nth-child(3) { animation-delay: -.7s; } .tf-pod-spark:nth-child(4) { animation-delay: -1.4s; } .tf-pod-spark:nth-child(5) { animation-delay: -2s; } .tf-pod.p1 .tf-pod-medal { animation: tf-medal-bob 4s ease-in-out infinite; } } @keyframes tf-rays-spin { to { rotate: 360deg; } } @keyframes tf-twinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1.2; } } @keyframes tf-medal-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -5px; } } .tf-lb-table { overflow-x: auto; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-lb-table table { width: 100%; border-collapse: collapse; min-width: 640px; } .tf-lb-table th { padding: 12px 14px; text-align: left; font: 700 11.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-lb-table td { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent); font-size: 14px; } .tf-lb-table tbody tr:last-child td { border-bottom: 0; } .tf-lb-table tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-lb-table .num { text-align: right; font: 500 14px var(--font-mono); font-variant-numeric: tabular-nums; } .tf-lb-table th.num { font-family: var(--font-body); } .tf-lb-table .c-rank { width: 56px; } .tf-rank-n { display: inline-grid; place-items: center; min-width: 32px; height: 28px; border-radius: 8px; font: 800 13px var(--font-mono); color: var(--ink-2); background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; } .tf-lb-who .tf-ava { width: 32px; height: 32px; font-size: 13px; } .tf-lb-who:hover .tf-nick { text-decoration: underline; } .tf-flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; flex: none; } .tf-lb-table tr[class*="role-"] .tf-ava { box-shadow: 0 0 0 2px var(--role); } .tf-lb-table .c-seen { color: var(--ink-3); font-family: var(--font-body); font-size: 13px; white-space: nowrap; } .tf-lb-table .c-kd, .tf-lb-table .c-kills { color: var(--text); } .tf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); font-size: 14px; } @media (max-width: 1024px) { .tf-lb-art { opacity: .35; width: 300px; } } @media (max-width: 700px) { .tf-podium { grid-template-columns: 1fr; gap: 56px; padding-top: 52px; } .tf-pod.p1, .tf-pod.p2, .tf-pod.p3 { order: 0; } .tf-lb-table table { min-width: 0; } .tf-lb-table .c-seen, .tf-lb-table .c-lvl, .tf-lb-table .c-hours, .tf-lb-table .c-win_rate, .tf-lb-table .c-games { display: none; } .tf-lb-table th, .tf-lb-table td { padding: 9px 8px; } .tf-lb-who .tf-badge, .tf-lb-who .tf-flag { display: none; } .tf-lb-art { display: none; } } .tf-lb-tools select { width: auto; flex: 0 0 auto; } .tf-lb-table td.c-kd, .tf-lb-table td.c-kills { color: var(--text); } .tf-lb-table th.c-kd, .tf-lb-table th.c-kills { color: var(--ink-3); } @media (max-width: 700px) { .tf-lb-table .c-hs, .tf-lb-table .c-accuracy, .tf-lb-table .c-kpm, .tf-lb-table .c-dpk { display: none; } .tf-lb-who .tf-nick { max-width: 150px; } .tf-lb-table .c-rank { width: 40px; } .tf-lb-tools .tf-btn { flex: 0 0 auto; } } @media (max-width: 700px) { .tf-lb-who { gap: 7px; } .tf-lb-who .tf-ava { width: 26px; height: 26px; font-size: 11px; } .tf-lb-who .tf-nick { max-width: 116px; } .tf-lb-table th, .tf-lb-table td { padding: 9px 6px; } .tf-lb-table .c-rank { width: 36px; } } /* ----- картка сервера v2 ----------------------------------------------------- */ .tf-sv-hero { --mode: var(--accent); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-sv-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(600px 420px at 18% 50%, color-mix(in srgb, var(--role-pro) 12%, transparent), transparent 70%), radial-gradient(700px 380px at 85% 60%, color-mix(in srgb, var(--mode) 16%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-sv-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: center; padding-block: 48px; max-width: var(--wrap); } .tf-sv-id { display: grid; gap: 14px; justify-items: start; position: relative; z-index: 1; } .tf-sv-id h1 { margin: 0; font-size: clamp(26px, calc(3.4vw * var(--vz)), 40px); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; } .tf-sv-about { margin: -4px 0 0; color: var(--ink-2); } .tf-sv-nums { display: flex; flex-wrap: wrap; gap: 10px 36px; } .tf-sv-nums > div { display: grid; gap: 2px; } .tf-sv-nums span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .tf-sv-nums b { font: 900 28px var(--font-display); } .tf-sv-nums b.mono { font: 600 20px var(--font-mono); padding-top: 6px; } .tf-sv-nums small { font-size: 15px; color: var(--ink-2); font-weight: 600; } .tf-sv-nums em { font-style: normal; font: 500 12.5px var(--font-mono); color: var(--ink-3); } .tf-sv-id .tf-bar { width: min(520px, 100%); } .tf-sv-upd { margin: 0; color: var(--ink-3); font-size: 12.5px; } .tf-roster { display: grid; gap: 4px; } .tf-roster-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; } .tf-roster-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .tf-roster-row .tf-who a.tf-nick { text-decoration: none; } .tf-row .tf-lvl { height: 24px; min-width: 30px; font-size: 11.5px; } .tf-maplist { display: grid; gap: 8px; } .tf-mapchip { display: flex; gap: 12px; align-items: center; } .tf-mapchip div { display: grid; } .tf-mapchip b { font: 600 14px var(--font-mono); } .tf-mapchip span { font-size: 12.5px; color: var(--ink-3); } .tf-minipacks { display: grid; gap: 8px; } .tf-minipack { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 14px; color: var(--text); text-decoration: none; background: linear-gradient(90deg, color-mix(in srgb, var(--role) 14%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--role) 28%, transparent); } .tf-minipack:hover { border-color: var(--role); } .tf-minipack img { width: 52px; height: 64px; object-fit: contain; object-position: top; } .tf-minipack span { display: grid; } .tf-minipack b { color: var(--role); font-size: 14.5px; } .tf-minipack small { color: var(--ink-2); font-size: 12.5px; } @media (max-width: 1024px) { .tf-sv-in { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: left; } .tf-sv-id { justify-items: start; width: 100%; } } .tf-match-map.is-empty { display: grid; place-items: center; font: 800 13px var(--font-mono); color: var(--ink-3); background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--text) 4%, transparent) 6px 7px), #0b0d13; } .tf-bots { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; color: var(--ink-3); font-size: 13px; line-height: 1.6; background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-bots b { color: var(--ink-2); } /* ----- перемикач мови ----------------------------------------------------- */ .tf-lang { position: relative; } .tf-lang > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 7px 10px; border-radius: 11px; font: 700 13px var(--font-body); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-lang > summary::-webkit-details-marker { display: none; } .tf-lang > summary:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); } .tf-lang img { border-radius: 3px; object-fit: cover; flex: none; } /* 33 мови — сіткою в три колонки з прокручуванням; на телефоні — панель на всю ширину. */ .tf-lang-menu { width: min(600px, calc(calc(100vw * var(--vz)) - 24px)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; max-height: min(calc(72vh * var(--vz)), 560px); overflow-y: auto; overscroll-behavior: contain; } .tf-lang-menu button { display: flex !important; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 700px) { .tf-lang-menu.is-right { position: fixed; top: calc(var(--top-h) + 6px); left: 12px; right: 12px; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: calc(calc(100dvh * var(--vz)) - var(--top-h) - 24px); } } .tf-lang-menu button[aria-current] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .tf-foot-langs { max-width: var(--wrap); margin-inline: auto; padding: 4px var(--gutter) 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .tf-foot-langs a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 13px; text-decoration: none; } .tf-foot-langs a:hover, .tf-foot-langs a[aria-current] { color: var(--text); } .tf-foot-langs img { border-radius: 2px; object-fit: cover; } @media (max-width: 560px) { .tf-lang > summary { padding: 7px 8px; } .tf-lang > summary span { display: none; } .tf-lang > summary .tf-caret { display: none; } } /* ========================================================================== Етап 4: модерація — банліст, мути, справа бану (2026-10-02) ========================================================================== */ .tf-mod-hero { --mood: var(--danger); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-mod-hero.is-mutes { --mood: var(--role-admin); } .tf-mod-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(760px 420px at 80% 62%, color-mix(in srgb, var(--mood) 20%, transparent), transparent 70%), radial-gradient(600px 360px at 6% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 70%), repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--mood) 4%, transparent) 22px 23px); } /* Трафарет «BAN» / «MUTE»: контур, легкий нахил, наче штамп на справі. */ .tf-mod-stencil { position: absolute; z-index: -2; right: max(-2%, calc(50% - 760px)); top: 50%; translate: 0 -50%; rotate: -8deg; font: 900 clamp(120px, calc(19vw * var(--vz)), 260px)/.8 "Unbounded", "Arial Black", sans-serif; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--mood) 26%, transparent); pointer-events: none; user-select: none; } .tf-mod-art { position: absolute; z-index: -1; right: max(3%, calc(50% - 640px)); bottom: -10px; height: 108%; width: auto; pointer-events: none; filter: drop-shadow(0 0 32px color-mix(in srgb, var(--mood) 45%, transparent)) saturate(.85); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .tf-mod-hero-in { padding-block: 48px 34px; } .tf-mod-hero h1 { margin: 8px 0 12px; font-size: clamp(36px, calc(5.4vw * var(--vz)), 64px); font-weight: 900; line-height: 1; } .tf-mod-hero .tf-hero-sub { max-width: 54ch; margin-bottom: 22px; font-size: 16.5px; } .tf-mod-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .tf-mod-tabs a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 15px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: border-color .15s, color .15s; } .tf-mod-tabs a:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); } .tf-mod-tabs a[aria-current] { color: var(--text); border-color: color-mix(in srgb, var(--mood) 60%, transparent); background: color-mix(in srgb, var(--mood) 14%, transparent); box-shadow: 0 10px 30px -14px var(--mood); } .tf-mod-tabs svg { width: 18px; height: 18px; } .tf-mod-tabs b { min-width: 24px; padding: 2px 7px; border-radius: 8px; text-align: center; font: 700 12.5px var(--font-mono); background: color-mix(in srgb, var(--text) 8%, transparent); } .tf-mod-tabs a[aria-current] b { background: var(--mood); color: #fff; } .tf-mod-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .tf-mod-stats > div { min-width: 132px; padding: 12px 16px; border-radius: 16px; display: grid; gap: 2px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); backdrop-filter: blur(6px); } .tf-mod-stats dd { margin: 0; font: 800 26px/1.1 var(--font-mono); } .tf-mod-stats dt { color: var(--ink-3); font-size: 12.5px; font-weight: 600; } .tf-mod-stats .is-hot dd { color: var(--mood); text-shadow: 0 0 22px color-mix(in srgb, var(--mood) 50%, transparent); } .tf-mod-stats .is-ok dd { color: var(--ok); } .tf-mod { padding-block: 26px 56px; display: grid; gap: 18px; } .tf-mod-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tf-mod-tools .tf-search { max-width: 420px; } .tf-mod-total { margin-left: auto; color: var(--ink-3); font: 600 13px var(--font-mono); } /* Справа: хто — за що — термін — стан — дія. */ /* Колонки спільні для всіх рядків (subgrid), тож причина, термін і стан стоять одна під одною. */ .tf-cases { display: grid; row-gap: 8px; column-gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.3fr) minmax(170px, .95fr) max-content max-content; } .tf-mutes .tf-cases { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) max-content minmax(170px, .95fr) max-content; } .tf-case { --st: var(--danger); position: relative; display: grid; align-items: center; column-gap: 18px; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 14px 16px 14px 20px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; transition: border-color .15s, translate .15s; } .tf-case::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--st); box-shadow: 0 0 14px var(--st); } .tf-case:hover { border-color: color-mix(in srgb, var(--st) 40%, transparent); } .tf-case.is-perm { --st: #ff2850; background: linear-gradient(90deg, color-mix(in srgb, #ff2850 7%, var(--surface)), var(--surface) 40%); } .tf-case.is-expired, .tf-case.is-replaced { --st: var(--ink-3); } .tf-case.is-unbanned, .tf-case.is-lifted { --st: var(--ok); } .tf-cases .tf-case:not(.is-active):not(.is-perm) { opacity: .8; } .tf-case-who { display: flex; align-items: center; gap: 12px; min-width: 0; } .tf-case-who .tf-ava { width: 42px; height: 42px; font-size: 17px; color: var(--st); background: color-mix(in srgb, var(--st) 12%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 35%, transparent); } .tf-case-id { display: grid; gap: 2px; min-width: 0; } .tf-case-id .tf-nick { font-size: 15.5px; text-decoration: none; } .tf-case-id .tf-nick:hover { text-decoration: underline; } .tf-sid { color: var(--ink-3); font: 500 12px var(--font-mono); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.tf-sid:hover { color: var(--ink-2); } .tf-case-rep { justify-self: start; white-space: nowrap; margin-top: 2px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .tf-case-why { display: grid; gap: 5px; min-width: 0; } .tf-reason { justify-self: start; max-width: 100%; padding: 4px 10px; border-radius: 9px; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-case-by { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-case-term { display: grid; gap: 6px; font-size: 12.5px; } .tf-case-when { color: var(--ink-2); font-weight: 600; } .tf-case-left { color: var(--ink-3); } .tf-term { display: block; height: 5px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); } .tf-term i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--st) 55%, transparent), var(--st)); } .tf-term.is-inf i { width: 100%; background: repeating-linear-gradient(-45deg, var(--st) 0 6px, color-mix(in srgb, var(--st) 40%, transparent) 6px 12px); } .tf-case-what { display: flex; gap: 6px; } .tf-gag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); background: color-mix(in srgb, var(--text) 4%, transparent); text-decoration: line-through; text-decoration-color: transparent; } .tf-gag svg { width: 15px; height: 15px; } .tf-gag.is-on { color: var(--st); background: color-mix(in srgb, var(--st) 12%, transparent); text-decoration-color: currentColor; } .tf-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--c, var(--ink-2)); background: color-mix(in srgb, var(--c, var(--ink-2)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--ink-2)) 32%, transparent); } .tf-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .tf-state.is-ok { --c: var(--ok); } .tf-state.is-warn { --c: var(--warn); } .tf-state.is-bad { --c: var(--danger); } .tf-state.is-off { --c: var(--ink-3); } .tf-state.is-off::before { box-shadow: none; } /* Велика заглушка, коли показати нічого. */ .tf-void { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 56px 20px; border-radius: 24px; background: radial-gradient(420px 220px at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--surface); border: 1px dashed color-mix(in srgb, var(--text) 12%, transparent); } .tf-void h3 { margin: 10px 0 0; font-size: 22px; } .tf-void p { margin: 0 0 8px; color: var(--ink-2); max-width: 46ch; } .tf-void-ico { --c: var(--accent); width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 5%, transparent), 0 20px 50px -20px var(--c); } .tf-void-ico.is-ok { --c: var(--ok); } .tf-void-ico svg { width: 32px; height: 32px; } @media (max-width: 1100px) { .tf-cases, .tf-mutes .tf-cases { grid-template-columns: minmax(0, 1fr); } .tf-case, .tf-mutes .tf-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "who why state" "term term go"; row-gap: 12px; } .tf-case-who { grid-area: who; } .tf-case-why { grid-area: why; } .tf-case-state { grid-area: state; justify-self: end; } .tf-case-term { grid-area: term; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 12px; } .tf-case-go { grid-area: go; } .tf-mutes .tf-case { grid-template-areas: "who why state" "what term term"; } .tf-case-what { grid-area: what; } .tf-mod-stencil { opacity: .6; } } @media (max-width: 720px) { .tf-mod-art { height: 70%; opacity: .35; right: -40px; } .tf-mod-stats > div { min-width: 0; flex: 1 1 40%; } .tf-mod-total { margin-left: 0; width: 100%; } .tf-case, .tf-mutes .tf-case { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; grid-template-areas: "who who" "why why" "term term" "state go"; } .tf-mutes .tf-case { grid-template-areas: "who who" "why why" "what what" "term term" "state state"; } .tf-case-state { justify-self: start; } .tf-case-term { grid-template-columns: 1fr; } } /* Мути — у кольорі своєї шапки (синій), бани — червоні. */ .tf-mutes .tf-case { --st: #4d8dff; } .tf-mutes .tf-case.is-perm { --st: #2f6bff; background: linear-gradient(90deg, color-mix(in srgb, #2f6bff 8%, var(--surface)), var(--surface) 40%); } .tf-mutes .tf-case.is-expired, .tf-mutes .tf-case.is-replaced { --st: var(--ink-3); } .tf-mutes .tf-case.is-lifted { --st: var(--ok); } /* ----- справа бану ---------------------------------------------------------- */ .tf-mod-hero.is-case .tf-mod-hero-in { padding-block: 30px 30px; } .tf-mod-hero.is-case .tf-mod-stencil { font-size: clamp(110px, calc(14vw * var(--vz)), 200px); } .tf-back { display: inline-block; margin-bottom: 16px; color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; } .tf-back:hover { color: var(--text); } .tf-case-head { display: flex; align-items: center; gap: 20px; } .tf-case-head h1 { margin: 0 0 10px; font-size: clamp(30px, calc(4.4vw * var(--vz)), 52px); line-height: 1.04; overflow-wrap: anywhere; } .tf-case-ava { width: 76px; height: 76px; font-size: 32px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 45%, transparent), 0 0 40px -10px var(--danger); } .tf-case-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .tf-casefile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; padding-block: 28px 56px; } .tf-casefile-main, .tf-casefile-side { display: grid; gap: 20px; min-width: 0; } .tf-casefile-side { position: sticky; top: calc(var(--top-h) + 16px); } .tf-facts-panel { --st: var(--danger); position: relative; overflow: hidden; } .tf-facts-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--st), transparent 70%); } .tf-facts-panel.is-expired { --st: var(--ink-3); } .tf-facts-panel.is-unbanned { --st: var(--ok); } .tf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; } .tf-facts .is-wide { grid-column: 1 / -1; } .tf-facts dt { color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; } .tf-facts dd { margin: 0; font-weight: 600; font-size: 16px; display: grid; gap: 2px; } .tf-facts dd small { color: var(--ink-3); font-weight: 500; font-size: 13px; } .tf-facts-reason { font: 800 clamp(20px, calc(2.4vw * var(--vz)), 26px) var(--font-display) !important; color: var(--text); } .tf-term-big { margin-top: 22px; display: grid; gap: 8px; } .tf-term-big .tf-term { height: 8px; } .tf-term-big div { display: flex; justify-content: space-between; color: var(--ink-3); font: 600 12.5px var(--font-mono); } .tf-term-big b { color: var(--st); } .tf-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 0; } .tf-timeline li { --c: var(--ink-2); position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; padding: 0 0 22px 26px; border-left: 2px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .tf-timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); } .tf-timeline time { grid-row: span 2; color: var(--ink-3); font: 600 12.5px var(--font-mono); padding-top: 1px; } .tf-timeline b { color: var(--c); font-size: 15px; } .tf-timeline span { color: var(--ink-2); font-size: 13.5px; } .tf-timeline .is-ban { --c: var(--danger); } .tf-timeline .is-appeal { --c: var(--warn); } .tf-timeline .is-decision.is-accepted, .tf-timeline .is-unbanned { --c: var(--ok); } .tf-timeline .is-decision.is-rejected { --c: var(--danger); } .tf-timeline .is-expires { --c: var(--accent); } .tf-timeline .is-expires::before { animation: tf-beat 1.6s ease-in-out infinite; } .tf-timeline .is-expired { --c: var(--ink-3); } @keyframes tf-beat { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); } } .tf-appeal-lead { margin: -6px 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; } .tf-appeal-lead strong { color: var(--text); } .tf-field textarea, .tf-field select { width: 100%; padding: 13px 15px; border-radius: 12px; font: 500 15px/1.5 var(--font-body); color: var(--text); resize: vertical; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 13%, transparent); outline: none; transition: border-color .15s, box-shadow .15s; } .tf-field textarea:focus, .tf-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .tf-field input[type="file"] { padding: 10px; font-size: 14px; color: var(--ink-2); } .tf-field input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 9px; border: 0; cursor: pointer; font: 700 13.5px var(--font-body); color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-field.has-error textarea { border-color: #ff6b7d; } .tf-appeal-cta { display: grid; justify-items: center; text-align: center; gap: 14px; } .tf-appeal-cta p { margin: 0; color: var(--ink-2); } .tf-appeals { display: grid; gap: 12px; } .tf-appeal-item { padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-appeal-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tf-appeal-top time { color: var(--ink-3); font: 600 12px var(--font-mono); } .tf-appeal-text { margin: 12px 0 6px; white-space: pre-line; font-size: 14px; line-height: 1.55; } .tf-appeal-meta { margin: 0; color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; } .tf-appeal-meta a { color: var(--accent); } .tf-appeal-reply { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .tf-appeal-reply b { font-size: 13px; color: var(--accent); } .tf-appeal-reply p { margin: 4px 0 0; font-size: 14px; } /* Історія банів і мутів гравця (справа бану, картка гравця). */ .tf-modhist-sum { margin-left: auto; color: var(--ink-3); font-size: 13px; } .tf-modhist-sum b { color: var(--text); font-family: var(--font-mono); } .tf-modhist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tf-modhist-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto 86px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg); } .tf-modhist-kind { justify-self: start; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 800; text-decoration: none; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tf-modhist-kind.is-mute { color: #6aa0ff; background: color-mix(in srgb, #4d8dff 12%, transparent); } a.tf-modhist-kind:hover { text-decoration: underline; } .tf-modhist-why { display: grid; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .tf-modhist-why small { color: var(--ink-3); font-weight: 500; font-size: 12px; } .tf-modhist-list time { color: var(--ink-3); font: 600 12px var(--font-mono); text-align: right; } @media (max-width: 1024px) { .tf-casefile { grid-template-columns: 1fr; } .tf-casefile-side { position: static; order: -1; } } @media (max-width: 640px) { .tf-case-head { align-items: flex-start; } .tf-case-ava { width: 56px; height: 56px; font-size: 24px; } .tf-facts { grid-template-columns: 1fr; } .tf-timeline li { grid-template-columns: 1fr; } .tf-timeline time { grid-row: auto; } .tf-modhist-list li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind time" "why why" "state state"; gap: 8px; } .tf-modhist-kind { grid-area: kind; } .tf-modhist-why { grid-area: why; } .tf-modhist-list time { grid-area: time; } .tf-modhist-list .tf-state { grid-area: state; justify-self: start; } } /* ----- чат сайту ------------------------------------------------------------- */ .tf-chatpage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .tf-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(calc(74vh * var(--vz)), 760px); min-height: 460px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); border-radius: 24px; overflow: hidden; } .tf-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); } .tf-chat-head h2 { margin: 0; font-size: 18px; } .tf-livetag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; } .tf-livetag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: tf-livetag 2s ease-out infinite; } @keyframes tf-livetag { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } } .tf-chat-log { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 18px; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; } .tf-chat-log > :first-child { margin-top: auto; } .tf-chat-day { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; } .tf-chat-day::before, .tf-chat-day::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 8%, transparent); } .tf-chat-day span { display: inline-block; } .tf-chat-day span::first-letter { text-transform: uppercase; } .tf-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 1px 0; } .tf-msg.has-head { margin-top: 12px; } .tf-msg-ava { grid-column: 1; text-decoration: none; } .tf-msg-ava .tf-ava { width: 40px; height: 40px; } .tf-msg.role-owner .tf-msg-ava .tf-ava, .tf-msg.role-admin .tf-msg-ava .tf-ava, .tf-msg.role-supreme .tf-msg-ava .tf-ava, .tf-msg.role-boss .tf-msg-ava .tf-ava, .tf-msg.role-pro .tf-msg-ava .tf-ava { box-shadow: 0 0 0 2px var(--role), 0 0 14px color-mix(in srgb, var(--role) 50%, transparent); } .tf-msg-body { grid-column: 2; min-width: 0; } .tf-msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; min-width: 0; } .tf-msg-meta .tf-nick { font-size: 14.5px; text-decoration: none; } .tf-msg-meta .tf-nick:hover { text-decoration: underline; } .tf-msg[class*="role-"] .tf-nick { color: var(--role); text-shadow: 0 0 18px color-mix(in srgb, var(--role) 40%, transparent); } .tf-msg-meta time { color: var(--ink-3); font: 500 11.5px var(--font-mono); } .tf-msg-meta .tf-badge { padding: 2px 6px; font-size: 9.5px; } .tf-msg-text { margin: 0; padding: 7px 12px; border-radius: 4px 14px 14px 14px; justify-self: start; display: inline-block; max-width: 100%; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-msg:not(.has-head) .tf-msg-text { border-radius: 14px; } .tf-msg.is-me .tf-msg-text { background: color-mix(in srgb, var(--accent) 13%, transparent); } .tf-msg.is-new { animation: tf-msg-in .35s cubic-bezier(.2,.7,.2,1); } @keyframes tf-msg-in { from { opacity: 0; translate: 0 8px; } } .tf-chat-empty { margin: auto; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--ink-2); padding: 40px 0; } .tf-chat-form { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); background: color-mix(in srgb, var(--bg) 40%, var(--surface)); } .tf-chat-form .tf-ava { width: 36px; height: 36px; } .tf-chat-form input[type="text"] { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; font: 500 15px var(--font-body); color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); outline: none; transition: border-color .15s, box-shadow .15s; } .tf-chat-form input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .tf-chat-count { color: var(--ink-3); font: 600 11.5px var(--font-mono); min-width: 52px; text-align: right; } .tf-chat-form.is-guest { justify-content: space-between; } .tf-chat-form.is-guest p { margin: 0; color: var(--ink-2); } .tf-chat-form.is-guest a:not(.tf-btn) { color: var(--accent); font-weight: 700; } .tf-chat-side { display: grid; gap: 16px; } .tf-chat-side .tf-panel { padding: 20px; border-radius: 20px; } .tf-chat-side .tf-panel-head { margin-bottom: 12px; } .tf-chat-side .tf-panel-head h3 { font-size: 16px; } .tf-mini-srv { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 12px; color: var(--text); text-decoration: none; } .tf-mini-srv:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-mini-srv img, .tf-mini-srv-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bg); } .tf-mini-srv-name { display: grid; min-width: 0; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-mini-srv-name small { color: var(--ink-3); font: 500 12px var(--font-mono); } .tf-mini-srv b { font: 800 16px var(--font-mono); color: var(--ink-3); } .tf-mini-srv b.is-on { color: var(--ok); } .tf-mini-srv b small { font-size: 11px; color: var(--ink-3); } .tf-chat-rules ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 9px; } .tf-chat-rules li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.45; } .tf-chat-rules li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: linear-gradient(135deg, var(--gold-hi), var(--ember)); } .tf-chat-rules p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; } .tf-chat-links { display: flex; flex-wrap: wrap; gap: 8px; } .tf-chat-links svg { width: 16px; height: 16px; } @media (max-width: 1024px) { .tf-chatpage { grid-template-columns: 1fr; } .tf-chat { height: min(calc(78vh * var(--vz)), 720px); } } @media (max-width: 560px) { .tf-chat { border-radius: 18px; min-height: 420px; } .tf-chat-log { padding-inline: 12px; } .tf-msg { grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; } .tf-msg-ava .tf-ava { width: 34px; height: 34px; } .tf-chat-form .tf-ava, .tf-chat-count { display: none; } } /* ----- новини ---------------------------------------------------------------- */ .tf-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tf-nw-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 46px 30px; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-nw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px 320px at 85% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(520px 300px at 0% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 70%); } .tf-nw-hero h1 { margin: 8px 0 12px; font-size: clamp(34px, calc(5vw * var(--vz)), 60px); font-weight: 900; line-height: 1.02; } .tf-nw-hero .tf-hero-sub { margin: 0; font-size: 16.5px; } .tf-nw { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-block: 28px 64px; } .tf-nw-main { display: grid; gap: 20px; min-width: 0; } .tf-nw-side { display: grid; gap: 16px; position: sticky; top: calc(var(--top-h) + 16px); } .tf-nw-cover { position: relative; overflow: hidden; background: #0b0d13; } .tf-nw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .6s cubic-bezier(.2,.7,.2,1); } /* Своєї обкладинки нема — скриншот карти з гри (views.NEWS_ART_MAPS), приглушений і з теплим відсвітом бренду, щоб не сперечався з обкладинками, які новинам ставлять руками. Радари прибрано 2026-10-03 (замовник). */ .tf-nw-cover.is-map img { filter: saturate(.8) brightness(.72) contrast(1.05); } .tf-nw-cover.is-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%), linear-gradient(180deg, transparent 45%, color-mix(in srgb, #07080c 55%, transparent)); } .tf-nw-tags { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: 600 12.5px var(--font-mono); } .tf-pin { padding: 3px 9px; border-radius: 8px; font: 800 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: linear-gradient(180deg, var(--gold-hi), var(--accent)); } .tf-nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--ink-3); font-size: 13px; font-weight: 600; } .tf-nw-meta > span, .tf-nw-meta > a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; } .tf-nw-meta svg { width: 16px; height: 16px; } .tf-nw-author .tf-ava { width: 26px; height: 26px; font-size: 12px; } .tf-nw-author.role-owner .tf-ava, .tf-nw-author.role-admin .tf-ava { box-shadow: 0 0 0 2px var(--role); } .tf-nw-author .tf-nick { font-size: 13.5px; } .tf-nw-lead { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; border-radius: 26px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transition: border-color .2s, box-shadow .2s; } .tf-nw-lead:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--accent) 50%, transparent); } .tf-nw-lead:hover .tf-nw-cover img, .tf-nw-card:hover .tf-nw-cover img { scale: 1.04; } .tf-nw-lead .tf-nw-cover { min-height: 320px; } .tf-nw-lead .tf-nw-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--surface)); } .tf-nw-lead-body { display: grid; align-content: center; gap: 14px; padding: 30px 30px 30px 10px; } .tf-nw-lead h2 { margin: 0; font-size: clamp(24px, calc(2.6vw * var(--vz)), 34px); line-height: 1.12; } .tf-nw-lead h2 a, .tf-nw-card h3 a { color: var(--text); text-decoration: none; } .tf-nw-lead p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .tf-nw-go { justify-self: start; } .tf-nw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tf-nw-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .2s, translate .2s; } .tf-nw-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); translate: 0 -3px; } .tf-nw-card .tf-nw-cover { aspect-ratio: 16 / 8; } .tf-nw-card-body { display: grid; align-content: start; gap: 10px; padding: 18px 20px 20px; } .tf-nw-card h3 { margin: 0; font-size: 19px; line-height: 1.22; } .tf-nw-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Бічні блоки: топ місяця, розіграш, клан місяця, інші новини. */ .tf-nw-side .tf-panel, .tf-casefile-side .tf-panel.tf-side-top { padding: 20px; border-radius: 20px; } .tf-nw-side .tf-panel-head { margin-bottom: 12px; } .tf-nw-side .tf-panel-head h3 { font-size: 16px; } .tf-side-month { margin-left: auto; color: var(--ink-3); font: 600 12px var(--font-mono); } .tf-side-rank { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; } .tf-side-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; } .tf-side-rank li:nth-child(odd) { background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-side-rank b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 12.5px var(--font-mono); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--ink-2); } .tf-side-rank b.p1 { color: #1a1206; background: linear-gradient(180deg, #ffe08a, #f7b733); } .tf-side-rank b.p2 { color: #12151d; background: linear-gradient(180deg, #f2f4f8, #a0a8ba); } .tf-side-rank b.p3 { color: #1a0f06; background: linear-gradient(180deg, #ffb37a, #c8743c); } .tf-side-rank .tf-nick { font-size: 14px; text-decoration: none; } .tf-side-rank span { color: var(--ok); font: 700 13px var(--font-mono); } .tf-side-note { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; line-height: 1.5; } .tf-side-give { position: relative; overflow: hidden; isolation: isolate; padding-right: 120px !important; } .tf-side-give::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(240px 160px at 90% 40%, color-mix(in srgb, var(--role-supreme) 20%, transparent), transparent 70%); } .tf-side-knife { position: absolute; right: -24px; top: 50%; translate: 0 -50%; width: 170px; rotate: 0deg; z-index: -1; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--role-supreme) 50%, transparent)); } .tf-side-give h3 { margin: 0 0 6px; font-size: 16px; } .tf-side-give p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; } .tf-side-give b { color: var(--text); font-family: var(--font-mono); } .tf-side-clan { position: relative; border-style: dashed !important; } .tf-side-clan h3 { margin: 6px 0; font-size: 16px; } .tf-side-clan p { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; } .tf-soon { display: inline-block; padding: 2px 8px; border-radius: 7px; font: 800 10.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-side-post { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 12px; color: var(--text); text-decoration: none; } .tf-side-post:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-side-thumb { width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: #0b0d13; } .tf-side-thumb img { width: 100%; height: 100%; object-fit: cover; } .tf-side-thumb.is-map img { filter: saturate(.8) brightness(.8); } .tf-side-post b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.3; } .tf-side-post time { color: var(--ink-3); font: 600 11.5px var(--font-mono); } /* Сторінка новини. */ .tf-article-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 360px; display: flex; align-items: flex-end; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-article-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .tf-article-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 55%, var(--bg)); } .tf-article-hero.is-map .tf-article-bg { filter: saturate(.8) brightness(.62); } .tf-article-hero-in { position: relative; padding-block: 40px 30px; display: grid; gap: 14px; } .tf-article-hero h1 { margin: 0; max-width: 22ch; font-size: clamp(32px, calc(4.8vw * var(--vz)), 58px); font-weight: 900; line-height: 1.04; } .tf-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-block: 34px 64px; } .tf-article-main { min-width: 0; max-width: 760px; } .tf-article-lead { margin: 0 0 22px; font-size: 20px; line-height: 1.55; color: var(--text); font-weight: 500; } .tf-prose { color: color-mix(in srgb, var(--text) 86%, var(--ink-2)); font-size: 17px; line-height: 1.75; } .tf-prose p { margin: 0 0 1.1em; } .tf-prose a { color: var(--accent); } .tf-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-share > span { color: var(--ink-3); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; } .tf-share svg { width: 16px; height: 16px; } .tf-comments { margin-top: 40px; } .tf-comments h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 24px; } .tf-comments-list { display: grid; gap: 4px; padding: 6px 18px 18px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-comments-empty { margin: 0; color: var(--ink-3); } .tf-comment-form { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; } .tf-comment-form .tf-ava { width: 40px; height: 40px; } .tf-comment-form textarea { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; resize: vertical; min-height: 48px; font: 500 15px/1.5 var(--font-body); color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); outline: none; } .tf-comment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .tf-comment-form .tf-btn { align-self: stretch; } .tf-comment-form.is-guest p { margin: 0; color: var(--ink-2); } .tf-comment-form.is-guest a { color: var(--accent); font-weight: 700; } @media (max-width: 1100px) { .tf-nw, .tf-article-wrap { grid-template-columns: 1fr; } .tf-nw-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 760px) { .tf-nw-lead { grid-template-columns: 1fr; } .tf-nw-lead .tf-nw-cover { min-height: 0; aspect-ratio: 16 / 9; } .tf-nw-lead .tf-nw-cover::after { background: linear-gradient(180deg, transparent 60%, var(--surface)); } .tf-nw-lead-body { padding: 4px 20px 24px; } .tf-nw-grid { grid-template-columns: 1fr; } .tf-article-hero { min-height: 280px; } .tf-prose { font-size: 16px; } .tf-comment-form { flex-wrap: wrap; } .tf-comment-form .tf-ava { display: none; } .tf-comment-form .tf-btn { width: 100%; } } /* ----- турнір місяця ---------------------------------------------------------- */ .tf-tour-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-tour-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 420px at 78% 70%, color-mix(in srgb, var(--role-supreme) 22%, transparent), transparent 70%), radial-gradient(520px 300px at 8% 0%, color-mix(in srgb, var(--ember) 14%, transparent), transparent 70%), conic-gradient(from 200deg at 78% 110%, transparent, color-mix(in srgb, var(--accent) 10%, transparent) 30deg, transparent 60deg, color-mix(in srgb, var(--accent) 7%, transparent) 90deg, transparent 120deg); } .tf-tour-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: end; padding-top: 46px; } .tf-tour-copy { padding-bottom: 42px; } .tf-tour-hero h1 { margin: 8px 0 14px; font-size: clamp(34px, calc(4.8vw * var(--vz)), 60px); font-weight: 900; line-height: 1.03; } .tf-tour-hero h1::first-letter { text-transform: uppercase; } .tf-tour-hero .tf-hero-sub { font-size: 16px; margin-bottom: 24px; } .tf-countdown { display: grid; gap: 10px; justify-items: start; } .tf-cd-label { color: var(--accent); font: 800 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; } .tf-cd-cells { display: flex; gap: 10px; } .tf-cd-cells > div { min-width: 82px; padding: 12px 12px 10px; border-radius: 16px; display: grid; justify-items: center; gap: 2px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 20px 40px -26px var(--accent); } .tf-cd-cells b { font: 800 30px/1 var(--font-mono); font-variant-numeric: tabular-nums; } .tf-cd-cells i { font-style: normal; color: var(--ink-3); font-size: 12px; font-weight: 600; min-height: 1em; } .tf-tour-me { display: inline-flex; margin-top: 16px; padding: 8px 14px; border-radius: 12px; font-weight: 700; text-decoration: none; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); } /* П'єдестал з моделями паків: 1 — посередині й вище. */ .tf-tour-podium { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 0; min-height: 380px; } .tf-tour-podium figure { position: relative; margin: 0; display: grid; justify-items: center; } .tf-tour-podium img { width: 100%; max-height: 330px; object-fit: contain; object-position: bottom; position: relative; z-index: 1; filter: drop-shadow(0 0 26px var(--pc)); } .tf-tour-podium figcaption { width: 86%; height: var(--h); display: grid; place-items: start center; padding-top: 10px; margin-top: -14px; font: 900 34px var(--font-display); color: var(--pc); border-radius: 14px 14px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 26%, var(--surface)), color-mix(in srgb, var(--pc) 6%, var(--bg))); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); border-bottom: 0; text-shadow: 0 0 24px var(--pc); } .tf-tour-podium .p1 { --pc: var(--role-supreme); --h: 110px; } .tf-tour-podium .p1 img { max-height: 370px; } .tf-tour-podium .p2 { --pc: #c9d2e3; --h: 74px; } .tf-tour-podium .p3 { --pc: #e0894a; --h: 52px; } .tf-tour-podium .p2 img, .tf-tour-podium .p3 img { max-height: 290px; } .tf-tour { padding-bottom: 64px; } /* Призи турніру (замовник 2026-10-18: «цікавіші картинки призів і як подають»): медаль і звання, вітрина зі * скіном AK паку й катаною-регеном, «лут» рядками з картинками; колір рамки — метал місця, сяйво — колір паку. */ .tf-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; } .tf-prize { --pc: var(--role-supreme); --pk: var(--role-pro); position: relative; overflow: hidden; isolation: isolate; padding: 20px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--pk) 10%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); box-shadow: 0 30px 70px -45px var(--pc); } .tf-prize.pk-boss { --pk: var(--role-boss); } .tf-prize.pk-supreme { --pk: var(--role-supreme); } .tf-prize.p1 { padding-block: 26px; box-shadow: 0 40px 90px -40px var(--pc); order: 2; } .tf-prize.p2 { --pc: #c9d2e3; order: 1; } .tf-prize.p3 { --pc: #e0894a; order: 3; } .tf-prize-head { display: flex; align-items: center; gap: 12px; } .tf-prize-head .tf-medal { --ms: 54px; margin-top: -6px; } .tf-prize.p1 .tf-prize-head .tf-medal { --ms: 66px; } .tf-prize-title { display: grid; gap: 2px; font: 900 20px var(--font-display); color: var(--pc); text-shadow: 0 0 22px color-mix(in srgb, var(--pc) 45%, transparent); } .tf-prize.p1 .tf-prize-title { font-size: 24px; } .tf-prize-title small { font: 700 11px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); text-shadow: none; } .tf-prize-stage { position: relative; height: 150px; margin: 6px -20px 4px; display: grid; place-items: center; } .tf-prize.p1 .tf-prize-stage { height: 176px; } .tf-prize-stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 10px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pk) 55%, transparent), transparent); filter: blur(4px); } .tf-prize-rays { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: -1; background: repeating-conic-gradient(color-mix(in srgb, var(--pk) 26%, transparent) 0 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 70%); mask: radial-gradient(closest-side, #000 15%, transparent 70%); } .tf-prize-gun { position: relative; z-index: 1; width: 84%; max-height: 112px; object-fit: contain; rotate: -7deg; margin-bottom: 34px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--pk) 60%, transparent)) drop-shadow(0 12px 10px rgba(0, 0, 0, .55)); } .tf-prize-knife { position: absolute; z-index: 2; width: 88%; left: 6%; bottom: 14px; rotate: -3deg; filter: drop-shadow(0 0 12px rgba(255, 94, 126, .6)) drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); } .tf-loot { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tf-loot li { --lc: var(--ink-3); display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 14px; color: var(--ink-2); background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 16%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 55%); border-left: 3px solid var(--lc); } .tf-loot li.is-pack { --lc: var(--pk); color: var(--text); font-weight: 600; } .tf-loot li.is-knife { --lc: #ff5e7e; } .tf-loot li.is-anew { --lc: var(--accent); } .tf-loot img { width: 72px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lc) 50%, transparent)); } .tf-loot b { font-family: var(--font-display); font-size: 15px; } .tf-loot em { font-style: normal; font: 800 13.5px var(--font-mono); color: var(--text); white-space: nowrap; } .tf-coin { justify-self: center; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 900 12px/1 var(--font-display); font-style: normal; color: #5a3a00; background: radial-gradient(circle at 35% 30%, #fff4c2, #ffc83d 45%, #b97a10); box-shadow: inset 0 0 0 2px rgba(122, 74, 0, .45), 0 0 12px rgba(255, 200, 61, .45); } .tf-prize-rest { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; color: var(--ink-2); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .tf-prize-rest b { color: var(--text); font-family: var(--font-mono); } .tf-prize-rest .tf-coin { width: 22px; height: 22px; font-size: 10px; } @media (prefers-reduced-motion: no-preference) { .tf-prize-rays { animation: tf-rays-spin 50s linear infinite; } .tf-prize-gun { animation: tf-prize-float 5s ease-in-out infinite; } .tf-prize-knife { animation: tf-prize-float 5s ease-in-out -2.5s infinite; } .tf-prize.p1::before { content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--tf-pk-a), transparent 0 20%, #ffc83d 32%, #fff4c2 37%, transparent 48% 70%, #ffb020 82%, #fff 86%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: tf-pk-spin 6s linear infinite; } } @keyframes tf-prize-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } .tf-standings { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-standings li { display: grid; grid-template-columns: 40px 36px minmax(120px, 1fr) minmax(80px, 1.4fr) 96px 110px; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 14px; } .tf-standings li:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .tf-standings li.is-me { background: color-mix(in srgb, var(--ok) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); } .tf-st-place { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 14px var(--font-mono); color: var(--ink-2); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-standings .p1 .tf-st-place { color: #1a1206; background: linear-gradient(180deg, #ffe08a, #f7b733); box-shadow: 0 6px 20px -6px #f7b733; } .tf-standings .p2 .tf-st-place { color: #12151d; background: linear-gradient(180deg, #f2f4f8, #a0a8ba); } .tf-standings .p3 .tf-st-place { color: #1a0f06; background: linear-gradient(180deg, #ffb37a, #c8743c); } .tf-standings li .tf-st-place.is-medal { background: none; box-shadow: none; width: 34px; height: 40px; } .tf-st-place .tf-medal { --ms: 34px; } .tf-standings .tf-ava { width: 36px; height: 36px; } .tf-standings li[class*="role-"] .tf-ava { box-shadow: 0 0 0 2px var(--role); } .tf-st-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .tf-st-who .tf-nick { text-decoration: none; } .tf-st-bar { height: 8px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 7%, transparent); } .tf-st-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent)); } .tf-standings .p1 .tf-st-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--role-supreme) 40%, transparent), var(--gold-hi)); box-shadow: 0 0 14px var(--accent); } .tf-st-gain { text-align: right; font: 800 15px var(--font-mono); color: var(--ok); } .tf-st-prize { justify-self: end; padding: 4px 10px; border-radius: 9px; font: 800 12px var(--font-body); letter-spacing: .04em; white-space: nowrap; color: var(--ink-2); background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-standings .is-top .tf-st-prize { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-winners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; } .tf-winner { --pc: var(--role-supreme); display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent); } .tf-winner.p2 { --pc: #c9d2e3; } .tf-winner.p3 { --pc: #e0894a; } .tf-winner .tf-medal { --ms: 40px; } .tf-winner .tf-ava { width: 38px; height: 38px; } .tf-winner .tf-nick { text-decoration: none; } .tf-winner > b { font: 800 15px var(--font-mono); color: var(--ok); } .tf-winner p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; } .tf-winners-rest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; } .tf-winners-rest li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-winners-rest b { color: var(--ink-3); font: 700 13px var(--font-mono); } .tf-winners-rest .tf-nick { font-size: 14px; text-decoration: none; } .tf-winners-rest span { color: var(--ok); font: 700 13px var(--font-mono); } .tf-winners-rest em { grid-column: 2 / -1; font-style: normal; color: var(--ink-3); font-size: 12.5px; } .tf-giveaway { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center; margin-top: 36px; padding: 34px; border-radius: 28px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--role-supreme) 26%, transparent); } .tf-giveaway::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 300px at 18% 50%, color-mix(in srgb, var(--role-supreme) 22%, transparent), transparent 70%), radial-gradient(360px 260px at 100% 100%, color-mix(in srgb, var(--role-boss) 14%, transparent), transparent 70%); } .tf-gv-knife { width: 100%; max-width: 440px; justify-self: center; rotate: 0deg; filter: drop-shadow(0 0 30px rgba(255, 94, 126, .45)); animation: tf-float 6s ease-in-out infinite; } .tf-gv-body h2 { margin: 6px 0 12px; font-size: clamp(24px, calc(3vw * var(--vz)), 34px); } .tf-gv-body p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.6; } .tf-gv-body p b { color: var(--text); } .tf-gv-body a { color: var(--accent); } .tf-gv-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-gv-count span { color: var(--ink-2); font-weight: 600; } .tf-gv-count b { font: 800 22px var(--font-mono); color: var(--role-supreme); } .tf-gv-count em { font-style: normal; font-weight: 700; color: var(--ok); } .tf-gv-history { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; color: var(--ink-3); font-size: 13.5px; } .tf-gv-history b { color: var(--ink-2); } @media (max-width: 1024px) { .tf-tour-hero-in { grid-template-columns: 1fr; } .tf-tour-copy { padding-bottom: 0; } .tf-tour-podium { min-height: 300px; max-width: 520px; width: 100%; justify-self: center; } .tf-prizes, .tf-winners { grid-template-columns: 1fr; } .tf-prize.p1, .tf-prize.p2, .tf-prize.p3 { order: 0; } .tf-giveaway { grid-template-columns: 1fr; padding: 24px; } .tf-gv-knife { max-width: 300px; } } @media (max-width: 720px) { .tf-cd-cells > div { min-width: 0; flex: 1; padding-inline: 6px; } .tf-cd-cells b { font-size: 24px; } .tf-standings li { grid-template-columns: 34px 30px minmax(0, 1fr) auto; gap: 10px; } .tf-standings .tf-ava { width: 30px; height: 30px; } .tf-st-bar { grid-column: 3 / -1; grid-row: 2; } .tf-st-prize { display: none; } .tf-winners-rest { grid-template-columns: 1fr; } } /* Непарна остання картка новин — горизонтально на всю ширину, щоб сітка не мала дірки. */ @media (min-width: 761px) { .tf-nw-card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: none; } .tf-nw-card:last-child:nth-child(odd) .tf-nw-cover { aspect-ratio: auto; min-height: 200px; } .tf-nw-card:last-child:nth-child(odd) .tf-nw-card-body { align-content: center; padding: 24px 26px; } } /* ----- сторінка послуги -------------------------------------------------------- */ .tf-svc-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-svc-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(680px 420px at 76% 62%, color-mix(in srgb, var(--role) 22%, transparent), transparent 70%), radial-gradient(520px 300px at 6% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-svc-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: end; padding-top: 32px; } .tf-svc-copy { padding-bottom: 40px; } .tf-svc-hero .tf-eyebrow { color: var(--role); } .tf-svc-hero h1 { margin: 6px 0 14px; font-size: clamp(32px, calc(4.6vw * var(--vz)), 58px); font-weight: 900; line-height: 1.04; } .tf-svc-hero.is-pack h1 { color: var(--role); text-shadow: 0 0 40px color-mix(in srgb, var(--role) 45%, transparent); } .tf-svc-hero .tf-hero-sub { font-size: 16.5px; margin-bottom: 18px; } .tf-svc-high { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; max-width: 620px; } .tf-svc-high li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; } .tf-svc-high li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: var(--role); box-shadow: 0 0 10px var(--role); } .tf-svc-art { position: relative; height: 420px; } .tf-svc-art img { position: absolute; bottom: 0; height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 0 34px color-mix(in srgb, var(--role) 45%, transparent)); } .tf-svc-art .a { left: 18%; z-index: 1; } .tf-svc-art .b { right: 0; height: 86%; filter: brightness(.6) drop-shadow(0 0 30px color-mix(in srgb, var(--role) 35%, transparent)); scale: -1 1; } .tf-svc-art .is-solo { left: 50%; translate: -50% 0; height: 92%; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--role) 35%, transparent)) saturate(.9); } .tf-svc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; padding-block: 28px 64px; } .tf-svc-main { display: grid; gap: 20px; min-width: 0; } .tf-svc-side { display: grid; gap: 16px; position: sticky; top: calc(var(--top-h) + 16px); } .tf-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; } .tf-perks > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 60%, transparent); } .tf-perks dt { color: var(--ink-2); font-size: 14px; } .tf-perks dd { margin: 0; font: 700 14px var(--font-mono); color: var(--role, var(--text)); text-align: right; white-space: nowrap; } .tf-svc .tf-perks dd { color: color-mix(in srgb, var(--accent) 80%, var(--text)); } .tf-perks .is-no { opacity: .45; } .tf-perks .is-me { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .tf-unban-lead { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; } .tf-unban-mine { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; } .tf-unban-mine a { color: var(--accent); } .tf-perks .is-no dd { color: var(--ink-3) !important; } .tf-svc-skins .tf-guns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-svc-skin-name { margin-left: auto; color: var(--role); font-weight: 700; } .tf-svc-desc { font-size: 16px; } .tf-svc-flags h3 { margin: 6px 0 12px; font-size: 18px; } .tf-svc-flags p { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; } .tf-svc-flags code { font: 500 12.5px var(--font-mono); color: var(--accent); } .tf-flag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tf-flag-chips span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 800 14px var(--font-mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .tf-buybox { display: grid; gap: 14px; padding: 24px; border-color: color-mix(in srgb, var(--role) 32%, transparent); box-shadow: 0 30px 70px -44px var(--role); } .tf-buybox .tf-dur a { position: relative; padding: 9px 13px; border-radius: 11px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); text-decoration: none; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } .tf-buybox .tf-dur a:hover { color: var(--text); } .tf-buybox .tf-dur a[aria-current] { color: var(--text); border-color: var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); } .tf-buybox-price { display: flex; align-items: baseline; gap: 8px; } .tf-buybox-price b { font: 900 46px/1 var(--font-display); color: var(--text); } .tf-buybox-price span { color: var(--ink-2); font-weight: 700; } .tf-buybox-term { margin: -6px 0 2px; color: var(--ink-3); font-size: 13.5px; } .tf-buybox .tf-form { gap: 12px; } .tf-buybox-kv { margin: 0; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); } .tf-buybox-kv > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; } .tf-buybox-kv dt { color: var(--ink-3); } .tf-buybox-kv dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-buybox-kv code { font: 600 12.5px var(--font-mono); } .tf-buybox-warn { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); } .tf-buybox-note { margin: 0; color: var(--ink-2); font-size: 14px; } .tf-buybox .tf-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .tf-svc-meta dl { margin: 0; display: grid; gap: 8px; } .tf-svc-meta dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .tf-svc-meta dt { color: var(--ink-3); } .tf-svc-meta dd { margin: 0; font-weight: 600; text-align: right; } @media (max-width: 1024px) { .tf-svc-hero-in, .tf-svc { grid-template-columns: 1fr; } .tf-svc-copy { padding-bottom: 0; } .tf-svc-art { height: 300px; max-width: 520px; width: 100%; justify-self: center; } .tf-svc-side { position: static; order: -1; } } @media (max-width: 640px) { .tf-svc-high, .tf-perks { grid-template-columns: 1fr; } .tf-svc-skins .tf-guns { grid-template-columns: 1fr 1fr; } } /* ----- мої замовлення й замовлення ------------------------------------------------ */ .tf-orders .tf-section:first-child { padding-top: 8px; } .tf-grants { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .tf-grant { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--role) 30%, transparent); box-shadow: 0 24px 60px -42px var(--role); } .tf-grant::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px 180px at 100% 0%, color-mix(in srgb, var(--role) 18%, transparent), transparent 70%); } .tf-grant-art { position: absolute; right: -14px; top: 6px; height: 150px; z-index: -1; opacity: .85; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--role) 45%, transparent)); } .tf-grant .tf-eyebrow { color: var(--role); margin: 0; } .tf-grant h3 { margin: 0; font-size: 18px; max-width: 70%; } .tf-grant-srv { margin: 0 0 6px; color: var(--ink-3); font-size: 13px; } .tf-grant-left { display: flex; align-items: baseline; gap: 8px; } .tf-grant-left b { font: 900 34px/1 var(--font-display); color: var(--role); } .tf-grant-left span { color: var(--ink-2); font-weight: 600; } .tf-grant .tf-term { --st: var(--role); } .tf-grant .tf-term i { background: linear-gradient(90deg, color-mix(in srgb, var(--role) 50%, transparent), var(--role)); } .tf-grant-till { margin: 2px 0 0; color: var(--ink-3); font: 600 12px var(--font-mono); } .tf-olist { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content; column-gap: 20px; } /* Гаманець (2026-10-18). */ .tf-wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; } .tf-wallet-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 8px; padding: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .tf-wallet-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); } .tf-wallet-sum { margin: 0; display: flex; align-items: baseline; gap: 10px; } .tf-wallet-sum b { font: 900 clamp(38px, calc(5vw * var(--vz)), 56px) var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; } .tf-wallet-sum span { font: 800 18px var(--font-display); color: var(--ink-2); } .tf-wallet-top { display: grid; gap: 14px; } .tf-wallet-presets { display: flex; flex-wrap: wrap; gap: 8px; } .tf-wallet-presets label { cursor: pointer; } .tf-wallet-presets input { position: absolute; opacity: 0; pointer-events: none; } .tf-wallet-presets span { display: inline-block; padding: 8px 14px; border-radius: 12px; font: 700 14px var(--font-mono); background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-wallet-presets input:checked + span { color: #1a1206; background: var(--accent); border-color: var(--accent); } .tf-wallet-presets input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .tf-wallet-log { grid-column: 1 / -1; } .tf-wallet-log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tf-wallet-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); } .tf-wallet-log li span { display: grid; gap: 2px; min-width: 0; } .tf-wallet-log small a { color: var(--ink-3); font-size: 12.5px; } .tf-wallet-log time { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; } .tf-wallet-log em { font: 800 14px var(--font-mono); font-style: normal; white-space: nowrap; } .tf-wallet-log .is-in em { color: var(--ok); } .tf-wallet-log .is-out em { color: var(--ink-2); } @media (max-width: 800px) { .tf-wallet { grid-template-columns: 1fr; } .tf-wallet-log li { grid-template-columns: minmax(0, 1fr) auto; } .tf-wallet-log time { grid-row: 2; } } .tf-orow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); text-decoration: none; position: relative; transition: border-color .15s, translate .15s; } .tf-orow::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--role); } .tf-orow:hover { border-color: color-mix(in srgb, var(--role) 45%, transparent); translate: 0 -1px; } .tf-orow.is-expired, .tf-orow.is-cancelled, .tf-orow.is-refunded, .tf-orow.is-failed { opacity: .72; } .tf-orow-what { display: grid; min-width: 0; } .tf-orow-what b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-orow-what small { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; } .tf-orow-what em { font-style: normal; font-weight: 800; font-size: 10.5px; letter-spacing: .08em; color: var(--role); } .tf-orow-ref { color: var(--ink-2); font: 600 12.5px var(--font-mono); } .tf-orow-sum { font: 800 15px var(--font-mono); text-align: right; white-space: nowrap; } .tf-orow-sum small { color: var(--ink-3); font-size: 11.5px; } .tf-orow time { color: var(--ink-3); font: 600 12.5px var(--font-mono); text-align: right; } .tf-ohero { --c: var(--warn); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-ohero.is-paid { --c: var(--ok); } .tf-ohero.is-failed { --c: var(--danger); } .tf-ohero.is-expired, .tf-ohero.is-cancelled, .tf-ohero.is-refunded { --c: var(--ink-3); } .tf-ohero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 320px at 10% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), radial-gradient(520px 300px at 90% 0%, color-mix(in srgb, var(--role) 12%, transparent), transparent 70%); } .tf-ohero-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 36px; } .tf-ohero-ico { width: 104px; height: 104px; border-radius: 32px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 6%, transparent), 0 30px 60px -30px var(--c); } .tf-ohero-ico svg { width: 52px; height: 52px; } .tf-ohero.is-pending .tf-ohero-ico svg { animation: tf-spin-slow 6s linear infinite; } @keyframes tf-spin-slow { to { rotate: 360deg; } } .tf-ohero .tf-eyebrow code { font: 700 12px var(--font-mono); color: var(--text); letter-spacing: 0; text-transform: none; margin-left: 6px; } .tf-ohero h1 { margin: 6px 0 10px; font-size: clamp(28px, calc(3.8vw * var(--vz)), 46px); line-height: 1.06; } .tf-ohero-msg { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .tf-ohero-msg code { font: 600 14px var(--font-mono); color: var(--text); } .tf-pay-howto h3 { margin: 6px 0 10px; } .tf-pay-req { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; white-space: pre-line; font: 500 15px/1.6 var(--font-mono); background: var(--bg); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); } .tf-pay-note { margin: 0; color: var(--ink-2); font-size: 14px; } .tf-olinks { display: grid; gap: 8px; } @media (max-width: 860px) { .tf-olist { grid-template-columns: minmax(0, 1fr); } .tf-orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what sum" "ref state" "time time"; row-gap: 8px; } .tf-orow-what { grid-area: what; } .tf-orow-sum { grid-area: sum; } .tf-orow-ref { grid-area: ref; } .tf-orow .tf-state { grid-area: state; justify-self: end; } .tf-orow time { grid-area: time; text-align: left; } } @media (max-width: 560px) { .tf-ohero-in { grid-template-columns: 1fr; gap: 16px; padding-block: 26px; } .tf-ohero-ico { width: 72px; height: 72px; border-radius: 22px; } .tf-ohero-ico svg { width: 36px; height: 36px; } } /* ----- налаштування: профіль і тема ------------------------------------------------ */ .tf-setnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; } .tf-setnav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-setnav a:hover { color: var(--text); } .tf-setnav a[aria-current] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-setnav svg { width: 18px; height: 18px; } .tf-setnav .tf-setnav-back { margin-left: auto; background: none; border-color: transparent; } .tf-settings { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; padding-bottom: 56px; } .tf-settings-main { gap: 20px; } .tf-settings-side { display: grid; gap: 16px; position: sticky; top: calc(var(--top-h) + 16px); } .tf-settings-side .tf-form { gap: 14px; } .tf-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tf-settings .tf-panel-head { margin-bottom: 0; } .tf-settings .tf-eyebrow { margin: 4px 0 -8px; } .tf-set-h { margin: 4px 0 2px; font-size: 18px; } .tf-set-p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; } .tf-set-p code, .tf-set-small code { font: 600 12.5px var(--font-mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 6px; } .tf-set-small { font-size: 13px; color: var(--ink-3); } .tf-set-card { display: grid; gap: 14px; } /* довгий стан («пароль не встановлено — доступ лише за SteamID») переноситься, а не розпирає колонку */ .tf-settings .tf-state { white-space: normal; align-items: flex-start; border-radius: 12px; line-height: 1.4; } .tf-settings .tf-state::before { flex: none; margin-top: .42em; } .tf-field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .tf-field select option { background: var(--surface); color: var(--text); } .tf-field label output { float: right; color: var(--accent); font: 700 13px var(--font-mono); } .tf-field input[type="range"] { padding: 0; height: 32px; accent-color: var(--accent); background: none; border: 0; box-shadow: none; } .tf-avatar-edit { display: flex; align-items: center; gap: 18px; } .tf-ava-xl { width: 88px; height: 88px; font-size: 34px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent), 0 16px 40px -16px var(--accent); } .tf-avatar-edit-in { display: grid; gap: 8px; min-width: 0; flex: 1; } .tf-avatar-edit-in input[type="file"] { width: 100%; padding: 10px; border-radius: 12px; font-size: 14px; color: var(--ink-2); background: var(--bg); border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); } .tf-avatar-edit-in input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 9px; border: 0; cursor: pointer; font: 700 13.5px var(--font-body); color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; } .tf-check input { width: 16px; height: 16px; accent-color: var(--accent); } .tf-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 14.5px; } .tf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tf-switch-ui { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; transition: background-color .2s; background: color-mix(in srgb, var(--text) 16%, transparent); } .tf-switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: translate .2s cubic-bezier(.2,.7,.2,1); box-shadow: 0 2px 6px rgba(0,0,0,.35); } .tf-switch input:checked + .tf-switch-ui { background: var(--accent); } .tf-switch input:checked + .tf-switch-ui::after { translate: 20px 0; } .tf-switch input:focus-visible + .tf-switch-ui { outline: 2px solid var(--text); outline-offset: 3px; } .tf-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .tf-preset { display: grid; gap: 10px; padding: 10px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--text); background: var(--p-bg); border: 1px solid color-mix(in srgb, var(--p-txt) 14%, transparent); transition: translate .15s, border-color .15s; } .tf-preset:hover { translate: 0 -2px; } .tf-preset[aria-pressed="true"] { border-color: var(--p-acc); box-shadow: 0 0 0 2px var(--p-acc), 0 12px 30px -14px var(--p-acc); } .tf-preset-swatch { display: flex; gap: 4px; height: 34px; padding: 6px; border-radius: 10px; background: var(--p-srf); } .tf-preset-swatch i { flex: 1; border-radius: 6px; } .tf-preset-swatch i:nth-child(1) { background: var(--p-acc); flex: 2; } .tf-preset-swatch i:nth-child(2) { background: var(--p-txt); } .tf-preset-swatch i:nth-child(3) { background: color-mix(in srgb, var(--p-txt) 45%, var(--p-srf)); } .tf-preset-name { font: 700 13px var(--font-body); color: var(--p-txt); } .tf-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tf-color { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .tf-color:hover { border-color: color-mix(in srgb, var(--text) 22%, transparent); } .tf-color input[type="color"] { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; } .tf-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .tf-color input[type="color"]::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 10px; } .tf-color input[type="color"]::-moz-color-swatch { border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius: 10px; } .tf-color-txt { display: grid; min-width: 0; } .tf-color-txt b { font-size: 13.5px; } .tf-color-txt code { color: var(--ink-3); font: 600 12px var(--font-mono); } .tf-theme-preview { display: grid; gap: 12px; } .tf-theme-preview-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tf-theme-preview .tf-term { --st: var(--accent); } .tf-logins ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .tf-logins li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); } .tf-login-name { flex: 1; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; } .tf-login-name svg { width: 18px; height: 18px; } .tf-logins form { margin: 0; } @media (max-width: 1024px) { .tf-settings { grid-template-columns: minmax(0, 1fr); } .tf-settings-side { position: static; } /* в одну колонку панель SteamID, поки він не підтверджений (чи код у дорозі), — першою, над формою */ .tf-settings-side:has(.tf-slink) { display: contents; } .tf-slink:not(.is-verified), .tf-slink.is-pending, .tf-slink.is-used { order: -1; } } @media (max-width: 640px) { .tf-settings-grid, .tf-colors { grid-template-columns: 1fr; } .tf-setnav .tf-setnav-back { margin-left: 0; } .tf-avatar-edit { align-items: flex-start; } .tf-ava-xl { width: 64px; height: 64px; font-size: 26px; } } .tf-settings-grid { align-items: start; } .tf-field { align-content: start; } /* ----- 404 / 500 ------------------------------------------------------------------- */ .tf-err { position: relative; overflow: hidden; isolation: isolate; min-height: calc(calc(100vh * var(--vz)) - var(--top-h) - 120px); display: grid; place-items: center; } .tf-err::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 360px at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-err.is-500::before { background: radial-gradient(560px 360px at 50% 40%, color-mix(in srgb, var(--danger) 14%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--text) 3%, transparent) 31px 32px); } .tf-err-in { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: 48px; } .tf-err-code { display: flex; align-items: center; gap: .06em; font: 900 clamp(110px, calc(18vw * var(--vz)), 200px)/1 "Unbounded", "Arial Black", sans-serif; background: linear-gradient(180deg, var(--gold-hi), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 20px 50px color-mix(in srgb, var(--ember) 35%, transparent)); } .tf-err.is-500 .tf-err-code { background-image: linear-gradient(180deg, #ff8a9a, var(--danger)); } /* Приціл замість нуля: коло з чотирма рисками, повільно «шукає» ціль. */ .tf-err-cross { position: relative; width: .74em; height: .74em; border-radius: 50%; border: .085em solid var(--accent); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent); animation: tf-aim 3.2s ease-in-out infinite; } .tf-err.is-500 .tf-err-cross { border-color: var(--danger); box-shadow: 0 0 40px color-mix(in srgb, var(--danger) 45%, transparent); } .tf-err-cross::before, .tf-err-cross::after, .tf-err-cross i::before, .tf-err-cross i::after { content: ""; position: absolute; background: currentColor; color: var(--accent); } .tf-err.is-500 .tf-err-cross::before, .tf-err.is-500 .tf-err-cross::after, .tf-err.is-500 .tf-err-cross i::before, .tf-err.is-500 .tf-err-cross i::after { color: var(--danger); } .tf-err-cross::before { left: 50%; top: -18%; width: .05em; height: 30%; translate: -50% 0; } .tf-err-cross::after { left: 50%; bottom: -18%; width: .05em; height: 30%; translate: -50% 0; } .tf-err-cross i::before { top: 50%; left: -18%; height: .05em; width: 30%; translate: 0 -50%; } .tf-err-cross i::after { top: 50%; right: -18%; height: .05em; width: 30%; translate: 0 -50%; } @keyframes tf-aim { 0%, 100% { translate: 0 0; } 25% { translate: .03em -.04em; } 50% { translate: -.04em .02em; } 75% { translate: .02em .04em; } } .tf-err h1 { margin: 6px 0 0; font-size: clamp(26px, calc(3.6vw * var(--vz)), 40px); } .tf-err p { margin: 0; color: var(--ink-2); font-size: 17px; } .tf-err-feed { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); font: 700 14px var(--font-body); } .tf-err-feed b { color: #8fb8ff; max-width: calc(50vw * var(--vz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-weight: 600; } .tf-err-feed img { height: 22px; width: auto; filter: brightness(1.2); } .tf-err-feed span { color: #ff7a7a; } .tf-err-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; } /* ----- прив'язка SteamID з гри (/link) ------------------------------------------------ */ .tf-slink { display: grid; gap: 12px; border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .tf-slink.is-verified:not(.is-pending):not(.is-used) { border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .tf-slink .tf-eyebrow { margin: 0; } .tf-slink form { margin: 0; } .tf-slink-code { justify-self: stretch; padding: 16px; border-radius: 16px; cursor: pointer; text-align: center; font: 600 20px var(--font-mono); color: var(--ink-2); background: var(--bg); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); transition: border-color .15s; } .tf-slink-code b { color: var(--gold-hi); font-weight: 800; letter-spacing: .14em; font-size: 26px; } .tf-slink-code:hover { border-style: solid; } .tf-slink-wait { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; } .tf-slink-wait i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: tf-spin-slow .9s linear infinite; } .tf-slink-wait time { margin-left: auto; font: 700 13px var(--font-mono); color: var(--text); } .tf-slink-who { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .tf-slink-who b { font-size: 17px; } .tf-slink-who code { color: var(--ink-2); font: 600 13px var(--font-mono); } .tf-slink-answer { display: grid; gap: 8px; } /* ========================================================================== Етап 3: команда — хто адміни, вимоги, заявка з тестом (2026-10-02) ========================================================================== */ .tf-mod-hero.is-team { --mood: var(--role-admin); } .tf-team-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .tf-team { padding-bottom: 56px; } .tf-team-h { margin: 0 0 16px; font-size: 22px; } .tf-extra.is-admin .tf-extra-price b { font: 800 15px var(--font-body); color: var(--role-admin); } /* хто в команді: картка на людину, колір ролі — з .role-* */ .tf-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 14px; } :where(.tf-crew-card) { --role: var(--role-admin); } .tf-crew-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px 20px; border-radius: 22px; text-align: center; color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate; background: var(--surface); border: 1px solid color-mix(in srgb, var(--role) 22%, transparent); transition: translate .2s, border-color .2s; } .tf-crew-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; z-index: -1; background: radial-gradient(140px 90px at 50% 0%, color-mix(in srgb, var(--role) 30%, transparent), transparent 75%); } .tf-crew-card:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--role) 55%, transparent); } .tf-crew-ava { width: 72px; height: 72px; margin-bottom: 6px; font-size: 28px; color: var(--role); box-shadow: 0 0 0 3px var(--role), 0 0 30px -4px color-mix(in srgb, var(--role) 70%, transparent); } .tf-crew-nick { max-width: 100%; font-size: 16.5px; } .tf-crew-meta { color: var(--ink-3); font-size: 12.5px; font-weight: 600; } /* довгі назви серверів («o==[]::::> КОЗАЦЬКА СІЧ <::::[]==o | …») — в один рядок, повна — у title */ .tf-crew-meta.is-servers { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-crew-card.is-you { --role: var(--ink-3); border-style: dashed; background: none; } .tf-crew-card.is-you .tf-crew-ava { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 18%, transparent); color: var(--ink-2); } .tf-crew-card.is-you .tf-crew-nick { font-weight: 700; color: var(--ink-2); } .tf-crew-card.is-you:hover { border-color: var(--role-admin); } .tf-crew-card.is-you:hover .tf-crew-meta { color: var(--role-admin); } /* що робить адмін · вимоги */ .tf-team-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .tf-duties ul, .tf-reqs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .tf-duties li, .tf-req { display: flex; gap: 14px; align-items: flex-start; } .tf-duties li > i { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #8fb3ff; background: color-mix(in srgb, var(--role-admin) 14%, transparent); border: 1px solid color-mix(in srgb, var(--role-admin) 35%, transparent); } .tf-duties li > i svg { width: 21px; height: 21px; } .tf-duties b, .tf-req b { display: block; font-size: 15px; margin-top: 2px; } .tf-duties p, .tf-req p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } .tf-req p a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; } .tf-req > i { flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font-mono); font-style: normal; color: var(--ink-2); background: color-mix(in srgb, var(--text) 7%, transparent); } .tf-req > i svg { width: 16px; height: 16px; } .tf-req.is-ok > i { color: #062b14; background: var(--ok); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--ok) 70%, transparent); } .tf-req.is-no > i { color: #ff8593; background: color-mix(in srgb, var(--danger) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 50%, transparent); } .tf-req.is-no b { color: var(--text); } .tf-req.is-test > i { color: #8fb3ff; background: color-mix(in srgb, var(--role-admin) 16%, transparent); } .tf-mono { font-family: var(--font-mono); } .tf-team .tf-steps { margin-top: 8px; } /* блок заявки: стан замість форми */ .tf-apply-card { --st: var(--role-admin); display: grid; justify-items: center; gap: 10px; max-width: 760px; margin-inline: auto; padding: 36px 28px; text-align: center; border-radius: 26px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--st) 30%, transparent); box-shadow: 0 30px 80px -50px var(--st); } .tf-apply-card.is-approved, .tf-apply-card.is-staff { --st: var(--ok); } .tf-apply-card.is-pending { --st: var(--warn); } .tf-apply-card.is-failed, .tf-apply-card.is-rejected { --st: var(--danger); } .tf-apply-card h3 { margin: 4px 0 0; font-size: clamp(22px, calc(3vw * var(--vz)), 28px); } .tf-apply-card > p { margin: 0; max-width: 56ch; color: var(--ink-2); line-height: 1.55; } .tf-apply-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent); border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); } .tf-apply-ico svg { width: 30px; height: 30px; } .tf-apply-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } .tf-apply-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; } .tf-apply-facts > div { padding: 8px 14px; border-radius: 12px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-apply-facts dt { color: var(--ink-3); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .tf-apply-facts dd { margin: 2px 0 0; font: 700 14px var(--font-mono); } .tf-apply-reply { margin: 6px 0 0; width: 100%; max-width: 600px; padding: 14px 18px; border-radius: 14px; text-align: left; line-height: 1.55; background: var(--bg); border-left: 3px solid var(--st); } .tf-apply-reply span { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .tf-apply-next { color: var(--text) !important; font-weight: 700; } /* форма: анкета, тест, панель надсилання */ .tf-team-form { display: grid; gap: 18px; } .tf-step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font: 900 15px var(--font-display); color: var(--on-accent); background: linear-gradient(145deg, var(--gold-hi), var(--ember)); } .tf-quiz-sub { margin-left: auto; color: var(--ink-3); font-size: 13px; font-weight: 600; } .tf-quiz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .tf-q { margin: 0; padding: 18px 18px 16px; border-radius: 18px; background: var(--bg); min-width: 0; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transition: border-color .2s; } .tf-q.is-answered { border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .tf-q.has-error, .tf-q.is-missing { border-color: color-mix(in srgb, var(--danger) 65%, transparent); } /* legend браузер садить на рамку fieldset — float знімає його звідти */ .tf-q legend { float: left; width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 15.5px; line-height: 1.45; } .tf-q legend b { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 9px; font: 800 13px var(--font-mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); } .tf-q.is-answered legend b { color: var(--on-accent); background: var(--accent); } .tf-q-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tf-q-opt { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink-2); background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); transition: border-color .15s, background-color .15s, color .15s; } .tf-q-opt:hover { border-color: color-mix(in srgb, var(--text) 24%, transparent); color: var(--text); } .tf-q-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tf-q-opt::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); transition: border-color .15s, box-shadow .15s; } .tf-q-opt:has(input:checked) { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .tf-q-opt:has(input:checked)::before { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--accent); } .tf-q-opt:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; } .tf-team-send { display: grid; gap: 12px; } .tf-team-rules { font-size: 14.5px; color: var(--text); font-weight: 600; } .tf-team-rules.has-error span { color: #ff8593; } .tf-team-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; } .tf-quiz-progress { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; } .tf-quiz-progress b { font-family: var(--font-mono); color: var(--text); } .tf-quiz-progress i { width: 120px; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); } .tf-quiz-progress s { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold-hi)); transition: width .25s; } @media (min-width: 721px) { /* панель надсилання їде разом із тестом — прогрес і кнопка завжди під рукою */ .tf-team-send { position: sticky; bottom: 12px; z-index: 5; padding: 16px 22px; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 -20px 50px -30px #000; } } @media (max-width: 900px) { .tf-team-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .tf-q-opts { grid-template-columns: minmax(0, 1fr); } .tf-quiz-sub { margin-left: 0; width: 100%; } .tf-quiz-progress { width: 100%; } .tf-quiz-progress i { flex: 1; } .tf-team-send-row .tf-btn { width: 100%; } .tf-apply-card { padding: 28px 18px; } .tf-quiz { padding: 20px 14px; } .tf-q { padding: 14px 12px 12px; } .tf-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-crew-card { padding: 20px 10px 16px; gap: 5px; } .tf-crew-ava { width: 56px; height: 56px; font-size: 22px; } .tf-crew-nick { font-size: 14.5px; } .tf-crew-meta { font-size: 11.5px; } } /* ========================================================================== Етап 5: клани — список і рейтинг, сторінка клану, створення (2026-10-02) ========================================================================== */ /* Колір клану — лише з класу clan-<колір> (на самому елементі чи на предку). Типового --clan ніде не ставимо: у тегу воно перекривало успадкований колір, і всі теги були золоті. Запас — var(--clan, var(--accent)). */ .clan-gold { --clan: #f7b733; } .clan-ember { --clan: #ff5e2b; } .clan-crimson { --clan: #ff3d6e; } .clan-blue { --clan: #3b7bff; } .clan-green { --clan: #34e08a; } .clan-purple { --clan: #a45bff; } .clan-cyan { --clan: #22d3ee; } .clan-silver { --clan: #c7cede; } .tf-clantag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; white-space: nowrap; font: 800 12.5px var(--font-mono); letter-spacing: .03em; text-decoration: none; color: var(--clan, var(--accent)); background: color-mix(in srgb, var(--clan, var(--accent)) 13%, transparent); border: 1px solid color-mix(in srgb, var(--clan, var(--accent)) 45%, transparent); } .tf-mod-hero.is-clans { --mood: var(--ember); } .tf-mod-hero.is-clan { --mood: var(--clan, var(--accent)); } .tf-mod-hero.is-clan .tf-mod-stencil { font-size: clamp(110px, calc(16vw * var(--vz)), 230px); } .tf-clans, .tf-clan { padding-bottom: 56px; } /* запрошення */ .tf-cinv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tf-cinv li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-cinv li > span { flex: 1; min-width: 160px; color: var(--ink-2); font-size: 14px; } .tf-cinv form { display: flex; gap: 8px; margin: 0; } /* клан місяця */ .tf-cbest { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 24px; padding: 26px 28px; border-radius: 24px; color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate; background: var(--surface); border: 1px solid color-mix(in srgb, var(--clan, var(--accent)) 40%, transparent); box-shadow: 0 30px 80px -50px var(--clan, var(--accent)); } .tf-cbest::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 220px at 0% 50%, color-mix(in srgb, var(--clan, var(--accent)) 22%, transparent), transparent 70%); } .tf-cbest .tf-eyebrow { grid-column: 1 / -1; margin: 0; } .tf-cbest-tag { grid-row: span 2; font: 900 clamp(34px, calc(5vw * var(--vz)), 56px)/1 "Unbounded", "Arial Black", sans-serif; color: var(--clan, var(--accent)); text-shadow: 0 0 30px color-mix(in srgb, var(--clan, var(--accent)) 55%, transparent); } .tf-cbest-name { font: 800 22px var(--font-display); } .tf-cbest dl { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; } .tf-cbest dd { margin: 0; font: 800 20px var(--font-mono); } .tf-cbest dt { color: var(--ink-3); font-size: 12px; font-weight: 600; } /* підсумок місяця клану під доріжками: вбивства, смерті, K/D, шкода */ .tf-cmonth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; } .tf-cmonth div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-cmonth dd { margin: 0; font: 800 19px var(--font-mono); } .tf-cmonth dt { color: var(--ink-3); font-size: 12px; font-weight: 600; } @media (max-width: 560px) { .tf-cmonth { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* рейтинг (і історія місяців) — рядки-посилання на спільних колонках */ .tf-crank { display: grid; gap: 8px; grid-template-columns: 48px minmax(0, 2.2fr) repeat(5, minmax(0, 1fr)); } .tf-crank.is-history { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); } .tf-crank-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .15s, translate .15s; } a.tf-crank-row:hover { border-color: color-mix(in srgb, var(--clan, var(--accent)) 50%, transparent); translate: 0 -1px; } .tf-crank-row.is-head { background: none; border: 0; padding-block: 0; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tf-crank-row.is-me { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .tf-crank-n { font: 800 18px var(--font-mono); color: var(--ink-2); } .tf-crank-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tf-crank-m { color: var(--ink-2); font-family: var(--font-mono); } .tf-crank-stars { font: 800 17px var(--font-mono); color: var(--gold-hi); } .tf-crank-stars i { font-style: normal; margin-left: 2px; } /* досягнення й бонуси */ .tf-cgoals { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .tf-cgoals th, .tf-cgoals td { padding: 10px 12px; text-align: center; font-size: 14px; } .tf-cgoals thead th { color: var(--ink-3); font: 800 12px var(--font-mono); padding-block: 0; } .tf-cgoals tbody th { text-align: left; font-weight: 700; } .tf-cgoals tbody td { font: 700 15px var(--font-mono); background: var(--bg); } .tf-cgoals tbody td:last-child { border-radius: 0 10px 10px 0; } .tf-cgoals tbody tr td:nth-child(2) { border-radius: 10px 0 0 10px; } .tf-cnotes { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; display: grid; gap: 4px; } .tf-cbon { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tf-cbon-item { display: flex; gap: 14px; align-items: flex-start; } .tf-cbon-need { flex: none; min-width: 44px; padding: 6px 8px; border-radius: 10px; text-align: center; font: 800 13px var(--font-mono); color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .tf-cbon-item b { font-size: 15px; } .tf-cbon-item p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } .tf-cbon.is-now .is-off { opacity: .45; } .tf-cbon.is-now .is-off .tf-cbon-need { color: var(--ink-3); background: none; border-color: color-mix(in srgb, var(--text) 15%, transparent); } .tf-cbon.is-now .is-on .tf-cbon-need { color: #062b14; background: var(--ok); border-color: var(--ok); } .tf-cbal { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); background: color-mix(in srgb, var(--role-admin) 8%, transparent); border: 1px solid color-mix(in srgb, var(--role-admin) 30%, transparent); } .tf-cbal svg { flex: none; width: 20px; height: 20px; color: #8fb3ff; } /* сторінка клану */ .tf-chero { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; } .tf-chero-tag { flex: none; font: 900 clamp(38px, calc(6vw * var(--vz)), 72px)/1 "Unbounded", "Arial Black", sans-serif; color: var(--clan, var(--accent)); text-shadow: 0 0 40px color-mix(in srgb, var(--clan, var(--accent)) 55%, transparent); } .tf-chero h1 { margin: 0 0 6px; } .tf-chero .tf-hero-sub { margin: 0 0 8px; } .tf-chero-meta { margin: 0; color: var(--ink-2); font-size: 14px; font-weight: 600; } .tf-team-cta form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .tf-cjoin { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .tf-cjoin input { flex: 1; min-width: 220px; padding: 11px 14px; border-radius: 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } .tf-cstars { display: flex; align-items: center; gap: 2px; font-size: 20px; color: color-mix(in srgb, var(--text) 18%, transparent); } .tf-cstars i { font-style: normal; } .tf-cstars i.is-on { color: var(--gold-hi); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); } .tf-cstars b { margin-left: 10px; font: 800 16px var(--font-mono); color: var(--text); } .tf-cwarn { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--text); background: color-mix(in srgb, var(--warn, #f5a524) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #f5a524) 40%, transparent); } .tf-ctracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .tf-ctrack { padding: 18px 18px 14px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-ctrack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .tf-ctrack-head span { color: var(--ink-2); font-weight: 700; font-size: 14px; } .tf-ctrack-head b { font: 800 28px var(--font-mono); } .tf-ctrack-bar { position: relative; height: 10px; margin: 14px 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); } .tf-ctrack-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--ember), var(--gold-hi)); } .tf-ctrack-bar em { position: absolute; top: -3px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 30%, transparent); } .tf-ctrack-bar em.is-ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .tf-ctrack-tiers { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; font: 700 12.5px var(--font-mono); color: var(--ink-3); } .tf-ctrack-tiers li { display: inline-flex; align-items: center; gap: 5px; } .tf-ctrack-tiers span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: 11px; background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--ink-2); } .tf-ctrack-tiers li.is-ok { color: var(--ok); } .tf-ctrack-tiers li.is-ok span { background: var(--ok); color: #062b14; } .tf-ctrack-note { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; } .tf-cnext { margin: 12px 0 0; } .tf-cmembers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tf-cmembers li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); } .tf-cmembers li.is-owner { box-shadow: inset 3px 0 0 var(--clan, var(--accent)); } .tf-cmember-id { display: grid; min-width: 0; flex: 1; } .tf-cmember-id small { color: var(--ink-3); font-size: 12px; } .tf-cmember-k { color: var(--ink-3); font: 600 12.5px var(--font-mono); white-space: nowrap; } .tf-cmember-k b { color: var(--text); font-size: 15px; } .tf-creq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-creq p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; } .tf-creq code { color: var(--ink-3); font-size: 12px; } .tf-creq small { color: var(--ink-3); } .tf-creq form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .tf-cmt { margin-top: 22px; } .tf-btn.is-danger { color: #ff8593; border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .tf-cdanger { margin-top: 18px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--danger) 35%, transparent); } .tf-cdanger summary { cursor: pointer; color: #ff8593; font-weight: 700; } .tf-cdanger form { display: grid; gap: 10px; margin-top: 10px; } .tf-cdanger input { padding: 10px 12px; border-radius: 10px; font: 700 15px var(--font-mono); color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } /* створення */ .tf-cnew { padding-bottom: 56px; } .tf-cnew-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .tf-cnew-side { display: grid; gap: 16px; position: sticky; top: calc(var(--top-h) + 16px); } .tf-ccolors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .tf-ccolor { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); } .tf-ccolor input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tf-ccolor i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--clan, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--clan, var(--accent)) 60%, transparent); } .tf-ccolor:has(input:checked) { color: var(--text); border-color: var(--clan, var(--accent)); background: color-mix(in srgb, var(--clan, var(--accent)) 10%, var(--bg)); } .tf-ccolor:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; } .tf-cpreview-card { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border-radius: 18px; text-align: center; background: radial-gradient(260px 120px at 50% 0%, color-mix(in srgb, var(--clan, var(--accent)) 22%, transparent), transparent 75%), var(--bg); border: 1px solid color-mix(in srgb, var(--clan, var(--accent)) 40%, transparent); } .tf-cpreview-card b { font: 900 34px/1 "Unbounded", "Arial Black", sans-serif; color: var(--clan, var(--accent)); text-shadow: 0 0 26px color-mix(in srgb, var(--clan, var(--accent)) 50%, transparent); } .tf-cpreview-card span { font-weight: 700; overflow-wrap: anywhere; } .tf-cprice { margin: 0; font-size: 15px; color: var(--ink-2); } .tf-cprice b { font: 900 34px var(--font-display); color: var(--text); } /* бічний блок новин */ .tf-side-clan-tag { display: inline-block; margin: 2px 0 6px; font: 900 26px "Unbounded", "Arial Black", sans-serif; text-decoration: none; color: var(--clan, var(--accent)); } @media (max-width: 1024px) { .tf-cnew-grid { grid-template-columns: minmax(0, 1fr); } .tf-cnew-side { position: static; } } @media (max-width: 900px) { .tf-ctracks { grid-template-columns: minmax(0, 1fr); } .tf-crank { grid-template-columns: 34px minmax(0, 1fr) auto auto; } .tf-crank > .tf-crank-row > :nth-child(n+5) { display: none; } .tf-crank.is-history { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-crank.is-history > .tf-crank-row > :nth-child(n+4) { display: none; } } @media (max-width: 640px) { .tf-ccolors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-chero { flex-direction: column; align-items: flex-start; gap: 8px; } .tf-cbest { grid-template-columns: minmax(0, 1fr); } .tf-cbest-tag { grid-row: auto; } } /* ========================================================================== Зручність (2026-10-03): пошук у шапці, тости, «нагору», зайнята кнопка, меню дій, підказки ніків, клани на головній, знижка клану в цінах. ========================================================================== */ /* ----- шапка: лупа й живий онлайн ----------------------------------------- */ .tf-qs-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: color .15s, border-color .15s, background-color .15s; } .tf-qs-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-qs-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .tf-qs-btn svg { width: 19px; height: 19px; } a.tf-online { text-decoration: none; transition: filter .15s; } a.tf-online:hover { filter: brightness(1.15); } .tf-online b.is-bump { animation: tf-bump .6s ease; } @keyframes tf-bump { 30% { transform: scale(1.25); } } /* ----- пошук (Ctrl+K / «/») ------------------------------------------------- */ .tf-qs { width: min(640px, calc(calc(100vw * var(--vz)) - 24px)); max-height: min(560px, calc(calc(100dvh * var(--vz)) - 120px)); margin: calc(12vh * var(--vz)) auto auto; padding: 0; border-radius: 20px; color: var(--text); background: color-mix(in srgb, var(--surface) 97%, white 2%); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); overflow: hidden; } .tf-qs[open] { display: flex; flex-direction: column; animation: tf-pop .16s ease-out; } .tf-qs::backdrop { background: rgba(3, 4, 7, .62); backdrop-filter: blur(4px); } @keyframes tf-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } } .tf-qs-form { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-qs-form > svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); } .tf-qs-form input, .tf-qs-form input:focus { flex: 1; width: auto; min-width: 0; padding: 6px 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: none; color: var(--text); font: 500 17px var(--font-body); } .tf-qs-form input::-webkit-search-cancel-button { display: none; } .tf-qs-esc { flex: none; padding: 4px 8px; border-radius: 7px; cursor: pointer; font: 700 11.5px var(--font-mono); color: var(--ink-3); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .tf-qs-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .tf-qs-list:empty { display: none; } .tf-sgroup { margin: 8px 8px 4px; font: 700 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .tf-sres { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--text); text-decoration: none; scroll-margin: 8px; } .tf-sres.is-active, .tf-sres:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-sres.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .tf-sres .tf-ava { width: 34px; height: 34px; font-size: 14px; } .tf-sres-main { display: grid; min-width: 0; flex: 1; } .tf-sres-main b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-sres-main small { color: var(--ink-3); font: 500 12px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-sres-lvl { flex: none; min-width: 30px; padding: 3px 6px; border-radius: 8px; text-align: center; font: 800 12px var(--font-mono); color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-sres-go { flex: none; width: 16px; height: 16px; color: var(--ink-3); opacity: 0; transition: opacity .12s; } .tf-sres.is-active .tf-sres-go { opacity: 1; } .tf-sres-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-sres-ico svg { width: 17px; height: 17px; } .tf-sres .tf-clantag { flex: none; } .tf-sres.role-owner b { color: var(--role-owner); } .tf-sres.role-admin b { color: var(--role-admin); } .tf-sres.role-supreme b { color: var(--role-supreme); } .tf-sres.role-boss b { color: var(--role-boss); } .tf-sres.role-pro b { color: var(--role-pro); } .tf-snote { margin: 10px; color: var(--ink-2); font-size: 14px; } .tf-snote a { color: var(--accent); } .tf-qs-foot { margin: 0; padding: 10px 16px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } .tf-qs-foot kbd { padding: 1px 6px; border-radius: 6px; font: 700 11px var(--font-mono); color: var(--ink-2); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } @media (max-width: 640px) { .tf-qs { margin-top: 10px; max-height: calc(calc(100dvh * var(--vz)) - 20px); } .tf-qs-foot { display: none; } } /* ----- тости ----------------------------------------------------------------- */ .tf-toasts { position: fixed; z-index: 90; top: calc(var(--top-h) + 12px); right: 16px; width: min(400px, calc(calc(100vw * var(--vz)) - 32px)); display: grid; gap: 10px; pointer-events: none; } .tf-toast { --c: var(--accent); pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, var(--c) 6%); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); box-shadow: 0 22px 60px -20px rgba(0, 0, 0, .85); animation: tf-toast-in .28s cubic-bezier(.2, .9, .3, 1.2) both; } .tf-toast.is-success { --c: var(--ok); } .tf-toast.is-error { --c: var(--danger); } .tf-toast.is-warning { --c: var(--warn); } .tf-toast.is-info, .tf-toast.is-debug { --c: #6ea8ff; } /* Без JS успіх і довідка ховаються самі; помилка й попередження лишаються, доки не прочитають. */ .tf-toast.is-success, .tf-toast.is-info { animation: tf-toast-in .28s cubic-bezier(.2, .9, .3, 1.2) both, tf-toast-out .3s ease 7s forwards; } .tf-toasts.is-js .tf-toast { animation: tf-toast-in .28s cubic-bezier(.2, .9, .3, 1.2) both; } .tf-toast.is-leaving { animation: tf-toast-out .25s ease forwards !important; } @keyframes tf-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } } @keyframes tf-toast-out { to { opacity: 0; transform: translateX(24px); visibility: hidden; } } .tf-toast-ico { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); } .tf-toast-ico svg { width: 15px; height: 15px; } .tf-toast p { margin: 3px 0 0; flex: 1; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; } .tf-toast-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 0; cursor: pointer; color: var(--ink-3); background: none; } .tf-toast-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } .tf-toast-x svg { width: 14px; height: 14px; } @media (max-width: 640px) { .tf-toasts { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; width: auto; } } /* ----- «нагору» --------------------------------------------------------------- */ .tf-totop { position: fixed; z-index: 40; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8); backdrop-filter: blur(8px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, border-color .15s; } .tf-totop.is-on { opacity: 1; transform: none; pointer-events: auto; } .tf-totop:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--gold-hi); } .tf-totop svg { width: 20px; height: 20px; } @media (max-width: 640px) { .tf-totop { right: 12px; width: 44px; height: 44px; } } /* ----- зайнята кнопка (форма відправляється) ---------------------------------- */ .tf-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; } .tf-btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid currentColor; border-color: var(--busy, var(--text)) var(--busy, var(--text)) transparent transparent; animation: tf-spin .7s linear infinite; } .tf-btn-gold.is-busy { --busy: var(--on-accent); } @keyframes tf-spin { to { transform: rotate(360deg); } } .tf-btn:disabled, .tf-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; } /* ----- дрібні кнопки й мітки ---------------------------------------------------- */ .tf-btn-icon { padding: 0; width: 50px; height: 50px; flex: none; } .tf-btn-icon.tf-btn-sm { width: 38px; height: 38px; } .tf-btn-icon svg { width: 19px; height: 19px; } .tf-err-cta .tf-btn svg { width: 18px; height: 18px; flex: none; } .tf-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; font: 800 12px var(--font-mono); color: var(--accent); background: var(--on-accent); } .tf-cmenu { position: relative; } .tf-cmenu > summary { list-style: none; } .tf-cmenu > summary::-webkit-details-marker { display: none; } .tf-cmenu[open] > summary { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .tf-cmenu .tf-menu { min-width: 210px; top: calc(100% + 6px); } .tf-cbadge { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 99px; font: 700 11.5px var(--font-body); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .tf-cbadge.is-me { color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 14%, transparent); } .tf-cbadge.is-off { color: var(--ink-3); background: none; padding: 0; } .tf-cbadge svg { width: 14px; height: 14px; } .tf-crank-title { overflow: hidden; text-overflow: ellipsis; } .tf-cnext { margin: 12px 0 0; font: 500 13.5px var(--font-body); color: var(--ink-3); } .tf-switch + .tf-set-small { margin-top: -6px; } /* ----- знижка клану в цінах ------------------------------------------------------- */ .tf-cdisc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; color: var(--ok); font-size: 13.5px; font-weight: 600; } .tf-cdisc.is-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; color: var(--text); background: color-mix(in srgb, var(--ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); } .tf-buy-price s, .tf-buybox-price s { margin-left: 6px; color: var(--ink-3); font: 600 15px var(--font-mono); text-decoration-thickness: 2px; } /* ----- підказки ніків («Запросити гравця») ----------------------------------------- */ .tf-suggest { position: relative; flex: 1; min-width: 220px; display: grid; } .tf-suggest > input[type="text"] { width: 100%; min-width: 0; } .tf-suggest-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; display: grid; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, white 2%); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85); max-height: 320px; overflow-y: auto; } .tf-suggest-list[hidden] { display: none; } .tf-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--text); text-align: left; font: inherit; width: 100%; } .tf-suggest-item .tf-ava { width: 30px; height: 30px; font-size: 13px; } .tf-suggest-item span { display: grid; min-width: 0; flex: 1; } .tf-suggest-item b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-suggest-item small { color: var(--ink-3); font-size: 12px; } .tf-suggest-item.is-active, .tf-suggest-item:hover:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--accent) 12%, transparent); } .tf-suggest-item[aria-disabled="true"] { cursor: default; opacity: .55; } .tf-suggest-item[aria-disabled="true"] small { color: var(--warn); } .tf-suggest-none { padding: 10px; color: var(--ink-3); font-size: 13.5px; } /* ----- пароль: показати / сховати ----------------------------------------------------- */ .tf-pass { position: relative; display: block; } .tf-pass > input { padding-right: 52px !important; } .tf-pass-eye { position: absolute; top: 50%; right: 6px; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; } .tf-pass-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-pass-eye svg { width: 19px; height: 19px; } .tf-pass-eye[aria-pressed="true"] { color: var(--accent); } /* ----- шторка відкрита — сторінка під нею не гортається -------------------------------- */ html.is-drawer-open { overflow: hidden; } html:has(dialog.tf-qs[open]) { overflow: hidden; } /* ========================================================================== 3D-огляд скінів (/skins/, етап 6) — templates/shop/skins.html, static/js/tf3d.js. Стан переглядача — класи на .tf3d: is-loading / is-ready / is-error / is-nogl / is-touched. --role — колір підсвітки обраної моделі (пак), JS міняє його разом зі світлом сцени. ========================================================================== */ .tf3d-page { padding-block: 28px 56px; } .tf3d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 22px; } .tf3d-head h1 { margin: 0; font-size: clamp(30px, calc(4.2vw * var(--vz)), 52px); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; } .tf3d-head h1 .hot { background: linear-gradient(90deg, var(--gold-hi), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf3d-head p { margin: 0; max-width: 420px; color: var(--ink-2); font-size: 15px; } .tf3d-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 24px; align-items: start; } .tf3d { --role: var(--accent); position: sticky; top: calc(var(--top-h) + 16px); height: min(calc(76vh * var(--vz)), 760px); min-height: 420px; border-radius: 26px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--role) 30%, transparent); background: radial-gradient(closest-side at 50% 58%, color-mix(in srgb, var(--role) 22%, transparent), transparent), radial-gradient(120% 60% at 50% 115%, color-mix(in srgb, var(--role) 18%, transparent), transparent 70%), repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--text) 3.5%, transparent) 39px 40px), repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--text) 3.5%, transparent) 39px 40px), var(--surface); box-shadow: 0 40px 120px -60px color-mix(in srgb, var(--role) 70%, transparent); } .tf3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; } .tf3d canvas:active { cursor: grabbing; } .tf3d-poster { position: absolute; inset: 9% 8% 16%; width: 84%; height: 75%; object-fit: contain; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--role) 35%, transparent)); transition: opacity .3s; } .tf3d.is-loading .tf3d-poster { opacity: .45; filter: grayscale(.4) blur(1px); } .tf3d-poster[hidden] { display: none; } .tf3d-load { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; opacity: 0; transition: opacity .2s; } .tf3d-load i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--role), var(--gold-hi)); box-shadow: 0 0 12px var(--role); transition: width .15s; } .tf3d.is-loading .tf3d-load { opacity: 1; } .tf3d-msg { display: none; position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 3; margin: 0; width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 12px; font-size: 13px; color: var(--ink-2); text-align: center; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); } .tf3d.is-error .tf3d-msg.is-err, .tf3d.is-nogl .tf3d-msg.is-nogl { display: block; } .tf3d.is-nogl canvas, .tf3d.is-nogl .tf3d-tools, .tf3d.is-nogl .tf3d-hint { display: none; } .tf3d-tools { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; } .tf3d-tool { display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; justify-content: center; padding: 0 10px; border-radius: 11px; cursor: pointer; color: var(--text); font: 700 13px var(--font-body); background: rgba(0,0,0,.42); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); backdrop-filter: blur(8px); } .tf3d-tool:hover { border-color: color-mix(in srgb, var(--role) 60%, transparent); } .tf3d-tool:focus-visible, .tf3d-chip:focus-visible, .tf3d-item:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .tf3d-tool svg { width: 18px; height: 18px; } .tf3d-tool[aria-pressed="false"] { color: var(--ink-3); } .tf3d-tool[aria-pressed="true"] svg { color: var(--role); } .tf3d-tool[hidden] { display: none; } .tf3d-anims { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: calc(100% - 24px); padding: 5px; border-radius: 14px; background: rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); backdrop-filter: blur(10px); } .tf3d-anims[hidden] { display: none; } .tf3d-chip { border: 0; background: none; color: var(--ink-2); cursor: pointer; font: 700 13px var(--font-body); padding: 8px 12px; border-radius: 10px; white-space: nowrap; } .tf3d-chip:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .tf3d-chip[aria-pressed="true"] { color: var(--on-accent); background: var(--role); } .tf3d-hint { position: absolute; left: 16px; top: 18px; z-index: 2; font-size: 12.5px; color: var(--ink-3); pointer-events: none; transition: opacity .4s; max-width: calc(100% - 190px); } .tf3d.is-touched .tf3d-hint, .tf3d:not(.is-ready) .tf3d-hint { opacity: 0; } .tf3d:fullscreen { height: calc(100vh * var(--vz)); border-radius: 0; border: 0; } .tf3d-side { display: grid; gap: 18px; } .tf3d-info-in { --role: var(--accent); display: grid; gap: 8px; padding: 18px 18px 20px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--role) 14%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--role) 32%, transparent); } .tf3d-info-in > b { font: 800 20px/1.15 var(--font-display); } .tf3d-info-in > span { color: var(--ink-2); font-size: 14px; margin-top: -4px; } .tf3d-meta { display: flex; flex-wrap: wrap; gap: 6px; } .tf3d-meta span { font: 600 12px var(--font-mono); color: var(--ink-2); padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); } .tf3d-info-in .tf-btn { justify-self: start; margin-top: 4px; } .tf3d-group h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--role); } .tf3d-group h2 small { font: 600 12.5px var(--font-body); color: var(--ink-3); } .tf3d-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tf3d-item { display: grid; grid-template-rows: 84px auto auto; gap: 2px; padding: 8px 8px 10px; border-radius: 14px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--text) 3%, var(--surface)); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transition: border-color .2s, background .2s, transform .2s; } .tf3d-item:hover { border-color: color-mix(in srgb, var(--role) 50%, transparent); transform: translateY(-2px); } .tf3d-item.is-active { border-color: var(--role); background: color-mix(in srgb, var(--role) 14%, var(--surface)); box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--role) 80%, transparent); } .tf3d-item img { width: 100%; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); } .tf3d-item img.is-weapon { transform: scale(1.12); } .tf3d-item span { font-size: 12.5px; font-weight: 700; line-height: 1.25; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tf3d-item small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1024px) { .tf3d-layout { grid-template-columns: minmax(0, 1fr); } .tf3d { position: relative; top: auto; height: min(calc(68vh * var(--vz)), 620px); min-height: 360px; scroll-margin-top: calc(var(--top-h) + 8px); } .tf3d-items { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } @media (max-width: 560px) { .tf3d { height: calc(62vh * var(--vz)); min-height: 340px; border-radius: 20px; } .tf3d-hint { display: none; } .tf3d-chip { padding: 7px 10px; font-size: 12.5px; } .tf3d-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf3d-item { grid-template-rows: 70px auto auto; } .tf3d-item img { height: 70px; } } @media (prefers-reduced-motion: reduce) { .tf3d-item, .tf3d-poster { transition: none; } .tf3d-item:hover { transform: none; } } /* Посилання з магазину в 3D-огляд: кнопка «3D» на сцені паку, під AK від першої особи, на моделях. */ a.tf-gun, a.tf-model { color: var(--text); text-decoration: none; } a.tf-gun::after { content: "3D"; position: absolute; right: 12px; bottom: 9px; font: 800 10.5px var(--font-body); letter-spacing: .06em; color: var(--role); opacity: .55; transition: opacity .2s; } a.tf-gun:hover::after, a.tf-gun:focus-visible::after { opacity: 1; } .tf-3d-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; font: 800 12px var(--font-body); letter-spacing: .04em; color: var(--text); text-decoration: none; background: rgba(0,0,0,.45); border: 1px solid color-mix(in srgb, var(--role, var(--accent)) 45%, transparent); backdrop-filter: blur(6px); } .tf-3d-btn svg { width: 15px; height: 15px; color: var(--role, var(--accent)); } .tf-3d-btn:hover { border-color: var(--role, var(--accent)); color: var(--text); } .tf-spack-stage .tf-3d-btn { position: absolute; right: 14px; top: 14px; z-index: 3; } .tf-spack.is-top .tf-spack-stage .tf-3d-btn { top: 52px; } .tf-3d-btn.is-inline { justify-self: start; margin-top: 8px; font-weight: 700; letter-spacing: 0; } .tf-model .tf-3d-btn.is-corner { position: absolute; right: 10px; top: 10px; padding: 4px 8px; font-size: 11px; color: var(--text); opacity: .7; transition: opacity .2s; } .tf-model:hover .tf-3d-btn.is-corner { opacity: 1; } /* ========================================================================== Скриншоти карт (2026-10-03, tools/cs_mapshots.py; views.map_shot). Скриншот — обкладинка карти; app.js міняє його наживо за статусом сервера ([data-map-shot]). ========================================================================== */ .tf-sv-shot[hidden] { display: none; } .tf-sv-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .34; filter: saturate(1.1) blur(1px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(transparent 0, #000 25%, #000 60%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 70%, transparent 100%), linear-gradient(transparent 0, #000 25%, #000 60%, transparent 100%); mask-composite: intersect; } .tf-map.has-shot img.tf-map-shot { left: 0; top: 0; translate: none; width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: saturate(1.05); transition: scale .5s ease, opacity .3s ease; } .tf-map.has-shot:hover img.tf-map-shot { scale: 1.06; opacity: .85; } .tf-match-map.is-shot { background-size: cover; } .tf-mini-srv img.is-shot { object-fit: cover; } @media (prefers-reduced-motion: reduce) { .tf-map.has-shot img.tf-map-shot { transition: none; } } /* ========================================================================== Відеофони шапок (2026-10-03; tools/cs_videos.sh, partials/bg_video.html, tf.js bgVideos). Відео лише атмосфера: приглушене, з маскою, текст лишається на чистому тлі. Постер — те саме приглушення, тож без відео шапка виглядає так само, лише нерухомо. ========================================================================== */ .tf-bgv { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .tf-bgv video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .36; filter: saturate(1.08) contrast(1.06); -webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 72%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 18%, #000 72%, transparent 100%); } .tf-bgv.is-right video { object-position: 70% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 58%), linear-gradient(transparent 0, #000 18%, #000 75%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 8%, #000 58%), linear-gradient(transparent 0, #000 18%, #000 75%, transparent 100%); mask-composite: intersect; } .tf-bgv.is-full video { opacity: .5; } .tf-shop-hero .tf-bgv video { opacity: .42; } .tf-mod-hero .tf-bgv { z-index: -3; } .tf-mod-hero .tf-bgv video { opacity: .3; } .tf-tour-hero { position: relative; isolation: isolate; } .tf-tour-hero .tf-bgv video { opacity: .55; object-position: 50% 30%; } .tf-mod-hero .tf-countdown { margin-top: 22px; } @media (max-width: 900px) { .tf-bgv.is-right video { object-position: 62% 50%; opacity: .26; } } /* Картка кланів на головній — з відеофоном «carrying the team» (як банер «вступай у клан»). */ .tf-cbest .tf-bgv video { opacity: .24; object-position: 50% 35%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 0, #000 60%); } .tf-cbest:hover .tf-bgv video { opacity: .42; transition: opacity .4s ease; } /* Арт фонів меню CS 1.6 (2026-10-03, tools/cs_menu_bgs.py): тонований у кольори кузні, щоб чужа палітра (рожева, синя) не сперечалась із брендом. Той самий прийом, що в .tf-hero-art. */ .tf-art-ember { filter: grayscale(1) sepia(.6) hue-rotate(-20deg) saturate(1.9) brightness(.8) contrast(1.15); } .tf-auth-art { position: absolute; inset: 0; z-index: -2; background: center right / cover no-repeat; opacity: .32; -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 62%); mask-image: linear-gradient(90deg, transparent 12%, #000 62%); } .tf-mod-bg { position: absolute; inset: 0; z-index: -3; background: 70% 30% / cover no-repeat; opacity: .26; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%), linear-gradient(transparent, #000 25%, #000 70%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 10%, #000 55%), linear-gradient(transparent, #000 25%, #000 70%, transparent); mask-composite: intersect; } .tf-err { position: relative; isolation: isolate; overflow: hidden; } .tf-err-art { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat; opacity: .22; -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent); mask-image: radial-gradient(closest-side at 50% 50%, #000 30%, transparent); } @media (max-width: 900px) { .tf-auth-art { opacity: .2; -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); } } /* ========================================================================== Щоденна нагорода (2026-10-03; partials/daily.html, apps/events/daily.py, tf.js daily). Тиждень із семи клітинок: забрані (✓), сьогоднішня (світиться), майбутні; сьомий день — подарунок. ========================================================================== */ .tf-daily { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; margin-top: 20px; padding: 24px 26px; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 55%); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: 0 30px 90px -60px color-mix(in srgb, var(--accent) 80%, transparent); } .tf-daily-glow { position: absolute; inset: -40% -10% auto auto; width: 520px; height: 420px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--ember) 22%, transparent), transparent); filter: blur(8px); } .tf-daily-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; } .tf-daily-badge { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(140deg, var(--gold-hi), var(--ember)); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--ember) 70%, transparent); } .tf-daily-badge svg { width: 28px; height: 28px; } .tf-daily-title .tf-eyebrow { margin-bottom: 4px; } .tf-daily-title h3 { margin: 0; font-size: clamp(18px, calc(2vw * var(--vz)), 22px); font-weight: 800; } .tf-daily-title p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; } .tf-daily-streak { display: grid; justify-items: center; gap: 0; min-width: 76px; padding: 8px 12px; border-radius: 16px; color: var(--ember); background: color-mix(in srgb, var(--ember) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ember) 30%, transparent); } .tf-daily-streak svg { width: 22px; height: 22px; } .tf-daily-streak b { font: 900 24px/1 var(--font-mono); color: var(--text); } .tf-daily-streak span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .tf-daily-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .tf-daily-week li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 12px; border-radius: 16px; text-align: center; background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transition: transform .25s ease, border-color .25s ease; } .tf-daily-day { font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tf-daily-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-daily-ico svg { width: 20px; height: 20px; } .tf-daily-week b { font: 800 15px var(--font-mono); color: var(--ink-2); } .tf-daily-week li.is-got { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 28%, transparent); } .tf-daily-week li.is-got .tf-daily-ico { color: var(--on-accent); background: linear-gradient(140deg, var(--gold-hi), var(--accent)); } .tf-daily-week li.is-got b { color: var(--accent); } .tf-daily-week li.is-today { transform: translateY(-3px); border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); } .tf-daily-week li.is-today .tf-daily-day { color: var(--accent); } .tf-daily-week li.is-today .tf-daily-ico { color: var(--gold-hi); background: color-mix(in srgb, var(--accent) 18%, transparent); animation: tf-daily-bob 2.4s ease-in-out infinite; } .tf-daily-week li.is-today b { color: var(--text); } .tf-daily-week li.is-big .tf-daily-ico { width: 40px; height: 40px; color: var(--ember); background: color-mix(in srgb, var(--ember) 14%, transparent); } .tf-daily-week li.is-big.is-got .tf-daily-ico { color: var(--on-accent); background: linear-gradient(140deg, var(--gold-hi), var(--ember)); } .tf-daily-week li.is-big { border-style: dashed; border-color: color-mix(in srgb, var(--ember) 40%, transparent); } .tf-daily-week li.is-big b { color: var(--ember); } @keyframes tf-daily-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } .tf-daily-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .tf-daily-claim svg { width: 18px; height: 18px; } .tf-daily-note { color: var(--ink-3); font-size: 13px; } .tf-daily-next { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .tf-daily-next svg { width: 17px; height: 17px; } .tf-daily.is-guest .tf-daily-week li, .tf-daily.is-steam .tf-daily-week li { opacity: .78; } /* Щойно забрали: клітинка «вибухає» золотом, блок м'яко спалахує. */ .tf-daily.is-just { animation: tf-daily-flash 1.1s ease-out; } .tf-daily-week li.is-new { animation: tf-daily-pop .7s cubic-bezier(.2, 1.6, .4, 1); } .tf-daily-week li.is-new::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; pointer-events: none; border: 2px solid var(--gold-hi); animation: tf-daily-ring .9s ease-out forwards; } @keyframes tf-daily-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes tf-daily-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } } @keyframes tf-daily-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 26px transparent; } } .tf-daily-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 3; background: radial-gradient(circle, var(--gold-hi), var(--ember)); animation: tf-daily-spark .9s ease-out forwards; } @keyframes tf-daily-spark { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } } @media (max-width: 700px) { .tf-daily { padding: 20px 16px; } .tf-daily-head { grid-template-columns: auto minmax(0, 1fr); } .tf-daily-streak { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; } .tf-daily-week { gap: 5px; } .tf-daily-week li { padding: 9px 2px; border-radius: 12px; gap: 4px; } .tf-daily-day { font-size: 10px; } .tf-daily-ico { width: 28px; height: 28px; } .tf-daily-ico svg { width: 16px; height: 16px; } .tf-daily-week li.is-big .tf-daily-ico { width: 30px; height: 30px; } .tf-daily-week b { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .tf-daily-week li.is-today .tf-daily-ico, .tf-daily.is-just, .tf-daily-week li.is-new, .tf-daily-week li.is-new::after { animation: none; } } /* ========================================================================== «Хто в грі / Хто був сьогодні» (2026-10-03; views.who, partials/who.html, tf.js whoDialog). Вікно з плашки онлайну в шапці й з «+ ще N»; те саме — сторінкою /who/ без JS. ========================================================================== */ .tf-who-dlg { width: min(580px, calc(calc(100vw * var(--vz)) - 24px)); max-height: min(720px, calc(calc(100dvh * var(--vz)) - 90px)); margin: calc(9vh * var(--vz)) auto auto; padding: 0; border-radius: 22px; color: var(--text); background: color-mix(in srgb, var(--surface) 97%, white 2%); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); overflow: hidden; } .tf-who-dlg[open] { display: flex; flex-direction: column; animation: tf-pop .16s ease-out; } .tf-who-dlg::backdrop { background: rgba(3, 4, 7, .62); backdrop-filter: blur(4px); } .tf-who-dlg.is-loading .tf-who-slot { opacity: .45; transition: opacity .15s; } .tf-who-slot { display: flex; flex-direction: column; min-height: 220px; max-height: inherit; } .tf-who-x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; border: 0; color: var(--ink-2); background: color-mix(in srgb, var(--text) 6%, transparent); } .tf-who-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); } .tf-who-x svg { width: 16px; height: 16px; } .tf-who-in { display: flex; flex-direction: column; min-height: 0; max-height: inherit; } .tf-who-tabs { display: flex; gap: 4px; padding: 12px 56px 12px 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); flex: none; flex-wrap: wrap; } .tf-who-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--ink-2); text-decoration: none; } .tf-who-tabs a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-who-tabs a[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .tf-who-tabs b { font: 700 12px var(--font-mono); padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); } .tf-who-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--role-pro); box-shadow: 0 0 10px var(--role-pro); animation: tf-pulse 1.4s infinite; } .tf-who-list { overflow: auto; padding: 8px 10px 14px; display: grid; gap: 4px; overscroll-behavior: contain; } .tf-who-srv { display: grid; gap: 2px; padding-bottom: 8px; } .tf-who-srv + .tf-who-srv { border-top: 1px dashed color-mix(in srgb, var(--text) 8%, transparent); padding-top: 8px; } .tf-who-srv-head { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 12px; color: var(--text); text-decoration: none; } .tf-who-srv-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .tf-who-map { width: 54px; height: 36px; border-radius: 8px; background: #0b0d13 center / cover no-repeat; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); } .tf-who-srv-name { display: grid; min-width: 0; } .tf-who-srv-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-who-srv-name small { font: 500 12px var(--font-mono); color: var(--ink-3); } .tf-who-srv-num { font: 800 20px var(--font-mono); color: var(--role-pro); display: inline-flex; align-items: baseline; gap: 6px; } .tf-who-srv-num small { font-size: 12px; font-weight: 600; color: var(--ink-3); } .tf-who-srv.is-off .tf-who-srv-num { color: var(--ink-3); } .tf-who-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 11px; color: var(--text); text-decoration: none; } .tf-who-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-who-row .tf-ava { width: 30px; height: 30px; font-size: 12.5px; } .tf-who-row .tf-who { min-width: 0; } .tf-who-row .tf-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-who-row .tf-num { font: 700 14px var(--font-mono); min-width: 28px; text-align: right; } .tf-who-empty { margin: 4px 8px 6px; color: var(--ink-3); font-size: 13.5px; } .tf-who-page { max-width: 720px; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); } a.tf-count.is-link { text-decoration: none; color: inherit; cursor: pointer; } a.tf-count.is-link:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); } .tf-who-more { display: inline-flex; margin: 12px 12px 0; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; } .tf-who-more:hover { text-decoration: underline; } .tf-online[data-who-open] { cursor: pointer; } @media (max-width: 560px) { .tf-who-dlg { margin-top: calc(6vh * var(--vz)); } .tf-who-row { grid-template-columns: minmax(0, 1fr) auto; } .tf-who-row .tf-dim { display: none; } } /* ========================================================================== «Життя кузні» — останні події проєкту (2026-10-03; home_data.life_feed). ========================================================================== */ .tf-life-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .tf-life-item { --ev: var(--accent); position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transition: border-color .2s ease, transform .2s ease; } .tf-life-item:hover { border-color: color-mix(in srgb, var(--ev) 40%, transparent); transform: translateY(-1px); } .tf-life-item.is-join { --ev: #5ab0ff; } .tf-life-item.is-clan, .tf-life-item.is-member { --ev: var(--role-boss); } .tf-life-item.is-team { --ev: var(--role-admin); } .tf-life-item.is-tour { --ev: var(--role-supreme); } .tf-life-item.is-gift { --ev: var(--role-pro); } .tf-life-item.is-daily { --ev: var(--ember); } .tf-life-item.is-news { --ev: var(--accent); } .tf-life-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ev); background: color-mix(in srgb, var(--ev) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev) 28%, transparent); } .tf-life-ico svg { width: 20px; height: 20px; } .tf-life-item p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; } .tf-life-who { color: var(--text); font-weight: 700; text-decoration: none; } a.tf-life-who:hover { color: var(--accent); } .tf-life-item .tf-clantag { font-size: 13px; text-decoration: none; } .tf-life-item time { font-size: 12px; color: var(--ink-3); white-space: nowrap; } @media (max-width: 900px) { .tf-life-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .tf-life-item { grid-template-columns: 36px minmax(0, 1fr); } .tf-life-item time { grid-column: 2; margin-top: -6px; } .tf-life-ico { width: 36px; height: 36px; } } /* ========================================================================== П'єдестал кланів місяця в шапці /clans/ (2026-10-03): 2 · 1 · 3, корона першому, тег — колір клану. ========================================================================== */ .tf-cpod-wrap { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding-bottom: 34px; pointer-events: none; } .tf-cpod { display: flex; align-items: flex-end; gap: 12px; pointer-events: auto; } .tf-cpod-p { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; width: 150px; padding: 18px 12px 16px; border-radius: 20px 20px 14px 14px; text-decoration: none; color: var(--text); text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--clan, var(--accent)) 16%, rgba(10, 12, 18, .82)), rgba(10, 12, 18, .9)); border: 1px solid color-mix(in srgb, var(--clan, var(--accent)) 40%, transparent); backdrop-filter: blur(8px); box-shadow: 0 24px 60px -30px var(--clan, var(--accent)); transition: transform .25s ease, box-shadow .25s ease; } .tf-cpod-p:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -26px var(--clan, var(--accent)); } .tf-cpod-p.p1 { order: 2; min-height: 214px; width: 170px; } .tf-cpod-p.p2 { order: 1; min-height: 176px; } .tf-cpod-p.p3 { order: 3; min-height: 150px; } .tf-cpod-crown { position: absolute; top: -22px; width: 38px; height: 38px; color: #ffd66b; filter: drop-shadow(0 0 12px rgba(255, 200, 61, .7)); } .tf-cpod-place { font: 900 13px var(--font-mono); color: var(--ink-3); } .tf-cpod-tag { font: 900 clamp(22px, calc(2.3vw * var(--vz)), 30px)/1 "Unbounded", "Arial Black", sans-serif; color: var(--clan, var(--accent)); text-shadow: 0 0 24px color-mix(in srgb, var(--clan, var(--accent)) 55%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tf-cpod-p.p1 .tf-cpod-tag { font-size: clamp(26px, calc(2.7vw * var(--vz)), 36px); } .tf-cpod-name { font-size: 12.5px; font-weight: 700; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-cpod-nums { display: flex; gap: 10px; font: 700 13px var(--font-mono); color: var(--ink-2); } .tf-cpod-nums i { font-style: normal; color: var(--role-supreme); margin-right: 2px; } @media (max-width: 1100px) { .tf-cpod-wrap { position: static; display: block; padding-bottom: 30px; } .tf-cpod { justify-content: center; } } @media (max-width: 560px) { .tf-cpod { gap: 8px; } .tf-cpod-p { width: auto; flex: 1; padding: 14px 6px 12px; } .tf-cpod-p.p1 { width: auto; min-height: 176px; } .tf-cpod-p.p2 { min-height: 150px; } .tf-cpod-p.p3 { min-height: 132px; } .tf-cpod-tag { font-size: 18px; } .tf-cpod-p.p1 .tf-cpod-tag { font-size: 21px; } } /* Картка команди: уся — посилання на профіль (розтягнуте .tf-crew-link), кнопки Telegram/Discord — над ним. */ .tf-crew-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .tf-crew-link:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .tf-crew-soc { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; } .tf-crew-soc a, .tf-crew-soc button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; cursor: pointer; font: 700 12px var(--font-body); color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .tf-crew-soc svg { width: 15px; height: 15px; } .tf-crew-soc .is-tg:hover { background: #229ed9; border-color: #229ed9; color: #fff; } .tf-crew-soc .is-dc:hover { background: #5865f2; border-color: #5865f2; color: #fff; } .tf-pc-soc { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; } .tf-life-item.is-first { --ev: #5ab0ff; } .tf-life-item.is-frag { --ev: var(--ember); } .tf-life-map { font-family: var(--font-mono); color: var(--text); } /* ========================================================================== Головна платформи (2026-10-03, за відгуком замовника): відеошапка з емблемою, анонси, сервери довгими рядками, особисте + щоденна нагорода, картки спільноти. templates/web/home.html. ========================================================================== */ .tf-home-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); } .tf-home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 30%, color-mix(in srgb, var(--bg) 30%, transparent) 62%, transparent 85%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, transparent 25%, transparent 70%, var(--bg) 100%); } .tf-bgv.is-hero { z-index: -2; } .tf-bgv.is-hero video { opacity: 1; object-position: 72% 45%; -webkit-mask-image: none; mask-image: none; filter: saturate(1.1) contrast(1.05); } .tf-home-hero-in { display: flex; align-items: center; min-height: min(calc(74vh * var(--vz)), 660px); padding-block: 64px 28px; } .tf-home-hero-copy { max-width: 780px; position: relative; z-index: 1; } .tf-home-emblem { margin-bottom: 14px; } .tf-home-emblem .tf-mark { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--ember) 55%, transparent)); } .tf-home-hero h1 { margin: 8px 0 18px; font-size: clamp(40px, calc(5.4vw * var(--vz)), 78px); line-height: 1.02; font-weight: 900; letter-spacing: -0.025em; } .tf-home-hero h1 .hot { background: linear-gradient(90deg, var(--gold-hi), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } .tf-home-hero .tf-hero-sub { max-width: 54ch; } .tf-home-hero .tf-ticker { margin-top: 0; } /* Анонси — замість стрічки вбивств: що відбувається на платформі зараз. */ .tf-ann { border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); background: color-mix(in srgb, var(--bg) 70%, black); } .tf-ann-in { display: flex; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; } .tf-ann-in::-webkit-scrollbar { display: none; } .tf-ann-item { --ev: var(--accent); display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-weight: 650; font-size: 13.5px; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); transition: color .2s, border-color .2s, background .2s; } .tf-ann-item svg { width: 16px; height: 16px; color: var(--ev); flex: none; } a.tf-ann-item:hover { color: var(--text); border-color: color-mix(in srgb, var(--ev) 50%, transparent); background: color-mix(in srgb, var(--ev) 10%, transparent); } .tf-ann-item.is-tour { --ev: var(--role-supreme); } .tf-ann-item.is-gift { --ev: #ff5e7e; } .tf-ann-item.is-daily { --ev: var(--ember); } .tf-ann-item.is-night { --ev: var(--role-pro); } .tf-ann-item.is-night .tf-moon { color: var(--role-pro); } .tf-ann-item.is-news span { max-width: 300px; overflow: hidden; text-overflow: ellipsis; } /* Сервери довгими рядками: тло — скриншот карти, далі назва, карта, гравці, доба, «Грати». */ .tf-srows { display: grid; gap: 12px; } .tf-srow { --mode: var(--accent); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr) minmax(0, .9fr) minmax(0, 1.05fr) auto; align-items: center; gap: 14px 26px; min-height: 104px; padding: 18px 22px 18px 24px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--mode) 24%, transparent); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .tf-srow::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mode); box-shadow: 0 0 14px var(--mode); } .tf-srow:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mode) 55%, transparent); box-shadow: 0 22px 50px -32px color-mix(in srgb, var(--mode) 80%, transparent); } .tf-srow-bg { position: absolute; inset: 0; z-index: -1; } /* Скриншот поточної карти: зліва під назвою — майже суцільна панель, праворуч карту видно (замовник: «цікавіше»). */ .tf-srow-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: .9; filter: saturate(1.15); transition: transform .7s ease; } .tf-srow-bg img[hidden] { display: none; } .tf-srow-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 97%, transparent) 0%, color-mix(in srgb, var(--surface) 90%, transparent) 30%, color-mix(in srgb, var(--surface) 62%, transparent) 52%, color-mix(in srgb, var(--surface) 48%, transparent) 72%, color-mix(in srgb, var(--surface) 78%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 60%); } .tf-srow:hover .tf-srow-bg img { transform: scale(1.05); } .tf-srow-map, .tf-srow-players, .tf-srow-day span { text-shadow: 0 1px 6px color-mix(in srgb, var(--bg) 90%, transparent), 0 0 14px color-mix(in srgb, var(--bg) 70%, transparent); } .tf-srow-id { display: grid; gap: 6px; justify-items: start; min-width: 0; } .tf-srow-name { font: 800 18px/1.25 var(--font-display); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } a.tf-srow-name:hover { color: var(--accent); } .tf-srow-ip { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 12.5px var(--font-mono); color: var(--ink-2); } .tf-srow-ip svg { width: 13px; height: 13px; } .tf-srow-ip:hover { color: var(--text); } .tf-srow-map { display: grid; gap: 5px; justify-items: start; min-width: 0; } .tf-srow-map b { font: 700 15px var(--font-mono); overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tf-srow-state { display: inline-flex; align-items: center; gap: 7px; font: 800 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--role-pro); } .tf-srow-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: tf-pulse 1.4s infinite; } .tf-srow-state.is-off { color: var(--ink-3); } .tf-srow-state.is-off i { animation: none; box-shadow: none; } .tf-srow-players { display: grid; gap: 6px; min-width: 0; } .tf-srow-players b { font: 900 26px/1 var(--font-display); } .tf-srow-players small { font: 600 14px var(--font-body); color: var(--ink-2); } .tf-srow-players .tf-bar { height: 6px; max-width: 170px; } .tf-srow-bots { font: 500 12px var(--font-mono); color: var(--ink-2); } .tf-srow-bots[hidden] { display: none; } .tf-srow-day { display: grid; gap: 6px; min-width: 0; } .tf-srow-bars { display: flex; align-items: flex-end; gap: 2px; height: 36px; } .tf-srow-bars i { flex: 1 1 0; min-width: 2px; height: max(2px, var(--h)); border-radius: 2px 2px 0 0; background: var(--accent); opacity: .9; } .tf-srow-bars i[style*="--h: 0%"] { background: color-mix(in srgb, var(--text) 14%, transparent); } .tf-srow-bars i:hover { opacity: 1; background: var(--gold-hi); } .tf-srow-day span { font-size: 11.5px; color: var(--ink-2); } .tf-srow-cta { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .tf-srow-more { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .tf-srow-more:hover { border-color: var(--accent); } .tf-srow-more svg { width: 18px; height: 18px; } .tf-srow.is-off .tf-srow-bg img { filter: grayscale(1); opacity: .3; } .tf-srow.is-soon { grid-template-columns: minmax(0, 1fr) auto; border-style: dashed; min-height: 88px; } .tf-srow.is-soon .tf-srow-bg img { opacity: .55; } .tf-srow-soon { color: var(--ink-2); font-size: 13.5px; max-width: 70ch; } @media (max-width: 1100px) { .tf-srow { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) auto; } .tf-srow-day { display: none; } } @media (max-width: 720px) { .tf-srow { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 16px 16px 16px 18px; } .tf-srow-id { grid-column: 1 / -1; } .tf-srow-map { grid-column: 1; } .tf-srow-players { grid-column: 2; justify-items: end; text-align: right; } .tf-srow-players .tf-bar { width: 110px; } .tf-srow-cta { grid-column: 1 / -1; justify-content: stretch; } .tf-srow-cta .tf-btn { flex: 1; } .tf-srow.is-soon .tf-srow-cta { justify-content: flex-start; } } /* Особисте поруч із щоденною нагородою. tf-me і tf-steps розраховані на всю ширину — тут стовпчиком. */ .tf-home-me { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; margin-top: 8px; } .tf-home-me > div { display: grid; } .tf-home-me .tf-me { margin-top: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; } .tf-home-me .tf-me-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-home-me .tf-me-cta { justify-content: flex-start; } .tf-home-me .tf-steps { margin-top: 0; grid-template-columns: minmax(0, 1fr); align-content: start; } .tf-home-me .tf-steps ol { grid-template-columns: minmax(0, 1fr); gap: 12px; } .tf-home-me .tf-daily { margin-top: 0; height: 100%; align-content: start; } @media (max-width: 1100px) { .tf-home-me { grid-template-columns: minmax(0, 1fr); } } /* Спільнота: турнір, клани, 3D — три картки з відео/артом. */ .tf-comm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .tf-comm-card { --cc: var(--accent); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 310px; padding: 24px; border-radius: 24px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .tf-comm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cc) 60%, transparent); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--cc) 85%, transparent); } .tf-comm-card.is-tour { --cc: var(--role-supreme); } .tf-comm-card.is-clans { --cc: var(--role-boss); } .tf-comm-card.is-3d { --cc: #ff5e7e; } /* Текст картки — угорі (назва) і внизу (посилання), тож темніше саме там, а відео видно посередині. */ .tf-comm-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--surface) 62%, transparent) 34%, color-mix(in srgb, var(--surface) 38%, transparent) 62%, color-mix(in srgb, var(--surface) 88%, transparent) 100%); } .tf-comm-card h3, .tf-comm-card p { text-shadow: 0 1px 12px color-mix(in srgb, var(--bg) 80%, transparent); } .tf-comm-card .tf-bgv { z-index: -2; } .tf-comm-card .tf-bgv video { opacity: .7; -webkit-mask-image: none; mask-image: none; } .tf-comm-card .tf-eyebrow { color: var(--cc); margin: 0; } .tf-comm-card h3 { margin: 0; font: 800 24px/1.2 var(--font-display); } .tf-comm-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 44ch; } .tf-comm-top { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; } .tf-comm-top li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .38); backdrop-filter: blur(6px); } .tf-comm-top b { font: 900 14px var(--font-mono); color: var(--cc); } .tf-comm-top .tf-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .tf-comm-top em { font: 700 13px var(--font-mono); font-style: normal; color: var(--ink-2); } .tf-comm-foot { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 750; color: var(--cc); } .tf-comm-foot svg { width: 18px; height: 18px; } .tf-comm-art { position: absolute; right: 2%; bottom: 52px; width: 64%; z-index: -1; filter: drop-shadow(0 0 34px rgba(255, 94, 126, .45)); transition: transform .5s ease; } .tf-comm-card:hover .tf-comm-art { transform: translate(-8px, -8px) rotate(-2deg); } .tf-comm-card.is-3d::before { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--surface) 55%, transparent) 50%, var(--surface) 88%), radial-gradient(60% 50% at 70% 40%, rgba(255, 94, 126, .18), transparent 70%); } .tf-comm-card .tf-clantag { font-size: .8em; } @media (max-width: 1024px) { .tf-comm-grid { grid-template-columns: minmax(0, 1fr); } .tf-comm-card { min-height: 240px; } } @media (prefers-reduced-motion: reduce) { .tf-srow, .tf-comm-card, .tf-srow-bg img, .tf-comm-art { transition: none; } } /* Радари прибрано (2026-10-03, замовник: «смішні й погано вписуються»): карта — скриншотом, нема скриншота — стримана плашка з назвою карти. */ .tf-sv-mapcard { --mode: var(--accent); position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--mode) 22%, transparent), transparent 60%), #0b0d13; border: 1px solid color-mix(in srgb, var(--mode) 40%, transparent); box-shadow: 0 30px 70px -36px color-mix(in srgb, var(--mode) 80%, transparent); } .tf-sv-mapcard img { width: 100%; height: 100%; object-fit: cover; display: block; } .tf-sv-mapcard img[hidden] { display: none; } .tf-sv-mapcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(7, 8, 12, .85)); pointer-events: none; } .tf-sv-mapname { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(7, 8, 12, .6); backdrop-filter: blur(6px); } .tf-sv-mapname b { font: 700 15px var(--font-mono); } .tf-sv-mapname i { width: 8px; height: 8px; border-radius: 50%; background: var(--role-pro); box-shadow: 0 0 10px var(--role-pro); animation: tf-pulse 1.4s infinite; } .tf-sv-mapname i.is-off { background: var(--ink-3); box-shadow: none; animation: none; } .tf-sv-mapcard.is-empty .tf-sv-mapname { left: 50%; top: 50%; bottom: auto; translate: -50% -50%; padding: 10px 18px; } .tf-sv-mapcard.is-empty .tf-sv-mapname b { font-size: 20px; letter-spacing: .04em; } @media (max-width: 900px) { .tf-sv-mapcard { max-width: 420px; } } .tf-who-map.is-empty { display: grid; place-items: center; font: 800 12px var(--font-mono); color: var(--ink-3); } .tf-map.is-empty { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), #0b0d13; } .tf-map-ph { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font: 900 22px var(--font-display); letter-spacing: .04em; color: color-mix(in srgb, var(--text) 16%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 10px; } .tf-pc-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(1.1) blur(1px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 45%, #000 80%, transparent 100%); } @media (min-width: 901px) { .tf-sv-in { grid-template-columns: 380px minmax(0, 1fr); } } /* ========================================================================== Активність сервера (2026-10-03; apps/web/activity.py, servers/_activity.html). Стовпчики — гравців за день, лінія з маркерами — пік онлайну (одна вісь «гравці»). Кольори серій перевірено валідатором dataviz для темного тла (#b97f10, #1a9cbc); теплова карта (tf-hm, бо tf-heat — карта в профілі) — одна гама золота. ========================================================================== */ .tf-act { --c-bar: #b97f10; --c-bar-hi: #d39418; --c-line: #1a9cbc; } .tf-act-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .tf-act-kpi > div { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .tf-act-kpi span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .tf-act-kpi b { font: 800 30px/1.1 var(--font-body); color: var(--text); } .tf-act-kpi b small { font-size: 15px; font-weight: 600; color: var(--ink-3); } .tf-act-kpi em { font-style: normal; font-size: 12.5px; color: var(--ink-3); } .tf-act-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; } .tf-act-grid > figure { margin: 0; } .tf-act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 16px; } .tf-act-head h3 { margin: 0; font-size: 18px; } .tf-act-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); } .tf-act-legend > span { display: inline-flex; align-items: center; gap: 7px; } .tf-act-legend .k-bar { width: 10px; height: 10px; border-radius: 2px; background: var(--c-bar); } .tf-act-legend .k-line { position: relative; width: 16px; height: 2px; border-radius: 2px; background: var(--c-line); } .tf-act-legend .k-line::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: var(--c-line); } .tf-act-plot { position: relative; height: 220px; margin: 6px 0 40px 30px; } .tf-act-axis span { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent); } .tf-act-axis b { position: absolute; right: calc(100% + 8px); top: -8px; font: 500 11px var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; } .tf-act-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } .tf-act-line polyline { fill: none; stroke: var(--c-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .tf-act-days { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); } .tf-act-days li { position: relative; height: 100%; outline: none; cursor: default; } .tf-act-col { position: absolute; inset: 0; } .tf-act-col .b { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: min(24px, 56%); height: var(--h); min-height: 0; border-radius: 4px 4px 0 0; background: var(--c-bar); transition: background .15s; } .tf-act-col .p { position: absolute; left: 50%; bottom: var(--p); z-index: 2; width: 9px; height: 9px; translate: -50% 50%; border-radius: 50%; background: var(--c-line); box-shadow: 0 0 0 2px var(--surface); } .tf-act-days li:hover .b, .tf-act-days li:focus-visible .b { background: var(--c-bar-hi); } .tf-act-days li:hover::before, .tf-act-days li:focus-visible::before { content: ""; position: absolute; inset: -6px 2px -6px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); } .tf-act-x { position: absolute; top: calc(100% + 8px); left: -4px; right: -4px; text-align: center; font-size: 10.5px; line-height: 1.25; color: var(--ink-3); white-space: nowrap; } .tf-act-x b { display: block; font-weight: 650; color: var(--ink-2); } .tf-act-days li.is-today .tf-act-x b { color: var(--text); } .tf-act-table summary { cursor: pointer; color: var(--ink-2); font-weight: 650; font-size: 13px; } .tf-act-table summary:hover { color: var(--text); } .tf-act-table table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; } .tf-act-table th, .tf-act-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); font-variant-numeric: tabular-nums; } .tf-act-table thead th { color: var(--ink-3); font-weight: 600; } .tf-act-table th[scope="row"], .tf-act-table thead th:first-child { text-align: left; } .tf-hm-grid { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; } .tf-hm-day { font-size: 11.5px; font-weight: 650; color: var(--ink-2); } .tf-hm-grid i, .tf-hm-scale i { display: block; aspect-ratio: 1; border-radius: 3px; } .tf-hm-grid i:hover { box-shadow: 0 0 0 1.5px var(--text); } .tf-hm .l0 { background: color-mix(in srgb, var(--text) 5%, var(--surface)); } .tf-hm .l1 { background: color-mix(in srgb, #f7b733 18%, var(--surface)); } .tf-hm .l2 { background: color-mix(in srgb, #f7b733 36%, var(--surface)); } .tf-hm .l3 { background: color-mix(in srgb, #f7b733 56%, var(--surface)); } .tf-hm .l4 { background: color-mix(in srgb, #f7b733 78%, var(--surface)); } .tf-hm .l5 { background: #f7b733; } .tf-hm-hour { font: 500 10.5px var(--font-mono); color: var(--ink-3); margin-top: 4px; white-space: nowrap; } .tf-hm-scale { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 11.5px; color: var(--ink-3); } .tf-hm-scale i { width: 14px; } .tf-hm-scale span:first-child { margin-right: 4px; } .tf-hm-scale span:last-child { margin-left: 4px; } /* Підказка графіків — одна на сторінку (tf.js tips); перший рядок — заголовок. */ .tf-tip { position: fixed; z-index: 90; display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px; pointer-events: none; font-size: 12.5px; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 94%, black); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8); } .tf-tip[hidden] { display: none; } .tf-tip b { color: var(--text); font-weight: 750; } @media (max-width: 1024px) { .tf-act-grid { grid-template-columns: minmax(0, 1fr); } .tf-act-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tf-act-days li:nth-child(even) .tf-act-x { visibility: hidden; } .tf-act-kpi b { font-size: 24px; } } /* Клани: шапка з відео «двоє в балаклавах» (clan-iconic) на повну силу, текст на темному градієнті зліва; вступ «Як це працює» з ілюстраціями — одразу під шапкою (2026-10-03). */ .tf-mod-hero.is-clans { min-height: 560px; display: flex; flex-direction: column; justify-content: center; } .tf-bgv.is-clanhero { z-index: -3; } .tf-bgv.is-clanhero video { opacity: 1; object-position: 80% 30%; -webkit-mask-image: none; mask-image: none; } .tf-mod-hero.is-clans::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, color-mix(in srgb, var(--bg) 70%, transparent) 46%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, transparent 30%, transparent 62%, var(--bg) 100%); } .tf-mod-hero.is-clans h1 { font-size: clamp(40px, calc(5.6vw * var(--vz)), 76px); } @media (max-width: 900px) { .tf-bgv.is-clanhero video { object-position: 72% 30%; opacity: .55; } .tf-mod-hero.is-clans::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg) 92%); } } .tf-cintro-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; } .tf-cintro-steps li { --st: var(--role-boss); position: relative; display: grid; align-content: start; gap: 8px; padding: 0 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--st) 26%, transparent); overflow: hidden; isolation: isolate; } .tf-cintro-steps li.is-2 { --st: var(--role-admin); } .tf-cintro-steps li.is-3 { --st: var(--role-supreme); } .tf-cintro-steps li.is-4 { --st: #ff5e7e; } .tf-cintro-art { position: relative; height: 150px; margin: 0 -20px 6px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--st) 26%, transparent), transparent 70%), repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb, var(--text) 4%, transparent) 27px 28px); border-bottom: 1px solid color-mix(in srgb, var(--st) 18%, transparent); } .tf-cintro-tag { font: 900 44px/1 "Unbounded", "Arial Black", sans-serif; color: var(--st); letter-spacing: .02em; text-shadow: 0 0 30px color-mix(in srgb, var(--st) 60%, transparent); padding: 10px 18px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--st) 55%, transparent); background: rgba(7, 8, 12, .5); } .tf-cintro-steps li.is-2 .tf-cintro-art { display: flex; align-items: flex-end; justify-content: center; gap: 0; } .tf-cintro-steps li.is-2 .tf-cintro-art img { height: 132px; width: auto; margin: 0 -14px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); } .tf-cintro-stars { display: flex; gap: 6px; } .tf-cintro-stars i { font-style: normal; font-size: 48px; line-height: 1; color: var(--st); text-shadow: 0 0 24px color-mix(in srgb, var(--st) 70%, transparent); } .tf-cintro-stars i:nth-child(2) { font-size: 62px; translate: 0 -8px; } .tf-cintro-art img.is-knife { width: 88%; height: auto; filter: drop-shadow(0 0 22px rgba(255, 94, 126, .45)); } .tf-cintro-n { position: absolute; top: 12px; left: 14px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 900 14px var(--font-mono); color: var(--on-accent); background: var(--st); } .tf-cintro-steps h3 { margin: 4px 0 0; font-size: 18px; } .tf-cintro-steps p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; } @media (max-width: 1100px) { .tf-cintro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tf-cintro-steps { grid-template-columns: minmax(0, 1fr); } } /* /privacy/, /terms/ — один стовпчик тексту (templates/legal/) */ .tf-legal { max-width: 820px; padding-block: 40px 72px; } .tf-legal-head h1 { margin: 6px 0 6px; font-size: clamp(30px, calc(4.4vw * var(--vz)), 50px); font-weight: 900; line-height: 1.05; } .tf-legal-head { margin-bottom: 26px; } .tf-legal .tf-prose h2 { margin: 1.8em 0 .5em; font-size: 22px; color: var(--text); } .tf-legal .tf-prose ul { margin: 0 0 1.1em; padding-left: 1.2em; } .tf-legal .tf-prose li { margin: .3em 0; } .tf-legal-links { margin-top: 36px; color: var(--ink-3); } .tf-legal-links a, .tf-foot-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Ворота закритого сайту (SITE_GATE, apps/web/gate.py; accounts/_auth.html .is-gate): відео gate-dojo (cs2-vacation замовника) на весь екран — відео віддзеркалене: боєць і стійка з ножами зліва (замовник 2026-10-04), опис лежить просто на відео (лише тінь під текстом, без темної смуги). Шапка прозора — відео видно й під нею. Шапка без меню, підвал — лише мови й низ. */ .tf-auth.is-gate { min-height: calc(calc(100svh * var(--vz)) - var(--top-h)); } .tf-bgv.is-gate video { opacity: .9; object-position: 15% 40%; filter: saturate(1.1) contrast(1.08); } /* Кадр (tools/art/video-src/gate-dojo.vf): обрізано кут із водяним знаком, потім hflip. */ /* Відео й затемнення — шар, прибитий до вікна (.tf-gate-bg у base.html, блок page_bg): масштаб і прокрутка його не рухають. */ .tf-gate-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .tf-gate-bg .tf-bgv { position: absolute; inset: 0; z-index: 0; } .tf-gate-bg .tf-bgv video { width: 100%; height: 100%; } .tf-gate-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* лише легке затемнення під картку праворуч і низ — опис зліва лежить на відео */ background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 45%, transparent), transparent 45%), linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--bg) 75%, transparent)); } .tf-auth.is-gate .tf-auth-card { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .tf-auth-about { max-width: 46ch; margin: 0 0 18px; color: color-mix(in srgb, var(--text) 82%, var(--ink-2)); font-size: 17px; line-height: 1.6; } .tf-foot.is-gate { padding-top: 6px; margin-top: 0; background: transparent; } /* відео видно й під низом */ .tf-top.is-gate .tf-top-right { margin-left: auto; } /* меню немає — праву частину шапки притискаємо праворуч */ /* замовник: «у шапці прибери чорний background — він обрізає відео»: лише легка тінь згори, щоб читалось лого */ .tf-top.is-gate { border-bottom: 0; } .tf-top.is-gate::before { background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Вузьке вікно: телефон або збільшений масштаб на ПК (замовник: «при zoom відео не має тьмяніти»). На ПК відео лишається яскравим, сильніше затемнення — лише на сенсорних телефонах. */ @media (max-width: 900px) { .tf-bgv.is-gate video { opacity: .75; object-position: 30% 30%; } .tf-gate-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 20%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 90%); } } @media (max-width: 900px) and (pointer: coarse) { .tf-bgv.is-gate video { opacity: .4; } .tf-gate-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent), var(--bg) 85%); } } /* Знак застосунку й згода на картках входу/реєстрації (accounts/_app_brand.html, _consent.html) */ .tf-app-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .tf-app-brand .tf-logo { flex: none; } .tf-app-brand b { display: block; font: 800 17px var(--font-display); letter-spacing: .02em; } .tf-app-brand small { color: var(--ink-3); font-size: 12.5px; } .tf-consent { margin: 16px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; text-align: center; } .tf-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .tf-consent a:hover { color: var(--accent); } /* яскравіший фон воріт — тексту зліва тінь, щоб читався поверх відео */ .tf-auth.is-gate .tf-auth-brand h2, .tf-auth.is-gate .tf-auth-about, .tf-auth.is-gate .tf-auth-perks { text-shadow: 0 2px 14px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); } /* Відеофон сторінки на все вікно (замовник 2026-10-04: сервери й статистика «якісно, як при вході»): шар прибитий до вікна, як .tf-gate-bg на воротах, — масштаб і прокрутка його не рухають. Підключення — блок page_bg у шаблоні (stats/leaderboard, servers/list, servers/detail). Зверху відео яскраве (шапка сторінки), донизу — затемнення, щоб таблиці читались. Відео: stats-karambit (karambit-blue-gem), servers-ridge (signal-at-the-ridge, світле — приглушене фільтром). */ .tf-page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .tf-page-bg .tf-bgv { position: absolute; inset: 0; z-index: 0; } .tf-page-bg .tf-bgv video { opacity: .95; -webkit-mask-image: none; mask-image: none; filter: saturate(1.1) contrast(1.06); } .tf-page-bg.is-ridge .tf-bgv video { opacity: 1; object-position: 50% 40%; filter: brightness(.5) contrast(1.25) saturate(.85); } .tf-page-bg.is-stats .tf-bgv video { object-position: 50% 50%; } .tf-page-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 10%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 45%, color-mix(in srgb, var(--bg) 78%, transparent) 100%), radial-gradient(120% 90% at 50% 30%, transparent 55%, color-mix(in srgb, var(--bg) 55%, transparent)); } /* Над відео шапки сторінок без власного фону: світіння й сітка .tf-lb-hero/.tf-sv-hero обрізались краєм шапки (видно прямокутник), а напівпрозорий скриншот карти на сторінці сервера каламутив відео — карта лишається в картці. */ body:has(.tf-page-bg) :is(.tf-lb-hero, .tf-sv-hero, .tf-home-hero, .tf-shop-hero, .tf-tour-hero, .tf-mod-hero) { border-bottom-color: transparent; } body:has(.tf-page-bg) :is(.tf-lb-hero, .tf-sv-hero, .tf-home-hero, .tf-shop-hero, .tf-tour-hero, .tf-mod-hero)::before, body:has(.tf-page-bg) .tf-mod-hero.is-clans::after, body:has(.tf-page-bg) .tf-sv-shot { display: none; } body:has(.tf-page-bg) :is(.tf-lb-hero, .tf-sv-hero, .tf-home-hero, .tf-shop-hero, .tf-tour-hero, .tf-mod-hero) :is(h1, .tf-hero-sub, p, .tf-eyebrow) { text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .5); } /* ----- Замовник 2026-10-04: рядок сервера, «Грати», карусель карток, стрічка анонсів, відеофони сторінок ----- */ /* Рядок сервера — увесь перехід на сторінку сервера: посилання назви розтягнуте на рядок. Над ним (z-index 1) — IP (копіювати), кількість гравців (вікно «хто зараз на сервері») і кнопки. */ .tf-srow-name::after { content: ""; position: absolute; inset: 0; z-index: 0; } .tf-srow-ip, .tf-srow-players, .tf-srow-cta { position: relative; z-index: 1; } .tf-srow-players { color: inherit; text-decoration: none; margin: -8px -12px; padding: 8px 12px; border-radius: 14px; transition: background .15s ease, box-shadow .15s ease; } .tf-srow-players:hover, .tf-srow-players:focus-visible { background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode) 45%, transparent); } /* Вікно «Запуск CS 1.6 з сайту» (partials/play_setup.html) — оболонка та сама, що в «Хто в грі». */ .tf-play-in { padding: 30px 30px 26px; overflow-y: auto; } .tf-play-in h2 { margin: 0 40px 10px 0; font: 800 24px/1.2 var(--font-display); } .tf-play-in > p { margin: 0; color: var(--ink-2); line-height: 1.6; } .tf-play-steps { list-style: none; counter-reset: tfstep; margin: 20px 0; padding: 0; display: grid; gap: 14px; } .tf-play-steps li { counter-increment: tfstep; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 14px; align-items: center; } .tf-play-steps li::before { content: counter(tfstep); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font-display); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .tf-play-steps li .tf-btn { grid-column: 2; justify-self: start; } .tf-play-alt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13.5px; } /* Карусель [data-rotate] (tf.js rotator): усі картки в одній клітинці, видно активну, раз на 10 с наступна. */ /* overflow-x: clip — приховані картки зсунуті на 32 px праворуч; без обрізання на телефоні вони виходили за край екрана й давали горизонтальну прокрутку всієї сторінки (тінь при наведенні йде вниз — її не ріже) */ .is-rot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow-x: clip; } .is-rot > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(32px); } .is-rot > .is-active { opacity: 1; visibility: visible; transform: none; } /* переходи — лише після першого показу (is-ready), щоб на старті картки не блимали; стара гасне швидше, ніж проявляється нова, — тексти двох карток не накладаються */ .is-rot.is-ready > * { transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } .is-rot.is-ready > .is-active { transition: opacity .55s ease .25s, transform .7s cubic-bezier(.2, .7, .2, 1) .25s, visibility 0s; } .tf-rot-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .tf-rot-dots button { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: color-mix(in srgb, var(--text) 22%, transparent); transition: width .3s ease, background .3s ease; } .tf-rot-dots button[aria-current="true"] { width: 46px; background: var(--accent); } .tf-rot-dots button:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); } /* у каруселі картки великі й довгі — на всю ширину */ .tf-comm-grid.is-rot .tf-comm-card { min-height: 400px; padding: 46px 56px; gap: 14px; } .tf-comm-grid.is-rot .tf-comm-card h3 { font-size: clamp(30px, calc(3.4vw * var(--vz)), 48px); } .tf-comm-grid.is-rot .tf-comm-card p { font-size: 17px; max-width: 56ch; } .tf-comm-grid.is-rot .tf-comm-top { max-width: 560px; } .tf-comm-grid.is-rot .tf-comm-top li { padding: 11px 16px; font-size: 15.5px; } .tf-comm-grid.is-rot .tf-comm-foot { font-size: 16px; } .tf-comm-grid.is-rot .tf-comm-art { width: 46%; right: 4%; bottom: 36px; } .tf-news.is-rot .tf-news-card { min-height: 400px; padding: 46px 56px; gap: 12px; } .tf-news.is-rot .tf-news-card .bg { opacity: .6; } .tf-news.is-rot .tf-news-card::after { background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--surface) 92%, transparent) 92%); } .tf-news.is-rot .tf-news-card h3 { font-size: clamp(28px, calc(3vw * var(--vz)), 44px); max-width: 26ch; } .tf-news.is-rot .tf-news-card p { font-size: 16.5px; } @media (max-width: 700px) { .tf-comm-grid.is-rot .tf-comm-card, .tf-news.is-rot .tf-news-card { min-height: 340px; padding: 26px 22px; } .tf-comm-grid.is-rot .tf-comm-art { width: 70%; opacity: .55; } } /* Стрічка анонсів по колу [data-marquee] (tf.js marquee): доріжка з двох однакових половин зсувається на половину. */ .tf-ann { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tf-ann-in.is-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .tf-marquee-track { display: flex; gap: 8px; width: max-content; animation: tf-marquee var(--tf-marquee-s, 40s) linear infinite; } .tf-ann-in.is-marquee:hover .tf-marquee-track, .tf-ann-in.is-marquee:focus-within .tf-marquee-track { animation-play-state: paused; } @keyframes tf-marquee { to { transform: translateX(calc(-50% - 4px)); } } /* Градієнтні слова заголовків (.hot — текст із background-clip) — без тіні: крізь прозорі літери вона б їх бруднила. */ body:has(.tf-page-bg) h1 .hot { text-shadow: none; } /* clan-iconic: ліва частина кадру залита чорним (tools/art/video-src/clan-iconic.vf — там був напис CS:GO). На все вікно різка межа помітна — розмиваємо її маскою; на вузькому екрані кадр і так зсунутий до бійців. */ .tf-page-bg.is-clans .tf-bgv video { object-position: 78% 30%; } @media (min-width: 901px) { .tf-page-bg.is-clans .tf-bgv video { object-position: 100% 30%; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 56%); mask-image: linear-gradient(90deg, transparent 30%, #000 56%); } } /* «?» біля «Грати» — інструкція запуску CS 1.6 з сайту (partials/play_setup.html) будь-коли */ .tf-play-help { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--bg) 50%, transparent); color: var(--ink-2); font: 800 14px var(--font-display); cursor: pointer; } .tf-play-help:hover, .tf-play-help:focus-visible { color: var(--accent); border-color: var(--accent); } .tf-hero-cta .tf-play-help { width: 40px; height: 40px; align-self: center; } /* Карусель спільноти: картка широка (~3:1), і відео на всю картку різало кадр зверху й знизу, а загальна маска .tf-bgv ще й гасила верх (замовник: «картинка обрізається зверху»). Відео — праворуч на ~60% ширини (майже 16:9), прив'язане до верху кадру, гасне лише ліворуч під текстом. */ .tf-comm-grid.is-rot .tf-comm-card .tf-bgv { left: auto; width: 62%; } .tf-comm-grid.is-rot .tf-comm-card .tf-bgv video { object-position: 50% 0%; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); } .tf-comm-grid.is-rot .tf-comm-card::before { background: linear-gradient(90deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 55%, transparent) 55%, transparent 80%); } @media (max-width: 700px) { .tf-comm-grid.is-rot .tf-comm-card .tf-bgv { width: 100%; } .tf-comm-grid.is-rot .tf-comm-card .tf-bgv video { opacity: .45; -webkit-mask-image: none; mask-image: none; } } /* Картка «Скіни в 3D» у «Спільноті» — замість відео картинка ножа; щоб не стояла (замовник 2026-10-04: «без анімації»), ніж ширяє й погойдується, по ньому пробігає відблиск. «Зменшити рух» — без анімації. */ @keyframes tf-knife-float { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: -10px -16px; rotate: 2deg; } } @keyframes tf-knife-shine { 0%, 55% { filter: drop-shadow(0 0 34px rgba(255, 94, 126, .45)) brightness(1); } 70% { filter: drop-shadow(0 0 34px rgba(255, 94, 126, .45)) drop-shadow(0 0 18px color-mix(in srgb, #ff5e7e 70%, transparent)) brightness(1.35); } 85%, 100% { filter: drop-shadow(0 0 34px rgba(255, 94, 126, .45)) brightness(1); } } .tf-comm-card.is-3d .tf-comm-art { animation: tf-knife-float 6s ease-in-out infinite, tf-knife-shine 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .tf-comm-card.is-3d .tf-comm-art { animation: none; } }