/* ===== ПЕРЕМЕННЫЕ ТЕМЫ ===== */ :root{ --bg:#0b0d12; --bg2:#0e1420; --panel:#141a24; --panel2:#16222f; --text:#e6f0f4; --muted:#8aa0a8; --head:#eafcff; --accent:#00eaff; --accent-rgb:0,234,255; --border:rgba(255,255,255,.06); --code-bg:#0d1119; --code:#56ff9e; --glow:.9; } /* МЕСТО ПОД ПОЛОСУ ПРОКРУТКИ РЕЗЕРВИРУЕМ ВСЕГДА (05.08.2026). Симптом был такой: на короткой странице полосы нет, потом догружается содержимое, полоса появляется — и вся страница дёргается вбок на её ширину. Выглядело как «вторая полоса, мелькнувшая на секунду». На длинных страницах (заказы, купоны) этого не было просто потому, что там полоса есть всегда. scrollbar-gutter резервирует место заранее, поэтому ничего не прыгает. Второе правило — для браузеров постарше, которые gutter ещё не понимают. */ /* Рекламные места в подвале: два в ряд, на телефоне — друг под другом. Размер под широкий баннер сервера (520x105). */ .foot-slots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(1100px,calc(100% - 28px)); margin:14px auto 4px; padding:0; box-sizing:border-box; } .foot-slot{ width:auto; max-width:none; min-width:0; } @media (max-width:700px){ .foot-slots{ grid-template-columns:1fr; } } /* ЖЁСТКИЙ РАЗМЕР МЕСТА: 520x105. Раньше высота считалась от картинки (height:auto) — и стоило поставить, например, фотографию в полный рост, как она растягивала подвал на пол-экрана. Теперь рамка всегда одна и та же, а картинка вписывается внутрь: object-fit:contain уменьшает её целиком, ничего не обрезая и не искажая пропорции. Слишком большие картинки просто сжимаются до места. */ .foot-slot img{ display:block; width:100%; height:105px; max-height:105px; object-fit:cover; background:#0b0f16; border-radius:12px; border:1px solid rgba(255,255,255,.09); } /* На узком экране высоту тоже держим пропорционально, иначе на телефоне баннер занимал бы неоправданно много места. */ @media (max-width:560px){ .foot-slot img{ height:auto; aspect-ratio:520/105; } } .foot-slot a{ display:block; text-decoration:none; } .foot-slot a:hover img{ border-color:rgba(0,234,255,.45); } .foot-slot-t{ text-align:center; font-size:11px; color:#8aa0a8; margin-top:5px; } /* Свободное место: пунктирная рамка ровно того же размера, что и занятое, чтобы подвал не менял высоту, когда рекламу купят. */ .foot-slot-free a{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:105px; border:2px dashed rgba(0,234,255,.32); border-radius:12px; text-decoration:none; transition:all .18s ease; gap:6px; } .foot-slot-free a:hover{ border-color:rgba(0,234,255,.7); background:rgba(0,234,255,.05); } .foot-slot-free .fa-t{ font-size:15px; font-weight:900; letter-spacing:1.2px; color:#00eaff; } .foot-slot-free .fa-s{ font-size:11px; color:#6d7f88; } /* ОБЩЕЕ ПРАВИЛО ДЛЯ ВСЕХ ВЫПАДАЮЩИХ МЕНЮ (05.08.2026). Раньше работала только подрезка скриптом: она СДВИГАЕТ меню к краю. Но если меню само шире экрана (а на телефоне это обычное дело — длинные названия пунктов), сдвиг не помогает: оно всё равно вылезает за границу, и часть пунктов не достать. Поэтому ограничиваем ширину самим экраном и разрешаем перенос длинных строк. Правило общее — действует и на те меню, которые появятся позже, о них не придётся вспоминать отдельно. */ #CssMenu1 .submenu, #CssMenu1 .sa-menu, .srvpick .submenu { max-width: calc(100vw - 16px); box-sizing: border-box; } #CssMenu1 .submenu a, #CssMenu1 .sa-menu a { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 640px) { /* Шапка и раскрытое меню образуют верхний слой. Служебные строки остаются ниже и больше не перекрывают пункты навигации. */ #jmiHdrStack{ overflow:visible !important; } #FlexContainer2{ position:relative !important; z-index:60 !important; overflow:visible !important; } .annbar,.jmi-qa-strip{ position:relative !important; z-index:10 !important; } body.jmi-menu-open{ overflow:hidden; } /* ЕДИНОЕ ПРАВИЛО ДЛЯ ВСЕХ ВЫПАДАЮЩИХ МЕНЮ НА ТЕЛЕФОНЕ. Перечислены все меню сайта разом, а не по одному: раньше правило чинило только меню шапки, а остальные (выбор сервера, меню пользователя, меню чата, боковое) по-прежнему уезжали за край экрана. Логика простая: меню прижимается к обоим краям с отступом, ширина считается от экрана, высота ограничена — внутри прокрутка. Уехать за границу ему просто некуда. */ #CssMenu1 > li.open > .submenu, #CssMenu1 > li.open > .sa-menu, #CssMenu1 li.open > .submenu, .srvpick.open > .submenu, .srvpick.open > .srvpick-menu, .jlc-umenu { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: none !important; max-height: 68vh !important; overflow-y: auto; box-sizing: border-box; z-index:99999 !important; } /* Длинные названия переносятся, а не вылезают вбок. */ #CssMenu1 .submenu a, #CssMenu1 .sa-menu a, .srvpick .submenu a, .jlc-umenu a { white-space: normal !important; overflow-wrap: anywhere; } } html{ scrollbar-gutter:stable; } @supports not (scrollbar-gutter: stable) { html{ overflow-y:scroll; } } html,body{ margin:0; padding:0; min-height:100vh; overflow-x:hidden; max-width:100%; background:#0b0d12; background-image:radial-gradient(1200px 500px at 50% -8%, rgba(0,234,255,.12), transparent 60%),radial-gradient(900px 500px at 100% 110%, rgba(177,75,255,.10), transparent 60%); color:#e6f0f4; font-family:"Segoe UI",Tahoma,Arial,sans-serif; transition:background .3s ease, color .3s ease; } /* Задача 4 ТЗ: глобальная защита от переполнения блоков широким контентом. overflow-x:hidden на html/body выше — это "последняя линия обороны" (обрезает то, что вылезло), а это правило не даёт КАРТИНКАМ/ТАБЛИЦАМ/ВИДЕО/КОДУ вообще стать шире родителя — частая причина горизонтальной прокрутки на мобильном (админ вставил в новость широкую картинку/таблицу — раньше она просто вылезала за экран). Безопасно: max-width:100% не трогает элементы, которые и так помещаются. */ img, video, iframe, table{ max-width:100%; } pre, code{ max-width:100%; overflow-x:auto; box-sizing:border-box; } /* ===== ФОН САЙТА ИЗ STEAM-ПРОФИЛЯ (весь сайт, не только кабинет) ===== */ /* Фиксированный слой позади ВСЕГО контента (z-index:-1). Тёмная вуаль поверх картинки/видео — иначе текст поверх яркого фона читать невозможно. object-fit:cover — заполняет весь экран без искажений, откуда бы ни был фон (широкий/квадратный/т.п.). */ .jmiSiteBg{ position:fixed; top:0; left:0; width:100%; height:100vh; height:100lvh; z-index:-1; overflow:hidden; } .jmiSiteBg img, .jmiSiteBg video{ width:100%; height:100%; object-fit:cover; max-width:none; } .jmiSiteBg.is-disabled{display:none!important;} .jmiSiteBg video.jmi-bg-darkened{filter:brightness(var(--jmi-bg-brightness,.62))!important;} .jmiSiteBgVeil{display:none!important;} /* legacy overlay disabled */ /* Порядок отрисовки CSS: собственный фон красится ПОСЛЕ его детей с отрицательным z-index (см. CSS2.1, приложение E — фон элемента, создающего контекст наложения, рисуется раньше потомков с z-index<0, а вот фон САМОГО body как "обычного" потомка корневого контекста — уже после них). Из-за этого .jmiSiteBg (z-index:-1) оказывался ПОД непрозрачным фоном body и был не виден вообще, хотя картинка грузилась и была рабочей. Отключаем фон body ТОЛЬКО когда есть чем его заменить — иначе (на страницах без фона Steam) обычный тёмный градиент остаётся как был. */ body.has-sitebg{ background:transparent !important; } /* ===== ВЕРХНЕЕ МЕНЮ ===== */ /* ИСПРАВЛЕНО ПОВТОРНО (29.07.2026, тем же днём): пробовал заменить fixed на sticky (см. историю в ПРОЕКТ.md) — но на странице стоит html,body{ overflow-x:hidden; overscroll-behavior-y:none; } (см. правило чуть выше), а при этом правиле position:sticky в браузерах либо не работает вовсе, либо ведёт себя непредсказуемо — именно это и объясняло путаницу слоёв на мобильных (заголовок страницы прорисовывался вперемешку с открытым выпадающим меню, а не строго под ним) и лишнюю мелькающую полосу прокрутки при загрузке. Об этом же самом уже было явно написано в комментарии у бокового меню игры/сервера чуть ниже по этому файлу — туда стоило заглянуть раньше, чем переводить шапку на sticky. Возвращено на fixed. Плюс от предыдущей правки (все три полосы — меню/просмотр/коррекция — ОДНИМ блоком, а не тремя независимо позиционируемыми) оставлен: теперь единственному #jmiHdrStack, а не трём разным элементам, нужен свой JS-расчёт отступа — см. функцию ниже по файлу. */ #jmiHdrStack{ position:fixed; left:0; right:0; top:0; z-index:2800; } /* QA-плашка входит в общий стек шапки и не создаёт отдельный слой поверх меню. Flex-wrap сохраняет читаемость на телефоне, а кнопки получают те же аккуратные радиусы и состояния, что и остальные элементы интерфейса. */ .jmi-qa-strip{ position:relative; z-index:0; min-height:46px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; padding:8px 16px; text-align:center; font:800 13px/1.35 Arial,sans-serif; color:#ffe39a; background:linear-gradient(90deg,#301d00,#4a2b00 50%,#301d00); border-top:1px solid rgba(255,198,58,.28); border-bottom:1px solid #ffc63a; } .jmi-qa-strip-session{ color:#fff3bf; border-bottom-width:2px; } .jmi-qa-strip-text{ min-width:0; overflow-wrap:anywhere; } .jmi-qa-strip-link{ color:#fff; text-decoration:underline; text-underline-offset:3px; } .jmi-qa-strip-link:hover,.jmi-qa-strip-link:focus-visible{ color:#ffd45c; } .jmi-qa-strip-form{ display:inline-flex; margin:0; } .jmi-qa-strip-stop{ border:1px solid #ff8da1; border-radius:9px; background:#35131b; color:#ffd6dd; padding:6px 11px; font:800 12px/1.2 Arial,sans-serif; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; } .jmi-qa-strip-stop:hover,.jmi-qa-strip-stop:focus-visible{ background:#541925; box-shadow:0 0 13px rgba(255,91,125,.35); transform:translateY(-1px); } @media(max-width:600px){ .jmi-qa-strip{ min-height:0; gap:6px 10px; padding:7px 10px; font-size:11px; } .jmi-qa-strip-text{ flex:1 1 100%; } .jmi-qa-strip-stop{ padding:5px 9px; font-size:11px; } } /* "Закрепить шапку намертво" — здесь наоборот означает "убрать из фиксированного положения", шапка становится обычным блоком в потоке страницы и уезжает вместе с ней при прокрутке. ИСПРАВЛЕНО 10.08.2026: было position:absolute с left:0/right:0. Absolute — это тоже ВНЕ потока, только привязано к странице, а не к экрану. А у страницы стоит html,body{overflow-x:hidden}: такое сочетание делает тело контейнером прокрутки, и вынутая из потока шапка на телефоне начинала тянуть страницу ВБОК — содержимое уезжало, приходилось доскроллить вправо. Именно этот перекос владелец и видел, причём в кнопках и чате дела не было. Правильное «в потоке» — это position:static, безо всяких left и right: блок просто занимает своё место сверху и прокручивается вместе со страницей. Тянуть вбок нечему. */ /* ПОЧЕМУ relative, А НЕ static (исправлено 14.08.2026). В 5.27.786 здесь поставили static — чтобы шапка встала в поток и перестала тянуть страницу вбок. Задачу это решило, но утащило за собой поиск: поле «Поиск по сайту» висит под шапкой через position:absolute; top:100%, а точку отсчёта такому блоку задаёт ближайший ПОЗИЦИОНИРОВАННЫЙ предок. У static предка нет позиции — и поле начинало отсчитывать от всей страницы, то есть уезжало вниз. После обновления страницы всё вставало на место только потому, что шапка снова была закреплённой. relative — тот же поток (в отличие от absolute и fixed, элемент остаётся на своём месте и ничего вбок не тянет), но точка отсчёта сохраняется. Поиск остаётся под шапкой в обоих режимах. ВАЖНО: не менять обратно на static — сломается поиск. */ html.hdr-static #jmiHdrStack{ position:relative; left:auto; right:auto; top:auto; } /* Отступ под шапку в этом режиме не нужен: она в потоке и занимает место сама. Задаём стилем, а не только скриптом — иначе между отрисовкой и запуском скрипта страница успевает дёрнуться на высоту шапки. Это и был «прыжок» при переключении и обновлении. !important здесь по делу: он перебивает inline-значение, которое скрипт мог выставить до переключения режима. */ html.hdr-static body{ padding-top:0 !important; } #FlexContainer2{ display:block; text-align:center; padding:14px 10px; margin:0; background:rgba(14,20,32,.97); border-bottom:1px solid rgba(0,234,255,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:visible; position:relative; z-index:60; } /* ВАЖНО (настоящая причина "Сменить или выйти" наезжает на открытое меню — заметил дважды, чинил не то дважды подряд, пока не докопался до сути): у #FlexContainer2 стоит backdrop-filter (размытие фона за шапкой) — а это свойство САМО ПО СЕБЕ создаёт отдельный слой наложения (браузер обязан так делать по спецификации CSS для любого backdrop-filter/ filter/transform, не только для position+z-index). Без ЯВНОГО z-index такой слой встаёт на уровень "0" по умолчанию — ровно как и у viewbar/fixbar (у них тоже нет своего z-index). При РАВНЫХ уровнях слоёв побеждает то, что идёт ПОЗЖЕ в HTML — а viewbar/fixbar в разметке идут ПОСЛЕ шапки. Из-за этого они оказывались визуально ПОВЕРХ открытого меню, даже несмотря на то, что у самого #CssMenu1 стоит z-index:2900 — эта цифра сравнивалась не с viewbar напрямую, а была "заперта" внутри собственного слоя #FlexContainer2, который сам по себе был на том же уровне "0", что и viewbar. Явный z-index:2 у #FlexContainer2 поднимает ВЕСЬ его слой (вместе с меню внутри) выше уровня viewbar/fixbar — теперь сравнение идёт правильно. Прошлые две попытки (записи 56 и 57) убирали старые лишние position:fixed у viewbar/fixbar — это тоже была реальная, самостоятельная проблема (з-индекс 2790 у фиксированной полосы и правда перекрывал бы всё), но не единственная и, как оказалось, не решающая именно эту жалобу. /* Полосы режима просмотра/коррекции — теперь просто обычные блоки ПОСЛЕ шапки внутри той же sticky-обёртки: место под них резервируется естественным потоком, отдельно ничего не подгоняем (раньше у них тоже было position:fixed + свои top, выставляемые тем же JS-расчётом). */ .viewbar, .fixbar{ background:inherit; } /* Отступ под закреплённую шапку — запас на первые мгновения загрузки, пока JS ниже по странице не измерит точную высоту и не подставит её сам (см. updateHeaderOffsets()). */ body{ padding-top:76px; } /* ===================================================================== ЕДИНЫЙ СТИЛЬ КНОПОК "НАЗАД/ВПЕРЁД" — один класс для ОБОИХ режимов (в закреплённой шапке И рядом с заголовком страницы). Раньше это были два РАЗНЫХ визуальных языка (в шапке — как обычный пункт меню, у заголовка — отдельный круглый значок) — теперь везде одна и та же кнопка: фиксированный размер 36×36, одинаковые отступы, одинаковый цвет, одинаковое поведение показа/скрытия. ===================================================================== */ .jmi-nav-arrow{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:11px; background:#141a24; border:1px solid rgba(255,255,255,.1); color:#00eaff; text-decoration:none; font-size:14px; vertical-align:middle; cursor:pointer; transition:opacity .25s cubic-bezier(.2,1.4,.4,1), transform .25s cubic-bezier(.2,1.4,.4,1), visibility .25s, border-color .15s, color .15s, background .15s; } .jmi-nav-arrow:hover{ border-color:rgba(0,234,255,.6); color:#eafcff; background:#16222f; box-shadow:0 0 14px -4px rgba(0,234,255,.6); } @media(max-width:640px){ .jmi-nav-arrow{ width:32px; height:32px; border-radius:9px; font-size:13px; } } /* --- Режим "в шапке" --- показывается/прячется через display (не через opacity) — это обычный пункт меню, участвует в общей раскладке шапки, "пусто занимающая место" кнопка тут неуместна. */ #CssMenu1 li.nav-pin, #CssMenu1 li.jmi-wx, #CssMenu1 li.nav-builder-tool{ flex:0 0 40px !important; width:40px !important; min-width:40px !important; max-width:40px !important; } #CssMenu1 li.nav-pin a, #CssMenu1 li.jmi-wx > a, #CssMenu1 li.nav-builder-tool > a{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:40px; min-width:40px; height:40px; padding:0; overflow:visible; } #CssMenu1 li.nav-pin a i, #CssMenu1 li.jmi-wx > a i, #CssMenu1 li.nav-builder-tool > a i{ display:block; position:static; width:18px; height:18px; margin:0!important; padding:0!important; line-height:18px; text-align:center; font-size:16px; transform-box:fill-box; transform-origin:center center!important; } /* 5.28.411 — режим конструктора НЕ меняет геометрию utility-кнопок шапки. Раньше weather/tool расширялись с 40 до 72px ради карандаша, из-за чего закреп, фон, погода и соседние элементы визуально разъезжались. Карандаш теперь является компактным overlay и не участвует в раскладке меню. */ body.has-fixbar #CssMenu1 li.nav-pin, body.has-fixbar #CssMenu1 li.jmi-wx, body.has-fixbar #CssMenu1 li.nav-builder-tool{ position:relative!important; flex:0 0 40px!important; width:40px!important; min-width:40px!important; max-width:40px!important; height:40px!important; margin:0!important; padding:0!important; align-self:center!important; } body.has-fixbar #CssMenu1 li.nav-pin > a, body.has-fixbar #CssMenu1 li.jmi-wx > a, body.has-fixbar #CssMenu1 li.nav-builder-tool > a{ position:relative!important; inset:auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:40px!important; min-width:40px!important; max-width:40px!important; height:40px!important; margin:0!important; padding:0!important; transform:none!important; } body.has-fixbar #CssMenu1 li.jmi-wx > .st-w, body.has-fixbar #CssMenu1 li.nav-builder-tool > .st-w{ position:absolute!important; z-index:12!important; right:-5px!important; top:-5px!important; width:18px!important; height:18px!important; margin:0!important; transform:none!important; pointer-events:auto!important; } body.has-fixbar #CssMenu1 li.jmi-wx > .st-w .st-pen, body.has-fixbar #CssMenu1 li.nav-builder-tool > .st-w .st-pen{ position:absolute!important; inset:0!important; width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; padding:0!important; margin:0!important; border-radius:6px!important; font-size:8px!important; } /* 5.28.135 — шапочные utility-иконки без сдвигов геометрии. */ #CssMenu1 li.nav-pin-header a{color:#ffbf3f;border-color:rgba(255,191,63,.28);background:linear-gradient(145deg,rgba(255,191,63,.10),rgba(255,122,41,.05));} #CssMenu1 li.nav-anim-bg a{color:#6fe8ff;border-color:rgba(111,232,255,.28);background:linear-gradient(145deg,rgba(111,232,255,.10),rgba(171,93,255,.07));} #CssMenu1 li.nav-pin-header a i,#CssMenu1 li.nav-anim-bg a i{transform:none!important;transition:color .18s ease,filter .18s ease,opacity .18s ease!important} #CssMenu1 li.nav-pin-header a:hover i{animation:ico-pin-glow .72s ease both;filter:drop-shadow(0 0 6px rgba(255,191,63,.75));} #CssMenu1 li.nav-anim-bg a:hover i{animation:ico-media-glow .78s ease both;filter:drop-shadow(0 0 7px rgba(111,232,255,.75));} #CssMenu1 li.nav-pin-header a:active,#CssMenu1 li.nav-anim-bg a:active{transform:none!important;} #CssMenu1 li.nav-pin-header a:active i,#CssMenu1 li.nav-anim-bg a:active i{transform:none!important;filter:drop-shadow(0 0 11px currentColor)!important;opacity:.78} #CssMenu1 li.nav-pin-header a.on i{transform:none!important;color:#ffd85f;filter:drop-shadow(0 0 7px rgba(255,216,95,.75));} /* 5.28.852 — часы вынесены в свободную левую зону шапки. Они больше НЕ участвуют в потоке меню, не создают свою строку, не имеют плашки/фона и выглядят как чистые футуристичные цифры. */ #CssMenu1 li.nav-live-clock{animation:none!important;position:absolute!important;left:-110px;top:50%;display:flex;align-items:center;justify-content:flex-start;width:102px!important;min-width:102px!important;max-width:102px!important;height:40px!important;margin:0!important;padding:0!important;pointer-events:none;opacity:0;transform:translate(-16px,-50%) scale(.96);transition:opacity .62s cubic-bezier(.2,.9,.2,1),transform .62s cubic-bezier(.16,1.08,.24,1);z-index:1;} html.jmi-live-clock-ready.jmi-live-clock-space #CssMenu1 li.nav-live-clock{opacity:1;transform:translate(0,-50%) scale(1);} /* 5.28.868: clean floating clock with no decorative frame. */ #CssMenu1 .jmi-live-clock{display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 auto;gap:3px;width:max-content!important;max-width:none!important;height:100%;padding:0;box-sizing:border-box;position:relative;overflow:visible;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;} #CssMenu1 .jmi-live-clock::before,#CssMenu1 .jmi-live-clock::after{content:none!important;display:none!important;} #CssMenu1 .jmi-live-clock__digit,#CssMenu1 .jmi-live-clock__colon{position:relative;z-index:1;display:block;font-variant-numeric:tabular-nums;line-height:.86;} #CssMenu1 .jmi-live-clock__digit{color:#d8faff;filter:drop-shadow(0 0 5px rgba(0,234,255,.35));transform:skewX(-5deg);} #CssMenu1 .jmi-live-clock__hour{min-width:0;text-align:left;display:flex!important;justify-content:flex-start;} #CssMenu1 .jmi-live-clock__minute{min-width:0;text-align:left;display:flex!important;justify-content:flex-start;} /* Fixed-size double dot avoids the font colon's uneven glyph bearings. Three pixels separate each side from the neighbouring digits. */ #CssMenu1 .jmi-live-clock__colon{display:block!important;flex:0 0 8px;width:8px;height:29px;margin:0 3px;position:relative;align-self:center;font-size:0!important;line-height:0;color:#ffbf3f;transform:none!important;transition:opacity .22s ease;} #CssMenu1 .jmi-live-clock__colon::before,#CssMenu1 .jmi-live-clock__colon::after{content:"";position:absolute;left:2px;width:4px;height:4px;border-radius:2px;background:#ffbf3f;box-shadow:0 0 6px rgba(255,191,63,.55);} #CssMenu1 .jmi-live-clock__colon::before{top:7px;} #CssMenu1 .jmi-live-clock__colon::after{bottom:7px;} #CssMenu1 .jmi-live-clock__colon.is-off{opacity:.4;} /* Each numeral rolls DOWN inside its own 29px clipped window. Clipping belongs to the digit, not the full header, so neighboring controls remain untouched and no frame can leave the header bounds. */ #CssMenu1 .jmi-live-clock__slot{display:block;position:relative;width:var(--jmi-clock-glyph-width,20px);height:29px;flex:none;overflow:hidden;contain:paint;} #CssMenu1 .jmi-live-clock__face{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;} #CssMenu1 .jmi-live-clock__track{position:absolute;top:0;left:0;width:100%;height:200%;display:flex;flex-direction:column;transform:translateY(-50%);will-change:transform;} #CssMenu1 .jmi-live-clock__track .jmi-live-clock__face{height:50%;flex:0 0 50%;} #CssMenu1 .jmi-live-clock__track.is-flipping{transform:translateY(0);transition:transform .50s cubic-bezier(.22,.81,.16,1);} #CssMenu1 .jmi-live-clock__digit svg{display:block;width:100%;height:28px;overflow:hidden;flex:none;fill:#e4faff;stroke:none;filter:drop-shadow(0 0 2px rgba(0,212,255,.24));} #CssMenu1 .jmi-live-clock__digit svg path{fill:currentColor;} @media (prefers-reduced-motion:reduce){#CssMenu1 li.nav-live-clock{transition:none!important;opacity:1;transform:translate(0,-50%) scale(1);}#CssMenu1 .jmi-live-clock__colon,#CssMenu1 .jmi-live-clock__track{transition:none!important;}} @media(max-width:1320px){#CssMenu1 li.nav-live-clock{left:-94px;width:86px!important;min-width:86px!important;max-width:86px!important;}#CssMenu1 .jmi-live-clock__colon{flex-basis:8px;}} @media(max-width:1180px){#CssMenu1 li.nav-live-clock{display:none!important;}} @keyframes ico-pin-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,191,63,.25))}50%{filter:drop-shadow(0 0 9px rgba(255,191,63,.95))}} @keyframes ico-media-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(111,232,255,.25))}50%{filter:drop-shadow(0 0 10px rgba(171,93,255,.9))}} /* 5.28.136 — цветная SVG-булавка и более спокойные utility-состояния. Подсветка закрепа означает только одно: шапка ЗАКРЕПЛЕНА. */ #CssMenu1 li.nav-pin-header .jmi-util-icon{display:grid;place-items:center;width:20px;height:20px;line-height:0} #CssMenu1 li.nav-pin-header .jmi-util-icon svg{display:block;width:20px;height:20px;overflow:visible} #CssMenu1 li.nav-pin-header .pin-cap{fill:#ffb938;transition:fill .18s ease,filter .18s ease} #CssMenu1 li.nav-pin-header .pin-core{fill:#ffe79a;transition:fill .18s ease} #CssMenu1 li.nav-pin-header a{background:#141a24!important;border-color:rgba(255,185,56,.20)!important;box-shadow:none!important} #CssMenu1 li.nav-pin-header a:not(.on){filter:none!important} #CssMenu1 li.nav-pin-header a:not(.on) .jmi-util-icon{filter:none!important;opacity:.88} #CssMenu1 li.nav-pin-header a:hover{border-color:rgba(255,185,56,.45)!important;box-shadow:0 0 9px rgba(255,185,56,.12)!important} #CssMenu1 li.nav-pin-header a:hover .jmi-util-icon{filter:drop-shadow(0 0 4px rgba(255,185,56,.42))} #CssMenu1 li.nav-pin-header a.on{background:rgba(255,185,56,.075)!important;border-color:rgba(255,196,77,.72)!important;box-shadow:0 0 10px rgba(255,185,56,.20),inset 0 0 9px rgba(255,185,56,.05)!important} #CssMenu1 li.nav-pin-header a.on .jmi-util-icon{opacity:1;filter:drop-shadow(0 0 5px rgba(255,196,77,.52))} #CssMenu1 li.nav-pin-header a.on .pin-cap{fill:#ffc44d}.jmi-pin-icon .pin-core{fill:#fff0b8} #CssMenu1 li.nav-anim-bg a{background:#141a24!important;border-color:rgba(111,232,255,.18)!important;box-shadow:none!important} #CssMenu1 li.nav-anim-bg a:hover{border-color:rgba(111,232,255,.42)!important;box-shadow:0 0 9px rgba(111,232,255,.11)!important} #CssMenu1 li.nav-anim-bg a i{color:#74dcff!important;text-shadow:1px 0 0 rgba(175,105,255,.50);filter:none!important} #CssMenu1 li.nav-anim-bg a.on{background:rgba(111,232,255,.065)!important;border-color:rgba(111,232,255,.58)!important;box-shadow:0 0 10px rgba(111,232,255,.16)!important} #CssMenu1 li.nav-anim-bg a.on i{filter:drop-shadow(0 0 4px rgba(111,232,255,.42))!important} html.theme-light #CssMenu1 li.nav-pin-header a,html.theme-light #CssMenu1 li.nav-anim-bg a{background:linear-gradient(180deg,#fffdf8,#f5f0e7)!important} html.theme-light #CssMenu1 li.nav-pin-header a{border-color:rgba(92,104,125,.24)!important} html.theme-light #CssMenu1 li.nav-pin-header .pin-cap{fill:#4f6f83!important} html.theme-light #CssMenu1 li.nav-pin-header .pin-core{fill:#b9c9d2!important} html.theme-light #CssMenu1 li.nav-pin-header a:hover{border-color:rgba(124,58,237,.42)!important;box-shadow:0 0 7px rgba(124,58,237,.10)!important} html.theme-light #CssMenu1 li.nav-pin-header a:hover .jmi-util-icon{filter:drop-shadow(0 0 3px rgba(124,58,237,.28))!important} html.theme-light #CssMenu1 li.nav-pin-header a.on{background:#f7f0ff!important;border-color:rgba(124,58,237,.70)!important;box-shadow:0 0 10px rgba(124,58,237,.20),0 0 18px rgba(236,72,153,.08)!important} html.theme-light #CssMenu1 li.nav-pin-header a.on .jmi-util-icon{filter:drop-shadow(0 0 5px rgba(124,58,237,.46))!important} html.theme-light #CssMenu1 li.nav-pin-header a.on .pin-cap{fill:#7c3aed!important} html.theme-light #CssMenu1 li.nav-pin-header a.on .pin-core{fill:#ec4899!important} html.theme-light #CssMenu1 li.nav-anim-bg a.on{background:#fff4fb!important;border-color:rgba(219,39,119,.58)!important;box-shadow:0 0 10px rgba(219,39,119,.18),0 0 16px rgba(124,58,237,.07)!important} html.theme-light #CssMenu1 li.nav-anim-bg a.on i{color:#b4237a!important;text-shadow:none!important;filter:drop-shadow(0 0 4px rgba(219,39,119,.38))!important} /* 5.28.140 — визуальное состояние закрепа совпадает с реальным: on = шапка закреплена; light glow — фиолетово-розовый. */ /* 5.28.141 — utility-кнопки: выключено = монохромно-серое, включено = возвращается фирменный цвет и мягкий glow. */ #CssMenu1 li.nav-pin-header a:not(.on),#CssMenu1 li.nav-anim-bg a:not(.on){background:#141a24!important;border-color:rgba(148,163,184,.22)!important;box-shadow:none!important} #CssMenu1 li.nav-pin-header a:not(.on) .jmi-util-icon{opacity:.82!important;filter:grayscale(1) saturate(0)!important} #CssMenu1 li.nav-pin-header a:not(.on) .pin-cap{fill:#8b96a6!important} #CssMenu1 li.nav-pin-header a:not(.on) .pin-core{fill:#c0c7d0!important} #CssMenu1 li.nav-anim-bg a:not(.on) i{color:#8b96a6!important;text-shadow:none!important;filter:grayscale(1) saturate(0)!important;opacity:.82!important} html.theme-light #CssMenu1 li.nav-pin-header a:not(.on),html.theme-light #CssMenu1 li.nav-anim-bg a:not(.on){background:linear-gradient(180deg,#fffdf8,#f5f0e7)!important;border-color:rgba(100,116,139,.24)!important;box-shadow:none!important} html.theme-light #CssMenu1 li.nav-pin-header a:not(.on) .pin-cap{fill:#87919e!important} html.theme-light #CssMenu1 li.nav-pin-header a:not(.on) .pin-core{fill:#b7bec7!important} html.theme-light #CssMenu1 li.nav-anim-bg a:not(.on) i{color:#87919e!important;text-shadow:none!important;filter:grayscale(1) saturate(0)!important} /* 5.28.138 — utility-кнопки без ripple. Вместо волны короткая смысловая анимация: булавка "входит" в шапку, видео мягко запускается/останавливается. */ #hdrPinBtn .jmi-util-icon,#hdrAnimBtn i{will-change:transform,filter,opacity} #hdrPinBtn.jmi-pin-attach .jmi-util-icon{animation:jmiPinAttach .48s cubic-bezier(.2,.8,.2,1)} #hdrPinBtn.jmi-pin-release .jmi-util-icon{animation:jmiPinRelease .46s ease} #hdrAnimBtn.jmi-media-play i{animation:jmiMediaPlay .48s ease} #hdrAnimBtn.jmi-media-pause i{animation:jmiMediaPause .48s ease} @keyframes jmiPinAttach{0%{transform:translateY(-3px) rotate(-8deg);filter:brightness(1.15)}55%{transform:translateY(2px) rotate(3deg);filter:brightness(1.35)}100%{transform:none;filter:none}} @keyframes jmiPinRelease{0%{transform:translateY(2px);opacity:.9}55%{transform:translateY(-3px) rotate(5deg);opacity:1}100%{transform:none;opacity:.92}} @keyframes jmiMediaPlay{0%{transform:scale(.82);opacity:.65}55%{transform:scale(1.12);opacity:1;filter:drop-shadow(0 0 5px rgba(111,232,255,.42))}100%{transform:none;filter:none}} @keyframes jmiMediaPause{0%{transform:scale(1.08);opacity:1}60%{transform:scale(.88);opacity:.72}100%{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){#hdrPinBtn.jmi-pin-attach .jmi-util-icon,#hdrPinBtn.jmi-pin-release .jmi-util-icon,#hdrAnimBtn.jmi-media-play i,#hdrAnimBtn.jmi-media-pause i{animation:none!important}} /* ВКЛЮЧЁННОЕ СОСТОЯНИЕ (переделано 10.08.2026). Раньше кнопка заливалась сплошным бирюзовым, а значок красился в цвет фона — и во включённом виде превращалась в пустой светящийся квадрат: понять, что за кнопка, было нельзя. При наведении выходило то же самое. Теперь наоборот: фон остаётся тёмным, а ярким становится сам значок и рамка вокруг него. Кнопка ясно читается как нажатая, и при этом видно, ЧТО именно нажато. */ #CssMenu1 li.nav-pin a.on{ color:#00eaff; background:rgba(0,234,255,.14); border-color:#00eaff; box-shadow:0 0 14px -2px rgba(0,234,255,.5), inset 0 0 12px -6px rgba(0,234,255,.8); } #CssMenu1 li.nav-pin a.on i{ color:#00eaff; /* Лёгкое свечение самого значка — чтобы включённое состояние было заметно даже боковым зрением. */ text-shadow:0 0 8px rgba(0,234,255,.9); } /* Наведение на включённую кнопку: чуть ярче, но значок по-прежнему виден. Раньше здесь заливалась вся внутренность. */ #CssMenu1 li.nav-pin a.on:hover{ background:rgba(0,234,255,.22); box-shadow:0 0 18px -2px rgba(0,234,255,.65), inset 0 0 14px -6px rgba(0,234,255,.9); } #CssMenu1 li.nav-pin a.on:hover i{ color:#7ffdff; } #CssMenu1 li .jmi-nav-arrow{ margin:0; } /* --- Режим "у заголовка страницы" --- показывается/прячется через opacity+scale (плавно, не рывком) — не участвует в потоке меню, стоит рядом с

, обёрнутым в .jmi-title-nav-wrap. */ .jmi-title-nav-wrap .jmi-nav-arrow{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(.5); width:38px; min-width:38px; height:38px; padding:0; margin:0; border-width:1px; overflow:hidden; } .jmi-title-nav-wrap .jmi-nav-arrow.show{ opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); width:38px; min-width:38px; padding:0; margin:0; border-width:1px; overflow:visible; } /* Обёртка вокруг заголовка — берёт вёрстку строки полностью на себя (flex, по центру), поэтому стрелки ВСЕГДА строго по бокам текста и на одной линии с ним, одинаково на любой странице, независимо от того, какой CSS был у родителя заголовка изначально, от длины заголовка и от ширины экрана. */ .jmi-title-nav-wrap{ display:grid; grid-template-columns:38px minmax(0,max-content) 38px; align-items:center; justify-content:center; column-gap:20px; width:100%; max-width:100%; box-sizing:border-box; } .jmi-title-nav-wrap h1,.jmi-title-nav-wrap [role=heading]{ min-width:0; overflow-wrap:break-word; margin-top:0!important; margin-bottom:0!important; align-self:center; } @media(max-width:640px){ .jmi-title-nav-wrap{column-gap:12px} } #wb_CssMenu1{ display:inline-block; } #CssMenu1{ list-style:none; margin:0; padding:0; } #CssMenu1 > li{ display:inline-block; margin:3px 4px; vertical-align:middle; position:relative; } #CssMenu1 li a{ display:inline-block; color:#e6f0f4; font-size:15px; font-weight:700; text-decoration:none; padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.06); background:#141a24; white-space:nowrap; line-height:1; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; position:relative; overflow:hidden; } #CssMenu1 li a i{ color:#00eaff; width:16px; margin-right:7px; line-height:1; text-align:center; font-size:14px; transition:transform .2s ease; } #CssMenu1 li a i.csub{ margin:0 0 0 4px; font-size:12px; } #CssMenu1 li a:hover{ color:#eafcff; border-color:rgba(0,234,255,.6); background:#16222f; box-shadow:0 0 18px rgba(0,234,255,.35),0 0 6px rgba(0,234,255,.2); transform:translateY(-1px); } #CssMenu1 li a:hover i{ transform:scale(1.15); color:#eafcff; } #CssMenu1 li a:active{ transform:scale(.93) translateY(0); box-shadow:0 0 28px rgba(0,234,255,.6),inset 0 0 18px rgba(0,234,255,.35); transition:transform .07s ease; } #CssMenu1 li a.active{ color:#eafcff; border:1px solid #00eaff; background:linear-gradient(135deg,#16222f,#0e1a28); box-shadow:0 0 20px rgba(0,234,255,.4),inset 0 0 12px rgba(0,234,255,.15); text-shadow:0 0 8px rgba(0,234,255,.5); } #CssMenu1 li a.active i{ color:#eafcff; } /* Рябь (ripple) при клике */ #CssMenu1 li a .ripple{ position:absolute; border-radius:50%; background:rgba(0,234,255,.3); transform:scale(0); animation:nav-ripple .5s linear; pointer-events:none; } @keyframes nav-ripple{ to{ transform:scale(4); opacity:0; } } /* Появление пунктов при загрузке */ #CssMenu1 > li{ animation:nav-in .3s ease both; } #CssMenu1 > li:nth-child(1){ animation-delay:.04s } #CssMenu1 > li:nth-child(2){ animation-delay:.08s } #CssMenu1 > li:nth-child(3){ animation-delay:.12s } #CssMenu1 > li:nth-child(4){ animation-delay:.16s } #CssMenu1 > li:nth-child(5){ animation-delay:.20s } #CssMenu1 > li:nth-child(6){ animation-delay:.24s } @keyframes nav-in{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } } /* LIVE-шарик мониторинга */ .live-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#56ff9e; margin:0 4px 0 2px; vertical-align:middle; box-shadow:0 0 0 0 rgba(86,255,158,.7); animation:live-pulse 2s ease-in-out infinite; } .live-txt{ font-size:11px; font-weight:900; color:#56ff9e; letter-spacing:1px; vertical-align:middle; text-shadow:0 0 8px rgba(86,255,158,.6); } @keyframes live-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(86,255,158,.7); background:#56ff9e; } 50%{ box-shadow:0 0 0 6px rgba(86,255,158,0); background:#7bffc4; } } /* Анимации иконок в шапке при наведении */ #CssMenu1 li a:hover i.fa-signal{ animation:ico-bars .6s ease; } #CssMenu1 li a:hover i.fa-server{ animation:ico-shake .5s ease; } #CssMenu1 li a:hover i.fa-info-circle{ animation:ico-spin .6s ease; } #CssMenu1 li a:hover i.fa-balance-scale{ animation:ico-swing .6s ease; } #CssMenu1 li a:hover i.fa-shopping-cart{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-comments{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-gavel{ animation:ico-swing .5s ease; } #CssMenu1 li a:hover i.fa-users{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-list-ul{ animation:ico-shake .4s ease; } #CssMenu1 li a:hover i.fa-code{ animation:ico-shake .4s ease; } #CssMenu1 li a:hover i.fa-shield{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-comment{ animation:ico-bounce .5s ease; } /* ---- Иконки административного меню — раньше без анимации ---- */ #CssMenu1 li a:hover i.fa-sliders{ animation:ico-shake .5s ease; } #CssMenu1 li a:hover i.fa-tachometer{ animation:ico-swing .6s ease; } #CssMenu1 li a:hover i.fa-list-alt{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-ticket{ animation:ico-swing .5s ease; } #CssMenu1 li a:hover i.fa-map-o{ animation:ico-bounce .5s ease; } #CssMenu1 li a:hover i.fa-plug{ animation:ico-shake .4s ease 2; } #CssMenu1 li a:hover i.fa-heartbeat{ animation:ico-heart .7s ease-in-out infinite; } #CssMenu1 li a:hover i.fa-flask{ animation:ico-shake .5s ease; } #CssMenu1 li a:hover i.fa-bug{ animation:ico-swing .4s ease 2; } #CssMenu1 li a:hover i.fa-eye{ animation:ico-blink .5s ease; } #CssMenu1 li a:hover i.fa-user-secret{ animation:ico-swing .5s ease; } /* Мониторинг сервисов — настоящий пульс сердцебиения, не просто прыжок */ @keyframes ico-heart{ 0%,100%{ transform:scale(1); } 20%{ transform:scale(1.28); } 35%{ transform:scale(1); } 50%{ transform:scale(1.18); } 70%{ transform:scale(1); } } /* Режим просмотра — глаз моргает */ @keyframes ico-blink{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.15); } } @keyframes ico-bounce{ 0%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} 60%{transform:translateY(-1px)} } @keyframes ico-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes ico-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} } @keyframes ico-swing{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} } /* Мониторинг — столбики растут волной, как индикатор сигнала */ @keyframes ico-bars{ 0% { transform:scaleY(.55); opacity:.55; } 20% { transform:scaleY(.8); opacity:.75; } 40% { transform:scaleY(1); opacity:1; } 60% { transform:scaleY(1.15);opacity:1; } 80% { transform:scaleY(.9); opacity:.85; } 100% { transform:scaleY(.55); opacity:.55; } } .nav-ico-pulse{ display:inline-block; transform-origin:center; } #CssMenu1 li a:hover i.nav-ico-pulse{ animation:ico-lift .55s ease both; } @keyframes ico-lift{ 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-2px) scale(1.1)} } /* Главная — домик "строится": подпрыгивает и слегка растёт снизу вверх */ @keyframes ico-build{ 0% { transform:translateY(3px) scale(.8); opacity:.6; } 35% { transform:translateY(-3px) scale(1.1); opacity:1; } 55% { transform:translateY(0) scale(1); opacity:1; } 70% { transform:translateY(-2px) scale(1.05);opacity:1; } 100% { transform:translateY(0) scale(1); opacity:1; } } #CssMenu1 li a:hover i.fa-home{ animation:ico-build .75s ease both; transform-origin:bottom center; } /* ===================================================================== ЖИВЫЕ ЗНАЧКИ МЕНЮ (добавлено 14.08.2026) --------------------------------------------------------------------- Задача была: «пусть все значки будут анимированными». Сделано так, чтобы это помогало, а не мешало: 1) У КАЖДОГО значка своя анимация ПО СМЫСЛУ, а не одна общая на всех. Колокольчик качается, шестерёнка крутится, сердце бьётся, подарок подпрыгивает. Общая анимация на всё выглядит как сбой отрисовки, а осмысленная — подсказывает, что делает пункт. 2) Играют ПРИ НАВЕДЕНИИ и ПРИ КАСАНИИ (класс .ico-tap вешает скрипт на мобильных, где наведения не бывает). Постоянно дёргающиеся значки в меню из 25 пунктов превращают шапку в новогоднюю гирлянду, мешают читать подписи и без нужды жгут батарею телефона. Исключение — те, что показывают ЖИВОЕ состояние: пульс, LIVE-эфир. Им постоянное движение по делу. 3) Уважаем системную настройку «уменьшить движение»: у кого она включена (укачивает от анимаций), не играет ничего. Это не вежливость ради галочки — людям с вестибулярными нарушениями от мельтешения буквально становится плохо. Все значки ниже проверены по FontAwesome.otf: каждый есть и в CSS, и в самом шрифте. Значка, которого нет в шрифте, браузер рисует пустым квадратом — поэтому НЕ вписывайте сюда имена «на память». ===================================================================== */ /* Общая заготовка: значку нужен свой слой, иначе поворот и сдвиг применяются к строке целиком и «дёргают» подпись пункта. */ #CssMenu1 li a i.fa, .jow-s i.fa, .sa-menu a i.fa{ display:inline-block; } @keyframes ico-swing{ /* качание: колокол, рупор, объявления */ 0%,100%{ transform:rotate(0); } 15%{ transform:rotate(14deg); } 30%{ transform:rotate(-11deg); } 45%{ transform:rotate(8deg); } 60%{ transform:rotate(-6deg); } 75%{ transform:rotate(3deg); } } @keyframes ico-spin{ to{ transform:rotate(360deg); } } @keyframes ico-beat{ 0%,100%{ transform:scale(1); } 25%{ transform:scale(1.25); } 40%{ transform:scale(1); } 60%{ transform:scale(1.18); } } @keyframes ico-hop{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-4px); } 50%{ transform:translateY(0); } 70%{ transform:translateY(-2px); } } @keyframes ico-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-2px); } 40%{ transform:translateX(2px); } 60%{ transform:translateX(-2px); } 80%{ transform:translateX(1px); } } @keyframes ico-fly{ /* улетает и возвращается: письмо, самолётик */ 0%{ transform:translate(0,0) rotate(0); } 45%{ transform:translate(6px,-5px) rotate(12deg); opacity:.35; } 46%{ transform:translate(-6px,5px) rotate(12deg); opacity:0; } 70%{ transform:translate(0,0) rotate(0); opacity:1; } 100%{ transform:translate(0,0); } } @keyframes ico-flip{ 50%{ transform:rotateY(180deg); } 100%{ transform:rotateY(360deg); } } @keyframes ico-tick{ /* короткий кивок: галочки, списки, заказы */ 0%,100%{ transform:translateY(0) scale(1); } 40%{ transform:translateY(-2px) scale(1.12); } } @keyframes ico-glow{ /* вспышка: молния, ключ, щит */ 0%,100%{ filter:none; transform:scale(1); } 45%{ filter:drop-shadow(0 0 6px currentColor); transform:scale(1.18); } } @keyframes ico-scan{ /* поиск/лупа ведёт по сторонам */ 0%,100%{ transform:translate(0,0); } 30%{ transform:translate(2px,-2px); } 65%{ transform:translate(-2px,1px); } } @keyframes ico-type{ /* «печатает»: чат, обращения */ 0%,100%{ transform:translateY(0); } 25%{ transform:translateY(-3px); } 50%{ transform:translateY(0); } 75%{ transform:translateY(-1.5px); } } /* --- Назначение по смыслу пункта --------------------------------- */ #CssMenu1 li a:hover i.fa-bullhorn, #CssMenu1 li a.ico-tap i.fa-bullhorn, #CssMenu1 li a:hover i.fa-newspaper-o, #CssMenu1 li a.ico-tap i.fa-newspaper-o, .sa-menu a:hover i.fa-bullhorn, .sa-menu a:hover i.fa-newspaper-o{ animation:ico-swing .85s ease both; transform-origin:top center; } #CssMenu1 li a:hover i.fa-sliders, #CssMenu1 li a.ico-tap i.fa-sliders, #CssMenu1 li a:hover i.fa-cog, #CssMenu1 li a.ico-tap i.fa-cog, #CssMenu1 li a:hover i.fa-cogs, #CssMenu1 li a.ico-tap i.fa-cogs, #CssMenu1 li a:hover i.fa-refresh, #CssMenu1 li a.ico-tap i.fa-refresh, #CssMenu1 li a:hover i.fa-plug, #CssMenu1 li a.ico-tap i.fa-plug, .sa-menu a:hover i.fa-sliders, .sa-menu a:hover i.fa-cog, .sa-menu a:hover i.fa-cogs, .sa-menu a:hover i.fa-plug{ animation:ico-spin 1.1s linear both; } #CssMenu1 li a:hover i.fa-heartbeat, #CssMenu1 li a.ico-tap i.fa-heartbeat, #CssMenu1 li a:hover i.fa-life-ring, #CssMenu1 li a.ico-tap i.fa-life-ring, .sa-menu a:hover i.fa-heartbeat, .sa-menu a:hover i.fa-life-ring{ animation:ico-beat .9s ease both; } #CssMenu1 li a:hover i.fa-gift, #CssMenu1 li a.ico-tap i.fa-gift, #CssMenu1 li a:hover i.fa-trophy, #CssMenu1 li a.ico-tap i.fa-trophy, #CssMenu1 li a:hover i.fa-shopping-cart, #CssMenu1 li a.ico-tap i.fa-shopping-cart, #CssMenu1 li a:hover i.fa-percent, #CssMenu1 li a.ico-tap i.fa-percent, #CssMenu1 li a:hover i.fa-ticket, #CssMenu1 li a.ico-tap i.fa-ticket, .sa-menu a:hover i.fa-gift, .sa-menu a:hover i.fa-trophy, .sa-menu a:hover i.fa-shopping-cart, .sa-menu a:hover i.fa-percent, .sa-menu a:hover i.fa-ticket{ animation:ico-hop .8s ease both; } #CssMenu1 li a:hover i.fa-bug, #CssMenu1 li a.ico-tap i.fa-bug, #CssMenu1 li a:hover i.fa-gavel, #CssMenu1 li a.ico-tap i.fa-gavel, #CssMenu1 li a:hover i.fa-ban, #CssMenu1 li a.ico-tap i.fa-ban, #CssMenu1 li a:hover i.fa-user-secret, #CssMenu1 li a.ico-tap i.fa-user-secret, .sa-menu a:hover i.fa-bug, .sa-menu a:hover i.fa-gavel, .sa-menu a:hover i.fa-user-secret{ animation:ico-shake .7s ease both; } #CssMenu1 li a:hover i.fa-paper-plane, #CssMenu1 li a.ico-tap i.fa-paper-plane, #CssMenu1 li a:hover i.fa-telegram, #CssMenu1 li a.ico-tap i.fa-telegram, #CssMenu1 li a:hover i.fa-envelope-o, #CssMenu1 li a.ico-tap i.fa-envelope-o, #CssMenu1 li a:hover i.fa-inbox, #CssMenu1 li a.ico-tap i.fa-inbox, .sa-menu a:hover i.fa-paper-plane, .sa-menu a:hover i.fa-telegram, .sa-menu a:hover i.fa-inbox{ animation:ico-fly 1s ease both; } #CssMenu1 li a:hover i.fa-book, #CssMenu1 li a.ico-tap i.fa-book, #CssMenu1 li a:hover i.fa-list-alt, #CssMenu1 li a.ico-tap i.fa-list-alt, #CssMenu1 li a:hover i.fa-list-ul, #CssMenu1 li a.ico-tap i.fa-list-ul, #CssMenu1 li a:hover i.fa-clipboard, #CssMenu1 li a.ico-tap i.fa-clipboard, #CssMenu1 li a:hover i.fa-picture-o, #CssMenu1 li a.ico-tap i.fa-picture-o, #CssMenu1 li a:hover i.fa-window-maximize, #CssMenu1 li a.ico-tap i.fa-window-maximize, #CssMenu1 li a:hover i.fa-tags, #CssMenu1 li a.ico-tap i.fa-tags, #CssMenu1 li a:hover i.fa-check-square-o, #CssMenu1 li a.ico-tap i.fa-check-square-o, .sa-menu a:hover i.fa-book, .sa-menu a:hover i.fa-list-alt, .sa-menu a:hover i.fa-list-ul, .sa-menu a:hover i.fa-picture-o, .sa-menu a:hover i.fa-window-maximize, .sa-menu a:hover i.fa-tags, .sa-menu a:hover i.fa-check-square-o{ animation:ico-tick .6s ease both; } #CssMenu1 li a:hover i.fa-bolt, #CssMenu1 li a.ico-tap i.fa-bolt, #CssMenu1 li a:hover i.fa-key, #CssMenu1 li a.ico-tap i.fa-key, #CssMenu1 li a:hover i.fa-shield, #CssMenu1 li a.ico-tap i.fa-shield, #CssMenu1 li a:hover i.fa-tachometer, #CssMenu1 li a.ico-tap i.fa-tachometer, .sa-menu a:hover i.fa-bolt, .sa-menu a:hover i.fa-key, .sa-menu a:hover i.fa-shield, .sa-menu a:hover i.fa-tachometer{ animation:ico-glow .8s ease both; } #CssMenu1 li a:hover i.fa-search, #CssMenu1 li a.ico-tap i.fa-search, #CssMenu1 li a:hover i.fa-eye, #CssMenu1 li a.ico-tap i.fa-eye, #CssMenu1 li a:hover i.fa-stethoscope, #CssMenu1 li a.ico-tap i.fa-stethoscope,#CssMenu1 li a:hover i.fa-line-chart, #CssMenu1 li a.ico-tap i.fa-line-chart, #CssMenu1 li a:hover i.fa-history, #CssMenu1 li a.ico-tap i.fa-history, #CssMenu1 li a:hover i.fa-map-signs, #CssMenu1 li a.ico-tap i.fa-map-signs, .sa-menu a:hover i.fa-search, .sa-menu a:hover i.fa-eye, .sa-menu a:hover i.fa-stethoscope, .sa-menu a:hover i.fa-line-chart, .sa-menu a:hover i.fa-history{ animation:ico-scan .9s ease both; } #CssMenu1 li a:hover i.fa-comments, #CssMenu1 li a.ico-tap i.fa-comments, #CssMenu1 li a:hover i.fa-comment, #CssMenu1 li a:hover i.fa-users, #CssMenu1 li a.ico-tap i.fa-users, .sa-menu a:hover i.fa-comments, .sa-menu a:hover i.fa-comment, .sa-menu a:hover i.fa-users{ animation:ico-type .8s ease both; } #CssMenu1 li a:hover i.fa-gamepad, #CssMenu1 li a.ico-tap i.fa-gamepad, #CssMenu1 li a:hover i.fa-server, #CssMenu1 li a.ico-tap i.fa-server, #CssMenu1 li a:hover i.fa-database, #CssMenu1 li a.ico-tap i.fa-database, #CssMenu1 li a:hover i.fa-desktop, #CssMenu1 li a.ico-tap i.fa-desktop, .sa-menu a:hover i.fa-gamepad, .sa-menu a:hover i.fa-server, .sa-menu a:hover i.fa-database{ animation:ico-flip .9s ease both; } /* Значки, у которых движение — часть смысла: играют ВСЕГДА, но медленно и мелко, чтобы не мельтешить. */ #CssMenu1 li a i.fa-heartbeat{ animation:ico-beat 2.6s ease-in-out infinite; } /* Боковая панель кнопок — те же правила, значки там же. */ .jow-s:hover i.fa-gift{ animation:ico-hop .8s ease both; } .jow-s:hover i.fa-sliders{ animation:ico-spin 1.1s linear both; } .jow-s:hover i.fa-list-alt{ animation:ico-tick .6s ease both; } .jow-s:hover i.fa-ticket{ animation:ico-hop .8s ease both; } .jow-s:hover i.fa-comments{ animation:ico-type .8s ease both; } /* Касание в выпадающих меню и на боковых кнопках: правила выше написаны через :hover, поэтому здесь просто повторяем их для класса .ico-tap — иначе на телефоне значок не оживёт. */ .sa-menu a.ico-tap i.fa-bullhorn, .sa-menu a.ico-tap i.fa-newspaper-o{ animation:ico-swing .85s ease both; transform-origin:top center; } .sa-menu a.ico-tap i.fa-sliders, .sa-menu a.ico-tap i.fa-cog, .sa-menu a.ico-tap i.fa-cogs, .sa-menu a.ico-tap i.fa-plug{ animation:ico-spin 1.1s linear both; } .sa-menu a.ico-tap i.fa-life-ring, .sa-menu a.ico-tap i.fa-heartbeat{ animation:ico-beat .9s ease both; } .sa-menu a.ico-tap i.fa-gift, .sa-menu a.ico-tap i.fa-trophy, .sa-menu a.ico-tap i.fa-shopping-cart, .sa-menu a.ico-tap i.fa-percent, .sa-menu a.ico-tap i.fa-ticket, .jow-s.ico-tap i.fa-gift, .jow-s.ico-tap i.fa-ticket{ animation:ico-hop .8s ease both; } .sa-menu a.ico-tap i.fa-bug, .sa-menu a.ico-tap i.fa-gavel, .sa-menu a.ico-tap i.fa-user-secret{ animation:ico-shake .7s ease both; } .sa-menu a.ico-tap i.fa-paper-plane, .sa-menu a.ico-tap i.fa-telegram, .sa-menu a.ico-tap i.fa-inbox{ animation:ico-fly 1s ease both; } .sa-menu a.ico-tap i.fa-book, .sa-menu a.ico-tap i.fa-list-alt, .sa-menu a.ico-tap i.fa-list-ul, .sa-menu a.ico-tap i.fa-picture-o, .sa-menu a.ico-tap i.fa-window-maximize, .sa-menu a.ico-tap i.fa-tags, .sa-menu a.ico-tap i.fa-check-square-o, .jow-s.ico-tap i.fa-list-alt{ animation:ico-tick .6s ease both; } .sa-menu a.ico-tap i.fa-bolt, .sa-menu a.ico-tap i.fa-key, .sa-menu a.ico-tap i.fa-shield, .sa-menu a.ico-tap i.fa-tachometer{ animation:ico-glow .8s ease both; } .sa-menu a.ico-tap i.fa-search, .sa-menu a.ico-tap i.fa-eye, .sa-menu a.ico-tap i.fa-stethoscope, .sa-menu a.ico-tap i.fa-line-chart, .sa-menu a.ico-tap i.fa-history{ animation:ico-scan .9s ease both; } .sa-menu a.ico-tap i.fa-comments, .sa-menu a.ico-tap i.fa-comment, .sa-menu a.ico-tap i.fa-users, .jow-s.ico-tap i.fa-comments{ animation:ico-type .8s ease both; } .sa-menu a.ico-tap i.fa-gamepad, .sa-menu a.ico-tap i.fa-server, .sa-menu a.ico-tap i.fa-database{ animation:ico-flip .9s ease both; } .jow-s.ico-tap i.fa-sliders{ animation:ico-spin 1.1s linear both; } /* Кому тяжело от движения — не играет ничего. */ @media (prefers-reduced-motion:reduce){ #CssMenu1 li a i.fa, .sa-menu a i.fa, .jow-s i.fa, #CssMenu1 li a:hover i.fa, .nav-ico-pulse{ animation:none !important; } } /* ===== ВЫПАДАЮЩЕЕ "ДОПОЛНИТЕЛЬНО" ===== */ /* На узких экранах кнопки меню переносятся на вторую строку — без !important соседняя (перенесённая) кнопка могла отрисоваться ПОВЕРХ открытого выпадающего списка ("Дополнительно" наезжает на "Администрация сайта/серверов"). Ставим явный высокий z-index и !important, чтобы порядок отрисовки не зависел от переноса строк. */ #CssMenu1 > li{ z-index:1 !important; } #CssMenu1 .has-sub{ z-index:5 !important; } #CssMenu1 .has-sub.open{ z-index:9000 !important; } /* выпадающее меню — ВСЕГДА выше остальных кнопок */ /* МОБИЛЬНАЯ ВЁРСТКА С ПЕРЕНОСОМ СТРОК: когда пункты меню не помещаются в одну строку и переносятся на следующую (например, "Административное меню" оказывается на строке НИЖЕ "О проекте"), открытая выпадашка "О проекте" визуально накладывается на кнопку следующей строки — и, если та кнопка почему-то оказывается выше по z-index (стек контекст внутри flex-обёртки с переносом ведёт себя не всегда предсказуемо), кнопка рисуется ПОВЕРХ открытого списка, обрезая его сверху. Жёстко фиксируем: все пункты шапки по умолчанию — низкий z-index, открытый — заведомо выше всех остальных кнопок. */ /* ===================================================================== ЕДИНАЯ СИСТЕМА DROPDOWN — один компонент для ВСЕХ меню шапки (разделы, административное, профиль, любые будущие). Позиционирование ВСЕГДА одинаковое, без разных правил для desktop/mobile: position:absolute относительно кнопки-родителя, по центру (translateX(-50%)), НИКОГДА не участвует в потоке документа. Если центрирование приводит к выходу за край экрана — JS-функция jmiClampDropdown() после открытия подправляет координаты (тот же принцип, что в Popper.js/Floating UI — "центр относительно кнопки, но не дальше границ экрана"). Шкала z-index: header:2900 (выше viewbar/fixbar 2790 и side-holder 2795 — иначе открытое меню уходило под них), dropdown:2000 (внутри своего стека шапки), модалки:9600+, уведомления:9999 (уже выше — см. памятку, менять не стали). ===================================================================== */ #CssMenu1{ position:relative; z-index:2900; } /* Чат и шапка стоят на одном слое (2900), а чат идёт в коде позже — поэтому его кнопка рисовалась ПОВЕРХ открытого выпадающего меню и перекрывала пункты (особенно заметно на телефоне). Пока меню открыто — опускаем чат ниже шапки. Как только меню закрыли, он возвращается на место и по-прежнему может быть выше шапки, когда панель подняли наверх экрана. */ body.jmi-menu-open #jmiLiveChat{ z-index:2500 !important; } #CssMenu1 > li{ position:relative; } #CssMenu1 > li.has-sub .submenu, #CssMenu1 > li.has-user .sa-menu{ position:absolute !important; /* Выше поля поиска (2500), которое висит под шапкой: без этого поиск просвечивал сквозь меню, и пункт «Личный кабинет» читался поверх падающих знаков. */ z-index:2600 !important; top:calc(100% + 8px) !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translateX(-50%) !important; box-sizing:border-box !important; width:max-content !important; min-width:220px !important; max-width:90vw !important; max-height:70vh !important; overflow-y:auto !important; overflow-x:hidden !important; /* Скролл держим ВНУТРИ скруглённой рамки: без этого полоса рисуется поверх угла и срезает закругление — выглядит грубо. */ overscroll-behavior:contain !important; scrollbar-width:thin !important; scrollbar-color:rgba(0,234,255,.45) transparent !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .15s ease, visibility .15s ease !important; } #CssMenu1 > li.has-sub.open .submenu, #CssMenu1 > li.has-user.open .sa-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } /* База (вне медиа-запроса) — подложка всегда скрыта, кроме как явно на мобильном при открытом меню (см. правило выше). Без этой строки на десктопе див без класса "show" мог бы получить браузерный display:block по умолчанию и закрыть собой весь сайт. */ #jmiMenuBackdrop{ display:none; } /* внешний вид самого списка (не видимость — видимость в едином блоке выше) */ #CssMenu1 .submenu{ list-style:none; padding:8px; background:#0e1420; border:1px solid rgba(0,234,255,.35); border-radius:12px; box-shadow:0 16px 34px rgba(0,0,0,.45), 0 0 22px -8px rgba(0,234,255,.6); /* СЛОЙ ВЫШЕ ПОИСКА (исправлено 10.08.2026). Поле поиска висит под шапкой на своём слое (2500). Выпадающее меню слоя не имело вовсе, поэтому поиск просвечивал сквозь него: пункт «Личный кабинет» читался поверх падающих знаков. Меню открывается по нажатию и должно перекрывать всё, что под ним, — иначе выбрать пункт трудно, а выглядит как поломка. */ position:relative; z-index:2600; } /* Пункт с открытым меню поднимаем над соседними: иначе тень и рамка меню уходят под кнопку, стоящую правее. */ /* .has-user — меню под аватаркой («Личный кабинет», «Кошелёк»…), у него свой класс, но поведение то же. */ #CssMenu1 li.has-sub.open, #CssMenu1 li.has-user.open{ position:relative; z-index:2600; } #CssMenu1 .has-sub.open > a .csub{ transform:rotate(180deg); } #CssMenu1 .has-sub > a .csub{ transition:transform .2s ease; } #CssMenu1 .submenu li{ display:block; margin:0; } #CssMenu1 .submenu li.srv-unavailable{padding:6px;margin:0;} #CssMenu1 .srv-unavailable-box{display:flex;gap:10px;align-items:flex-start;max-width:330px;padding:12px 13px;border:1px solid rgba(255,190,70,.30);border-radius:12px;background:linear-gradient(135deg,rgba(255,180,50,.10),rgba(255,255,255,.025));color:#d8e6ec;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} #CssMenu1 .srv-unavailable-box>i{color:#ffc24c;font-size:17px;margin-top:2px;flex:0 0 auto} #CssMenu1 .srv-unavailable-box b{display:block;color:#fff0bf;font-size:12.5px;margin-bottom:4px} #CssMenu1 .srv-unavailable-box span{display:block;color:#9fb0b8;font-size:11.5px;line-height:1.45;white-space:normal} html.theme-light #CssMenu1 .srv-unavailable-box{background:linear-gradient(135deg,#fff7df,#fffaf0);border-color:#d8b55d;color:#34424d;box-shadow:0 6px 16px rgba(92,69,20,.08)} html.theme-light #CssMenu1 .srv-unavailable-box>i{color:#a96d00} html.theme-light #CssMenu1 .srv-unavailable-box b{color:#6b4700} html.theme-light #CssMenu1 .srv-unavailable-box span{color:#5f6b73} #CssMenu1 .submenu li a{ display:block; text-align:left; margin:3px 0; } #CssMenu1 .admin-submenu{ width:340px !important; min-width:340px !important; padding:9px !important; } #CssMenu1 .admin-submenu li:not(.submenu-cap) > a{ display:flex; align-items:center; gap:11px; min-height:42px; box-sizing:border-box; padding:9px 38px 9px 12px !important; margin:3px 0; border-radius:9px; white-space:normal; } #CssMenu1 .admin-submenu .admin-item-icon{ flex:0 0 18px; width:18px; height:18px; margin:0 !important; text-align:center; } #CssMenu1 .admin-submenu .admin-item-label{ flex:1 1 auto; min-width:0; line-height:1.25; } #CssMenu1 .admin-submenu .page-badge{ flex:0 0 auto; margin-left:auto; } /* ---- ОЖИВЛЁННЫЕ ЗНАЧКИ ПУНКТОВ МЕНЮ ---- При наведении значок слегка подрастает, чуть отъезжает вперёд и мягко подсвечивается — пункт «отзывается» на курсор, и видно, на чём он стоит. Анимация только у значка: сам текст не прыгает, иначе строка дёргалась бы и читать её было бы неудобно. Всё выключается системной настройкой «уменьшить движение». */ #CssMenu1 li a i.fa,#CssMenu1 li a svg.jmi-lucide{ display:inline-block; transition:transform .22s cubic-bezier(.2,.9,.3,1), color .22s ease, filter .22s ease; } #CssMenu1 li a:hover i.fa,#CssMenu1 li a:hover svg.jmi-lucide{ transform:scale(1.22) translateX(2px); color:#00eaff; filter:drop-shadow(0 0 6px rgba(0,234,255,.75)); } #CssMenu1 li a:active i.fa,#CssMenu1 li a:active svg.jmi-lucide{ transform:scale(1.05) translateX(1px); } #CssMenu1 li.active > a i.fa, #CssMenu1 .submenu li a.active i.fa{ color:#00eaff; filter:drop-shadow(0 0 5px rgba(0,234,255,.6)); } @media (prefers-reduced-motion:reduce){ #CssMenu1 li a i.fa,#CssMenu1 li a svg.jmi-lucide{ transition:none; } #CssMenu1 li a:hover i.fa,#CssMenu1 li a:hover svg.jmi-lucide{ transform:none; } } /* Подпись раздела внутри выпадающего меню (Обзор / Люди / Магазин и т.д.). Сама не кликается, служит только разделителем — поэтому приглушённая, мелкая и с чертой сверху. */ #CssMenu1 .submenu li.submenu-cap{ pointer-events:none; cursor:default; padding:9px 12px 5px; margin-top:6px; font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:#7b93a0; border-top:1px solid rgba(255,255,255,.09); } #CssMenu1 .submenu li.submenu-cap.first{ margin-top:0; border-top:0; padding-top:4px; } /* ---- ДЕКОРАТИВНАЯ ПОЛОСА ПРОКРУТКИ В МЕНЮ ---- Стандартная системная полоса выглядела чужеродно: широкая, серая, прилипала к самому краю и визуально разрезала скруглённую рамку меню. Здесь она тонкая, в цвет сайта, с отступом от края (за счёт прозрачной рамки вокруг «бегунка») — то есть внутри рамки, а не поверх неё. Появляется только при наведении, чтобы в покое меню выглядело чистым. Прокрутка при этом работает как обычно — меняется только внешний вид. */ #CssMenu1 .submenu::-webkit-scrollbar, #CssMenu1 .sa-menu::-webkit-scrollbar{ width:8px; } #CssMenu1 .submenu::-webkit-scrollbar-track, #CssMenu1 .sa-menu::-webkit-scrollbar-track{ background:transparent; } #CssMenu1 .submenu::-webkit-scrollbar-thumb, #CssMenu1 .sa-menu::-webkit-scrollbar-thumb{ background-color:rgba(0,234,255,.28); border-radius:10px; border:2px solid transparent; /* отступ от края — бегунок «висит» внутри */ background-clip:content-box; } #CssMenu1 .submenu:hover::-webkit-scrollbar-thumb, #CssMenu1 .sa-menu:hover::-webkit-scrollbar-thumb{ background-color:rgba(0,234,255,.55); } #CssMenu1 .submenu::-webkit-scrollbar-thumb:hover, #CssMenu1 .sa-menu::-webkit-scrollbar-thumb:hover{ background-color:rgba(0,234,255,.85); } /* Активный пункт в подменю — выделение текущей страницы */ #CssMenu1 .submenu li a.active{ color:#eafcff; border-color:rgba(0,234,255,.5); background:rgba(0,234,255,.12); text-shadow:0 0 6px rgba(0,234,255,.4); } #CssMenu1 .submenu li a.active i{ color:#eafcff; } /* ===== ЗАГОЛОВКИ / КОНТЕНТ ===== */ .page-head{ text-align:center; margin:28px 0 6px; scroll-margin-top:calc(var(--jmi-hdrh, 110px) + 20px); } /* ---- Задача 32: кнопка "Наверх" — теперь РАКЕТА (без круга-фона, просто крупный эмодзи с тенью для читаемости на любом фоне) ---- */ #jmiToTop{ position:fixed; right:18px; bottom:22px; width:56px; height:56px; background:none; border:none; color:#00eaff; display:flex; align-items:center; justify-content:center; font-size:36px; cursor:pointer; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(0,234,255,.35)); opacity:0; visibility:hidden; z-index:9999; transition:opacity .2s ease, visibility .2s; /* transform НЕ в общем transition — сдвигом по Y во время появления управляет JS синхронно с прокруткой (см. jmiUpdateRocketVisibility), а во время полёта — кадр за кадром (см. jmiRocketLaunch). Базовое значение (72px) — это "спрятана под нижним краем экрана", ракета поднимается из-под него по мере прокрутки, а не просто проявляется. */ transform:translateY(72px); } #jmiToTop.show{ opacity:1; visibility:visible; transform:translateY(0); } /* 5.28.423 — ракета всегда живёт в корневом слое body. 9999 выше боковой сетки/«Заказов» (2795), но ниже единого стека шапки #jmiHdrStack (10000). Поэтому режим закрепления шапки больше не влияет на траекторию: ракета проходит боковые пункты и уходит ПОД поиск/шапку. */ body > #jmiToTop{ z-index:9999!important; } /* принудительно скрыта, пока открыта карточка сервера (см. monitoring.php mrOpen/mrClose) — не участвует в обычной логике показа по прокрутке */ #jmiToTop.mr-hide{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } #jmiToTop:hover{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(0,234,255,.6)); } /* пока летит — лёгкая тряска корпуса (как в мультиках при запуске) */ #jmiToTop.flying{ animation:jmiRocketShake .12s linear infinite; } @keyframes jmiRocketShake{ 0%{ margin-left:0; } 25%{ margin-left:-1px; } 50%{ margin-left:0; } 75%{ margin-left:1px; } 100%{ margin-left:0; } } /* след пламени снизу во время полёта */ #jmiToTop.flying:after{ content:""; position:absolute; left:50%; top:78%; width:7px; height:0; transform:translateX(-50%); border-radius:0 0 4px 4px; background:linear-gradient(180deg,#ffc63a,#ff4f6a,transparent); animation:jmiFlame .15s ease-in-out infinite alternate; } @keyframes jmiFlame{ from{ height:14px; opacity:.9; } to{ height:26px; opacity:.5; } } /* Развёрнута строго вверх ВСЕГДА — и в покое, и во время полёта. Раньше при взлёте поворот менялся (-45deg → 0deg), из-за чего ракета визуально "заваливалась вбок" в середине полёта — криво. Теперь угол постоянный, летит по прямой линии без поворотов. */ #jmiToTop span{ display:inline-block; transform:rotate(-45deg); transition:transform .15s ease; } #jmiToTop.flying span{ transform:rotate(-45deg) scale(1.08); } @media(max-width:640px){ #jmiToTop{ right:12px; bottom:16px; width:48px; height:48px; font-size:30px; } } /* ---- Задача 36: тонкая полоса загрузки между страницами ---- */ #jmiPageProgress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,#00eaff,#7bffc4); z-index:99998; box-shadow:0 0 10px rgba(0,234,255,.7); transition:width .2s ease, opacity .3s ease; opacity:0; } #jmiPageProgress.on{ opacity:1; } /* Mobile Chrome draws its own loading bar beneath the address bar. Suppress the duplicate site bar on touch/mobile screens. */ @media (max-width: 768px) and (pointer: coarse){ #jmiPageProgress{ display:none!important; } } .page-head h1{ display:inline-block; margin:0; font-size:30px; font-weight:800; letter-spacing:3px; text-transform:none!important; color:#eafcff; text-shadow:0 0 6px rgba(0,234,255,.55), 0 0 14px rgba(0,234,255,.34), 0 0 28px rgba(0,234,255,.20), 0 0 52px rgba(0,234,255,.10); } .page-sub{ text-align:center; color:#8aa0a8; font-size:13px; letter-spacing:1px; margin-bottom:16px; } .wrap{ max-width:1000px; margin:12px auto 40px; padding:0 18px; box-sizing:border-box; } /* ===== анимация появления ===== */ @keyframes pg-in{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} } @keyframes nav-in{ from{ opacity:0; transform:translateY(-12px);} to{ opacity:1; transform:none;} } #FlexContainer2{ animation:nav-in .35s ease both; } .page-head{ animation:pg-in .5s cubic-bezier(.2,.7,.2,1) .05s both; } .page-sub{ animation:pg-in .5s ease .12s both; } .wrap{ animation:pg-in .55s cubic-bezier(.2,.7,.2,1) .18s both; } .site-foot{ animation:pg-in .55s ease .28s both; } /* ===== метки форматирования ===== */ .f-bold{ color:#eafcff; font-weight:800; } .f-accent{ color:#00eaff; font-weight:700; text-shadow:0 0 7px rgba(0,234,255,.4), 0 0 16px rgba(0,234,255,.2); } .f-code{ font-family:Consolas,monospace; background:#0d1119; color:#56ff9e; border:1px solid rgba(0,234,255,.3); border-radius:6px; padding:2px 8px; font-size:.92em; } /* ===== ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (день/ночь) ===== */ .theme-btn{ position:fixed; right:16px; top:16px; z-index:80; width:46px; height:46px; border:none; cursor:pointer; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#0b0d12; background:#00eaff; box-shadow:0 6px 20px -4px rgba(0,234,255,.7); transition:transform .2s ease, box-shadow .2s ease, background .25s ease; } .theme-btn:hover{ transform:translateY(-2px) rotate(-12deg); box-shadow:0 10px 26px -4px rgba(0,234,255,.85); } .theme-btn:active{ transform:scale(.9); } .theme-btn .fa-sun-o{ display:none; } .nav-theme .theme-btn{position:static;display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:0;margin:0;border:1px solid rgba(255,255,255,.10);background:#141a24;color:#9fb1ba;box-shadow:none} .nav-theme .theme-btn:hover{transform:translateY(-2px) rotate(-8deg);color:#00eaff;border-color:rgba(0,234,255,.65);box-shadow:0 0 18px rgba(0,234,255,.25)} html.theme-light .theme-btn .fa-moon-o{display:none} html.theme-light .theme-btn .fa-sun-o{display:inline-block} /* 5.28.131: критическая mobile-геометрия темы задаётся в базовом CSS, до поздних декоративных правил. Поэтому при первом paint кнопка уже стоит рядом с колокольчиком и не прыгает за нижнюю границу шапки. */ @media(max-width:900px){ #CssMenu1>li.nav-theme{position:relative!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;margin:0 0 0 6px!important;padding:0!important;overflow:hidden!important} #CssMenu1>li.nav-theme>button.theme-btn.jmi-sky-theme{position:static!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;transform:none!important;overflow:hidden!important;border-radius:13px!important} } /* ===== ЯЗЫКОВАЯ ПЛАШКА (только в браузере) ===== */ .lang-box{ position:fixed; left:16px; top:16px; z-index:78; width:150px; user-select:none; } .lang-cur{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:12px; cursor:pointer; background:#141a24; border:1px solid rgba(0,234,255,.35); color:#e6f0f4; font-weight:800; letter-spacing:.5px; box-shadow:0 8px 22px -6px rgba(0,234,255,.5); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .lang-cur .fa-globe{ color:#00eaff; } .lang-cur .arw{ margin-left:auto; transition:transform .25s ease; color:#8aa0a8; } .lang-box:hover .lang-cur{ border-color:#00eaff; box-shadow:0 8px 26px -4px rgba(0,234,255,.7); } .lang-box:hover .lang-cur .arw{ transform:rotate(180deg); } .lang-list{ overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease, opacity .25s ease, margin .3s ease; margin-top:0; background:#0e1420; border-radius:12px; } .lang-box:hover .lang-list{ max-height:210px; opacity:1; margin-top:8px; border:1px solid rgba(0,234,255,.3); box-shadow:0 14px 30px -8px rgba(0,234,255,.5); } .lang-list a{ display:flex; align-items:center; gap:10px; padding:11px 14px; text-decoration:none; color:#e6f0f4; font-weight:700; border-bottom:1px solid rgba(255,255,255,.06); transition:background .15s ease, color .15s ease, padding-left .15s ease; } .lang-list a:last-child{ border-bottom:none; } .lang-list a:hover{ background:#16222f; color:#00eaff; padding-left:20px; } .lang-list a.on{ color:#00eaff; } .lang-list a .flag{ font-size:16px; font-weight:900; } /* ===== ПЛАШКА "ОТКРЫТЬ В БРАУЗЕРЕ" (только в КС) ===== */ .open-browser{ position:fixed; left:0; top:120px; z-index:60; display:flex; align-items:center; overflow:hidden; height:44px; box-sizing:border-box; max-width:38px; padding-left:12px; white-space:nowrap; text-decoration:none; color:#04121a; font-weight:800; background:linear-gradient(120deg,#00eaff,#12c2ff 55%,#8a5bff); background-size:200% 100%; background-position:0% 0%; border-radius:0 12px 12px 0; box-shadow:0 6px 22px -3px rgba(0,234,255,.65); transition:max-width .38s cubic-bezier(.2,.8,.2,1), padding-left .38s ease, background-position .5s ease, box-shadow .3s ease, transform .12s ease; animation:ob-intro 4.4s ease; } .open-browser i{ font-size:17px; min-width:17px; text-align:center; animation:ob-pulse 2.2s ease-in-out infinite; } .open-browser .ob-label{ font-size:13px; font-weight:800; letter-spacing:.4px; padding:0 16px 0 11px; } .open-browser:hover{ max-width:290px; background-position:100% 0%; box-shadow:0 10px 30px -3px rgba(138,91,255,.75); } .open-browser:active{ transform:scale(.96); } .ob-off .open-browser{ animation:none; } @keyframes ob-intro{ 0%{max-width:38px} 12%{max-width:290px} 80%{max-width:290px} 100%{max-width:38px} } @keyframes ob-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} } /* ===== ФУТЕР ===== */ .site-foot{ margin-top:34px; } .foot-line{ height:2px; margin:0 auto; width:min(1100px,calc(100% - 28px)); background:linear-gradient(90deg, transparent, rgba(0,234,255,.9), transparent); background-size:200% 100%; box-shadow:0 0 12px rgba(0,234,255,.5); animation:foot-line-vib 1.1s ease-in-out infinite, foot-line-flow 3s linear infinite; } .foot-brand{ text-align:center; padding:22px 10px 8px; font-size:34px; font-weight:900; letter-spacing:3px; color:#eafcff; text-shadow:0 0 8px rgba(0,234,255,.5), 0 0 18px rgba(0,234,255,.3), 0 0 36px rgba(0,234,255,.18), 0 0 64px rgba(0,234,255,.09); } /* Кликабельна только сама надпись (см. комментарий у разметки) — inline-block сжимает область клика ровно до видимого бейджика. */ .foot-brand-badge{ display:inline-block; cursor:pointer; } .foot-ver{ text-align:center; padding:0 10px 26px; font-size:12px; letter-spacing:.5px; color:#8aa0a8; opacity:.85; } .foot-ver:hover{ opacity:1; color:#a8bcc4; } .foot-brand i{ display:inline-block; margin-right:12px; color:#00eaff; text-shadow:0 0 8px rgba(0,234,255,.5), 0 0 20px rgba(0,234,255,.28), 0 0 40px rgba(0,234,255,.15); transform-origin:50% 55%; animation:foot-joy 2.6s ease-in-out infinite, foot-joy-glow 2.6s ease-in-out infinite; } .foot-brand-badge:hover i{ animation:foot-joy-spin .8s cubic-bezier(.3,1.4,.5,1) both; } /* при наведении — оборот */ /* джойстик: мелкая вибрация + периодический "рывок"-наклон */ @keyframes foot-joy{ 0%,100%{ transform:rotate(0deg) translateY(0); } 6%{ transform:rotate(-9deg) translate(-1px,0); } 12%{ transform:rotate(8deg) translate(1px,0); } 18%{ transform:rotate(-6deg); } 24%{ transform:rotate(5deg); } 30%{ transform:rotate(0deg); } 70%{ transform:rotate(0deg) scale(1); } 80%{ transform:rotate(0deg) scale(1.14); } 90%{ transform:rotate(0deg) scale(1); } } /* мигание свечения джойстика в такт */ @keyframes foot-joy-glow{ 0%,100%{ text-shadow:0 0 10px rgba(0,234,255,.45); } 12%{ text-shadow:0 0 22px rgba(0,234,255,.95), 0 0 38px rgba(0,234,255,.6); } 30%{ text-shadow:0 0 10px rgba(0,234,255,.45); } } /* оборот джойстика при наведении на логотип */ @keyframes foot-joy-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } } /* вибрация линии-подчёркивания (пульс тени/яркости) */ @keyframes foot-line-vib{ 0%,100%{ box-shadow:0 0 8px rgba(0,234,255,.4); transform:scaleX(1); } 50%{ box-shadow:0 0 20px rgba(0,234,255,.85); transform:scaleX(1.04); } } /* перелив блика по линии */ @keyframes foot-line-flow{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } /* выпадающее меню у своей аватарки */ #CssMenu1 .nav-item{ position:relative; } /* Меню профиля — ЗНАЧКИ В РЯД с каскадным выездом. Видимость (opacity/visibility/pointer-events/z-index/position) — ЦЕЛИКОМ в едином блоке выше (та же логика, что у .submenu), здесь остаются только внешний вид и анимация появления при .open. */ .sa-menu{ padding:7px; box-sizing:border-box; overflow:visible; background:#0e1420; border:1px solid rgba(0,234,255,.4); border-radius:14px; box-shadow:0 16px 34px rgba(0,0,0,.5); display:grid; grid-template-columns:repeat(5,32px); gap:6px; white-space:nowrap; align-items:center; } /* каждый пункт — квадратный значок */ .sa-menu a{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; line-height:1; box-sizing:border-box; border-radius:9px; text-decoration:none; color:#8aa0a8; border:1px solid rgba(255,255,255,.08) !important; background:#141a24; position:relative; min-width:0; overflow:visible; opacity:0; transform:translateY(5px); transition:background .16s ease, border-color .16s ease, color .16s ease; } /* каскадное появление значков слева направо — теперь ТОЛЬКО от .open */ #CssMenu1 .nav-item.open .sa-menu a{ animation:sa-fly .32s cubic-bezier(.2,1.3,.4,1) forwards; } .sa-menu a:nth-child(1){ animation-delay:.02s } .sa-menu a:nth-child(2){ animation-delay:.07s } .sa-menu a:nth-child(3){ animation-delay:.12s } .sa-menu a:nth-child(4){ animation-delay:.17s } .sa-menu a:nth-child(5){ animation-delay:.22s } .sa-menu a:nth-child(6){ animation-delay:.27s } .sa-menu a:nth-child(7){ animation-delay:.32s } @keyframes sa-fly{ to{ opacity:1; transform:translateY(0); } } .sa-menu a i{ margin:0 !important; padding:0 !important; color:#00eaff; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; text-align:center; width:16px; height:16px; overflow:visible; transform:none !important; transform-origin:center center!important; animation:none !important; transition:color .16s ease; } .sa-menu a:hover{ background:#16222f; color:#e6f0f4; border-color:rgba(0,234,255,.6) !important; box-shadow:0 0 14px -4px rgba(0,234,255,.5); } /* В компактном меню значки не двигаются за границы кнопок. */ @keyframes ico-crawl{ 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-2px) rotate(-12deg)} 50%{transform:translateX(2px) rotate(10deg)} 75%{transform:translateX(-1px) rotate(-6deg)} } /* всплывающая подсказка с названием пункта */ .sa-menu a em{ position:absolute; bottom:-30px; left:50%; transform:translateX(-50%) translateY(4px); white-space:nowrap; font-style:normal; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; background:#0b0f16; border:1px solid rgba(0,234,255,.4); color:#eafcff; opacity:0; visibility:hidden; transition:all .15s ease; pointer-events:none; z-index:10; } .sa-menu a:hover em{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } /* вращающаяся шестерёнка когда конструктор включён */ .ico-spin-slow{ animation:ico-spin 3s linear infinite; } /* ТЕЛЕФОН: сетка крупных значков — пальцем удобно, выглядит опрятно. Подпись под значком, чтобы было понятно без наведения. */ @media (max-width:760px){ .sa-menu{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(260px, calc(100vw - 20px)); padding:10px; } .sa-menu a{ width:auto; height:auto; flex-direction:column; gap:5px; padding:11px 4px 9px; border-radius:11px; opacity:1 !important; transform:none !important; animation:none !important; } .sa-menu a i{ font-size:19px; width:auto; height:auto; } /* подпись под значком — мелкая, но читаемая */ .sa-menu a em{ position:static; opacity:1; visibility:visible; transform:none; background:none; border:none; padding:0; color:#8aa0a8; font-size:9.5px; font-weight:700; white-space:normal; line-height:1.2; text-align:center; display:block; max-width:100%; } .sa-menu a:hover em, .sa-menu a:active em{ color:#eafcff; } } @media (max-width:400px){ .sa-menu{ grid-template-columns:repeat(3,1fr); } } /* ---- Режим "текстом" — тот же стиль, что и в выпадающих меню разделов сайта (.submenu li a) — рамка+фон на каждый пункт, ровные блоки во всю ширину, с небольшим отступом между собой, и подсветка ТЕКУЩЕЙ страницы, чтобы было видно, где ты сейчас находишься. Раньше здесь были убраны все рамки/фон — казалось, что так чище, но по факту стало "плоско и непонятно, где что" — вернули стиль как у остальных меню на сайте, для единообразия. */ .sa-menu.mode-text{ display:flex !important; flex-direction:column !important; gap:0 !important; align-items:stretch !important; justify-content:flex-start !important; width:auto !important; min-width:230px !important; max-width:calc(100vw - 24px) !important; grid-template-columns:none !important; padding:8px !important; white-space:normal !important; } .sa-menu.mode-text a{ display:block !important; width:auto !important; height:auto !important; text-align:left !important; margin:3px 0 !important; padding:10px 14px !important; border-radius:10px !important; box-sizing:border-box !important; background:#141a24 !important; border:1px solid rgba(255,255,255,.08) !important; color:#cdd9de !important; opacity:1 !important; transform:none !important; animation:none !important; } .sa-menu.mode-text a:hover{ border-color:rgba(0,234,255,.5) !important; color:#eafcff !important; background:#16222f !important; } .sa-menu.mode-text a.active{ border-color:#00eaff !important; color:#eafcff !important; background:linear-gradient(135deg,#16222f,#0e1a28) !important; box-shadow:0 0 14px -4px rgba(0,234,255,.35) !important; } .sa-menu.mode-text a i{ display:inline-block !important; width:16px !important; text-align:center !important; font-size:14px !important; margin-right:8px !important; color:#00eaff !important; flex-shrink:0 !important; } .sa-menu.mode-text a.active i{ color:#eafcff !important; } .sa-menu.mode-text a em{ display:inline !important; position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; background:none !important; border:none !important; padding:0 !important; margin:0 !important; color:inherit !important; font-size:13.5px !important; font-weight:700 !important; white-space:nowrap !important; text-align:left !important; line-height:1.3 !important; max-width:none !important; } /* 5.28.787 — личный кошелёк: одна типографика с пунктами профиля. Отдельная вложенная банкнота больше не наследует размеры и отступы иконки меню; компактный режим значков не меняется. */ .sa-menu a.jmi-wallet-nav em{font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-style:normal!important;font-weight:700!important;letter-spacing:0!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-amount{font-variant-numeric:tabular-nums;font-weight:800!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-coin{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-coin i.fa.wl-c{display:inline-block!important;flex:none!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;font-size:13px!important;line-height:1!important;color:#ffc63a!important;font-family:FontAwesome!important;filter:drop-shadow(0 0 4px rgba(255,198,58,.35))!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-label{font:inherit!important;color:inherit!important} .sa-menu.mode-text a.jmi-wallet-nav, .sa-menu.mode-text-pc a.jmi-wallet-nav, .sa-menu.mode-text-mobile a.jmi-wallet-nav{align-items:center!important;gap:0!important} .sa-menu.mode-text a.jmi-wallet-nav em{display:inline-flex!important;align-items:center!important;gap:5px!important;vertical-align:middle!important;white-space:nowrap!important;line-height:1.3!important} @media(min-width:761px){.sa-menu.mode-text-pc a.jmi-wallet-nav em{display:inline-flex!important;align-items:center!important;gap:5px!important;vertical-align:middle!important;white-space:nowrap!important;line-height:1.3!important}} @media(max-width:760px){.sa-menu.mode-text-mobile a.jmi-wallet-nav em{display:inline-flex!important;align-items:center!important;gap:5px!important;vertical-align:middle!important;white-space:nowrap!important;line-height:1.3!important}} html.theme-light .sa-menu a.jmi-wallet-nav .jmi-wallet-coin i.fa.wl-c{color:#ad790c!important;filter:none!important} /* 5.28.788 — кошелёк: собственные SVG-значки вместо вложенных FontAwesome i. Общие правила .sa-menu a i больше не скрывают/искажают банкноту; размеры и типографика совпадают с остальными пунктами в обеих темах. */ .sa-menu.mode-text a.jmi-wallet-nav, .sa-menu.mode-text-pc a.jmi-wallet-nav, .sa-menu.mode-text-mobile a.jmi-wallet-nav{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-leading{display:block!important;width:16px!important;height:16px!important;min-width:16px!important;flex:0 0 16px!important;color:#00eaff!important;overflow:visible!important} .sa-menu a.jmi-wallet-nav em{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:5px!important;position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;white-space:nowrap!important;font:700 13.5px/1.3 "Segoe UI",Tahoma,Arial,sans-serif!important;letter-spacing:0!important;min-width:0!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-label{font:inherit!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-amount{font:800 13.5px/1.3 "Segoe UI",Tahoma,Arial,sans-serif!important;font-variant-numeric:tabular-nums!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-coin{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 20px!important;width:20px!important;height:18px!important;color:#ffc63a!important;filter:drop-shadow(0 0 4px rgba(255,198,58,.35))!important} .sa-menu a.jmi-wallet-nav .jmi-wallet-coin svg{display:block!important;width:20px!important;height:18px!important;flex:none!important} html.theme-light .sa-menu a.jmi-wallet-nav .jmi-wallet-leading{color:#a36c00!important} html.theme-light .sa-menu a.jmi-wallet-nav .jmi-wallet-coin{color:#ad790c!important;filter:none!important} @media(max-width:760px){.sa-menu.mode-text-mobile a.jmi-wallet-nav em{font-size:13.5px!important}} /* глобальные объявления под шапкой (inc/announce.php) */ .annbar{ width:100%; font-size:13px; font-weight:600; } .annbar .ann-in{ max-width:1100px; margin:0 auto; padding:9px 16px; display:flex; align-items:flex-start; gap:10px; } .annbar .ann-ico{ flex-shrink:0; font-size:15px; margin-top:1px; } .annbar .ann-tx{ flex:1 1 auto; min-width:0; line-height:1.55; } .annbar .ann-summary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .annbar .ann-tx b{ display:block; font-weight:900; } .annbar .ann-details{ display:block; margin-top:4px; font-weight:500; opacity:.95; } .annbar .ann-details[hidden]{ display:none; } .annbar .ann-more{ border:0; padding:0; background:none; color:inherit; font:inherit; font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:2px; cursor:pointer; opacity:.8; } .annbar .ann-more:hover{ opacity:1; } .annbar .ann-x{ flex-shrink:0; color:inherit; opacity:.55; text-decoration:none; padding:2px 6px; font-size:14px; } .annbar .ann-x:hover{ opacity:1; } /* На телефоне текста и так много — уменьшаем, чтобы объявление не занимало полэкрана и не отодвигало содержимое страницы. */ @media(max-width:640px){ .annbar{ font-size:12px; } .annbar .ann-in{ padding:8px 12px; gap:8px; } } /* ================= ПОИСК ПО САЙТУ ================= Держится у шапки на каждой странице. Справа, но с отступом — чтобы не залезать под кнопки в правом углу. Оформление намеренно заметное: поиском пользуются часто, и он должен бросаться в глаза среди прочих кнопок. Отсюда светящаяся рамка, уголки-скобки и бегущая полоса сканирования — всё рисуется средствами страницы, без единой картинки. Слой ниже шапки (2900) и гирлянды (2850): поле висит ПОД шапкой, а не поверх меню. */ .gs-hang{ position:absolute; right:24px; top:100%; margin-top:6px; width:min(300px, 26vw); /* СЛОЙ НИЖЕ САМОЙ ШАПКИ (исправлено 10.08.2026). Тут была тонкость, из-за которой две прошлые попытки не сработали: блок шапки (#FlexContainer2) образует собственный слой со своим порядком. Всё, что внутри него — включая выпадающие меню, — сравнивается с соседями по ЕГО значению, а не по своему. Поэтому меню с любым, сколь угодно большим числом оставалось ниже поиска, который лежит рядом с шапкой, а не внутри неё. Правильно не поднимать меню, а опустить поиск: 1 против 2 у шапки. Страницу поиск всё равно перекрывает — весь блок шапки лежит выше содержимого. */ z-index:1; } /* Если экран узковат для отступа справа, поле пришлось бы наложить на содержимое — лучше сузить его, чем закрывать баннеры. */ @media(max-width:1500px){ .gs-hang{ right:18px; width:min(250px, 22vw); } } @media(max-width:1200px) and (min-width:901px){ .gs-hang{ right:16px; width:min(260px, calc(100vw - 210px)); } } /* Поле висит ПОД шапкой и принадлежит ей: точка отсчёта — сам блок шапки. Отдельного крепления к окну у него нет, поэтому и переключать при откреплении нечего — оно просто едет с шапкой. overflow у шапки не режет поле: оно выходит за её нижний край. */ #jmiHdrStack{ overflow:visible; } .gsearch{ position:relative; display:flex; align-items:center; z-index:1; } .gsearch i{ position:absolute; left:13px; color:#00eaff; font-size:13px; pointer-events:none; text-shadow:0 0 8px rgba(0,234,255,.8); transition:color .15s; } .gsearch input[type=search]{ width:100%; box-sizing:border-box; /* Тёмное стекло с лёгким уклоном оттенка — как панель прибора. */ /* Прозрачный фон: под полем идёт матричный дождь, и сплошная заливка полностью бы его скрыла. */ background:linear-gradient(180deg, rgba(10,20,30,.55), rgba(8,14,22,.6)); border:1px solid rgba(0,234,255,.42); border-radius:3px; color:#a8f4ff; padding:10px 13px 10px 36px; font-size:12.5px; font-family:Consolas, "Courier New", monospace; letter-spacing:.6px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s; /* Свечение наружу и тонкая подсветка изнутри. */ box-shadow:0 0 14px -2px rgba(0,234,255,.35), inset 0 0 12px -6px rgba(0,234,255,.5); } .gsearch input[type=search]::placeholder{ color:#3d6b7a; letter-spacing:.8px; } .gsearch input[type=search]:focus{ border-color:#00eaff; color:#eafcff; background:linear-gradient(180deg, rgba(12,26,38,.97), rgba(9,18,28,.97)); box-shadow:0 0 22px -1px rgba(0,234,255,.6), inset 0 0 16px -5px rgba(0,234,255,.7); } .gsearch input[type=search]::-webkit-search-cancel-button{ filter:invert(.6); } /* Уголки-скобки по краям — как рамка прицела. При наведении разъезжаются наружу: мелкое движение, которое подсказывает, что на это можно нажать. */ .gs-cor{ position:absolute; width:9px; height:9px; pointer-events:none; border:1.5px solid #00eaff; opacity:.75; transition:transform .2s, opacity .2s; filter:drop-shadow(0 0 4px rgba(0,234,255,.7)); } .gs-cor.tl{ left:-3px; top:-3px; border-right:none; border-bottom:none; } .gs-cor.tr{ right:-3px; top:-3px; border-left:none; border-bottom:none; } .gs-cor.bl{ left:-3px; bottom:-3px; border-right:none; border-top:none; } .gs-cor.br{ right:-3px; bottom:-3px; border-left:none; border-top:none; } .gs-hang:hover .gs-cor, .gs-hang:focus-within .gs-cor{ opacity:1; } .gs-hang:hover .gs-cor.tl, .gs-hang:focus-within .gs-cor.tl{ transform:translate(-3px,-3px); } .gs-hang:hover .gs-cor.tr, .gs-hang:focus-within .gs-cor.tr{ transform:translate(3px,-3px); } .gs-hang:hover .gs-cor.bl, .gs-hang:focus-within .gs-cor.bl{ transform:translate(-3px,3px); } .gs-hang:hover .gs-cor.br, .gs-hang:focus-within .gs-cor.br{ transform:translate(3px,3px); } /* Матричный дождь внутри поля. Лежит ПОД текстом и над фоном, нажатия не перехватывает. Приглушён: это фон, а не картинка — яркий дождь мешал бы прочесть подсказку «Поиск по сайту». */ .gs-rain{ position:absolute; left:1px; top:1px; right:1px; bottom:1px; width:calc(100% - 2px); height:calc(100% - 2px); border-radius:3px; pointer-events:none; opacity:.5; z-index:0; /* Края растворяем, чтобы дождь не обрывался ровной линией у рамки — так он выглядит уходящим вглубь. */ -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); transition:opacity .25s; } /* Начали печатать — дождь уходит: он не должен мешать читать собственный текст. */ .gs-hang:focus-within .gs-rain{ opacity:0; } @media (prefers-reduced-motion: reduce){ .gs-rain{ display:none; } } /* Полоса сканирования: тонкая линия света идёт сверху вниз. Медленно и полупрозрачно — она должна привлекать взгляд, а не мигать на краю зрения. */ .gs-scan{ position:absolute; left:1px; right:1px; top:0; height:2px; pointer-events:none; border-radius:3px; opacity:.55; background:linear-gradient(90deg, transparent, rgba(0,234,255,.9) 20%, rgba(120,255,220,.95) 50%, rgba(0,234,255,.9) 80%, transparent); animation:gsScan 3.4s linear infinite; } @keyframes gsScan{ 0% { transform:translateY(0); opacity:0; } 12% { opacity:.6; } 88% { opacity:.6; } 100% { transform:translateY(38px); opacity:0; } } /* Пока человек печатает, полоса не нужна: она отвлекает ровно тогда, когда нужно смотреть на текст. */ .gs-hang:focus-within .gs-scan{ animation:none; opacity:0; } /* Кому движение мешает — не двигаем ничего. Для части людей это не вопрос вкуса: анимация вызывает головокружение. */ @media (prefers-reduced-motion: reduce){ .gs-scan{ animation:none; opacity:.35; } .gs-cor{ transition:none; } } /* ---- DESKTOP: ПОИСК ПО УМОЛЧАНИЮ СВЁРНУТ ---- На ПК поиск занимает только компактную кнопку с лупой. Само поле раскрывается в прежний полный вариант по нажатию (focus) и снова сворачивается, когда фокус уходит. Мобильную версию не трогаем: ниже остаётся прежняя полноценная строка поиска. */ @media(min-width:901px){ .gs-hang{ width:46px; transition:width .28s cubic-bezier(.2,.8,.2,1); } .gs-hang:focus-within{ width:min(300px, 26vw); } .gs-hang:not(:focus-within) .gsearch input[type=search]{ padding-left:46px; padding-right:0; color:transparent; cursor:pointer; caret-color:transparent; } .gs-hang:not(:focus-within) .gsearch input[type=search]::placeholder{ opacity:0; } .gs-hang:not(:focus-within) .gsearch i{ left:50%; transform:translateX(-50%); font-size:16px; } .gs-hang:focus-within .gsearch i{ left:13px; transform:none; font-size:13px; } /* В свёрнутом состоянии оставляем Matrix живой: именно он делает компактную кнопку поиска частью фирменной шапки. Скрываем только сканирующую линию и уголки — на 46 px они визуально перегружают кнопку. Сам дождь остаётся под лупой. */ .gs-hang:not(:focus-within) .gs-scan, .gs-hang:not(:focus-within) .gs-cor{ opacity:0; pointer-events:none; } .gs-hang:not(:focus-within) .gs-rain{ opacity:.58; pointer-events:none; } } @media(min-width:901px) and (max-width:1500px){ .gs-hang:focus-within{ width:min(250px, 22vw); } } @media(min-width:901px) and (max-width:1200px){ .gs-hang:focus-within{ width:min(260px, calc(100vw - 210px)); } } /* ---- НА ТЕЛЕФОНЕ ---- У шапки на узком экране места нет — там всё занято кнопками, и поле ложилось прямо поверх заголовка страницы. Поэтому оно становится последней строкой самой шапки: во всю ширину, под кнопками. Шапка от этого чуть выше, зато ничего не перекрыто. Эффекты остаются — и дождь, и сканирование: они и есть то, ради чего всё это делалось. Дождь считается реже, чтобы не расходовать заряд впустую. */ @media(max-width:900px){ /* ---- НА ТЕЛЕФОНЕ: ПРОСТАЯ ПОЛОСА ---- Всё убранство — уголки, сканирование, матрица, свечение — рассчитано на компактное поле сбоку от заголовка. Растянутое на всю ширину телефона, оно превращается в пёструю ленту: уголки болтаются по краям экрана, знаки сыплются в узкой щели. Поэтому здесь просто аккуратная строка поиска. Заодно это экономит заряд: считать нечего. */ .gs-hang{ position:static; width:auto; max-width:none; margin:8px auto 2px; padding:0 10px; box-sizing:border-box; } .gs-scan, .gs-rain, .gs-cor{ display:none !important; } .gsearch input[type=search]{ /* Плотный ровный фон и обычная скруглённая рамка — как у остальных полей сайта, ничего особенного. */ background:#0e1420; border:1px solid rgba(255,255,255,.14); border-radius:11px; color:#eafcff; letter-spacing:0; font-family:inherit; /* 16 пикселей — иначе телефон приближает страницу, как только человек касается поля, и обратно не отдаляет. */ font-size:16px; padding:11px 13px 11px 38px; box-shadow:none; } .gsearch input[type=search]::placeholder{ color:#6f8189; letter-spacing:0; } /* При наборе — только смена цвета рамки, без свечения и «прицела»: на телефоне это выглядит навязчиво. */ .gsearch input[type=search]:focus{ border-color:rgba(0,234,255,.55); background:#0e1420; box-shadow:none; } .gsearch i{ left:14px; color:#6f8189; text-shadow:none; } .gsearch:focus-within i{ color:#00eaff; } } /* полоса режима просмотра */ /* ВАЖНО: position:fixed, а не relative. Раньше это правило стояло ниже общего и перебивало его — полоса оставалась в потоке страницы и наезжала на заголовок. Фон обязательно НЕПРОЗРАЧНЫЙ: полоса теперь висит поверх содержимого. */ .viewbar{ text-align:center; padding:10px 16px; background:#2a2313; border-bottom:1px solid rgba(255,198,58,.5); color:#ffc63a; font-size:13px; font-weight:800; } .viewbar i{ margin-right:8px; } .viewbar a{ display:inline-block; margin-left:14px; padding:5px 14px; border-radius:9px; text-decoration:none; background:rgba(255,198,58,.16); border:1px solid rgba(255,198,58,.5); color:#ffc63a; font-size:12px; } .viewbar a:hover{ background:rgba(255,198,58,.3); } /* кнопка входа через Steam */ #CssMenu1 li a.sa-btn{ border-color:rgba(86,255,158,.45); color:#56ff9e; } #CssMenu1 li a.sa-btn:hover{ border-color:#56ff9e; box-shadow:0 0 16px -5px #56ff9e; color:#b8ffd6; } #CssMenu1 li a.sa-btn.user{ border-color:rgba(0,234,255,.5); color:#e6f0f4; padding-top:5px; padding-bottom:5px; } #CssMenu1 li a.sa-btn.user:hover{ border-color:#00eaff; box-shadow:0 0 16px -5px #00eaff; } #CssMenu1 li a.sa-btn.user.adm{ border-color:rgba(255,198,58,.55); } .sa-ava{ width:24px; height:24px; border-radius:50%; vertical-align:middle; margin-right:8px; border:1px solid rgba(0,234,255,.5); background:#16222f; object-fit:cover; } .sa-nick{ vertical-align:middle; font-weight:800; max-width:130px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sa-badge{ vertical-align:middle; margin-left:8px; font-size:9.5px; font-weight:900; letter-spacing:.6px; background:#ffc63a; color:#241a00; border-radius:20px; padding:2px 7px; } .sa-out{ vertical-align:middle; margin-left:9px; color:#8aa0a8; font-size:12px; } /* ---- Меню «Погода» в шапке (только владелец) ---- */ /* Сама кнопка: когда что-то включено вручную — подсвечивается и показывает счётчик, чтобы было видно, не открывая список. */ /* Кнопка — только значок, без подписи: стоит сразу за ником и не должна перетягивать на себя внимание. Поэтому квадратная и компактная, а не как обычный пункт меню с текстом. */ #CssMenu1 li a.jmi-wx-main{ position:relative; padding:0 !important; box-sizing:border-box; width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; display:inline-flex !important; align-items:center; justify-content:center; } #CssMenu1 li a.jmi-wx-main i{ margin:0 !important; font-size:15px; } /* Эмодзи-значок (тыква): в Font Awesome 4.7 тыквы нет, поэтому рисуем системным эмодзи. Выравниваем по размеру со значками шрифта, чтобы кнопка не «прыгала» при смене эффекта. */ .wx-em{ display:inline-block; font-size:14px; line-height:1; font-style:normal; text-align:center; } #CssMenu1 li a.jmi-wx-main .wx-em{ font-size:15px; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it .wx-em{ width:17px; flex:0 0 auto; } /* Счётчик вылезает за угол кнопки, поэтому обрезать его нельзя: снимаем overflow у кнопки и у самого пункта меню — иначе единичка срезалась ровно наполовину. */ #CssMenu1 li.jmi-wx{ overflow:visible !important; } #CssMenu1 li a.jmi-wx-main{ overflow:visible !important; } #CssMenu1 li a.jmi-wx-main.on{ border-color:rgba(95,208,255,.65) !important; color:#dff4ff !important; box-shadow:0 0 14px -5px rgba(95,208,255,.7); } /* Эмодзи цветные сами по себе, красить их нельзя. Поэтому когда ничего не включено — приглушаем значок (серый и полупрозрачный), а когда включено — показываем в полном цвете. Так по одному взгляду понятно, работает оформление или нет. */ #CssMenu1 li a.jmi-wx-main .wx-em{ filter:grayscale(1); opacity:.6; transition:filter .16s ease, opacity .16s ease; } #CssMenu1 li a.jmi-wx-main.on .wx-em{ filter:none; opacity:1; } /* Счётчик включённого — маленьким кружком в углу значка. */ #CssMenu1 li a.jmi-wx-main .jmi-wx-cnt{ position:absolute; top:-3px; right:-3px; margin:0; min-width:14px; height:14px; line-height:14px; font-size:9px; padding:0 3px; box-sizing:border-box; border:1px solid #0b0f16; z-index:3; pointer-events:none; } .jmi-wx-cnt{ display:inline-block; min-width:16px; height:16px; line-height:16px; margin-left:6px; padding:0 4px; border-radius:9px; font-size:10px; font-weight:900; background:#5fd0ff; color:#04202c; text-align:center; vertical-align:middle; } /* Список эффектов: слева иконка, по центру название, справа тумблер. */ #CssMenu1 .jmi-wx-menu{ min-width:250px; } /* Пунктов в этом меню много (эффекты + быстрый переход), и оно вытягивалось почти на весь экран. Ограничиваем высоту примерно пятью строками, остальное прокручивается ВНУТРИ меню — страница при этом не растягивается. Полоса своя, тонкая: системная на тёмном фоне выглядит чужеродно. */ #CssMenu1 .jmi-wx-menu{ max-height: 268px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #2b3a4d transparent; } #CssMenu1 .jmi-wx-menu::-webkit-scrollbar{ width:8px; } #CssMenu1 .jmi-wx-menu::-webkit-scrollbar-track{ background:transparent; } #CssMenu1 .jmi-wx-menu::-webkit-scrollbar-thumb{ background:#2b3a4d; border-radius:8px; border:2px solid #141a24; } #CssMenu1 .jmi-wx-menu::-webkit-scrollbar-thumb:hover{ background:#3d5570; } /* Заголовки разделов не уезжают при прокрутке — так понятно, к чему относится то, что сейчас видно. */ #CssMenu1 .jmi-wx-menu li.submenu-cap{ position:sticky; top:0; z-index:2; background:#141a24; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it{ display:flex !important; align-items:center; gap:9px; padding:9px 12px !important; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it .wx-i{ width:17px; text-align:center; flex:0 0 auto; color:#7b93a0; transition:color .16s ease; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it .wx-n{ flex:1 1 auto; text-align:left; white-space:nowrap; } /* Мини-тумблер справа — тот же язык, что и в настройках сайта. */ .wx-sw{ flex:0 0 auto; width:32px; height:17px; border-radius:11px; position:relative; background:#243040; border:1px solid rgba(255,255,255,.14); transition:all .16s ease; } .wx-dot{ position:absolute; left:2px; top:1px; width:13px; height:13px; border-radius:50%; background:#8aa0a8; transition:all .16s ease; } /* Включено — тумблер сдвинут и подсвечен, иконка оживает. */ #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.on .wx-i, #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.auto-on .wx-i{ color:#9ddcff; } /* Значок пункта: выключен — серый, включён — цветной. */ #CssMenu1 .jmi-wx-menu li a.jmi-wx-it .wx-em{ filter:grayscale(1); opacity:.55; transition:filter .16s ease, opacity .16s ease; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.on .wx-em, #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.auto-on .wx-em{ filter:none; opacity:1; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.on .wx-sw, #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.auto-on .wx-sw{ background:rgba(95,208,255,.28); border-color:#5fd0ff; } #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.on .wx-dot, #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.auto-on .wx-dot{ left:16px; background:#5fd0ff; } .wx-auto{ flex:0 0 auto; padding:2px 5px; border-radius:9px; background:rgba(95,208,255,.16); color:#9ddcff; font-size:8px; font-weight:900; letter-spacing:.6px; } /* Пока идёт запрос — приглушаем и не даём нажать повторно. */ #CssMenu1 .jmi-wx-menu li a.jmi-wx-it.busy{ opacity:.5; pointer-events:none; } /* Поясняющая строка внизу меню — не кликается. */ #CssMenu1 .jmi-wx-menu li.jmi-wx-note{ pointer-events:none; padding:8px 12px 4px; font-size:10.5px; line-height:1.45; color:#7b93a0; } /* Фирменный заголовок блока: значок со свечением + переливающийся текст. Используется на страницах мониторинга, банов и т.д. */ .jmi-cap{ overflow:hidden; padding:8px 4px 12px; } .jmi-cap .ic{ float:left; width:36px; height:36px; line-height:36px; text-align:center; border-radius:11px; background:linear-gradient(135deg, rgba(0,234,255,.22), rgba(86,255,158,.18)); border:1px solid rgba(0,234,255,.45); color:#00eaff; font-size:16px; margin:2px 13px 0 0; animation:jmi-glow 2.6s ease-in-out infinite; } .jmi-cap .tx{ float:left; font-size:16px; font-weight:900; letter-spacing:2.5px; line-height:36px; background:linear-gradient(90deg,#00eaff,#56ff9e,#00eaff); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:jmi-flow 4s linear infinite; } .jmi-cap .ln{ display:block; overflow:hidden; height:36px; } .jmi-cap .ln:after{ content:""; display:block; margin:18px 6px 0 14px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(0,234,255,.5), transparent); } @keyframes jmi-glow{ 0%,100%{ box-shadow:0 0 9px -3px rgba(0,234,255,.75); } 50%{ box-shadow:0 0 20px -2px rgba(0,234,255,.9); } } @keyframes jmi-flow{ 0%{ background-position:0% center; } 100%{ background-position:200% center; } } /* всплывающее уведомление */ .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:#16222f; border:1px solid rgba(86,255,158,.55); color:#e6f0f4; border-radius:12px; padding:12px 20px; font-size:13.5px; font-weight:700; letter-spacing:.3px; box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 22px -8px #56ff9e; z-index:9999; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; } .toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .toast i{ color:#56ff9e; margin-right:10px; } /* ===== АВАТАРКИ: круглые, без квадратной рамки из-под свечения ===== */ .news-ava, .admin-ava, .chat-ava-img, .cab-ava, .sa-ava{ border-radius:50% !important; background:transparent !important; overflow:hidden; /* свечение строго по кругу: box-shadow даёт квадратную подложку у прозрачных краёв, поэтому используем drop-shadow по форме */ box-shadow:none !important; /* свечение по форме круга; радиус небольшой, чтобы не упиралось в край области отрисовки и не появлялось квадратной рамки */ filter:drop-shadow(0 0 5px rgba(0,234,255,.45)); } .ava-wrap{ background:transparent !important; box-shadow:none !important; } /* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */ @media (max-width:760px){ #FlexContainer2{ padding:10px 6px; } #CssMenu1 li a{ font-size:13px; padding:9px 12px; } .page-head h1{ font-size:26px; letter-spacing:2px; word-break:break-word; } .page-sub{ font-size:13px; } .foot-brand{ font-size:26px; letter-spacing:2px; } /* карточки на всю ширину, текст переносится, ничего не вылезает */ /* карточки во всю ширину. ВАЖНО: display:block обязателен — иначе inline-block карточки (контакты) сжимаются по содержимому и получаются разной ширины. */ .news-card, .rblock, .plan, .choice, .cmd-row, .cont-card, .ban-row, .help-step{ display:block !important; width:auto !important; margin-left:10px !important; margin-right:10px !important; } .news-title, .rhead, .ban-nick, .cont-val{ word-break:break-word; } /* карточки админов: во всю ширину, имя переносится, ничего не обрезается */ .admin-card{ width:auto !important; margin:8px 10px !important; } .admin-info{ min-width:0; overflow:hidden; } .admin-name{ word-break:break-word; font-size:16px !important; } .admin-srv, .admin-time{ word-break:break-word; } } @media (max-width:480px){ #CssMenu1 li a{ font-size:12px; padding:8px 10px; } .page-head h1{ font-size:22px; } .foot-brand{ font-size:22px; } } /* ===== мобильная адаптация ===== */ @media (max-width:640px){ .page-head h1{ font-size:23px; letter-spacing:2px; } #CssMenu1 li a{ font-size:14px; padding:8px 11px; } #CssMenu1 li a i{ margin-right:5px; } #CssMenu1 .submenu li a{ white-space:nowrap; } .wrap{ padding:0 12px; } .theme-btn{ width:40px; height:40px; font-size:16px; } .lang-box{ width:132px; } .open-browser{ top:auto; bottom:16px; } } .jmi-notebook-pop{position:fixed;right:24px;bottom:24px;z-index:4200;width:min(620px,calc(100vw - 30px));height:min(650px,calc(100vh - var(--jmi-safe-top,80px) - 24px));min-width:180px;min-height:160px;max-width:calc(100vw - 12px);max-height:calc(100vh - var(--jmi-safe-top,80px) - 12px);resize:none;container-type:inline-size;display:none;overflow:hidden;border:1px solid rgba(0,234,255,.55);border-radius:18px;background:#0b1119;box-shadow:0 0 38px rgba(0,0,0,.7),0 0 24px rgba(0,234,255,.17)} .jmi-notebook-pop.open{display:flex;flex-direction:column;animation:jmiNotebookIn .2s ease both}.jmi-notebook-head{height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(0,234,255,.25);color:#eaffff;font-weight:900;cursor:move;touch-action:none;user-select:none}.jmi-notebook-head i{color:#00eaff;margin-right:7px}.jmi-notebook-head button{width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#121c28;color:#cfe5eb;font-size:21px;cursor:pointer}.jmi-notebook-pop iframe{width:100%;height:100%;border:0;background:#0b1119}html.theme-light .jmi-notebook-pop{background:#fffaf1;border-color:#d6b45e;box-shadow:0 18px 42px rgba(72,54,26,.20),0 0 18px rgba(197,145,27,.10)}html.theme-light .jmi-notebook-head{background:#fff7e8;border-bottom-color:#ddc78f;color:#26313b}html.theme-light .jmi-notebook-head i{color:#a8740a}html.theme-light .jmi-notebook-head button{background:#fffdf8;border-color:#d8cbb7;color:#59666f}html.theme-light .jmi-notebook-pop iframe{background:#fffaf1}.jmi-notebook-resize{position:absolute;z-index:8;touch-action:none;user-select:none}.jmi-notebook-resize-r{top:48px;right:0;bottom:18px;width:10px;cursor:ew-resize}.jmi-notebook-resize-b{left:0;right:18px;bottom:0;height:10px;cursor:ns-resize}.jmi-notebook-resize-br{right:0;bottom:0;width:24px;height:24px;cursor:nwse-resize;border-radius:0 0 16px 0;background:linear-gradient(135deg,transparent 0 42%,rgba(0,234,255,.25) 43% 52%,transparent 53% 61%,rgba(0,234,255,.7) 62% 70%,transparent 71%)}.jmi-notebook-resize-br:after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid #00eaff;border-bottom:2px solid #00eaff}.jmi-notebook-resize-r:hover{border-right:3px solid rgba(0,234,255,.75)}.jmi-notebook-resize-b:hover{border-bottom:3px solid rgba(0,234,255,.75)}html.theme-light .jmi-notebook-resize-br{background:linear-gradient(135deg,transparent 0 42%,rgba(183,126,7,.20) 43% 52%,transparent 53% 61%,rgba(183,126,7,.68) 62% 70%,transparent 71%)}html.theme-light .jmi-notebook-resize-br:after{border-color:#a8740a}html.theme-light .jmi-notebook-resize-r:hover{border-right-color:rgba(168,116,10,.7)}html.theme-light .jmi-notebook-resize-b:hover{border-bottom-color:rgba(168,116,10,.7)}html.jmi-notebook-resizing,html.jmi-notebook-resizing *{user-select:none!important}@container (max-width:360px){.jmi-notebook-head{height:42px;flex-basis:42px;padding:0 9px;font-size:12px}.jmi-notebook-head i{margin-right:4px}.jmi-notebook-head button{width:27px;height:27px;font-size:18px}}@container (max-width:285px){.jmi-notebook-head{font-size:10px;padding:0 7px}.jmi-notebook-head button{width:25px;height:25px}}@keyframes jmiNotebookIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:640px){.jmi-notebook-pop{min-width:180px;min-height:160px;max-width:calc(100vw - 12px);max-height:calc(100vh - var(--jmi-safe-top,80px) - 12px)}} /* ================================================================== БОКОВОЕ МЕНЮ (выбор игры и сервера) Устройство простое: .side-holder — нулевой по высоте якорь в потоке страницы; .side — сама панель, закреплена (fixed) у левого края; .side-tab — узкий язычок, видимый когда меню закрыто; .side-body — содержимое, появляется когда у .side есть .open. ГЛАВНОЕ ПРАВИЛО: меню всегда начинается ПОД шапкой и растёт ВНИЗ. Высоту шапки подставляет JS в переменную --jmi-hdrh; на случай, если замер запоздал, стоит запасное значение. Панель никогда не уходит вверх: у .side-body нет ни bottom, ни отрицательных отступов — только top:0 от .side. Если содержимое не помещается по высоте — появляется собственная прокрутка, а не выезд вверх. НАСТРОЙКА: отступ меню от шапки — 12px в calc() ниже. ================================================================== */ .side-holder{ position:relative; height:0; z-index:2795; } .side{ position:fixed; left:0; z-index:2000; top:calc(var(--jmi-hdrh, 118px) + 12px); /* max-height здесь НЕ задаём: он тоже обрезал бы выпадающий список, выезжающий вбок. Высоту ограничиваем только на телефоне, где список раскрывается ВНУТРИ пункта. */ } .side.open{ z-index:2500; } .side.side-right{left:auto;right:0} .side.side-right .side-tab{border-left:1px solid rgba(0,234,255,.4);border-right:none;border-radius:12px 0 0 12px} .side.side-right .side-row{border-left:1px solid rgba(0,234,255,.35);border-right:none;border-radius:12px 0 0 12px} .side.side-right .side-body{padding:0 0 14px 6px} .side.side-right .side-sub{left:auto;right:100%} /* ---------- язычок (меню закрыто) ---------- */ .side-tab{ display:block; width:46px; padding:12px 0; text-align:center; cursor:pointer; background:#16222f; border:1px solid rgba(0,234,255,.4); border-left:none; border-radius:0 12px 12px 0; color:#00eaff; box-shadow:0 4px 18px -6px rgba(0,234,255,.8); transition:all .22s ease; } .side-tab i{ font-size:17px; display:block; } .side-tab span{ display:block; font-size:9px; letter-spacing:1px; margin-top:5px; color:#8aa0a8; } .side-tab:hover{ background:#1b2b3b; box-shadow:0 4px 22px -5px #00eaff; } .side.open > .side-tab{ display:none; } /* ---------- тело меню (меню открыто) ---------- Раскрывается вниз от точки привязки. Пока меню закрыто — его нет в раскладке вовсе (display:none), поэтому оно физически не может ничего перекрыть. */ .side-body{ /* ВАЖНО: здесь НЕЛЬЗЯ ставить overflow — на компьютере список выбора (.side-sub) выезжает ВБОК за пределы этого блока, и любой overflow его обрезает: появляются полосы прокрутки, а сам список не виден и выбрать ничего нельзя. Пунктов тут всего несколько, прокрутка им не нужна — она есть внутри самого списка (.side-list), где пунктов может быть много. */ display:none; overflow:visible; padding:0 6px 14px 0; } .side.open > .side-body{ display:block; animation:sideDrop .22s ease both; } @keyframes sideDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } /* ---------- строка меню ---------- */ .side-item{ position:relative; width:252px; margin-bottom:8px; } .side-item.side-hide{ display:none; } /* пункт "сервер", пока игра не выбрана */ .side-row{ display:block; overflow:hidden; padding:12px 14px; background:#0e1420; cursor:pointer; border:1px solid rgba(0,234,255,.35); border-left:none; border-radius:0 12px 12px 0; box-shadow:0 8px 24px rgba(0,0,0,.45); transition:all .18s ease; } .side-item.open .side-row, .side-item:hover .side-row{ border-color:#00eaff; box-shadow:0 0 20px -6px #00eaff; } .side-ico{ float:left; width:26px; line-height:34px; color:#00eaff; font-size:16px; } .side-arr{ float:right; line-height:34px; color:#8aa0a8; transition:transform .2s ease; } .side-item.open .side-arr, .side-item:hover .side-arr{ transform:translateX(4px); color:#00eaff; } .side-txt{ overflow:hidden; padding-left:4px; } .side-cap{ display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#8aa0a8; } .side-val{ display:block; font-size:13px; font-weight:800; color:#eafcff; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .side-game-count{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;min-width:24px;height:18px;padding:0 6px;border-radius:999px;background:rgba(0,234,255,.12);border:1px solid rgba(0,234,255,.30);color:#00eaff;font:900 10px/1 Consolas,monospace;vertical-align:1px;box-sizing:border-box;flex:0 0 auto} .side-list a .side-game-name{min-width:0;overflow:hidden;text-overflow:ellipsis} .side-list a .side-game-count{margin-left:auto} html.theme-light .side-game-count{background:#efe0ba;border-color:#c99e42;color:#7a5200} .side-srv-state{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.65px;text-transform:uppercase;line-height:1.5} .side-srv-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor} .side-srv-state.is-on{color:#4dff9a;background:rgba(77,255,154,.10);border:1px solid rgba(77,255,154,.28)} .side-srv-state.is-off{color:#ff7185;background:rgba(255,113,133,.10);border:1px solid rgba(255,113,133,.28)} .side-srv-state.is-none{display:none} .side-link{ text-decoration:none; display:block; } .side-link .side-val{ color:#00eaff; font-size:12px; } /* ---------- выпадающий список выбора ---------- На компьютере выезжает вбок, на телефоне — раскрывается вниз внутри самого пункта (иначе уехал бы за край экрана). */ .side-sub{ position:absolute; left:100%; top:0; margin-left:8px; min-width:236px; padding:8px; background:#0e1420; border:1px solid rgba(0,234,255,.4); border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.55); z-index:2600; display:none; white-space:nowrap; } .side-item.open > .side-sub{ display:block; } .side-sub:before{ content:""; position:absolute; left:-10px; top:0; bottom:0; width:10px; } .side-sub-cap{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#8aa0a8; padding:4px 10px 8px; } /* НАСТРОЙКА: сколько пунктов видно без прокрутки (250px ~ 5 штук). */ .side-list{ max-height:250px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(0,234,255,.62) transparent; box-sizing:border-box; } /* 5.28.343 — scrollbar stays completely inside the picker frame. Chromium arrow buttons are removed explicitly so their top/bottom triangles can never protrude through the rounded container. */ .side-list::-webkit-scrollbar{ width:7px; height:7px; } .side-list::-webkit-scrollbar-track{ background:rgba(255,255,255,.035); border-radius:999px; margin-block:7px; } .side-list::-webkit-scrollbar-thumb{ background:rgba(0,234,255,.62); border-radius:999px; border:1px solid transparent; background-clip:padding-box; min-height:26px; } .side-list::-webkit-scrollbar-thumb:hover{ background:rgba(0,234,255,.90); background-clip:padding-box; } .side-list::-webkit-scrollbar-button, .side-list::-webkit-scrollbar-button:single-button, .side-list::-webkit-scrollbar-button:start, .side-list::-webkit-scrollbar-button:end, .side-list::-webkit-scrollbar-button:vertical:decrement, .side-list::-webkit-scrollbar-button:vertical:increment, .side-list::-webkit-scrollbar-button:vertical:start:decrement, .side-list::-webkit-scrollbar-button:vertical:end:increment{ display:none!important; visibility:hidden!important; opacity:0!important; width:0!important; height:0!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; background:none!important; -webkit-appearance:none!important; appearance:none!important; } html.theme-light .side-list{scrollbar-color:rgba(166,111,7,.72) transparent;} html.theme-light .side-list::-webkit-scrollbar-track{background:rgba(143,103,35,.07);} html.theme-light .side-list::-webkit-scrollbar-thumb{background:rgba(166,111,7,.66);background-clip:padding-box;} html.theme-light .side-list::-webkit-scrollbar-thumb:hover{background:rgba(139,88,0,.88);background-clip:padding-box;} .side-sub a{ display:flex; align-items:center; padding:10px 14px; margin:2px 0; border-radius:9px; text-decoration:none; color:#8aa0a8; font-weight:700; font-size:13px; transition:all .16s ease; } .side-list a em,.side-list .srv-off em{margin-left:auto;padding-left:12px;font-size:9px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.5px} .side-list a em.on{color:#4dff9a}.side-list .srv-off em.off{color:#ff7185} .side-sub a i{ margin-right:9px; color:#00eaff; width:15px; text-align:center; flex-shrink:0; } .side-sub a:hover{ background:#16222f; color:#e6f0f4; } .side-sub a.on{ background:rgba(0,234,255,.10); color:#00eaff; } .side-sub a.on:after{ content:"\f00c"; font-family:FontAwesome; margin-left:auto; padding-left:14px; font-size:11px; line-height:1; flex-shrink:0; } /* Сервер, который сейчас не в сети: виден, но выбрать нельзя — так понятно, что сервер существует и временно не работает. */ .side-sub .srv-off{ display:flex; align-items:center; padding:10px 14px; margin:2px 0; border-radius:9px; color:#5d6b73; font-weight:700; font-size:13px; cursor:default; } .side-sub .srv-off i{ margin-right:9px; width:15px; text-align:center; flex-shrink:0; color:#44525a; } .side-sub .srv-off em{ margin-left:auto; padding-left:12px; font-style:normal; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#ff8fa0; flex-shrink:0; } /* ---------- телефон и планшет ---------- */ @media (max-width:900px){ .side{ top:calc(var(--jmi-hdrh, 84px) + 12px); max-height:calc(100vh - var(--jmi-hdrh, 84px) - 24px); } /* На телефоне список раскрывается ВНУТРИ пункта, вбок ничего не выезжает — поэтому здесь прокрутка не мешает, а нужна: меню не должно уходить за нижний край экрана. */ .side-body{ max-height:inherit; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .side-item{ width:230px; } /* список раскрывается ВНИЗ внутри пункта, а не вбок за экран */ .side-sub{ position:static; display:none; margin:6px 0 0 0; min-width:0; width:100%; box-sizing:border-box; white-space:normal; border-left:none; border-radius:0 12px 12px 0; } .side-item.open > .side-sub{ display:block; } /* на телефоне видно 3 пункта, дальше прокрутка пальцем */ .side-list{ max-height:158px; } } /* На устройствах без мыши раскрываем только по нажатию (наведения нет). */ @media (hover:none){ .side-item:hover .side-row{ border-color:rgba(0,234,255,.35); box-shadow:0 8px 24px rgba(0,0,0,.45); } } .gate-wrap{ padding:46px 40px; text-align:center; overflow:visible; } .gate{ display:inline-block; max-width:560px; padding:38px 42px; text-align:center; background:#0e1420; border:1px solid rgba(255,198,58,.45); border-radius:18px; box-shadow:0 0 34px -14px rgba(255,198,58,.9); } .gate-ico{ width:74px; height:74px; line-height:74px; margin:0 auto 18px; border-radius:50%; background:rgba(255,198,58,.10); border:1px solid rgba(255,198,58,.55); color:#ffc63a; font-size:30px; filter:drop-shadow(0 0 12px rgba(255,198,58,.65)); } .gate-title{ font-size:21px; font-weight:900; color:#ffc63a; letter-spacing:.5px; margin-bottom:12px; } .gate-text{ font-size:14.5px; line-height:1.65; color:#b7c6cc; margin-bottom:16px; } .gate-hint{ font-size:13px; color:#8aa0a8; margin-bottom:22px; } .gate-hint i{ color:#00eaff; margin-right:6px; } .gate-btn{ display:inline-block; padding:12px 26px; border-radius:12px; cursor:pointer; background:#16222f; border:1px solid rgba(0,234,255,.55); color:#00eaff; font-weight:800; font-size:14px; letter-spacing:.5px; box-shadow:0 0 20px -8px #00eaff; transition:all .18s ease; } .gate-btn:hover{ border-color:#00eaff; box-shadow:0 0 26px -6px #00eaff; background:#1b2b3b; } @media (max-width:600px){ .gate-wrap{ padding:30px 16px; } .gate{ padding:28px 20px; } } .va-back{ display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:9000; background:rgba(4,7,12,.82); } .va-back.on{ display:block; } .va-win{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:420px; max-width:calc(100% - 32px); box-sizing:border-box; padding:26px 24px 20px; background:#0e1420; border:1px solid rgba(0,234,255,.45); border-radius:18px; box-shadow:0 0 46px -14px #00eaff; } .va-cap{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#8aa0a8; text-align:center; margin-bottom:18px; } .va-cap i{ color:#00eaff; margin-right:7px; } .va-item{ display:block; overflow:hidden; padding:13px 14px; margin-bottom:10px; border-radius:13px; text-decoration:none; background:#141a24; border:1px solid rgba(255,255,255,.09); transition:all .18s ease; } .va-item:hover{ border-color:rgba(0,234,255,.5); background:#16222f; transform:translateX(3px); } .va-ico{ float:left; width:42px; height:42px; line-height:42px; text-align:center; margin-right:14px; border-radius:50%; border:1px solid; background:rgba(255,255,255,.03); font-size:17px; } .va-arr{ float:right; line-height:42px; color:#8aa0a8; } .va-txt{ display:block; overflow:hidden; } .va-txt b{ display:block; font-size:14.5px; color:#e6f0f4; font-weight:800; } .va-txt i{ display:block; font-style:normal; font-size:11.5px; color:#8aa0a8; margin-top:3px; line-height:1.45; } .va-cancel{ display:block; width:100%; margin-top:6px; padding:11px 0; cursor:pointer; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:11px; color:#8aa0a8; font-size:13px; font-weight:700; transition:all .18s ease; } .va-cancel:hover{ color:#e6f0f4; border-color:rgba(255,255,255,.28); } html.theme-light .va-back{background:rgba(40,34,24,.34);backdrop-filter:blur(4px)} html.theme-light .va-win{background:#fffaf2;border-color:#d6b565;box-shadow:0 18px 54px rgba(65,49,20,.18)} html.theme-light .va-cap{color:#6d6354}.theme-light .va-cap i{color:#b57906} html.theme-light .va-item{background:#fffdf8;border-color:#ddd1bc} html.theme-light .va-item:hover{background:#fff3d6;border-color:#c79424;transform:translateX(3px)} html.theme-light .va-ico{background:transparent} html.theme-light .va-txt b{color:#26313e}.theme-light .va-txt i,.theme-light .va-arr{color:#66717d} html.theme-light .va-cancel{background:#f7efe3;border-color:#d8cbb6;color:#66717d} html.theme-light .va-cancel:hover{background:#fff1cd;border-color:#c89527;color:#5f440a} /* окно должно оставаться читаемым на телефоне */ @media (max-width:600px){ .va-win{ width:calc(100% - 24px); padding:20px 16px 16px; } .va-ico{ width:36px; height:36px; line-height:36px; margin-right:11px; font-size:15px; } .va-arr{ display:none; } .va-txt b{ font-size:13.5px; } .va-txt i{ font-size:11px; } } /* ---- выпадающее меню внутри жёлтой полосы режима просмотра ---- */ .vb-pick{ position:relative; display:inline-block; margin-left:14px; vertical-align:middle; } .vb-pick > a{ cursor:pointer; } .vb-list{ display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:9px; min-width:210px; padding:7px; text-align:left; background:#0e1420; border:1px solid rgba(255,198,58,.5); border-radius:12px; box-shadow:0 16px 34px rgba(0,0,0,.6); z-index:3000; } .vb-pick.open .vb-list{ display:block; } .vb-cap{ display:block; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:#8aa0a8; padding:5px 11px 8px; } .vb-list a{ display:block; padding:9px 13px; margin:2px 0; border-radius:9px; text-decoration:none; color:#b7c6cc; font-size:13px; font-weight:700; } .vb-list a i{ margin-right:9px; width:15px; text-align:center; } .vb-list a:hover{ background:#16222f; color:#eafcff; } .vb-list a.on{ background:rgba(255,198,58,.12); color:#ffc63a; } .vb-list a.off{ color:#ff8fa0; } .vb-list a.off i{ color:#ff8fa0; } .vb-sep{ display:block; height:1px; margin:6px 8px; background:rgba(255,255,255,.09); } @media (max-width:600px){ .vb-pick{ display:block; margin:8px auto 0; } .vb-list{ left:0; transform:none; min-width:0; width:100%; box-sizing:border-box; } } /* 5.28.881 — дата под часами чуть крупнее и ниже для лучшей читаемости. */ #CssMenu1 li.nav-live-clock{height:62px!important;top:46%!important;align-items:center!important;} #CssMenu1 .jmi-live-clock{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;} #CssMenu1 .jmi-live-clock__time{display:flex;align-items:center;gap:3px;height:31px;white-space:nowrap;} #CssMenu1 .jmi-live-clock__date{display:block;width:100%;margin-top:3px;text-align:center;font-size:12px;line-height:16px;letter-spacing:1.1px;font-weight:800;color:#c2d3df;text-shadow:0 1px 6px rgba(0,0,0,.30);font-variant-numeric:tabular-nums;white-space:nowrap;} /* 5.28.908 — seven-segment seconds, far smaller than hours/minutes, on the same clock line. */ #CssMenu1 .jmi-live-clock__seconds{display:inline-flex!important;align-items:center;align-self:center;gap:1px;flex:none;height:23px;margin-left:0;transform:translateY(3px);background:none!important;border:0!important;box-shadow:none!important;} #CssMenu1 .jmi-live-clock__seconds-colon{position:relative;display:block;flex:none;width:5px;height:17px;margin:0 2px 0 0;opacity:.88;} #CssMenu1 .jmi-live-clock__seconds-colon::before,#CssMenu1 .jmi-live-clock__seconds-colon::after{content:"";position:absolute;left:1px;width:2.5px;height:2.5px;border-radius:1px;background:#ffbf3f;box-shadow:0 0 4px rgba(255,191,63,.42);} #CssMenu1 .jmi-live-clock__seconds-colon::before{top:4px;} #CssMenu1 .jmi-live-clock__seconds-colon::after{bottom:4px;} #CssMenu1 .jmi-live-clock__second{display:flex!important;justify-content:flex-start;align-items:center;min-width:0;filter:drop-shadow(0 0 3px rgba(0,234,255,.25));} #CssMenu1 .jmi-live-clock__second .jmi-live-clock__slot{width:9px!important;height:17px!important;} #CssMenu1 .jmi-live-clock__second .jmi-live-clock__face{height:100%;} #CssMenu1 .jmi-live-clock__second svg{width:9px!important;height:16px!important;filter:drop-shadow(0 0 1px rgba(0,212,255,.22));} html.theme-light #CssMenu1 .jmi-live-clock__seconds-colon::before,html.theme-light #CssMenu1 .jmi-live-clock__seconds-colon::after{background:#b87523!important;box-shadow:0 1px 2px rgba(93,58,16,.26)!important;} html.theme-light #CssMenu1 .jmi-live-clock__date{color:#5f6d79;text-shadow:none;}