/* ============================================================ Duralvon Nexus — публичный сайт Премиальный тёмный фэнтези-стиль: чернильное небо, золото, орнаментальные рамки, мягкое свечение. ============================================================ */ :root { --ink-0: #07070f; --ink-1: #0b0c18; --ink-2: #12142a; --ink-3: #1a1d38; --parchment: #efe6d0; --parchment-dim: #cabfa4; /* Золото задано КОМПОНЕНТАМИ (--gold-rgb), а не готовым цветом: полсотни правил по сайту используют его с разной прозрачностью — rgba(var(--gold-rgb), .12). Благодаря этому «Стиль сайта» в кабинете перекрашивает акцент целиком, одной переменной на (см. assets/js/site-theme.js). */ --gold-rgb: 216, 180, 92; --gold: rgb(var(--gold-rgb)); --gold-bright: #f0d492; --gold-deep: #a07f31; --ember: #c96f3b; --arcane: #7d6cff; --arcane-soft: rgba(125, 108, 255, .22); --line: rgba(var(--gold-rgb), .22); --line-soft: rgba(var(--gold-rgb), .12); --card: rgba(18, 20, 42, .72); --card-solid: #12142a; --shadow: 0 24px 60px rgba(0, 0, 0, .55); --radius: 18px; --font-display: 'Forum', 'Georgia', serif; --font-body: 'Manrope', 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* overflow-x перенесён СЮДА с : без этого (у которого overflow-x вынуждает overflow-y:auto) становился контейнером прокрутки, а #hash-навигация и scrollIntoView целились в — отсюда «ссылки шапки ведут не туда». Теперь контейнер прокрутки однозначно . */ overflow-x: hidden; /* scroll anchoring off — иначе браузер подправляет scrollY при каждом изменении высоты .site-header (мобильная сворачиваемая шапка), это выглядит как «пользователь проскроллил» и запускает цикл схлопывание→скролл→раскрытие. */ overflow-anchor: none; } body { margin: 0; background: var(--ink-0); color: var(--parchment); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x / overflow-anchor перенесены на (см. выше) — чтобы контейнером прокрутки был , иначе якорные переходы шапки промахивались. */ overflow-anchor: none; } /* ---------- фон: звёзды и туманности ---------- */ .sky { position: fixed; inset: 0; z-index: -2; background: radial-gradient(1100px 700px at 82% -10%, rgba(125, 108, 255, .16), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(201, 111, 59, .12), transparent 55%), radial-gradient(1200px 900px at 50% 110%, rgba(var(--gold-rgb), .08), transparent 60%), linear-gradient(180deg, #0a0b16 0%, #07070f 55%, #0a0a14 100%); } .sky::before, .sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(240, 212, 146, .8), transparent 60%), radial-gradient(1px 1px at 28% 64%, rgba(239, 230, 208, .55), transparent 60%), radial-gradient(1.6px 1.6px at 44% 32%, rgba(240, 212, 146, .7), transparent 60%), radial-gradient(1px 1px at 58% 76%, rgba(239, 230, 208, .45), transparent 60%), radial-gradient(1.3px 1.3px at 70% 12%, rgba(240, 212, 146, .75), transparent 60%), radial-gradient(1px 1px at 84% 52%, rgba(239, 230, 208, .5), transparent 60%), radial-gradient(1.5px 1.5px at 93% 84%, rgba(240, 212, 146, .65), transparent 60%), radial-gradient(1px 1px at 6% 88%, rgba(239, 230, 208, .5), transparent 60%); animation: twinkle 7s ease-in-out infinite alternate; } .sky::after { transform: translate(28px, 40px) scale(1.4); opacity: .5; animation-duration: 11s; animation-delay: -3s; } @keyframes twinkle { from { opacity: .45; } to { opacity: 1; } } /* ---------- «Стиль сайта»: фон и движение ---------- Атрибуты ставит assets/js/site-theme.js на ещё до первой отрисовки. «Тихая ночь» — те же цвета без мерцания и светлячков; «Чернила» — ровный фон для тех, кому звёзды мешают читать. */ html[data-bg="calm"] .sky::before, html[data-bg="calm"] .sky::after { animation: none; opacity: .5; } html[data-bg="ink"] .sky { background: linear-gradient(180deg, #08080f 0%, #05050b 55%, #08080f 100%); } html[data-bg="ink"] .sky::before, html[data-bg="ink"] .sky::after { display: none; } html[data-bg="calm"] .firefly, html[data-bg="ink"] .firefly { display: none; } /* ---------- «Стиль сайта»: картина на самом заднем плане ---------- Отдельный слой ПОД звёздным небом (.sky, z-index -2) — картина ложится в самый низ стопки, а туманности, мерцание и светлячки продолжают жить поверх неё. Цена вопроса — главное в этом блоке. Пока картина не выбрана, здесь нет ни одного запроса: url() живёт внутри правила `html[data-scene=...]`, а невыбранное правило браузер даже не считает — атрибут ставит site-theme.js из , ещё до первой отрисовки. То есть для всех, кто картину не включал, сайт грузится ровно как раньше. Выбравшему прилетает один WebP: 34 КБ на телефоне, 110 КБ на большом экране (исходный PNG весил 2.1 МБ). Под ним лежит LQIP — размытая картинка 24px шириной, вшитая прямо в этот файл строкой в 152 байта: она показывается мгновенно, пока грузится настоящая, поэтому вместо чёрного провала сразу видны нужные цвета. Движение — только transform и opacity, то есть чистый композитор: ни одного пересчёта раскладки, ни одного слушателя прокрутки. Параллакс по скроллу здесь сознательно НЕ сделан — он требует обработчика на каждый кадр прокрутки, а это ровно та цена, которую мы только что убирали из шапки. */ :root { /* Размытая миниатюра 24×13 — заглушка на время загрузки настоящей картины. */ --scene-lqip: url("data:image/webp;base64,UklGRmgAAABXRUJQVlA4IFwAAACwAwCdASoYAA0APrVInkmnJCKhMAgA4BaJYwCdACHf29SIhvzpgAD+9F3hrQ0LEFNTkuD2PIJMsiiCLA4GFxRxV50XP77+WQ36/J99IKYyiM3KSzY1qK8C2QAAAA=="); } .sky-scene { display: none; } /* Три размера под ширину экрана: телефону незачем тянуть картинку для монитора. */ html[data-scene="nightfall"] { --scene-img: url("../img/scene/nightfall-1200.webp"); } @media (max-width: 760px) { html[data-scene="nightfall"] { --scene-img: url("../img/scene/nightfall-960.webp"); } } @media (min-width: 1401px) { html[data-scene="nightfall"] { --scene-img: url("../img/scene/nightfall-1710.webp"); } } html[data-scene="nightfall"] .sky-scene { display: block; position: fixed; inset: 0; z-index: -3; pointer-events: none; /* слой декоративный — не должен перехватывать ни тап, ни выделение текста */ background-image: var(--scene-img), var(--scene-lqip); background-size: cover, cover; /* Кадр смещён вверх от центра: на вытянутом экране телефона в срез должны попасть горы, сияние и огни города, а не тёмная земля под ногами. */ background-position: 50% 44%, 50% 44%; background-repeat: no-repeat; /* Медленный дрейф: картина «дышит» и не выглядит наклейкой. 78 секунд на проход — на глаз это не движение, а ощущение глубины. */ animation: scene-drift 78s ease-in-out infinite alternate; } /* Сияние над горами живёт своей жизнью. Слой прибит к самой картине (лежит внутри дрейфующего элемента), поэтому свечение никуда не съезжает с полярного всполоха. */ html[data-scene="nightfall"] .sky-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 34% at 72% 13%, rgba(120, 232, 205, .18), transparent 68%), radial-gradient(26% 22% at 23% 12%, rgba(198, 214, 255, .12), transparent 70%); animation: scene-aurora 15s ease-in-out infinite alternate; } @keyframes scene-drift { from { transform: scale(1.07) translate3d(-1.1%, -.7%, 0); } to { transform: scale(1.12) translate3d(1.1%, .7%, 0); } } @keyframes scene-aurora { from { opacity: .3; } to { opacity: .95; } } /* Вуаль поверх картины. Живёт на .sky (он не двигается), поэтому затемнение прибито к экрану, а не к дрейфующей картине: сверху плотнее — под шапку, снизу — под подвал, по краям виньетка. Без неё светлые места картины (луна, сияние, огни города) съедали бы текст. Правило стоит ПОСЛЕ `data-bg="ink"` намеренно: специфичность у них одинаковая, и картина должна побеждать выбранный фон, иначе «Чернила» закрасили бы её наглухо. Звёзды при этом остаются на усмотрение data-bg — «Чернила» их по-прежнему гасят, и получается чистая картина без мерцания. */ html[data-scene="nightfall"] .sky { background: radial-gradient(1100px 700px at 82% -10%, rgba(125, 108, 255, .12), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(201, 111, 59, .09), transparent 55%), radial-gradient(125% 95% at 50% 42%, transparent 38%, rgba(4, 5, 12, .6) 100%), linear-gradient(180deg, rgba(4, 5, 12, .84) 0, rgba(4, 5, 12, .46) 20%, rgba(4, 5, 12, .42) 58%, rgba(4, 5, 12, .68) 100%); } /* «Меньше движения» — картина остаётся, дыхание прекращается. */ html[data-motion="off"] .sky-scene, html[data-motion="off"] .sky-scene::after { animation: none; } @media (prefers-reduced-motion: reduce) { .sky-scene, .sky-scene::after { animation: none !important; } } /* Движение выключено — тот же набор, что и в prefers-reduced-motion, но по выбору человека, а не по настройке системы. */ html[data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; } html[data-motion="off"] .tag-marquee-track, html[data-motion="off"] .sky::before, html[data-motion="off"] .sky::after, html[data-motion="off"] .hero-scroll span, html[data-motion="off"] .scroll-cue span, html[data-motion="off"] .firefly { animation: none; } html[data-motion="off"] .firefly { display: none; } html[data-motion="off"] .card:hover { transform: none; } html[data-motion="off"] .cabinet-panel.is-active { animation: none; } /* светлячки — тот же эффект, что в Duralvon Forge (100% свой CSS/JS, без сторонних ассетов) */ .firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px 2px var(--gold-bright), 0 0 20px 5px rgba(255, 255, 255, .5); animation: dance-firefly 15s ease-in-out infinite; pointer-events: none; } @keyframes dance-firefly { 0% { transform: translate(0, 0); opacity: .2; } 25% { transform: translate(40px, -30px); opacity: 1; } 50% { transform: translate(-20px, 20px); opacity: .5; } 75% { transform: translate(30px, 50px); opacity: 1; } 100% { transform: translate(0, 0); opacity: .2; } } /* ---------- типографика ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; } h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing: .015em; } h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1em; color: var(--parchment-dim); } a { color: var(--gold-bright); text-decoration: none; } a:hover { color: #fff; } .kicker { display: inline-flex; align-items: center; gap: .7em; text-transform: uppercase; letter-spacing: .32em; font-size: .72rem; color: var(--gold); margin-bottom: 1.1rem; } .kicker::before, .kicker::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .kicker::after { background: linear-gradient(90deg, var(--gold), transparent); } .section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; } .section-head p { font-size: 1.05rem; } .gold-text { background: linear-gradient(115deg, var(--gold-bright) 20%, var(--gold) 45%, #fff2ce 60%, var(--gold-deep) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- каркас ---------- */ .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } section.block { padding: 96px 0; position: relative; } /* Якорный переход к секции (nav-ссылки шапки «Миры»/«Инструменты»/«Скачать», «Листайте вниз», авто-докрутка «Пути героя») не должен заезжать под липкую шапку. На десктопе шапка не сворачивается — берём живую --header-h (её ведёт site.js). На телефоне значение фиксировано: там шапка до автосворачивания высокая и var(--header-h) бы перелетал. `#download` — это .jr-cta ВНУТРИ блока «Путь героя» (не section.block), поэтому в списке целей отдельно. */ .block[id], #download { scroll-margin-top: calc(var(--header-h, 72px) + 16px); } @media (max-width: 640px) { .block[id], #download { scroll-margin-top: 76px; } } .divider { width: min(520px, 70%); margin: 0 auto; height: 26px; display: flex; align-items: center; justify-content: center; gap: 14px; opacity: .8; } /* display:flex выше сильнее атрибута hidden — без этой строки скрытый разделитель (кабинет прячет свой, см. account.js) продолжал бы рисоваться. */ .divider[hidden] { display: none; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); } .divider::after { background: linear-gradient(90deg, var(--line), transparent); } .divider span { color: var(--gold); font-size: 1rem; transform: rotate(45deg); line-height: 1; } /* ---------- шапка ---------- */ .site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(7, 7, 15, .92), rgba(7, 7, 15, .72)); border-bottom: 1px solid var(--line-soft); } /* Шапка — единственное место, где .wrap НЕ ограничен колонкой контента (1180px). Ссылки разложены от левого края экрана до правого: на «Читалке» книга занимает всю ширину, и центрированный островок кнопок посреди широкого экрана выглядел приклеенным к середине. Раздвигаем сами кнопки — воздух появляется МЕЖДУ ними (flex + justify-content), а не между буквами: letter-spacing и text-align:justify здесь не используются намеренно, иначе слова бы «расползлись». */ .site-header .wrap { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 28px); min-height: 68px; width: 100%; max-width: none; padding: 0 24px; justify-content: space-between; } .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; color: var(--parchment); white-space: nowrap; } /* Словесный логотип в ШАПКЕ — «Duralvon Nexus» набором, с золотым металлическим отливом (та же гамма, что у .gold-text в герое). Подвал не трогаем. */ .site-header .brand { flex: none; gap: 0; font-weight: 400; font-size: clamp(1.32rem, 1.7vw, 1.72rem); letter-spacing: .07em; line-height: 1; background: linear-gradient(96deg, var(--gold-deep) 0%, var(--gold-bright) 32%, #fff5da 50%, var(--gold-bright) 68%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: filter .2s ease; } .site-header .brand:hover { filter: brightness(1.12) drop-shadow(0 0 10px rgba(var(--gold-rgb), .3)); } .brand-sigil { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-size: .8rem; color: var(--gold-bright); background: radial-gradient(circle at 30% 25%, rgba(240, 212, 146, .35), transparent 55%), var(--ink-2); box-shadow: 0 0 18px rgba(var(--gold-rgb), .35), inset 0 0 10px rgba(var(--gold-rgb), .15); overflow: hidden; flex: none; } .brand-sigil img { width: 100%; height: 100%; object-fit: cover; } /* flex: 1 — навигация забирает всю середину строки и равномерно распределяет ссылки внутри себя (space-evenly). Логотип остаётся у левого края, «Сообщество» и «Аккаунт» — у правого. */ .site-nav { display: flex; gap: 4px; margin-left: 0; flex: 1 1 auto; justify-content: space-evenly; align-items: center; flex-wrap: wrap; order: 1; } .header-quicklinks { display: flex; align-items: center; gap: 4px; order: 2; flex: none; } .brand { flex: none; } .site-nav a, .header-quicklinks a { padding: 9px 14px; border-radius: 10px; color: var(--parchment-dim); font-size: .92rem; letter-spacing: .02em; transition: color .2s, background .2s; } .site-nav a:hover, .header-quicklinks a:hover { color: var(--parchment); background: rgba(var(--gold-rgb), .08); } .site-nav a.active, .header-quicklinks a.active { color: var(--gold-bright); background: rgba(var(--gold-rgb), .1); } .site-nav a.nav-account, .header-quicklinks a.nav-account { border: 1px solid var(--line); color: var(--gold-bright); margin-left: 10px; } .site-nav a.nav-account:hover, .header-quicklinks a.nav-account:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); } /* ---------- колокольчик уведомлений ---------- Живёт в .header-quicklinks, то есть остаётся на виду даже со свёрнутой мобильной шапкой: уведомление, которое видно только после раскрытия меню, бессмысленно. Показывается лишь при живой сессии — см. assets/js/site-notify.js. */ .header-bell { position: relative; display: flex; align-items: center; } .header-bell[hidden] { display: none; } .header-bell-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--parchment-dim); cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .header-bell-btn svg { width: 20px; height: 20px; } .header-bell-btn:hover { color: var(--parchment); background: rgba(var(--gold-rgb), .08); } .header-bell-btn.has-unread { color: var(--gold-bright); border-color: var(--gold); background: rgba(var(--gold-rgb), .1); } .header-bell-count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, #e8c979, var(--gold) 55%, var(--gold-deep)); color: #241a06; font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 12px rgba(var(--gold-rgb), .55); } .header-bell-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); z-index: 70; border-radius: 16px; border: 1px solid var(--line); background: var(--card-solid); box-shadow: var(--shadow); overflow: hidden; } .header-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: .9rem; } .header-bell-head button { border: none; background: none; color: var(--gold-bright); font-family: var(--font-body); font-size: .8rem; cursor: pointer; } .header-bell-list { max-height: min(420px, 60vh); overflow-y: auto; } .header-bell-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--parchment-dim); font-size: .85rem; line-height: 1.4; /* В уведомлении легко оказывается длинная неразрывная строка — почта отправителя, название мира, код промокода. Без принудительного переноса она распирает панель изнутри, и на узком экране страница снова уезжает вбок. */ overflow-wrap: anywhere; } .header-bell-item:hover { background: rgba(var(--gold-rgb), .06); } .header-bell-item b { color: var(--parchment); font-weight: 600; } /* Действие по уведомлению отдельной кнопкой: «начислили промокод» должно вести кнопкой «Открыть промокоды», а не безымянной стрелкой в никуда. */ .header-bell-action { align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--gold-rgb), .08); color: var(--gold-bright); font-family: var(--font-body); font-size: .78rem; cursor: pointer; transition: background .2s, border-color .2s; } .header-bell-action:hover { background: rgba(var(--gold-rgb), .16); border-color: var(--gold); } /* Непрочитанное отмечено полосой слева, а не цветом текста: цветной текст в списке из пяти строк читается как «всё важное», то есть как ничего. */ .header-bell-item.is-new { border-left: 2px solid var(--gold); background: rgba(var(--gold-rgb), .05); } .header-bell-item.is-new b { color: var(--gold-bright); } .header-bell-item time { font-size: .72rem; color: rgba(202, 191, 164, .55); } .header-bell-empty { margin: 0; padding: 18px 14px; font-size: .82rem; color: rgba(202, 191, 164, .6); } .header-bell-more { display: block; padding: 11px 14px; text-align: center; font-size: .84rem; } /* «Сообщество»/«Аккаунт» живут в .header-quicklinks, вне .site-nav-collapsible — остаются видимыми на строке с логотипом «Duralvon Nexus», даже когда остальная навигация свёрнута (сам логотип уже ведёт на Главную, отдельная ссылка не нужна). На ПК .header-quicklinks/.site-nav лишь переставлены через `order`, чтобы Сообщество/Аккаунт по-прежнему были у правого края (см. `order` на .site-nav/.header-quicklinks выше — на мобильном оба сброшены в 0). */ .site-nav-collapsible, .site-nav-collapsible-inner { display: contents; } /* ---------- мобильная сворачиваемая шапка ---------- По умолчанию раскрыта; при прокрутке вниз .site-nav-collapsible схлопывается (см. site.js). .header-quicklinks — вне схлопывающегося блока, видна всегда, на одной строке с логотипом. Обратно шапка раскрывается ТОЛЬКО кнопкой header-pin-toggle: сама по себе, от прокрутки вверх или от возврата к началу страницы, она больше не разворачивается. Как анимировано и почему именно так. Высота (grid-template-rows 1fr↔0fr) меняется ОДНИМ шагом, без промежуточных кадров, а «оживляют» переход только transform и opacity внутреннего блока — единственные два свойства, которые браузер крутит на композиторе, не пересобирая раскладку. Раньше высота анимировалась полсекунды, и каждый её кадр был полным layout всей страницы: шапка `sticky`, то есть её высота двигает весь документ под ней. Отсюда и «ряд мелких рывков», и ощущение, что интерфейс уезжает. Теперь на переключение приходится ровно одна перекладка вместо трёх десятков: при раскрытии высота появляется сразу, а ссылки въезжают; при сворачивании ссылки сначала уходят, и лишь потом (задержка в transition) исчезает высота — поэтому пустая полоса не «моргает» в кадре. */ .header-pin-toggle { display: none; } @media (max-width: 760px) { /* На время переключения отключаем backdrop-filter: пересчёт блюра одновременно с перекладкой страницы — вторая по весу причина подвисаний на слабых телефонах. Тёмный градиентный фон шапки достаточно непрозрачен (.72–.92 alpha), поэтому кратковременное отсутствие блюра почти незаметно. */ .site-header.is-transitioning { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-nav-collapsible { display: grid; grid-template-rows: 1fr; flex: 0 0 100%; width: 100%; /* Раскрытие: высота отдаётся сразу, без задержки — ссылкам есть куда въезжать. */ transition: grid-template-rows 0s; } .site-nav-collapsible-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; overflow: hidden; min-height: 0; transition: transform .2s ease, opacity .18s ease; } .site-header.is-collapsed .site-nav-collapsible { grid-template-rows: 0fr; pointer-events: none; /* Сворачивание: высота убирается ПОСЛЕ того, как ссылки уехали. */ transition: grid-template-rows 0s .19s; } .site-header.is-collapsed .site-nav-collapsible-inner { transform: translateY(-7px); opacity: 0; } /* Системная настройка «меньше движения» — переключаем совсем без анимации. */ @media (prefers-reduced-motion: reduce) { .site-nav-collapsible-inner { transition: none; } .site-header.is-collapsed .site-nav-collapsible { transition: grid-template-rows 0s; } } .header-pin-toggle { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 36px; height: 22px; border: none; background: none; color: var(--gold); font-size: .85rem; line-height: 1; cursor: pointer; z-index: 61; transition: color .2s, transform .3s ease; } /* Обводка и тёмная подложка — на псевдоэлементе, а не на самой кнопке, чтобы маска (плавное растворение к верху, к точке, где кнопка «ныряет» в шапку) не задевала шеврон — тот должен оставаться чётким. */ .header-pin-toggle::before { content: ''; position: absolute; inset: 0; border-radius: 0 0 10px 10px; border: 1px solid var(--line); border-top: none; background: rgba(7, 7, 15, .92); -webkit-mask-image: linear-gradient(to top, black, transparent); mask-image: linear-gradient(to top, black, transparent); transition: border-color .2s, background .2s; } .header-pin-toggle:hover { color: var(--gold-bright); } .header-pin-toggle:hover::before { background: rgba(var(--gold-rgb), .15); } .header-pin-toggle[aria-pressed="true"] { color: var(--gold-bright); } .header-pin-toggle[aria-pressed="true"]::before { border-color: var(--gold); } .header-pin-toggle .chevron { display: inline-block; transition: transform .3s ease; } .site-header.is-collapsed .header-pin-toggle .chevron { transform: rotate(180deg); } } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 12px; border: 1px solid transparent; font-family: var(--font-body); font-size: .98rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: transform .18s, box-shadow .25s, background .25s, border-color .25s; text-align: center; } .btn:active { transform: translateY(1px); } .btn-icon { width: 34px; height: 34px; border-radius: 8px; display: block; object-fit: contain; flex: none; margin: -6px 2px -6px -6px; } .btn.primary { background: linear-gradient(135deg, #e8c979, var(--gold) 45%, var(--gold-deep)); color: #241a06; box-shadow: 0 10px 30px rgba(var(--gold-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .45); } .btn.primary:hover { box-shadow: 0 14px 40px rgba(var(--gold-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .45); transform: translateY(-2px); color:#241a06; } .btn.ghost { border-color: var(--line); color: var(--parchment); background: rgba(18, 20, 42, .5); } .btn.ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(var(--gold-rgb), .08); } .btn.small { padding: 9px 18px; font-size: .86rem; border-radius: 10px; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; } /* ---------- герой ---------- */ .hero { padding: 110px 0 90px; text-align: center; position: relative; } .hero .lead { max-width: 680px; margin: 0 auto 2.2rem; font-size: 1.14rem; } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } .hero-note { font-size: .82rem; color: rgba(202, 191, 164, .7); letter-spacing: .04em; } .hero-scroll, .scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: var(--gold); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; transition: color .2s; } .hero-scroll { margin-top: 56px; } .hero-scroll:hover, .scroll-cue:hover { color: var(--gold-bright); } .hero-scroll span, .scroll-cue span { animation: drift 2.2s ease-in-out infinite; font-size: 1.1rem; rotate: 90deg; } @keyframes drift { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(7px); opacity: 1; } } /* «Листайте вниз» в конце секции — тот же указатель, что в герое. Ставится последним ребёнком блока и центрируется; сам служит разделителем. */ .block > .scroll-cue { display: flex; width: fit-content; margin: clamp(24px, 3.6vw, 40px) auto 0; } /* бегущая строка возможностей */ .tag-marquee { margin-top: 64px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .tag-marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; } .tag-marquee:hover .tag-marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .tag-chip { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 20, 42, .6); color: var(--parchment-dim); font-size: .88rem; white-space: nowrap; } .tag-chip b { color: var(--gold-bright); font-weight: 600; } /* ---------- карточки-колонны ---------- */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; } .card { position: relative; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 30px 28px; backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, box-shadow .3s; } .card:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: var(--shadow); } .card::before { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--radius) - 8px); border: 1px solid rgba(var(--gold-rgb), .07); pointer-events: none; } .card .card-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 18px; background: linear-gradient(140deg, rgba(var(--gold-rgb), .16), rgba(125, 108, 255, .14)); border: 1px solid var(--line); box-shadow: inset 0 0 14px rgba(var(--gold-rgb), .12); } .card ul { margin: 0; padding-left: 1.1em; color: var(--parchment-dim); } .card ul li { margin-bottom: .5em; } .card ul li::marker { color: var(--gold); } .tool-card { display: flex; flex-direction: column; } .tool-card ul { flex: 1; margin-bottom: 20px; } .tool-card .btn { align-self: flex-start; } /* Картинки и видео в карточке инструмента — их добавляет администратор в админ-панель. Высота фиксирована: карточки стоят в ленте плечом к плечу, и разная высота у соседей выглядела бы браком вёрстки, а не разным содержимым. */ .tool-media-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .tool-media { width: 100%; height: 158px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); background: #05050b; display: block; } .tool-media-strip .tool-media:nth-child(n+2) { width: calc(50% - 4px); height: 96px; } /* ---------- ленты во всю ширину экрана ---------- Обе карусели (инструменты и миры) стоят в разметке ВНЕ .wrap — см. index.html. Колонка контента ограничена 1180px, и лента внутри неё на широком мониторе выглядела зажатой: карточки обрезались с обоих краёв, а по бокам пустовало по три-четыре сотни пикселей. Заголовки секций остались в .wrap и по-прежнему по центру — двигалась только лента. Ширину при этом НЕ задаём через 100vw: единица vw включает полосу прокрутки, элемент вылезал бы за экран на её ширину и уезжал вбок. Будучи прямым ребёнком section.block, лента и так занимает ровно ширину страницы без всякой арифметики. Отступ по краям одной формулой на все экраны: clamp никогда не опустится ниже 24px, а это ровно тот отступ, который даёт .wrap на телефоне (calc(100% - 48px)) — мобильный вид, который просили не трогать, остаётся пиксель в пиксель прежним. */ /* У ленты инструментов отступ от краёв задаёт не оболочка, а сама лента — см. ниже: он обязан совпадать с шириной растворения, иначе дымка ложится на крайние карточки. */ .tools-rail-shell { padding-inline: 0; } /* Когда карточек мало и они помещаются целиком (миров всего два, а лента теперь во всю ширину), они собираются по центру, а не жмутся к левому краю с пустотой справа. Ключевое слово `safe` обязательно: обычный `center` у прокручиваемого контейнера отрезает начало содержимого, когда оно всё-таки не помещается — до первой карточки становится не домотать. С `safe` браузер сам возвращается к выравниванию по началу, как только появляется переполнение. Старые браузеры не поймут всё правило целиком и останутся на выравнивании по началу — то есть ровно на прежнем поведении. */ .tools-rail { justify-content: safe center; } /* ---------- горизонтальная прокрутка инструментов ---------- */ .tools-rail-shell { position: relative; } .tools-rail { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto; /* Боковой отступ = ширина растворения + 4px. Это главное условие всей затеи: карточка в крайнем положении должна НАЧИНАТЬСЯ там, где маска уже полностью непрозрачна. Иначе дымка садится не на пустое поле, а на саму карточку, и крайние карточки выглядят обрезанными (так и было: 129px растворения при отступе в 4px съедали 42% первой карточки). Прокручиваемому контейнеру padding идёт на пользу дважды: слева он отодвигает первую карточку при scrollLeft = 0, справа — входит в scrollWidth и так же отодвигает последнюю в конце прокрутки. */ padding: 10px calc(var(--rail-fade) + 4px) 26px; cursor: grab; user-select: none; scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; } .tools-rail::-webkit-scrollbar { height: 6px; } .tools-rail::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; } /* Растворение по краям. Лента едет сама собой, и на границе карточка раньше не появлялась, а «включалась» — резким прямым срезом. Маска гасит края, поэтому карточка проявляется и уходит плавно. Ширина растворения не фиксированная, а от ширины экрана: на мониторе край должен быть заметно мягче, чем на телефоне, где вся лента — полторы карточки. Верхняя граница намеренно скромная (72px): это ещё и отступ ленты от края экрана (см. padding ниже), а он не должен разъедаться на пол-карточки. На телефоне clamp упирается в нижнюю границу 24px — ровно тот отступ, который лента имела раньше от .wrap, поэтому мобильный вид не сдвинулся ни на пиксель. */ .tools-rail { --rail-fade: clamp(24px, 3.4vw, 72px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), transparent 100%); } .tools-rail.dragging { cursor: grabbing; } .tools-rail .tool-card { flex: 0 0 300px; } @media (max-width: 760px) { /* мобильная версия: карточки инструментов были ~640px высотой (перекрывали экран) — слегка уменьшаем отступы/иконку/шрифты, ширину карточки. ПК-версия (правило выше, .tools-rail .tool-card{flex:0 0 300px}) не трогаем. */ .tools-rail .tool-card { flex: 0 0 72vw; padding: 20px 18px; } .tools-rail .tool-card .card-icon { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: 12px; border-radius: 12px; } .tools-rail .tool-card h3 { font-size: 1.15rem; margin-bottom: .4em; } .tools-rail .tool-card p { font-size: .9rem; margin-bottom: .7em; } .tools-rail .tool-card ul { font-size: .86rem; } .tools-rail .tool-card ul li { margin-bottom: .35em; } } /* ============================================================ КАТАЛОГ МИРОВ — «В какую историю вы войдёте следующей?» Фильтры → крупная карточка избранного + сетка карточек. Компактнее обычной секции — блок должен помещаться в экран. Акцент секции — цвет выбранной роли (--wv). Данные — ключ `systems` (правится в админ-панели), фолбэк — W2_FALLBACK в site.js. ============================================================ */ .worlds2 { --wv: var(--role-rgb); } /* компактнее обычной секции (section.block = 96px) — блок должен помещаться в экран */ .worlds2.block { padding-block: clamp(30px, 3.6vw, 48px); } .worlds2 .section-head { margin-bottom: .9rem; } .worlds2 .section-head .kicker { color: rgb(var(--wv)); margin-bottom: .7rem; } .worlds2 .section-head .kicker::before { background: linear-gradient(90deg, transparent, rgb(var(--wv))); } .worlds2 .section-head .kicker::after { background: linear-gradient(90deg, rgb(var(--wv)), transparent); } .worlds2 .section-head h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); margin-bottom: .4rem; } .worlds2 .section-head p { font-size: .95rem; margin-bottom: .7rem; } .w2-hl { color: rgb(var(--wv)); } /* ---- фильтры ---- */ .w2-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .w2-filter { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); color: var(--parchment-dim); font-family: var(--font-body); font-size: .86rem; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; } .w2-filter:hover { color: var(--parchment); border-color: rgba(var(--wv), .4); } .w2-filter[aria-pressed="true"] { color: #fff; border-color: rgba(var(--wv), .55); background: rgba(var(--wv), .12); box-shadow: 0 0 0 1px rgba(var(--wv), .25), 0 10px 26px -14px rgba(var(--wv), .55); } .w2-filter:focus-visible { outline: 2px solid rgb(var(--wv)); outline-offset: 2px; } /* ---- контейнер во всю ширину ---- */ .w2-bleed { margin-top: clamp(.8rem, 1.6vw, 1.3rem); padding: 0 clamp(16px, 4vw, 44px); } .w2 { max-width: 1360px; margin: 0 auto; } /* ---- карточка избранного ---- */ .w2-featured { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; border: 1px solid rgba(var(--wv), .16); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(16, 20, 30, .5), rgba(9, 12, 19, .6)); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 40px 110px -48px rgba(0, 0, 0, .6), 0 0 70px -36px rgba(var(--wv), .2); } .w2-featured-info { padding: clamp(15px, 1.9vw, 24px); display: flex; flex-direction: column; gap: 7px; min-width: 0; } .w2-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgb(var(--wv)); } .w2-eyebrow svg { width: 15px; height: 15px; flex: none; } .w2-featured-info h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.06; margin: 0; color: var(--parchment); } .w2-kind { font-size: .8rem; font-weight: 600; color: rgb(var(--wv)); margin: -3px 0 0; } .w2-featured-desc { color: var(--parchment-dim); font-size: .89rem; line-height: 1.45; margin: 0; max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .w2-stats { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: .82rem; color: var(--parchment-dim); } .w2-stars { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-bright); font-weight: 600; } .w2-stars svg { width: 13px; height: 13px; } .w2-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; } .w2-tags { display: flex; flex-wrap: wrap; gap: 6px; } .w2-tag { font-size: .7rem; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(var(--wv), .22); background: rgba(var(--wv), .08); color: var(--parchment); } .w2-perks-label { font-size: .74rem; color: var(--parchment-dim); align-self: center; margin-right: 2px; } .w2-perks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; } .w2-perk { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; padding: 5px 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .02); color: var(--parchment-dim); } .w2-perk svg { width: 13px; height: 13px; flex: none; color: rgb(var(--wv)); } .w2-featured-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } /* ---- кнопки секции ---- */ .w2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .2s; } .w2-btn svg { width: 14px; height: 14px; flex: none; } .w2-btn-primary { color: #04110e; background: linear-gradient(135deg, rgb(var(--wv)), rgba(var(--wv), .74)); border-color: rgba(var(--wv), .5); box-shadow: 0 12px 30px -14px rgba(var(--wv), .6); } .w2-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(var(--wv), .8); color: #04110e; } .w2-btn-ghost { color: var(--parchment); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); } .w2-btn-ghost:hover { border-color: rgba(var(--wv), .5); color: #fff; background: rgba(var(--wv), .08); } .w2-btn:focus-visible { outline: 2px solid rgb(var(--wv)); outline-offset: 3px; } /* ---- арт избранного ---- */ .w2-featured-art { position: relative; min-height: clamp(170px, 16vw, 255px); background: linear-gradient(155deg, #1e2b3a, #12203a 45%, #0a0f1a); background-size: cover; background-position: center; } .w2-featured-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, transparent 60%, rgba(9, 12, 19, .5) 100%), radial-gradient(120% 80% at 82% 12%, rgba(var(--wv), .16), transparent 60%); } /* ---- «попробуйте ещё» ---- */ .w2-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: clamp(13px, 1.6vw, 18px) 2px 10px; } .w2-more-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; margin: 0; color: var(--parchment); } .w2-see-all { font-size: .83rem; color: rgb(var(--wv)); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .w2-see-all svg { width: 13px; height: 13px; } .w2-see-all:hover { color: #fff; } .w2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .w2-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .w2-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* одна карточка «попробуйте ещё» — горизонтальная, чтобы блок был ниже */ .w2-grid[data-count="1"] { grid-template-columns: minmax(0, 640px); } .w2-grid[data-count="1"] .w2-card { flex-direction: row; align-items: stretch; } .w2-grid[data-count="1"] .w2-card-art { aspect-ratio: auto; width: clamp(150px, 34%, 230px); flex: none; } .w2-grid[data-count="1"] .w2-card-body { flex: 1; } .w2-grid[data-count="1"] .w2-card-desc { -webkit-line-clamp: 3; } .w2-grid[data-count="1"] .w2-card-cta { align-self: flex-start; width: auto; padding: 8px 16px; } .w2-card { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .08); border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, rgba(16, 20, 30, .42), rgba(9, 12, 19, .5)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .25s, border-color .25s, box-shadow .3s; } .w2-card:hover { transform: translateY(-4px); border-color: rgba(var(--wv), .35); box-shadow: 0 22px 52px -30px rgba(0, 0, 0, .6); } .w2-card-art { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(155deg, #241a3f, #12142a 55%, #0a0b14); background-size: cover; background-position: center; } .w2-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(9, 12, 19, .6)); } .w2-card-badge { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(7, 9, 15, .72); border: 1px solid rgba(var(--wv), .32); color: rgb(var(--wv)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .w2-card-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .w2-card-body h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; margin: 0; color: var(--parchment); line-height: 1.15; } .w2-card-kind { font-size: .71rem; color: var(--parchment-dim); } .w2-card-desc { font-size: .8rem; line-height: 1.45; color: var(--parchment-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .w2-card-tags { display: flex; flex-wrap: wrap; gap: 5px; } .w2-card-tags span { font-size: .63rem; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); color: var(--parchment-dim); } .w2-card-meta { display: flex; align-items: center; gap: 4px 9px; flex-wrap: wrap; font-size: .74rem; color: var(--parchment-dim); margin-top: auto; padding-top: 3px; } .w2-card-meta .w2-stars svg { width: 12px; height: 12px; } .w2-card-price { color: rgb(var(--wv)); font-weight: 600; margin-left: auto; } .w2-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; padding: 9px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); color: var(--parchment); font-size: .82rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; } .w2-card-cta svg { width: 13px; height: 13px; flex: none; } .w2-card-cta:hover { border-color: rgba(var(--wv), .5); background: rgba(var(--wv), .1); color: #fff; } @media (max-width: 1080px) { .w2-grid, .w2-grid[data-count="3"], .w2-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .w2-featured { grid-template-columns: 1fr; } .w2-featured-art { min-height: 180px; order: -1; } } @media (max-width: 700px) { /* горизонтальную одиночную карточку возвращаем в вертикальную */ .w2-grid[data-count="1"] { grid-template-columns: minmax(0, 420px); } .w2-grid[data-count="1"] .w2-card { flex-direction: column; } .w2-grid[data-count="1"] .w2-card-art { aspect-ratio: 16 / 9; width: auto; } .w2-grid[data-count="1"] .w2-card-cta { align-self: stretch; } } @media (max-width: 560px) { .w2-bleed { padding-inline: 12px; } .w2-grid, .w2-grid[data-count] { grid-template-columns: 1fr; max-width: none; } .w2-filters { gap: 6px; } .w2-filter { padding: 7px 12px; font-size: .79rem; } .w2-featured-cta .w2-btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .w2-filter, .w2-btn, .w2-card, .w2-card-cta { transition: none; } .w2-btn-primary:hover, .w2-card:hover { transform: none; } } /* ============================================================ БЛОК ЭКОСИСТЕМЫ — «Всё для вашей НРИ в одной экосистеме». Вкладки роли (игрок / мастер / разработчик мира / студия) переключают контент главной панели И цвет всей страницы: --role-rgb задаётся на body[data-role], site.js ставит атрибут. Панели прозрачно-стеклянные, все кнопки кликабельны и отзывчивы. ============================================================ */ :root { --role-rgb: var(--gold-rgb); } body[data-role="player"] { --role-rgb: 90, 206, 196; } /* бирюза */ body[data-role="master"] { --role-rgb: 150, 128, 255; } /* аметист */ body[data-role="developer"] { --role-rgb: 232, 176, 92; } /* янтарь */ body[data-role="studio"] { --role-rgb: 232, 128, 176; } /* роза */ /* Мягкая подсветка всей страницы под выбранную роль — поверх «неба», под контентом. Плавно перетекает при смене роли. */ body[data-role]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 780px at 80% -12%, rgba(var(--role-rgb), .17), transparent 62%), radial-gradient(1000px 720px at 8% 106%, rgba(var(--role-rgb), .11), transparent 60%); transition: background .6s ease; } .divider span, .hero-scroll, .scroll-cue { transition: color .5s ease; } body[data-role] .divider span { color: rgb(var(--role-rgb)); } body[data-role] .hero-scroll, body[data-role] .scroll-cue { color: rgb(var(--role-rgb)); } .ecosystem { --eco: var(--role-rgb); --eco-line: rgba(var(--role-rgb), .32); } /* при смене роли дотягиваем те элементы, у которых своих переходов нет */ .eco-panel, .eco-panel::before, .eco-step-dot, .eco-tier-emblem, .eco-proof, .eco-eyebrow, .eco-title .eco-accent { transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease; } .ecosystem .section-head { margin-bottom: 2.2rem; } .ecosystem .section-head .kicker { color: rgb(var(--eco)); } .ecosystem .section-head .kicker::before { background: linear-gradient(90deg, transparent, rgb(var(--eco))); } .ecosystem .section-head .kicker::after { background: linear-gradient(90deg, rgb(var(--eco)), transparent); } .eco-bleed { margin-top: clamp(1.6rem, 3vw, 2.6rem); padding: 0 clamp(16px, 4vw, 44px); } .eco { max-width: 1360px; margin: 0 auto; } /* ---- вкладки ролей ---- */ .eco-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .eco-role { position: relative; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 16px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(14, 18, 27, .34); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--parchment-dim); font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; cursor: pointer; transition: border-color .25s, background .25s, color .25s, box-shadow .25s, transform .2s; } .eco-role .eco-role-ic { width: 22px; height: 22px; flex: none; opacity: .75; transition: opacity .25s, color .25s; } .eco-role:hover { border-color: var(--eco-line); color: var(--parchment); transform: translateY(-2px); } .eco-role:focus-visible { outline: 2px solid rgb(var(--eco)); outline-offset: 2px; } .eco-role[aria-selected="true"] { color: #fff; border-color: rgba(var(--eco), .6); background: linear-gradient(180deg, rgba(var(--eco), .17), rgba(16, 20, 30, .62)); box-shadow: 0 0 0 1px rgba(var(--eco), .28), 0 18px 44px -14px rgba(var(--eco), .55), inset 0 0 30px rgba(var(--eco), .1); } .eco-role[aria-selected="true"] .eco-role-ic { opacity: 1; color: rgb(var(--eco)); } .eco-role[aria-selected="true"]::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--eco)), transparent); } /* ---- главная панель ---- Стекло собрано в центре и полностью растворяется к краям: боков панели не видно вообще, у середины — плотная заливка + размытие. Радиальная маска на слое ::before; контент (текст, видео, кнопки) — поверх, всегда чёткий. Рамки и уголков нет. */ .eco-panel { position: relative; border: 0; border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); background: transparent; } .eco-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(110% 92% at 50% 40%, rgba(var(--eco), .16), transparent 55%), linear-gradient(180deg, rgba(17, 21, 32, .55), rgba(9, 12, 19, .6)); -webkit-backdrop-filter: blur(28px) saturate(1.18); backdrop-filter: blur(28px) saturate(1.18); -webkit-mask-image: radial-gradient(86% 84% at 50% 45%, #000 4%, rgba(0, 0, 0, .3) 34%, transparent 56%); mask-image: radial-gradient(86% 84% at 50% 45%, #000 4%, rgba(0, 0, 0, .3) 34%, transparent 56%); } .eco-panel > * { position: relative; z-index: 1; } .eco-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.5vw, 52px); align-items: start; } .eco-panel-copy, .eco-video-wrap { min-width: 0; } .eco-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: rgb(var(--eco)); } .eco-eyebrow svg { width: 16px; height: 16px; flex: none; } .eco-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1.22; margin: 0 0 13px; color: var(--parchment); } .eco-title .eco-accent { color: rgb(var(--eco)); } .eco-lead { color: var(--parchment-dim); font-size: 1rem; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; } /* путь из шагов */ .eco-steps { display: flex; align-items: flex-start; gap: 3px; margin: 0 0 20px; } .eco-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; } .eco-step-dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid rgba(var(--eco), .38); background: radial-gradient(circle at 50% 32%, rgba(var(--eco), .16), rgba(16, 20, 30, .5)); color: rgb(var(--eco)); } .eco-step-dot svg { width: 22px; height: 22px; } .eco-step-label { font-size: .78rem; color: var(--parchment-dim); text-align: center; line-height: 1.25; } .eco-step-sep { flex: none; margin-top: 18px; color: rgba(var(--eco), .55); } .eco-step-sep svg { width: 13px; height: 13px; display: block; } /* чипы-подтверждения */ .eco-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 13px 16px; margin: 0 0 22px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .015); } .eco-proof li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--parchment-dim); } .eco-proof li svg { width: 15px; height: 15px; flex: none; color: rgb(var(--eco)); } /* кнопки */ .eco-cta-row { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; } .eco-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 11px; font-family: var(--font-body); font-size: .92rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .2s; } .eco-btn svg { width: 14px; height: 14px; flex: none; } .eco-btn-primary { color: #04110e; background: linear-gradient(135deg, rgb(var(--eco)), rgba(var(--eco), .74)); border-color: rgba(var(--eco), .5); box-shadow: 0 14px 32px -12px rgba(var(--eco), .6); } .eco-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -12px rgba(var(--eco), .8); color: #04110e; } .eco-btn-link { background: none; padding: 8px 2px; color: var(--parchment); } .eco-btn-link:hover { color: rgb(var(--eco)); } .eco-btn:focus-visible { outline: 2px solid rgb(var(--eco)); outline-offset: 3px; } /* видео */ .eco-video-wrap { display: flex; flex-direction: column; gap: 12px; } .eco-video { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(var(--eco), .25); background: linear-gradient(180deg, #10151f, #070a11); box-shadow: inset 0 0 60px rgba(0, 0, 0, .55); } .eco-video img, .eco-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .eco-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 26%, rgba(4, 6, 11, .5) 100%); transition: opacity .3s; } .eco-video.is-playing::after { opacity: 0; } .eco-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; z-index: 2; border: 1px solid rgba(var(--eco), .6); background: rgba(8, 14, 18, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgb(var(--eco)); cursor: pointer; box-shadow: 0 0 0 8px rgba(var(--eco), .12), 0 0 40px rgba(var(--eco), .35); transition: transform .2s, box-shadow .25s, background .2s; } .eco-play svg { width: 24px; height: 24px; margin-left: 3px; } .eco-play:hover { transform: translate(-50%, -50%) scale(1.07); background: rgba(8, 14, 18, .72); box-shadow: 0 0 0 10px rgba(var(--eco), .16), 0 0 56px rgba(var(--eco), .5); } .eco-play:focus-visible { outline: 2px solid rgb(var(--eco)); outline-offset: 4px; } .eco-video.is-playing .eco-play { display: none; } .eco-video.is-nudge { animation: eco-nudge .5s ease; } @keyframes eco-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .eco-video-cap { text-align: center; font-size: .82rem; color: var(--parchment-dim); margin: 0; } /* ---- полоса тарифа ---- */ .eco-tier { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); align-items: center; gap: clamp(14px, 3vw, 34px); margin-top: 16px; padding: 17px clamp(18px, 2.4vw, 30px); border: 1px solid rgba(var(--eco), .18); border-radius: 16px; background: radial-gradient(120% 140% at 12% 50%, rgba(var(--eco), .10), transparent 60%), linear-gradient(180deg, rgba(15, 19, 29, .30), rgba(9, 12, 19, .38)); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 0 46px -24px rgba(var(--eco), .3); } .eco-tier-id { display: flex; align-items: center; gap: 13px; min-width: 0; } .eco-tier-emblem { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(var(--eco), .35); background: radial-gradient(circle at 50% 30%, rgba(var(--eco), .2), rgba(16, 20, 30, .5)); color: rgb(var(--eco)); } .eco-tier-emblem svg { width: 24px; height: 24px; } .eco-tier-name { font-family: var(--font-display); font-size: 1.26rem; color: var(--parchment); line-height: 1.15; } .eco-tier-sub { font-size: .78rem; color: var(--parchment-dim); } .eco-tier-sub b { color: rgb(var(--eco)); font-weight: 600; } .eco-tier-feats { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; } .eco-tier-feat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .02); font-size: .8rem; color: var(--parchment-dim); } .eco-tier-feat svg { width: 14px; height: 14px; flex: none; color: rgb(var(--eco)); } .eco-tier .eco-btn-primary { white-space: nowrap; } /* ---- нижняя полоса «инструменты вместе» ---- */ .eco-tools { margin-top: 24px; padding: 22px clamp(18px, 2.4vw, 30px); border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; background: rgba(11, 14, 21, .34); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .eco-tools-h { text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; color: var(--parchment); margin: 0 0 16px; } .eco-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; } .eco-tools-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .eco-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .02); color: var(--parchment-dim); font-size: .86rem; font-weight: 600; transition: border-color .2s, color .2s, background .2s, transform .2s; } .eco-chip svg { width: 16px; height: 16px; flex: none; opacity: .85; } .eco-chip:hover { color: #fff; border-color: var(--eco-line); background: rgba(var(--eco), .08); transform: translateY(-2px); } .eco-chip:focus-visible { outline: 2px solid rgb(var(--eco)); outline-offset: 2px; } .eco-chip.is-standalone { border-color: rgba(var(--eco), .3); } .eco-chip-sep { flex: none; color: rgba(255, 255, 255, .25); } .eco-chip-sep svg { width: 12px; height: 12px; display: block; } .eco-chip-div { font-size: 1rem; padding: 0 4px; color: rgba(255, 255, 255, .2); } .eco-tools-note { flex: 1 1 240px; max-width: 380px; font-size: .84rem; color: var(--parchment-dim); line-height: 1.55; margin: 0; } /* якорь для авто-прокрутки к блоку при выборе роли (учитывает липкую шапку). Десктоп — живая --header-h; телефон — фикс (там шапка до автосворачивания ~190px). */ .eco, .eco-panel { scroll-margin-top: calc(var(--header-h, 72px) + 16px); } @media (max-width: 640px) { .eco, .eco-panel { scroll-margin-top: 76px; } } /* смена контента панели при выборе роли — мягкая, короткая */ .eco-fade { animation: eco-fade .5s cubic-bezier(.22, .61, .25, 1) both; } .eco-fade.d1 { animation-delay: .09s; } @keyframes eco-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============ планшет ============ */ @media (max-width: 1000px) { .eco-bleed { padding-inline: clamp(14px, 3.5vw, 32px); } .eco-roles { grid-template-columns: 1fr 1fr; gap: 10px; } .eco-panel { padding: clamp(20px, 3.4vw, 32px); } .eco-panel-grid { grid-template-columns: 1fr; gap: 26px; } .eco-video { aspect-ratio: 16 / 9; max-height: 62vh; } .eco-tier { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; } .eco-tier-id { flex-direction: column; text-align: center; } .eco-tier-feats { justify-content: center; } .eco-tools-row { justify-content: center; } .eco-tools-note { text-align: center; max-width: none; } } /* ============ телефон ============ */ @media (max-width: 640px) { .eco-bleed { padding-inline: 12px; } .eco-roles { grid-template-columns: 1fr; gap: 8px; } .eco-role { justify-content: flex-start; padding: 12px 14px; font-size: .96rem; } .eco-role[aria-selected="true"]::after { left: 14px; right: 14px; } .eco-panel { padding: 18px 15px; border-radius: 18px; } /* на телефоне панель почти во всю ширину — оставляем больше подложки ради читаемости */ .eco-panel { background: linear-gradient(180deg, rgba(14, 18, 27, .16), rgba(9, 12, 19, .2)); } .eco-panel::before { -webkit-mask-image: radial-gradient(125% 112% at 50% 45%, #000 34%, rgba(0, 0, 0, .45) 74%, transparent 100%); mask-image: radial-gradient(125% 112% at 50% 45%, #000 34%, rgba(0, 0, 0, .45) 74%, transparent 100%); } .eco-title { font-size: 1.5rem; } .eco-lead { font-size: .95rem; margin-bottom: 18px; } .eco-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; } .eco-step-sep { display: none; } .eco-step-dot { width: 46px; height: 46px; } .eco-step-dot svg { width: 20px; height: 20px; } .eco-step-label { font-size: .74rem; } .eco-proof { flex-direction: column; gap: 9px; } .eco-cta-row { gap: 12px; } .eco-cta-row .eco-btn-primary { width: 100%; justify-content: center; } .eco-tier { padding: 16px; } .eco-tier .eco-btn-primary { width: 100%; justify-content: center; } .eco-tier-feat { font-size: .76rem; padding: 6px 10px; } .eco-tools { padding: 18px 14px; } .eco-tools-h { font-size: 1.1rem; } .eco-tools-chips { justify-content: center; gap: 5px; } .eco-chip { font-size: .8rem; padding: 8px 11px; } .eco-chip-div { display: none; } } @media (max-width: 360px) { .eco-steps { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .eco-role, .eco-chip, .eco-btn, .eco-play, .eco-fade, .eco-video.is-nudge { transition: none; animation: none; transform: none; } } /* ============================================================ ПУТЬ ГЕРОЯ — «От первого запуска до первой партии». Кликабельная лента из 4 шагов: каждый открывает свой экран-макет приложения слева и описание справа. По умолчанию открыт шаг 1. Снизу — объединённый блок «Скачайте Nexus». Компактный: весь блок должен помещаться в экран. Акцент — цвет роли (--jr). ============================================================ */ .journey { --jr: var(--role-rgb); } .journey.block { padding-block: clamp(22px, 2.6vw, 36px); } .journey .section-head { margin-bottom: .9rem; } .journey .section-head .kicker { color: rgb(var(--jr)); margin-bottom: .55rem; } .journey .section-head .kicker::before { background: linear-gradient(90deg, transparent, rgb(var(--jr))); } .journey .section-head .kicker::after { background: linear-gradient(90deg, rgb(var(--jr)), transparent); } .journey .section-head h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-bottom: .35rem; } .journey .section-head p { font-size: .92rem; margin-bottom: .6rem; } .jr-hl { color: rgb(var(--jr)); } /* ---- лента шагов ---- */ .jr-timeline { display: flex; align-items: flex-start; justify-content: center; max-width: 860px; margin: 0 auto; } .jr-node { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; flex: 0 0 auto; width: clamp(88px, 12vw, 124px); padding: 0; } .jr-node-ring { position: relative; width: clamp(44px, 4.6vw, 54px); height: clamp(44px, 4.6vw, 54px); border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .13); background: rgba(10, 13, 20, .5); color: var(--parchment-dim); transition: color .3s, border-color .3s, background .3s, box-shadow .3s; } .jr-node-ring svg { width: 44%; height: 44%; } .jr-node-check { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--jr)); color: #04110e; display: none; place-items: center; border: 2px solid var(--ink-1); } .jr-node-check svg { width: 10px; height: 10px; } .jr-node-num { font-family: var(--font-display); font-size: clamp(.9rem, 1.3vw, 1.1rem); color: var(--parchment-dim); transition: color .3s; } .jr-node-label { font-size: clamp(.68rem, .95vw, .8rem); color: var(--parchment-dim); text-align: center; line-height: 1.2; transition: color .3s; } .jr-node:hover .jr-node-ring { border-color: rgba(var(--jr), .5); color: var(--parchment); } .jr-node.is-active .jr-node-ring { border-color: rgb(var(--jr)); color: rgb(var(--jr)); background: rgba(var(--jr), .12); box-shadow: 0 0 0 4px rgba(var(--jr), .14), 0 0 30px -4px rgba(var(--jr), .6); } .jr-node.is-active .jr-node-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(var(--jr), .55); animation: jr-pulse 2.1s ease-out infinite; } .jr-node.is-active .jr-node-num, .jr-node.is-active .jr-node-label { color: var(--parchment); } .jr-node.is-done .jr-node-ring { border-color: rgba(var(--jr), .5); color: rgb(var(--jr)); background: rgba(var(--jr), .08); } .jr-node.is-done .jr-node-check { display: grid; } .jr-node.is-future { opacity: .48; } .jr-node:focus-visible { outline: none; } .jr-node:focus-visible .jr-node-ring { outline: 2px solid rgb(var(--jr)); outline-offset: 3px; } .jr-line { flex: 1 1 auto; min-width: 14px; max-width: 140px; height: 2px; background: rgba(255, 255, 255, .12); margin-top: clamp(21px, 2.3vw, 27px); position: relative; overflow: hidden; } .jr-line::after { content: ""; position: absolute; inset: 0 100% 0 0; background: rgb(var(--jr)); box-shadow: 0 0 12px rgba(var(--jr), .6); transition: inset .55s ease; } .jr-line.is-done::after { inset: 0 0 0 0; } @keyframes jr-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.4); opacity: 0; } } /* ---- контейнер и панель ---- */ .jr-bleed { margin-top: clamp(.9rem, 2vw, 1.5rem); padding: 0 clamp(16px, 4vw, 44px); } .jr { max-width: 1360px; margin: 0 auto; } .jr-panel { position: relative; border: 1px solid rgba(var(--jr), .16); border-radius: 20px; padding: clamp(13px, 1.8vw, 22px); background: linear-gradient(180deg, rgba(15, 19, 29, .55), rgba(9, 12, 19, .66)); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 40px 110px -52px rgba(0, 0, 0, .62), 0 0 66px -36px rgba(var(--jr), .2); } .jr-cnr { position: absolute; width: 13px; height: 13px; border: 1px solid rgba(var(--jr), .5); pointer-events: none; } .jr-cnr.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .jr-cnr.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .jr-cnr.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .jr-cnr.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } .jr-panel-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(14px, 2.2vw, 32px); align-items: stretch; } .jr-stage, .jr-detail { min-width: 0; } /* ---- макет окна приложения ---- */ .jr-screen { display: none; height: 100%; } .jr-screen.is-shown { display: block; animation: jr-fade .4s ease both; } /* Шаг с собственным медиа из админ-панели (jrApplyServer подменяет макет). */ .jr-shot { margin: 0; height: 100%; min-height: clamp(228px, 22vw, 282px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; overflow: hidden; background: #0a0d14; display: flex; flex-direction: column; } .jr-shot > img, .jr-shot > video { width: 100%; flex: 1 1 auto; min-height: 0; display: block; object-fit: cover; background: #0a0d14; } .jr-shot-cap { margin: 0; padding: 8px 11px; font-size: .8rem; line-height: 1.4; color: var(--parchment-dim); border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .015); } @keyframes jr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .jr-win { height: 100%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #0d1119, #0a0d14); display: grid; grid-template-columns: clamp(104px, 11vw, 128px) minmax(0, 1fr); min-height: clamp(228px, 22vw, 282px); } .jr-sb { border-right: 1px solid rgba(255, 255, 255, .07); padding: 9px 7px; display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, .014); } .jr-sb-brand { display: flex; align-items: center; gap: 6px; padding: 2px 4px 9px; font-family: var(--font-display); font-size: .55rem; letter-spacing: .1em; color: var(--parchment); line-height: 1.25; } .jr-sb-emblem { width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center; background: rgba(var(--jr), .16); color: rgb(var(--jr)); border: 1px solid rgba(var(--jr), .3); flex: none; font-size: .62rem; } .jr-sb-brand i { color: rgb(var(--jr)); font-style: normal; letter-spacing: .16em; } .jr-sb-nav { display: flex; flex-direction: column; gap: 1px; } .jr-sb-nav a { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: .64rem; color: var(--parchment-dim); border: 1px solid transparent; } .jr-sb-nav a i { font-style: normal; width: 12px; text-align: center; opacity: .8; flex: none; } .jr-sb-nav a.is-on { background: rgba(var(--jr), .14); color: #fff; border-color: rgba(var(--jr), .32); } .jr-sb-nav a.is-on i { color: rgb(var(--jr)); opacity: 1; } .jr-sb-foot { margin-top: auto; padding: 8px 4px 1px; font-size: .55rem; color: var(--parchment-dim); line-height: 1.8; } .jr-sb-foot .jr-sd { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4a5568; margin-right: 5px; vertical-align: middle; } .jr-sb-foot .jr-sd.on { background: rgb(var(--jr)); box-shadow: 0 0 6px rgba(var(--jr), .7); } .jr-sb-foot b { color: rgb(var(--jr)); font-weight: 600; } .jr-scr-main { display: flex; flex-direction: column; min-width: 0; } .jr-scr-chrome { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--parchment-dim); font-size: .72rem; } .jr-scr-crumb { margin-right: auto; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; } .jr-scr-body { padding: clamp(9px, 1.3vw, 14px); flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* шаг 1 — стартовый экран */ .jr-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 6px 4px; } .jr-hero-emblem { width: clamp(38px, 5vw, 52px); height: clamp(38px, 5vw, 52px); border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; color: rgb(var(--jr)); background: radial-gradient(circle at 50% 30%, rgba(var(--jr), .22), rgba(16, 20, 30, .5)); border: 1px solid rgba(var(--jr), .3); } .jr-hero-wm { font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: .1em; color: var(--parchment); line-height: 1.1; } .jr-hero-wm i { display: block; color: rgb(var(--jr)); font-style: normal; letter-spacing: .28em; font-size: .6em; margin-top: 2px; } .jr-hero-tag { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--parchment-dim); } .jr-hero-btn { margin-top: 3px; padding: 6px 18px; border-radius: 7px; background: linear-gradient(135deg, rgb(var(--jr)), rgba(var(--jr), .75)); color: #04110e; font-size: .64rem; font-weight: 700; letter-spacing: .07em; } .jr-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } .jr-chip { border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; padding: 5px 8px; font-size: .54rem; color: var(--parchment-dim); text-align: center; line-height: 1.35; background: rgba(255, 255, 255, .02); min-width: 66px; } .jr-chip b { display: block; color: var(--parchment); font-size: .6rem; font-weight: 600; margin-bottom: 1px; } .jr-chip i { font-style: normal; color: rgb(var(--jr)); } /* шаг 2 — форма профиля */ .jr-scr-title { font-family: var(--font-display); font-size: .88rem; color: var(--parchment); margin: 0; } .jr-scr-sub { font-size: .58rem; color: rgb(var(--jr)); margin: 2px 0 9px; } .jr-form { display: flex; flex-direction: column; gap: 5px; } .jr-field { display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 7px; padding: 6px 9px; background: rgba(255, 255, 255, .02); font-size: .63rem; color: var(--parchment); } .jr-field .jr-fi { color: var(--parchment-dim); flex: none; } .jr-field .jr-fv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jr-field .jr-fv.dim { color: var(--parchment-dim); } .jr-field .jr-fok { color: rgb(var(--jr)); flex: none; } .jr-mini-label { font-size: .58rem; color: var(--parchment-dim); margin: 9px 0 6px; } .jr-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .jr-mini { border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; padding: 7px 4px; text-align: center; background: rgba(255, 255, 255, .02); } .jr-mini .jr-mi { display: block; margin: 0 auto 3px; color: rgb(var(--jr)); font-size: .74rem; font-style: normal; } .jr-mini b { display: block; font-size: .54rem; color: var(--parchment); font-weight: 600; } .jr-mini span { font-size: .46rem; color: var(--parchment-dim); } /* шаг 3 — библиотека миров */ .jr-lib-bar { display: flex; align-items: center; gap: 5px; margin: 3px 0 8px; } .jr-lib-search { flex: 1; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 5px 8px; font-size: .56rem; color: var(--parchment-dim); background: rgba(255, 255, 255, .02); } .jr-lib-sel { border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 5px 8px; font-size: .56rem; color: var(--parchment-dim); background: rgba(255, 255, 255, .02); white-space: nowrap; } .jr-lib-toggle { border: 1px solid rgba(var(--jr), .3); border-radius: 6px; padding: 5px 7px; color: rgb(var(--jr)); font-size: .58rem; } .jr-lib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .jr-lib-card { border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .02); } .jr-lib-art { aspect-ratio: 3 / 2; position: relative; display: grid; place-items: center; font-family: var(--font-display); font-size: .7rem; color: rgba(255, 255, 255, .35); } .jr-lib-art .jr-star { position: absolute; top: 4px; right: 5px; color: var(--parchment-dim); font-size: .55rem; } .jr-lib-body { padding: 6px; } .jr-lib-body b { display: block; font-size: .56rem; color: var(--parchment); font-family: var(--font-display); } .jr-lib-tag { display: inline-block; margin-top: 3px; padding: 1px 5px; border-radius: 4px; font-size: .46rem; border: 1px solid rgba(var(--jr), .3); color: rgb(var(--jr)); } .jr-lib-ready { display: block; margin-top: 4px; font-size: .48rem; color: var(--parchment-dim); } .jr-recent-label { font-size: .56rem; color: var(--parchment-dim); margin: 8px 0 5px; } .jr-recent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .jr-recent-item { display: flex; align-items: center; gap: 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: 4px 5px; background: rgba(255, 255, 255, .015); } .jr-recent-item .jr-ri { width: 15px; height: 15px; border-radius: 4px; background: rgba(var(--jr), .16); flex: none; } .jr-recent-item b { font-size: .5rem; color: var(--parchment); display: block; } .jr-recent-item span { font-size: .44rem; color: var(--parchment-dim); } /* шаг 4 — игровой стол */ .jr-lobby-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; } .jr-lobby-top b { font-family: var(--font-display); font-size: .76rem; color: var(--parchment); } .jr-lobby-top .jr-leave { margin-left: auto; font-size: .52rem; color: var(--parchment-dim); border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; padding: 2px 7px; } .jr-lobby-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; } .jr-lobby-chips span { font-size: .46rem; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); color: var(--parchment-dim); } .jr-lobby-chips span:first-child { border-color: rgba(var(--jr), .4); color: rgb(var(--jr)); } .jr-lobby-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 7px; } .jr-lobby-scene { border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; aspect-ratio: 2 / 1; background: linear-gradient(155deg, #1c2740, #12182c 60%, #0a0d16); } .jr-lobby-players { border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; padding: 6px; } .jr-lobby-players > b { font-size: .52rem; color: var(--parchment-dim); display: block; margin-bottom: 4px; } .jr-player { display: flex; align-items: center; gap: 5px; padding: 3px 1px; } .jr-player .jr-pa { width: 13px; height: 13px; border-radius: 50%; background: rgba(var(--jr), .18); flex: none; } .jr-player b { font-size: .48rem; color: var(--parchment); display: block; } .jr-player span { font-size: .42rem; color: var(--parchment-dim); } .jr-lobby-bottom { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7px; margin-top: 7px; } .jr-lobby-camp, .jr-lobby-chat { border: 1px solid rgba(255, 255, 255, .09); border-radius: 7px; padding: 6px; } .jr-lobby-camp b, .jr-lobby-chat > b { font-size: .5rem; color: var(--parchment-dim); display: block; margin-bottom: 3px; } .jr-lobby-camp .jr-camp-name { font-size: .54rem; color: var(--parchment); font-family: var(--font-display); } .jr-lobby-camp span { font-size: .44rem; color: var(--parchment-dim); } .jr-msg { font-size: .46rem; color: var(--parchment-dim); margin-bottom: 2px; } .jr-msg b { color: rgb(var(--jr)); font-weight: 600; } .jr-chat-input { margin-top: 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; padding: 3px 6px; font-size: .46rem; color: var(--parchment-dim); } /* ---- правая колонка: описание шага ---- */ .jr-detail-panel { display: none; flex-direction: column; gap: 8px; height: 100%; } .jr-detail-panel.is-shown { display: flex; animation: jr-fade .4s ease both; } .jr-num { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: rgb(var(--jr)); margin: 0; } .jr-detail-panel h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); margin: -5px 0 0; color: var(--parchment); } .jr-desc { color: var(--parchment-dim); font-size: .88rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .jr-points { list-style: none; padding: 0; margin: 1px 0 0; display: flex; flex-direction: column; gap: 6px; } .jr-points li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--parchment); line-height: 1.35; } .jr-points li::before { content: "◈"; color: rgb(var(--jr)); flex: none; font-size: .72rem; line-height: 1.5; } .jr-detail-cta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; } .jr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 17px; border-radius: 9px; font-family: var(--font-body); font-size: .84rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .25s, background .25s, border-color .25s, color .2s; } .jr-btn svg { width: 14px; height: 14px; flex: none; } .jr-btn-primary { color: #04110e; background: linear-gradient(135deg, rgb(var(--jr)), rgba(var(--jr), .74)); border-color: rgba(var(--jr), .5); box-shadow: 0 10px 26px -14px rgba(var(--jr), .6); } .jr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -14px rgba(var(--jr), .8); color: #04110e; } .jr-btn-ghost { color: var(--parchment); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); } .jr-btn-ghost:hover { border-color: rgba(var(--jr), .5); color: #fff; background: rgba(var(--jr), .08); } .jr-btn:focus-visible { outline: 2px solid rgb(var(--jr)); outline-offset: 3px; } .jr-fineprint { font-size: .72rem; color: rgba(202, 191, 164, .6); letter-spacing: .03em; margin: auto 0 0; padding-top: 3px; } /* ---- объединённый CTA «Скачайте Nexus» ---- */ .jr-cta { margin-top: clamp(14px, 2vw, 22px); text-align: center; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: radial-gradient(120% 120% at 50% 0%, rgba(var(--jr), .1), transparent 60%), linear-gradient(180deg, rgba(14, 18, 27, .4), rgba(9, 12, 19, .5)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .jr-cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .75rem; color: var(--parchment); } .jr-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: .9rem; } .jr-cta-primary { display: inline-flex; align-items: center; gap: 11px; padding: 13px 26px; border-radius: 12px; font-size: 1rem; font-weight: 700; color: #04110e; background: linear-gradient(135deg, rgb(var(--jr)), rgba(var(--jr), .72)); border: 1px solid rgba(var(--jr), .5); box-shadow: 0 16px 40px -18px rgba(var(--jr), .7); transition: transform .2s, box-shadow .25s; } .jr-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(var(--jr), .9); color: #04110e; } .jr-cta-primary svg { width: 18px; height: 18px; } .jr-cta-ghost { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px; border-radius: 12px; text-align: left; font-size: .88rem; line-height: 1.3; color: var(--parchment); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s, color .2s; } .jr-cta-ghost:hover { border-color: rgba(var(--jr), .5); color: #fff; background: rgba(var(--jr), .07); } .jr-cta-ghost svg { width: 16px; height: 16px; flex: none; color: rgb(var(--jr)); } .jr-cta-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; max-width: 1000px; margin: 0 auto; text-align: left; } .jr-cta-feat { display: flex; gap: 10px; align-items: flex-start; } .jr-cta-feat svg { width: 19px; height: 19px; flex: none; color: rgb(var(--jr)); margin-top: 1px; } .jr-cta-feat b { display: block; font-size: .84rem; color: var(--parchment); font-weight: 600; } .jr-cta-feat span { font-size: .76rem; color: var(--parchment-dim); line-height: 1.35; } .download-fineprint { font-size: .78rem; color: rgba(202, 191, 164, .6); } /* ---- адаптив ---- */ @media (max-width: 1000px) { .jr-panel-grid { grid-template-columns: 1fr; } .jr-stage { order: 2; } .jr-win { min-height: 300px; } } @media (max-width: 720px) { .jr-timeline { flex-wrap: wrap; gap: 12px 0; justify-content: space-between; max-width: 400px; } .jr-node { width: 22%; } .jr-line { display: none; } .jr-cta-feats { grid-template-columns: 1fr 1fr; gap: 12px; } .jr-win { grid-template-columns: 1fr; } .jr-sb { display: none; } .jr-scr-chrome { padding-top: 9px; } .jr-lib-grid, .jr-recent, .jr-mini-grid { grid-template-columns: repeat(2, 1fr); } .jr-lobby-grid, .jr-lobby-bottom { grid-template-columns: 1fr; } } @media (max-width: 480px) { .jr-node-label { font-size: .64rem; } .jr-cta-feats { grid-template-columns: 1fr; } .jr-cta-btns .jr-cta-primary, .jr-cta-btns .jr-cta-ghost { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .jr-node.is-active .jr-node-ring::after { animation: none; } .jr-screen.is-shown, .jr-detail-panel.is-shown { animation: none; } .jr-btn, .jr-cta-primary, .jr-node-ring, .jr-line::after { transition: none; } } /* ---------- документы ---------- */ /* `minmax(min(280px, 100%), 1fr)`, а не `minmax(280px, 1fr)` — и так во всех сетках ниже. Фиксированный минимум колонки НЕ сжимается: на телефоне 360px полезной ширины остаётся 312px, и колонка в 320px растягивала страницу вбок вместе со всем сайтом. `min(…, 100%)` разрешает колонке ужаться до ширины контейнера, сохраняя прежнее поведение на всех экранах, где место есть. */ .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; } .doc-card { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); padding: 6px 22px; } .doc-card summary { cursor: pointer; font-family: var(--font-display); font-size: 1.1rem; padding: 14px 0; color: var(--parchment); list-style: none; display: flex; justify-content: space-between; align-items: center; } .doc-card summary::after { content: "❧"; color: var(--gold); transition: transform .25s; } .doc-card[open] summary::after { transform: rotate(90deg); } .doc-card p { font-size: .9rem; padding-bottom: 14px; margin: 0; } /* Карточка-ссылка на документ (главная → «Документы и соглашения»). */ .doc-link { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 20px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); color: inherit; transition: transform .25s, border-color .25s, box-shadow .3s; } .doc-link:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow); } .doc-link h3 { margin: 0; font-size: 1.1rem; } .doc-link p { margin: 0; font-size: .9rem; flex: 1; } .doc-link-more { font-size: .84rem; color: var(--gold-bright); } /* ---------- сообщество ---------- */ .studio-grid, .master-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; } .studio-featured { display: flex; align-items: center; gap: 26px; padding: 28px 32px; border-radius: 18px; border: 1px solid var(--gold); background: linear-gradient(135deg, rgba(var(--gold-rgb), .14), rgba(18, 20, 42, .65)); margin-bottom: 26px; flex-wrap: wrap; color: inherit; text-decoration: none; cursor: pointer; transition: transform .25s, box-shadow .3s; } .studio-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .studio-featured:empty { display: none; margin: 0; } .studio-featured .studio-emblem { width: 74px; height: 74px; font-size: 1.4rem; flex: none; } .studio-featured-body { flex: 1 1 260px; min-width: 220px; } .studio-featured-kicker { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 6px; } .studio-featured-body h3 { margin: 0 0 6px; font-size: 1.4rem; color: var(--parchment); } .studio-featured-body h3::after { content: " →"; color: var(--gold-bright); } .studio-featured-body p { margin: 0; color: var(--parchment-dim); font-size: .92rem; max-width: 60ch; } .studio-featured-stats { display: flex; gap: 30px; flex-wrap: wrap; } .studio-featured-stats div { text-align: center; } .studio-featured-stats b { display: block; font-size: 1.3rem; color: var(--gold-bright); font-family: var(--font-display); } .studio-featured-stats span { font-size: .74rem; color: var(--parchment-dim); text-transform: uppercase; letter-spacing: .04em; } @media (max-width: 760px) { .studio-featured { padding: 22px 20px; gap: 18px; } .studio-featured-stats { gap: 18px; justify-content: center; width: 100%; } } .studio-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; cursor: pointer; } .studio-top { display: flex; align-items: center; gap: 16px; } .studio-emblem { width: 58px; height: 58px; flex: none; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-bright); border: 1px solid var(--line); background: linear-gradient(150deg, rgba(var(--gold-rgb), .18), rgba(125, 108, 255, .16)); box-shadow: inset 0 0 16px rgba(var(--gold-rgb), .15); } .studio-top h3 { margin: 0; color: var(--parchment); } .studio-top h3::after { content: " →"; color: var(--gold-bright); } .studio-top .studio-sub { font-size: .8rem; color: var(--parchment-dim); } .studio-stats { display: flex; gap: 18px; font-size: .82rem; color: var(--parchment-dim); } .studio-stats b { color: var(--gold-bright); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; } .master-card { display: flex; flex-direction: column; gap: 10px; } .master-top { display: flex; align-items: center; gap: 14px; } .master-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #241a06; background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); box-shadow: 0 0 18px rgba(var(--gold-rgb), .3); } .master-top h3 { margin: 0; font-size: 1.15rem; } .stars { color: var(--gold); letter-spacing: 2px; font-size: .9rem; } .stars small { color: var(--parchment-dim); letter-spacing: normal; margin-left: 6px; } .master-card .btn { margin-top: auto; align-self: flex-start; } .social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; } .social-card { display: flex; flex-direction: column; gap: 8px; } .social-card h3 { display: flex; align-items: center; gap: 12px; margin: 0; } .social-card .arrow { margin-left: auto; color: var(--gold); transition: transform .2s; } .social-card:hover .arrow { transform: translateX(5px); } .social-card p { margin: 0; font-size: .9rem; } .roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; } .roadmap-col h3 { color: var(--gold-bright); display: flex; align-items: center; gap: 10px; } .roadmap-col h3::before { content: "✦"; font-size: .8rem; } /* ---------- система Desktop Magon Mind ---------- */ .feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; } .stat-tile { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); padding: 24px 16px; text-align: center; } .stat-value { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--gold-bright); text-shadow: 0 0 20px rgba(var(--gold-rgb), .3); } .stat-label { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--parchment-dim); } .stat-icon { display: block; font-size: 1.3rem; margin-bottom: 6px; } .world-stats-card { border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px; background: radial-gradient(700px 300px at 15% -30%, rgba(var(--gold-rgb), .12), transparent 60%), var(--card-solid); } .world-stats-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .world-stats-icon { width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; color: #241a06; background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); box-shadow: 0 0 18px rgba(var(--gold-rgb), .35); } .world-stats-head h3 { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; } .world-stats-meta { font-size: .8rem; color: var(--parchment-dim); } .world-stats-grid .stat-tile { padding: 18px 12px; } .world-stats-grid .stat-value { font-size: 1.6rem; } .example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; } .example-card { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); padding: 18px 20px; font-size: .92rem; color: var(--parchment-dim); } .example-mark { flex: none; color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; } .compare-table { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .compare-row { display: grid; grid-template-columns: 130px 1fr 1fr; background: var(--card); } .compare-row + .compare-row { border-top: 1px solid var(--line-soft); } .compare-row > span { padding: 16px 20px; font-size: .88rem; } .compare-label { color: var(--gold); font-family: var(--font-display); font-size: 1rem; display: flex; align-items: center; } .compare-a { color: var(--parchment); border-left: 2px solid var(--gold); background: rgba(var(--gold-rgb), .05); } .compare-b { color: var(--parchment-dim); } .compare-head span { font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; } .compare-head .compare-a, .compare-head .compare-b { color: var(--gold-bright); } /* строка «в цифрах» в герое */ .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 8px 0 30px; } .hero-stats span { font-size: .88rem; color: var(--parchment-dim); } .hero-stats b { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-bright); font-weight: 400; } /* цитата-врезка */ .pull-quote { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 20px; } .pull-quote p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-style: italic; color: var(--gold-bright); line-height: 1.5; text-shadow: 0 0 24px rgba(var(--gold-rgb), .2); } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .video-slot { aspect-ratio: 16 / 9; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--parchment-dim); background: rgba(18, 20, 42, .35); font-size: .85rem; letter-spacing: .04em; } .video-slot span { font-size: 1.7rem; color: var(--gold); opacity: .7; } .check-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; font-size: .85rem; color: var(--parchment-dim); cursor: pointer; } .check-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gold); flex: none; } /* ---------- лор-текст (полное описание системы Desktop Magon Mind) ---------- */ .toc-grid { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 920px; margin: 0 auto; } .toc-grid a { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: rgba(18, 20, 42, .5); color: var(--parchment-dim); font-size: .8rem; } .toc-grid a:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(var(--gold-rgb), .08); } .lore-block { border-left: 2px solid var(--gold); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 30px; margin-bottom: 22px; } .lore-block:last-child { margin-bottom: 0; } .lore-block h3 { margin-bottom: .5em; } .lore-block p { margin-bottom: .9em; } .lore-label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--gold); margin: 20px 0 8px; } .lore-block > .lore-label:first-child, .lore-block > p:first-of-type + .lore-label { margin-top: 20px; } .lore-block ul { margin: 0 0 .9em; padding-left: 1.1em; color: var(--parchment-dim); } .lore-block ul li { margin-bottom: .45em; } .lore-block ul li::marker { color: var(--gold); } .lore-block blockquote { margin: 16px 0 0; padding-left: 16px; border-left: 2px solid var(--line); font-style: italic; color: var(--parchment-dim); } .flow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; font-size: .85rem; } .flow-chain span:not(.arrow) { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .4); color: var(--parchment); } .flow-chain .arrow { color: var(--gold); flex: none; } .feature-list { list-style: none; counter-reset: feat; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .feature-list li { position: relative; padding-left: 46px; color: var(--parchment-dim); } .feature-list li::before { counter-increment: feat; content: counter(feat); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--gold-rgb), .12); border: 1px solid var(--line); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .95rem; } .feature-list b { color: var(--parchment); } .table-scroll { overflow-x: auto; margin-top: 10px; } .lore-block table, .doc-card table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 560px; } .lore-block th, .lore-block td, .doc-card th, .doc-card td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; } .lore-block th, .doc-card th { color: var(--gold); font-family: var(--font-display); font-weight: 400; white-space: nowrap; } .doc-card .table-scroll { margin-bottom: 14px; } .doc-card summary + p, .doc-card .table-scroll { margin-top: 4px; } /* ---------- аккаунт ---------- */ .account-shell { max-width: 460px; margin: 0 auto; } .auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; } .auth-tabs button { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: transparent; color: var(--parchment-dim); font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer; transition: all .2s; } .auth-tabs button.active { background: rgba(var(--gold-rgb), .12); border-color: var(--gold); color: var(--gold-bright); } /* ---------- состав бесплатного тарифа на регистрации ---------- */ .register-plan { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--gold-rgb), .07); } .register-plan-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .register-plan-head strong { font-size: .98rem; color: var(--gold-bright); } .register-plan-head span { font-size: .78rem; color: var(--parchment-dim); } .register-plan-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: .86rem; color: var(--parchment); } .register-plan-list li::marker { color: var(--gold); } .register-plan-foot { margin-top: 10px; font-size: .76rem; color: var(--parchment-dim); } /* ---------- подтверждение входа в приложение (link-app.html) ---------- */ /* Код читают с экрана приложения и сверяют глазами — поэтому крупно, монопропорционально и с разрядкой: так «O» и «0» не путаются даже при быстром взгляде. */ .link-code { font-family: var(--font-display), Georgia, serif; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: .16em; text-align: center; color: var(--gold-bright); font-variant-numeric: tabular-nums; margin: 4px 0 6px; word-break: break-all; } .link-who { text-align: center; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--gold-rgb), .07); font-size: .92rem; color: var(--gold-bright); } .link-result { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; font-size: 1.7rem; border: 1px solid var(--line); background: rgba(127, 194, 148, .12); color: #7fc294; } .link-result.is-bad { background: rgba(227, 168, 159, .12); color: #e3a89f; } /* Разделитель «или» между входом по паролю и входом через Google. Линии рисуем псевдоэлементами, а не border у контейнера, чтобы подпись сидела в разрыве. */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-divider span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--parchment-dim); } .btn.auth-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .btn.auth-google svg { width: 18px; height: 18px; flex: none; } /* ---------- восстановление пароля ---------- Два шага на одном экране: заявка и ввод выданного кода. Номера слева — чтобы порядок читался с одного взгляда: за кодом человек возвращается позже, и ему нужно сразу понять, что первый шаг он уже прошёл. */ .auth-forgot { margin-top: 12px; text-align: center; } .auth-forgot button { border: none; background: none; padding: 0; font: inherit; font-size: .82rem; color: var(--gold-bright); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .recovery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .recovery-head b { font-size: 1.05rem; color: var(--gold-bright); } .recovery-head button { border: none; background: none; padding: 0; font: inherit; font-size: .84rem; color: var(--parchment-dim); cursor: pointer; } .recovery-head button:hover { color: var(--parchment); } .recovery-step { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); } .recovery-step:first-of-type { border-top: 0; padding-top: 0; } .recovery-step-num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(var(--gold-rgb), .1); color: var(--gold-bright); font-size: .82rem; font-weight: 700; } .recovery-step-body { flex: 1; min-width: 0; } .recovery-step-body > b { display: block; margin-bottom: 4px; } .recovery-step-body .form-note { margin: 0 0 12px; } .recovery-sent { color: #9fe3a8 !important; margin: 10px 0 0 !important; } /* Код диктуют и переписывают — набирается он крупно и вразрядку. */ #recoveryCode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-size: .82rem; letter-spacing: .04em; color: var(--parchment-dim); } .field input, .field select, .field textarea { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .6); color: var(--parchment); font-family: var(--font-body); font-size: .95rem; outline: none; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; min-height: 92px; line-height: 1.5; } .field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .15); } .form-note { font-size: .78rem; color: rgba(202, 191, 164, .65); } /* Первый кадр страницы аккаунта: пока не отработал account.js, показываем то, что уже известно из localStorage (см. встроенный скрипт в account.html). Без этого вошедший человек на мгновение видел форму входа. Классы снимает сам account.js. */ html.dmm-known-account #authSection { display: none; } html.dmm-known-guest #cabinetSection { display: none; } /* ---------- кабинет: три колонки ---------- Слева разделы, посередине содержимое, справа сам аккаунт (профиль + карточка в экосистеме). Кабинету дана СВОЯ ширина, шире общей колонки контента (1180px): три колонки в неё влезали только за счёт середины, а середина здесь — рабочая область. */ /* --cab-gutter — боковой отступ кабинета от края экрана. Живёт переменной, потому что прилипшая лента разделов на телефоне выходит за него в обе стороны (см. ниже): ей нужно знать это число, а не повторять его цифрой в трёх местах. */ #cabinetSection .wrap { width: min(1560px, calc(100% - 48px)); --cab-gutter: 24px; } .cabinet-grid { display: grid; grid-template-columns: 288px minmax(0, 1fr) 348px; gap: 22px; align-items: start; } /* Кабинет — рабочий экран, а не витрина: «журнальные» 96px сверху уводили список разделов под сгиб, и переключатель приходилось искать прокруткой. */ #cabinetSection { padding-top: 44px; } .cabinet-side { display: flex; flex-direction: column; gap: 18px; } .cabinet-aside { display: flex; flex-direction: column; gap: 18px; } /* Липкие боковые колонки: разделы, профиль и карточка едут вместе с прокруткой, а листается только середина. max-height + overflow обязательны: у липкого элемента ВЫШЕ экрана низ становится недостижим (он прилипает верхом и дальше не двигается) — тогда до последних разделов и до кнопки «Выйти» было бы не добраться. Со своей прокруткой колонка остаётся целой на любом росте списка. */ @media (min-width: 901px) { .cabinet-side, .cabinet-aside { align-self: start; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), .35) transparent; /* Место под собственный скроллбар, чтобы содержимое не дёргалось, когда он появляется. */ padding-right: 4px; } /* Разделы липкие с той ширины, где они вообще стоят колонкой. */ .cabinet-side { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; } .cabinet-side::-webkit-scrollbar, .cabinet-aside::-webkit-scrollbar { width: 6px; } .cabinet-side::-webkit-scrollbar-thumb, .cabinet-aside::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), .3); border-radius: 999px; } /* Карточки в липких колонках не «подпрыгивают»: подъём при наведении внутри собственного скролл-контейнера выглядит дёрганием, а не откликом. */ .cabinet-side .card:hover, .cabinet-aside .card:hover { transform: none; } } /* Правая колонка липкая только там, где она действительно колонка (три колонки). */ @media (min-width: 1101px) { .cabinet-aside { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; } } /* Средние экраны: три колонки не помещаются (центру осталось бы ~270px). Аккаунт становится верхним рядом на всю ширину — двумя карточками в ряд, — а разделы остаются левой колонкой, чтобы переключатель был у самого верха, а не под девятисотпиксельным профилем. */ @media (max-width: 1100px) and (min-width: 901px) { #cabinetSection .wrap { width: min(1180px, calc(100% - 48px)); } .cabinet-grid { grid-template-columns: 300px minmax(0, 1fr); } .cabinet-aside { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: stretch; } .cabinet-aside > .card { flex: 1 1 0; min-width: 0; } .cabinet-side { grid-column: 1; grid-row: 2; } .cabinet-panels { grid-column: 2; grid-row: 2; } } /* ---------- кабинет на телефоне и планшете ---------- Колонок здесь нет, и вместо grid стоит ФЛЕКС-КОЛОНКА. Это не вкусовщина, а две поломки, которые лечатся одной строкой. 1) Ширина. Лента разделов не сжимается (кнопки flex:0 0 auto), её min-content — около 1300px. В grid этот минимум поднимался через .cabinet-side в трек `1fr` (auto-минимум трека = min-content содержимого), и весь кабинет раздувался до ширины ПК: на телефоне страница открывалась настольной вёрсткой, ужатой браузером до нечитаемого масштаба. Ни одно правило ниже при этом не помогало — они применялись, но раскладка уже была шириной 1284px. У флекс-колонки автоминимум работает только вдоль главной оси (вертикали), поперёк он равен нулю — лента честно ограничена экраном и листается своей прокруткой. 2) Липкость. `position: sticky` ограничен своим контейнером, а у grid-элемента это его собственная строка — прилипать там некуда, правило просто ничего не делало бы. У флекс-элемента контейнер общий на всю колонку, поэтому лента разделов держится под шапкой всю прокрутку кабинета. */ @media (max-width: 900px) { #cabinetSection { padding-top: 22px; } /* align-items: stretch обязателен — базовое правило ставит `start` ради колонок на ПК, а во флекс-колонке `start` означает «ширина по содержимому»: карточки кабинета съёживались бы по тексту, а лента разделов, наоборот, растягивала бы свою полосу на всю свою длину (те самые 1500px). */ .cabinet-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .cabinet-side, .cabinet-panels, .cabinet-aside > .card { min-width: 0; } /* На телефоне колонок нет, и порядок решает всё. display:contents распускает правую колонку на две отдельные карточки: профиль с балансом остаётся первым (за ним и заходят), лента разделов сразу под ним, а предпросмотр карточки уезжает вниз — иначе он один отодвигал бы переключатель разделов почти на экран. */ .cabinet-aside { display: contents; } .cabinet-aside > #profileCard { order: 1; } .cabinet-side { order: 2; } .cabinet-panels { order: 3; } .cabinet-aside > .card:not(#profileCard) { order: 4; } /* Лента разделов прилипает под шапку. Разделы длинные — одно «Оформление» на три экрана, — и без этого переключатель приходилось искать прокруткой в самый верх. Высоту шапки держит переменная --header-h (её ведёт site.js): мобильная шапка схлопывается при прокрутке, то есть число меняется на ходу. Фон почти непрозрачный и без backdrop-filter намеренно: под шапкой уже есть один слой блюра, второй на слабых телефонах заметно дёргает прокрутку. */ .cabinet-side { position: sticky; top: var(--header-h, 62px); z-index: 30; gap: 0; margin-inline: calc(var(--cab-gutter, 14px) * -1); padding: 7px var(--cab-gutter, 14px) 8px; background: rgba(7, 7, 15, .96); border-bottom: 1px solid var(--line-soft); box-shadow: 0 14px 20px -18px #000; } } /* ---------- кабинет: меню разделов ---------- Раньше кабинет был одной бесконечной лентой карточек (история → защита → миры → тарифы) и до нужного приходилось листать. Теперь слева список разделов, справа — только выбранный. Панели переключаются через display, а не через удаление из DOM: обработчики (тарифы, миры, 2FA) навешены один раз при загрузке. */ .cabinet-nav { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--card); backdrop-filter: blur(8px); } .cabinet-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--parchment-dim); font-family: var(--font-body); font-size: .95rem; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } /* Заголовок группы разделов: девять пунктов подряд читаются как список задач, с подписями «Оформление / Кошелёк / Аккаунт» глаз находит нужное сразу. */ .cabinet-nav-group { margin: 10px 0 2px; padding: 0 13px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(202, 191, 164, .5); } .cabinet-nav-group:first-child { margin-top: 2px; } .cabinet-nav-btn[hidden] { display: none; } .cabinet-nav-btn:hover { background: rgba(var(--gold-rgb), .07); color: var(--parchment); } .cabinet-nav-btn.active { background: rgba(var(--gold-rgb), .12); border-color: var(--gold); color: var(--gold-bright); } .cabinet-nav-btn .ico { width: 21px; height: 21px; flex: none; opacity: .85; } .cabinet-nav-btn.active .ico { opacity: 1; } .cabinet-nav-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .cabinet-nav-label small { font-size: .72rem; color: rgba(202, 191, 164, .55); } .cabinet-nav-btn.active .cabinet-nav-label small { color: rgba(240, 212, 146, .6); } .cabinet-panels { min-width: 0; } .cabinet-panel { display: none; flex-direction: column; gap: 26px; } .cabinet-panel.is-active { display: flex; animation: cabinet-panel-in .3s ease; } @keyframes cabinet-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cabinet-panel.is-active { animation: none; } } /* Секция «Тарифы» переезжает сюда целиком (см. placePlans в account.js): гасим её «страничные» отступы и центрирование заголовка — внутри панели это уже не отдельный экран, а раздел кабинета. */ .cabinet-panel .block { padding: 0; } .cabinet-panel .block > .wrap { width: 100%; margin: 0; } .cabinet-panel .section-head { text-align: left; max-width: none; margin: 0 0 26px; } .cabinet-panel .kicker::before { display: none; } @media (max-width: 900px) { /* Узкий экран: разделы становятся горизонтальной лентой-вкладками. Своя рамка и подложка списку здесь не нужны — фон даёт прилипшая полоса .cabinet-side. */ .cabinet-nav { flex-direction: row; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; /* Лента листается от края до края экрана (свайп у самой кромки — самый частый), а вкладки при этом начинаются от общего отступа кабинета: минус margin, плюс такой же padding. */ margin-inline: calc(var(--cab-gutter, 14px) * -1); padding-inline: var(--cab-gutter, 14px); /* Края растворяются ровно в этих отступах: сразу видно, что разделы продолжаются за экраном, а уехавшая вкладка не выглядит обрубленной. Ширина растворения совпадает с отступом намеренно — иначе дымка легла бы на первую вкладку, и та казалась бы выключенной. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cab-gutter, 14px), #000 calc(100% - var(--cab-gutter, 14px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--cab-gutter, 14px), #000 calc(100% - var(--cab-gutter, 14px)), transparent 100%); } .cabinet-nav::-webkit-scrollbar { display: none; } /* width:auto обязателен: базовое правило растягивает кнопку на 100%, и в строке каждая «вкладка» заняла бы всю ширину экрана вместо компактной ленты. min-height: 44px — размер уверенного тапа пальцем, а не попадания курсором. */ .cabinet-nav-btn { flex: 0 0 auto; width: auto; min-height: 44px; padding: 9px 15px; gap: 9px; border-radius: 999px; border-color: var(--line-soft); background: rgba(18, 20, 42, .55); font-size: .88rem; white-space: nowrap; scroll-snap-align: center; } .cabinet-nav-btn .ico { width: 19px; height: 19px; } .cabinet-nav-label small { display: none; } /* Заголовки групп в строку не влезают, но группировку сохраняем: «Оформление / Кошелёк / Аккаунт» превращаются в тонкие разделители между блоками вкладок. Текст остаётся в разметке — его по-прежнему читает скринридер. */ .cabinet-nav-group { flex: 0 0 1px; width: 1px; align-self: stretch; margin: 7px 5px; padding: 0; overflow: hidden; font-size: 0; line-height: 0; color: transparent; background: var(--line-soft); } .cabinet-nav-group:first-child { display: none; } .cabinet-panel { gap: 16px; } /* Раздел, к которому прокручивают программно, не должен уезжать под шапку и ленту. */ .cabinet-panels { scroll-margin-top: calc(var(--header-h, 62px) + 72px); } } /* ---------- кабинет: «Стиль аккаунта» ---------- Оформление личной карточки. Цвет живёт в переменных на самой карточке (--acc-1/--acc-2/--acc-glow) — так один выбор разом красит аватар, баланс и рамку, и ничего не нужно перерисовывать. */ /* Карточка профиля стала компактнее (было 30px/28px и аватар 92px): теперь под ней живёт список разделов, и высокая «витринная» карточка уводила его под сгиб. */ .profile-card { text-align: center; padding: 22px 20px; --acc-1: var(--gold-bright); --acc-2: var(--gold-deep); --acc-glow: rgba(var(--gold-rgb), .4); } .profile-card h3 { margin-bottom: .25em; } .profile-card .balance-caption { font-size: .72rem; } .profile-card[data-frame="glow"] { border-color: var(--acc-1); box-shadow: 0 0 42px var(--acc-glow); } .profile-card[data-frame="runes"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 10% 8%, var(--acc-glow), transparent 24%), radial-gradient(circle at 90% 6%, var(--acc-glow), transparent 22%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 10px); opacity: .55; } .profile-avatar { width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.7rem; color: #241a06; background: linear-gradient(140deg, var(--acc-1), var(--acc-2)); box-shadow: 0 0 34px var(--acc-glow); } .plan-badge { display: inline-block; margin-top: 8px; padding: 5px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--gold-bright); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } .profile-card .plan-badge { color: var(--acc-1); border-color: var(--acc-glow); } .balance-line { margin: 14px 0 4px; font-family: var(--font-display); font-size: 1.95rem; color: var(--gold-bright); text-shadow: 0 0 26px rgba(var(--gold-rgb), .35); } .profile-card .balance-line { color: var(--acc-1); text-shadow: 0 0 26px var(--acc-glow); } .style-block { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .style-block:first-of-type { border-top: 0; padding-top: 4px; } .style-block > b { display: block; margin-bottom: 10px; } .style-block .form-note { margin: 10px 0 0; } .style-choices { display: flex; flex-wrap: wrap; gap: 8px; } .style-choices button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .5); color: var(--parchment); font-family: var(--font-body); font-size: .92rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .style-choices button:hover { border-color: var(--gold); color: var(--gold-bright); } .style-choices button.active { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); color: var(--gold-bright); } /* Глиф крупнее текста: его выбирают глазами, а не по подписи. */ .style-choices .glyph { font-size: 1.25rem; line-height: 1; font-family: var(--font-display); } .style-accents .swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); } /* Свой цвет: пресеты рядом закрывают 90% случаев, но карточку хочется подогнать под свой мир — поэтому оба способа стоят вместе. */ .color-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; } .color-pick { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .5); font-size: .88rem; color: var(--parchment-dim); cursor: pointer; } .color-pick input[type="color"] { width: 42px; height: 30px; padding: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; cursor: pointer; } /* ---------- переключатели («Уведомления») ---------- */ .switch-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .switch-row { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background .2s; } .switch-row:hover { background: rgba(var(--gold-rgb), .06); } /* Сам чекбокс не прячем в display:none — он должен ловить фокус с клавиатуры. */ .switch-row input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: rgba(7, 7, 15, .6); transition: background .2s, border-color .2s; } .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--parchment-dim); transition: transform .2s, background .2s; } .switch-row input:checked + .switch-track { background: rgba(var(--gold-rgb), .3); border-color: var(--gold); } .switch-row input:checked + .switch-track::after { transform: translateX(18px); background: var(--gold-bright); } .switch-row input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .25); } .switch-copy { display: flex; flex-direction: column; line-height: 1.3; } .switch-copy small { font-size: .76rem; color: rgba(202, 191, 164, .6); } /* Обязательный вид уведомлений: выключатель виден, но не двигается — так честнее, чем прятать строку и делать вид, что такого уведомления не существует. */ .switch-row input:disabled + .switch-track { opacity: .55; cursor: not-allowed; } .switch-row:has(input:disabled) { cursor: default; } /* ---------- лента уведомлений в кабинете ---------- */ .notify-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .45); font-size: .88rem; } .notify-item b { color: var(--parchment); } .notify-item time { font-size: .76rem; color: rgba(202, 191, 164, .55); } .notify-item.is-new { border-left: 2px solid var(--gold); background: rgba(var(--gold-rgb), .07); } .notify-item.is-new b { color: var(--gold-bright); } .notify-item .btn { flex: none; } /* ---------- записи на игры ---------- */ .booking-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .45); } .booking-main { display: flex; flex-direction: column; gap: 3px; font-size: .86rem; color: var(--parchment-dim); min-width: 0; } .booking-main b { color: var(--parchment); font-size: .95rem; } .booking-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; } .booking-status { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .74rem; letter-spacing: .04em; color: var(--parchment-dim); white-space: nowrap; } .booking-item.status-approved { border-color: rgba(159, 227, 168, .4); } .booking-item.status-approved .booking-status { color: #9fe3a8; border-color: rgba(159, 227, 168, .5); } .booking-item.status-declined .booking-status, .booking-item.status-cancelled .booking-status { color: #e3a89f; border-color: rgba(227, 168, 159, .45); } .booking-form-row { display: flex; gap: 12px; } .booking-form-row .field { flex: 1; } @media (max-width: 760px) { .booking-item, .notify-item { flex-direction: column; } .booking-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .booking-form-row { flex-direction: column; gap: 0; } } /* ---------- предпросмотр карточки пользователя ---------- Уменьшенная копия карточки из приложения: цвета приходят инлайном (--sc-*), потому что их выбирает человек, а не тема сайта. */ .showcase-card { border-radius: 16px; border: 1px solid var(--sc-soft, var(--line)); background: radial-gradient(520px 220px at 12% -10%, var(--sc-soft, transparent), transparent 65%), var(--sc-bg, var(--ink-2)); padding: 22px 20px; overflow: hidden; } .showcase-cover { display: flex; align-items: center; gap: 16px; } .showcase-avatar { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; color: #1b1608; background: var(--sc-accent, var(--gold)); box-shadow: 0 0 26px var(--sc-soft, transparent); } .showcase-copy { min-width: 0; } .showcase-copy h4 { margin: 0 0 2px; font-size: 1.15rem; color: var(--sc-accent, var(--gold-bright)); } .showcase-copy p { margin: 0; font-size: .85rem; color: var(--parchment-dim); } .showcase-about { margin: 16px 0 14px; font-size: .9rem; color: var(--parchment-dim); white-space: pre-line; } .showcase-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .showcase-badge { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--sc-accent, var(--line)); background: var(--sc-cool, transparent); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-accent, var(--gold-bright)); } .showcase-badge.custom { text-transform: none; letter-spacing: .02em; border-style: dashed; } .showcase-contacts { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid var(--sc-cool, var(--line-soft)); } .showcase-contact { font-size: .84rem; color: var(--parchment-dim); word-break: break-word; } .showcase-contact b { color: var(--sc-accent, var(--gold)); font-weight: 600; margin-right: 6px; } .showcase-contact.muted { color: rgba(202, 191, 164, .55); } .balance-caption { font-size: .8rem; color: var(--parchment-dim); letter-spacing: .06em; text-transform: uppercase; } .topup-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .topup-presets button { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .5); color: var(--parchment); cursor: pointer; font-family: var(--font-body); font-weight: 600; transition: all .2s; } .topup-presets button:hover, .topup-presets button.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(var(--gold-rgb), .1); } .topup-row { display: flex; gap: 12px; } .topup-row input { flex: 1; } .history-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; } .history-item { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-radius: 10px; background: rgba(7, 7, 15, .45); border: 1px solid var(--line-soft); font-size: .88rem; } .history-item .amount.plus { color: #9fe3a8; } .history-item .amount.minus { color: #e3a89f; } .history-item time { color: rgba(202, 191, 164, .55); font-size: .78rem; } .plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .plan-card { display: flex; flex-direction: column; gap: 10px; } .plan-card .eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; color: var(--arcane); } .plan-card h3 { margin: 0; } .plan-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-bright); } .plan-price small { font-size: .85rem; color: var(--parchment-dim); font-family: var(--font-body); } .plan-card ul { margin: 0; padding-left: 1.05em; font-size: .86rem; color: var(--parchment-dim); flex: 1; } .plan-card ul li { margin-bottom: .45em; } .plan-card ul li::marker { color: var(--gold); } .plan-card.current { border-color: var(--gold); box-shadow: 0 0 30px rgba(var(--gold-rgb), .18); } .plan-card .btn { margin-top: 6px; } .demo-banner { margin: 0 0 30px; padding: 13px 20px; border-radius: 12px; border: 1px dashed rgba(var(--gold-rgb), .4); background: rgba(var(--gold-rgb), .06); color: var(--gold-bright); font-size: .85rem; text-align: center; } /* ---------- страница документов и соглашений (docs.html) ---------- Документ читают целиком и вдумчиво, а не проглядывают. Поэтому здесь другие правила, чем на остальном сайте: колонка текста ограничена по МЕРЕ СТРОКИ (72 знака — на длинной строке глаз теряет начало следующей), интерлиньяж крупнее, а сам текст светлее обычного --parchment-dim: серый мелкий шрифт для юридического текста — издевательство. */ .legal-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; } .legal-side { position: sticky; top: calc(var(--header-h, 84px) + 16px); } .legal-nav { display: flex; flex-direction: column; gap: 8px; } .legal-nav-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--card); color: var(--parchment-dim); font-family: var(--font-body); cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .legal-nav-btn:hover { border-color: var(--gold); color: var(--parchment); } .legal-nav-btn.active { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); color: var(--gold-bright); } .legal-nav-title { font-size: .95rem; } .legal-nav-meta { font-size: .74rem; color: rgba(202, 191, 164, .55); } .legal-nav-btn.active .legal-nav-meta { color: rgba(240, 212, 146, .6); } .legal-main { min-width: 0; padding: 34px 38px 40px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--card); backdrop-filter: blur(8px); } .legal-head { border-bottom: 1px solid var(--line-soft); padding-bottom: 20px; margin-bottom: 30px; } .legal-kicker { margin: 0 0 8px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .legal-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 8px; line-height: 1.15; } .legal-meta { font-size: .82rem; color: rgba(202, 191, 164, .6); margin: 0; } .legal-empty p { max-width: 62ch; } /* Оглавление документа. Стоит под списком документов в липкой колонке — длинное соглашение читают выборочно, и «где там про выплаты» должно решаться одним взглядом. */ .legal-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 14px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(7, 7, 15, .4); max-height: min(50vh, 460px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb), .3) transparent; } .legal-toc-title { margin: 0 0 8px; padding: 0 8px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(202, 191, 164, .5); } .legal-toc-link { padding: 7px 10px; border-radius: 8px; border-left: 2px solid transparent; font-size: .84rem; line-height: 1.35; color: var(--parchment-dim); transition: color .2s, background .2s, border-color .2s; } .legal-toc-link:hover { color: var(--parchment); background: rgba(var(--gold-rgb), .07); } .legal-toc-link.sub { padding-left: 22px; font-size: .8rem; } .legal-toc-link.active { color: var(--gold-bright); border-left-color: var(--gold); background: rgba(var(--gold-rgb), .1); } /* Сам текст документа. Разметку присылает сервер, поэтому стилизуем по тегам. */ .legal-body { max-width: 72ch; font-size: 1.02rem; line-height: 1.75; color: #ddd5c4; } .legal-body > *:first-child { margin-top: 0; } .legal-body p { margin: 0 0 1.1em; } /* Вводный абзац — крупнее остального текста: он задаёт тон документу. */ .legal-body p.legal-lead { font-size: 1.12rem; line-height: 1.7; color: var(--parchment); margin-bottom: 1.5em; } /* Заголовок раздела «прицеливается» под шапку сайта, когда к нему ведут из оглавления. */ .legal-body h2, .legal-body h3 { scroll-margin-top: calc(var(--header-h, 84px) + 20px); } .legal-body h2, .legal-body h3, .legal-body h4 { font-family: var(--font-display); color: var(--gold-bright); line-height: 1.3; margin: 1.9em 0 .6em; } .legal-body h2 { font-size: 1.4rem; } .legal-body h3 { font-size: 1.15rem; } .legal-body h4 { font-size: 1rem; letter-spacing: .02em; } .legal-body ul, .legal-body ol { margin: 0 0 1.1em; padding-left: 1.4em; } .legal-body li { margin-bottom: .5em; } .legal-body li::marker { color: var(--gold); } .legal-body a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; } .legal-body strong { color: var(--parchment); } .legal-body hr { border: none; border-top: 1px solid var(--line-soft); margin: 2em 0; } .legal-body code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); } .legal-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1em 0; display: block; } /* Таблицы из Word почти всегда шире телефона — прокручиваем их внутри себя, а не растягиваем ими страницу. */ .legal-body .doc-table-scroll { overflow-x: auto; margin: 0 0 1.2em; } .legal-body table { border-collapse: collapse; width: 100%; font-size: .92rem; } .legal-body td, .legal-body th { border: 1px solid var(--line-soft); padding: 9px 12px; vertical-align: top; } .legal-body tr:first-child td { color: var(--gold-bright); background: rgba(var(--gold-rgb), .07); } /* PDF: просмотрщик браузера во всю ширину карточки, без его серой панели (#toolbar=0). */ .legal-pdf { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); background: #fff; } .legal-pdf iframe { display: block; width: 100%; height: min(1100px, 80vh); border: 0; } /* Скан документа: показываем целиком, страницей. */ .legal-image img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-soft); display: block; } @media (max-width: 900px) { /* Список документов уходит наверх лентой — та же логика, что у разделов кабинета. */ .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .legal-side { position: static; } .legal-nav { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 2px; } .legal-nav::-webkit-scrollbar { display: none; } .legal-nav-btn { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; } .legal-nav-meta { display: none; } /* Оглавление на телефоне сворачивается в аккуратный список под лентой документов: занимать им пол-экрана перед текстом нельзя. */ .legal-toc { margin-top: 12px; max-height: 220px; } } @media (max-width: 760px) { .legal-main { padding: 20px 17px 26px; } .legal-body { font-size: 1rem; line-height: 1.7; } .legal-body h2 { font-size: 1.25rem; } .legal-pdf iframe { height: 70vh; } } /* Печать документа: на бумагу уходит только текст. Соглашение печатают и подшивают — тёмный фон, шапка и меню там не нужны, а чёрным по белому оно ещё и читается. */ @media print { .sky, .sky-scene, .site-header, .site-footer, .legal-side, .legal-toc, .header-bell, .header-pin-toggle { display: none !important; } body { background: #fff !important; color: #111 !important; } section.block { padding: 0 !important; } .section-head { display: none; } .wrap { width: 100% !important; } .legal-grid { display: block; } .legal-main { border: none; background: none; padding: 0; backdrop-filter: none; } .legal-body { max-width: none; color: #111; font-size: 11pt; line-height: 1.5; } .legal-head h1, .legal-body h2, .legal-body h3, .legal-body h4 { color: #111; } .legal-body a { color: #111; } .legal-body td, .legal-body th { border-color: #999; } } /* ---------- страница системы (system.html) ---------- Собирается из блоков, набранных в админ-панель. Типографика та же, что у документов: это тоже длинный текст, который читают, а не просматривают. */ .system-page { max-width: 860px; margin: 0 auto; } .system-head { text-align: center; margin-bottom: 40px; } .system-rune { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle at 30% 25%, rgba(var(--gold-rgb), .3), transparent 60%), var(--ink-2); font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-bright); box-shadow: 0 0 30px rgba(var(--gold-rgb), .25); } /* Знак на странице системы — то же начертание, что и на карточке. */ .system-rune[data-font="body"] { font-family: var(--font-body), sans-serif; font-size: 1.4rem; } .system-rune[data-font="serif"] { font-family: Georgia, "Times New Roman", serif; } .system-rune[data-font="mono"] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.35rem; } .system-rune[data-font="symbol"] { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", sans-serif; } .system-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 6px 0 14px; } .system-lead { font-size: 1.08rem; line-height: 1.7; color: var(--parchment); max-width: 68ch; margin: 0 auto; } .system-body { font-size: 1.02rem; line-height: 1.75; color: #ddd5c4; } .system-body h2 { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.5rem; margin: 2em 0 .6em; scroll-margin-top: calc(var(--header-h, 84px) + 20px); } .system-body p { margin: 0 0 1.1em; max-width: 72ch; } .system-body ul { margin: 0 0 1.2em; padding-left: 1.4em; max-width: 72ch; } .system-body li { margin-bottom: .5em; } .system-body li::marker { color: var(--gold); } .system-body figure { margin: 1.6em 0; } .system-body figure img, .system-body figure video { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line-soft); display: block; background: #05050b; } .system-body figcaption { margin-top: 8px; font-size: .82rem; color: rgba(202, 191, 164, .6); text-align: center; } .system-body blockquote { margin: 1.6em 0; padding: 16px 22px; border-left: 2px solid var(--gold); background: rgba(var(--gold-rgb), .06); border-radius: 0 12px 12px 0; font-size: 1.05rem; color: var(--parchment); } .system-body blockquote cite { display: block; margin-top: 8px; font-size: .84rem; font-style: normal; color: var(--parchment-dim); } .system-foot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line-soft); } @media (max-width: 760px) { .system-head { margin-bottom: 28px; } .system-body { font-size: 1rem; } .system-body h2 { font-size: 1.3rem; } .system-foot .btn { width: 100%; } } /* ---------- модал ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(4, 4, 10, .8); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.open { display: flex; } .modal { width: min(440px, 100%); background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); text-align: center; } .modal h3 { color: var(--gold-bright); } /* ---------- подвал ---------- */ .site-footer { border-top: 1px solid var(--line-soft); padding: 54px 0 40px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(7, 7, 15, .9)); } .footer-grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .footer-col h4 { color: var(--gold); font-size: 1rem; letter-spacing: .1em; } .footer-col a { display: block; color: var(--parchment-dim); font-size: .9rem; padding: 4px 0; } .footer-col a:hover { color: var(--gold-bright); } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: rgba(202, 191, 164, .55); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; } /* ---------- reveal-анимация: мягкое всплывание из прозрачности ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.22, .61, .25, 1), transform .9s cubic-bezier(.22, .61, .25, 1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .tag-marquee-track, .sky::before, .sky::after, .hero-scroll span, .scroll-cue span, .firefly { animation: none; } } /* ---------- адаптив ---------- */ @media (max-width: 760px) { /* Боковые отступы теперь задаёт padding самой шапки (ширина .wrap здесь 100%), поэтому обнулять его нельзя — кнопки прилипли бы к краям экрана. */ .site-header .wrap { flex-wrap: wrap; padding: 10px 14px; gap: 6px; } .site-nav { margin-left: 0; width: 100%; flex: 1 1 100%; justify-content: center; order: 0; } .site-header .brand { font-size: 1.14rem; letter-spacing: .05em; } .brand-sigil { width: 28px; height: 28px; } .header-quicklinks { order: 0; gap: 0; flex: none; } /* Панель уведомлений на телефоне отмеряется от ШАПКИ, а не от колокольчика. Пока точкой отсчёта был сам колокольчик, панель уезжала за правый край экрана и растягивала страницу вширь: колокольчик стоит примерно в середине строки, а панель шириной 358px, отложенная от него вправо, просто не помещалась. Ограничить её max-width было нельзя — переполнение давала не ширина, а смещение точки отсчёта. Убираем `position: relative` у колокольчика — ближайшим позиционированным предком становится сама шапка (она `sticky`), и панель растягивается между её краями. `top: 100%` при этом отсчитывается от ВЫСОТЫ шапки, поэтому панель сама едет вниз и вверх, когда шапка разворачивается и сворачивается, — без единой строки на JS. */ .header-bell { position: static; } .header-bell-panel { top: calc(100% + 8px); left: 14px; right: 14px; width: auto; max-width: none; } .header-bell-btn { width: 34px; height: 34px; } .header-quicklinks a { padding: 6px 8px; font-size: .76rem; } /* У вошедшего человека в этой ссылке стоит его имя (см. account.js), а имя бывает длинным — без ограничения оно выдавливало логотип и колокольчик за экран. */ .header-quicklinks a.nav-account { margin-left: 4px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero { padding: 70px 0 60px; } section.block { padding: 64px 0; } .compare-row { grid-template-columns: 1fr; } .compare-head { display: none; } .compare-label { padding-bottom: 0; } .compare-a::before { content: attr(data-label) " — "; color: var(--gold); font-weight: 600; } .compare-b::before { content: attr(data-label) " — "; color: var(--parchment-dim); font-weight: 600; } /* на мобильном reveal чуть короче (при быстрой прокрутке иначе видно пустое тёмное поле), но по-прежнему мягкий — плавная кривая, без рывка */ .reveal { transform: translateY(12px); transition: opacity .62s cubic-bezier(.22, .61, .25, 1), transform .62s cubic-bezier(.22, .61, .25, 1); } /* ---------- карточки: десктопный паддинг 30px 28px съедал слишком много места на узком экране (327px доступной ширины на 375px-телефоне) ---------- */ .card { padding: 20px 18px; } /* ---------- аккаунт: вход/регистрация ---------- */ #authSection { padding-top: 34px; } .auth-tabs button { padding: 12px; font-size: .88rem; } .field { margin-bottom: 13px; } /* Ровно 16px, и не rem-ами: iOS увеличивает всю страницу при фокусе в поле с текстом мельче 16px — и обратно она уже не уменьшается. Раньше здесь стояло .92rem, то есть каждый тап по полю кабинета «зумил» вёрстку. */ .field input, .field select, .field textarea { padding: 12px 14px; font-size: 16px; } .field textarea { min-height: 84px; } /* ---------- аккаунт: кабинет ---------- */ #cabinetSection { padding-top: 16px; } /* Отступ от краёв — 14px вместо 24px: на 375px-телефоне каждый пиксель ширины карточек на счету. Лента разделов читает это же число (см. --cab-gutter). */ #cabinetSection .wrap { width: calc(100% - 28px); --cab-gutter: 14px; } .cabinet-grid { gap: 14px; } .cabinet-panel { gap: 14px; } .cabinet-panel .section-head { margin-bottom: 18px; } /* История операций: на ПК это окошко на 260px со своей прокруткой, на телефоне — ловушка. Палец, начавший движение внутри списка, листает список, а не страницу, и человек упирается в «залипший» экран. Даём списку почти весь экран и запираем прокрутку внутри (overscroll-behavior), чтобы она хотя бы не уезжала дальше. */ .history-list { max-height: 60vh; overscroll-behavior: contain; } /* Карточка профиля из «витрины» становится строкой-шапкой. Витринный вид (аватар по центру, под ним имя, почта, тариф, баланс и кнопка) занимал на телефоне больше половины первого экрана — до разделов кабинета приходилось листать. Порядок в разметке не трогаем: раскладку целиком задают области. */ .profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava name plan" "ava mail mail" "cap cap sum" "out out out"; align-items: center; gap: 2px 12px; text-align: left; padding: 16px; } .profile-avatar { grid-area: ava; width: 54px; height: 54px; margin: 0; font-size: 1.3rem; } #profileName { grid-area: name; margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; } #profileEmail { grid-area: mail; overflow-wrap: anywhere; color: var(--parchment-dim); } .profile-card .plan-badge { grid-area: plan; margin: 0; justify-self: end; padding: 4px 11px; font-size: .7rem; } .profile-card .balance-caption { grid-area: cap; align-self: end; padding-top: 12px; } .profile-card .balance-line { grid-area: sum; margin: 0; justify-self: end; padding-top: 12px; font-size: 1.6rem; } #logoutBtn { grid-area: out; width: 100%; } /* Предпросмотр карточки: те же 62px аватара на 327px ширины оставляли заголовку полторы строки — ужимаем обложку, длинные слова переносим принудительно. */ .showcase-card { padding: 16px 15px; } .showcase-cover { gap: 13px; } .showcase-avatar { width: 52px; height: 52px; font-size: 1.25rem; } .showcase-copy h4 { font-size: 1.05rem; overflow-wrap: anywhere; } .showcase-about { margin: 13px 0 12px; } /* Суммы пополнения — сетка 2×2 во всю ширину: четыре кнопки в строку на телефоне превращались в четыре узкие полоски. */ .topup-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .topup-presets button { padding: 12px 10px; } /* Цвета карточки — по два на строку, чтобы не оставалось висящего третьего. */ .color-row { gap: 10px; } .color-pick { flex: 1 1 calc(50% - 5px); justify-content: space-between; } .balance-line { font-size: 1.8rem; margin: 14px 0 4px; } .demo-banner { padding: 11px 16px; font-size: .8rem; margin-bottom: 20px; } /* Строка «сумма + кнопка» (пополнение баланса И ввод кода доступа к миру — тот же .topup-row) в один ряд на телефоне превращалась в тесную полоску, где кнопка либо обрезала текст, либо цифры в поле было неудобно набирать пальцем. Раскладываем в колонку — оба элемента получают полную ширину и комфортный размер тапа. */ .topup-row { flex-direction: column; gap: 10px; } .topup-row .btn { width: 100%; } /* Транзакции (#historyList): подпись+дата слева, сумма справа — короткие значения, оставляем в один ряд, только со страховкой от переполнения. */ .history-item { flex-wrap: wrap; row-gap: 6px; } /* Миры (#worldsList): справа может быть не бейдж, а форма ввода кода — там уже тесно вплотную к названию мира. Переносим правую колонку под левую и даём ей всю ширину. */ #worldsList .history-item { align-items: flex-start !important; } #worldsList .history-item > span:last-child { flex: 1 1 100%; } .plans-grid { gap: 14px; } .plan-card .btn { width: 100%; } .modal { padding: 22px 18px; } .modal-backdrop { padding: 14px; } } /* ---------- Защита аккаунта (карточка в кабинете) ---------- Блоки разделены линией, а не карточками: это один связный раздел настроек, и дробить его на «карточки в карточке» значило бы утяжелить страницу без пользы. */ .security-block { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .security-block:first-of-type { border-top: 0; padding-top: 4px; } .security-block > b { display: block; margin-bottom: 8px; } .security-block .field { margin-bottom: 8px; } .security-block .btn { margin-right: 8px; } /* Коды восстановления: моноширинно и с возможностью выделить всё разом — их переписывают или копируют целиком, и слитый в строку список тут был бы вредительством. */ .recovery-codes { margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95rem; line-height: 1.7; letter-spacing: .06em; user-select: all; white-space: pre-wrap; overflow-x: auto; } /* QR для аутентификатора. Белое поле вокруг кода обязательно: камера ищет контраст, а на тёмном фоне сайта код без подложки часто не распознаётся. */ .totp-qr { display: inline-block; margin: 10px 0; padding: 10px; background: #fff; border-radius: 12px; line-height: 0; } .totp-qr svg { width: 208px; height: 208px; display: block; } @media (max-width: 480px) { .totp-qr svg { width: 168px; height: 168px; } } /* ============================================================ ТЕЛЕФОН: хвост правил кабинета Блок стоит в самом конце файла намеренно. Правила выше (.security-block .btn с margin-right, .style-block .form-note и прочие) идут по тексту ПОСЛЕ основного мобильного @media — при равной специфичности побеждали бы они, и кнопка «во всю ширину» вылезала бы за карточку на те самые 8px. Здесь же порядок на нашей стороне. ============================================================ */ @media (max-width: 760px) { /* Кнопка-действие раздела — во всю ширину: мимо «Сменить пароль» посреди пустой строки пальцем промахнуться легче, чем попасть. Кнопки ВНУТРИ строк списка («Оборвать» у активного входа, действие в уведомлении) правило не трогает — они не прямые дети блока. */ .style-block > .btn, .security-block > .btn, #secTwoFactorSetup .btn { width: 100%; margin: 0; } .security-block > .btn + .btn { margin-top: 8px; } .security-block .field { margin-bottom: 10px; } /* Коды восстановления переписывают руками с экрана — на узком экране им нужен перенос по строкам, а не горизонтальная прокрутка внутри карточки. */ .recovery-codes { font-size: .88rem; letter-spacing: .04em; } /* Уведомления и записи: действие уезжает под текст (см. правило flex-direction выше), но кнопка при этом не должна растягиваться на всю строку. */ .notify-item .btn, .booking-side .btn { width: auto; } .booking-side { width: 100%; align-items: center; } /* Безопасные зоны iPhone: в альбомной ориентации «чёлка» съедает край экрана. */ .site-header .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .site-footer { padding-bottom: max(40px, env(safe-area-inset-bottom)); } } /* Мелкая кнопка (.btn.small) на телефоне: 39px по высоте — это «почти попал». Ниже 44px промахи мимо «Принять» или «Оборвать» начинаются даже у аккуратного пальца, а цена промаха тут — чужая запись на игру или оборванная сессия. */ @media (max-width: 760px) { .btn.small { min-height: 44px; } } /* Совсем узкие экраны (iPhone SE, 320–430px) и модальные окна на телефоне. */ @media (max-width: 560px) { .card { padding: 18px 15px; } .cabinet-nav-btn { padding: 9px 13px; font-size: .85rem; } .profile-card .balance-line { font-size: 1.45rem; } .plan-badge { letter-spacing: .04em; } .style-choices button { font-size: .88rem; padding: 8px 12px; } /* Модал становится нижней шторкой: диалог по центру экрана телефон показывает далеко от большого пальца, а шторка приходит снизу — туда, где рука. */ .modal-backdrop { padding: 0; align-items: flex-end; } .modal { width: 100%; border-radius: 22px 22px 0 0; border-bottom: none; padding: 24px 18px max(22px, env(safe-area-inset-bottom)); animation: modal-sheet-in .28s ease; } .modal .btn { width: 100%; } @keyframes modal-sheet-in { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .modal { animation: none; } }