/* ==================== ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ ==================== Значения — из пакета передачи (kit/tokens.css). Имена наши: на них завязаны сотни правил, и переименование дало бы ровно тот же результат ценой полной переписи CSS. Имена прототипа объявлены рядом ССЫЛКАМИ на наши — тогда разметку прототипа можно переносить постранично без переименований, и один цвет остаётся определён в одном месте. Две темы: :root — светлая, :root[data-theme="dark"] — тёмная. Тёмная включается по умолчанию (скрипт в до стилей). ================================================================ */ :root{ /* поверхности */ --bg:#EAEEF6; --surface:#FFFFFF; --surface-2:#F3F6FB; --surface-3:#E7ECF5; --glass:rgba(255,255,255,.66); --glass-brd:rgba(14,22,44,.10); --glass-hi:rgba(255,255,255,.9); /* текст */ --ink:#0A1120; --ink-2:#39465F; --muted:#6B7791; --faint:#93A0B6; /* линии */ --border:rgba(14,22,44,.10); --border-2:rgba(14,22,44,.18); --grid:rgba(14,22,44,.05); /* акценты */ --accent:#0AB4CE; --accent-2:#0891A6; --accent-ink:#067487; --accent-soft:#DDF4F9; --violet:#6D4BFF; --violet-ink:#4A2EC8; /* семантика: рост/лонг, падение/шорт, внимание */ --up:#0FB56B; --up-soft:#E3F7ED; --down:#EE3D63; --down-soft:#FDE9EE; --amber:#E8890B; /* эффекты и градиент бренда */ --neon:none; --hero-a:#0AB4CE; --hero-b:#6D4BFF; --hero-c:#0FB56B; --chart-bg:#05070F; --chart-grid:#141D3A; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(12,20,32,.04), 0 10px 30px rgba(12,20,32,.06); --shadow-sm:0 1px 2px rgba(12,20,32,.05); /* типографика */ --disp:'Sora',system-ui,sans-serif; --sans:'Manrope',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* имена прототипа → наши */ --bg2:var(--surface); --solid:var(--surface); --solid2:var(--surface-2); --ink2:var(--ink-2); --line:var(--border); --cyan:var(--accent); --cyan-ink:var(--accent-ink); } :root[data-theme="dark"]{ --bg:#05070F; --surface:#0C1224; --surface-2:#0F1730; --surface-3:#141D3A; --glass:rgba(255,255,255,.045); --glass-brd:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.14); --ink:#EAF1FF; --ink-2:#B7C2DE; --muted:#7E8AAD; --faint:#5D688A; --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17); --grid:rgba(140,170,255,.06); --accent:#25E6FF; --accent-2:#25E6FF; --accent-ink:#8CF3FF; --accent-soft:#0B2E3D; --violet:#9A7BFF; --violet-ink:#C3B2FF; --up:#2BF5A6; --up-soft:#0B2E22; --down:#FF5878; --down-soft:#33131F; --amber:#FFB43C; --neon:0 0 22px rgba(37,230,255,.3); --hero-a:#25E6FF; --hero-b:#9A7BFF; --hero-c:#2BF5A6; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -12px rgba(0,0,0,.6); --shadow-sm:0 1px 2px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink); font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45} a{color:var(--accent-2);text-decoration:none} a:hover{color:var(--accent-ink)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .disp{font-family:var(--disp);letter-spacing:-.01em} .up{color:var(--up)} .down{color:var(--down)} .ticker{display:flex;align-items:center;gap:0;height:38px;background:var(--bg);color:var(--ink-2); padding:0 22px;font-size:12.5px;overflow-x:auto;scrollbar-width:none} .ticker::-webkit-scrollbar{display:none} .tk{display:flex;align-items:center;gap:7px;padding:0 18px;border-right:1px solid var(--border);white-space:nowrap} .tk:first-child{padding-left:0} .tk .lb{color:var(--muted)} .tk .vl{color:var(--ink);font-weight:500} .tk-dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up)} .tk-live{margin-left:auto;border-right:none;color:var(--hero-c)} .app{display:grid;grid-template-columns:250px 1fr;min-height:100vh} /* ⚠️ В макете у бокового меню фона нет вовсе, только линия справа: белым оно вместе с шапкой давало белый угол во весь экран. */ .sidebar{border-right:1px solid var(--border);padding:20px 16px} .brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;color:var(--ink)} .brand:hover{color:var(--ink)} .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));box-shadow:var(--neon); display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(6,182,199,.35)} .brand .wm{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:0;white-space:nowrap} /* ⚠️ Sora шире прежнего шрифта — без nowrap название переносится */ .brand .wm span{color:var(--accent-2)} .brand .ver{font-size:10px;font-weight:600;letter-spacing:.08em;line-height:1;margin-top:3px;color:var(--ink);opacity:.42;white-space:nowrap} .brand .pro{font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--accent-2); background:var(--accent-soft);padding:2px 6px;border-radius:5px;margin-left:2px} .nav-lb{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:16px 10px 8px} .nav-i{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--ink-2);font-weight:500;cursor:pointer;position:relative} .nav-i:hover{color:var(--ink)} .nav-i svg{width:18px;height:18px;flex:none;stroke:var(--muted)} .nav-i:hover{background:var(--surface-2);color:var(--ink)} .nav-i.on{background:var(--accent-soft);color:var(--accent-ink)} .nav-i.on svg{stroke:var(--accent-2)} .nav-i.on::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .nav-i .bd{margin-left:auto;font-size:10px;font-weight:700;color:#04252A;background:var(--accent);padding:1px 6px;border-radius:20px} .nav-i .bd.live{background:var(--up)} .nav-my>summary{list-style:none;cursor:pointer;display:flex;align-items:center;user-select:none} .nav-my>summary::-webkit-details-marker{display:none} .nav-my>summary::after{content:"";margin-left:auto;margin-right:6px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)} .nav-my[open]>summary::after{transform:rotate(-135deg)} .ab-term,.ab-prem{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap} .ab-term{border:1px solid var(--border);color:var(--ink)} .ab-term:hover{border-color:var(--accent);color:var(--accent-ink)} .ab-prem{color:#B54708;background:#FEF0C7} .ab-prem:hover{background:#FEDF89} @media(max-width:1180px){.ab-prem{display:none}.ab-term{display:none}} /* ⚠️ Средние ширины: поиск обязан сжиматься, иначе шапка выталкивает страницу вбок. */ .searchwrap,.searchwrap form{min-width:0} #q-input{min-width:0;width:0} @media(min-width:821px) and (max-width:1180px){header.appbar{padding-left:18px;padding-right:18px}} /* «Регистрация» — вкладка в окне входа, на узкой шапке хватает одной кнопки «Войти» */ @media(min-width:821px) and (max-width:1040px){#ab-auth .btn-accent{display:none}} .side-card{margin-top:22px;padding:14px;border-radius:12px;background:linear-gradient(150deg,#0A0E1C,#141D3A);color:#D7E0EB} .side-card .t{font-family:var(--disp);font-weight:600;font-size:13px;color:#fff;margin-bottom:5px} .side-card .d{font-size:11.5px;color:#93A2B4;line-height:1.5} .side-card .b{margin-top:11px;display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:8px; background:var(--accent);color:#04252A;font-weight:600;font-size:12.5px} .side-card .b svg{width:15px;height:15px;stroke:#04252A} .main{padding:0;min-width:0} /* Шапка сидит на фоне страницы с размытием — как .topbar в макете. ⚠️ Была залита белым (var(--surface)), и в светлой теме читалась как белая полоса поперёк экрана: в макете белые только карточки. */ .appbar{display:flex;align-items:center;gap:16px;padding:16px 30px; border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} :root:not([data-theme="dark"]) .ticker, :root:not([data-theme="dark"]) .tkbar{border-bottom:1px solid var(--border)} .search{display:flex;align-items:center;gap:9px;flex:1;max-width:420px;height:40px;padding:0 14px;background:var(--surface-2); border:1px solid var(--border);border-radius:11px;color:var(--muted)} .search svg{width:17px;height:17px;stroke:var(--muted)} .search .kbd{margin-left:auto;font-size:11px;color:var(--faint);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;background:var(--surface)} .ab-r{display:flex;align-items:center;gap:10px;margin-left:auto} .pill{display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:12.5px;font-weight:500;color:var(--ink)} .pill svg{width:16px;height:16px} .pill .g{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 7px var(--up)} .btn-accent{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;background:var(--accent);color:#04252A;font-weight:600;font-size:13px} .btn-accent:hover{color:#04252A} .btn-accent svg{width:16px;height:16px;stroke:#04252A} .av{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--hero-b),var(--hero-a));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600} .ab-login{display:flex;align-items:center;height:40px;padding:0 15px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px} .ab-login:hover{border-color:var(--accent);color:var(--accent)} @media(max-width:820px){.ab-login{display:none}} .peace-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;text-decoration:none;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;border:1px solid #EFD0DA;background:linear-gradient(90deg,#F2FBFC,#FFF2F5);transition:border-color .2s,box-shadow .2s,transform .2s} .peace-pill:hover{border-color:#F2456B;color:var(--ink);box-shadow:0 4px 14px rgba(242,69,107,.18);transform:translateY(-1px)} .peace-pill .emb{width:21px;height:20px;flex:none;transform-origin:center;will-change:transform} .peace-pill:hover .emb{animation:peaceBeat 1.1s ease-in-out infinite} @keyframes peaceBeat{0%,100%{transform:scale(1)}25%{transform:scale(1.16)}40%{transform:scale(1.02)}60%{transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){.peace-pill:hover .emb{animation:none}} @media(max-width:900px){.peace-pill span.pw{display:none}.peace-pill{padding:0 11px}} .ac-h{padding:7px 14px 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--border)} .ac-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md,0 8px 24px rgba(12,20,32,.12));z-index:60;overflow:hidden;max-height:340px;overflow-y:auto} .ac-i{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--ink);border-bottom:1px solid var(--border);text-decoration:none} .ac-i:last-child{border:none} .ac-i:hover{background:var(--surface-2)} .ac-i img{width:22px;height:22px;border-radius:50%;flex:none} .ac-n{font-weight:600;font-size:13px} .ac-s{margin-left:auto;color:var(--muted);font-size:11.5px;font-weight:600} .av:hover{color:#fff} .content{padding:26px 30px 40px} .phead{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px} .phead h1{font-family:var(--disp);font-weight:600;font-size:26px;margin:0;letter-spacing:-.02em} .phead .sub{color:var(--muted);font-size:13px;margin-top:3px} .seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;margin-left:auto} .seg span{padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer} .seg span.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)} .ghost{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-weight:500;font-size:12.5px;color:var(--ink-2);cursor:pointer} .ghost svg{width:16px;height:16px;stroke:var(--ink-2)} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)} .card-h .ct{font-family:var(--disp);font-weight:600;font-size:14.5px;margin:0;line-height:inherit} .card-h .more{margin-left:auto;color:var(--muted);font-size:12px;font-weight:500;display:flex;align-items:center;gap:5px} .card-h .more svg{width:14px;height:14px;stroke:var(--muted)} .chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px} .chip.live{color:var(--up);background:var(--up-soft);display:inline-flex;align-items:center;gap:5px} .chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 6px var(--up)} .chip.soft{color:var(--accent-ink);background:var(--accent-soft)} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px} .metric{padding:18px} .metric .mt{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:500;margin-bottom:12px} .metric .mt svg{width:15px;height:15px;stroke:var(--muted)} .badge-up{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--up);background:var(--up-soft);padding:2px 7px;border-radius:6px} .badge-dn{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--down);background:var(--down-soft);padding:2px 7px;border-radius:6px} .cols{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:18px} /* ⚠️ minmax(0,1fr) и min-width:0 — на всех ширинах: колонка 1fr не сжимается уже своего содержимого и выталкивает правую за край (главная на 830–1280 px). */ .cols>*{min-width:0} /* ⚠️ Средние ширины: встроенные сетки с правой колонкой 340–380 px — в один столбец, как на телефоне. Рядом с сайдбаром ей не хватало места, и страница уезжала вбок. */ @media(min-width:821px) and (max-width:1200px){ .content [style*="1fr 3"]{grid-template-columns:minmax(0,1fr) !important} .content [style*="grid-template-columns"]>*{min-width:0} } table{width:100%;border-collapse:collapse} thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);padding:12px 16px;border-bottom:1px solid var(--border)} thead th:first-child,thead th.l{text-align:left} tbody td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:right;font-size:13.5px} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--surface-2)} tbody tr.clk{cursor:pointer;position:relative} /* Навигация строкой таблицы — ССЫЛКОЙ, а не onclick: поисковик не ходит по обработчикам, а пользователь теряет Ctrl+клик, среднюю кнопку и «копировать адрес». ⚠️ ССЫЛКА ОДНА, А НЕ ДВЕ. Раньше рядом с видимой ссылкой на названии лежал невидимый дубль-оверлей на всю строку — ровно тот же адрес, ещё семьдесят восемь символов в каждой из сотни строк, восемь килобайт на страницу на пустом месте. Теперь на всю строку растягивается псевдоэлемент самой видимой ссылки: поведение то же, разметки вдвое меньше, и скринридер читает один раз, а не два. */ a.nm-link{color:inherit;text-decoration:none;position:relative;z-index:2} tbody tr.clk a.nm-link::after{content:"";position:absolute;inset:0;z-index:1} tbody tr.clk td{position:relative} tbody tr.clk td.l{position:static} /* Звезда быстрого добавления монеты в мониторинг прямо из списка. ⚠️ z-index:2 — чтобы лежать НАД растянутой ссылкой строки (её ::after — z-index:1), иначе клик по звезде уводил бы на страницу монеты. Рисуем svg (не символ ☆): вид и размер не зависят от системного шрифта. fill:none обязателен — без него path у _STAR_SVG заливается чёрным по умолчанию. */ .wl-star:not(.pill){position:relative;z-index:2;border:none;background:none;cursor:pointer; color:var(--faint);line-height:0;padding:3px 4px;border-radius:6px;display:inline-flex;flex:none; transition:background .12s,color .12s,transform .12s} .wl-star:not(.pill) svg{width:17px;height:17px;overflow:visible} /* ⚠️ Целимся в PATH, а не в svg: AU.setStar вешает на path презентационные атрибуты fill/stroke, и они перебивали наследование со svg — ховер не менял цвет, а вкл/выкл не красились. Правило на path перебивает презентационный атрибут (у того специфичность 0), поэтому цвет ведёт CSS. */ .wl-star:not(.pill) svg path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round; transition:fill .12s,stroke .12s} .wl-star:not(.pill):hover{background:var(--surface-2);color:#F79009;transform:scale(1.22)} .wl-star:not(.pill):active{transform:scale(.85)} .wl-star:not(.pill).on{color:#F79009} .wl-star:not(.pill).on svg path{fill:#F79009;stroke:#F79009} /* ⚠️ Только телефон: пальцем в строку в 18 точек не попасть. Отступ внутрь ссылки, а не высота строки — иначе раздвинулся бы сам текст. */ @media(max-width:820px){a.nm-link,main.content a.more{display:inline-block; padding-top:6px;padding-bottom:6px}} a.nm-link:hover{text-decoration:underline} td.l{text-align:left} .coin{display:flex;align-items:center;gap:11px} .coin .ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;overflow:hidden;flex:none} .coin .ic img{width:100%;height:100%;object-fit:cover} .coin .nm{font-weight:600} .coin .tk{color:var(--muted);font-size:11.5px;font-weight:500} .rk{color:var(--faint);font-size:12px;width:16px;display:inline-block} .pos{color:var(--up);font-weight:600} .neg{color:var(--down);font-weight:600} .hm-tile-img{width:100%;height:120px;object-fit:cover;object-position:100% 50%;border-radius:8px;display:block; background:linear-gradient(100deg,#191338,#241a52,#191338);background-size:300% 100%;animation:hmshim 1.5s ease-in-out infinite} @keyframes hmshim{0%{background-position:100% 0}100%{background-position:0 0}} .list{padding:6px 0} .li{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)} .li:last-child{border:none} .li .th{width:38px;height:38px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center} .li .tt{font-weight:500;font-size:13px;line-height:1.4;color:var(--ink)} .li .mt{color:var(--faint);font-size:11.5px;margin-top:4px;display:flex;gap:8px;align-items:center} .src{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:5px;background:var(--surface-3);color:var(--ink-2)} .wall{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)} .wall:last-child{border:none} .wall .side{width:44px;height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none} .wall .side.sell{background:var(--down-soft);color:var(--down)} .wall .side.buy{background:var(--up-soft);color:var(--up)} .wall .side .u{font-size:8.5px;font-weight:600;letter-spacing:.05em} @media(max-width:1200px){.grid4{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:minmax(0,1fr)}} /* ---- мобильная навигация (макет: .mburger, шторка .side, .mobtab) ---- ⚠️ Раньше боковое меню на телефоне просто пряталось, и навигации не было вовсе. Теперь оно выезжает шторкой, а внизу стоит панель быстрых переходов. */ .mburger{display:none;width:38px;height:38px;border-radius:10px; border:1px solid var(--glass-brd);background:var(--glass);place-items:center; cursor:pointer;color:var(--ink);flex:none} .mburger svg{width:20px;height:20px;stroke:currentColor;fill:none} .navscrim{position:fixed;inset:0;z-index:290;background:rgba(3,5,12,.6); backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s} .navscrim.open{opacity:1;visibility:visible} .mobtab{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60; padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:var(--glass); border-top:1px solid var(--glass-brd);backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%)} .mobtab a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; font-size:9.5px;font-weight:600;color:var(--muted);cursor:pointer;min-height:44px; justify-content:center;text-decoration:none;text-align:center} .mobtab a svg{width:21px;height:21px;stroke:var(--muted);fill:none} .mobtab a.on{color:var(--accent-ink)} .mobtab a.on svg{stroke:var(--accent-2)} @media(max-width:820px){.app{grid-template-columns:1fr}.grid4{grid-template-columns:1fr} /* ⚠️ .app .sidebar, а не .sidebar: правило «фона нет» для рабочего стола идёт ниже по файлу, и с равным весом шторка выезжала прозрачной. */ .app .sidebar{display:block;position:fixed;left:0;top:0;height:100dvh;width:280px; max-width:84vw;z-index:300;background:var(--surface);border-right:1px solid var(--border); transform:translateX(-101%);transition:transform .28s cubic-bezier(.4,0,.2,1); box-shadow:0 0 60px rgba(0,0,0,.5);overflow:auto; padding:16px 12px calc(24px + env(safe-area-inset-bottom))} .app .sidebar.open{transform:none} .mburger{display:grid}.mobtab{display:flex} /* ⚠️ Без отступа последняя строка страницы уходит под нижнюю панель. */ body{padding-bottom:74px} .appbar{padding:12px 14px;gap:10px}.content{padding:18px 16px 32px}} @media(prefers-reduced-motion:reduce){.sidebar{transition:none}.navscrim{transition:none}} /* ==================== КОМПОНЕНТЫ ПО ПРОТОТИПУ ==================== Классы у нас и в пакете совпадают, поэтому переносим правила, а не разметку. */ /* Фон: два размытых пятна цвета бренда. Без них полупрозрачные карточки выглядят просто светлее фона, и «стекло» не читается. */ .bgwrap{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden;pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30} .blob.a{width:44vw;height:44vw;left:-14vw;top:-16vw;background:radial-gradient(circle,var(--hero-a),transparent 65%)} .blob.b{width:38vw;height:38vw;right:-12vw;top:26vw;background:radial-gradient(circle,var(--hero-b),transparent 65%)} @media(max-width:900px){.blob{opacity:.22}} .card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:none} /* Карточки-ссылки в сетках отзываются на наведение: в макете отзывается всё, на что можно нажать, а у нас они стояли мёртво. */ .grid>.card{transition:border-color .16s,transform .16s,box-shadow .16s} /* База знаний — как в макете: полоса фильтров, сетка в три колонки и карточка с цветной полосой сверху, чипом категории и временем чтения. */ .kb-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px} .kb-f{border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink-2); font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:20px;cursor:pointer} .kb-f:hover{color:var(--ink);border-color:var(--border-2)} .kb-f.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)} .kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px} @media(max-width:900px){.kb-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.kb-grid{grid-template-columns:1fr}} .kb-card{display:block;padding:0;overflow:hidden;text-decoration:none;color:inherit; transition:border-color .16s,transform .16s,box-shadow .16s} .kb-card:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow)} .kb-bar{display:block;height:6px} .kb-in{display:block;padding:16px} .kb-chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px; background:var(--surface-2);color:var(--muted)} .kb-t{display:block;font-family:var(--disp);font-size:16px;font-weight:700;color:var(--ink); margin:11px 0 6px;line-height:1.3} .kb-d{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-bottom:12px} .kb-m{display:block;font-size:11.5px;color:var(--muted)} @media(prefers-reduced-motion:reduce){.kb-card{transition:none}.kb-card:hover{transform:none}} .grid>.card:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow)} @media(prefers-reduced-motion:reduce){.grid>.card{transition:none} .grid>.card:hover{transform:none}} .card-h{padding:14px 16px;gap:9px;border-bottom:1px solid var(--border)} .card-h .ct{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:-.01em} .metric{padding:16px} .metric .mt{gap:7px;font-size:12px;font-weight:600;margin-bottom:9px} .metric .mt svg{width:14px;height:14px} .metric .v{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,27px);line-height:1.05; font-variant-numeric:tabular-nums} .metric .d{font-size:12px;font-weight:700;margin-top:6px} /* Значок «в реальном времени»: точка пульсирует, всё остальное статично. */ .live{margin-left:auto;font-size:10px;font-weight:800;color:var(--up);display:inline-flex;align-items:center;gap:5px; letter-spacing:.06em;text-transform:uppercase} .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up); animation:lvp 1.8s ease-in-out infinite} @keyframes lvp{0%,100%{opacity:1}50%{opacity:.35}} @media(prefers-reduced-motion:reduce){.live::before{animation:none}} thead th{font-size:10.5px;font-weight:700;padding:11px 16px} tbody td{padding:11px 16px} /* Таблица с прокруткой: первый столбец прилипает. На телефоне иначе не видно, к какой монете относится число, — на это прямо указывает пакет передачи. */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tscroll table{min-width:100%} .tscroll th,.tscroll td{white-space:nowrap} .tscroll th:first-child,.tscroll td:first-child, .tw th:first-child,.tw td:first-child{position:sticky;left:0;background:var(--surface);z-index:1} .tscroll td:first-child,.tw td:first-child{box-shadow:1px 0 0 var(--border)} .tw{border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-brd);box-shadow:none} @media(min-width:900px){.tw th:first-child,.tw td:first-child{position:static;box-shadow:none;background:transparent}} .seg{background:var(--glass);border:1px solid var(--glass-brd)} .seg span.on,.seg a.on,.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)} .filters .f,.chips .f{background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink-2)} .pill{background:var(--glass);border:1px solid var(--glass-brd)} .addr{font-family:var(--mono);font-size:12px;background:var(--glass-hi);border:1px solid var(--glass-brd); padding:3px 9px;border-radius:7px} /* Оболочка: боковое меню и шапка полупрозрачны, чтобы фоновые пятна были видны и под ними — так задумано в пакете. Шапка размывает то, что под ней. */ .sidebar{background:transparent;border-right:1px solid var(--border)} .topbar{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px)} @supports not (background:color-mix(in srgb,red 50%,transparent)){.topbar{background:var(--bg)}} .content{max-width:1320px} /* Заголовок страницы, меню, поиск и кнопки — по прототипу. */ .phead h1{font-weight:800;font-size:clamp(22px,2.6vw,30px);text-wrap:balance} .nav-i{font-weight:600;font-size:13.5px;color:var(--ink-2)} .nav-i.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-ink)} @supports not (background:color-mix(in srgb,red 50%,transparent)){.nav-i.on{background:var(--accent-soft)}} .search{background:var(--glass);border:1px solid var(--glass-brd);border-radius:11px;height:38px} .search .kbd{background:var(--glass-hi);border:1px solid var(--glass-brd)} /* Главная кнопка — градиент бренда с неоновым свечением: это подпись дизайна. */ .btn-accent{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#04121F; box-shadow:var(--neon);border:none;font-weight:700} .btn-accent:hover{color:#04121F;filter:brightness(1.06)} .btn-accent svg{stroke:#04121F} /* ==================== ТЕЛЕФОН ==================== ⚠️ ГЛАВНАЯ ПРИЧИНА «КРИВОЙ МОБИЛКИ»: правая часть шапки .ab-r (язык, валюта, тема, вход, регистрация) не помещалась в 375px и вылезала за экран (313→640). Документ становился шире окна, и мобильный браузер РАЗДВИГАЛ layout viewport до 640–750px: весь сайт рисовался в масштабе ~0.55, мелким, а часть шапки вообще не была видна. Дальше всё «плыло» уже от этого. Правило: ширина документа == ширина окна. Проверка в консоли на любой странице: document.documentElement.scrollWidth === window.innerWidth. */ @media(max-width:820px){ html,body{overflow-x:hidden;max-width:100%} .app{grid-template-columns:minmax(0,1fr)} .main{overflow-x:clip} /* ⚠️ Без overflow:hidden: с ним выпадающий список поиска (#ac-drop) обрезался и «уходил под сайт». От вылезания за экран защищают min-width:0 и .main{overflow-x:clip}. */ .appbar{padding:10px 12px;gap:8px;flex-wrap:nowrap} .appbar>*{min-width:0} .searchwrap{flex:1 1 auto !important;min-width:0;max-width:none !important} .search{max-width:none;padding:0 10px;gap:7px} .search .kbd{display:none} .ab-r{margin-left:0;gap:6px;flex:none} /* Язык, валюта, тема и избранное переезжают в боковое меню (скрипт в _mobnav_html): в шапке остаются бургер, поиск, колокольчик и вход/аватар. */ .appbar #ab-lang,.appbar #ab-cur,.appbar #ab-theme,.appbar #ab-watch{display:none !important} .ab-login{display:inline-flex;height:40px;padding:0 13px;white-space:nowrap} .ab-auth .btn-accent{display:none} .ticker{padding:0 12px;font-size:12px} .tk{padding:0 12px} /* Меню-шторка: заголовок с крестиком, внизу настройки и вход */ .mhead{display:flex;align-items:center;gap:8px} .mhead .brand{flex:1;padding-bottom:10px} .mclose{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border); background:var(--surface-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;flex:none;margin-top:-6px} .mset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 4px 10px} .mset .cur-drop{left:0;right:auto} .mauth{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 4px 12px;border-bottom:1px solid var(--border);margin-bottom:6px} .mauth a,.mauth button{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:11px;font:inherit; font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink);text-decoration:none;padding:0 10px} .mauth .btn-accent{border:none} .mauth .full{grid-column:1/-1} /* Сетки с боковой колонкой (1fr 340/356/360/380px) и плитки — в один столбец. minmax(0,1fr), а не 1fr: у 1fr минимум auto, и широкая таблица растягивала колонку. */ .cols,.grid4,.hm-tiles,.kb-grid,.tm-feat,.content [style*="1fr 3"],.content [style*="repeat(3,1fr)"]{grid-template-columns:minmax(0,1fr) !important} .cols>*,.grid4>*,.content [style*="grid-template-columns"]>*{min-width:0} .content{padding:16px 16px 32px} .card{max-width:100%} .card-h{flex-wrap:wrap;row-gap:8px} .phead{flex-wrap:wrap;gap:10px} .phead .seg,.phead .pill,.phead .datenav{margin-left:0;max-width:100%} /* Ряды вкладок и чипов-фильтров (новости, разделы Hyperliquid, календарь): ВСЕ видны сразу, компактными рядами. ⚠️ Прокрутка вбок отменена: «даже опытному человеку тяжело понять, что листать нужно вбок, обычный пользователь вообще не поймёт». Ряд с 9 разделами занимает 2–3 строки мелких чипов — зато без скрытых пунктов. С префиксом .content и !important: стили страниц грузятся ПОСЛЕ site.css. */ .content .tabs,.content .filters,.content .dx-tabs,.content .chtf,.content .impbar,.content .tfs,.content .chips{ display:flex;flex-wrap:wrap !important;gap:6px;max-width:100%;overflow:visible} .content .seg{flex-wrap:wrap !important;max-width:100%} .content .filters .f,.content .dx-tabs>*,.content .tfs>*,.content .chips>*,.content .impf{padding:6px 11px;font-size:12px;min-height:34px; display:inline-flex;align-items:center;white-space:nowrap} .content .tabs{gap:2px} .content .tabs .tt{padding:9px 10px;font-size:12.5px;white-space:nowrap} .content .chtf button{padding:6px 10px;font-size:12px} .phead .impbar{margin-left:0} /* Таблицы во встроенных обёртках
(монеты, главная): липкий первый столбец и без переносов в ячейках — иначе «$75 687» ломается на две строки. */ .content [style*="overflow-x:auto"]>table{width:max-content;min-width:100%} .content [style*="overflow-x:auto"]>table th,.content [style*="overflow-x:auto"]>table td{white-space:nowrap} .content [style*="overflow-x:auto"]>table th:first-child,.content [style*="overflow-x:auto"]>table td:first-child{ position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--border)} .content td.mono,.content th.mono{white-space:nowrap} /* Календарь: шесть колонок в 375px не влезали — событие сжималось до 7px и переносилось в четыре строки. Числа — по содержимому, событию — всё остальное. */ .content .row{grid-template-columns:46px 20px minmax(0,1fr) auto auto auto;gap:6px;padding:10px 12px;font-size:12px} .content .row .num{white-space:nowrap} .content .rowh{font-size:9.5px;padding:8px 12px} /* Новости: карточка ленты — обложка сверху на всю ширину, а не узкая колонка слева. ⚠️ Только карточки С ОБЛОЖКОЙ (.thumb): правило на все .li разваливало «Ближайшие разблокировки» и ленту новостей на главной. */ .content .li:has(>.thumb){flex-direction:column;gap:10px} .content .li>.thumb{width:100% !important;height:150px !important} /* График страха и жадности — SVG сжимался вместе с подписями до нечитаемых 4px. Держим ему ширину и даём прокрутку; подсказка про колесо мыши на телефоне не нужна. */ .content .fg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .content .fg-wrap svg{min-width:700px;height:auto} .content .fg-hint{display:none} /* Фонды: чипы тикеров и звёздочки были 24–28px — пальцем не попасть */ .content .inv-card .cn{padding:8px 10px;font-size:12px;min-height:34px;display:inline-flex;align-items:center} .content .inv-star{width:40px;height:40px;top:6px;right:6px} /* Портфель без входа: кнопки во всю ширину карточки */ .content #gate{padding:22px 18px} .content #gate .btn-accent,.content #gate .ab-login{width:100%;justify-content:center;height:48px} /* Широкая таблица: обёртку .tscroll ставит скрипт (см. _mobnav_html), тут — прокрутка и подсказка справа */ .tscroll{position:relative;max-width:100%} .tscroll table{width:max-content;min-width:100%} .tscroll td.mono,.tscroll .mono{white-space:nowrap} .tw[style*="max-height"]{max-height:none !important} /* Карточки-метрики: две в ряд, «сирота» — на всю ширину */ .dx-stats{grid-template-columns:1fr 1fr} .dx-stats>:last-child:nth-child(odd){grid-column:1/-1} .wl-star:not(.pill){padding:8px 9px} /* ⚠️ .au-modal впереди для веса: стили входа (_AUTH_CSS) лежат в site.css ПОСЛЕ этого блока. 16px — иначе iOS Safari при фокусе на поле сам увеличивает страницу. */ .au-modal .au-body input{font-size:16px} /* Кнопки входа через Google/X/Telegram одной ширины: