/* Animation */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/* Say Hi to Adblock */
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
/* Кнопка канала: капсула, раскрывается при наведении. Класс новый (.tgb),
старый .telegram-button не задействован. */
.tgb{
position:fixed; right:18px; bottom:18px; z-index:1000;
display:flex; align-items:center;
overflow:hidden;
height:52px; padding:0 15px; /* 15 + иконка 22 + 15 = ровно 52 → круг */
border-radius:26px;
background:linear-gradient(140deg,#37aee2,#1c93d2);
color:#fff; text-decoration:none;
box-shadow:0 5px 18px rgba(28,147,210,.42);
transition:box-shadow .2s ease,transform .2s ease;
}
.tgb:hover{
color:#fff; text-decoration:none;
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(28,147,210,.55);
}
.tgb__ico{flex:0 0 auto;display:flex}
/* в покое подпись имеет нулевую ширину — кнопка остаётся ровным кругом */
.tgb__txt{
font-size:14px;font-weight:700;white-space:nowrap;letter-spacing:.2px;
max-width:0;margin-left:0;opacity:0;overflow:hidden;
transition:max-width .32s cubic-bezier(.3,1,.4,1),margin-left .32s cubic-bezier(.3,1,.4,1),opacity .18s ease;
}
.tgb:hover .tgb__txt{max-width:130px;margin-left:10px;opacity:1;transition-delay:0s,0s,.2s}
/* мягкое кольцо привлекает внимание, но не дёргает саму кнопку */
.tgb::before{
content:""; position:absolute; inset:0; border-radius:26px;
box-shadow:0 0 0 0 rgba(55,174,226,.5);
animation:tgbRing 3.2s ease-out infinite;
pointer-events:none;
}
@keyframes tgbRing{
0%{box-shadow:0 0 0 0 rgba(55,174,226,.5)}
70%{box-shadow:0 0 0 14px rgba(55,174,226,0)}
100%{box-shadow:0 0 0 0 rgba(55,174,226,0)}
}
@media (prefers-reduced-motion:reduce){
.tgb,.tgb__txt{transition:none}
.tgb:hover{transform:none}
.tgb::before{animation:none}
}
/* ==========================================================================
ЕДИНАЯ ПАЛИТРА САЙТА. Объявлена глобально — новые блоки берут цвет отсюда,
чтобы не расползалось в разноцветье.
Правила:
--ui-primary синий — фирменный, ГЛАВНЫЕ действия и акценты
--ui-money зелёный — только деньги и статус «успешно/онлайн»,
кнопкой не бывает
--ui-warn оранжевый — только предупреждения и «требует внимания»
--ui-danger красный — ошибки, запреты, блокировки
Второстепенное действие — контурная кнопка того же синего, НЕ другой цвет.
========================================================================== */
:root{
--ui-primary:#4d90fe;
--ui-primary-d:#2a5fd6;
--ui-primary-l:#5b9bff;
--ui-money:#1baf7a;
--ui-money-d:#199e70;
--ui-warn:#eb6834;
--ui-danger:#d03b3b;
--ui-ink:#14161a;
--ui-mute:#8b8a85;
--ui-line:rgba(128,128,128,.22);
--ui-card:#fff;
}
/* Боковые колонки строго одной ширины.
Ячейкам в main.tpl задано width:194px, но у таблицы автоматическая
раскладка: блок Google AdSense с жёстким width:200px распирал правую
ячейку, и левая оказывалась уже на 6px. */
#leftcolumn,
#rightcolumn{
width:194px;
max-width:194px;
}
#rightcolumn ins.adsbygoogle{max-width:194px !important}
/* центральная колонка: 1000 = 194 + 612 + 194. Без явной ширины таблица
раздвигала именно её, если внутри попадался широкий блок */
#contentwrapper{
width:612px;
max-width:612px;
}
#contentwrapper table{max-width:100%}
#contentwrapper img,
#contentwrapper iframe{max-width:100%}
#rightcolumn iframe,
#leftcolumn iframe,
#rightcolumn img,
#leftcolumn img{max-width:100%}
/* ==========================================================================
Всплывающее окно (popup_w в site_main.js). Разметку не трогаем — только вид.
Старое в style.css: синяя шапка #4682B4, острые углы, «Закрыть» текстом в углу.
========================================================================== */
#load{background:rgba(12,15,20,.62) !important;backdrop-filter:blur(2px)}
#popup{
background:var(--ui-card,#fff) !important;
border:1px solid var(--ui-line,rgba(128,128,128,.22));
border-radius:14px !important;overflow:hidden;
box-shadow:0 18px 50px rgba(0,0,0,.35) !important;
max-width:calc(100vw - 24px);
}
#popup .title-popup{
background:var(--ui-card,#fff) !important;
color:var(--ui-ink,#14161a) !important;
border-bottom:1px solid var(--ui-line,rgba(128,128,128,.22));
line-height:1.3 !important;padding:14px 78px 13px 16px !important;
font-size:14.5px !important;font-weight:800;letter-spacing:-.2px;
}
#popup .closed-popup{
top:8px !important;right:10px !important;
width:auto !important;line-height:1 !important;
display:inline-flex !important;align-items:center;justify-content:center;
padding:7px 11px;border-radius:8px;
font-size:12px !important;font-weight:700;
color:var(--ui-mute,#8b8a85) !important;
background:rgba(128,128,128,.1);opacity:1 !important;
transition:background-color .15s ease,color .15s ease;
}
#popup .closed-popup:hover{
background:rgba(208,59,59,.14);
color:#d03b3b !important;opacity:1 !important;
}
#popup .text-popup{padding:14px 16px 16px}
#popup table{
width:100%;max-width:100%;table-layout:fixed;
border-collapse:collapse;font-size:12.5px !important;
}
#popup table td,
#popup table th{overflow-wrap:anywhere;word-break:break-word}
#popup table th{
background:rgba(128,128,128,.07);color:var(--ui-mute,#8b8a85);
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
padding:8px 10px;text-align:center;border:0;
border-bottom:1px solid var(--ui-line,rgba(128,128,128,.22));
}
#popup table td{
padding:8px 10px;text-align:center;
border-bottom:1px solid var(--ui-line,rgba(128,128,128,.18));
}
#popup table tr:last-child td{border-bottom:0}
#popup canvas{max-width:100%}
/* --- формы во всплывающих окнах (жалоба, комментарии и прочие) --- */
#popup .add-infa{
background:rgba(77,144,254,.09) !important;
border:1px solid rgba(77,144,254,.26) !important;
border-left:3px solid var(--ui-primary,#4d90fe) !important;
border-radius:10px !important;
padding:11px 13px !important;
margin:0 0 4px !important;
color:var(--ui-mute,#8b8a85) !important;
font-size:12px !important;line-height:1.55 !important;
text-align:left !important;font-weight:400 !important;
}
#popup .add-infa b{color:var(--ui-ink,#14161a)}
#popup .add-infa font[color="c80000"]{color:var(--ui-danger,#d03b3b) !important;font-weight:700}
/* подпись слева / значение справа */
#popup form table{table-layout:auto}
#popup form table td{
text-align:left !important;vertical-align:middle;
overflow-wrap:anywhere;word-break:break-word;
}
#popup form table tr > td:first-child{
color:var(--ui-mute,#8b8a85);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.4px;width:132px;
}
#popup form table tr > td[colspan]{width:auto;text-transform:none;letter-spacing:0}
/* варианты выбора — строками-кнопками */
#popup input[type="radio"],
#popup input[type="checkbox"]{
width:15px;height:15px;margin:0 8px 0 0;vertical-align:-2px;
accent-color:var(--ui-primary,#4d90fe);cursor:pointer;
}
/* каждая причина — своей строкой;
в разметке трогать нельзя,
селектор input + br срабатывает через текстовый узел и прятал их все */
#popup form table td > div[align="left"]{line-height:2.2;font-size:13px}
#popup form table td > div[align="left"] br{display:block}
/* поля ввода */
#popup input[type="text"],
#popup input[type="password"],
#popup input[type="number"],
#popup select,
#popup textarea{
width:100%;max-width:100%;box-sizing:border-box;
padding:8px 10px;border-radius:8px;
border:1px solid var(--ui-line,rgba(128,128,128,.22));
background:rgba(128,128,128,.05);color:inherit;
font-size:13px;font-family:inherit;outline:none;
}
#popup input[type="text"]:focus,
#popup textarea:focus,
#popup select:focus{
border-color:var(--ui-primary,#4d90fe);
box-shadow:0 0 0 2px rgba(77,144,254,.14);
}
/* кнопка отправки */
#popup .pop-up-footer{text-align:center !important;padding-top:14px !important}
#popup button{
background:none;border:0;padding:0;cursor:pointer;font:inherit;
width:100%;max-width:100%;display:block;
}
#popup button .btn,
#popup button .btn.green{
display:flex !important;align-items:center;justify-content:center;
width:100% !important;max-width:100% !important;box-sizing:border-box;
min-height:40px;padding:10px 18px !important;
border-radius:8px !important;
background:var(--ui-primary-d,#2a5fd6) !important;
color:#fff !important;border:0 !important;
font-size:14px !important;font-weight:700 !important;
box-shadow:0 1px 3px rgba(20,22,26,.18);
transition:background-color .15s ease,transform .15s ease;
}
#popup button:hover .btn{background:#2454bd !important;transform:translateY(-1px)}
/* было: у .dollar в style.css нет z-index — значки уходили ЗА непрозрачные
блоки страницы и выглядели обрезанными. Поднимаем их поверх содержимого,
клики сквозь них проходят, поэтому ничего не перекрывают функционально */
/* ==========================================================================
--- убираем «подпрыгивание» таблиц ---
В style.css у .work-serf:hover стоит transform:translateY(-3px), а у
.table tr:hover td — box-shadow. Из-за этого при наведении списки
друзей, стены и кабинета дёргались вверх и роняли тень на соседей.
Наведение должно менять цвет, а не положение.
========================================================================== */
.work-serf:hover{transform:none !important}
.table tr:hover td{box-shadow:none !important}
.work-serf{transition:background-color .16s ease,border-color .16s ease !important}
/* ==========================================================================
--- всплывающие подсказки (tipTip) ---
Скрипт tipTip добавляет свой блок в конец страницы, а его стилей в
активном style.css НЕТ (они остались в неиспользуемой копии style(1).css).
Без position:absolute блок вставал в поток и на каждое наведение
двигал вёрстку — таблицы «подпрыгивали». Стилизуем подсказку сами.
========================================================================== */
#tiptip_holder{
display:none;position:absolute;top:0;left:0;z-index:99999;
pointer-events:none;max-width:300px;
}
#tiptip_holder.tip_top{padding-bottom:7px}
#tiptip_holder.tip_bottom{padding-top:7px}
#tiptip_holder.tip_right{padding-left:7px}
#tiptip_holder.tip_left{padding-right:7px}
#tiptip_content{
padding:7px 11px;border-radius:9px;
background:#1d2836;color:#ffffff;
font-size:11.5px;line-height:1.45;font-weight:600;
box-shadow:0 10px 26px rgba(0,0,0,.35);
text-align:left;
}
#tiptip_arrow,#tiptip_arrow_inner{
position:absolute;border-color:transparent;border-style:solid;border-width:6px;
width:0;height:0;
}
#tiptip_holder.tip_top #tiptip_arrow_inner{margin-top:-7px;margin-left:-6px;border-top-color:#1d2836}
#tiptip_holder.tip_bottom #tiptip_arrow_inner{margin-top:-5px;margin-left:-6px;border-bottom-color:#1d2836}
#tiptip_holder.tip_right #tiptip_arrow_inner{margin-top:-6px;margin-left:-5px;border-right-color:#1d2836}
#tiptip_holder.tip_left #tiptip_arrow_inner{margin-top:-6px;margin-left:-7px;border-left-color:#1d2836}/* место под вертикальную полосу прокрутки резервируется всегда —
иначе при её появлении вся страница прыгала вбок */
html{scrollbar-gutter:stable}
/* ==========================================================================
--- уведомление о новом сообщении ---
Всплывает справа снизу, когда приходит личное сообщение. Разметка
приходит с сервера (.mew-mail-mess), меняем только вид: карточка
с аватаром, мягкий выезд, крестик закрытия.
========================================================================== */
.mew-mail-mess{
position:relative;
width:290px !important;
margin:0 0 9px !important;padding:0 !important;
border-radius:13px !important;overflow:hidden;
background:#fff !important;
border:1px solid rgba(120,150,190,.22) !important;
box-shadow:0 12px 30px rgba(40,70,120,.18) !important;
animation:uvIn .38s cubic-bezier(.25,.9,.3,1) both;
}
@keyframes uvIn{
from{opacity:0;transform:translateX(26px) scale(.97)}
to {opacity:1;transform:none}
}
.mew-mail-mess .mail-users{
display:flex;align-items:center;gap:7px;
padding:8px 11px !important;
background:rgba(77,144,254,.1) !important;
color:#2a5fd6 !important;
font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
border-bottom:1px solid rgba(120,150,190,.22);
}
.mew-mail-mess .mail-users::before{
content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
background:#1baf7a;
box-shadow:0 0 0 0 #1baf7a_SH;
animation:uvPulse 2.2s ease-out infinite;
}
@keyframes uvPulse{
0%{box-shadow:0 0 0 0 #1baf7a_SH}
70%{box-shadow:0 0 0 7px rgba(0,0,0,0)}
100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.mew-mail-mess .closed{
margin-left:auto;cursor:pointer;
width:20px;height:20px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(128,128,128,.14);color:#8b8a85 !important;
font-size:12px;font-weight:700;line-height:1;
transition:background-color .15s ease,color .15s ease;
}
.mew-mail-mess .closed:hover{background:rgba(208,59,59,.16);color:#d03b3b !important}
.mew-mail-mess > a{
display:flex !important;align-items:center;gap:11px;
padding:11px !important;text-decoration:none !important;
transition:background-color .15s ease;
}
.mew-mail-mess > a:hover{background:rgba(77,144,254,.07)}
.mew-mail-mess .mail-ava{flex:0 0 auto;font-size:0}
.mew-mail-mess .mail-ava img{
width:42px !important;height:42px !important;
border-radius:50% !important;border:0 !important;object-fit:cover;
}
.mew-mail-mess .mail-text{
flex:1 1 auto;min-width:0;
font-size:12px !important;line-height:1.45;color:#3a4658 !important;
}
.mew-mail-mess .mail-text b{color:#2a5fd6 !important;font-weight:700}
@media (prefers-reduced-motion:reduce){
.mew-mail-mess{animation:none}
.mew-mail-mess .mail-users::before{animation:none}
}/* ==========================================================================
--- доска почёта: убираем следы старого блока ---
Синяя полоса слева, жёлтая плашка .status под ником и мелкий заголовок
достались от прежней вёрстки. Приводим к виду памятной доски.
========================================================================== */
#rightcolumn .rcol-card_board{
border-left:0 !important;
border-radius:10px !important;
padding:12px 11px 14px !important;
}
/* заголовок — гравировка с тонкими линиями по бокам */
#rightcolumn .rcol-card_board .rcol-card__head{
justify-content:center !important;
gap:8px !important;
margin-bottom:12px !important;
font-size:9.5px !important;letter-spacing:2px !important;
color:rgba(45,70,110,.8) !important;
}
#rightcolumn .rcol-card_board .rcol-card__head::before,
#rightcolumn .rcol-card_board .rcol-card__head::after{
content:"";flex:1 1 auto;height:1px;
background:linear-gradient(90deg,transparent,rgba(90,120,165,.3),transparent);
}
#rightcolumn .rcol-card_board .rcol-card__head svg{color:#c79a45 !important}
/* ник: своя табличка вместо жёлтой плашки .status */
#rightcolumn .rcol-card_board .rcol-board__name{
background:linear-gradient(180deg,#ffffff,#e7eef8) !important;
border:1px solid rgba(110,140,180,.34) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
border-radius:5px !important;
padding:4px 14px !important;
text-shadow:none !important;
}
#rightcolumn .rcol-card_board .rcol-board__name,
#rightcolumn .rcol-card_board .rcol-board__name *{
color:#16202e !important;font-size:14px !important;font-weight:800 !important;
}
/* строка с суммой — без плашки */
#rightcolumn .rcol-card_board .rcol-board__rate{
background:none !important;border:0 !important;box-shadow:none !important;
padding:0 !important;text-shadow:none !important;
}/* ==========================================================================
--- доска почёта: доводка мелочей ---
Селекторы с #rightcolumn: в тёмной теме есть глобальное
a{color:...!important}, и без повышения веса надпись на латунной
табличке оставалась белой и не читалась.
========================================================================== */
#rightcolumn a.rcol-board__how,
#rightcolumn a.rcol-board__how *{
color:#4a3510 !important;
text-shadow:0 1px 0 rgba(255,255,255,.6) !important;
font-weight:800 !important;
}
#rightcolumn a.rcol-board__how{
letter-spacing:.2px;
padding:9px 18px !important;
}
/* заголовок виджета — крупнее и контрастнее */
#rightcolumn .rcol-card__head{
font-size:10.5px !important;
font-weight:800 !important;
letter-spacing:1.3px !important;
color:rgba(45,70,110,.85) !important;
opacity:1 !important;
}
#rightcolumn .rcol-card__head svg{width:14px;height:14px;opacity:.95}
/* имя на табличке и процент */
#rightcolumn .rcol-board__name,
#rightcolumn .rcol-board__name *{
color:#16202e !important;
font-size:13.5px !important;font-weight:800 !important;
}
#rightcolumn .rcol-board__rate,
#rightcolumn .rcol-board__rate *{
color:rgba(50,75,110,.9) !important;
font-size:11.5px !important;font-weight:600 !important;opacity:1 !important;
}
#rightcolumn .rcol-board__comment,
#rightcolumn .rcol-board__comment *{
color:rgba(60,85,120,.9) !important;font-size:11.5px !important;line-height:1.5;
}/* ==========================================================================
--- доска почёта как постамент ---
Тот же уличный язык, что и в шапке: медальон с портретом на постаменте,
гравированная табличка с именем, сверху — свет от лампы (ночью тёплый).
Правится только оформление, разметка menu-right.tpl не тронута.
========================================================================== */
.rcol-board{
position:relative;
padding-top:6px !important;
text-align:center;
}
/* луч света сверху на медальон */
.rcol-board::before{
content:"";position:absolute;left:50%;top:-6px;
width:150px;height:120px;margin-left:-75px;
background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 55%,rgba(255,255,255,0) 100%);
clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
pointer-events:none;
}
/* имя — как гравировка на табличке */
.rcol-board__name{
position:relative;z-index:1;
display:inline-block;padding:3px 12px;margin-bottom:3px;
border-radius:5px;
background:linear-gradient(180deg,#ffffff,#e8eff8);
border:1px solid rgba(110,140,180,.3);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
font-size:13px !important;font-weight:800;letter-spacing:.2px;
color:#1d2836 !important;
}
.rcol-board__rate{
position:relative;z-index:1;
font-size:11px !important;opacity:.85;margin-bottom:9px;
}
/* медальон: портрет в чеканной оправе */
.rcol-board__ava{
position:relative;z-index:1;
display:inline-block;padding:4px;border-radius:50%;
background:linear-gradient(150deg,#f0d08a,#c79a45 45%,#f7e3b0 70%,#a8802f);
box-shadow:
0 0 0 1px linear-gradient(150deg,#f0d08a,#c79a45 45%,#f7e3b0 70%,#a8802f)_EDGE,
0 8px 20px linear-gradient(150deg,#f0d08a,#c79a45 45%,#f7e3b0 70%,#a8802f)_SHADOW;
}
.rcol-board__ava img{
display:block;border-radius:50% !important;border:0 !important;
box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
/* постамент под медальоном */
.rcol-board__ava::after{
content:"";position:absolute;left:50%;bottom:-13px;
width:96px;height:12px;margin-left:-48px;
border-radius:3px 3px 5px 5px;
background:linear-gradient(180deg,#e7edf6,#cdd8e8);
box-shadow:0 5px 12px linear-gradient(150deg,#f0d08a,#c79a45 45%,#f7e3b0 70%,#a8802f)_SHADOW;
z-index:-1;
}
.rcol-board__comment{
position:relative;z-index:1;margin-top:20px;font-size:11.5px;opacity:.9;
}
/* кнопка — латунная табличка на постаменте */
.rcol-board__how{
position:relative;z-index:1;
display:inline-block !important;margin-top:18px !important;
padding:8px 16px !important;border-radius:7px !important;
background:linear-gradient(180deg,#f2d493,#d4a84f) !important;
border:1px solid rgba(160,120,50,.35) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 4px 12px linear-gradient(150deg,#f0d08a,#c79a45 45%,#f7e3b0 70%,#a8802f)_SHADOW !important;
color:#4a3510 !important;
font-size:12px !important;font-weight:700 !important;
text-decoration:none !important;
transition:transform .16s ease,filter .16s ease;
}
.rcol-board__how:hover{transform:translateY(-1px);filter:brightness(1.06)}/* ==========================================================================
--- меню-парапет и цепочка-гирлянда ---
Шапка у нас — уличная сцена: вывеска на ветке, щит на опорах. Меню под
ними работает как парапет, на котором щит и стоит: у него видна толщина,
верхняя кромка ловит свет, снизу лежит тень. Цепочка ссылок ниже — не
ряд кнопок, а флажки на верёвке: каждый висит на своей прищепке и слегка
покачивается. Правки только оформления, разметку не трогаем.
========================================================================== */
.mnav{
position:relative;
background:linear-gradient(180deg,#7c9bfb 0%,#5f83f6 52%,#4d76f0 100%) !important;
border-radius:12px 12px 6px 6px !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(30,60,130,.35),
0 10px 22px rgba(40,70,120,.22) !important;
border:1px solid rgba(255,255,255,.28) !important;
}
/* кромка парапета — тонкая светлая линия по всей длине */
.mnav::before{
content:"";position:absolute;left:8px;right:8px;top:2px;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.6) 18%,rgba(255,255,255,.6) 82%,transparent);
pointer-events:none;
}
/* тень под парапетом, чтобы читалась толщина плиты */
.mnav::after{
content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:7px;
background:radial-gradient(60% 100% at 50% 0, rgba(40,70,120,.22) 0%, transparent 78%);
pointer-events:none;
}
/* --- цепочка: флажки на верёвке --- */
.chainbar{
position:relative;
margin-top:-6px !important;
padding-top:11px !important;
}
/* верёвка, на которой всё висит */
.chainbar::before{
content:"";position:absolute;left:0;right:34px;top:5px;height:2px;
border-radius:2px;
background:linear-gradient(90deg,transparent,rgba(120,95,66,.5) 4%,rgba(120,95,66,.5) 96%,transparent);
pointer-events:none;
}
.chainbar__link{
position:relative;
border-radius:0 0 9px 9px !important;
transform-origin:50% -9px;
animation:chSway 7s ease-in-out infinite;
}
/* прищепка, которой флажок цепляется за верёвку */
.chainbar__link::before{
content:"";position:absolute;left:50%;top:-8px;
width:7px;height:8px;margin-left:-3.5px;border-radius:2px;
background:linear-gradient(180deg,#c99a63,#a97c4a);
pointer-events:none;
}
.chainbar__list > *:nth-child(2n) .chainbar__link,
.chainbar__list > .chainbar__link:nth-child(2n){animation-duration:8.6s;animation-delay:-2.1s}
.chainbar__list > *:nth-child(3n) .chainbar__link,
.chainbar__list > .chainbar__link:nth-child(3n){animation-duration:6.2s;animation-delay:-4.3s}
@keyframes chSway{
0%,100%{transform:rotate(-.7deg)}
50% {transform:rotate(.7deg)}
}
@media (prefers-reduced-motion:reduce){
.chainbar__link{animation:none}
}
/* ==========================================================================
Рекламный щит в шапке. Настоящая конструкция: рама с фаской и болтами
по углам, две опоры с косым укосом и лесенкой, сверху кронштейн с
двумя лампами. Ночью лампы горят и кладут на полотно тёплые конусы,
днём погашены и рама ловит солнечный блик. Никакого стекла.
Классы .hbn*.
========================================================================== */
.hbn{
position:absolute;right:4px;top:19px;
width:482px;height:93px;
margin:0;padding:0;
}
/* --- рама --- */
.hbn::before{
content:"";position:absolute;left:0;right:0;top:0;height:79px;
border-radius:6px;
background:linear-gradient(180deg,#fbfdff 0%,#e6edf6 44%,#cfdaea 100%);
border:1px solid rgba(110,140,180,.36);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(90,120,160,.25),
0 10px 22px rgba(40,70,120,.16);
}
/* болты по углам рамы */
.hbn::after{
content:"";position:absolute;left:0;right:0;top:0;height:79px;
pointer-events:none;border-radius:6px;
background-image:
radial-gradient(circle, #a9b9cd 0 1.6px, transparent 1.7px),
radial-gradient(circle, #a9b9cd 0 1.6px, transparent 1.7px),
radial-gradient(circle, #a9b9cd 0 1.6px, transparent 1.7px),
radial-gradient(circle, #a9b9cd 0 1.6px, transparent 1.7px);
background-repeat:no-repeat;
background-position:4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
}
/* --- кронштейн с двумя лампами --- */
.hbn__lamp{
position:absolute;left:0;right:0;top:-15px;height:15px;pointer-events:none;z-index:3;
}
/* горизонтальная штанга + два стояка */
.hbn__lamp::before{
content:"";position:absolute;left:128px;right:128px;top:4px;height:2px;
border-radius:2px;
background:#b9c7d9;
box-shadow:
-1px 0 0 0 #b9c7d9,
0 0 0 0 transparent;
}
/* сами плафоны */
.hbn__lamp::after{
content:"";position:absolute;left:0;right:0;top:0;height:15px;
background-image:
linear-gradient(180deg,#eef3fa 0 6px, transparent 6px),
linear-gradient(180deg,#eef3fa 0 6px, transparent 6px),
linear-gradient(180deg,#b9c7d9 0 9px, transparent 9px),
linear-gradient(180deg,#b9c7d9 0 9px, transparent 9px);
background-repeat:no-repeat;
background-size:26px 15px, 26px 15px, 2px 15px, 2px 15px;
background-position:128px 0, calc(100% - 128px) 0, 140px 4px, calc(100% - 140px) 4px;
filter:drop-shadow(0 1px 0 rgba(120,150,190,.35));
}
/* --- свет от ламп (только ночью) --- */
.hbn__glow{
position:absolute;left:0;right:0;top:2px;height:62px;
pointer-events:none;z-index:2;
background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 34%);
border-radius:7px;
}
@keyframes hbnFlicker{0%,100%{opacity:.9}47%{opacity:1}62%{opacity:.94}}
/* --- полотно --- */
#baner-serf{
position:absolute !important;z-index:1;
left:7px;top:6px;
width:468px !important;height:60px !important;
border-radius:4px !important;
overflow:hidden !important;
margin:0 !important;float:none !important;
background:linear-gradient(180deg,#f3f7fc,#e6edf6);
box-shadow:inset 0 0 0 1px rgba(90,120,160,.22);
opacity:.95;
transition:opacity .25s ease;
}
.hbn:hover #baner-serf{opacity:1}
/* --- опоры, укос и лесенка --- */
.hbn__legs{
position:absolute;left:0;right:0;top:79px;height:14px;pointer-events:none;
}
.hbn__legs::before{
content:"";position:absolute;left:0;right:0;top:0;height:18px;
background-image:
linear-gradient(180deg,#cfdaea 0 14px, transparent 0),
linear-gradient(180deg,#cfdaea 0 14px, transparent 0);
background-repeat:no-repeat;
background-size:7px 14px, 7px 14px;
background-position:100px 0, calc(100% - 100px) 0;
filter:drop-shadow(0 2px 3px rgba(40,70,120,.18));
}
/* косой укос между опорами + перекладины лесенки на левой опоре */
.hbn__legs::after{
content:"";position:absolute;left:104px;top:2px;
width:calc(100% - 208px);height:10px;
background-image:
linear-gradient(74deg, transparent calc(50% - .6px), rgba(110,140,180,.32) calc(50% - .6px), rgba(110,140,180,.32) calc(50% + .6px), transparent calc(50% + .6px)),
repeating-linear-gradient(180deg, rgba(110,140,180,.34) 0 1px, transparent 1px 5px);
background-repeat:no-repeat;
background-size:100% 10px, 10px 10px;
background-position:0 0, 0 0;
}
/* --- табличка «реклама» на нижней планке --- */
.hbn__tag{
position:absolute;left:9px;top:67px;z-index:4;
font-size:7.5px;letter-spacing:1.8px;text-transform:uppercase;
color:rgba(70,100,150,.45);
pointer-events:none;user-select:none;
}
/* --- ссылки как надпись на раме --- */
.hbn__links{
position:absolute;right:8px;top:64px;z-index:4;
display:flex;gap:6px;
}
.hbn__lk{
display:inline-flex;align-items:center;
height:14px;padding:0 8px;border-radius:7px;
font-size:8.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
text-decoration:none !important;
background:rgba(90,120,165,.10);
border:1px solid rgba(90,120,165,.22);
color:rgba(55,85,130,.8) !important;
transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.hbn__lk:hover{
background:rgba(77,144,254,.16);
border-color:rgba(77,144,254,.4);
color:#2a5fd6 !important;
}
@media (max-width:1060px){
.hbn{width:auto;max-width:100%;height:auto;margin-right:0}
.hbn__lamp,.hbn__legs,.hbn__glow{display:none}
#baner-serf{position:relative !important;left:0;top:0}
}
/* --- птица на переключателе тем --- */
.brd{
position:absolute;left:50%;bottom:100%;
width:34px;height:23px;margin:0 0 -1px -6px;
pointer-events:none;transform-origin:60% 90%;
opacity:0;
animation:brdFly 38s ease-in-out infinite;
}
.brd svg{width:100%;height:100%;display:block;overflow:visible}
.brd__w{transform-origin:20px 15px;animation:brdWing 38s linear infinite}
@keyframes brdFly{
0% {opacity:0;transform:translate(190px,-46px) scale(.8) rotate(6deg)}
4% {opacity:1}
13% {opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
16% {transform:translate(0,-3px)}
19% {transform:translate(0,0)}
46% {transform:translate(0,0) rotate(0deg)}
49% {transform:translate(0,0) rotate(-9deg)}
52% {transform:translate(0,0) rotate(0deg)}
70% {opacity:1;transform:translate(0,0) scale(1) rotate(0deg)}
80% {opacity:1;transform:translate(-160px,-54px) scale(.8) rotate(-8deg)}
86%,100%{opacity:0;transform:translate(-200px,-70px) scale(.75)}
}
@keyframes brdWing{
0%,3% {transform:rotate(-26deg)}
1.5% {transform:rotate(16deg)}
4.5% {transform:rotate(16deg)}
6% {transform:rotate(-26deg)}
7.5% {transform:rotate(16deg)}
9% {transform:rotate(-26deg)}
10.5% {transform:rotate(14deg)}
12%,70% {transform:rotate(0deg)}
72% {transform:rotate(-24deg)}
74% {transform:rotate(16deg)}
76% {transform:rotate(-24deg)}
78% {transform:rotate(16deg)}
80%,100%{transform:rotate(-20deg)}
}
@media (prefers-reduced-motion:reduce){
.brd{display:none}
.hbn__tag::after{animation:none}
}
/* сайт лежит поверх декоративного неба */
.main{position:relative;z-index:1}
/* подложка сайта вынесена в отдельный слой .glass — у таблицы фона нет,
иначе её края были бы чёткими */
table.main{background:transparent !important;border:0 !important;box-shadow:none !important}
.wnow{
position:fixed;left:0;top:96px;z-index:998;
display:flex;flex-direction:column;gap:1px;
padding:6px 4px 6px 3px;
background:linear-gradient(180deg,#2b3444,#1d2431);
border-radius:0 12px 12px 0;
box-shadow:0 3px 14px rgba(15,25,40,.34);
transition:padding-right .18s ease;
}
.wnow:hover{padding-right:8px}
#wnow a.wnow__i{
display:flex;flex-direction:column;align-items:center;gap:1px;
width:40px;padding:5px 0;border-radius:8px;text-decoration:none;
transition:background-color .15s ease;
}
#wnow a.wnow__i:hover{background:rgba(255,255,255,.09)}
.wnow__ic{display:block;color:var(--wc);opacity:.9;line-height:0}
.wnow__n{
display:block;font-size:12px;font-weight:800;line-height:1.1;
color:var(--wc);font-variant-numeric:tabular-nums;letter-spacing:-.2px;
}
@media (max-width:1099px){ .wnow{display:none} }
.intro{
position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 90% at 50% 42%,#1c3a42 0%,#12242a 46%,#0b1418 100%);
animation:introOut .62s cubic-bezier(.76,0,.24,1) 2.35s forwards;
overflow:hidden;
}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.06)}}
.intro.is-done{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease}
/* мягкое свечение и медленные точки на фоне */
.intro__gl{position:absolute;left:50%;top:44%;width:640px;height:640px;margin:-320px 0 0 -320px;
background:radial-gradient(circle,rgba(114,185,193,.34) 0%,rgba(114,185,193,0) 62%);
opacity:0;animation:introGl 1.5s ease .1s forwards;pointer-events:none}
@keyframes introGl{to{opacity:1}}
.intro__d{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(142,207,214,.5);
opacity:0;animation:introD 3s ease-out forwards}
@keyframes introD{20%{opacity:1}to{opacity:0;transform:translateY(-70px)}}
.intro__c{position:relative;text-align:center;padding:0 20px}
/* знак */
.intro__m{display:block;margin:0 auto 22px;width:92px;height:92px;border-radius:24px;
background:linear-gradient(135deg,#8ECFD6 0%,#72B9C1 55%,#4A96A4 100%);
box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 0 0 rgba(142,207,214,.45);
transform:scale(.5) rotate(-14deg);opacity:0;
animation:introM .8s cubic-bezier(.2,1.5,.4,1) .05s forwards, introPulse 2.2s ease .85s}
@keyframes introM{to{transform:scale(1) rotate(0);opacity:1}}
@keyframes introPulse{40%{box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 0 26px rgba(142,207,214,0)}
to{box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 0 26px rgba(142,207,214,0)}}
.intro__m svg{display:block;width:92px;height:92px}
.intro__m path{stroke-dasharray:80;stroke-dashoffset:80;animation:introDraw .85s cubic-bezier(.6,0,.2,1) .38s forwards}
.intro__m path:last-child{stroke-dasharray:20;stroke-dashoffset:20;animation-delay:.86s;animation-duration:.4s}
@keyframes introDraw{to{stroke-dashoffset:0}}
/* название */
.intro__w{display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:800;
font-size:46px;letter-spacing:-1.4px;line-height:1;white-space:nowrap}
.intro__w b,.intro__w i{display:inline-block;font-style:normal;font-weight:800;opacity:0}
.intro__w b{color:#fff;transform:translateX(-26px);animation:introL .75s cubic-bezier(.2,.9,.3,1) .5s forwards}
.intro__w i{color:#8ECFD6;transform:translateX(26px);animation:introL .75s cubic-bezier(.2,.9,.3,1) .58s forwards}
@keyframes introL{to{opacity:1;transform:translateX(0)}}
.intro__ln{display:block;height:2px;width:0;margin:16px auto 13px;border-radius:2px;
background:linear-gradient(90deg,rgba(142,207,214,0),#72B9C1,rgba(142,207,214,0));
animation:introLn .7s cubic-bezier(.5,0,.2,1) 1.05s forwards}
@keyframes introLn{to{width:210px}}
.intro__s{display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11.5px;
text-transform:uppercase;color:#9fc2c8;letter-spacing:2px;opacity:0;
animation:introS .8s ease 1.25s forwards}
@keyframes introS{from{letter-spacing:7px}to{opacity:.95;letter-spacing:3.4px}}
.intro__sk{position:absolute;right:16px;bottom:14px;font-family:"Helvetica Neue",Arial,sans-serif;
font-size:11px;color:rgba(200,225,229,.5);letter-spacing:.4px;cursor:pointer;opacity:0;
animation:introS .5s ease 1.1s forwards}
.intro__sk:hover{color:#8ECFD6}
@media (max-width:520px){
.intro__m,.intro__m svg{width:74px;height:74px}
.intro__w{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
.intro{animation:introOut .3s linear .5s forwards}
.intro__m,.intro__w b,.intro__w i,.intro__s,.intro__sk{animation:none;opacity:1;transform:none}
.intro__m path{animation:none;stroke-dashoffset:0}
.intro__ln{animation:none;width:210px}
.intro__gl{animation:none;opacity:1}
.intro__d{display:none}
}
/* ==========================================================================
Плавающие кнопки слева: «Наверх» и «Техподдержка».
Новые классы .fabup / .suptab. Старые #to_up-правила и .support_panel
из style.css перебиваются здесь (было: rotate(90deg) с left:-63px и
кнопка «Наверх» прямоугольником в левом верхнем углу).
========================================================================== */
/* --- Наверх --- */
#to_up{
position:fixed !important;
left:18px !important; bottom:18px !important; top:auto !important;
width:44px !important; height:44px !important;
padding:0 !important; line-height:44px !important;
border-radius:50% !important;
background:linear-gradient(135deg,#6b8bfa,#4d90fe) !important;
color:#fff !important;
box-shadow:0 4px 14px rgba(77,144,254,.42) !important;
text-align:center !important;
opacity:0; /* показом управляет скрипт прокрутки */
transition:opacity .2s ease,transform .18s ease,box-shadow .18s ease;
z-index:999 !important;
}
#to_up:hover{
transform:translateY(-2px);
box-shadow:0 7px 20px rgba(77,144,254,.5) !important;
}
#to_up svg{vertical-align:middle}
/* подпись выезжает при наведении */
#to_up::after{
content:"Наверх";
position:absolute; left:52px; top:50%; transform:translateY(-50%);
background:rgba(20,22,26,.9); color:#fff;
font-size:11.5px; line-height:1; font-weight:600;
padding:6px 9px; border-radius:6px; white-space:nowrap;
opacity:0; pointer-events:none; transition:opacity .15s ease;
}
#to_up:hover::after{opacity:1}
/* --- Техподдержка --- */
.suptab{
position:fixed; left:0; top:50%; transform:translateY(-50%);
z-index:998;
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:12px 6px 12px 5px;
background:linear-gradient(180deg,#22c489,#179a6b);
border-radius:0 11px 11px 0;
box-shadow:0 3px 14px rgba(27,175,122,.38);
transition:padding-right .18s ease,box-shadow .18s ease;
}
.suptab:hover{
padding-right:10px;
box-shadow:0 5px 20px rgba(27,175,122,.5);
}
.suptab__x{
display:block; width:16px; height:16px; line-height:15px;
border-radius:50%; text-align:center;
font-size:13px; color:#fff; cursor:pointer;
background:rgba(255,255,255,.18);
opacity:.75; transition:opacity .15s ease,background-color .15s ease;
}
.suptab__x:hover{opacity:1;background:rgba(255,255,255,.32)}
.suptab__link{
display:flex; flex-direction:column; align-items:center; gap:7px;
color:#fff !important; text-decoration:none;
}
.suptab__link:hover{color:#fff !important;text-decoration:none}
.suptab__txt{
writing-mode:vertical-rl; /* было: rotate(90deg) всего блока */
font-size:12.5px; font-weight:700; letter-spacing:.3px;
}
@media (max-width:700px){
.suptab__txt{font-size:11.5px}
#to_up{left:12px !important;bottom:12px !important}
}
@media (prefers-reduced-motion:reduce){
#to_up,.suptab,.suptab__x{transition:none}
#to_up:hover{transform:none}
}
/* ==========================================================================
«Сейчас онлайн» — вертикальная вкладка у правого края.
Вертикальная, потому что горизонтальная капсула расползалась бы
при пятизначном числе. Всё содержимое видно сразу, при наведении
вкладка лишь чуть выезжает из края.
Новый класс .onl; старые .on_line/.onpovorot не задействованы.
id="online-site" сохранён — его обновляет скрипт.
========================================================================== */
.onl{
position:fixed; right:0; top:50%;
transform:translateY(-50%) translateX(9px); /* в покое утоплена за край */
z-index:998;
display:flex; flex-direction:column; align-items:center; gap:9px;
min-width:20px;
padding:23px 10px 14px 7px; /* значения подобраны владельцем */
background:linear-gradient(160deg,#1f2937,#111827);
border-radius:11px 0 0 11px;
box-shadow:0 3px 12px rgba(20,22,26,.22);
color:#fff; cursor:help;
transition:transform .26s cubic-bezier(.3,1,.4,1),box-shadow .2s ease;
}
.onl:hover{
transform:translateY(-50%) translateX(2px);
box-shadow:0 6px 22px rgba(20,22,26,.34);
}
.onl__pulse{
position:relative; flex:0 0 auto;
width:7px; height:7px; border-radius:50%; background:#22c55e;
}
.onl__pulse::after{
content:""; position:absolute; inset:-4px; border-radius:50%;
border:1.5px solid rgba(34,197,94,.5);
animation:onlRing 2.2s ease-out infinite;
}
@keyframes onlRing{
0%{transform:scale(.55);opacity:.9}
100%{transform:scale(1.5);opacity:0}
}
/* текст читается снизу вверх: vertical-rl + разворот на 180° */
.onl__n{
writing-mode:vertical-rl; transform:rotate(180deg);
font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap;
font-variant-numeric:tabular-nums; /* цифры не пляшут при обновлении */
}
@media (max-width:700px){
.onl{padding:8px 8px 8px 6px;transform:translateY(-50%) translateX(10px)}
.onl:hover{transform:translateY(-50%) translateX(2px)}
.onl__n{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
.onl{transition:none}
.onl__pulse::after{animation:none}
}
.amb{
position:fixed;inset:0;z-index:0;
pointer-events:none;overflow:hidden;
}
/* мягкий свет позади колонки сайта — страница будто подсвечена */
.amb__glow{
position:absolute;left:50%;top:34%;
width:1180px;height:60vh;margin-left:-590px;
border-radius:50%;
filter:blur(64px);
opacity:.75;
}
/* частицы: медленно всплывают и гаснут */
.amb__p{
position:absolute;border-radius:50%;
animation:ambUp linear infinite;
}
@keyframes ambUp{
0%{transform:translateY(0);opacity:0}
10%{opacity:var(--o,.5)}
85%{opacity:calc(var(--o,.5) * .5)}
100%{transform:translateY(-62vh);opacity:0}
}
/* широкая дымка, которая очень медленно проплывает поперёк */
.amb__haze{
position:absolute;left:-30%;right:-30%;
height:26vh;
filter:blur(46px);
animation:ambHaze 120s linear infinite;
}
@keyframes ambHaze{
from{transform:translateX(-9%)}
to{transform:translateX(9%)}
}
/* ---------- день ---------- */
.amb_day .amb__glow{
background:radial-gradient(ellipse at center,
rgba(255,246,214,.5) 0%, rgba(214,232,250,.34) 42%, rgba(214,232,250,0) 72%);
}
.amb_day .amb__haze{
top:34%;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 22%, rgba(255,255,255,0) 40%,
rgba(255,255,255,.4) 62%, rgba(255,255,255,0) 84%);
opacity:.55;
}
.amb_day .amb__p{
background:rgba(255,250,224,.95);
box-shadow:0 0 7px rgba(255,226,150,.75);
}
/* ---------- ночь ---------- */
.amb_night .amb__glow{
background:radial-gradient(ellipse at center,
rgba(88,132,235,.26) 0%, rgba(70,100,200,.16) 44%, rgba(70,100,200,0) 74%);
}
/* северное сияние: две ленты разного оттенка, дышат вразнобой */
.amb__aur{
position:absolute;left:-20%;right:-20%;top:26%;height:30vh;
filter:blur(38px);opacity:.5;
background:linear-gradient(100deg,
rgba(80,220,190,0) 0%, rgba(80,220,190,.30) 26%, rgba(120,160,255,.26) 48%,
rgba(150,120,255,.22) 66%, rgba(150,120,255,0) 92%);
animation:ambAur 44s ease-in-out infinite;
}
.amb__aur_2{
top:40%;height:22vh;opacity:.34;
background:linear-gradient(80deg,
rgba(120,160,255,0) 0%, rgba(120,160,255,.24) 34%, rgba(90,225,200,.20) 62%, rgba(90,225,200,0) 90%);
animation-duration:66s;animation-direction:reverse;
}
@keyframes ambAur{
0%,100%{transform:translateX(-6%) skewY(-1.5deg);opacity:.32}
50%{transform:translateX(6%) skewY(1.5deg);opacity:.6}
}
.amb_night .amb__p{
background:rgba(200,225,255,.95);
box-shadow:0 0 7px rgba(140,180,255,.7);
}
@media (max-width:760px){
.amb__glow{width:100%;margin-left:-50%}
.amb__p{display:none}
}
@media (prefers-reduced-motion:reduce){
.amb__p,.amb__haze,.amb__aur{animation:none !important}
.amb__p{opacity:.35}
}
.sky{
position:absolute;top:0;left:0;right:0;z-index:0;
width:100%;height:132px;
margin:0;
overflow:hidden;
pointer-events:none;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
}
.sky__c{position:absolute;inset:0}
/* ---------- день ---------- */
.sky_day{
background:
radial-gradient(120% 150% at 78% 4%, rgba(255,236,180,.85) 0%, rgba(255,236,180,0) 46%),
linear-gradient(180deg,#bfdcf7 0%,#dcecfb 46%,#f2f7fc 100%);
}
.sky__sun{
position:absolute;top:16px;right:12%;
width:56px;height:56px;border-radius:50%;
background:radial-gradient(circle at 38% 35%,#fff6d2 0%,#ffd968 48%,#ffc23c 100%);
box-shadow:0 0 0 12px rgba(255,214,96,.16),0 0 44px 14px rgba(255,198,64,.36);
animation:skySun 7s ease-in-out infinite;
}
@keyframes skySun{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* облака: сложены из «пузырей» на псевдоэлементах */
.sky__cloud{
position:absolute;
width:88px;height:26px;border-radius:26px;
background:rgba(255,255,255,.92);
box-shadow:0 6px 16px rgba(120,150,185,.22);
}
.sky__cloud::before,
.sky__cloud::after{
content:"";position:absolute;border-radius:50%;background:inherit;
}
.sky__cloud::before{width:38px;height:38px;left:14px;top:-17px}
.sky__cloud::after{width:26px;height:26px;left:48px;top:-11px}
.sky__cloud_1{top:34px;left:-130px;transform:scale(1);opacity:.95;animation:skyDrift 46s linear infinite}
.sky__cloud_2{top:70px;left:-130px;transform:scale(.72);opacity:.8;animation:skyDrift 64s linear infinite;animation-delay:-22s}
.sky__cloud_3{top:14px;left:-130px;transform:scale(.5);opacity:.62;animation:skyDrift 88s linear infinite;animation-delay:-52s}
@keyframes skyDrift{from{margin-left:0}to{margin-left:calc(100vw + 260px)}}
/* стайка птиц — маленький штрих, чтобы небо не выглядело пустым */
.sky__bird{
position:absolute;top:44px;left:-40px;
width:34px;height:12px;opacity:.5;
animation:skyBird 34s linear infinite;
}
@keyframes skyBird{
from{margin-left:0;transform:translateY(0)}
50%{transform:translateY(-10px)}
to{margin-left:calc(100vw + 80px);transform:translateY(4px)}
}
/* ---------- ночь ---------- */
.sky_night{
height:210px;
background:
radial-gradient(120% 90% at 50% 120%, rgba(90,140,255,.26) 0%, rgba(90,140,255,0) 60%),
linear-gradient(180deg,#05080f 0%,#080d18 34%,#0d1526 68%,#131c2e 100%);
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 58%,rgba(0,0,0,.5) 82%,transparent 100%);
}
/* млечный путь — мягкая наклонная дымка */
.sky__neb{
position:absolute;left:-10%;right:-10%;top:-30%;height:150%;
background:
radial-gradient(50% 22% at 38% 46%, rgba(150,180,255,.16) 0%, rgba(150,180,255,0) 70%),
radial-gradient(38% 16% at 66% 40%, rgba(190,160,255,.13) 0%, rgba(190,160,255,0) 72%);
transform:rotate(-9deg);
animation:skyNeb 26s ease-in-out infinite;
}
@keyframes skyNeb{0%,100%{opacity:.75}50%{opacity:1}}
/* звёздное поле — три слоя точек разного размера */
.sky__stars{
position:absolute;inset:0;
background-repeat:repeat;
background-image:
radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 27% 58%, rgba(255,255,255,.75) 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 41% 14%, rgba(255,255,255,.95) 50%, transparent 51%),
radial-gradient(1px 1px at 54% 40%, rgba(255,255,255,.65) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 63% 68%, rgba(200,225,255,.9) 50%, transparent 51%),
radial-gradient(1.1px 1.1px at 74% 26%, rgba(255,255,255,.8) 50%, transparent 51%),
radial-gradient(1.7px 1.7px at 86% 50%, rgba(255,255,255,.95) 50%, transparent 51%),
radial-gradient(1px 1px at 94% 16%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 6% 72%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1.3px 1.3px at 35% 84%, rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1px 1px at 68% 88%, rgba(255,255,255,.5) 50%, transparent 51%);
animation:skyTwinkle 5.5s ease-in-out infinite;
}
.sky__stars_2{
opacity:.55;
background-image:
radial-gradient(1px 1px at 18% 44%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 47% 72%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 58% 12%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 81% 76%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 24% 8%, #fff 50%, transparent 51%);
animation:skyTwinkle 3.7s ease-in-out infinite reverse;
}
@keyframes skyTwinkle{0%,100%{opacity:.85}50%{opacity:.45}}
/* планета у горизонта, будто восходит */
.sky__planet{
position:absolute;left:11%;bottom:-34px;
width:78px;height:78px;border-radius:50%;
background:
radial-gradient(circle at 34% 30%, #7fa4ff 0%, #4c6fd6 42%, #2b3f8f 74%, #1b2559 100%);
box-shadow:0 0 34px 8px rgba(90,130,255,.22), inset -8px -10px 22px rgba(0,0,0,.45);
animation:skyRise 12s ease-in-out infinite;
}
.sky__planet::after{
content:"";position:absolute;left:50%;top:52%;
width:150px;height:34px;margin:-17px 0 0 -75px;
border:2px solid rgba(160,190,255,.5);
border-radius:50%;
transform:rotate(-18deg);
box-shadow:0 0 14px rgba(120,160,255,.28);
}
@keyframes skyRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* маленькая луна справа */
.sky__moon{
position:absolute;top:30px;right:13%;
width:40px;height:40px;border-radius:50%;
background:radial-gradient(circle at 36% 34%, #fdfbf2 0%, #e6e2cf 58%, #cfcab2 100%);
box-shadow:0 0 26px 6px rgba(255,250,220,.22);
}
.sky__moon::after{
content:"";position:absolute;inset:0;border-radius:50%;
background:
radial-gradient(4px 4px at 32% 62%, rgba(150,146,128,.5) 50%, transparent 51%),
radial-gradient(6px 6px at 62% 36%, rgba(150,146,128,.4) 50%, transparent 51%),
radial-gradient(3px 3px at 70% 68%, rgba(150,146,128,.45) 50%, transparent 51%);
}
/* падающая звезда — редко и коротко */
.sky__shoot{
position:absolute;top:18px;left:-60px;
width:90px;height:2px;border-radius:2px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.9));
transform:rotate(14deg);opacity:0;
animation:skyShoot 11s linear infinite;
}
.sky__shoot_2{top:56px;animation-duration:17s;animation-delay:-7s;opacity:0}
@keyframes skyShoot{
0%{margin-left:0;opacity:0}
4%{opacity:.9}
16%{margin-left:62vw;opacity:0}
100%{margin-left:62vw;opacity:0}
}
/* небо «прокручивается»: при загрузке светило въезжает по дуге,
при переключении тумблера — уезжает, и только потом перезагрузка */
.sky__orb{
position:absolute;inset:0;
transform-origin:50% 210%;
animation:skyIn .85s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes skyIn{
from{transform:rotate(-26deg);opacity:0}
to{transform:rotate(0deg);opacity:1}
}
.sky_out .sky__orb{
animation:skyOut .5s cubic-bezier(.5,0,.75,.2) forwards;
}
@keyframes skyOut{
from{transform:rotate(0deg);opacity:1}
to{transform:rotate(26deg);opacity:0}
}
@media (max-width:760px){
.sky{height:96px}
.sky__planet{width:56px;height:56px;bottom:-22px}
.sky__planet::after{width:104px;height:24px;margin:-12px 0 0 -52px}
.sky__sun{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
.sky__cloud,.sky__bird,.sky__sun,.sky__planet,.sky__stars,.sky__shoot,.sky__orb,.sky__neb{animation:none !important}
.sky__shoot{display:none}
}
.grd{
position:fixed;left:0;right:0;bottom:0;z-index:0;
height:30vh;min-height:150px;max-height:320px;
pointer-events:none;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 26%,#000 62%);
mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 26%,#000 62%);
}
.grd__l{position:absolute;left:0;bottom:0;width:100%;display:block}
.grd__l1{height:62%;opacity:.55}
.grd__l2{height:46%;opacity:.8}
.grd__l3{height:30%}
.grd__hz{
position:absolute;left:0;right:0;bottom:38%;height:42%;
}
/* ---------- день ---------- */
.grd_day .grd__hz{
background:linear-gradient(180deg,rgba(255,242,214,0) 0%,rgba(255,238,198,.5) 60%,rgba(255,232,180,.75) 100%);
}
/* пыльца в тёплом свете */
.grd__dust{
position:absolute;bottom:8%;width:4px;height:4px;border-radius:50%;
background:rgba(255,244,206,.9);
box-shadow:0 0 8px rgba(255,226,150,.8);
animation:grdDust 15s linear infinite;
}
@keyframes grdDust{
0%{transform:translateY(0) translateX(0);opacity:0}
12%{opacity:.9}
80%{opacity:.5}
100%{transform:translateY(-140px) translateX(34px);opacity:0}
}
/* ---------- ночь ---------- */
.grd_night{
height:36vh;max-height:380px;
}
.grd_night .grd__hz{
background:linear-gradient(180deg,rgba(90,140,255,0) 0%,rgba(78,120,225,.26) 55%,rgba(70,110,205,.40) 100%);
}
/* низкий туман, ползёт вдоль горизонта */
.grd__mist{
position:absolute;left:-25%;right:-25%;bottom:26%;height:16%;
background:linear-gradient(90deg,
rgba(150,180,240,0) 0%,rgba(150,180,240,.16) 18%,rgba(150,180,240,0) 34%,
rgba(150,180,240,.13) 54%,rgba(150,180,240,0) 72%,rgba(150,180,240,.15) 88%,rgba(150,180,240,0) 100%);
filter:blur(9px);
animation:grdMist 52s linear infinite;
}
.grd__mist_2{bottom:14%;height:13%;opacity:.7;animation-duration:78s;animation-direction:reverse}
@keyframes grdMist{from{transform:translateX(-14%)}to{transform:translateX(14%)}}
/* окна в домах — мерцают вразнобой */
.grd__win{animation:grdWin 4s ease-in-out infinite}
.grd__win:nth-of-type(2n){animation-duration:6.5s;animation-delay:-1.7s}
.grd__win:nth-of-type(3n){animation-duration:9s;animation-delay:-3.4s}
@keyframes grdWin{0%,100%{opacity:.95}45%{opacity:.35}}
/* светлячки */
.grd__fly{
position:absolute;bottom:10%;width:5px;height:5px;border-radius:50%;
background:#ffe27a;
box-shadow:0 0 10px 2px rgba(255,214,90,.75);
animation:grdFly 13s ease-in-out infinite;
}
@keyframes grdFly{
0%{transform:translate(0,0);opacity:0}
10%{opacity:1}
35%{transform:translate(26px,-46px)}
60%{transform:translate(-14px,-88px);opacity:.85}
90%{opacity:0}
100%{transform:translate(18px,-140px);opacity:0}
}
@media (max-width:760px){
.grd{height:22vh;min-height:110px}
}
@media (prefers-reduced-motion:reduce){
.grd__dust,.grd__fly,.grd__win,.grd__mist{animation:none !important}
.grd__dust,.grd__fly{opacity:.5}
}
.glass{
position:fixed;z-index:0;
left:50%;margin-left:-516px;width:1032px;
top:188px;bottom:-30px;
pointer-events:none;
border-radius:26px;
/* было backdrop-filter: он пересчитывал размытие всей области на КАЖДОМ
кадре, потому что за стеклом постоянно двигаются звёзды, туман и
частицы. На слабых машинах это грело процессор. Заменено обычной
полупрозрачной заливкой — выглядит почти так же, стоит ноль. */
background:rgba(255,255,255,.64);
/* растворяем края: сверху длиннее, чтобы стекло «начиналось» плавно */
-webkit-mask-image:
linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 30px, #000 78px, #000 calc(100% - 70px), transparent 100%),
linear-gradient(90deg, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 30px, #000 78px, #000 calc(100% - 70px), transparent 100%),
linear-gradient(90deg, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
mask-composite:intersect;
}
@media (max-width:1060px){
.glass{left:0;right:0;margin-left:0;width:auto}
}
@media (prefers-reduced-motion:reduce){
.glass{
-webkit-backdrop-filter:none;backdrop-filter:none;
background:rgba(255,255,255,.88);
}
}
.scn{
position:fixed;bottom:0;z-index:0;
width:260px;height:46vh;max-height:400px;
pointer-events:none;
/* пейзаж должен только угадываться: приглушаем цвет и слегка размываем */
opacity:.30;
filter:blur(.7px) saturate(.6);
-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 34%,rgba(0,0,0,.8) 66%,#000 100%);
mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 34%,rgba(0,0,0,.8) 66%,#000 100%);
}
.scn_l{right:calc(50% + 524px)}
.scn_r{left:calc(50% + 524px)}
/* ——— Телефон и планшет: снимаем декоративный фон ———
Владелец: на телефоне при заходе в игру всё жёстко зависает. Причина не в
играх (в них ноль анимаций), а в фоне: свечения с размытием 64/46/38 px,
туман, маски и десятки анимаций пересчитываются каждый кадр.
На телефоне этот декор почти не виден — страница и так уменьшается целиком.
⚠️ Ширину здесь проверять нельзя: viewport жёстко width=1010, media по
ширине на телефоне не сработает. Признак телефона — сенсорный экран. */
@media (hover: none) and (pointer: coarse){
.sky, .grd, .amb, .scn, .brd{display:none !important}
/* backdrop-filter — самое дорогое свойство в CSS: браузер копирует кусок
фона и размывает его заново на каждом кадре. На телефоне гасим везде,
включая карточки игр. Под этими элементами и так лежит полупрозрачная
заливка, поэтому вид почти не меняется. */
*{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}
.scn svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
/* воздушный шар днём: очень медленно всплывает и покачивается */
.scn__balloon{
position:absolute;left:24%;bottom:30%;width:32px;opacity:.7;
animation:scnBall 26s ease-in-out infinite;
}
@keyframes scnBall{
0%,100%{transform:translate(0,0) rotate(-2deg)}
50%{transform:translate(10px,-38px) rotate(2deg)}
}
/* фонарь ночью: тёплое пятно, слегка дышит */
.scn__lamp{
position:absolute;left:30%;bottom:26%;
width:12px;height:12px;border-radius:50%;
background:radial-gradient(circle,#ffe6a8 0%,#ffc861 55%,rgba(255,200,97,0) 72%);
box-shadow:0 0 20px 7px rgba(255,198,90,.16);
animation:scnLamp 4.6s ease-in-out infinite;
}
@keyframes scnLamp{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media (max-width:1300px){ .scn{display:none} }
@media (prefers-reduced-motion:reduce){ .scn__balloon,.scn__lamp{animation:none} }
/* Переключатель темы у логотипа: иконка едет внутри самого кружка,
дорожка меняется с дневного неба на ночное со звёздами. */
.thsw{
position:relative; top:0; left:0; margin:0;
display:inline-flex; align-items:center;
padding:0; border:0; background:none; cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.thsw__track{
box-sizing:border-box; /* было: ход кружка считался без учёта паддингов */
position:relative; display:block;
width:64px; height:32px; border-radius:999px;
background:linear-gradient(160deg,#8fc3ff,#5aa0f5);
box-shadow:inset 0 2px 5px rgba(20,22,26,.22);
overflow:hidden;
transition:background .35s ease;
}
.thsw__sky{position:absolute;inset:0;pointer-events:none}
.thsw__star{
position:absolute; left:var(--x); top:var(--y);
width:2.5px; height:2.5px; border-radius:50%;
background:#fff; opacity:0; transform:scale(.4);
transition:opacity .35s ease,transform .35s ease;
transition-delay:calc(var(--d) * .18s);
}
.thsw__cloud{
position:absolute; left:34px; top:19px;
width:16px; height:6px; border-radius:6px;
background:rgba(255,255,255,.75);
box-shadow:-5px -3px 0 -1px rgba(255,255,255,.75);
opacity:1; transition:opacity .3s ease,transform .3s ease;
}
.thsw__knob{
box-sizing:border-box;
position:absolute; top:3px; left:3px;
width:26px; height:26px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(160deg,#fff5d6,#ffd66b);
box-shadow:0 2px 7px rgba(20,22,26,.32);
transition:transform .38s cubic-bezier(.4,1.35,.5,1),background .35s ease;
}
.thsw__sun,.thsw__moon{
position:absolute; transition:opacity .28s ease,transform .35s ease;
}
.thsw__sun{color:#e08a00;opacity:1;transform:rotate(0)}
.thsw__moon{color:#5b6580;opacity:0;transform:rotate(-70deg)}
.thsw:hover .thsw__knob{box-shadow:0 3px 11px rgba(20,22,26,.4)}
.thsw:focus-visible .thsw__track{outline:2px solid #4d90fe;outline-offset:2px}
/* тёмная тема: ход = 64 - 3 - 26 - 3 = 32px */
.thsw_on .thsw__track{background:linear-gradient(160deg,#2a3550,#141b2a)}
.thsw_on .thsw__knob{
transform:translateX(32px);
background:linear-gradient(160deg,#f4f7ff,#c9d4e8);
}
.thsw_on .thsw__sun{opacity:0;transform:rotate(70deg)}
.thsw_on .thsw__moon{color:#404a63;opacity:1;transform:rotate(0)}
.thsw_on .thsw__star{opacity:.95;transform:scale(1)}
.thsw_on .thsw__cloud{opacity:0;transform:translateX(8px)}
@media (max-width:520px){
.thsw{top:22px;margin-left:8px}
.thsw__track{width:56px;height:28px}
.thsw__knob{width:23px;height:23px;top:2.5px;left:2.5px}
.thsw_on .thsw__knob{transform:translateX(28px)}
}
@media (prefers-reduced-motion:reduce){
.thsw__knob,.thsw__track,.thsw__sun,.thsw__moon,.thsw__star,.thsw__cloud{transition:none}
}
/* Логотип — вывеска на кованом кронштейне: висит, чуть качается,
ночью её подсвечивает лампа. Та же уличная тема, что у щита. */
/* Вывеска и переключатель висят рядом на одной линии — обёртка
держит их вместе, чтобы ничего не зависело от длины названия. */
.hdl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:20px;vertical-align:top;margin-top:34px}
/* ветка приходит из левого края шапки */
.brn{
position:absolute;left:-22px;top:-16px;
width:214px;height:48px;pointer-events:none;z-index:1;
opacity:.9;
filter:drop-shadow(0 3px 6px rgba(60,90,130,.18));
}
.brn svg{width:100%;height:100%;display:block}
.adseo-logo{
position:relative;
display:inline-flex;align-items:center;gap:13px;
margin:0 0 0 16px;padding:0;
text-decoration:none;line-height:1;
-webkit-tap-highlight-color:transparent;
background:none;border:0;box-shadow:none;
transform-origin:50% -26px;
animation:lgSway 11s ease-in-out infinite;
}
@keyframes lgSway{0%,100%{transform:rotate(-.22deg)}50%{transform:rotate(.22deg)}}
/* при наведении вывеска качнётся, будто её задели */
.adseo-logo:hover{animation:lgKick 1.6s cubic-bezier(.33,.9,.35,1) 1}
@keyframes lgKick{
0%{transform:rotate(0)}
18%{transform:rotate(-.9deg)}
42%{transform:rotate(.62deg)}
66%{transform:rotate(-.34deg)}
84%{transform:rotate(.16deg)}
100%{transform:rotate(0)}
}
/* кронштейн: перекладина и две тяги к вывеске */
/* две нити от ветки к логотипу */
.adseo-logo::before{
content:"";position:absolute;left:16px;right:16px;top:-26px;height:26px;
background-image:
linear-gradient(180deg,rgba(120,95,66,.55) 0 100%),
linear-gradient(180deg,rgba(120,95,66,.55) 0 100%);
background-repeat:no-repeat;
background-size:1px 26px, 1px 26px;
background-position:6px 0, calc(100% - 6px) 0;
pointer-events:none;
}
/* колечки, которыми нити цепляются к логотипу */
.adseo-logo::after{
content:"";position:absolute;left:0;right:0;top:-3px;height:6px;
pointer-events:none;
background-image:
radial-gradient(circle,transparent 0 1.6px,rgba(120,95,66,.6) 1.7px 2.4px,transparent 2.5px),
radial-gradient(circle,transparent 0 1.6px,rgba(120,95,66,.6) 1.7px 2.4px,transparent 2.5px);
background-repeat:no-repeat;
background-position:16px 0, calc(100% - 16px) 0;
}
/* Знак — маленькое небо в рамке: днём солнце и облако,
ночью месяц и звёзды. Столбики роста поверх — фирменная марка. */
.adseo-logo__badge{
position:relative;overflow:hidden;
flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:15px;
background:linear-gradient(165deg,#8fc3f5 0%,#5b9bff 58%,#4d90fe 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 4px 12px rgba(77,144,254,.35);
transition:transform .22s ease,box-shadow .22s ease;
}
/* светило в углу знака */
.adseo-logo__badge::before{
content:"";position:absolute;right:7px;top:6px;
width:13px;height:13px;border-radius:50%;
background:radial-gradient(circle at 38% 35%,#fff6d2 0%,#ffd968 52%,#ffc23c 100%);
box-shadow:0 0 10px 2px rgba(255,206,80,.55);
}
/* звёзды ночью / облачко днём */
.adseo-logo__badge::after{
content:"";position:absolute;left:0;right:0;top:0;bottom:0;
background-image:
radial-gradient(7px 7px at 12px 12px, rgba(255,255,255,.85) 55%, transparent 56%),
radial-gradient(5px 5px at 18px 13px, rgba(255,255,255,.7) 55%, transparent 56%);
}
@keyframes lgTwinkle{0%,100%{opacity:.9}50%{opacity:.45}}
/* Переключатель тем висит на своём подвесе рядом с вывеской
и покачивается в своём ритме — птица садится уже на него. */
/* переключатель просто стоит рядом с вывеской, без подвеса */
/* рамка таблички в тон вывеске */
.thsw .thsw__track{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 5px 14px rgba(40,70,120,.16);
border:1px solid rgba(110,140,180,.3);
}
.adseo-logo__badge svg{position:relative;z-index:2}
.adseo-logo__badge svg rect{
}
/* Слово: акцент с градиентом, под ним тонкая линия горизонта */
.adseo-logo__text{
position:relative;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
font-size:27px;font-weight:800;letter-spacing:-.3px;
color:#1c2430;white-space:nowrap;
padding-bottom:5px;
}
.adseo-logo__accent{
background:linear-gradient(92deg,#4d90fe 0%,#2a5fd6 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
/* линия горизонта: короткая в покое, вытягивается при наведении */
.adseo-logo__text::after{
content:"";position:absolute;left:0;bottom:0;
width:26px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#4d90fe,rgba(77,144,254,0));
transition:width .3s cubic-bezier(.3,.9,.3,1);
}
.adseo-logo:hover .adseo-logo__text::after{width:100%}
.adseo-logo:hover .adseo-logo__badge{
transform:scale(1.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.6),
0 7px 18px rgba(77,144,254,.45);
}
@media (max-width:520px){
.adseo-logo__badge{width:38px;height:38px;border-radius:12px}
.adseo-logo__badge svg{width:21px;height:21px}
.adseo-logo__text{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
.adseo-logo__badge::after{animation:none}
}
/* ==========================================================================
Верхнее меню — современная вёрстка.
Пункты и порядок сохранены. Палитра приведена к фирменному синему,
добавлены перенос строк, состояния фокуса и адаптив.
========================================================================== */
.mnav{
--mnav-bg1:#6b8bfa;
--mnav-radius:10px;
background:linear-gradient(193.36deg,rgba(107,139,250,0) 8.59%,#6b8bfa 51.96%),url(/statica/telegram-bg.png) repeat,#6b8bfa;
border-radius:var(--mnav-radius);
padding:5px 7px;
box-shadow:0 4px 16px rgba(0,0,0,.16);
/* .main-navigation из style.css тянет margin-bottom:-9px — следующий блок
наезжал на панель; здесь возвращаем нормальный отступ */
margin-bottom:12px;
}
.mnav__list{
display:flex;
flex-wrap:nowrap;
max-width:100%; /* всё меню строго в один ряд, глобус не убегает вниз */
align-items:stretch;
justify-content:center; /* было: пункты растягивались — зазоры прыгали */
gap:3px;
list-style:none;
margin:0;padding:0;
}
.mnav__item{flex:0 1 auto;display:flex;min-width:0;max-width:100%}
.mnav__link{
flex:1;
display:flex;align-items:center;justify-content:center;
padding:12px 10px; /* было 16px: строка меню не влезала в 1000px и растягивала всю таблицу */
color:#fff;
font-size:13px;
font-weight:600;
letter-spacing:.2px;
line-height:1.2;
text-align:center;
white-space:nowrap; /* подписи не разрываются на две строки */
text-decoration:none;
border-radius:9px;
position:relative;
transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
/* было: hover-градиент #4a77a8 не совпадал с цветом панели.
стало: полупрозрачная подложка — всегда в тон фирменному синему */
.mnav__link:hover{
background:rgba(255,255,255,.18);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
color:#fff;text-decoration:none;
}
.mnav__link:active{transform:translateY(1px)}
.mnav__link:focus-visible{
outline:2px solid #fff;outline-offset:-3px;
background:rgba(255,255,255,.16);
}
.mnav__link_active{
background:rgba(255,255,255,.24);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
color:#fff;
}
.mnav__link_active::after{ /* индикатор активного раздела */
content:"";
position:absolute;left:12px;right:12px;bottom:4px;
height:3px;border-radius:3px;
background:#fff;opacity:1;
}
/* акцентный пункт «Конкурсы» — фирменный красный сохранён */
.mnav__link_regard{background:#d67676}
.mnav__link_regard:hover{background:#e46868}
.mnav__link_regard.mnav__link_active{background:#e46868}
/* «Новости» — мигающая красная подсветка для непрочитанных */
.mnav__link_news{color:#fff;background:#d64545;animation:mnavNewsBlink 1.2s ease-in-out infinite}
.mnav__link_news:hover{background:#e45555;animation:none}
@keyframes mnavNewsBlink{
0%,100%{background:#d64545;box-shadow:0 0 0 0 rgba(214,69,69,.55)}
50%{background:#ff6b6b;box-shadow:0 0 0 6px rgba(214,69,69,0)}
}
@media (prefers-reduced-motion: reduce){.mnav__link_news{animation:none;background:#d64545}}
/* --- языковой блок: разметка и классы прежние, чтобы не сломать changeLang() --- */
/* было: margin-left:auto — забирал всю свободную ширину и выбрасывал
глобус на вторую строку. Теперь он просто последний в центрированном ряду */
.mnav .block_language{display:flex;align-items:center;flex:0 0 auto;margin-left:4px}
@media (max-width:1100px){
.mnav__link{padding:12px 7px;font-size:12.5px}
}
@media (max-width:760px){
.mnav{padding:4px;margin-bottom:10px}
.mnav__list{flex-wrap:wrap} /* только на телефоне разрешаем перенос */
.mnav__link{padding:10px 8px;font-size:12px}
.mnav__item{flex:1 1 33%} /* по 3 в ряд на телефоне */
}
@media (prefers-reduced-motion:reduce){
.mnav__link{transition:none}
.mnav__link:active{transform:none}
}
.mnav__link_adx{position:relative}
.mnav__dot{
position:absolute;top:2px;right:-4px;
min-width:15px;height:15px;padding:0 4px;border-radius:8px;
display:inline-flex;align-items:center;justify-content:center;
background:#e8384f;color:#fff;font-size:9px;font-weight:800;font-style:normal;line-height:1;
}
/* было: «+» переносился вместе с пилюлями и падал на вторую строку.
стало: список переносится внутри себя, «+» вынесен из переноса */
.chainbar{
display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px;
padding:2px 0;
}
/* grid с автоколонками: сколько бы ссылок ни было — все в ОДНОМ ряду,
равной ширины. Перенос невозможен в принципе (был на flex-wrap) */
.chainbar__list{
flex:1 1 auto;min-width:0;
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
align-items:stretch;gap:6px;
}
.chainbar__link{
display:inline-flex;align-items:center;justify-content:center;
text-align:center;min-width:0;
padding:8px 10px;border-radius:9px;
background:#fff;border:1px solid #e2e4ea;
font-size:12px;font-weight:600;line-height:1.3;
color:#3b3f47;text-decoration:none;
box-shadow:0 1px 2px rgba(20,22,26,.05);
transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
.chainbar__link:hover{
box-shadow:0 3px 9px rgba(20,22,26,.10);transform:translateY(-1px);
text-decoration:none;
}
.chainbar__add{
flex:0 0 auto;width:38px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:9px;background:#fff;border:1px solid #e2e4ea;
color:#9aa0aa;font-size:20px;font-weight:400;line-height:1;text-decoration:none;
box-shadow:0 1px 2px rgba(20,22,26,.05);
transition:box-shadow .15s ease,transform .15s ease,color .15s ease,border-color .15s ease;
}
.chainbar__add:hover{
color:#4d90fe;border-color:#c7d8fb;
box-shadow:0 3px 9px rgba(20,22,26,.10);transform:translateY(-1px);
text-decoration:none;
}
/* цвет выбирает рекламодатель при размещении — мягкий тон вместо жёсткого контура */
.chainbar__link.color-chain-red{border-color:#f6b8b8;color:#c93b3b;background:#fff6f6}
.chainbar__link.color-chain-red:hover{border-color:#e88a8a}
.chainbar__link.color-chain-green{border-color:#a9d8b0;color:#1e7a34;background:#f5fbf6}
.chainbar__link.color-chain-green:hover{border-color:#7fc48c}
.chainbar__link.color-chain-blue{border-color:#b7cdfb;color:#2a5fd6;background:#f5f8ff}
.chainbar__link.color-chain-blue:hover{border-color:#93b3f7}
.chainbar__link.color-chain-black{border-color:#d5d7db;color:#2a2c30;background:#fafafb}
.chainbar__link.color-chain-black:hover{border-color:#b5b8be}
.chainbar__link.color-chain-orange{border-color:#f7cf9e;color:#c9760a;background:#fffaf3}
.chainbar__link.color-chain-orange:hover{border-color:#f0b866}
.chainbar__link.color-chain-aqua{border-color:#a8e6e6;color:#0d8f8f;background:#f2fdfd}
.chainbar__link.color-chain-aqua:hover{border-color:#79d6d6}
.chainbar__link.color-chain-brown{border-color:#d9b9b9;color:#7a3a3a;background:#faf6f6}
.chainbar__link.color-chain-brown:hover{border-color:#c19696}
@media (max-width:600px){
/* на телефоне один ряд из 5 нечитаем — раскладываем по два */
.chainbar__list{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.chainbar__link{font-size:11.5px;padding:7px 6px}
}
/* === ACCOUNT-CARD PREMIUM v3 === */
@keyframes acGlow{0%,100%{opacity:.55}50%{opacity:.85}}
@keyframes acShimmer{0%{transform:translateX(-110%)}60%,100%{transform:translateX(220%)}}
@keyframes acPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,140,.55), 0 4px 12px rgba(255,85,114,.35)}50%{box-shadow:0 0 0 8px rgba(255,107,140,0), 0 4px 12px rgba(255,85,114,.35)}}
@keyframes acFloatIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes acProg{from{width:0}}
/* ������� ���� (�� ���������) */
.banners[data-ac-theme="light"]{
--ac-bg: linear-gradient(155deg,#ffffff 0%,#f5f9ff 60%,#eaf1fb 100%);
--ac-border: rgba(99,139,255,.18);
--ac-shadow: 0 8px 24px rgba(99,139,200,.18), inset 0 1px 0 rgba(255,255,255,.7);
--ac-text: #2a3a55;
--ac-text-soft: #6b7e9b;
--ac-text-num: #1a2742;
--ac-text-num-glow: 0 1px 2px rgba(255,255,255,.7);
--ac-prog-bg: rgba(70,100,150,.13);
--ac-prog-fill: linear-gradient(90deg,#3aa05e 0%,#6cb1ff 100%);
--ac-avatar-ring: #ffffff;
--ac-avatar-outline: #6b8bfa;
--ac-avatar-bg: #ffffff;
--ac-glow-1: rgba(108,177,255,.22);
--ac-glow-2: rgba(155,140,255,.18);
}
/* Ҩ���� ���� */
.banners[data-ac-theme="dark"]{
--ac-bg: linear-gradient(155deg,#19223a 0%,#1f2c4a 60%,#243556 100%);
--ac-border: rgba(150,200,255,.10);
--ac-shadow: 0 10px 28px rgba(10,15,30,.35), inset 0 1px 0 rgba(255,255,255,.05);
--ac-text: #e9f0fb;
--ac-text-soft: rgba(233,240,251,.65);
--ac-text-num: #ffffff;
--ac-text-num-glow: 0 0 22px rgba(120,180,255,.5);
--ac-prog-bg: rgba(255,255,255,.10);
--ac-prog-fill: linear-gradient(90deg,#6cb1ff 0%,#9b8cff 100%);
--ac-avatar-ring: rgba(255,255,255,.12);
--ac-avatar-outline: rgba(99,179,255,.4);
--ac-avatar-bg: #0e1628;
--ac-glow-1: rgba(99,179,255,.18);
--ac-glow-2: rgba(255,107,140,.12);
}
/* ���� k (style 2) - ���������� ������� ��� fallback */
.banners[data-ac-theme="k"]{
--ac-bg: linear-gradient(155deg,#ffffff 0%,#f5f9ff 60%,#eaf1fb 100%);
--ac-border: rgba(99,139,255,.18);
--ac-shadow: 0 8px 24px rgba(99,139,200,.18), inset 0 1px 0 rgba(255,255,255,.7);
--ac-text: #2a3a55;
--ac-text-soft: #6b7e9b;
--ac-text-num: #1a2742;
--ac-text-num-glow: 0 1px 2px rgba(255,255,255,.7);
--ac-prog-bg: rgba(70,100,150,.13);
--ac-prog-fill: linear-gradient(90deg,#3aa05e 0%,#6cb1ff 100%);
--ac-avatar-ring: #ffffff;
--ac-avatar-outline: #6b8bfa;
--ac-avatar-bg: #ffffff;
--ac-glow-1: rgba(108,177,255,.22);
--ac-glow-2: rgba(155,140,255,.18);
}
.banners[data-ac-theme]{
position:relative !important;
width:188px !important;
max-width:188px !important;
box-sizing:border-box !important;
margin:-10px auto 16px !important;
background:var(--ac-bg) !important;
border:1px solid var(--ac-border) !important;
border-radius:14px !important;
box-shadow:var(--ac-shadow) !important;
padding:12px 11px 11px !important;
overflow:hidden !important;
animation:acFloatIn .55s ease-out;
}
.banners[data-ac-theme]::before{
content:"";
position:absolute;inset:-30%;
background:radial-gradient(circle at 30% 20%, var(--ac-glow-1), transparent 55%),
radial-gradient(circle at 80% 90%, var(--ac-glow-2), transparent 50%);
animation:acGlow 9s ease-in-out infinite;
pointer-events:none;z-index:0;
}
.banners[data-ac-theme] > *{position:relative;z-index:1}
/* ��� */
.banners[data-ac-theme] .titles2{
background:transparent !important;
color:var(--ac-text) !important;
font-size:13px !important;
font-weight:600 !important;
text-align:left !important;
padding:0 2px !important;
margin-bottom:8px !important;
border-radius:0 !important;
box-shadow:none !important;
text-shadow:none !important;
letter-spacing:.2px;
display:flex;align-items:center;justify-content:space-between;
}
#leftcolumn .banners[data-ac-theme] .titles2::after{
content:"";
width:6px;height:6px;border-radius:50%;
background:#3ad07f;
box-shadow:0 0 8px rgba(58,208,127,.7);
animation:acGlow 2.4s ease-in-out infinite;
flex:0 0 6px;
}
/* ������ ������������ ����� (s_dep � �.�.) � ��������� */
.banners[data-ac-theme] > center:first-of-type,
.banners[data-ac-theme] a.s_staj,
.banners[data-ac-theme] a.s_rab,
.banners[data-ac-theme] a.s_brig,
.banners[data-ac-theme] a.s_mast,
.banners[data-ac-theme] a.s_pror,
.banners[data-ac-theme] a.s_biz,
.banners[data-ac-theme] a.s_dep,
.banners[data-ac-theme] a.s_olig{
display:none !important;
}
/* ��������-��� (��������� ������� JS) */
.banners[data-ac-theme] .ac-progress{
position:relative;height:5px;
background:var(--ac-prog-bg);
border-radius:99px;margin:0 2px 4px;overflow:hidden;
}
.banners[data-ac-theme] .ac-progress > i{
display:block;height:100%;
background:var(--ac-prog-fill);
border-radius:99px;
animation:acProg 1.4s cubic-bezier(.4,1.2,.4,1) both;
box-shadow:0 0 8px rgba(108,177,255,.35);
}
.banners[data-ac-theme] .ac-progress-label{
font-size:9.5px;
color:var(--ac-text-soft);
text-align:center;
margin:0 2px 9px;
letter-spacing:.3px;
font-weight:500;
}
/* ������ */
.banners[data-ac-theme] .avatar-akk{
width:58px !important;height:58px !important;
border-radius:50% !important;
padding:0 !important;
border:3px solid var(--ac-avatar-ring) !important;
outline:1px solid var(--ac-avatar-outline) !important;
outline-offset:-5px;
margin:0 !important;
background:var(--ac-avatar-bg) !important;
object-fit:cover;
box-shadow:0 4px 12px rgba(0,0,0,.18);
transition:transform .3s ease;
}
.banners[data-ac-theme] .avatar-akk:hover{transform:scale(1.05) rotate(-2deg)}
/* ����� �������� */
.banners[data-ac-theme] a.rating{
width:auto !important;height:auto !important;
padding:0 !important;
line-height:1 !important;
font-size:24px !important;
font-weight:800 !important;
background:transparent !important;
color:var(--ac-text-num) !important;
border-radius:0 !important;
box-shadow:none !important;
text-shadow:var(--ac-text-num-glow) !important;
display:inline-block !important;
text-transform:none !important;
letter-spacing:-.5px;
transition:filter .2s;
}
.banners[data-ac-theme] a.rating:hover{transform:none !important;filter:brightness(1.12)}
/* "�������" */
.banners[data-ac-theme] .status{
font-size:9.5px !important;
font-weight:700 !important;
letter-spacing:1.2px;
text-transform:uppercase;
background:linear-gradient(135deg,#6cb1ff,#9b8cff) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
margin-top:1px;
}
/* ����� */
.banners[data-ac-theme] .e_bonus{
background:linear-gradient(135deg,#ff7a90,#ff5572) !important;
color:#fff !important;
padding:5px 12px !important;
border-radius:999px !important;
font-size:10.5px !important;
font-weight:700 !important;
text-decoration:none !important;
border:none !important;
display:inline-block !important;
text-shadow:none !important;
margin-bottom:4px !important;
animation:acPulse 2.2s ease-in-out infinite;
cursor:pointer;
}
.banners[data-ac-theme] .e_bonus::before{content:"\26A1 ";opacity:.95}
.banners[data-ac-theme] .e_bonus:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* ������� */
.banners[data-ac-theme] .menu-balance{
position:relative !important;
width:auto !important;height:auto !important;
margin:7px 2px 0 !important;
padding:0 !important;
background:transparent !important;
border-radius:11px !important;
overflow:hidden !important;
}
.banners[data-ac-theme] .menu-balance::before{
content:"";
position:absolute;top:0;bottom:0;width:60%;
background:linear-gradient(110deg,transparent,rgba(255,255,255,.18),transparent);
transform:translateX(-110%);
z-index:2;pointer-events:none;
animation:acShimmer 4.5s ease-in-out infinite;
animation-delay:1s;
}
.banners[data-ac-theme] .menu-balance.b-red::before{animation-delay:3.2s}
.banners[data-ac-theme] .menu-balance > a{
position:static !important;
display:flex !important;
align-items:center;gap:8px;
padding:8px 10px !important;
line-height:1.15 !important;
text-shadow:none !important;
font-size:10.5px !important;
font-weight:600 !important;
border-radius:11px !important;
box-shadow:0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
letter-spacing:.2px;
color:#fff !important;
background:#444 !important;
border:1px solid rgba(255,255,255,.06);
transition:transform .15s ease, box-shadow .25s ease;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.banners[data-ac-theme] .menu-balance > a:hover{
transform:translateY(-2px) !important;
box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.banners[data-ac-theme] .menu-balance > a::before{
content:"";
width:18px;height:18px;flex:0 0 18px;
background-position:center;background-repeat:no-repeat;background-size:contain;
opacity:.95;
}
.banners[data-ac-theme] .menu-balance.b-green > a{
background:linear-gradient(135deg,#1eaf60 0%,#0e8a47 100%) !important;
}
.banners[data-ac-theme] .menu-balance.b-green > a::before{
background-image:url("data:image/svg+xml;utf8,");
}
.banners[data-ac-theme] .menu-balance.b-red > a{
background:linear-gradient(135deg,#ff8a3a 0%,#ed5d1a 100%) !important;
}
.banners[data-ac-theme] .menu-balance.b-red > a::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* Блоки баннеров боковой колонки (100x100 и 200x200).
Раньше эти правила лежали внутри ветки для гостей, поэтому у
авторизованных баннеры выводились совсем без оформления.
Тёмная тема для них уже есть в statica/style-dark.css. */
.sidebanner{
background:#fff;border-radius:8px;border-left:3px solid var(--c);
padding:9px 11px;margin-bottom:10px;
box-shadow:0 1px 2px rgba(20,22,26,.06);
}
.sidebanner__head{
display:flex;align-items:center;gap:5px;
font-size:10.5px;color:#8b8a85;text-transform:uppercase;letter-spacing:.4px;
margin-bottom:7px;
}
.sidebanner__head svg{flex:0 0 auto;color:var(--c)}
.sidebanner__body{text-align:center;padding-bottom:2px}
.sidebanner__foot{
text-align:center;margin-top:6px;font-size:11px;
display:flex;align-items:center;justify-content:center;gap:6px;
}
.sidebanner__foot a{color:#4d90fe;text-decoration:none}
.sidebanner__foot a:hover{text-decoration:underline}
.sidebanner__foot span{color:#d5d7db}
.sidestat{display:flex;flex-direction:column;gap:7px;margin:4px 0 12px}
.sidestat__tile{
background:#fff;border-radius:8px;
padding:8px 10px 8px 12px;border-left:3px solid var(--c);
box-shadow:0 1px 2px rgba(20,22,26,.06);
transition:box-shadow .15s ease,transform .15s ease;
}
.sidestat__tile:hover{box-shadow:0 3px 8px rgba(20,22,26,.10);transform:translateX(1px)}
.sidestat__lbl{
display:flex;align-items:center;gap:5px;
font-size:10.5px;color:#8b8a85;text-transform:uppercase;letter-spacing:.4px;
margin-bottom:3px;line-height:1.2;
}
.sidestat__lbl svg{flex:0 0 auto;color:var(--c)}
.sidestat__val{
font-size:16px;font-weight:800;color:#14161a;letter-spacing:-.2px;
font-variant-numeric:tabular-nums;overflow-wrap:break-word;word-break:break-word;
}
.sidestat__val i,.sidestat__val strong{
font-style:normal!important;font-size:11px!important;font-weight:600!important;
color:#9aa0aa!important;text-shadow:none!important;
}