/* ========================================================= iOS 26 GLASS — FULL STYLES (LIGHT default + .night_theme) - Default: light background #f6f5fa - Accent: premium orange/amber - Switch theme by adding class "night_theme" to OR wrapper ========================================================= */ /* ---------- THEME TOKENS (LIGHT) ---------- */ :root{ /* page */ --page:#f6f5fa; /* text */ --text:#15131d; --muted: rgba(21,19,29,.62); /* glass */ --glass: rgba(255,255,255,.62); --glass2: rgba(255,255,255,.78); /* borders */ --line: rgba(21,19,29,.10); --line2: rgba(21,19,29,.14); /* shadows */ --shadow: 0 22px 70px rgba(20,18,30,.10); --shadow2: 0 14px 40px rgba(20,18,30,.09); /* accent (premium orange) */ --accent:#ff8a1f; --accent2:#ffd166; --accent3:#ff6a00; --accentText:#2a1406; /* misc */ --ok:#16a34a; --r1: 22px; --r2: 18px; --blur: 18px; } /* ---------- THEME TOKENS (DARK) ---------- add .night_theme to body or root wrapper ------------------------------------------ */ .night_theme { --page:#222222; --text:#f4f2ff; --muted: rgba(244,242,255,.68); --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.08); --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.14); --shadow: 0 22px 70px rgba(0,0,0,.55); --shadow2: 0 14px 40px rgba(0,0,0,.45); /* same accent but tuned for dark */ --accent:#ffb24a; --accent2:#ffe08a; --accent3:#ff8a1f; --accentText:#1b120a; } body { color:var(--text); background: var(--page); } /* soft ambient blobs (auto adapts via vars) */ .bgOrbs{ position:fixed; inset:-80px; pointer-events:none; opacity:.92; filter: blur(30px); background: radial-gradient(420px 300px at 15% 0%, rgba(255,138,31,.18), transparent 62%), radial-gradient(520px 360px at 85% 10%, rgba(255,209,102,.14), transparent 62%), radial-gradient(560px 420px at 55% 85%, rgba(255,106,0,.10), transparent 68%); } .night_theme .bgOrbs{ opacity:.86; background: radial-gradient(420px 300px at 15% 0%, rgba(255,178,74,.22), transparent 62%), radial-gradient(520px 360px at 85% 10%, rgba(255,224,138,.16), transparent 62%), radial-gradient(560px 420px at 55% 85%, rgba(255,138,31,.12), transparent 68%); } .container { max-width: 1461px; margin: 0 auto; padding: 20px 18px 64px; } ::selection{background: rgba(255,138,31,.18)} /* ---------- TOP NAV ---------- */ .topNav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .backLink{ display:inline-flex; align-items:center; gap:10px; color: var(--text); text-decoration:none; font-weight:700; opacity:.92; } .backLink:hover{opacity:1} .backLink .ico{ width:28px;height:28px; display:grid;place-items:center; border-radius:10px; background: var(--glass); border:1px solid var(--line); box-shadow: 0 10px 24px rgba(20,18,30,.08); } .night_theme .backLink .ico{box-shadow:none} .rightTools{display:flex; gap:10px; align-items:center} /* ---------- GLASS CORE ---------- */ .glassBlock, .hero, .card, .searchBar{ background: linear-gradient(180deg, var(--glass2), var(--glass)); border:1px solid var(--line); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow2); position: relative; overflow: hidden; min-width: 350px; } .glassBlock::before, .hero::before, .card::before, .searchBar::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,0) 45%); opacity:.18; } .night_theme .glassBlock::before, .night_theme .hero::before, .night_theme .card::before, .night_theme .searchBar::before{ opacity:.08; } .glassBlock::after, .hero::after, .card::after{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(420px 220px at 10% 0%, rgba(255,138,31,.14), transparent 60%), radial-gradient(420px 220px at 90% 18%, rgba(255,209,102,.10), transparent 60%); opacity:.55; } .night_theme .glassBlock::after, .night_theme .hero::after, .night_theme .card::after{ opacity:.35; } /* ---------- SEARCH ---------- */ .searchBar{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 16px; } .searchBar input{ border:0; outline:0; background:transparent; color:var(--text); width:220px; } .searchBar input::placeholder{color: color-mix(in srgb, var(--muted) 75%, transparent)} .sIco{opacity:.75} @media (max-width: 980px){ .searchBar input{width:160px} } /* ---------- HERO ---------- */ .hero{ display:flex; gap:14px; align-items:center; padding:18px; border-radius: var(--r1); box-shadow: var(--shadow); } .heroSlim{padding:16px} .heroIcon{ width:66px;height:66px; border-radius: 18px; background: radial-gradient(120px 90px at 30% 20%, rgba(255,255,255,.55), transparent 60%), linear-gradient(180deg, rgba(255,138,31,.26), rgba(255,255,255,.55)); border:1px solid rgba(255,138,31,.22); display:grid; place-items:center; overflow:hidden; } .night_theme .heroIcon{ background: radial-gradient(120px 90px at 30% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, rgba(255,178,74,.24), rgba(255,255,255,.08)); border-color: rgba(255,178,74,.24); } .heroIcon img{width:100%;height:100%;object-fit:cover} .heroTitle{ font-size: 26px; font-weight: 650; letter-spacing: -.02em; } .heroSub{ margin-top:4px; color: var(--muted); font-size: 13px; line-height: 1.35; } .heroSub code{ padding:2px 8px; border-radius:999px; background: rgba(0,0,0,.04); border:1px solid var(--line); font-weight: 700; } .night_theme .heroSub code{ background: rgba(255,255,255,.05); } /* ---------- PILLS ---------- */ .pill{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.55); color: color-mix(in srgb, var(--text) 85%, transparent); font-size: 12px; font-weight: 700; } .night_theme .pill{ background: rgba(255,255,255,.06); color: rgba(244,242,255,.82); } .pillAccent{ background: radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, rgba(255,209,102,.28), rgba(255,138,31,.20)); border-color: rgba(255,138,31,.22); color: var(--accentText); } .night_theme .pillAccent{ background: radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.18), transparent 62%), linear-gradient(180deg, rgba(255,224,138,.22), rgba(255,178,74,.16)); border-color: rgba(255,178,74,.22); color: #fff; } .pillSoft{ background: rgba(255,255,255,.62); } .night_theme .pillSoft{background: rgba(255,255,255,.07)} /* ---------- ALERT ---------- */ .alert{ margin-top:12px; padding:12px 14px; border-radius: 14px; border:1px solid rgba(255,138,31,.22); background: rgba(255,138,31,.10); color: color-mix(in srgb, var(--text) 92%, transparent); } /* ---------- LAYOUT ---------- */ .layout{ margin-top:14px; display:grid; grid-template-columns: 1.6fr 1fr; gap: 108px; } @media (max-width: 980px){ .layout{grid-template-columns:1fr} } .colLeft,.colRight{display:flex; flex-direction:column; gap:14px} .glassBlock{ padding: 16px; border-radius: var(--r1); } .blockTitle{ font-weight: 719; letter-spacing: -.01em; margin-bottom:6px; display:flex; align-items:center; gap: 25px; } .blockSub{ color: var(--muted); font-size: 13px; margin-bottom: 14px; } /* ---------- STEPS ---------- */ .steps{display:flex; flex-direction:column; gap:10px} .step{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius: 16px; border:1px solid var(--line); background: rgba(0,0,0,.03); } .night_theme .step{background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.08)} .stepNum{ width:26px;height:26px; border-radius: 10px; display:grid;place-items:center; font-weight: 750; color: var(--accentText); background: radial-gradient(40px 26px at 30% 20%, rgba(255,255,255,.55), transparent 60%), linear-gradient(180deg, rgba(255,209,102,.30), rgba(255,138,31,.18)); border:1px solid rgba(255,138,31,.22); flex:0 0 auto; } .night_theme .stepNum{ color:#fff; background: radial-gradient(40px 26px at 30% 20%, rgba(255,255,255,.16), transparent 60%), linear-gradient(180deg, rgba(255,224,138,.22), rgba(255,178,74,.16)); border-color: rgba(255,178,74,.22); } .stepTitle{font-weight:700} .stepText{color:var(--muted); font-size:13px; margin-top:3px; line-height:1.35} .step.done .stepNum{ background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.22); color: var(--text); } .night_theme .step.done .stepNum{color:#fff} /* ---------- TABS ---------- */ .tabs{display:flex; gap:10px; margin: 6px 0 12px} .tab{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius: 14px; border:1px solid var(--line); background: rgba(0,0,0,.03); text-decoration:none; color: color-mix(in srgb, var(--text) 85%, transparent); font-weight: 750; font-size: 13px; } .night_theme .tab{background: rgba(0,0,0,.14); border-color: rgba(255,255,255,.10); color: rgba(244,242,255,.82)} .tab.active{ background: radial-gradient(140px 70px at 30% 15%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, rgba(255,209,102,.28), rgba(255,138,31,.20)); border-color: rgba(255,138,31,.22); color: var(--accentText); } .night_theme .tab.active{ background: radial-gradient(140px 70px at 30% 15%, rgba(255,255,255,.16), transparent 62%), linear-gradient(180deg, rgba(255,224,138,.22), rgba(255,178,74,.16)); border-color: rgba(255,178,74,.22); color:#fff; } /* ---------- VERSIONS ---------- */ .versions{display:flex; flex-direction:column; gap:10px} .verRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-radius: 16px; border:1px solid var(--line); background: rgba(0,0,0,.03); } .night_theme .verRow{background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.08)} .verTitle{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .verText{font-weight: 750} .verMeta{margin-top:4px; color: var(--muted); font-size:12px} .verMain{min-width:0} .empty{color: var(--muted); padding: 10px 0} /* ---------- FEATURES ---------- */ .featList{display:flex;flex-direction:column;gap: 14px;padding: 10px 10px 10px;} .feat{display:flex; gap:10px; align-items:flex-start} .featDot{ width:10px; height:10px; margin-top:6px; border-radius:999px; background: rgba(255,138,31,.80); box-shadow: 0 0 0 6px rgba(255,138,31,.14); } .night_theme .featDot{ background: rgba(255,178,74,.85); box-shadow: 0 0 0 6px rgba(255,178,74,.16); } .featTitle{font-weight:950} .featText{color:var(--muted); font-size:13px; margin-top:3px} /* ---------- HOTKEYS ---------- */ .hkList{display:flex;flex-direction:column;gap:10px;padding: 14px 1px 10px;} .hkRow{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius: 16px; border:1px solid var(--line); background: rgba(0,0,0,.03); } .night_theme .hkRow{background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.08)} .hkKey{ font-weight: 700; padding:6px 10px; border-radius: 12px; background: rgba(0,0,0,.04); border:1px solid var(--line); } .night_theme .hkKey{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10)} .hkAct{color: var(--muted); font-size: 13px} /* ---------- HELP ---------- */ .helpBlock{display:flex; flex-direction:column; align-items:center; text-align:center} .helpIcon{ width:54px;height:54px; border-radius: 18px; display:grid;place-items:center; margin-bottom:10px; background: rgba(255,138,31,.12); border:1px solid rgba(255,138,31,.22); } .night_theme .helpIcon{background: rgba(255,178,74,.12); border-color: rgba(255,178,74,.22)} .helpTitle{font-weight: 700} .helpText{margin-top:6px; color: var(--muted); font-size: 13px} .helpBtns{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 10px 12px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.55); color: color-mix(in srgb, var(--text) 92%, transparent); text-decoration:none; font-weight: 340; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .night_theme .btn{background: rgba(255,255,255,.06); color: rgba(244,242,255,.90)} .btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2); opacity:1} .btnSm{padding: 9px 11px; border-radius: 13px; font-size: 13px} /* premium primary */ .btnPrimary{ border-color: rgba(255,138,31,.24); background: radial-gradient(160px 80px at 28% 18%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, rgba(255,209,102,.32), rgba(255,138,31,.22)); color: var(--accentText); } .night_theme .btnPrimary{ border-color: rgba(255,178,74,.24); background: radial-gradient(160px 80px at 28% 18%, rgba(255,255,255,.16), transparent 62%), linear-gradient(180deg, rgba(255,224,138,.22), rgba(255,178,74,.16)); color:#fff; } .btnGhost{background: rgba(0,0,0,.04)} .night_theme .btnGhost{background: rgba(0,0,0,.14)} .btnNote{opacity:.72; font-weight:700} /* focus ring */ .btn:focus, .tab:focus, .searchBar input:focus{ outline:none; box-shadow: 0 0 0 4px rgba(255,138,31,.14), var(--shadow2); } .night_theme .btn:focus, .night_theme .tab:focus, .night_theme .searchBar input:focus{ box-shadow: 0 0 0 4px rgba(255,178,74,.14), var(--shadow2); } /* ---------- LIST GRID / CARDS ---------- */ .gridCards{ margin-top:14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 980px){ .gridCards{grid-template-columns: repeat(2,1fr)} } @media (max-width: 640px){ .gridCards{grid-template-columns: 1fr} } .card{ display:block; padding: 16px; border-radius: var(--r1); text-decoration:none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; } .card:hover{transform: translateY(-2px); box-shadow: var(--shadow)} .cardTop{display:flex; gap:12px; align-items:center} .cardIcon{ width:48px; height:48px; border-radius: 16px; overflow:hidden; border:1px solid var(--line); background: rgba(0,0,0,.03); flex:0 0 auto; } .night_theme .cardIcon{background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.12)} .cardIcon img{width:100%;height:100%;object-fit:cover} .iconStub{width:100%;height:100%;display:grid;place-items:center;opacity:.7} .cardHead{min-width:0} .cardTitleRow{display:flex; align-items:center; justify-content:space-between; gap:10px} .cardTitle{font-weight: 700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .cardMeta{ margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color: var(--muted); font-size:12px } .dot{width:4px;height:4px;border-radius:999px;background: rgba(0,0,0,.16)} .night_theme .dot{background: rgba(255,255,255,.18)} .muted{color: var(--muted)} .cardDesc{ margin-top:12px; color: var(--muted); font-size:13px; line-height:1.35; height: 52px; } .cardBottom{margin-top:14px;display:flex;gap: 11px;flex-wrap:wrap;} /* ===== Mods: pagination + game filter (glass friendly) ===== */ /* wrapper */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); } /* center label */ .pagerInfo { flex: 0 0 auto; padding: 8px 12px; border-radius: 14px; font-weight: 700; letter-spacing: .2px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* disabled look (works on ) */ .btn.disabled { opacity: .45; pointer-events: none; filter: saturate(.85); } /* optional: make pager buttons a bit tighter on mobile */ @media (max-width: 520px) { .pager { gap: 8px; } .pagerInfo { padding: 7px 10px; border-radius: 12px; } } /* FIX caret ломается на hover: причина — на hover менялся background (shorthand), и браузер сбрасывал background-image. решение — НЕ трогать background шорткатом, менять только background-color и всегда держать background-image/position/size/repeat отдельными свойствами. */ /* ========================= Custom Select (Glass) + night_theme support ========================= */ .gameFilter { position: relative; margin: 10px 0 10px; } /* hide native select but keep it in DOM for form submit */ .gameFilter select { position: absolute; inset: 0; opacity: 0; pointer-events: none; } /* root */ .cs { position: relative; width: 100%; } /* button */ .cs__btn { width: 100%; padding: 12px 44px 12px 14px; border-radius: 16px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.72); color: rgba(15,15,15,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .cs__btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.82); border-color: rgba(252,181,3,.40); } .cs__btn:focus-visible { outline: none; border-color: rgba(252,181,3,.65); box-shadow: 0 0 0 3px rgba(252,181,3,.18), 0 10px 26px rgba(0,0,0,.10); } /* label */ .cs__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } /* caret */ .cs__caret { width: 10px; height: 10px; flex: 0 0 auto; transform: rotate( 45deg); margin-right: -29px; border-right: 2px solid rgba(0,0,0,.55); border-bottom: 2px solid rgba(0,0,0,.55); transition: transform .18s ease; } .cs.is-open .cs__caret { transform: rotate(225deg); } /* dropdown panel */ .cs__menu { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 40; border-radius: 18px; padding: 8px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.80); box-shadow: 0 18px 40px rgba(0,0,0,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: none; } .cs.is-open .cs__menu { display: block; } /* menu list */ .cs__list { max-height: 260px; overflow: auto; overscroll-behavior: contain; padding: 2px; } /* option row */ .cs__opt { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 5px; color: rgba(15,15,15,.92); cursor: pointer; transition: background-color .14s ease, transform .14s ease; } .cs__opt:hover { background: rgba(252,181,3,.14); transform: translateY(-1px); } .cs__opt.is-active { background: rgba(252,181,3,.22); border: 1px solid rgba(252,181,3,.28); } .cs__check { opacity: 0; transform: translateY(1px); transition: opacity .14s ease; font-weight: 800; } .cs__opt.is-active .cs__check { opacity: 1; } /* scrollbar */ .cs__list::-webkit-scrollbar { width: 10px; } .cs__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; border: 2px solid rgba(255,255,255,.55); } .cs__list::-webkit-scrollbar-track { background: transparent; } /* ========================= NIGHT THEME overrides ========================= */ .night_theme .cs__btn { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); } .night_theme .cs__btn:hover { background: rgba(255,255,255,.075); border-color: rgba(252,181,3,.28); } .night_theme .cs__btn:focus-visible { border-color: rgba(252,181,3,.42); box-shadow: 0 0 0 3px rgba(252,181,3,.14); } .night_theme .cs__caret { border-right-color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.78); } .night_theme .cs__menu { border: 1px solid rgba(255,255,255,.12); background: rgb(18 18 18 / 83%); box-shadow: 0 18px 50px rgba(0,0,0,.50); } .night_theme .cs__opt { color: rgba(255,255,255,.92); } .night_theme .cs__opt:hover { background: rgb(252 128 3 / 14%); } .night_theme .cs__opt.is-active { background: rgba(252,181,3,.18); border: 1px solid rgba(252,181,3,.22); } .night_theme .cs__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border: 2px solid rgba(18,18,18,.55); } /* mobile */ @media (max-width: 520px) { .cs__btn { padding: 11px 44px 11px 12px; border-radius: 14px; } .cs__menu { border-radius: 16px; } } .heroPills {padding: 4px 1px 9px;gap: 10px;display: flex;flex-direction: row;justify-items: start;}