/* Xterium Portal v2 — Home styles, xh-* prefix */ /* ============================================ XTERIUM HOMEPAGE — styles.css All classes prefixed: xh- No aggressive global reset ============================================ */ /* Wave 720 (2026-05-28): `overscroll-behavior-y: contain` убран с html/body — owner-feedback: мешал обычному скроллу страницы. По спеке overscroll-behavior должен стоять только на вложенных блоках (модалки, дроверы), не на корне. См. правило для модалок/меню ниже. */ html { overflow-x: clip; } /* Hard lock background scroll when modal/menu open — глобально, на всех размерах (раньше было только в @media max-width: 640px, не покрывало планшеты). */ html.body-modalShow, html:has(body.body-modalShow), html:has(body.body-menuShow) { overflow: hidden !important; height: 100% !important; } body.body-modalShow, body.body-menuShow { overflow: hidden !important; height: 100% !important; overscroll-behavior: contain !important; /* блокировка скролла попадает на body, не на html */ } .xh-page { /* ЕДИНЫЙ ИСТОЧНИК общих токенов --xh-* — unified-header.css (грузится сразу ПОСЛЕ этого файла и объявляет их под .xh-page → его значения и так применяются на портале, а на форуме это вообще единственный источник). Поэтому общие токены здесь НЕ дублируем (убраны при унификации 2026-06-06: упрощаем, не тянем мёртвый дубль). Ниже — только ПОРТАЛ-УНИКАЛЬНЫЕ токены, которых нет в unified-header.css. */ --xh-bg-deep: #060a14; --xh-bg-primary: #0a0f1c; /* портал-уникальная: unified объявляет её только для форума, не под .xh-page */ --xh-text-dim: #9aa6bd; /* alias для модалок */ --xh-border-input: #34456a; /* border полей формы */ --xh-link-blue: #5fa8d1; /* WCAG-AA синяя ссылка */ --xh-orange-deep: #c46c14; /* затемнённый оранжевый для CTA на светлом */ --xh-blue: #2a7de1; /* Аутентичные цвета ресурсов из CSS игры */ --xh-res-metal: #a47d7a; /* 901 */ --xh-res-crystal: #5ca6aa; /* 902 */ --xh-res-deuterium: #339966; /* 903 */ --xh-res-energy: #e09a3a; /* 911 — янтарный из палитры игры z.color.css */ --xh-bg-placeholder-grad: linear-gradient(135deg, var(--xh-bg-card-hover) 0%, var(--xh-border) 100%); /* placeholder-карточки */ /* 2026-05-21: merged from 2nd .xh-page block (layout) */ margin: 0; padding: 0; font-family: var(--xh-font-body); font-size: 16px; line-height: 1.6; color: var(--xh-text); background: var(--xh-bg-deep); -webkit-font-smoothing: antialiased; /* 2026-05-21: overflow-x moved from body to html — body overflow propagation breaks position:sticky on narrow viewports. */ } .xh-page *, .xh-page *::before, .xh-page *::after { box-sizing: border-box; } .xh-page img { max-width: 100%; height: auto; display: block; } .xh-page a:not([class*="xh-btn"]) { color: inherit; } .xh-page a { text-decoration: none; } .xh-page button { font-family: inherit; cursor: pointer; border: none; background: none; } .xh-page ul, .xh-page ol { list-style: none; margin: 0; padding: 0; } .xh-page h1,.xh-page h2,.xh-page h3,.xh-page h4 { margin: 0; font-family: var(--xh-font-heading); font-weight: 700; line-height: 1.15; text-wrap: balance; } .xh-page p { text-wrap: pretty; } .xh-container { width: 100%; max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); } .xh-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 70% 20%, rgba(20,50,100,.15) 0%, transparent 60%), radial-gradient(ellipse at 30% 80%, rgba(20,40,80,.1) 0%, transparent 50%); pointer-events: none; z-index: 0; } #xh-stars-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }@media (min-width: 769px) { .xh-header { background: var(--xh-bg-header); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } } /* 2026-05-21 STICKY-FIX: position:sticky breaks on narrow mobile when ancestor has overflow-x:hidden. On <769px viewport — use position:fixed + body padding-top so header is always visible. */ @media (max-width: 768px) { .xh-header { position: fixed; top: 0; left: 0; right: 0; } .xh-page { padding-top: var(--xh-header-h); } }.xh-logo { display: flex; align-items: baseline; gap: 0; flex-shrink: 0; margin-right: 16px; }/* .xh-logo-sub removed — markup не использует этот класс */ .xh-nav { display: flex; gap: 4px; flex: 1; align-items: center; }.xh-header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }/* Wave J Phase B 2026-05-20: contrast bump. Раньше var(--xh-gold) на rgba(255,204,0,.14) поверх dark = 1.6:1 (fail 4.5:1 AA). Теперь solid dark bg + bright yellow = ~13:1. */ .xh-lang-soon-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--xh-orange-text); color: var(--xh-gold); border-radius: 999px; vertical-align: middle; } .xh-login-link { font-family: var(--xh-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--xh-text); padding: 9px 18px; border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); } .xh-login-link:hover { border-color: var(--xh-text-secondary); background: rgba(255,255,255,.04); } /* BUTTONS */ .xh-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--xh-font-heading); font-weight: 700; font-size: 15px; padding: 10px 24px; border-radius: var(--xh-radius); letter-spacing: .5px; text-transform: uppercase; transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); white-space: nowrap; }/* 2026-05-25: WCAG 2.2 SC 2.4.7 Focus Visible — все интерактивные элементы Базы знаний */ .xh-page a:focus-visible, .xh-page button:focus-visible, .xh-page input:focus-visible, .xh-page summary:focus-visible, .xh-page [tabindex]:focus-visible { outline: 2px solid var(--xh-orange); outline-offset: 2px; border-radius: 4px; } .xh-btn--primary { background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 800; box-shadow: 0 0 20px var(--xh-orange-glow); } .xh-btn--primary:hover { background: var(--xh-orange-hover); color: var(--xh-orange-text); box-shadow: 0 0 30px rgba(232,132,30,.4); transform: translateY(-1px); } .xh-btn--outline { background: transparent; color: var(--xh-text); border: 1px solid var(--xh-border-light); } .xh-btn--outline:hover { border-color: var(--xh-text-secondary); background: rgba(255,255,255,.04); }.xh-btn--lg { font-size: 17px; padding: 14px 36px; } /* BURGER */ .xh-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; background: transparent; border: 0; cursor: pointer; }.xh-mobile-menu { -webkit-backdrop-filter: blur(12px); display: none; position: fixed; top: var(--xh-header-h); left: 0; right: 0; bottom: 0; background: rgba(6,10,20,.96); backdrop-filter: blur(12px); z-index: 99; padding: 24px 32px; flex-direction: column; gap: 4px; overflow-y: auto; /* Большой нижний отступ + safe-area: на телефоне (особенно iOS) нижняя панель браузера перекрывала низ меню, и до переключателя языка нельзя было долистать («стоп на настройках аккаунта»). Отступ даёт место прокрутить последние пункты выше панели. Баг владельца 2026-06-07. */ padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .xh-mobile-menu.is-open { display: flex; } .xh-mobile-menu a:not([class*="xh-btn"]) { font-family: var(--xh-font-heading); font-size: 18px; font-weight: 600; padding: 14px 0; color: var(--xh-text-secondary); border-bottom: 1px solid var(--xh-border); transition: color var(--xh-transition); } .xh-mobile-menu a:not([class*="xh-btn"]):hover { color: var(--xh-text); } .xh-mobile-menu .xh-btn { margin-top: 16px; justify-content: center; border: 0; } .xh-mobile-menu .xh-btn--primary { color: var(--xh-orange-text); border-bottom: 0; } /* Authed: показ ника игрока в мобильном меню (owner request 2026-05-16). */ .xh-mobile-user { margin: 8px 0 4px; padding: 14px 16px; background: rgba(255,204,0,.08); border: 1px solid rgba(255,204,0,.25); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; } .xh-mobile-user-label { font-size: 12px; font-weight: 500; color: var(--xh-text-secondary); text-transform: uppercase; letter-spacing: .08em; } .xh-mobile-user-name { font-family: var(--xh-font-heading); font-size: 20px; font-weight: 700; color: var(--xh-yellow, var(--xh-gold)); } /* Mobile: список вселенных для авторизованного юзера. */ .xh-mobile-universes { margin: 16px 0 8px; padding: 14px 0; border-top: 1px solid var(--xh-border); } .xh-mobile-universes__heading { font-size: 11px; font-weight: 700; color: var(--xh-text-muted, var(--xh-text-dim)); text-transform: uppercase; letter-spacing: .1em; padding: 0 4px 8px; } .xh-mobile-universe-item { display: flex !important; align-items: center; justify-content: space-between; padding: 12px 14px !important; margin: 4px 0; border-bottom: 0 !important; background: rgba(255,255,255,.03); border: 1px solid var(--xh-border); border-radius: 8px; transition: border-color var(--xh-transition), background var(--xh-transition); font-size: 16px !important; font-weight: 600 !important; } .xh-mobile-universe-item:hover { border-color: rgba(232,132,30,.5); background: rgba(232,132,30,.06); } .xh-mobile-universe-name { color: var(--xh-text); } .xh-mobile-universe-ver { font-size: 11px; color: var(--xh-text-muted, var(--xh-text-dim)); font-weight: 500; font-family: var(--xh-font-mono, monospace); } /* .xh-user / .xh-user-nick (база + PC @media) — ЕДИНЫЙ источник: unified-header.css (грузится ПОСЛЕ home.css). Раньше здесь была расходящаяся копия: .xh-user с flex-shrink:0 и .xh-user-nick без обрезки → на портале ник вёл себя иначе, чем на форуме (у форума только unified: min-width:0 + обрезка «…», бургер цел). Убрано 2026-06-06 для жёсткой унификации шапки. */ /* Wave J Phase 2 2026-05-20: user-dropdown — single column (раньше наследовался 2-col grid от xh-lang-dropdown что для языков работало, но смешивало universes/settings/logout в кривые колонки). */ .xh-user-dropdown { min-width: 260px; grid-template-columns: 1fr !important; } /* Wave J Phase H+ 2026-05-21 v3 — restored legacy flex-center подход. Mask = flex-контейнер, modal-body = relative карточка с auto-height и scroll. */ #modal-mask { display: none; /* jQuery fadeIn ставит inline display:block; селектор .body-modalShow ниже переключает на flex */ position: fixed; inset: 0; z-index: 9999; background: rgba(6,10,20,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px; overflow-y: auto; } /* body.body-modalShow выставляется в modalShow() — используем как trigger чтобы заменить fadeIn's display:block на display:flex (без него flex-centering не работает). */ body.body-modalShow #modal-mask { display: flex !important; align-items: center; justify-content: center; } #modal-mask .modal-body { display: none; background: var(--xh-bg-card); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); padding: 32px; /* CRIT: override legacy position:absolute + width:320px из media/css/modal.css. */ position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-width: 480px !important; max-height: calc(100vh - 40px); overflow-y: auto; margin: 0 auto; } #modal-mask #modal-reg { max-width: 560px !important; } /* шире для регистрации с captcha */ #modal-mask .modal-body.modal-show { display: block; } body.body-modalShow { overflow: hidden; } /* Override legacy fixed heights и absolute modal-content. */ #modal-mask #modal-login, #modal-mask #modal-reg, #modal-mask #modal-recover, #modal-mask #modal-recoverend { height: auto !important; } #modal-mask .modal-content { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 0 !important; overflow: visible !important; } #modal-mask .modal-close-mask { position: fixed; inset: 0; z-index: -1; cursor: pointer; } #modal-mask .modal-title { font-family: var(--xh-font-display); font-size: 24px; color: var(--xh-text); margin-bottom: 20px; text-align: center; font-style: normal !important; font-weight: 700; height: auto; } #modal-mask .modal-title span { display: block; font-size: 13px; color: var(--xh-text-dim); margin-top: 8px; font-family: var(--xh-font-body); } #modal-mask .modal-title span span { display: inline; color: var(--xh-orange); cursor: pointer; text-decoration: underline; } #modal-mask .modal-content { width: 100%; } #modal-mask .modal-soc { margin-bottom: 16px; } #modal-mask .modal-soc-icos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } #modal-mask .modal-soc-sep { text-align: center; color: var(--xh-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0; position: relative; } #modal-mask .modal-soc-sep::before, #modal-mask .modal-soc-sep::after { content: ''; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--xh-border); } #modal-mask .modal-soc-sep::before { left: 0; } #modal-mask .modal-soc-sep::after { right: 0; } #modal-mask form { display: flex; flex-direction: column; gap: 12px; } /* Wave J Phase F M-2 fix: idle border bump для WCAG 1.4.11 Non-text Contrast (≥3:1). Был --xh-border var(--xh-border) = 2.0:1 на card bg. */ #modal-mask .input-text, #modal-mask .select { background: rgba(255,255,255,.05); border: 1px solid var(--xh-border-input, #34456a); border-radius: var(--xh-radius-md); padding: 12px 14px; color: var(--xh-text); font-size: 14px; width: 100%; font-family: inherit; } #modal-mask .input-text:focus, #modal-mask .select:focus { outline: none; border-color: var(--xh-orange); } #modal-mask .modal-extra-text { text-align: center; font-size: 13px; } #modal-mask .modal-extra-text a { color: var(--xh-text-dim); text-decoration: none; } #modal-mask .modal-extra-text a:hover { color: var(--xh-orange); } #modal-mask .btn { padding: 14px 20px; border-radius: var(--xh-radius-md); font-weight: 700; cursor: pointer; border: none; font-size: 14px; } #modal-mask .btn-primary { background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 700; } #modal-mask .btn-primary:hover { background: var(--xh-orange-hover); } #modal-mask .btn-big { font-size: 16px; padding: 16px; } #modal-mask .modal-block { margin-bottom: 12px; } #modal-mask .modal-policy-text, #modal-mask .recover-text { font-size: 12px; color: var(--xh-text-dim); line-height: 1.5; } #modal-mask label { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--xh-text-dim); cursor: pointer; } #modal-mask label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } /* HERO */ .xh-hero { position: relative; z-index: 1; min-height: 520px; padding: 56px 0 40px; overflow: hidden; display: flex; align-items: center; background: var(--xh-bg-deep); } /* Hero как / вместо CSS background-image — даёт LCP в 2-3x быстрее (preload + fetchpriority high). также position:absolute чтобы child width/height: 100% работали корректно. */ .xh-hero > picture { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; } /* Specificity boost: `.xh-page img { height: auto }` (строка 58) побивает по specificity без `.xh-hero`. */ .xh-hero .xh-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; aspect-ratio: auto; max-width: none; } /* .xh-hero-bg теперь — gradient overlay (без image, image отдельно в xh-hero-img выше). */ .xh-hero-bg { position: absolute; inset: 0; z-index: 1; background: transparent; pointer-events: none; } .xh-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,10,20,.85) 0%, rgba(6,10,20,.5) 45%, transparent 70%), linear-gradient(180deg, transparent 0%, transparent 50%, rgba(6,10,20,.85) 100%); } @media (max-width: 860px) { /* Сильный мягкий gradient к bg-primary — нижние 30% сливаются полностью. Без mask-image (iOS Safari unreliable с radial mask). */ .xh-hero-bg::after { background: linear-gradient(180deg, rgba(6,10,20,.30) 0%, rgba(6,10,20,.50) 35%, rgba(6,10,20,.80) 60%, rgba(6,10,20,.97) 80%, var(--xh-bg-primary) 95%); } } .xh-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: flex; align-items: center; justify-content: flex-start; gap: 40px; } .xh-hero-content { max-width: 560px; flex-shrink: 0; } .xh-hero-title { font-family: var(--xh-font-display); font-size: clamp(38px, 4.8vw, 60px); line-height: 1.0; letter-spacing: 1px; color: var(--xh-white); margin: 0 0 10px; text-transform: uppercase; display: flex; flex-direction: column; } .xh-hero-title span { display: block; } .xh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .xh-hero-subtitle { font-family: var(--xh-font-heading); font-size: 18px; font-weight: 600; color: var(--xh-text); margin-bottom: 10px; letter-spacing: .3px; } .xh-hero-desc { font-size: 15px; color: var(--xh-text-secondary); max-width: 460px; margin-bottom: 22px; line-height: 1.55; } /* Hero eyebrow row — combined trust signals */ .xh-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 7px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--xh-border-light); border-radius: 999px; font-family: var(--xh-font-heading); font-size: 12px; font-weight: 600; color: var(--xh-text-secondary); letter-spacing: .3px; flex-wrap: wrap; } .xh-hero-eyebrow strong { color: var(--xh-white); font-weight: 700; } .xh-trust-pill { display: inline-flex; align-items: center; gap: 7px; } .xh-trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--xh-green); box-shadow: 0 0 0 0 rgba(32,168,104,.6); animation: xh-pulse 2s infinite; flex-shrink: 0; } .xh-trust-sep { width: 1px; height: 12px; background: var(--xh-border-light); display: inline-block; } .xh-trust-rating { display: inline-flex; align-items: center; gap: 5px; } .xh-trust-rating svg { width: 13px; height: 13px; color: var(--xh-amber); flex-shrink: 0; } .xh-trust-muted { color: var(--xh-text-muted); font-weight: 600; } .xh-trust-season strong { color: var(--xh-orange); } /* Wave J Phase C 2026-05-20 — hero CTA polish (conversion focus per owner feedback). Primary "В ИГРУ" получает stronger glow + size bump на mobile (где кнопка казалась теряющейся). */ .xh-hero-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .xh-hero-actions .xh-btn { flex-shrink: 0; } .xh-hero-actions .xh-btn--primary { font-size: 16px; padding: 14px 28px; box-shadow: 0 0 28px var(--xh-orange-glow), 0 0 0 1px rgba(255, 140, 0, 0.3); position: relative; overflow: hidden; } .xh-hero-actions .xh-btn--primary::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 200, 80, 0.25) 0%, transparent 50%); transform: translate(-50%, -50%); pointer-events: none; animation: xh-hero-cta-pulse 3.5s ease-in-out infinite; } @keyframes xh-hero-cta-pulse { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .xh-hero-actions .xh-btn--primary::after { animation: none; opacity: 0.5; } } /* Perks row under CTA */ .xh-hero-perks { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; } .xh-hero-perks span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--xh-text-secondary); font-family: var(--xh-font-heading); font-weight: 600; letter-spacing: .2px; } .xh-hero-perks svg { width: 14px; height: 14px; color: var(--xh-green); flex-shrink: 0; } /* Ghost CTA — trailer button */ .xh-btn--ghost { background: transparent; color: var(--xh-text); border: 1px solid transparent; padding: 10px 16px; } .xh-btn--ghost svg { width: 18px; height: 18px; color: var(--xh-text); } .xh-btn--ghost:hover { background: rgba(255,255,255,.05); border-color: var(--xh-border-light); } .xh-hero-apps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .xh-hero-apps-label { font-size: 12px; color: var(--xh-text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; font-family: var(--xh-font-heading); font-weight: 600; } .xh-store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius); color: var(--xh-text); font-family: var(--xh-font-heading); font-weight: 600; transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); white-space: nowrap; background: rgba(255,255,255,.02); } .xh-store-badge:hover { border-color: var(--xh-text-secondary); background: rgba(255,255,255,.05); transform: translateY(-1px); } .xh-store-badge svg { width: 22px; height: 22px; flex-shrink: 0; } .xh-store-badge--browser svg { color: var(--xh-blue-light); } .xh-store-badge--browser:hover { border-color: rgba(74,157,245,.5); box-shadow: 0 6px 20px rgba(74,157,245,.18); } .xh-store-badge--gp svg { color: var(--xh-green-bright); } .xh-store-badge--gp:hover { border-color: rgba(61,219,133,.5); box-shadow: 0 6px 20px rgba(61,219,133,.18); } .xh-store-badge--as svg { color: var(--xh-white); } .xh-store-badge--as:hover { border-color: rgba(245,246,250,.5); box-shadow: 0 6px 20px rgba(255,255,255,.10); } .xh-store-badge-stack { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .xh-store-badge-stack strong { font-size: 13px; font-weight: 700; } .xh-store-badge-stack small { font-size: 10px; color: var(--xh-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; } /* STATS BAR — open row, no card (sits between hero & galaxy card) */ .xh-stats { position: relative; z-index: 1; padding: 8px 0 8px; background: transparent; border-bottom: 1px solid var(--xh-border); border-top: 1px solid var(--xh-border); } .xh-stats-inner { max-width: var(--xh-max-w); margin: 0 auto; padding: 18px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .xh-stat { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; min-width: 0; } .xh-stat + .xh-stat { border-left: 1px solid var(--xh-border); padding-left: 24px; } .xh-stat-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--xh-text-secondary); flex-shrink: 0; background: rgba(255,255,255,.03); border: 1px solid var(--xh-border); border-radius: 50%; } .xh-stat-icon svg { width: 22px; height: 22px; } .xh-stat-number { font-family: var(--xh-font-heading); font-size: 26px; font-weight: 700; color: var(--xh-text); line-height: 1.1; } .xh-stat-label { font-size: 12px; color: var(--xh-text-muted); letter-spacing: .3px; line-height: 1.3; } /* GALAXY */ .xh-galaxy { position: relative; z-index: 1; padding: 64px 0; } .xh-galaxy-inner-wrap { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); } .xh-galaxy-card { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--xh-bg-card) 0%, var(--xh-bg-primary) 100%); border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius-lg); padding: 40px; } /* Карта-галактики как integrated background (раньше была отдельной картинкой справа). */ .xh-galaxy-map-bg { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: 70%; aspect-ratio: 1100 / 619; background-size: cover; background-position: center; opacity: .85; pointer-events: none; } .xh-galaxy-map-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--xh-bg-card) 0%, rgba(13,20,36,.85) 35%, rgba(13,20,36,.25) 70%, rgba(13,20,36,.7) 100%), radial-gradient(circle at 80% 50%, transparent 0%, rgba(13,20,36,.4) 60%); } @media (max-width: 860px) { /* На мобильном карта в нижней половине карточки — overlay убран в этой зоне чтобы карта была видна. Solid bg-card только в зоне где текст (верхние 50%). */ .xh-galaxy-map-bg { width: 110%; right: -5%; left: -5%; top: 50%; bottom: 0; transform: none; aspect-ratio: auto; height: 50%; background-position: center top; background-size: cover; opacity: 1; } .xh-galaxy-map-overlay { background: linear-gradient(180deg, var(--xh-bg-card) 0%, var(--xh-bg-card) 48%, rgba(13,20,36,.55) 52%, rgba(13,20,36,0) 70%, rgba(13,20,36,0) 100%); } } .xh-galaxy-inner { display: flex; gap: 48px; align-items: flex-start; position: relative; z-index: 1; } .xh-live-indicator { display: inline-flex; align-items: center; gap: 8px; font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--xh-text-secondary); margin-bottom: 16px; } /* .xh-live-dot: единое определение ниже на ~line 783 (с animation + --xh-green) */ /* Wave J Phase H+ 2026-05-21 — PageSpeed CLS fix: composited pulse animation. Раньше box-shadow expand → non-composited → блокирует main thread, влияет на CLS. Теперь transform+opacity → GPU composited, плавно даже под нагрузкой. */ .xh-trust-dot, .xh-live-dot { position: relative; } .xh-trust-dot::after, .xh-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(32,168,104,.7); animation: xh-pulse 2s infinite; will-change: transform, opacity; pointer-events: none; } @keyframes xh-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } .xh-galaxy-content { flex: 0 0 460px; max-width: 60%; } @media (max-width: 860px) { .xh-galaxy-content { flex: 1; max-width: 100%; } } .xh-galaxy-title { font-size: 28px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; color: var(--xh-white); } .xh-galaxy-desc { font-size: 15px; color: var(--xh-text-secondary); margin-bottom: 28px; line-height: 1.6; } /* Wave J Phase H 2026-05-20 — galaxy block уплотнён и cards-like вместо плоского списка (owner feedback "не улучшился"). */ .xh-galaxy-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .xh-galaxy-action { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(20, 35, 60, .45); border: 1px solid rgba(74, 157, 245, .12); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--xh-transition), border-color var(--xh-transition), transform var(--xh-transition); } .xh-galaxy-action:hover { background: rgba(28, 50, 84, .65); border-color: rgba(74, 157, 245, .35); transform: translateX(2px); } .xh-galaxy-action-icon { width: 40px; height: 40px; border-radius: var(--xh-radius); background: var(--xh-bg-card); border: 1px solid var(--xh-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .xh-galaxy-action-icon svg { width: 20px; height: 20px; color: var(--xh-blue); } .xh-galaxy-action span { font-family: var(--xh-font-heading); font-size: 15px; font-weight: 600; color: var(--xh-text); } .xh-galaxy-map { flex: 1; min-width: 0; } .xh-galaxy-map svg { width: 100%; height: auto; } .xh-galaxy-map-img { width: 100%; border-radius: var(--xh-radius-lg); border: 1px solid var(--xh-border); } /* UNIVERSES */ .xh-universes { position: relative; z-index: 1; padding: 64px 0; } .xh-universes-header { text-align: center; margin-bottom: 40px; } .xh-universes-title { font-size: 26px; text-transform: uppercase; letter-spacing: 2px; color: var(--xh-white); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 16px; } .xh-universes-title::before, .xh-universes-title::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--xh-border-light); } .xh-universes-sub { font-size: 15px; color: var(--xh-text-secondary); } .xh-universe-grid { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .xh-universe-card { position: relative; border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); padding: 28px 24px; background: var(--xh-bg-card); overflow: hidden; transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); display: flex; flex-direction: column; min-height: 460px; } .xh-universe-card:hover { border-color: var(--xh-border-light); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.3); } .xh-universe-card--woa { border-color: rgba(232,132,30,.55); box-shadow: 0 0 0 1px rgba(232,132,30,.20) inset, 0 0 32px rgba(232,132,30,.10); } .xh-universe-card--woa:hover { border-color: rgba(232,132,30,.75); box-shadow: 0 0 0 1px rgba(232,132,30,.30) inset, 0 0 48px rgba(232,132,30,.18); } .xh-universe-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; background: var(--xh-orange); color: var(--xh-orange-text); border-radius: 999px; margin-bottom: 14px; align-self: flex-start; box-shadow: 0 0 14px var(--xh-orange-glow); } .xh-universe-badge::before { content: '★'; font-size: 11px; } .xh-universe-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .xh-universe-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .xh-universe-icon svg { width: 32px; height: 32px; } .xh-universe-name { font-family: var(--xh-font-heading); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--xh-white); line-height: 1.1; } .xh-universe-name-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .xh-universe-meta { font-family: var(--xh-font-body); font-size: 12px; font-weight: 400; color: var(--xh-text-muted); letter-spacing: .2px; text-transform: none; } .xh-universe-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; flex: 1; } .xh-universe-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--xh-text-secondary); } .xh-universe-feature::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .xh-universe-card--woa .xh-universe-feature::before { background: var(--xh-orange); } .xh-universe-card--classic .xh-universe-feature::before { background: var(--xh-blue); } .xh-universe-card--reborn .xh-universe-feature::before { background: var(--xh-teal); } .xh-universe-platforms { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 13px; color: var(--xh-text-muted); } .xh-universe-platforms svg { width: 16px; height: 16px; } .xh-universe-platforms span { display: flex; align-items: center; gap: 5px; } .xh-universe-card .xh-btn { align-self: stretch; justify-content: center; } .xh-universe-cta { margin-top: auto; } .xh-universe-card-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; } .xh-universe-card > *:not(.xh-universe-card-bg) { position: relative; z-index: 1; } .xh-universe-card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,19,34,0) 0%, rgba(12,19,34,.25) 45%, rgba(12,19,34,.85) 100%); } /* WebP direct (image-set с type() имеет render-bug в Chromium — image renders only first url). Chromium 86+, Safari 14+, Firefox 65+ поддерживают WebP — ~99% trafic. */ /* Wave J Phase 3 2026-05-20: fixed missing image paths (был 404 на каждой главной). Wave J Phase H 2026-05-20: WoA card получает battle scene (thematic + visually distinct от Classic). */ /* Wave J Phase H 2026-05-20 — TOP blocks на /universes/{slug} (alliances / battles / players placeholders). */ .xw-top { max-width: var(--xh-max-w); margin: 56px auto; padding: 0 var(--xh-container-pad); } .xw-top-wrap { background: rgba(12, 19, 34, .55); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); padding: 28px 32px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .xw-top-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .xw-top-title { font-family: var(--xh-font-display); font-size: clamp(20px, 2.4vw, 26px); margin: 0; color: var(--xh-text); } .xw-top-update { font-size: 12px; color: var(--xh-text-muted); font-family: var(--xh-font-mono, monospace); } .xw-top-note { margin: 16px 0 0; font-size: 11px; color: var(--xh-text-secondary); font-style: italic; } /* a11y: убран opacity:.6 (контраст), цвет → secondary (6.16:1) */ /* Top-table — table-like rows для alliances + battles head. */ .xw-top-table { display: flex; flex-direction: column; gap: 4px; } .xw-top-row { display: grid; grid-template-columns: 50px 1fr 80px 130px 70px; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: var(--xh-radius); align-items: center; font-size: 14px; } .xw-top-row--head { background: transparent; border: 0; padding: 6px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--xh-text-muted); } .xw-top-cell { color: var(--xh-text); } .xw-top-cell--rank { font-family: var(--xh-font-mono, monospace); font-weight: 700; } .xw-top-rank--gold { color: var(--xh-gold); } .xw-top-rank--silver { color: #c0c8d4; } .xw-top-rank--bronze { color: #cd7f32; } .xw-top-cell--name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; } .xw-top-tag { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-orange); font-size: 13px; } .xw-top-fullname { color: var(--xh-text); font-weight: 600; } .xw-top-cell--members, .xw-top-cell--points { font-family: var(--xh-font-mono, monospace); text-align: right; } .xw-top-cell--change { text-align: right; font-family: var(--xh-font-mono, monospace); font-size: 12px; font-weight: 600; } .xw-top-change--up { color: var(--xh-green); } .xw-top-change--down { color: var(--xh-red); } /* Battles — card-style вместо table */ .xw-top-battles { display: flex; flex-direction: column; gap: 10px; } .xw-top-battle { padding: 14px 16px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-left: 3px solid var(--xh-border-light); border-radius: var(--xh-radius); transition: border-color .2s, background .2s; } .xw-top-battle:hover { background: rgba(255,255,255,.04); } .xw-top-battle[data-xh-result="victory"] { border-left-color: var(--xh-green); } .xw-top-battle[data-xh-result="defeat"] { border-left-color: var(--xh-red); } .xw-top-battle[data-xh-result="draw"] { border-left-color: var(--xh-gold); } .xw-top-battle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .xw-top-battle-tags { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-text); } .xw-top-vs { color: var(--xh-text-muted); font-weight: 400; margin: 0 2px; } .xw-top-battle-result { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; } .xw-top-battle-result--victory { background: rgba(32,168,104,.18); color: #5fc88a; } .xw-top-battle-result--defeat { background: rgba(208,80,32,.18); color: #e88555; } .xw-top-battle-result--draw { background: rgba(255,204,0,.18); color: var(--xh-gold); } .xw-top-battle-stats { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--xh-text-muted); } .xw-top-battle-stats strong { color: var(--xh-text); font-weight: 600; font-family: var(--xh-font-mono, monospace); } /* Players */ .xw-top-players { display: flex; flex-direction: column; gap: 6px; } .xw-top-player { display: grid; grid-template-columns: 50px 1fr 80px 110px; gap: 12px; padding: 10px 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: var(--xh-radius); align-items: center; font-size: 14px; } .xw-top-player[data-xh-rank="1"] { background: linear-gradient(90deg, rgba(255,204,0,.10), rgba(255,204,0,0)); border-color: rgba(255,204,0,.3); } .xw-top-player[data-xh-rank="2"] { background: linear-gradient(90deg, rgba(192,200,212,.08), transparent); } .xw-top-player[data-xh-rank="3"] { background: linear-gradient(90deg, rgba(205,127,50,.08), transparent); } .xw-top-player-rank { font-family: var(--xh-font-mono, monospace); font-weight: 700; color: var(--xh-text-muted); } .xw-top-player-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; } .xw-top-player-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: 4px; } .xw-top-player-status--online { background: var(--xh-green); box-shadow: 0 0 0 2px rgba(32,168,104,.25); } .xw-top-player-status--offline { background: #5a6378; } .xw-top-player-guild { font-family: var(--xh-font-mono, monospace); color: var(--xh-orange); font-weight: 600; font-size: 13px; } .xw-top-player-points { font-family: var(--xh-font-mono, monospace); text-align: right; } /* Mobile responsive */ @media (max-width: 720px) { .xw-top { padding: 0 16px; } .xw-top-wrap { padding: 20px 16px; } .xw-top-row, .xw-top-player { grid-template-columns: 40px 1fr 70px; font-size: 13px; padding: 10px 12px; } .xw-top-row .xw-top-cell--members, .xw-top-row .xw-top-cell--change, .xw-top-row--head .xw-top-cell--members, .xw-top-row--head .xw-top-cell--change { display: none; } .xw-top-battle-stats { gap: 10px; font-size: 12px; } } /* Wave J Phase H 2026-05-20 — factions блок (owner request — 3 фракции в galaxy section). */ .xh-galaxy-factions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; padding: 14px 16px; background: rgba(8, 14, 28, .55); border: 1px solid rgba(74, 157, 245, .15); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .xh-galaxy-factions-title { font-family: var(--xh-font-heading); font-size: 11px; font-weight: 700; color: var(--xh-text-secondary); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 4px; } .xh-galaxy-faction { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-left: 3px solid var(--xh-blue); background: rgba(14, 24, 44, .4); border-radius: 0 6px 6px 0; transition: background .2s, border-color .2s; } .xh-galaxy-faction:hover { background: rgba(18, 32, 60, .6); } .xh-galaxy-faction--grabtor { border-left-color: var(--xh-woa-red, var(--xh-red)); } .xh-galaxy-faction--senteri { border-left-color: var(--xh-teal, var(--xh-teal)); } .xh-galaxy-faction--talkor { border-left-color: var(--xh-purple, var(--xh-purple)); } .xh-galaxy-faction-name { font-family: var(--xh-font-heading); font-size: 14px; font-weight: 700; color: var(--xh-text); } .xh-galaxy-faction-tag { font-size: 12px; color: var(--xh-text-muted); text-align: right; } @media (max-width: 480px) { .xh-galaxy-faction { flex-direction: column; align-items: flex-start; gap: 2px; } .xh-galaxy-faction-tag { text-align: left; } } /* Wave J Phase H+ 2026-05-21 — PageSpeed win: content-visibility: auto на below-fold секциях. Браузер пропускает rendering до scroll, экономит initial paint ~150-400ms. contain-intrinsic-size — placeholder height чтобы scrollbar не дёргался. */ .xh-galaxy, .xh-universes, .xh-kb-strip, .xh-forum-updates, .xh-features-grid, .xh-section-cta, .xh-community-block { content-visibility: auto; contain-intrinsic-size: 1px 800px; } /* Wave J Phase H+ 2026-05-21: universe-actions — vertical stack ВСЕГДА. 3-column grid делает карточки слишком узкими для side-by-side кнопок (обрезались на PC). Primary остаётся главным CTA, «Подробнее» — ghost-link под ним. */ .xh-universe-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } .xh-universe-actions .xh-btn { width: 100%; box-sizing: border-box; justify-content: center; } .xh-universe-actions .xh-btn--outline { /* Ghost-link стиль — лёгкая компактная кнопка. */ padding: 8px 12px; font-size: 13px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); } .xh-universe-actions .xh-btn--outline:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.30); color: var(--xh-white); } /* #29 (2026-06-13, owner): фоны плиток WoA↔Classic поменяны местами — у WoA голубой фон. */ .xh-universe-card--woa .xh-universe-card-bg { background-image: url('/media/v2/img/universe-classic-v2.webp'); background-position: center 30%; } .xh-universe-card--classic .xh-universe-card-bg { background-image: url('/media/v2/img/hero-woa-battle.webp'); background-position: center 30%; } .xh-universe-card--reborn .xh-universe-card-bg { background-image: url('/media/v2/img/universe-reborn-v2.webp'); background-position: center 30%; } /* ADVANTAGES */ .xh-advantages { position: relative; z-index: 1; padding: 56px 0; border-top: 1px solid var(--xh-border); } .xh-advantages-title { text-align: center; font-size: 22px; text-transform: uppercase; letter-spacing: 2px; color: var(--xh-white); margin-bottom: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; } .xh-advantages-title::before, .xh-advantages-title::after { content: ''; flex: 1; max-width: 100px; height: 1px; background: var(--xh-border-light); } .xh-advantages-grid { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .xh-advantage { text-align: center; padding: 0 8px; } .xh-advantage-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.03); border: 1px solid var(--xh-border); transition: transform var(--xh-transition), box-shadow var(--xh-transition), border-color var(--xh-transition); } .xh-advantage:hover .xh-advantage-icon { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.35); } .xh-advantage-icon svg { width: 28px; height: 28px; stroke-width: 1.5; } /* Цветовые модификаторы — через CSS-custom-properties (DRY: один паттерн вместо 10 nth-child rule'ов). Modifier-классы переопределяют --xh-adv-color (hex) и --xh-adv-rgb (для rgba/alpha overlays). */ .xh-advantage--blue { --xh-adv-color: #4a9df5; --xh-adv-rgb: 74,157,245; } .xh-advantage--orange { --xh-adv-color: var(--xh-orange); --xh-adv-rgb: 232,132,30; } .xh-advantage--gold { --xh-adv-color: #f5c542; --xh-adv-rgb: 245,197,66; } .xh-advantage--teal { --xh-adv-color: #20b0b8; --xh-adv-rgb: 32,176,184; } .xh-advantage--green { --xh-adv-color: #20a868; --xh-adv-rgb: 32,168,104; } .xh-advantage .xh-advantage-icon { color: var(--xh-adv-color, var(--xh-text)); background: rgba(var(--xh-adv-rgb, 255,255,255), .10); border-color: rgba(var(--xh-adv-rgb, 255,255,255), .30); } .xh-advantage:hover .xh-advantage-icon { border-color: rgba(var(--xh-adv-rgb, 255,255,255), .55); box-shadow: 0 12px 32px rgba(var(--xh-adv-rgb, 0,0,0), .20); } .xh-advantage h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; color: var(--xh-white); } .xh-advantage p { margin: 0; font-size: 13px; color: var(--xh-text-muted); line-height: 1.5; text-wrap: pretty; } /* COMMUNITY */ .xh-community { position: relative; z-index: 1; padding: 64px 0; } .xh-community-header { text-align: center; margin-bottom: 36px; } .xh-community-header h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 2px; color: var(--xh-white); display: flex; align-items: center; justify-content: center; gap: 16px; } .xh-community-header h2::before, .xh-community-header h2::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--xh-border-light); } .xh-community-cards { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .xh-comm-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--xh-radius-lg); background: var(--xh-bg-card); border: 1px solid var(--xh-border); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); position: relative; overflow: hidden; } .xh-comm-card::before { content: ''; position: absolute; inset: 0; background: var(--xh-cc, transparent); opacity: 0; transition: opacity var(--xh-transition); pointer-events: none; } .xh-comm-card > * { position: relative; z-index: 1; } .xh-comm-card:hover { transform: translateY(-3px); border-color: var(--xh-cc, var(--xh-border-light)); box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 32px var(--xh-cc-glow, transparent); } .xh-comm-card:hover::before { opacity: .10; } .xh-comm-card-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--xh-cc-bg, rgba(255,255,255,.04)); border: 1px solid var(--xh-cc-border, var(--xh-border)); color: var(--xh-cc, var(--xh-text)); } .xh-comm-card-icon svg { width: 22px; height: 22px; } .xh-comm-card-body { min-width: 0; } .xh-comm-card-title { font-family: var(--xh-font-heading); font-size: 15px; font-weight: 700; color: var(--xh-text); line-height: 1.2; margin-bottom: 3px; letter-spacing: .3px; } .xh-comm-card-sub { font-size: 12px; color: var(--xh-text-muted); letter-spacing: .2px; } .xh-comm-card--forum { --xh-cc: #20b0b8; --xh-cc-bg: rgba(32,176,184,.10); --xh-cc-border: rgba(32,176,184,.30); --xh-cc-glow: rgba(32,176,184,.18); } .xh-comm-card--discord { --xh-cc: #5865F2; --xh-cc-bg: rgba(88,101,242,.12); --xh-cc-border: rgba(88,101,242,.30); --xh-cc-glow: rgba(88,101,242,.22); } .xh-comm-card--telegram { --xh-cc: #29B6F6; --xh-cc-bg: rgba(41,182,246,.12); --xh-cc-border: rgba(41,182,246,.30); --xh-cc-glow: rgba(41,182,246,.20); } .xh-comm-card--vk { --xh-cc: #4680C2; --xh-cc-bg: rgba(70,128,194,.12); --xh-cc-border: rgba(70,128,194,.30); --xh-cc-glow: rgba(70,128,194,.20); } .xh-comm-card--facebook { --xh-cc: #1877F2; --xh-cc-bg: rgba(24,119,242,.12); --xh-cc-border: rgba(24,119,242,.30); --xh-cc-glow: rgba(24,119,242,.20); } .xh-comm-card--instagram { --xh-cc: #E1306C; --xh-cc-bg: rgba(225,48,108,.12); --xh-cc-border: rgba(225,48,108,.30); --xh-cc-glow: rgba(225,48,108,.20); } .xh-comm-card--youtube { --xh-cc: #FF3D3D; --xh-cc-bg: rgba(255,61,61,.12); --xh-cc-border: rgba(255,61,61,.30); --xh-cc-glow: rgba(255,61,61,.20); } /* CTA */ .xh-cta { position: relative; z-index: 1; padding: 56px 0 72px; } .xh-cta-wrap { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); } .xh-cta-inner { padding: 56px 48px; border: 1px solid var(--xh-border-light); border-radius: var(--xh-radius-lg); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .xh-cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('/media/v2/img/cta-bg.webp') center center / cover no-repeat; } .xh-cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,22,.94) 0%, rgba(8,12,22,.7) 50%, rgba(8,12,22,.55) 100%); } @media (max-width: 860px) { /* На мобильном картинка корабля упирается в borders карточки. Решение: размещаем background-position так чтобы корабль был в центре, + размер уменьшен. Overlay делает плавный fade к solid bg ко ВСЕМ краям. */ .xh-cta-bg { background-image: url('/media/v2/img/cta-bg.webp'); background-position: 35% center; background-size: 200% auto; background-repeat: no-repeat; } .xh-cta-bg::after { background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(8,12,22,.30) 50%, rgba(8,12,22,.80) 85%, rgba(8,12,22,1) 100%); } } .xh-cta-content { position: relative; z-index: 1; flex: 1; min-width: 280px; max-width: 560px; } .xh-cta-title { font-size: 34px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; color: var(--xh-white); line-height: 1.05; } .xh-cta-desc { margin: 0 0 22px; font-size: 16px; color: var(--xh-text-secondary); line-height: 1.55; } .xh-cta-badges { display: flex; gap: 24px; flex-wrap: wrap; } .xh-cta-badges span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--xh-text); font-family: var(--xh-font-heading); font-weight: 600; } .xh-cta-badges svg { width: 18px; height: 18px; color: var(--xh-text-secondary); flex-shrink: 0; } .xh-cta-action { position: relative; z-index: 1; }.xh-footer-inner { max-width: var(--xh-max-w); margin: 0 auto; padding: 0 var(--xh-container-pad); padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); } /* Footer grid: brand + 5 нав-колонок (Игра / База знаний / Сообщество / Популярное / Документы). Sprint 1 Phase B: расширили под архитектуру 2026-05-16. */ .xh-footer-grid { display: grid; gap: 28px 32px; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr 1fr; align-items: start; }/* specificity boost — побивает `.xh-footer-col a { display: block; padding: 3px 0; }` */ .xh-footer-col a.xh-footer-social, .xh-footer-social { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--xh-bg-card); border: 1px solid var(--xh-border); display: inline-flex; align-items: center; justify-content: center; color: var(--xh-text-muted); transition: color var(--xh-transition), background var(--xh-transition), border-color var(--xh-transition), box-shadow var(--xh-transition), transform var(--xh-transition); flex-shrink: 0; }.xh-footer-col h4, .xh-footer-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--xh-text-muted); margin-bottom: 14px; }/* Inline legal links — rules · agreement · privacy на одной строке */ .xh-footer-col li a + a { display: inline; padding: 0; }/* SCROLL REVEAL — JS adds .xh-reveal-init so sections stay visible without JS */ .xh-reveal.xh-reveal-init { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .xh-reveal.is-visible { opacity: 1; transform: translateY(0); } /* RESPONSIVE */ @media (max-width: 1280px) { .xh-hero-bg { background-position: 70% center; } } @media (max-width: 1024px) { .xh-community-cards { grid-template-columns: repeat(3, 1fr); } .xh-community-cards a:nth-child(4), .xh-community-cards a:nth-child(5) { grid-column: span 1; } .xh-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; } .xh-stat + .xh-stat:nth-child(odd) { border-left: 0; padding-left: 0; } .xh-nav { display: none; } .xh-burger { display: flex; } /* Login/CTA скрыты на mobile (доступны в burger menu). Lang остаётся видимым — owner просил видеть выбор языка прямо в шапке. */ .xh-login-link { display: none; } .xh-btn--header { display: none; } .xh-header-right { gap: 8px; } /* Mobile lang — compact: только globe + 2-letter code, без full label */ .xh-lang-wrap .xh-lang { padding: 6px 8px; font-size: 12px; } .xh-lang-wrap .xh-lang-icon { width: 14px; height: 14px; } .xh-hero { min-height: 480px; padding: 60px 0 40px; } .xh-galaxy-content { flex: 0 0 280px; } .xh-universe-card { padding: 22px 18px; } .xh-universe-name { font-size: 18px; } .xh-advantages-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablet & below — обновляем единственный token, все контейнеры подхватывают */ @media (max-width: 768px) { .xh-page { --xh-container-pad: 20px; } .xh-mobile-menu { padding-left: var(--xh-container-pad); padding-right: var(--xh-container-pad); } .xh-header-inner { gap: 12px; } .xh-logo-x, .xh-logo-text { font-size: 20px; letter-spacing: 1.5px; } .xh-hero { min-height: auto; padding: 56px 0 40px; } /* .xh-hero-inner подхватывает container-pad через base CSS */ .xh-hero-content { max-width: 100%; } .xh-hero-title { font-size: clamp(36px, 11vw, 56px); letter-spacing: .5px; word-break: break-word; } .xh-hero-subtitle { font-size: 17px; } .xh-hero-desc { font-size: 15px; max-width: 100%; margin-bottom: 24px; } .xh-hero-actions { gap: 12px; margin-bottom: 24px; } .xh-galaxy { padding: 56px 0 48px; } .xh-galaxy-inner { flex-direction: column; gap: 28px; } .xh-galaxy-content { flex: none; max-width: 100%; } .xh-galaxy-title { font-size: 24px; letter-spacing: 1.5px; } .xh-galaxy-desc { font-size: 14px; } .xh-galaxy-actions { gap: 12px; margin-bottom: 24px; } .xh-universes { padding: 48px 0; } .xh-universes-title { font-size: 22px; letter-spacing: 1.5px; } .xh-universes-title::before, .xh-universes-title::after { max-width: 40px; } .xh-universes-sub { font-size: 14px; padding: 0 8px; text-wrap: pretty; } .xh-universe-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 16px; } .xh-universe-card { padding: 24px 20px; } .xh-universe-name { font-size: 20px; } .xh-stats-inner { gap: 12px 20px; justify-content: space-between; } .xh-stat { min-width: 0; flex: 1 1 calc(50% - 10px); justify-content: center; } .xh-stat-number { font-size: 22px; } .xh-stat-label { font-size: 11px; } .xh-advantages { padding: 48px 0; } .xh-advantages-title { font-size: 18px; letter-spacing: 1.5px; margin-bottom: 32px; } .xh-advantages-title::before, .xh-advantages-title::after { max-width: 30px; } .xh-advantages-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; } .xh-advantage { padding: 22px 20px; background: rgba(255,255,255,.025); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); } .xh-advantage h3 { font-size: 14px; text-wrap: balance; } .xh-advantage p { font-size: 13px; color: var(--xh-text-secondary); text-wrap: pretty; } .xh-community { padding: 48px 0; } .xh-community-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .xh-community-header h2 { font-size: 20px; letter-spacing: 1.5px; } .xh-community-header h2::before, .xh-community-header h2::after { max-width: 40px; } .xh-comm-card { padding: 14px 16px; gap: 12px; } .xh-comm-card-icon { width: 40px; height: 40px; } .xh-comm-card-icon svg { width: 20px; height: 20px; } .xh-comm-card-title { font-size: 14px; } .xh-comm-card-sub { font-size: 11px; } .xh-stats-inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; } .xh-stat + .xh-stat { border-left: 0; padding-left: 0; } .xh-stat:nth-child(3), .xh-stat:nth-child(4) { border-top: 1px solid var(--xh-border); padding-top: 16px; } .xh-galaxy-card { padding: 28px 20px; } .xh-cta-inner { padding: 32px 24px; flex-direction: column; align-items: stretch; gap: 24px; } .xh-cta-content { max-width: 100%; } .xh-cta-title { font-size: 24px; letter-spacing: 1px; } .xh-cta-badges { gap: 14px 18px; justify-content: center; } .xh-cta-badges span { font-size: 13px; } /* Кнопка симметрично растягивается на полную доступную ширину карточки. */ .xh-cta-action { width: 100%; display: block; } .xh-cta-action .xh-btn { width: 100%; justify-content: center; box-sizing: border-box; } .xh-footer { padding: 40px 0 24px; } .xh-footer-brand { flex: none; } /* Mobile footer-grid: Brand full-width, потом 2-col grid для 5 нав-колонок, последняя (Документы) — full-width. Sprint 1 Phase B rebuild. */ .xh-footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "game knowledge" "community popular" "docs docs"; gap: 32px 20px; } .xh-footer-brand { grid-area: brand; } .xh-footer-grid > .xh-footer-col:nth-of-type(2) { grid-area: game; } .xh-footer-grid > .xh-footer-col:nth-of-type(3) { grid-area: knowledge; } .xh-footer-grid > .xh-footer-col:nth-of-type(4) { grid-area: community; } .xh-footer-grid > .xh-footer-col:nth-of-type(5) { grid-area: popular; } .xh-footer-grid > .xh-footer-col:nth-of-type(6) { grid-area: docs; padding-top: 20px; border-top: 1px solid var(--xh-border); } .xh-footer-grid > .xh-footer-col:nth-of-type(6) ul { display: flex; flex-wrap: wrap; gap: 12px 24px; } .xh-footer-grid > .xh-footer-col:nth-of-type(6) ul li { margin: 0; } .xh-footer-grid > .xh-footer-col:nth-of-type(6) a { padding: 2px 0; } .xh-footer-col h4, .xh-footer-h { font-size: 11px; margin-bottom: 10px; } .xh-footer-col a { font-size: 13px; padding: 4px 0; } } /* Phone */ @media (max-width: 480px) { .xh-page { --xh-container-pad: 16px; } .xh-hero { padding: 40px 0 32px; } .xh-hero-title { font-size: clamp(32px, 10vw, 44px); } .xh-hero-subtitle { font-size: 16px; margin-bottom: 10px; } .xh-hero-actions { flex-wrap: wrap; } .xh-hero-actions .xh-btn { justify-content: center; width: 100%; } .xh-hero-apps { gap: 8px; } .xh-hero-apps-label { width: 100%; margin-bottom: 4px; } .xh-store-badge { flex: 1; justify-content: center; min-width: 130px; } .xh-stats-inner { gap: 14px 12px; } .xh-stat { gap: 10px; } .xh-stat-icon { width: 32px; height: 32px; } .xh-stat-icon svg { width: 18px; height: 18px; } .xh-stat-number { font-size: 20px; } .xh-galaxy-title { font-size: 22px; } .xh-galaxy-actions .xh-btn { width: 100%; justify-content: center; } .xh-galaxy-content > .xh-btn { width: 100%; justify-content: center; } .xh-universes-title { font-size: 20px; } .xh-universes-title::before, .xh-universes-title::after { display: none; } .xh-universe-card { padding: 22px 18px; } .xh-advantage-icon { width: 40px; height: 40px; margin-bottom: 10px; } .xh-advantage-icon svg { width: 26px; height: 26px; } .xh-cta-title { font-size: 20px; } } /* Small phone */ @media (max-width: 380px) { .xh-logo-x, .xh-logo-text { font-size: 18px; } .xh-hero-title { font-size: 30px; line-height: 1.05; } .xh-hero-subtitle { font-size: 15px; } .xh-hero-desc { font-size: 14px; } .xh-stats-inner { grid-template-columns: 1fr 1fr; } .xh-cta-inner { padding: 24px 18px; } .xh-cta-title { font-size: 19px; letter-spacing: .5px; } } @media (prefers-reduced-motion: reduce) { .xh-page, .xh-page *, .xh-page *::before, .xh-page *::after, main, main *, main *::before, main *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; } .xh-reveal { opacity: 1; transform: none; } #xh-stars-canvas { display: none; } /* a11y MAJOR-15 (Wave B): keyframe-анимации с глобальным `infinite` могут stutter даже с 0.01ms duration. Полностью отключаем. */ .xh-trust-dot, .xh-live-dot { animation: none !important; box-shadow: 0 0 0 0 rgba(32,168,104,.6) !important; } } /* WCAG 2.4.7 — universal focus indicator (covers links/buttons/inputs/selects/textareas + modal). Wave B MAJOR-9: убран prefix .xh-page — был scope-bug на pages без .xh-page wrapper (universes/, knowledge/, mobile, _detail.php). `:where()` держит specificity = 0, чтобы более точечные правила могли override. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--xh-orange); outline-offset: 2px; border-radius: 4px; } #modal-mask a:focus-visible, #modal-mask button:focus-visible, #modal-mask input:focus-visible, #modal-mask select:focus-visible, #modal-mask textarea:focus-visible { outline: 2px solid var(--xh-orange); outline-offset: 2px; border-radius: 4px; } #modal-mask .input-text:focus-visible, #modal-mask .select:focus-visible { outline-offset: 0; border-color: var(--xh-orange); } /* WCAG 2.4.1 — skip link */ .xh-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .xh-skip-link:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; z-index: 10000; padding: 12px 18px; background: var(--xh-orange); color: var(--xh-orange-text); font-weight: 700; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.5); } /* Hide hero from reveal-animation (always visible — above the fold) */ .xh-hero.xh-reveal { opacity: 1; transform: none; } /* Animated live dot in galaxy section (was missing animation) */ .xh-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xh-green); flex-shrink: 0; animation: xh-pulse 2s infinite; } /* Mobile community: 5th card spans full width */ @media (max-width: 768px) { .xh-community-cards > *:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Print stylesheet — минимальный набор для читаемой печати (legal-страницы, FAQ) */ @media print { .xh-page { background: var(--xh-white) !important; color: var(--xh-black) !important; } .xh-page * { background-image: none !important; box-shadow: none !important; text-shadow: none !important; } #xh-stars-canvas, .xh-header, .xh-mobile-menu, .xh-cta, .xh-footer-socials, #modal-mask { display: none !important; } .xh-page a { color: #0044cc !important; text-decoration: underline !important; } .xh-page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; } .xh-page h1, .xh-page h2, .xh-page h3 { color: var(--xh-black) !important; page-break-after: avoid; } .xh-page p, .xh-page li { page-break-inside: avoid; } .xh-hero, .xh-galaxy, .xh-universes, .xh-stats, .xh-advantages, .xh-community { padding: 12px 0 !important; } } /* Windows High Contrast Mode (forced-colors). Делает text-decoration + outline видимыми. */ @media (forced-colors: active) { .xh-btn--primary, .xh-btn--header { border: 2px solid CanvasText; } .xh-page a:focus-visible, .xh-page button:focus-visible, .xh-page input:focus-visible, .xh-page [tabindex]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } .xh-trust-pill, .xh-universe-card, .xh-advantage, .xh-comm-card, .xh-faq-item, .xh-compare-table { border: 1px solid CanvasText; } } /* ============================================ WAVE B SECTIONS — About / FAQ / Compare ============================================ */ /* ABOUT */ .xh-about { padding: 72px 32px 24px; } .xh-about-inner { max-width: var(--xh-max-w); margin: 0 auto; } .xh-about-title { font-family: var(--xh-font-display); font-size: clamp(28px, 3.2vw, 38px); color: var(--xh-white); margin: 0 0 28px; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .xh-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } .xh-about-col p { color: var(--xh-text); line-height: 1.65; margin: 0 0 14px; font-size: 16px; } .xh-about-lead { font-size: 17px; } .xh-about-col p strong { color: var(--xh-text); font-weight: 700; } .xh-about-facts { margin: 0; padding: 22px 24px; background: rgba(255,255,255,.03); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); } .xh-about-facts dt { font-family: var(--xh-font-heading); font-size: 12px; font-weight: 700; color: var(--xh-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; } .xh-about-facts dt:first-child { margin-top: 0; } .xh-about-facts dd { margin: 4px 0 0; color: var(--xh-text); font-size: 15px; line-height: 1.45; } @media (max-width: 860px) { .xh-about-grid { grid-template-columns: 1fr; gap: 28px; } } /* COMPARE */ .xh-compare { padding: 60px 32px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.015) 100%); } .xh-compare-inner { max-width: var(--xh-max-w); margin: 0 auto; } .xh-compare-title { font-family: var(--xh-font-display); font-size: clamp(26px, 3vw, 34px); color: var(--xh-white); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .xh-compare-lead { color: var(--xh-text-secondary); text-align: center; margin: 0 auto 28px; max-width: 720px; font-size: 15px; line-height: 1.5; } .xh-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--xh-radius-lg); border: 1px solid var(--xh-border); } .xh-compare-table { width: 100%; border-collapse: collapse; min-width: 720px; background: rgba(255,255,255,.02); } .xh-compare-table th, .xh-compare-table td { padding: 14px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--xh-border); color: var(--xh-text); } .xh-compare-table thead th { background: rgba(255,255,255,.04); font-family: var(--xh-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--xh-text-muted); } .xh-compare-table tbody th { font-family: var(--xh-font-heading); font-weight: 700; color: var(--xh-text); font-size: 15px; } .xh-compare-table tbody tr:last-child td, .xh-compare-table tbody tr:last-child th { border-bottom: 0; } .xh-compare-self { background: rgba(232,132,30,.08); } .xh-compare-self th { color: var(--xh-orange); } .xh-compare-summary { margin-top: 24px; color: var(--xh-text); line-height: 1.6; font-size: 15px; } /* FAQ */ .xh-faq { padding: 60px 32px; } .xh-faq-inner { max-width: 880px; margin: 0 auto; } .xh-faq-title { font-family: var(--xh-font-display); font-size: clamp(26px, 3vw, 34px); color: var(--xh-white); margin: 0 0 26px; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .xh-faq-list { display: flex; flex-direction: column; gap: 10px; } .xh-faq-item { background: rgba(255,255,255,.025); border: 1px solid var(--xh-border); border-radius: var(--xh-radius-lg); padding: 0; transition: border-color var(--xh-transition); } .xh-faq-item[open] { border-color: var(--xh-border-light); } .xh-faq-q { font-family: var(--xh-font-heading); font-size: 17px; font-weight: 700; color: var(--xh-text); padding: 18px 22px; cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .xh-faq-q::-webkit-details-marker { display: none; } .xh-faq-q::-moz-list-bullet { display: none; } /* ЕДИНЫЙ шеврон FAQ (2026-06-10, single-source): один вид во всех FAQ-блоках портала (главная, mobile, энциклопедия-категория/карточка, база знаний). Каретка-svg 18px, поворот на раскрытии. Старый "+"::after убран, чтобы не было двойных/разных стрелок. */ .xh-faq-q::after { content: none !important; } .xh-faq-q > svg { flex: 0 0 18px; width: 18px !important; height: 18px !important; min-width: 18px; color: var(--xh-orange); opacity: .85; transition: transform var(--xh-transition); } .xh-faq-item[open] .xh-faq-q > svg { transform: rotate(180deg); } .xh-faq-q > .xh-faq-q-text { flex: 1 1 auto; } .xh-faq-q:hover { color: var(--xh-orange); } .xh-faq-a { padding: 0 22px 18px; color: var(--xh-text); line-height: 1.6; font-size: 15px; } .xh-faq-a .xh-faq-link { color: var(--xh-orange); border-bottom: 1px solid currentColor; } .xh-faq-a .xh-faq-link:hover { color: var(--xh-orange-hover); } @media (max-width: 600px) { .xh-about { padding: 48px 20px 16px; } .xh-compare, .xh-faq { padding: 44px 20px; } .xh-compare-table th, .xh-compare-table td { padding: 11px 12px; font-size: 13px; } } /* === Modal extras (a11y + close button + social buttons + inline-button-link) === */ #modal-mask .modal-close { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--xh-border); width: 32px; height: 32px; padding: 0; cursor: pointer; /* F-A11Y-111 (2026-05-21): explicit #c7d2e5 ≈4.7:1 contrast vs panel bg (was var(--xh-text-dim) ≈3.1:1) */ color: #c7d2e5; display: flex; align-items: center; justify-content: center; } #modal-mask .modal-close:hover { color: var(--xh-text); background: rgba(255,255,255,.08); } #modal-mask .modal-close::before { content: '×'; font-size: 22px; line-height: 1; } /* Inline "switch to register/login" links — button styled like text-link */ #modal-mask .modal-link { background: none; border: none; padding: 0; color: var(--xh-orange); text-decoration: underline; cursor: pointer; font: inherit; } #modal-mask .modal-link:hover { color: var(--xh-orange-hover); } /* Social login buttons (v2-friendly, since legacy sprite isn't loaded in v2) */ #modal-mask .modal-soc-btn { width: 44px; height: 44px; border-radius: 8px; padding: 0; cursor: pointer; background: rgba(255,255,255,.05) center/22px no-repeat; border: 1px solid var(--xh-border); color: transparent; /* для случая если иконка не загрузилась — текст не виден через aria-label */ transition: background-color var(--xh-transition), border-color var(--xh-transition), transform var(--xh-transition); } #modal-mask .modal-soc-btn:hover { background-color: rgba(255,255,255,.10); border-color: var(--xh-border-light); transform: translateY(-1px); } #modal-mask .modal-soc-btn--vk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234c75a3'%3E%3Cpath d='M2.5 2.5h19v19h-19z'/%3E%3Cpath fill='%23fff' d='M13.2 16.4c-4 0-6.6-2.7-6.7-7.3h2c.1 3.4 1.6 4.8 2.8 5.1V9.1h1.9v2.9c1.2-.1 2.5-1.5 3-2.9h1.9c-.4 1.8-1.7 3.1-2.7 3.7 1 .5 2.4 1.7 3 3.6h-2.1c-.5-1.4-1.6-2.5-3-2.6v2.6h-.2z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-btn--google { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbbc05' d='M3 12c0-1.6.4-3.1 1.1-4.4L8.4 11l-4.3 4.4C3.4 14.1 3 12.6 3 11z' transform='translate(0 1)'/%3E%3Cpath fill='%23ea4335' d='M12 5.7c2 0 3.4.9 4.2 1.6L19 4.5C17.4 3 14.9 2 12 2 7.7 2 4 4.5 2.2 8.1L5.5 11C6.4 8.1 9 5.7 12 5.7z'/%3E%3Cpath fill='%2334a853' d='M12 18.3c-3 0-5.6-2-6.5-4.7L2.2 16.5C4 20 7.7 22 12 22c2.8 0 5.4-1 7.2-2.8L16 16.5c-1 .8-2.5 1.8-4 1.8z'/%3E%3Cpath fill='%234285f4' d='M21.6 12.2c0-.7-.1-1.2-.2-1.8H12v3.6h5.4c-.2 1.1-.9 2.1-1.9 2.7l2.9 2.3c1.7-1.6 2.7-3.9 2.7-6.8z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-btn--odnoklassniki { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ed812b'%3E%3Cpath d='M12 6.6c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5S13.4 6.6 12 6.6m0-3.6c3.2 0 5.8 2.6 5.8 5.8s-2.6 5.8-5.8 5.8c-3.2 0-5.8-2.6-5.8-5.8S8.8 3 12 3M9.5 14.4c-1 0-2.1.3-3.1.9-.5.3-.6.9-.4 1.4.3.5.9.6 1.4.4 1.7-1 4.5-1 6.2 0 .2.1.3.1.5.1.4 0 .7-.2.9-.5.3-.5.1-1.1-.4-1.4-1-.6-2.1-.9-3.1-.9m1.3 4.7l-2.5 2.5c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3l1.3-1.3 1.3 1.3c.2.2.5.3.7.3.3 0 .5-.1.7-.3.4-.4.4-1 0-1.4l-2.5-2.5c-.1-.1-.3-.1-.4 0z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-btn--mailru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005ff9'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1.8 0 3.5-.5 5-1.4l-1.2-1.6c-1.1.7-2.4 1.1-3.8 1.1-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8c0 1.3-.3 2.1-1.2 2.1-.8 0-1.1-.6-1.1-1.5V8h-2v.9c-.5-.7-1.4-1.1-2.5-1.1-2.4 0-4 2-4 4.4s1.6 4.4 4 4.4c1.4 0 2.4-.7 2.8-1.5.4 1 1.4 1.5 2.5 1.5 2.7 0 3.4-2.4 3.4-4.6 0-5.5-4.5-10-10-10zm0 12.4c-1.3 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2 2.2 1 2.2 2.2-.9 2.2-2.2 2.2z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-btn--yandex { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M14.5 3v17.5h-2.6V13L7.5 3.5h2.7l2.7 6.8L15.8 3z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-btn--facebook { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877f2'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); } #modal-mask .modal-soc-icos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 44px; } /* Captcha image inside reg modal */ #modal-mask .img-captcha, #modal-mask .modal-captcha img { max-width: 120px; height: auto; border-radius: 6px; } #modal-mask .input-text-captcha { display: flex; align-items: center; gap: 12px; } #modal-mask .input-text-captcha .input-text { max-width: 200px; } #modal-mask .modal-captcha { display: flex; align-items: center; gap: 12px; margin: 8px 0; } #modal-mask .input-modal-checkbox { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--xh-orange); cursor: pointer; } #modal-mask .modal-label { display: inline; font-size: 13px; color: var(--xh-text-dim); cursor: pointer; line-height: 1.4; flex: 1; min-width: 0; } /* Wave J Phase H+ 2026-05-21 — Owner #2999: input + label на одной строке (раньше stacked). */ #modal-mask .modal-extra-text { display: flex !important; align-items: flex-start; gap: 10px; text-align: left !important; flex-wrap: nowrap; height: auto !important; padding: 8px 4px; font-size: 13px !important; } #modal-mask .modal-extra-text:has(.input-modal-checkbox) { /* row with checkbox */ margin: 10px 0; } /* Wave J Phase H+ 2026-05-21 — Owner #2999: galaxy