/* ============================================================================= premium.css — надстройка оформления поверх style.css. Подключается СТРОГО после style.css. Правила файла: • только существующие классы/атрибуты — ни одного нового имени в разметке; • ни одного !important (инлайн движковых виджетов здесь не перебивается); • все новые переменные — в :root с префиксом --fx-; • направление: «дорого и спокойно» — глубокий фон со слоями свечения, стеклянные поверхности, тонкие светящиеся границы, мягкие тени, дозированный акцент, никакого мигания. Осторожно (инварианты, которые файл сознательно сохраняет): • .search-trigger__input остаётся 16px — иначе iOS зумит страницу; • .bar держит width:100%/max-width:100% — защита от инлайнового width движка; • .select не получает background-шорткат — иначе слетает SVG-шеврон; • .modal__box (он же .cabinet) — грид, поэтому никаких ::before/::after на нём; • .game__art::after занят подписью .game--noart — не трогаем; • мобильные отступы .page/.footer переобъявлены в конце файла. ========================================================================== */ :root{ /* фон и слои свечения */ --fx-bg-deep:#06070B; --fx-glow-lime:rgba(200,255,46,.055); --fx-glow-violet:rgba(123,92,255,.085); --fx-glow-cool:rgba(70,130,215,.05); --fx-vignette:rgba(0,0,0,.5); --fx-grain:.03; /* стекло и поверхности */ --fx-glass:rgba(16,19,26,.74); --fx-glass-2:rgba(23,27,36,.62); --fx-glass-3:rgba(13,16,22,.66); --fx-field:rgba(255,255,255,.045); --fx-field-2:rgba(255,255,255,.075); --fx-hi:rgba(255,255,255,.06); --fx-blur:18px; --fx-blur-s:10px; --fx-sat:135%; /* границы */ --fx-line:rgba(255,255,255,.085); --fx-line-2:rgba(255,255,255,.14); --fx-line-accent:rgba(200,255,46,.34); /* тени */ --fx-sh-1:0 1px 0 var(--fx-hi) inset, 0 14px 30px -24px rgba(0,0,0,.95); --fx-sh-2:0 1px 0 var(--fx-hi) inset, 0 26px 50px -32px rgba(0,0,0,.95); --fx-sh-3:0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03); --fx-sh-lime:0 18px 44px -26px rgba(200,255,46,.45); --fx-sh-violet:0 18px 44px -26px rgba(115,85,238,.55); /* текст (все значения проверены на контраст ≥ 4.5:1 на своих фонах) */ --fx-text-dim:rgba(244,247,250,.74); --fx-text-soft:rgba(244,247,250,.58); /* радиусы */ --fx-r-s:12px; --fx-r-m:16px; --fx-r-l:20px; --fx-r-xl:26px; /* движение */ --fx-ease:cubic-bezier(.22,.68,.24,1); --fx-dur:.28s; --fx-dur-l:.45s; /* акцентные заливки — те же цвета бренда, но собранные в мягкий градиент */ --fx-lime-grad:linear-gradient(180deg,#D3FF57,#BDF524); --fx-lime-grad-hi:linear-gradient(180deg,#DEFF7C,#C8FF2E); /* фиолетовый затемнён относительно #7B5CFF: белый текст на нём давал 4.36:1 */ --fx-violet-grad:linear-gradient(180deg,#7355EE,#5B3FD6); --fx-violet-solid:#6B4AF0; } /* светлая тема выключена в JS, но токены остаются согласованными */ html[data-theme="light"]{ --fx-bg-deep:#F2F4F0; --fx-glow-lime:rgba(140,190,0,.10); --fx-glow-violet:rgba(123,92,255,.10); --fx-glow-cool:rgba(70,130,215,.07); --fx-vignette:rgba(13,17,23,.06); --fx-grain:.015; --fx-glass:rgba(255,255,255,.8); --fx-glass-2:rgba(255,255,255,.72); --fx-glass-3:rgba(246,248,244,.78); --fx-field:rgba(13,17,23,.04); --fx-field-2:rgba(13,17,23,.07); --fx-hi:rgba(255,255,255,.7); --fx-line:rgba(13,17,23,.1); --fx-line-2:rgba(13,17,23,.17); --fx-line-accent:rgba(120,165,0,.5); --fx-text-dim:rgba(13,17,23,.74); --fx-text-soft:rgba(13,17,23,.6); --fx-sh-1:0 1px 0 var(--fx-hi) inset, 0 14px 30px -26px rgba(13,17,23,.35); --fx-sh-2:0 1px 0 var(--fx-hi) inset, 0 26px 50px -34px rgba(13,17,23,.35); --fx-sh-3:0 40px 90px -55px rgba(13,17,23,.4), 0 0 0 1px rgba(13,17,23,.04); } /* ----------------------------------------------------------------------------- 1. Фон страницы и слои свечения Цвет холста уезжает на , фон становится прозрачным — только так слои с z-index:-1 остаются видимыми (иначе непрозрачный фон body их закрывает). -------------------------------------------------------------------------- */ html{background-color:var(--fx-bg-deep)} body{background-color:transparent} body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1100px 620px at 6% -12%, var(--fx-glow-lime), transparent 62%), radial-gradient(920px 560px at 98% 2%, var(--fx-glow-violet), transparent 60%), radial-gradient(1300px 760px at 46% 112%, var(--fx-glow-cool), transparent 64%), radial-gradient(150% 115% at 50% 42%, transparent 45%, var(--fx-vignette) 100%); } /* едва заметное зерно — убирает «пластиковость» больших тёмных плоскостей */ body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--fx-grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------------- 2. Типографика и воздух -------------------------------------------------------------------------- */ body{-moz-osx-font-smoothing:grayscale} .h1{letter-spacing:-.035em;line-height:1.06} .h2{letter-spacing:-.028em;line-height:1.12} .h3{letter-spacing:-.02em;line-height:1.2} .muted{color:var(--fx-text-dim)} .page{padding:56px var(--pad) 34px;gap:clamp(16px,2.2vw,28px)} .panel__head{padding:13px 16px;border-bottom-color:var(--fx-line)} .panel__body{padding:16px;gap:10px} .card{padding:14px;gap:10px} .cards-3{gap:clamp(10px,1.2vw,14px)} .games{gap:clamp(8px,1vw,14px)} .article p,.article ul,.article ol{color:var(--fx-text-dim);line-height:1.7} .article{gap:12px;margin-top:26px} /* ----------------------------------------------------------------------------- 3. Шапка — стеклянная, липкая overflow здесь не задаётся: внутрь .header переносится выпадашка поиска. -------------------------------------------------------------------------- */ .header{ background:linear-gradient(180deg,rgba(10,12,17,.9),rgba(10,12,17,.7)); border-bottom:1px solid var(--fx-line); -webkit-backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); box-shadow:0 1px 0 var(--fx-hi) inset, 0 24px 50px -44px #000; transition:background var(--fx-dur-l) var(--fx-ease),box-shadow var(--fx-dur-l) var(--fx-ease); } .search-trigger,.chip-stat,.wager,.avatar-btn{ background-color:var(--fx-field); border-color:var(--fx-line); box-shadow:0 1px 0 rgba(255,255,255,.04) inset; transition:border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease); } .search-trigger{color:var(--fx-text-soft)} .search-trigger__input::placeholder{color:var(--fx-text-soft)} .search-trigger:focus-within{border-color:var(--fx-line-accent);box-shadow:0 0 0 3px rgba(200,255,46,.12)} .search-trigger__clear{background-color:var(--fx-field-2);color:var(--fx-text-dim)} .chip-stat__label{color:var(--fx-text-soft);letter-spacing:.09em} .chip-stat__value{letter-spacing:-.01em} .avatar-btn{color:var(--fx-text-dim)} .header__logo img{opacity:.96} /* ----------------------------------------------------------------------------- 4. Боковой рельс -------------------------------------------------------------------------- */ .rail{ padding-block:14px; background:linear-gradient(180deg,rgba(13,16,22,.88),rgba(8,10,14,.92)); border-right:1px solid var(--fx-line); -webkit-backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); box-shadow:22px 0 60px -50px #000; } .rail__item{ border-radius:var(--fx-r-m); border-color:transparent; background-color:transparent; color:var(--fx-text-dim); transition:transform var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease); } .rail__name{opacity:.78} .rail__item.is-active{box-shadow:var(--fx-sh-lime)} /* ----------------------------------------------------------------------------- 5. Чипы и полосы фильтров -------------------------------------------------------------------------- */ .chips{ background:linear-gradient(180deg,rgba(11,13,18,.8),rgba(11,13,18,.58)); border-bottom:1px solid var(--fx-line); -webkit-backdrop-filter:blur(var(--fx-blur-s)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur-s)) saturate(var(--fx-sat)); } .chip{ background-color:var(--fx-field); border-color:var(--fx-line); color:var(--fx-text-dim); letter-spacing:.005em; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; transition:background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease); } /* активное состояние заливается движковым акцентом — добавляем только мягкий ореол */ .chip.is-active{box-shadow:var(--fx-sh-lime)} .catalog__prov{color:var(--fx-text-dim)} .catalog__count{color:var(--fx-text-soft);opacity:1} .catalog__div{background:linear-gradient(90deg,transparent,var(--fx-line-2),transparent);height:1px} .catalog__side .panel{position:relative} /* ----------------------------------------------------------------------------- 6. Тикер выигрышей — стеклянная полоса с растворяющимися краями -------------------------------------------------------------------------- */ .ticker{ padding-block:9px; background:linear-gradient(180deg,rgba(11,13,18,.78),rgba(11,13,18,.55)); border-bottom:1px solid var(--fx-line); -webkit-backdrop-filter:blur(var(--fx-blur-s)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur-s)) saturate(var(--fx-sat)); } .ticker__label{letter-spacing:.14em;color:var(--accent-ink);opacity:.9} .ticker__viewport{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); } /* бег ленты замедлен: спокойное движение вместо суеты. gap не трогаем — на нём завязан бесшовный стык дублированной ленты (-50%). */ .ticker__track{animation-duration:46s} .ticker__item{color:var(--fx-text-dim)} .ticker__art{border-radius:5px;box-shadow:0 2px 6px -3px rgba(0,0,0,.8)} .ticker__sum{letter-spacing:-.01em} /* точка «в эфире» больше не пульсирует — только тихий ореол */ .dot{animation:none;box-shadow:0 0 0 4px rgba(200,255,46,.1),0 0 12px rgba(200,255,46,.35)} /* ----------------------------------------------------------------------------- 7. Секции лобби: герой, панели, карточки, провайдеры, топ выигрышей -------------------------------------------------------------------------- */ .hero{ border-radius:var(--fx-r-xl); border-color:var(--fx-line-2); box-shadow:0 1px 0 var(--fx-hi) inset, 0 40px 80px -56px #000; transition:transform var(--fx-dur-l) var(--fx-ease),box-shadow var(--fx-dur-l) var(--fx-ease); } .hero__title{letter-spacing:-.035em} .hero__text{color:var(--fx-text-dim)} .fact,.hero__pill{ border-radius:999px; border-color:rgba(255,255,255,.18); background-color:rgba(8,10,14,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .hero__badge{border-radius:999px;letter-spacing:.1em;box-shadow:var(--fx-sh-lime)} .hero__dot{background-color:var(--fx-line-2);transition:width var(--fx-dur) var(--fx-ease),background-color var(--fx-dur) var(--fx-ease)} .panel,.card,.vip-card,.stat-box,.empty{ border-color:var(--fx-line); background-color:var(--fx-glass-2); box-shadow:var(--fx-sh-1); } .panel,.card{ border-radius:var(--fx-r-l); background-image:linear-gradient(180deg,rgba(255,255,255,.03),transparent 46%); transition:border-color var(--fx-dur-l) var(--fx-ease),box-shadow var(--fx-dur-l) var(--fx-ease); } .vip-card{border-radius:var(--fx-r-l)} .stat-box{border-radius:var(--fx-r-m)} .empty{border-style:dashed;border-color:var(--fx-line-2);background-color:transparent;box-shadow:none} .win{border-bottom-color:var(--fx-line);transition:background-color var(--fx-dur) var(--fx-ease)} .win__game{color:var(--fx-text-soft)} .win__art{box-shadow:0 4px 10px -6px rgba(0,0,0,.9)} .win__rank{color:var(--fx-text-soft)} .prov{ background-color:var(--fx-field); border-color:var(--fx-line); border-radius:var(--fx-r-s); transition:transform var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease); } .prov__txt{color:var(--fx-text-dim)} /* ----------------------------------------------------------------------------- 8. Карточки игр — подсветка и подъём при наведении Псевдоэлемент только ::after у .game (у .game__art ::after занят подписью плитки без арта — трогать нельзя). -------------------------------------------------------------------------- */ .game{ border-radius:14px; border-color:var(--fx-line); background-color:var(--fx-glass-2); box-shadow:var(--fx-sh-1); transition:transform var(--fx-dur-l) var(--fx-ease), box-shadow var(--fx-dur-l) var(--fx-ease), border-color var(--fx-dur-l) var(--fx-ease); } .game::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; transition:box-shadow var(--fx-dur-l) var(--fx-ease); } .game__art{background:linear-gradient(160deg,#171B24,#0E1117)} .game__art img{transition:transform .5s var(--fx-ease)} .game__badge{border-radius:999px;letter-spacing:.09em;box-shadow:0 6px 16px -10px rgba(200,255,46,.7)} .game__badge--hot{background:var(--fx-violet-solid);color:#fff} .game__fav{ border-radius:999px;background-color:rgba(8,10,14,.6);color:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; transition:color var(--fx-dur) var(--fx-ease),background-color var(--fx-dur) var(--fx-ease); } .game__body{padding:8px 9px 9px;gap:6px} .game__name{letter-spacing:-.01em;line-height:1.25} .game__prov{color:var(--fx-text-soft);letter-spacing:.02em} .game__play{border-radius:10px;background:var(--fx-lime-grad);box-shadow:0 1px 0 rgba(255,255,255,.32) inset} .game__demo{border-radius:10px;border-color:var(--fx-line-2);color:var(--fx-text-dim)} .skeleton{border-color:var(--fx-line);background-color:var(--fx-glass-3);border-radius:14px} .sk{opacity:.6} /* ----------------------------------------------------------------------------- 9. Карточки бонусов -------------------------------------------------------------------------- */ .bonus-card,.bonus{ border-radius:var(--fx-r-m); border-color:var(--fx-line); background-color:var(--fx-glass-2); background-image:radial-gradient(120% 90% at 100% 0%,rgba(123,92,255,.1),transparent 58%), linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%); box-shadow:var(--fx-sh-1); transition:transform var(--fx-dur-l) var(--fx-ease), border-color var(--fx-dur-l) var(--fx-ease), box-shadow var(--fx-dur-l) var(--fx-ease); } .bonus-card__art{filter:saturate(.94) contrast(1.02)} .bonus-card__title{letter-spacing:-.01em} .bonus-card__desc,.bonus__desc{color:var(--fx-text-dim)} .bonus-card.is-active{ border-color:var(--fx-line-accent); box-shadow:0 0 0 1px rgba(200,255,46,.12), var(--fx-sh-lime); } .bonus-chip{ background-color:var(--fx-field); border-color:var(--fx-line); color:var(--fx-text-dim); } .bonus-card__wager{border-top-color:var(--fx-line)} .bonus-card__wager-left{color:var(--fx-text-soft)} .promo-mine__title{letter-spacing:-.03em} /* ----------------------------------------------------------------------------- 10. Кнопки — три вида .btn--primary : акцентная заливка (главное действие, по одной на экран) .btn--ghost : стеклянная, тонкая граница (вторичное действие) .btn--alt : фиолетовая (альтернативное действие) -------------------------------------------------------------------------- */ .btn{ border-radius:14px; letter-spacing:.005em; transition:transform .16s var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease); } .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .btn--primary{ background:var(--fx-lime-grad); color:var(--on-accent); border-color:rgba(200,255,46,.42); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 28px -18px rgba(200,255,46,.6); } .btn--ghost{ background-color:var(--fx-field); border-color:var(--fx-line-2); color:var(--fx-text-dim); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; } .btn--alt{ background:var(--fx-violet-grad); border-color:rgba(115,85,238,.5); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px -18px rgba(115,85,238,.75); } .btn--icon{border-radius:14px} .btn:disabled{box-shadow:none;transform:none} /* пульсация и «сердцебиение» сняты: спокойный интерфейс без мигания */ .btn--pulse{animation:none;box-shadow:0 0 0 1px rgba(200,255,46,.2) inset, var(--fx-sh-lime)} .games_list-button{ animation:none; border-color:var(--fx-line-2); box-shadow:0 0 0 1px rgba(200,255,46,.1), var(--fx-sh-1); } .chat__fab{animation:none;box-shadow:0 18px 36px -20px rgba(200,255,46,.6)} .vip-chip.is-current{background:var(--fx-violet-solid);border-color:var(--fx-violet-solid);color:#fff} .pager a,.pager span{border-radius:14px;background-color:var(--fx-field);border-color:var(--fx-line)} .pager .is-active{box-shadow:var(--fx-sh-lime)} /* ----------------------------------------------------------------------------- 11. Поля ввода background задаётся только через background-color: шорткат снёс бы SVG-шеврон у .select. -------------------------------------------------------------------------- */ .input,.select,.textarea,.sel__btn{ border-radius:var(--fx-r-m); border-color:var(--fx-line-2); background-color:var(--fx-field); box-shadow:0 1px 2px rgba(0,0,0,.28) inset; transition:border-color var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease); } .input::placeholder,.textarea::placeholder{color:var(--fx-text-soft)} .input:focus,.select:focus,.textarea:focus,.sel__btn:focus,.sel.is-open .sel__btn{ border-color:var(--fx-line-accent); box-shadow:0 0 0 3px rgba(200,255,46,.13); } .input[readonly]{background-color:transparent;color:var(--fx-text-soft);box-shadow:none} .field{color:var(--fx-text-soft);letter-spacing:.02em} .sel__list{ border-radius:var(--fx-r-m); border-color:var(--fx-line-2); /* Opaque: nested backdrop-filter (modal overlay + this list) makes option text vanish on hover in WebKit — same class as the modal flicker we already killed by dropping blur on .modal__box. */ background-color:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--fx-sh-3); isolation:isolate; } .sel__opt{color:var(--fx-text-dim);border-radius:10px;-webkit-tap-highlight-color:transparent} .sel__opt:hover{background-color:rgba(200,255,46,.28);color:var(--text)} .sel__opt.is-active,.sel__opt.is-active:hover{background-color:var(--accent);color:var(--on-accent)} .check{ border-radius:var(--fx-r-m); border-color:var(--fx-line); background-color:var(--fx-field); color:var(--fx-text-dim); transition:border-color var(--fx-dur) var(--fx-ease),background-color var(--fx-dur) var(--fx-ease); } .check__box{border-radius:9px;border-color:var(--fx-line-2)} .answer:not(:empty){border-radius:var(--fx-r-s);border-color:var(--fx-line);background-color:var(--fx-field)} /* ----------------------------------------------------------------------------- 12. Полосы прогресса и VIP-кольцо width/max-width у .bar переобъявлены намеренно: движок может прислать инлайновую ширину на заливку. -------------------------------------------------------------------------- */ .bar{ width:100%;max-width:100%; background-color:rgba(255,255,255,.06); box-shadow:0 1px 2px rgba(0,0,0,.45) inset; } .bar--lg{background-color:rgba(255,255,255,.05)} .bar > i{ background:linear-gradient(90deg,#A8E62A,#C8FF2E 58%,#8E74FF); box-shadow:0 0 10px rgba(200,255,46,.3); transition:width .6s var(--fx-ease); } /* ::after кольца — непрозрачная «дырка» поверх conic-градиента, её фон не трогаем */ .vip-lobby__ring{filter:drop-shadow(0 10px 22px rgba(200,255,46,.12))} .vip-lobby__pct{background-color:var(--fx-glass);border-color:var(--fx-line-2); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .vip-lobby__points{background-color:var(--fx-field);border-color:var(--fx-line)} .vip-lobby__label,.vip-lobby__next{color:var(--fx-text-dim)} .vip-perks li{background-color:var(--fx-field);border-color:var(--fx-line);border-radius:var(--fx-r-m)} .vip-chip{background-color:var(--fx-field);border-color:var(--fx-line);color:var(--fx-text-dim)} /* ----------------------------------------------------------------------------- 13. Модалки, скрим, кабинет, касса Никаких псевдоэлементов на .modal__box — это грид-контейнер кабинета. -------------------------------------------------------------------------- */ .modal{ background:radial-gradient(120% 80% at 50% 0%,rgba(24,16,52,.5),transparent 62%),rgba(4,6,10,.72); -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%); } /* Никакого backdrop-filter на самом окне: оверлей .modal уже размывает страницу, и вложенное размытие поверх размытия на Windows перерисовывалось от каждого мигания каретки — форма мерцала раз в полсекунды, пока курсор стоял в поле. Фон окна и так непрозрачен на 92%, так что визуально ничего не потеряно. */ .modal__box{ border-radius:var(--fx-r-xl); border-color:var(--fx-line-2); background-color:rgba(18,21,29,.92); background-image:radial-gradient(110% 70% at 50% 0%,rgba(255,255,255,.05),transparent 60%); box-shadow:0 1px 0 var(--fx-hi) inset, var(--fx-sh-3); } /* Пока открыто окно, фоновая обвязка снимает своё размытие: оверлей блюрит элементы, которые сами блюрят фон, и Windows пересобирает всю цепочку на каждый кадр каретки. Под тёмным оверлеем это не видно, зато перерисовка становится плоской. */ body.has-modal .header,body.has-modal .rail,body.has-modal .chips,body.has-modal .ticker, body.has-modal .tabbar,body.has-modal .game__fav,body.has-modal .search-trigger{ -webkit-backdrop-filter:none;backdrop-filter:none; } .modal__close{ border-radius:14px;background-color:var(--fx-field);border-color:var(--fx-line); color:var(--fx-text-dim); transition:color var(--fx-dur) var(--fx-ease),border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease); } .modal__title{letter-spacing:-.025em} .cabinet__aside{background-color:rgba(255,255,255,.028);border-right-color:var(--fx-line)} .user__avatar{box-shadow:var(--fx-sh-lime)} .tab{ border-radius:var(--fx-r-m);border-color:transparent;color:var(--fx-text-dim); transition:background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease); } .tab.is-active{box-shadow:var(--fx-sh-lime)} .subtabs{gap:8px} .method{ border-radius:var(--fx-r-m); border-color:var(--fx-line); background-color:var(--fx-field); color:var(--fx-text-dim); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; transition:border-color var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease); } .method.is-active{border-color:var(--fx-line-accent);box-shadow:0 0 0 3px rgba(200,255,46,.14),var(--fx-sh-lime)} .method--card{border-color:var(--fx-line-accent)} /* фон .method__logo оставлен движковым: у .has-logo и у P2P-плитки он свой */ .method__logo{border-radius:10px} .method__name{color:var(--text)} .row{border-radius:var(--fx-r-m);border-color:var(--fx-line);background-color:var(--fx-field)} .st{border-radius:999px;letter-spacing:.04em} .sys__icon{border-radius:var(--fx-r-l)} .notice{border-radius:var(--fx-r-m);border-color:var(--fx-line-accent);background-color:rgba(200,255,46,.07)} .launcher__bar{ border-radius:var(--fx-r-m);border-color:var(--fx-line);background-color:var(--fx-glass-2); -webkit-backdrop-filter:blur(var(--fx-blur-s));backdrop-filter:blur(var(--fx-blur-s)); box-shadow:var(--fx-sh-1); } .win-frame{border-radius:var(--fx-r-l);border-color:var(--fx-line);box-shadow:var(--fx-sh-2)} .game__fav--bar{background-color:var(--fx-field);border-color:var(--fx-line)} /* окно суммы депозита (наш скин, не виджет) */ .pw-deposit-popup .pw-popup-inner{border-radius:var(--fx-r-xl)} .dep__close{background-color:var(--fx-field);border-color:var(--fx-line)} .dep__label{color:var(--fx-text-soft)} .dep__method{color:var(--fx-text-dim)} .dep__input .input{background-color:var(--fx-field-2);border-radius:var(--fx-r-m)} /* ----------------------------------------------------------------------------- 14. Поиск, чат, нижняя панель -------------------------------------------------------------------------- */ .search{background:rgba(4,6,10,.68);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* То же, что и у .modal__box: поверх размытого .search размытие второй раз не ставим — в поле поиска мигает каретка, и на Windows это перерисовывало всю панель. Фон делаем плотнее, чтобы окно осталось читаемым без блюра. */ .search__box{ border-radius:var(--fx-r-xl); border-color:var(--fx-line-2); background-color:rgba(16,19,26,.94); box-shadow:var(--fx-sh-3); } html[data-theme="light"] .search__box{background-color:rgba(255,255,255,.96)} html.is-searching .header,html.is-searching .search-trigger{ -webkit-backdrop-filter:none;backdrop-filter:none; } .search__head{border-bottom-color:var(--fx-line)} .search.is-drop .search__box{box-shadow:0 30px 60px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04)} .chat__panel{ border-radius:var(--fx-r-l);border-color:var(--fx-line-2);background-color:var(--fx-glass); -webkit-backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); box-shadow:var(--fx-sh-3); } .chat__head,.chat__foot{border-color:var(--fx-line)} .chat__msg{background-color:var(--fx-field);border-color:var(--fx-line);color:var(--fx-text-dim)} .chat__fab{border-radius:22px} .tabbar{ background:linear-gradient(180deg,rgba(11,13,18,.78),rgba(8,10,14,.94)); border-top:1px solid var(--fx-line); -webkit-backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); backdrop-filter:blur(var(--fx-blur)) saturate(var(--fx-sat)); } .tabbar a{color:var(--fx-text-dim);border-radius:var(--fx-r-m); transition:color var(--fx-dur) var(--fx-ease),background-color var(--fx-dur) var(--fx-ease)} .tabbar a.is-active{background-color:rgba(200,255,46,.09)} /* ----------------------------------------------------------------------------- 15. Подвал Только padding-top: нижний отступ переопределяется мобильным правилом style.css (запас под .tabbar) — шорткат его бы стёр. -------------------------------------------------------------------------- */ .footer{ padding-top:30px; margin-top:22px; border-top:1px solid var(--fx-line); background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 60%); } .footer__title{color:var(--fx-text-soft);letter-spacing:.16em} .footer a{color:var(--fx-text-dim);opacity:1; transition:color var(--fx-dur) var(--fx-ease)} .footer .muted{color:var(--fx-text-soft)} .age{border-color:var(--fx-line-2);color:var(--fx-text-dim)} /* ----------------------------------------------------------------------------- 16. Наведение — только там, где есть настоящая мышь. Ни одно действие не спрятано за hover: все кнопки, звёзды «в избранное» и ссылки видимы и доступны без наведения. -------------------------------------------------------------------------- */ @media (hover:hover){ .search-trigger:hover,.chip-stat:hover,.wager:hover,.avatar-btn:hover{ border-color:var(--fx-line-accent); background-color:var(--fx-field-2); } .rail__item:not(.is-active):hover{ transform:translateY(-2px); background-color:var(--fx-field-2); border-color:var(--fx-line-2); color:var(--text); } .chip:not(.is-active):hover{background-color:var(--fx-field-2);border-color:var(--fx-line-accent);color:var(--text)} .prov:hover{transform:translateY(-2px);border-color:var(--fx-line-accent);background-color:var(--fx-field-2)} .win:hover{background-color:rgba(255,255,255,.04)} .hero:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--fx-hi) inset, 0 50px 90px -60px #000} .game:hover{ transform:translateY(-6px); border-color:var(--fx-line-accent); box-shadow:0 30px 50px -30px rgba(0,0,0,.95), 0 22px 60px -34px rgba(200,255,46,.4); } .game:hover::after{ box-shadow:0 0 0 1px rgba(200,255,46,.22) inset, 0 0 44px -20px rgba(200,255,46,.5) inset; } .game:hover .game__art img{transform:scale(1.05)} .game__fav:hover{background-color:rgba(8,10,14,.78)} .game__play:hover{background:var(--fx-lime-grad-hi);filter:none} .game__demo:hover{border-color:var(--fx-line-accent);color:var(--text)} .bonus-card:hover{ transform:translateY(-3px); border-color:var(--fx-line-2); box-shadow:var(--fx-sh-2); } .btn--primary:hover{ filter:none; background:var(--fx-lime-grad-hi); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 16px 34px -18px rgba(200,255,46,.75); } .btn--ghost:hover{ background-color:rgba(200,255,46,.07); border-color:var(--fx-line-accent); color:var(--accent-ink); } .btn--alt:hover{ filter:none; background:linear-gradient(180deg,#8163F5,#6747E2); box-shadow:0 1px 0 rgba(255,255,255,.26) inset, var(--fx-sh-violet); } .games_list-button:hover{border-color:var(--fx-line-accent);box-shadow:0 0 0 1px rgba(200,255,46,.18),var(--fx-sh-lime)} .chat__fab:hover{transform:translateY(-2px) scale(1.03)} .method:not(.is-active):hover{border-color:var(--fx-line-accent);background-color:var(--fx-field-2)} .row:hover{border-color:var(--fx-line-2);background-color:var(--fx-field-2)} .tab:not(.is-active):hover{border-color:var(--fx-line-2);background-color:var(--fx-field);color:var(--text)} .modal__close:hover{border-color:var(--fx-line-accent);color:var(--text)} .sel__opt:hover{background-color:rgba(200,255,46,.28);color:var(--text)} .sel__opt.is-active:hover{background-color:var(--accent);color:var(--on-accent)} .footer a:hover{color:var(--accent-ink)} .tabbar a:hover{color:var(--text)} .catalog__prov:hover{color:var(--text)} } /* ----------------------------------------------------------------------------- 17. Тач-устройства: наведение не участвует в доступе к действиям, подъёмы и трансформации отключены, чтобы «залипший» hover не смещал плитки. -------------------------------------------------------------------------- */ @media (hover:none){ .game:hover,.prov:hover,.rail__item:hover,.bonus-card:hover,.hero:hover, .chat__fab:hover,.method:hover,.btn:hover{transform:none} .game:hover .game__art img{transform:none} .game:hover::after{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset} .game:active{transform:scale(.985)} .btn:active,.chip:active,.method:active{transform:scale(.985)} /* избранное, «Играть», «Демо» и ссылки видимы всегда — hover ничего не открывает */ .game__actions,.game__fav,.game__play,.game__demo{opacity:1;visibility:visible} } /* ----------------------------------------------------------------------------- 18. Уважение к prefers-reduced-motion: ни переходов, ни анимаций. Селекторы перечислены поимённо — так правило выигрывает без !important. .reveal возвращается в видимое состояние: без анимации он остался бы с opacity:0 (заливка both в style.css). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none;transition:none} body,a,.btn,.btn--primary,.btn--ghost,.btn--alt,.btn--pulse,.games_list-button, .chip,.chips,.chip-stat,.wager,.avatar-btn,.search-trigger,.search-trigger__clear, .header,.rail,.rail__item,.ticker,.ticker__track,.dot, .hero,.hero__dot,.panel,.card,.vip-card,.stat-box,.empty,.win,.prov, .game,.game::after,.game__art img,.game__fav,.game__play,.game__demo,.game__badge, .bonus,.bonus-card,.bonus-card__art,.bonus-chip,.bonus-slider__track, .input,.select,.textarea,.sel__btn,.sel__list,.sel__opt,.check,.check__box,.answer, .bar,.bar > i,.vip-lobby__ring,.vip-chip,.vip-perks li, .modal,.modal__box,.modal.is-open > .modal__box,.modal__close,.tab,.tab-pane,.tab-pane.is-active, .method,.method__logo,.row,.pager a,.pager span,.st, .search,.search__box,.chat__panel,.chat__fab,.chat__msg,.tabbar,.tabbar a, .launcher__bar,.win-frame,.footer,.footer a,.age,.sk,.skeleton, .reveal,.reveal.is-in{ animation:none; transition:none; } .reveal,.reveal.is-in{opacity:1;transform:none} .sk{background-image:none;background-color:var(--fx-field-2)} .game:hover,.prov:hover,.rail__item:hover,.bonus-card:hover,.hero:hover, .chat__fab:hover,.btn:active,.game:active{transform:none} } /* ----------------------------------------------------------------------------- 19. Сохранение мобильных инвариантов style.css. Базовые правила выше используют шорткаты padding, поэтому запас под фиксированную .tabbar переобъявляется здесь, в существующем брейкпоинте. -------------------------------------------------------------------------- */ @media (max-width:760px){ .page{padding-bottom:88px} .hero{border-radius:var(--fx-r-l)} .modal__box{border-radius:var(--fx-r-l)} } @media (max-width:520px){ .page{padding-top:34px} .footer{padding-top:24px;margin-top:16px} } /* ---------- «дышащий» скелетон ---------- Было: серые плашки без движения — экран выглядит сломанным, а не загружающимся. Стало: брендовый градиент, мягкая пульсация подложки + бегущий блик. Пропорции и габариты берутся из базового style.css, здесь только окраска и движение. */ .sk, .skeleton__art{ position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); animation:sk-breathe 2.4s ease-in-out infinite} .sk::after, .skeleton__art::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg, transparent 0%, rgba(200,255,46,.10) 42%, rgba(123,92,255,.13) 58%, transparent 100%); animation:sk-sweep 1.9s cubic-bezier(.4,0,.2,1) infinite} .skeleton{border-radius:15px;overflow:hidden;border:1px solid var(--line);background:var(--input)} @keyframes sk-breathe{0%,100%{opacity:.55}50%{opacity:.9}} @keyframes sk-sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){ .sk,.skeleton__art{animation:none;opacity:.7} .sk::after,.skeleton__art::after{display:none} } /* Больше воздуха между карточками бонусов: при 8px они читались как одна плита, особенно в кабинете, где рядом ещё и колонка меню. */ .bonuses-grid{gap:16px} .promo-mine .bonuses-grid{gap:18px} #cabinet-modal .bonuses-grid{gap:16px} @media (max-width:520px){.bonuses-grid,.promo-mine .bonuses-grid,#cabinet-modal .bonuses-grid{gap:12px}} /* ---------- еле различимая казиномная атрибутика на фоне ---------- Векторный паттерн внутри CSS (data-URI), без обращений к CDN и без файлов темы: масти, фишка и кубик тонким контуром. Лежит НИЖЕ градиентных пятен body::before — html::before рисуется раньше по порядку документа. Прозрачность 4.5%: рисунок читается только на пустом поле и не спорит с карточками. */ html::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; opacity:.045; background-repeat:repeat; background-size:280px 280px; background-image:url("data:image/svg+xml;utf8,")} @media (max-width:640px){html::before{background-size:210px 210px;opacity:.035}} /* Подложка под логотипом метода была заметным светлым прямоугольником (var(--input) у .has-logo и var(--art) у остальных) — на тёмной карточке он читался как второй фон и спорил с названием метода. Оставляем едва различимую плашку: логотипы у нас цветные и на тёмном читаются сами. */ .method__logo, .method__logo.has-logo{background:rgba(255,255,255,.032);box-shadow:none;border:0} .method__logo--card{background:transparent} /* ---------- открыт попап: фон замирает ---------- Требование заказчика: пока открыто любое окно, фоновая жизнь страницы стоит. JS-часть (таймеры слайдеров, слой js/fx.js) живёт в Gate внутри js/main.js, здесь — только CSS-анимации подложки: бегущая строка выигрышей, пульс точки «онлайн», свечение кнопок, скелетоны. Модалки и оверлей кассы лежат ВНЕ .shell, поэтому их собственная анимация появления не задета. Поиск и панель поддержки — это сами попапы, в них крутятся скелетоны выдачи, им паузу снимаем обратно. .launcher — корень страницы запуска игры (game/game.tpl), там .shell не существует, но модалки логина и кабинета открываются те же. */ body.is-frozen .shell *, body.is-frozen .shell *::before, body.is-frozen .shell *::after, body.is-frozen .launcher *, body.is-frozen .launcher *::before, body.is-frozen .launcher *::after, body.is-frozen .chat__fab{animation-play-state:paused!important} /* Специфичность здесь выше, чем у правила паузы (0,3,1 против 0,2,1) НАМЕРЕННО: раньше эти строки выигрывали только порядком в файле, и любая склейка/переупорядочивание css молча заморозили бы скелетоны выдачи поиска. */ body.is-frozen .shell .search, body.is-frozen .shell .search *, body.is-frozen .shell .search *::before, body.is-frozen .shell .search *::after, body.is-frozen .chat .chat__panel, body.is-frozen .chat .chat__panel *{animation-play-state:running!important} /* Модалка и окно кассы дополнительно отключают подложку от мыши. Дублирует атрибут inert, который Gate вешает на детей , — для браузеров без его поддержки. */ body.is-locked .shell, body.is-locked .launcher{pointer-events:none}