/* ============================================================ ГАЛАКТИКА ИКС — СТИЛИ ХАБА (v7.74) Концепция: md/galaxyx.md. ⚠️ ЭТО ОТДЕЛЬНЫЙ САЙТ, А НЕ СТРАНИЦА «АТОМИКСА». Файл намеренно НЕ подключает css/shared.css: у хаба другая шапка (нет звука, монет, комиксов, входа). Свои стили можно менять, не рискуя сломать работающую игру. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { /* ⚠️ ПРОКРУТКИ БЫТЬ НЕ ДОЛЖНО (просьба владельца). Ставим height: 100% и overflow: hidden — вся страница обязана уместиться в экран. Планеты живут в этом же экране. */ height: 100%; overflow: hidden; } body { /* ⚠️ ФОН ПОЛНОСТЬЮ ЧЁРНЫЙ (v7.81). Владелец: «Фон лендинга полностью чёрный. по углам можно сделать градиент». Было #040d18 — синеватый. Стало #000000. ⚠️ Градиенты по углам живут в .gx-stars (см. ниже), а не здесь: небо и градиенты — один слой, и разносить их по двум правилам значило бы однажды поправить один и забыть другой. */ background: #000000; color: #dff6ff; font-family: 'Inter', sans-serif; } /* ============================================================ ЛОГО-ВОДЯНОЙ ЗНАК (v7.81, ЯРКОСТЬ ИСПРАВЛЕНА В v7.82) ⚠️ ВЛАДЕЛЕЦ: «Почему логотип на https://galaxyx.ru/ такой тусклый? Он должен быть ярким». ⚠️ ПРИЧИНА ТУСКЛОСТИ БЫЛА ДВОЙНАЯ, и обе убраны: 1) opacity: 0.5 — лого отдавалось ровно наполовину прозрачным; 2) mask-image с radial-gradient, гаснущим к 78% — картинка «растворялась» по краям, поэтому даже непрозрачные части выглядели выцветшими: маска резала яркость по радиусу. ⚠️ ПОЧЕМУ Я СДЕЛАЛ ЕГО ТУСКЛЫМ. Я перестраховался: владелец просил «как бы за текстом», и я решил, что лого обязано быть еле заметным. Но «за текстом» — это про ПОЛОЖЕНИЕ в слоях (z-index ниже контента), а не про бледность. Лого может быть ярким и при этом лежать под текстом: контент всё равно перекрывает его там, где они пересекаются. ⚠️ ЧТО ОСТАЛОСЬ ОТ «ВОДЯНОГО ЗНАКА»: • position: fixed — вынут из потока, элементы отступают от краёв окна, как и просил владелец; • z-index: 0 — ПОД контентом (#gx-wrap имеет z-index 1); • pointer-events: none — клики проходят сквозь лого к планетам. Это ровно те три свойства, которые делают его фоном. Прозрачность к ним не относится и только портила вид. ============================================================ */ .gx-logo-watermark { position: fixed; top: 18px; left: 18px; /* ⚠️ УМЕНЬШЕНО НА 30% В v7.86. Владелец: «На странице https://galaxyx.ru/ нужно сделать лого на 30 процентов меньше». ⚠️ ЧТО БЫЛО НЕ ТАК С ПРЕЖНИМИ ЧИСЛАМИ. Стояло `height: 22vh` и `max-height: 240px`. На экране 1080px это 238px — почти в потолок. На 825px — 182px. То есть РАЗМЕР ЛОГО ЗАВИСЕЛ ОТ ВЫСОТЫ ЭКРАНА, хотя лого — это знак, и он должен быть одинаковым. ⚠️ ЧИСЛА ПЕРЕСЧИТАНЫ: 22vh * 0.7 = 15.4vh, 240 * 0.7 = 168px. Проверка: 1080px -> 15.4vh = 166px (было 238px, -30.2%), 825px -> 15.4vh = 127px (было 182px, -30.2%). ⚠️ Потолок оставлен, но теперь он почти не срабатывает: на самых высоких экранах (1200px+) 15.4vh = 185px > 168px, и лого фиксируется на 168px — чтобы на 4K оно не вымахало. */ height: 15.4vh; max-height: 168px; width: auto; z-index: 0; /* ⚠️ pointer-events СНЯТ В v7.88. Здесь стояло `none` — лого не ловило курсор вообще, и наведение, которое просил владелец (п. 11), было НЕВОЗМОЖНО в принципе: :hover на кнопке-родителе не срабатывает, если ребёнок игнорирует указатель. ⚠️ Клики по планетам от этого не страдают: лого лежит в левом верхнем углу (top/left 18px), а карта — в центре. Управление кликами ушло на кнопку-обёртку. */ user-select: none; /* ⚠️ БЕЗ opacity И БЕЗ mask-image. Лого яркое (v7.82). */ filter: drop-shadow(0 0 26px rgba(77, 255, 204, 0.35)); } /* ============================================================ ЛОГО: НАВЕДЕНИЕ И ПОДСКАЗКА (v7.88) ⚠️ ВЛАДЕЛЕЦ: «на наведении курсора на лого пусть оно увеличивается на 20 процентов и появляется подсказка с описанием вселенной, что там 5 планет и так далее. сам придумай». ⚠️ КНОПКА-ОБЁРТКА НЕ ЛОВИТ КЛИКИ ПО КАРТЕ. Она лежит в левом верхнем углу, а карта занимает центр. Но на всякий случай у неё НЕ растянутый хитбокс: размер задаёт само лого, а кнопка лишь обнимает его (display: inline-flex). ============================================================ */ .gx-logo-btn { position: fixed; top: 18px; left: 18px; z-index: 4; /* выше карты: подсказку не должна резать */ display: inline-flex; align-items: flex-start; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; /* ⚠️ Размер задаёт лого — кнопка не должна его растягивать. */ line-height: 0; } /* ⚠️ ЛОГО ВНУТРИ КНОПКИ БОЛЬШЕ НЕ fixed. Раньше .gx-logo-watermark сам был position: fixed. Теперь позиционируется КНОПКА, а лого — обычный элемент внутри неё: иначе при увеличении лого «уезжало» бы относительно кнопки, и подсказка повисала бы в стороне. */ .gx-logo-btn .gx-logo-watermark { position: static; top: auto; left: auto; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease; transform-origin: top left; } /* ⚠️ +20% — ровно то, что просил владелец. ⚠️ transform, А НЕ width/height: transform идёт по композитору и не пересчитывает раскладку, поэтому увеличение плавное и не дёргает соседние элементы. Это тот же принцип, что у планет (v7.86), где движение перевели с left/top на transform. */ .gx-logo-btn:hover .gx-logo-watermark, .gx-logo-btn:focus-visible .gx-logo-watermark { transform: scale(1.2); filter: drop-shadow(0 0 34px rgba(77, 255, 204, 0.6)); } .gx-logo-btn:focus-visible { outline: none; } /* Подсказка под лого */ .gx-logo-tip { position: absolute; top: calc(100% + 12px); left: 0; /* ⚠️ Ширина ограничена: без этого подсказка растянулась бы на всю ширину экрана и читалась бы как абзац статьи. */ width: 300px; padding: 12px 14px; border-radius: 12px; background: rgba(8, 18, 28, 0.97); border: 1px solid rgba(77, 255, 204, 0.45); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6), 0 0 24px rgba(77, 255, 204, 0.18); color: #cfeaf5; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0.2px; text-align: left; white-space: normal; /* ⚠️ Сбрасываем line-height: 0 от кнопки, иначе строки слипнутся в одну полосу. */ text-transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } .gx-logo-tip b { color: #7ff0d4; font-weight: 700; } .gx-logo-btn:hover .gx-logo-tip, .gx-logo-btn:focus-visible .gx-logo-tip { opacity: 1; visibility: visible; } /* ============================================================ ЗАСТАВКА ЗАГРУЗКИ (v7.88) ⚠️ z-index 9000 — ВЫШЕ ВСЕГО. Она обязана перекрыть и карту (1), и надпись в углу (3), и лого (4). Иначе на время загрузки сквозь неё просвечивали бы планеты. ============================================================ */ .gx-preload { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; /* ⚠️ Сплошной цвет, а не полупрозрачный: заставка должна скрывать страницу, а не показывать её наполовину собранной. */ background: radial-gradient(ellipse at 50% 45%, #072033 0%, #04101f 55%, #01060c 100%); transition: opacity 0.45s ease, visibility 0.45s ease; } /* ⚠️ Класс ставит JS, когда полоса дошла до конца. */ .gx-preload.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .gx-preload-logo { width: clamp(150px, 26vw, 300px); height: auto; /* ⚠️ Лёгкая пульсация: заставка «живая», ребёнок видит, что сайт работает, а не завис. */ animation: gxPreloadPulse 1.4s ease-in-out infinite; filter: drop-shadow(0 0 34px rgba(77, 255, 204, 0.42)); } @keyframes gxPreloadPulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.045); opacity: 1; } } .gx-preload-bar { width: clamp(190px, 30vw, 340px); height: 5px; border-radius: 999px; background: rgba(120, 220, 255, 0.14); overflow: hidden; } .gx-preload-fill { height: 100%; /* ⚠️ Ширина 0 в разметке и растёт из JS. Начальное значение обязано быть в CSS: если JS не запустится, полоса останется пустой, но не «прыгнет» на всю ширину. */ width: 0; border-radius: 999px; background: linear-gradient(90deg, #0368a7 0%, #0387b8 55%, #05c7d8 100%); box-shadow: 0 0 14px rgba(5, 199, 216, 0.7); transition: width 0.12s linear; } .gx-preload-text { margin: 0; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(140, 200, 230, 0.65); } /* ⚠️ УВАЖАЕМ «МЕНЬШЕ ДВИЖЕНИЯ». Пульсация и полоса отключаются, но заставка остаётся: она несёт смысл («идёт загрузка»), а не только украшает. */ @media (prefers-reduced-motion: reduce) { .gx-preload-logo { animation: none; } .gx-preload-fill { transition: none; } } /* ============================================================ ФОН-КАРТИНКА (v7.87) ⚠️ ВЛАДЕЛЕЦ: «на страницу https://galaxyx.ru/ сделай фоном fon.png». ⚠️ ПОЧЕМУ position: fixed, А НЕ background У body. Колонка #gx-wrap центрирована и ограничена 1200px, а страница не прокручивается. Фиксированный слой на весь экран гарантирует, что картинка закрывает ВСЁ окно, независимо от высоты содержимого. ⚠️ cover, А НЕ contain И НЕ repeat. Фон галактики должен заполнить экран целиком; при contain по краям остались бы чёрные полосы, при repeat — заметный шов. ⚠️ ЗАТЕМНЕНИЕ ПОВЕРХ КАРТИНКИ ОБЯЗАТЕЛЬНО. Фон галактики яркий и с деталями. Без затемнения он спорил бы с планетами и подписями: заголовок «Галактика ИКС» и названия планет читались бы хуже. Затемняю градиентом: в центре темнее (там ядро и орбиты), к краям чуть светлее — картинка видна, но не мешает. ⚠️ z-index: 0 — как у .gx-stars. Контент (#gx-wrap) имеет 1, поэтому фон гарантированно под ним. */ .gx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.62) 100%), url('/galaxyx/img/fon.png'); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; /* ⚠️ Если картинки нет — остаётся чёрный фон, и страница выглядит нормально, а не белой. */ background-color: #000000; } /* ============================================================ ЗВЁЗДНОЕ НЕБО — КАРТА ГАЛАКТИКИ (v7.86) ⚠️ ВЛАДЕЛЕЦ: «давай добавим на фон маленькие звезды, чтобы это стало похоже на карту галактики». ⚠️ БЫЛО 12 ЗВЁЗД — ЭТОГО МАЛО ДЛЯ «КАРТЫ ГАЛАКТИКИ». Прежний фон состоял из 12 точек-градиентов. На большом мониторе они читались как случайные пылинки, а не как звёздное небо. ⚠️ ПОЧЕМУ ГРАДИЕНТЫ, А НЕ КАРТИНКА ИЛИ CANVAS. • картинка — лишний файл и заметный повторяющийся узор; • canvas — это JS, лишний кадр и расход батареи на телефоне; • градиенты рисует сам браузер: ноль запросов, ноль кода, и они не мешают анимации планет (фон статичен, значит браузер может держать его в отдельном слое). ⚠️ Три «слоя» дают глубину, как на настоящей звёздной карте: 1) МНОГО МЕЛКИХ ТУСКЛЫХ — основная масса (эффект «пыли»); 2) СРЕДНИЕ ПОЯРЧЕ — на них держится рисунок; 3) НЕСКОЛЬКО КРУПНЫХ ЯРКИХ — «якорные» звёзды, за которые цепляется взгляд. ⚠️ ЦВЕТА РАЗНЫЕ (белый, голубой, тёплый) — так звёздное небо выглядит живым, а не как один цвет с разной яркостью. ⚠️ ЗВЁЗДЫ СДВИНУТЫ ОТ ЦЕНТРА К КРАЯМ. В центре — ядро и планеты; густая россыпь там спорила бы с картой. По краям плотность выше, в середине реже — это и читается как «карта». ⚠️ УГЛОВЫЕ ГРАДИЕНТЫ (v7.81) СОХРАНЕНЫ: владелец просил «фон полностью чёрный, по углам градиент». Они стоят ПОСЛЕ звёзд, чтобы свечение ложилось ПОД ними и не гасило точки. ============================================================ */ .gx-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: /* ---- СЛОЙ 1: мелкая пыль (много, тускло) ---- */ radial-gradient(1px 1px at 4% 7%, rgba(255,255,255,0.55), transparent 55%), radial-gradient(1px 1px at 9% 23%, rgba(200,225,255,0.45), transparent 55%), radial-gradient(1px 1px at 14% 41%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 7% 58%, rgba(210,230,255,0.4), transparent 55%), radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 5% 91%, rgba(200,220,255,0.45), transparent 55%), radial-gradient(1px 1px at 19% 12%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 23% 33%, rgba(215,235,255,0.4), transparent 55%), radial-gradient(1px 1px at 27% 55%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 21% 71%, rgba(200,225,255,0.45), transparent 55%), radial-gradient(1px 1px at 26% 88%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 33% 19%, rgba(210,230,255,0.45), transparent 55%), radial-gradient(1px 1px at 37% 47%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 31% 66%, rgba(200,220,255,0.45), transparent 55%), radial-gradient(1px 1px at 38% 82%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 44% 9%, rgba(215,235,255,0.4), transparent 55%), radial-gradient(1px 1px at 48% 29%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 43% 63%, rgba(210,230,255,0.4), transparent 55%), radial-gradient(1px 1px at 47% 92%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 55% 15%, rgba(200,225,255,0.45), transparent 55%), radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 53% 57%, rgba(215,235,255,0.45), transparent 55%), radial-gradient(1px 1px at 59% 74%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 56% 95%, rgba(200,220,255,0.4), transparent 55%), radial-gradient(1px 1px at 66% 11%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 69% 32%, rgba(210,230,255,0.45), transparent 55%), radial-gradient(1px 1px at 64% 51%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 71% 69%, rgba(200,225,255,0.45), transparent 55%), radial-gradient(1px 1px at 67% 86%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 76% 21%, rgba(215,235,255,0.4), transparent 55%), radial-gradient(1px 1px at 79% 44%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 74% 62%, rgba(200,220,255,0.45), transparent 55%), radial-gradient(1px 1px at 81% 79%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 77% 93%, rgba(210,230,255,0.45), transparent 55%), radial-gradient(1px 1px at 86% 8%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 89% 27%, rgba(200,225,255,0.45), transparent 55%), radial-gradient(1px 1px at 84% 49%, rgba(255,255,255,0.4), transparent 55%), radial-gradient(1px 1px at 91% 66%, rgba(215,235,255,0.45), transparent 55%), radial-gradient(1px 1px at 87% 84%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(1px 1px at 94% 95%, rgba(200,220,255,0.4), transparent 55%), radial-gradient(1px 1px at 96% 17%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 98% 53%, rgba(210,230,255,0.4), transparent 55%), radial-gradient(1px 1px at 3% 47%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 17% 95%, rgba(200,225,255,0.4), transparent 55%), radial-gradient(1px 1px at 42% 74%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 62% 24%, rgba(215,235,255,0.4), transparent 55%), radial-gradient(1px 1px at 82% 36%, rgba(255,255,255,0.45), transparent 55%), radial-gradient(1px 1px at 93% 42%, rgba(200,220,255,0.4), transparent 55%), /* ---- СЛОЙ 2: средние звёзды (рисунок) ---- */ radial-gradient(1.5px 1.5px at 11% 33%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1.5px 1.5px at 24% 14%, rgba(190,225,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 36% 68%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 49% 22%, rgba(255,235,210,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 61% 84%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 73% 39%, rgba(200,230,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 85% 57%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1.5px 1.5px at 95% 88%, rgba(215,235,255,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 6% 68%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 29% 91%, rgba(190,220,255,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 52% 47%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,240,215,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 90% 31%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 16% 81%, rgba(205,230,255,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 45% 96%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1.5px 1.5px at 68% 61%, rgba(215,235,255,0.75), transparent 60%), /* ---- СЛОЙ 3: крупные «якорные» звёзды ---- */ radial-gradient(2.5px 2.5px at 15% 19%, rgba(255,255,255,0.95), transparent 65%), radial-gradient(2.5px 2.5px at 82% 24%, rgba(200,235,255,0.9), transparent 65%), radial-gradient(2.5px 2.5px at 41% 57%, rgba(255,245,225,0.9), transparent 65%), radial-gradient(2.5px 2.5px at 67% 71%, rgba(255,255,255,0.95), transparent 65%), radial-gradient(2.5px 2.5px at 8% 79%, rgba(205,230,255,0.85), transparent 65%), radial-gradient(2.5px 2.5px at 94% 62%, rgba(255,255,255,0.9), transparent 65%), radial-gradient(2.5px 2.5px at 56% 8%, rgba(230,240,255,0.9), transparent 65%), radial-gradient(2.5px 2.5px at 33% 35%, rgba(255,255,255,0.85), transparent 65%), radial-gradient(3px 3px at 22% 63%, rgba(255,255,255,0.9), transparent 65%), radial-gradient(3px 3px at 76% 88%, rgba(200,230,255,0.85), transparent 65%), /* ---- УГЛОВЫЕ ГРАДИЕНТЫ (v7.81) ---- */ radial-gradient(900px 620px at 0% 0%, rgba(77,255,204,0.14), transparent 70%), radial-gradient(900px 620px at 100% 0%, rgba(90,120,255,0.13), transparent 70%), radial-gradient(900px 620px at 0% 100%, rgba(150,70,200,0.12), transparent 70%), radial-gradient(900px 620px at 100% 100%, rgba(30,150,180,0.12), transparent 70%), /* ⚠️ ПОДЛОЖКА СТАЛА ПРОЗРАЧНОЙ В v7.87. Здесь стояло `#000000` — сплошной чёрный цвет последним слоем. Он ПЕРЕКРЫВАЛ бы фон fon.png целиком: картинка просто не была бы видна, хотя лежит ниже. ⚠️ Теперь звёзды — только СЛОЙ ПОВЕРХ фона: они рисуют точки и угловые свечения, а чёрный цвет даёт .gx-bg. */ transparent; } /* ============================================================ ОБЩАЯ РАСКЛАДКА — ВСЁ В ОДИН ЭКРАН ⚠️ ВЫСОТА СТРАНИЦЫ = 100vh, ВНУТРИ — КОЛОНКА БЕЗ ПРОКРУТКИ. Владелец: «всё должно умещаться на экране без каких либо прокруток». Компоновка: шапка (авто) → заголовок (авто) → карта (растягивается) → подпись (авто). Карта забирает ВСЁ оставшееся место и сжимается сама, поэтому на низком экране она просто станет меньше, а не вытолкнет подпись за край. ⚠️ min-height: 0 у карты — ОБЯЗАТЕЛЕН. Без него flex-элемент не сжимается меньше своего содержимого, и колонка всё равно вылезет за экран (это известная ловушка flexbox). ============================================================ */ #gx-wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 0 16px; max-width: 1200px; margin: 0 auto; } /* ---------------- ШАПКА УБРАНА (v7.81) ---------------- ⚠️ ВЛАДЕЛЕЦ: «Убираем всё вверху». Здесь были правила .gx-header, .gx-logo, .gx-logo-mark, .gx-logo-text и .gx-header-link. Все они удалены вместе с разметкой: оставить «мёртвый» CSS значило бы однажды вернуть шапку и получить чужое оформление. Ссылка «Играть в Атомикс» не потерялась — она переехала в футер (.gx-footer-link). */ /* ---------------- ЗАГОЛОВОК — СПРАВА (v7.81) ---------------- ⚠️ ВЛАДЕЛЕЦ: «В правой части подпись "Галактика ИКС / Открой неизвестное"». ⚠️ ПОЧЕМУ align-items: flex-end, А НЕ justify-content. Заголовок и подпись должны стоять ДРУГ ПОД ДРУГОМ у правого края, а не в одну строку по центру. flex-end по поперечной оси (column) прижимает их вправо, text-align: right выравнивает текст. ⚠️ НЕ ВЫСОКИЙ. Раньше заголовок съедал треть экрана, и карта уезжала вниз — владелец просил «всё это дело должно быть выше». */ /* ---------------- ЗАГОЛОВОК — СПРАВА (v7.81, ПРИЖАТ К ЭКРАНУ В v7.82) ---------------- ⚠️ ВЛАДЕЛЕЦ: «Галактика ИКС Открой неизвестное на странице https://galaxyx.ru/ нужно прижать к правой части экрана». ⚠️ ПОЧЕМУ align-items: flex-end БЫЛО НЕДОСТАТОЧНО. Он прижимает заголовок к правому краю СВОЕГО РОДИТЕЛЯ — то есть к #gx-wrap. А у #gx-wrap стоит max-width: 1200px и margin: 0 auto: на экране 1920px блок занимает 1200px по центру, и его правый край отстоит от края ЭКРАНА на 360px. Заголовок «прижимался вправо» внутри блока и всё равно висел в середине экрана. ⚠️ ПОЧЕМУ НЕ УБРАТЬ max-width У #gx-wrap. Этот предел нужен КАРТЕ: система планет построена на процентах, и без ограничения она растянется на всю ширину широкого монитора и станет плоской. Ограничивать надо не всю колонку, а только заголовок. ⚠️ РЕШЕНИЕ: отрицательные поля в размер боковых отступов. Заголовок «выходит» из блока #gx-wrap ровно настолько, насколько блок отступил от краёв окна, и прижимается к настоящему краю экрана. Считаем через calc с половинной разницей: (100% ширины окна − ширина блока) / 2 − боковой отступ блока. ⚠️ max() нужен для узких экранов: когда блок уже окна (ширина окна меньше 1200px), разница отрицательна, и без max() заголовок уехал бы за левый край. На узком экране отступ просто остаётся обычным. ⚠️ И width: auto с margin-left: auto — чтобы блок заголовка не растягивался на всю ширину, иначе text-align: right работал бы внутри растянутого блока и «прижатие» снова потерялось бы. */ .gx-hero { /* ⚠️ ПЕРЕДЕЛАНО В v7.86: ТЕПЕРЬ ЭТО НАСТОЯЩИЙ ПРАВЫЙ ВЕРХНИЙ УГОЛ. Владелец: «Надпись Галактика ИКС Открой неизвестное нужно перенести в правый верхний угол. сейчас она почти по середине». Он выбрал вариант «в самый угол экрана, поверх всего». ⚠️ ПОЧЕМУ ОТКАЗАЛИСЬ ОТ ПОТОКА (было flex + отрицательные поля). Прежняя схема прижимала надпись к правому краю РОДИТЕЛЯ — но у #gx-wrap стоит `max-width: 1200px; margin: 0 auto`. На экране владельца 1630px колонка занимает 1200px по центру, её правый край отстоит от края ЭКРАНА на 215px. Отрицательные поля `max(0px, calc((100vw - 1200px)/2 - 16px))` возвращали 199px, но: • блок .gx-hero имел width: auto и сам стоял по центру строки; • на 1920px зазор всё равно оставался; • и главное — надпись жила В ПОТОКЕ, то есть между логотипом и картой, и взгляд читал её как элемент колонки, а не как угловую подпись. ⚠️ position: fixed вынимает её из потока и ставит в угол ОКНА, независимо от ширины колонки. Это ровно тот приём, что уже применён к логотипу (.gx-logo-watermark) — две угловые подписи теперь живут по одним правилам: лого слева сверху, надпись справа сверху. ⚠️ z-index: 3 — ПОВЕРХ КАРТЫ. Владелец выбрал «поверх всего». У #gx-wrap z-index: 1, у планет внутри не выше 5, но они лежат в другом контексте наложения, поэтому 3 достаточно. ⚠️ pointer-events: none — надпись декоративная, клики сквозь неё должны доходить до планет (иначе она перекрыла бы орбиту 3). ⚠️ Место в потоке освободилось: .gx-map получит эти пиксели и станет чуть крупнее — карта от этого только выигрывает. */ position: fixed; top: 14px; right: 18px; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding: 0; margin: 0; width: auto; } /* ---------------- ЗАГОЛОВОК В СТИЛЕ ЛОГОТИПА (v7.87) ---------------- ⚠️ ВЛАДЕЛЕЦ: «сделай надписи "галактика ИКС" и "открой неизвестно" в стиле космических шрифтов и сделай цвета в стиле логотипа». ⚠️ ЦВЕТА ВЗЯТЫ ИЗ САМОГО ЛОГОТИПА, А НЕ ПРИДУМАНЫ. Я разобрал galaxyx/img/logo.png (tools/logo-colors.js) и посчитал преобладающие цвета. Результат: это ПЛАВНЫЙ ГРАДИЕНТ от тёмно-синего к ярко-голубому: #043787 (11.2%) -> #033777 -> #073797 -> #034788 -> #023669 -> #035897 -> #0368a7 -> #0387b8 -> #0498c7 -> #05c7d8 ⚠️ Прежний заголовок был БИРЮЗОВЫЙ (#4dffcc) — это цвет Атомикса с goatomix.ru, а НЕ цвет логотипа Галактики. Владелец просил именно «в стиле логотипа». ⚠️ КАК СДЕЛАН ГРАДИЕНТ ПО ТЕКСТУ. `background-clip: text` + прозрачный цвет букв — стандартный приём. ⚠️ `-webkit-text-fill-color: transparent` нужен ДОПОЛНИТЕЛЬНО: одного `color: transparent` в WebKit-браузерах не хватает, буквы остались бы залитыми фоном. ⚠️ `text-shadow` с обрезкой по тексту НЕ РАБОТАЕТ (тень рисуется за буквами и перекрывает градиент). Поэтому свечение сделано через `filter: drop-shadow` на самом элементе — он применяется к уже нарисованному тексту. */ .gx-title { /* ⚠️ «КОСМИЧЕСКИЙ ШРИФТ». Orbitron уже подключён и это классический футуристический шрифт. Усиливаю «космичность» приёмом: широкий разряд между буквами + тонкие штрихи. ⚠️ Почему НЕ подключаю новый шрифт: каждый шрифт — это отдельный запрос к Google Fonts и задержка показа. Orbitron уже загружен для остальных надписей хаба. */ font-family: 'Orbitron', sans-serif; font-size: clamp(18px, 2.6vw, 28px); font-weight: 900; letter-spacing: 6px; text-transform: uppercase; /* Градиент из логотипа: тёмно-синий слева -> голубой справа */ background-image: linear-gradient(100deg, #023669 0%, #043787 18%, #0368a7 42%, #0387b8 62%, #0498c7 80%, #05c7d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* ⚠️ Свечение — через drop-shadow, а не text-shadow: text-shadow нарисовался бы ПОД градиентом и был бы не виден. ⚠️ ТОНКАЯ БЕЛАЯ ОБВОДКА (v7.88). ВЛАДЕЛЕЦ: «у надписи Галактика ИКС открой неизвестное, сделай белую обводку тонкую». ⚠️ ПОЧЕМУ ЧЕТЫРЕ drop-shadow, А НЕ -webkit-text-stroke. text-stroke рисует обводку ПОВЕРХ заливки, и с background-clip: text она съела бы градиент — буквы стали бы белыми. Четыре тени со смещением в 1px дают контур ВОКРУГ буквы, не трогая её цвет. Это стандартный приём для градиентного текста. ⚠️ Смещение 1px — это и есть «тонкая». 2px уже выглядели бы жирной рамкой и спорили с градиентом. ⚠️ Тени идут ПЕРВЫМИ в списке filter, свечение — после: порядок в filter = порядок наложения, и белый контур обязан лечь под свечение, а не поверх него. */ filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.92)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 0 14px rgba(4, 152, 199, 0.75)) drop-shadow(0 0 34px rgba(3, 104, 167, 0.5)); } /* Буквы «ИКС» — светлее, как ближняя к зрителю часть логотипа. ⚠️ Свой градиент, а не сплошной цвет: так надпись читается как единый логотип, а не как две разные строки. */ .gx-title b { font-weight: 900; background-image: linear-gradient(100deg, #0387b8 0%, #04a8cf 45%, #05e0f0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .gx-slogan { font-family: 'Orbitron', sans-serif; font-size: clamp(9px, 1.1vw, 12px); font-weight: 700; letter-spacing: 5px; text-transform: uppercase; /* ⚠️ Тот же градиент, но приглушённый: подпись второго плана. Оставляю её в цветах логотипа, чтобы обе надписи читались как одна композиция. */ background-image: linear-gradient(100deg, #0368a7 0%, #0387b8 55%, #04a8cf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* ⚠️ Белая обводка и здесь (v7.88): владелец назвал обе надписи одной парой — «у надписи Галактика ИКС открой неизвестное». Те же четыре тени по 1px, что у .gx-title. */ filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.92)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.92)) drop-shadow(0 0 10px rgba(3, 135, 184, 0.6)); } /* ---------------- ФУТЕР (v7.81, КРУПНЕЕ В v7.84) ---------------- ⚠️ ВЛАДЕЛЕЦ: «В футере делаем стандартные надписи. + в левой части кнопки "Контакты" и "Партнёрам"», затем: «Футер и его содержимое на странице galaxyx.ru сделай на 30 процентов крупнее. И убери от туда "Играть в Атомикс"». ⚠️ ЧТО ЗНАЧИТ «НА 30 ПРОЦЕНТОВ КРУПНЕЕ». Увеличены ВСЕ размеры футера, а не только шрифт: иначе кнопки остались бы мелкими и выбивались из строки. Считаем от прежних значений: • шрифт кнопок 12px → 16px (12 × 1.3 = 15.6 ≈ 16) • высота кнопок 28px → 36px (28 × 1.3 = 36.4 ≈ 36) • отступы кнопок 14px → 18px • копирайт 11px → 14px • вертикальные отступы футера 6/8px → 8/10px ⚠️ Ширина рамки (1px) НЕ увеличена: при 1.3px она выглядела бы размытой на обычных экранах, а разница незаметна. ⚠️ ССЫЛКА «Играть в Атомикс» убрана — правило .gx-footer-link тоже удалено, чтобы не осталось мёртвого стиля. */ .gx-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0 10px; border-top: 1px solid rgba(77, 255, 204, 0.14); } .gx-footer-left { display: flex; align-items: center; gap: 10px; } /* ============================================================ КНОПКИ СКАЧИВАНИЯ ПРИЛОЖЕНИЯ В ФУТЕРЕ (v7.88) ⚠️ ВЛАДЕЛЕЦ: «внизу справа от кнопки партнеры, на странице galaxyx.ru нужно добавить кнопки для скачивания приложения, кнопки сделай 1 в 1 как на странице goatomix.ru/ и эффекты тоже скопируй». ⚠️ ПОЧЕМУ ПРАВИЛА СКОПИРОВАНЫ, А НЕ ПОДКЛЮЧЁН css/landing.css. На главной «Атомикса» эти стили лежат в css/landing.css. Хаб его НЕ подключает (у хаба свой файл — см. пояснение в index.html: landing.css тянет за собой раскладку лендинга, шапку и канвас). Поэтому разметка, скопированная «1 в 1», осталась бы БЕЗ ОФОРМЛЕНИЯ — обычный текст и голые SVG. ⚠️ Значения перенесены ДОСЛОВНО, включая easing-кривую cubic-bezier(0.34, 1.56, 0.64, 1): она даёт лёгкий «отскок» при наведении, и именно её владелец называет «эффектами». Менять числа нельзя — тогда «1 в 1» перестанет быть правдой. ⚠️ ЕДИНСТВЕННОЕ ОТЛИЧИЕ — имя .gx-store-badges. Оно нужно, чтобы обнулить auto-отступы: на лендинге .store-badges растянут flex-колонкой на всю высоту (margin-top/bottom: auto), а в футере хаба это растянуло бы строку футера. Сами бейджи (.store-badge и вложенные) оформлены теми же классами. ============================================================ */ .gx-store-badges { /* ⚠️ Гасим лендинговые auto-отступы: здесь бейджи стоят в строке футера, а не в колонке на всю высоту. */ margin: 0; padding: 0; gap: 10px; } .store-badge { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 11px; background: rgba(10, 22, 34, 0.72); border: 1px solid rgba(77, 255, 204, 0.22); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34); cursor: not-allowed; /* приложение ещё не вышло */ user-select: none; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease; } /* Увеличение и подсветка при наведении — тот же эффект, что на главной. Числа не менять: это и есть «эффекты 1 в 1». */ .store-badge:hover, .store-badge:focus-visible { transform: scale(1.08) translateY(-2px); background: rgba(14, 34, 50, 0.9); border-color: rgba(77, 255, 204, 0.75); box-shadow: 0 0 22px rgba(77, 255, 204, 0.38), 0 6px 20px rgba(0, 0, 0, 0.42); outline: none; } .store-icon { width: 26px; height: 26px; flex-shrink: 0; color: #eaf4fb; /* для Apple-логотипа (currentColor) */ } .store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: nowrap; } .store-top { font-size: 8px; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(140, 200, 230, 0.62); font-family: 'Inter', sans-serif; } .store-name { font-size: 14px; font-weight: 700; color: #eaf4fb; font-family: 'Inter', sans-serif; } /* Подсказка «Приложение в разработке». Появляется НАД бейджем. ⚠️ В футере это важно вдвойне: под бейджами проходит край окна, и подсказка снизу была бы срезана. */ .store-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); padding: 6px 12px; border-radius: 8px; background: rgba(8, 18, 28, 0.97); border: 1px solid rgba(77, 255, 204, 0.55); color: #4dffcc; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; font-family: 'Inter', sans-serif; box-shadow: 0 0 16px rgba(77, 255, 204, 0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; z-index: 30; } /* Стрелочка вниз */ .store-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(77, 255, 204, 0.55); } .store-badge:hover .store-tip, .store-badge:focus-visible .store-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ⚠️ «ХОЛОСТЫЕ» КНОПКИ. Владелец: «Кнопки пока просто холостые, дальше скажу что там внутри должно быть». То есть вид готов, действие появится позже. Поэтому они кликабельны (не disabled), но ничего не делают. */ .gx-footer-btn { padding: 0 18px; height: 36px; display: inline-flex; align-items: center; border: 1px solid rgba(77, 255, 204, 0.4); border-radius: 10px; background: rgba(77, 255, 204, 0.06); color: #9ff5dd; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .gx-footer-btn:hover { border-color: rgba(77, 255, 204, 0.9); color: #ffffff; box-shadow: 0 0 22px rgba(77, 255, 204, 0.28); } .gx-footer-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .gx-footer-copy { font-size: 14px; color: rgba(160, 200, 215, 0.6); } /* ============================================================ СИСТЕМА: ЯДРО И ЭЛЛИПТИЧЕСКИЕ ОРБИТЫ ⚠️ СИСТЕМА — НЕ КВАДРАТ, А ПРЯМОУГОЛЬНИК. Орбиты теперь эллипсы и заметно плоские: самая широкая занимает 92% ширины и 56% высоты. Держать квадрат незачем — половина высоты ушла бы в пустоту. Прямоугольник позволяет карте занять всю ширину и при этом остаться невысокой. ⚠️ Карта растягивается (flex: 1) и берёт столько места, сколько осталось. min-height: 0 обязателен — см. пояснение у #gx-wrap. ============================================================ */ .gx-map { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; } .gx-system { position: relative; /* ⚠️ СИСТЕМА ЗАБИРАЕТ ВСЮ ДОСТУПНУЮ ШИРИНУ — ЭТО И ЕСТЬ РОСТ ПЛАНЕТ. Владелец: «планеты должны быть в три раза крупнее». Просто умножить проценты нельзя: планеты наложатся (зазор −10%) и закроют Ядро. Размер планеты в пикселях считается так: диаметр_орбиты(%) × size(%) × ШИРИНА_СИСТЕМЫ Значит растить надо ВСЮ систему — тогда взаимное расположение не меняется, а планеты крупнеют. ⚠️ Отступ сверху ужат со 190px до 120px, пропорция поднята с 1.6 до 2.1. Замерено: на 1920×1080 пропадало 464px ширины (систему ограничивала ВЫСОТА, хотя ширина 1888px), на 1366×768 — 409px. Теперь система упирается в ШИРИНУ экрана — это физический предел, дальше расти некуда. Пропорция 2.1 при габарите эллипсов 90% × 52% даёт запас на подписи и на то, что подсказка висит выше планеты. */ width: min(100%, calc((100vh - 120px) * 2.1)); height: min(calc((100vh - 120px)), calc(100% )); aspect-ratio: 2.1; max-height: 100%; margin: 0 auto; background: radial-gradient(ellipse at 50% 50%, rgba(40, 70, 140, 0.20) 0%, rgba(20, 40, 90, 0.10) 45%, transparent 72%); } /* ---------------- ОРБИТЫ ---------------- ⚠️ КАЖДАЯ ОРБИТА — ПОВЁРНУТЫЙ ЭЛЛИПС. Форма: width/height в % от системы, наклон через rotate. ⚠️ ЧИСЛА ЗДЕСЬ И В galaxyx.js (ORBITS) ОБЯЗАНЫ СОВПАДАТЬ. CSS рисует линию, JS кладёт на неё планеты. Разойдутся — планеты сойдут с линии, и это сразу видно. Связь проверяется тестом tests/test-v773-orbit-math.js. ⚠️ Размеры в ДВА раза больше полуосей из JS: A=21 -> 42%. */ .gx-orbit { position: absolute; left: 50%; top: 50%; pointer-events: none; /* клики ловят только планеты */ /* ⚠️ ЯВНЫЙ z-index У ОРБИТ — ИНАЧЕ ОНИ ЗАКРЫВАЮТ ЯДРО. Без z-index элементы сравниваются по порядку в разметке, а орбиты идут ПОСЛЕ ядра — и перекрывали его. Ядро получает z-index 5 (см. .gx-core-slot), орбиты 1-3: ближняя ниже, дальняя выше, чтобы планеты дальней орбиты проходили ПЕРЕД ближними — так читается глубина. */ z-index: 1; } /* ⚠️ НАКЛОНЫ БЛИЗКИ ДРУГ К ДРУГУ (−8° / −5.5° / −3°) — И ЭТО НЕ ОШИБКА. Первый вариант был −18/+14/−7: при РАЗНЫХ наклонах эллипсы пересекаются, и планеты накладывались (зазор −4.5% у пары Атомикс/Биомикс — проверено расчётом). При близких наклонах орбиты остаются вложенными, как круги, но выглядят наклонёнными. «Глубину» даёт разница полуосей, а не углов. */ /* ⚠️ ВЫСОТЫ ОРБИТ ПЕРЕСЧИТАНЫ В v7.77 — ЯДРО СТАЛО БОЛЬШЕ ПЛАНЕТ. Владелец: «ядро должно быть больше чем планеты, и пусть планеты облетают ядро так, чтобы не пересекаться с ним». ⚠️ B И A НЕЗАВИСИМЫ. Раньше все орбиты держались на B = A * 0.575, и поднять орбиту 2 ради крупного ядра было нельзя: орбита 3 упиралась, и поиск решений заканчивался ничем. Теперь каждая высота задана отдельно. Замерено: орбиты 1-2 разнесены на 4.22%, 2-3 на 4.00%, система занимает 91% ширины. ⚠️ Высота орбиты 3 = 78%, а не 84%: высота системы равна 47.6% её ширины, и при 84% габарит планет (47.75%) превышал высоту системы — подписям не оставалось места. При 78% свободно 26px на сторону. ⚠️ Числа обязаны совпадать с ORBITS в galaxyx/js/galaxyx.js: width = 2*A, height = 2*B. Связь проверяют тесты. */ /* ⚠️ РАЗМЕРЫ ОБНОВЛЕНЫ В v7.84: ОРБИТЫ СТАЛИ ОВАЛЬНЫМИ. Владелец: «Орбиты планет сейчас круглые. Они должны быть овальными. Сделай так, что бы планеты не пересекались с ядром. И пусть орбиты планет идут по всей ширине экрана». ⚠️ ЕДИНИЦЫ ШИРИНЫ И ВЫСОТЫ РАЗНЫЕ — ЗДЕСЬ ЛЕГКО ОШИБИТЬСЯ. width в CSS считается от ШИРИНЫ родителя, height — от ВЫСОТЫ. А полуоси в JS (ORBITS) заданы обе в процентах ШИРИНЫ системы. Поэтому формулы РАЗНЫЕ: width = 2 * A / 100 (ширина системы = 100 ед.) height = 2 * B / 47.62 * 100 (высота системы = 47.62 ед.) где 47.62 = 100 / 2.1 из aspect-ratio системы. ⚠️ ПЕРВЫЙ ЗАХОД БЫЛ НЕВЕРНЫМ: я написал height: 2B% (42 / 74.6 / 107.4) по аналогии с width. Это дало вертикальные полуоси В ДВА РАЗА больше нужных, и орбита 3 вылезла за систему (51.1 ед. против высоты системы 47.6). Поймано инструментом tools/check-css-units.js, который переводит CSS обратно в единицы JS и сравнивает с ORBITS. ⚠️ Как получались прежние верные числа (v7.77, B=24): height стоял 48% — это 2*24/47.62*100 = 100.8... нет: 48% -> 22.86 ед., полуось 11.43, а B=24 в единицах ширины даёт 24.0. То есть прежние числа были согласованы ИНАЧЕ: B тогда трактовался как процент ВЫСОТЫ, и 24% высоты = 11.43 ед. ⚠️ Я сменил трактовку B на «процент ширины» (так удобнее сравнивать с ядром и радиусом планеты) — поэтому и формула height стала другой. Тест test-v773-orbit-math.js читает ORBITS и CSS и проверяет связь — он и есть защита от расхождения. ⚠️ ЧИСЛА ОБЯЗАНЫ совпадать с ORBITS в js/galaxyx.js. CSS рисует линию, JS кладёт на неё планеты. Разойдутся — планеты сойдут с линии. */ .gx-orbit[data-orbit="1"] { width: 26.2%; height: 25.1%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 1; } .gx-orbit[data-orbit="2"] { width: 54.8%; height: 52.6%; transform: translate(-50%, -50%) rotate(-5.5deg); z-index: 2; } .gx-orbit[data-orbit="3"] { width: 84.4%; height: 80.8%; transform: translate(-50%, -50%) rotate(-3deg); z-index: 3; } /* ⚠️ Контейнер планет НЕ поворачивается вместе с орбитой. Если бы он наследовал поворот, планеты вместе с подписями наклонились бы — подписи читались бы косо. Планеты ставит JS по формуле повёрнутого эллипса, поэтому контейнеру поворот не нужен. */ .gx-orbit-planets { position: absolute; inset: 0; } /* Кольцо орбиты — тонкий пунктир. ⚠️ dashed, а не сплошная: сплошные линии на тёмном фоне выглядят как мишень и спорят с планетами. */ .gx-orbit-ring { position: absolute; inset: 0; border: 1px dashed rgba(150, 190, 255, 0.18); border-radius: 50%; } /* ---------------- ЯДРО ---------------- ⚠️ ЖАЛОБА «ЯДРО В ЦЕНТРЕ НЕ ОТОБРАЖАЕТСЯ» ИМЕЛА ДВЕ ПРИЧИНЫ, и обе исправлены. Первая (v7.75) — противоречие трёх свойств: width: 13%; height: 21%; aspect-ratio: 1; ⚠️ `aspect-ratio: 1` требует, чтобы ширина РАВНЯЛАСЬ высоте, но заданы ДВА разных процента, и они считаются от РАЗНЫХ сторон системы: width — от ширины, height — от высоты. Система широкая (пропорция 2.1), поэтому 13% ширины и 21% высоты давали разные пиксели (183 против 141 на ноутбуке) — браузер разрешал этот конфликт непредсказуемо. ⚠️ ВТОРАЯ ПРИЧИНА, ГЛАВНАЯ (v7.76) — ЯДРУ НЕ ХВАТАЛО МЕСТА. Ядро стоит в центре, и его диаметр ограничен расстоянием от центра до ближайшей точки орбиты 1 минус радиус планеты на ней. При прежней орбите 1 (B=11.5% высоты) это расстояние давало ядру всего 33px на экране 1920x1080 — меньше подписи под ним. Поэтому орбита 1 отодвинута от центра (B 11.5 -> 16), и ядру стало 97px. Замер проверяется тестом, а не на глаз. ⚠️ Размер идёт ОТ ВЫСОТЫ: ядро — круг, а высота это меньшая сторона системы, поэтому она и задаёт диаметр. `aspect-ratio: 1` сам делает ширину равной высоте. */ .gx-core-slot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* ⚠️ ЯДРО УМЕНЬШЕНО В v7.87: 25.51% -> 12%. Это ЦЕНА роста планет, согласованная с владельцем. ⚠️ ЗДЕСЬ БЫЛО 25.51% — И ЭТО БОЛЬШЕ НЕВОЗМОЖНО. Ядро занимало 12.15 единиц из 47.62 (четверть высоты системы). Планеты сидят НА орбитах и каждая занимает 2·r по высоте. При росте планет на 25% ядро 25.51% не оставляет места: расчёт (tools/why-zero-40.js) показал нехватку 6.06 единиц. ⚠️ ЧТО ИЗМЕНИЛОСЬ ПО СМЫСЛУ. Раньше ядро было БОЛЬШЕ планет (229px против 174px на 1920×1080) — владелец просил это в v7.77. Теперь наоборот: радиус ядра 2.86, планеты 2.63 / 3.16 / 2.81. ⚠️ Владелец выбрал это осознанно, когда спросил про рост планет: вариантов было два — «планеты крупные, ядро меньше» или «ядро главное, планеты растут слабо». Выбран первый. ⚠️ ЗАМЕР (tools/verify-balance.js): ядро : 12% высоты = 2.86 единиц ширины зазор с ядром : 0.50 / 6.50 / 13.57 высота 3-й : 44.11 из 47.62 — влезает Проверяется tests/test-v787-hub.js. */ height: 11%; width: auto; aspect-ratio: 1; /* ⚠️ z-index ВЫШЕ, ЧЕМ У ОРБИТ (у них 1 и 2). Без явных z-index ядро и орбиты сравнивались по порядку в разметке, а орбиты идут ПОСЛЕ ядра — и перекрывали его. */ z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .gx-core-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* ============================================================ ⚠️ ПРАВИЛА ЯДРА-ВИДЕО УДАЛЕНЫ В v7.84 — ЯДРО СТАЛО SVG. Владелец: «Давай заменим ядро. Сделай его таким же как на странице goatomix.ru. На ней в центре есть ядро которое запускает режим выбора игры. Вот возьми его и сделай там точно так же». Здесь жили .gx-core-video (v7.81, «ядро замени на yadro.webm») и .gx-core-img с @keyframes gxCorePulse (свечение). После замены ядра на SVG ни один из этих классов НЕ УПОМИНАЕТСЯ ни в JS, ни в разметке: проверено поиском по файлам (0 вхождений). Это был мёртвый CSS, а мёртвый CSS опасен тем, что его правят «на всякий случай» и он путает следующего читателя. ⚠️ ЧТО ОСТАВЛЕНО И ПОЧЕМУ. Файлы galaxyx/img/yadro.webm и planets/core.png со диска НЕ удалены: это чужой материал, и удалять его без просьбы нельзя. Если владелец вернёт видеоядро — правила легко восстановить из истории git (коммит с v7.81). ⚠️ Свечение ядра из gxCorePulse переехало в .gx-core-btn (см. ниже) и работает уже на SVG. ============================================================ */ /* ⚠️ ЭТО СВЕЧЕНИЕ ЯДРА, А НЕ ПУЛЬСАЦИЯ РАЗМЕРА — и имя теперь своё. Раньше блок назывался gxCorePulse, и ТАКОЕ ЖЕ имя было объявлено НИЖЕ для SVG-ядра: оно меняет scale и opacity. ⚠️ В CSS при двух @keyframes с ОДНИМ именем работает ПОСЛЕДНИЙ, а первый молча исчезает. То есть это свечение НЕ РАБОТАЛО ВООБЩЕ: картинка и видео ядра анимировались не свечением, а масштабом. Ошибка тихая — браузер не жалуется, правило просто игнорируется. ⚠️ Поймано тестом tests/test-v784-owner-points.js, который считает объявления по имени (дубль = провал). */ @keyframes gxCoreGlowPulse { 0%, 100% { filter: drop-shadow(0 0 20px rgba(120, 200, 255, 0.45)); } 50% { filter: drop-shadow(0 0 34px rgba(150, 220, 255, 0.75)); } } .gx-core-label { position: absolute; top: 100%; margin-top: 2px; font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(190, 215, 255, 0.75); white-space: nowrap; } /* ---------------- ПЛАНЕТА ---------------- ⚠️ ПОЛОЖЕНИЕ ЗАДАЁТ JS ЧЕРЕЗ transform: translate() В ПИКСЕЛЯХ (v7.86). Прежде здесь стояли left/top в процентах — см. пояснение ниже, почему от них отказались. ⚠️ ПОЧЕМУ ПРОЦЕНТЫ В translate ЗАПРЕЩЕНЫ (и это НЕ ошибка v7.73). Проценты в translate считаются от РАЗМЕРА САМОГО ЭЛЕМЕНТА, а не от родителя. Планета 64px при сдвиге «50%» уезжала на 32px вместо 122px — вся система падала в центр. Поэтому JS пишет ПИКСЕЛИ, а не проценты: `translate(-50%, -50%) translate(Xpx, Ypx)`. ⚠️ ПОЧЕМУ left/top БЫЛИ ХУЖЕ ДЛЯ ПЛАВНОСТИ (просьба владельца «сделать движение планет более плавными», v7.86). `left` и `top` — свойства РАСКЛАДКИ. Их изменение заставляет браузер каждый кадр пересчитывать положение элемента в потоке, потом заново рисовать слой. При 60 кадрах это 60 пересчётов раскладки в секунду — именно отсюда «ступеньки» на слабых машинах. `transform` идёт по КОМПОЗИТОРУ: браузер двигает уже готовый слой, не трогая раскладку. Это и есть стандартный способ плавной анимации. ⚠️ translate(-50%, -50%) ЗДЕСЬ ОСТАЁТСЯ И ВАЖЕН. Он центрирует планету на своей точке (JS задаёт её центру). Второй translate с пикселями добавляет смещение ПО ОРБИТЕ. Порядок важен: сначала центрирование, потом смещение в системе координат планеты — при таком порядке повороты не накапливаются. */ .gx-planet { position: absolute; left: 50%; top: 50%; /* ⚠️ Смещение по орбите дописывает JS в --dx/--dy (пиксели). Значения по умолчанию 0 нужны для первого кадра: до вызова place() планета стоит ровно в центре орбиты, а не в углу. */ transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)); /* ⚠️ will-change подсказывает браузеру заранее поднять планеты в отдельные слои. Без этого он может «передумать» на середине анимации и пересобрать слои — это заметный рывок. */ will-change: transform; /* ⚠️ Размер — в % от РОДИТЕЛЬСКОЙ ОРБИТЫ (--size из данных). Один и тот же процент на дальней орбите даёт большую планету в пикселях, поэтому в данных у дальних орбит он меньше. */ width: calc(var(--size) * 1%); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; } .gx-planet-art { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* ---------------- ВРАЩЕНИЕ ВОКРУГ СВОЕЙ ОСИ (v7.78) ---------------- Владелец: «планеты и ядро немного вращались дополнительно вокруг своей оси». ⚠️ ЗАЧЕМ ОТДЕЛЬНАЯ ОБЁРТКА, А НЕ АНИМАЦИЯ НА КАРТИНКЕ. На .gx-planet-img уже висит transform: scale(1.12) при наведении с плавным переходом (см. ниже). Если бы вращение шло той же CSS-анимацией на том же элементе, оно перебило бы увеличение при наведении: transform у элемента один, и выигрывает тот, кто объявлен позже. Отдельная обёртка разводит две вещи: обёртка вращается, картинка внутри увеличивается. ⚠️ Угол ставит JS (см. applySpin в galaxyx.js), а не @keyframes. Так вращение встаёт на паузу вместе с орбитами, когда открыта карточка планеты, и гасится системной настройкой «меньше движения». ⚠️ will-change: transform — подсказка браузеру вынести слой на GPU. Вращение идёт постоянно, и без этого браузер перерисовывал бы картинку каждый кадр. */ .gx-spin { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; will-change: transform; /* ⚠️ Вращаем вокруг СВОЕГО ЦЕНТРА. По умолчанию transform-origin и так 50% 50%, но здесь это важно подчеркнуть: если центр сместится, планета будет описывать круг вместо вращения. */ transform-origin: 50% 50%; } .gx-planet-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); transition: transform 0.25s ease, filter 0.25s ease; } .gx-planet-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--planet) 26%, transparent) 0%, transparent 68%); pointer-events: none; transition: opacity 0.25s ease; opacity: 0.85; } .gx-planet-fallback { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.2em; line-height: 1; } .gx-planet-art.is-fallback .gx-planet-fallback { display: flex; } /* ---------------- ПОДПИСЬ ПЛАНЕТЫ ---------------- ⚠️ ВЫНЕСЕНА ИЗ ПОТОКА (absolute) и висит ПОД планетой. В потоке она растянула бы кнопку и сломала круговое расположение. */ .gx-planet-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(220, 235, 255, 0.82); white-space: nowrap; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); pointer-events: none; } /* ============================================================ ПОДСКАЗКА ПРИ НАВЕДЕНИИ (просьба владельца) ⚠️ ЖИВЁТ ВНУТРИ ПЛАНЕТЫ, а не отдельным элементом на странице: тогда она едет вместе с планетой по орбите, и не нужно считать её положение отдельно для каждой из пяти планет и каждого угла. ⚠️ opacity + visibility, А НЕ display: none. С display нельзя сделать плавное появление — элемент исчезает мгновенно. visibility убирает его из обхода табом и от кликов. ============================================================ */ .gx-planet-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--planet) 55%, transparent); border-radius: 12px; background: rgba(6, 20, 34, 0.97); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 24px color-mix(in srgb, var(--planet) 28%, transparent), 0 10px 26px rgba(0, 0, 0, 0.6); white-space: nowrap; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 10; } /* Стрелочка вниз, к планете */ .gx-planet-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(6, 20, 34, 0.97); } .gx-planet:hover .gx-planet-tip, .gx-planet:focus-visible .gx-planet-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .gx-tip-name { font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ffffff; } .gx-tip-science { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--planet); } .gx-tip-go { margin-top: 3px; padding: 2px 8px; border-radius: 6px; background: linear-gradient(135deg, #4dffcc, #38d9c0); color: #06231f; font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .gx-tip-soon { margin-top: 3px; font-size: 10px; color: rgba(255, 215, 120, 0.92); } /* ⚠️ Подсказка у КРАЙНИХ планет уходит за экран. У планеты у левого края подсказку сдвигаем вправо, у правого — влево. Класс ставит JS при отрисовке, по углу планеты. */ .gx-planet.tip-left .gx-planet-tip { left: 0; transform: translateX(0) translateY(4px); } .gx-planet.tip-left:hover .gx-planet-tip, .gx-planet.tip-left:focus-visible .gx-planet-tip { transform: translateX(0) translateY(0); } .gx-planet.tip-left .gx-planet-tip::after { left: 22px; transform: none; } .gx-planet.tip-right .gx-planet-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); } .gx-planet.tip-right:hover .gx-planet-tip, .gx-planet.tip-right:focus-visible .gx-planet-tip { transform: translateX(0) translateY(0); } .gx-planet.tip-right .gx-planet-tip::after { left: auto; right: 22px; transform: none; } /* ---------------- РАБОЧАЯ ПЛАНЕТА ---------------- ⚠️ ВЫДЕЛЕНА ЯВНО. Из пяти планет работает одна — ребёнок должен найти её мгновенно: ярче свечение, пульсирующее кольцо, белая подпись. ⚠️ Тот же урок, что в комиксах (v7.58): там доступный выпуск отличался только прозрачностью 0.62 против 1, и владелец сказал «выглядит почти точно также как и те которые не доступны». */ .gx-planet.is-ready .gx-planet-img { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--planet) 75%, transparent)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); } .gx-planet.is-ready .gx-planet-glow { opacity: 1; } .gx-planet.is-ready .gx-planet-label { color: #ffffff; } .gx-planet.is-ready::after { content: ''; position: absolute; inset: -14%; border: 2px solid color-mix(in srgb, var(--planet) 80%, transparent); border-radius: 50%; animation: gxRing 3.2s ease-in-out infinite; pointer-events: none; } @keyframes gxRing { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.07); } } /* ============================================================ АТОМ ВОКРУГ КАЖДОЙ ПЛАНЕТЫ (v7.84) ⚠️ ВЛАДЕЛЕЦ: «сделай вокруг каждой планеты анимацию с ядрами как у центрального ядра». ⚠️ ЧТО ИМЕННО КОПИРУЕТСЯ. У центрального ядра по орбитам бегут электроны. Здесь то же самое, но вокруг планеты: два наклонённых эллипса с точкой-электроном на каждом. Разметку добавляет planetHtml() в js/galaxyx.js. ⚠️ ПОЧЕМУ ПСЕВДОЭЛЕМЕНТЫ ::before/::after, А НЕ ЕЩЁ ОДИН SVG. Планет семь, и у каждой был бы свой SVG — семь лишних узлов с анимацией. Псевдоэлементы рисуются тем же CSS, не требуют разметки и не мешают клику. ⚠️ pointer-events: none ОБЯЗАТЕЛЕН. Без него орбиты перекрывали бы саму планету, и клик по ней не срабатывал бы. ⚠️ z-index: -1 — орбиты ИДУТ ЗА планетой. Иначе эллипс рисовался бы поверх картинки и выглядел бы как царапина на шаре. */ .gx-planet-art::before, .gx-planet-art::after { content: ''; position: absolute; left: 50%; top: 50%; width: 168%; height: 46%; margin-left: -84%; margin-top: -23%; border: 1px solid color-mix(in srgb, var(--planet, #4dffcc) 55%, transparent); border-radius: 50%; pointer-events: none; z-index: -1; } .gx-planet-art::before { transform: rotate(28deg); } .gx-planet-art::after { transform: rotate(-28deg); } /* ⚠️ ЭЛЕКТРОН — точка, бегущая по эллипсу. Сам эллипс не вращается (иначе он выглядел бы как юла): вращается его «несущая» — точка на конце радиуса. Приём тот же, что у центрального ядра, только там SVG. */ .gx-planet-art { position: relative; } .gx-planet-electron { position: absolute; left: 50%; top: 50%; width: 168%; height: 46%; margin-left: -84%; margin-top: -23%; pointer-events: none; z-index: -1; animation: gxElectron 6s linear infinite; } .gx-planet-electron::after { content: ''; position: absolute; left: 50%; top: 0; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--planet, #4dffcc); box-shadow: 0 0 6px var(--planet, #4dffcc); } /* Второй электрон: другая наклонность и обратное направление */ .gx-planet-electron.e2 { transform: rotate(-28deg); animation-duration: 9s; animation-direction: reverse; } .gx-planet-electron.e1 { transform: rotate(28deg); } @keyframes gxElectron { from { transform: rotate(28deg) rotate(0deg); } to { transform: rotate(28deg) rotate(360deg); } } /* ⚠️ Для второго электрона ключевые кадры ДРУГИЕ: у него в transform уже есть rotate(-28deg), и общий keyframes его бы перебил — электрон прыгнул бы на чужую орбиту. */ .gx-planet-electron.e2 { animation-name: gxElectron2; } @keyframes gxElectron2 { from { transform: rotate(-28deg) rotate(0deg); } to { transform: rotate(-28deg) rotate(360deg); } } /* ⚠️ УВЕЛИЧЕНИЕ ПРИ НАВЕДЕНИИ — РОВНО 20% (v7.84). Владелец: «при наведении курсора на планету, она увеличивалась на эти самые 20 процентов» — то есть на столько же, на сколько планеты уменьшены. ⚠️ Было scale(1.12) — 12%, это не совпадало с просьбой. ⚠️ Отдельный класс .gx-planet-img, а не transform на .gx-planet: на родителе висит translate(-50%, -50%), и scale его перебил бы — планета сползла бы с орбиты. */ .gx-planet:hover .gx-planet-img, .gx-planet:focus-visible .gx-planet-img { transform: scale(1.2); } .gx-planet:focus-visible { outline: none; } .gx-planet:focus-visible .gx-planet-glow { opacity: 1; } /* ⚠️ ЗАКРЫТЫЕ ПЛАНЕТЫ БЫЛИ СЛИШКОМ БЛЕДНЫМИ. Владелец: «почему они на столько прозрачные?» — и был прав: opacity 0.68 на КАРТИНКЕ плюс 0.4 на свечении складывались, и планета выглядела полупрозрачной, а не приглушённой. ⚠️ Замерено: сами картинки плотные (средняя альфа 249-253 из 255), то есть бледность давал ИМЕННО CSS, а не вырезка фона. ⚠️ Приглушаем ТЕПЕРЬ ПО-ДРУГОМУ: не прозрачностью, а ЯРКОСТЬЮ. `filter: brightness()` делает планету темнее, но НЕПРОЗРАЧНОЙ — она остаётся плотным шаром. Прозрачность же намекала на «выключенность», хотя планета просто ещё не открыта. Свечение тоже поднято: оно и есть признак «здесь что-то есть». */ .gx-planet:not(.is-ready) .gx-planet-img { opacity: 1; filter: brightness(0.62) saturate(0.75) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); } .gx-planet:not(.is-ready) .gx-planet-glow { opacity: 0.55; } .gx-planet:not(.is-ready) .gx-planet-label { color: rgba(210, 225, 245, 0.78); } /* ============================================================ ЯДРО-КНОПКА И АНИМАЦИЯ АТОМА (v7.84) ⚠️ ВЛАДЕЛЕЦ: «Давай заменим ядро. Сделай его таким же как на странице goatomix.ru... На ней в центре есть ядро которое запускает режим выбора игры. Вот возьми его и сделай там точно так же» и «При нажатии на это ядро, должно открываться модальное окно в котором можно будет выбрать планету». ⚠️ АНИМАЦИИ СКОПИРОВАНЫ С ГЛАВНОЙ (css/landing.css): те же длительности и кривые, что у .play-btn. Если на главной скорости поменяют, здесь надо поменять тоже — иначе два ядра одной вселенной будут крутиться по-разному. */ /* Кнопка ядра: прозрачная, размер задаёт .gx-core-slot */ .gx-core-btn { width: 100%; height: 100%; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; /* ⚠️ pointer-events: auto ОБЯЗАТЕЛЕН. У родителя .gx-core-slot стоит pointer-events: none (ядро не должно мешать карте), и без этого кнопка не получала бы кликов. */ pointer-events: auto; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .gx-core-btn:hover { transform: scale(1.07); } .gx-core-btn:active { transform: scale(0.97); } .gx-core-btn:focus-visible { outline: 2px solid rgba(77, 255, 204, 0.8); outline-offset: 6px; border-radius: 50%; } .gx-core-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* Орбиты с электронами внутри ядра */ .gx-core-btn .gx-orbit { transform-origin: 110px 110px; animation: gxOrbitSpin 12s linear infinite; } .gx-core-btn .gx-orbit2 { animation-duration: 16s; animation-direction: reverse; } .gx-core-btn .gx-orbit3 { animation-duration: 20s; } /* При наведении орбиты ускоряются — как на главной */ .gx-core-btn:hover .gx-orbit { animation-duration: 5s; } .gx-core-btn:hover .gx-orbit2 { animation-duration: 7s; } .gx-core-btn:hover .gx-orbit3 { animation-duration: 9s; } @keyframes gxOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Ядро в центре пульсирует */ .gx-core-btn .gx-core-dot { animation: gxCorePulse 2.4s ease-in-out infinite; transform-origin: 110px 110px; } @keyframes gxCorePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } } /* Кольцо-волна расходится от ядра */ .gx-core-btn .gx-ring { animation: gxRingPulse 3s ease-in-out infinite; } @keyframes gxRingPulse { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } /* ============================================================ ОКНО ВЫБОРА ПЛАНЕТЫ (v7.84) Владелец: «должно открываться модальное окно в котором можно будет выбрать планету. У каждой планеты короткое описание». ⚠️ Затемнение накрывает ВЕСЬ экран (position: fixed, inset: 0): это модальное окно, пока оно открыто — карта недоступна. */ .gx-picker { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: gxFadeIn 0.18s ease-out; } .gx-picker[hidden] { display: none; } @keyframes gxFadeIn { from { opacity: 0; } to { opacity: 1; } } .gx-picker-box { width: 100%; /* ⚠️ v7.88: 560px -> 640px. Планеты в списке стали вдвое крупнее (64px), и в прежней ширине строке не хватало места: имя, наука и описание сжимались, описание рвалось по буквам. */ max-width: 640px; /* ⚠️ Ограничение по высоте с прокруткой: планет пять, и на низком экране список не должен упираться в край. */ max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 20px 16px; border: 1px solid rgba(120, 220, 255, 0.22); border-radius: 18px; background: linear-gradient(180deg, rgba(10, 30, 40, 0.98) 0%, rgba(6, 20, 28, 0.99) 100%); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 70px rgba(77, 255, 204, 0.08); animation: gxPickerIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes gxPickerIn { from { transform: scale(0.94) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .gx-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gx-picker-title { font-family: 'Orbitron', sans-serif; font-size: 19px; font-weight: 900; letter-spacing: 3px; color: #4dffcc; text-shadow: 0 0 18px rgba(77, 255, 204, 0.5); } .gx-picker-close { width: 34px; height: 34px; border: 1px solid rgba(120, 220, 255, 0.25); border-radius: 10px; background: transparent; color: rgba(200, 230, 245, 0.7); font-size: 20px; line-height: 1; cursor: pointer; transition: all 0.2s ease; } .gx-picker-close:hover { color: #ffffff; border-color: rgba(77, 255, 204, 0.8); } .gx-picker-sub { margin: 6px 0 14px; font-size: 12.5px; color: rgba(160, 205, 225, 0.7); } /* Список планет */ .gx-picker-list { display: flex; flex-direction: column; gap: 8px; } /* Строка планеты: и ссылка, и кнопка выглядят одинаково */ .gx-pick { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid rgba(120, 220, 255, 0.16); border-radius: 13px; background: rgba(255, 255, 255, 0.02); color: #dff6ff; font-family: 'Inter', sans-serif; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .gx-pick.is-ready:hover, .gx-pick.is-ready:focus-visible { border-color: color-mix(in srgb, var(--pick-color) 70%, transparent); background: rgba(77, 255, 204, 0.08); outline: none; } /* ⚠️ Закрытая планета НЕ кликабельна: disabled у кнопки уже блокирует клик, а курсор это подтверждает. */ .gx-pick.is-soon { cursor: default; opacity: 0.72; } /* ⚠️ ЗНАЧОК ПЛАНЕТЫ В ОКНЕ ВЫБОРА И В КАРТОЧКЕ — КАРТИНКОЙ (v7.85). Владелец: «замени иконки на изображения соответсвующих планет. И при нажатии на плнеты тоже». ⚠️ .gx-pick-icon и .gx-card-emoji теперь ОБЁРТКИ: внутри либо , либо запасной эмодзи. Раньше это были текстовые элементы с font-size — теперь размер задаёт картинка. */ .gx-pick-icon, .gx-card-emoji { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .gx-icon-img { display: block; width: 100%; height: 100%; object-fit: contain; /* ⚠️ Свечение цветом планеты — как у планет на карте. */ filter: drop-shadow(0 0 12px color-mix(in srgb, var(--pick-color, #4dffcc) 60%, transparent)); } .gx-card-emoji .gx-icon-img { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--planet) 70%, transparent)); } /* ⚠️ Запасной эмодзи СКРЫТ, когда картинка загрузилась. Его включает onerror в JS — тогда же на обёртку вешается .is-fallback. */ .gx-icon-emoji { display: none; line-height: 1; } .gx-pick-icon.is-fallback .gx-icon-emoji, .gx-card-emoji.is-fallback .gx-icon-emoji { display: block; } /* ⚠️ Обёртка без картинки — сразу эмодзи. Правило осталось для карточки планеты (.gx-card-emoji); у окна выбора таких планет больше нет с v7.88 — Астроксик и Кодикс из списка убраны. */ .gx-pick-icon.is-fallback, .gx-card-emoji.is-fallback { font-size: 24px; } .gx-card-emoji.is-fallback { font-size: 34px; } .gx-pick-icon { font-size: 48px; line-height: 1; /* ⚠️ РАЗМЕР УДВОЕН В v7.88 (было 32px). Владелец: «Остальные планеты сделать в 2 раза крупнее». ⚠️ Менять ширину БЕЗ высоты нельзя: картинки планет квадратные (256×256), но если одна окажется другой пропорции, список «поедет» — поэтому обе величины равны. ⚠️ font-size задаёт размер ЗАПАСНОГО эмодзи (на случай, если картинка не загрузится). Держим его близко к картинке, чтобы строки выглядели одинаково. */ width: 64px; height: 64px; text-align: center; } .gx-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .gx-pick-name { font-size: 15px; font-weight: 700; color: var(--pick-color, #ffffff); } .gx-pick-science { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: rgba(150, 200, 225, 0.75); } /* ⚠️ КОРОТКОЕ ОПИСАНИЕ — прямая просьба владельца. Обрезается в JS (pickerNote), здесь только оформление. */ .gx-pick-note { font-size: 12px; color: rgba(175, 215, 235, 0.72); } .gx-pick-status { flex-shrink: 0; padding: 5px 11px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(255, 215, 120, 0.12); color: rgba(255, 215, 120, 0.9); } .gx-pick-status.is-ready { background: linear-gradient(135deg, #4dffcc, #38d9c0); color: #06231f; } /* «Меньше движения»: гасим анимации ядра и окна */ @media (prefers-reduced-motion: reduce) { .gx-core-btn .gx-orbit, .gx-core-btn .gx-core-dot, .gx-core-btn .gx-ring, .gx-planet-electron, .gx-picker, .gx-picker-box { animation: none; } } /* Телефоны: окно почти во весь экран, описание убираем — на узком экране оно занимает три строки и мешает списку. */ @media (max-width: 600px) { .gx-picker { padding: 10px; } .gx-picker-box { padding: 16px 14px 12px; } .gx-picker-title { font-size: 16px; letter-spacing: 2px; } .gx-pick { padding: 9px 11px; gap: 9px; } .gx-pick-note { display: none; } /* ⚠️ На телефоне значок меньше — и картинка, и запасной эмодзи. Высоту меняю вместе с шириной: иначе картинка вылезет за бокс. ⚠️ v7.88: было 26px, стало 42px — тоже удвоение к прежним 20/26, просто с поправкой на узкий экран. Держим правило ЗДЕСЬ (после базового): медиазапрос не добавляет специфичности, и стоящий выше базовый .gx-pick-icon его перебил бы — на телефоне планеты остались бы крупными и вылезли за карточку. */ .gx-pick-icon { font-size: 32px; width: 42px; height: 42px; } } /* ---------------- ПОДПИСЬ ПОД КАРТОЙ ---------------- */ .gx-map-hint { flex: 0 0 auto; text-align: center; font-size: 11.5px; color: rgba(180, 200, 230, 0.6); padding: 2px 0 6px; } /* ============================================================ КАРТОЧКА ПЛАНЕТЫ ⚠️ Модальное окно: ребёнок не теряет карту из виду. Вращение на это время останавливается (JS). ============================================================ */ .gx-card { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 10, 20, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; } .gx-card.is-open { opacity: 1; } .gx-card[hidden] { display: none; } .gx-card-box { position: relative; width: 100%; max-width: 400px; padding: 20px 22px 18px; border: 1px solid color-mix(in srgb, var(--planet) 55%, transparent); border-radius: 18px; background: linear-gradient(180deg, rgba(10, 30, 48, 0.98), rgba(6, 18, 32, 0.98)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 60px color-mix(in srgb, var(--planet) 30%, transparent), 0 24px 60px rgba(0, 0, 0, 0.65); transform: translateY(12px) scale(0.97); transition: transform 0.2s ease; } .gx-card.is-open .gx-card-box { transform: translateY(0) scale(1); } .gx-card-close { position: absolute; top: 6px; right: 12px; width: 32px; height: 32px; border: 0; background: none; color: rgba(200, 220, 245, 0.7); font-size: 24px; line-height: 1; cursor: pointer; transition: color 0.2s ease; } .gx-card-close:hover { color: #fff; } .gx-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* ⚠️ .gx-card-emoji теперь ОБЁРТКА КАРТИНКИ (v7.85), размер задан выше общим правилом. Здесь только размеры для случая с картинкой. */ .gx-card-emoji { width: 40px; height: 40px; } .gx-card-name { font-family: 'Orbitron', sans-serif; font-size: 19px; letter-spacing: 2px; color: #eafff9; margin-bottom: 2px; } .gx-card-science { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--planet); } .gx-card-about { font-size: 13px; line-height: 1.5; color: rgba(210, 230, 250, 0.82); margin-bottom: 14px; } .gx-card-unlock { padding: 10px 12px; border-radius: 10px; background: rgba(255, 200, 90, 0.08); border: 1px dashed rgba(255, 200, 90, 0.35); font-size: 12.5px; line-height: 1.4; color: rgba(255, 215, 120, 0.92); text-align: center; } .gx-card-btn { display: block; padding: 12px 18px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--planet) 90%, white), var(--planet)); color: #06231f; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .gx-card-btn:hover { transform: translateY(-1px); box-shadow: 0 0 28px color-mix(in srgb, var(--planet) 55%, transparent); } /* ============================================================ АДАПТИВ ⚠️ ПРОКРУТКИ НЕ ДОБАВЛЯЕМ НИ НА ОДНОМ РАЗМЕРЕ. Вместо перестройки в колонку — просто уменьшаем шрифты и отступы: система и так в процентах и сжимается сама. ============================================================ */ @media (max-width: 720px) { .gx-title { letter-spacing: 3px; } .gx-slogan { letter-spacing: 2px; } .gx-planet-label { font-size: 7.5px; } .gx-core-label { font-size: 8px; letter-spacing: 2px; } .gx-map-hint { font-size: 10.5px; } /* ⚠️ v7.81: правило .gx-header отсюда убрано вместе с шапкой. Вместо неё ужимаем лого-водяной знак и футер. */ /* ⚠️ opacity УБРАН В v7.82: владелец просил ЯРКОЕ лого. Ужимаем только размер — на телефоне крупный лого закрыл бы половину карты. ⚠️ ПЕРЕСЧИТАНО В v7.86 вслед за базовым размером: было 18vh, стало 18 * 0.7 = 12.6vh. Иначе на телефоне лого осталось бы ПРЕЖНИМ, и уменьшение на 30% до него не дошло бы. */ .gx-logo-watermark { height: 12.6vh; } /* ⚠️ Футер ужимаем ОТ НОВЫХ значений (v7.84): базовый размер вырос на 30%, и прежние 26px/11px были бы мельче, чем на больших экранах. Здесь — те же 30% от базовых 36px/16px, то есть примерно 28px/13px. */ .gx-footer { gap: 8px; } .gx-footer-btn { height: 30px; padding: 0 14px; font-size: 13px; } /* ⚠️ ПОДСКАЗКИ НА ТЕЛЕФОНЕ НЕ НУЖНЫ: там нет наведения курсором, а тап сразу открывает карточку с теми же сведениями. Иначе подсказка перекрывала бы половину карты. */ .gx-planet-tip { display: none; } /* ⚠️ МНОЖИТЕЛЬ РАЗМЕРА ПЛАНЕТ УБРАН В v7.77 — ЭТО ИСПРАВЛЕНИЕ. Раньше здесь стояло calc(var(--size) * 1.7%): планеты на телефоне увеличивались в 1.7 раза. Задумано было для доступности (чтобы попасть пальцем), но у множителя был скрытый изъян: он увеличивал ТОЛЬКО планеты, а ядро и орбиты — нет. Пока ядро было мелким (76px), это сходило с рук. Теперь ядро крупное (46px на телефоне) и стоит в центре — замерено, что при множителе 1.9 планеты ВРЕЗАЮТСЯ в ядро (зазор −3.42%). ⚠️ Вариант «уменьшить ядро на телефоне» не годится: тогда ломается главное требование владельца «ядро больше планет» (ядро 23px против планеты 51px). ⚠️ И сам множитель задачу не решал: замерено 55px при минимуме 44px, то есть он «проходил» проверку доступности, но ценой наложения на ядро. Теперь взаимное расположение одинаково на всех экранах: система сжимается целиком, пропорции сохраняются. ⚠️ Цена: на телефоне планеты 25-29px — меньше 44px WCAG. Это принятое решение: планеты на телефоне открываются тапом по карточке, а главное действие — «Играть» на Атомиксе, и он крупнее всех. См. PROJECT.md, раздел про ядро больше планет. */ .gx-planet-label { margin-top: 0; } } @media (max-width: 420px) { /* ⚠️ v7.84: правило .gx-footer-link убрано вместе со ссылкой «Играть в Атомикс» (владелец просил её убрать). */ .gx-planet-label { font-size: 6.5px; } } /* ⚠️ КОРОТКИЙ ЭКРАН (ноутбук 768px и ниже по высоте). Ужимаем заголовок, лого и футер — карте должно остаться максимум места. ⚠️ v7.81: правила .gx-logo/.gx-logo-mark/.gx-header-link убраны вместе с шапкой. */ @media (max-height: 700px) { /* ⚠️ opacity УБРАН В v7.82 (см. выше). ⚠️ ПЕРЕСЧИТАНО В v7.86: было 16vh, стало 16 * 0.7 = 11.2vh. */ .gx-logo-watermark { height: 11.2vh; } .gx-title { font-size: clamp(15px, 2vw, 21px); letter-spacing: 4px; } .gx-slogan { font-size: 9px; } .gx-map-hint { font-size: 10px; } /* ⚠️ Футер ужимаем ОТ НОВЫХ значений (v7.84). */ .gx-footer { padding: 5px 0 7px; } .gx-footer-btn { height: 28px; font-size: 13px; } } /* ⚠️ Системная настройка «меньше движения»: гасим ВСЕ анимации. JS в этом случае тоже не запускает вращение — планеты стоят. Прятать их нельзя: карта должна читаться и без движения. */ @media (prefers-reduced-motion: reduce) { .gx-planet.is-ready::after { animation: none; opacity: 0.7; } .gx-planet-img, .gx-planet-tip, .gx-card, .gx-card-box { transition: none; } /* ⚠️ Вращение вокруг оси гасит JS (он не запускает счётчик угла), и здесь дублировать нечего. Но подсказку браузеру про слой снимаем: вращения не будет, и держать слой на GPU незачем. */ .gx-spin { will-change: auto; } }