/* 0) БАЗА + ПЕРЕМЕННЫЕ */ :root{ --bg:#0b1020; --bg2:#0e1530; --card: rgba(255,255,255,.06); --stroke: rgba(255,255,255,.14); --text:#eaf0ff; --muted: rgba(234,240,255,.68); --brand: var(--c-acc-1); --brand2: var(--c-acc-2); --good: var(--c-acc-3); --shadow: 0 18px 60px rgba(0,0,0,.45); --r: 22px; --r2: 16px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; } *{ box-sizing:border-box; } /* ── PERF KILL-SWITCH ────────────────────────────────────────────────────── Глобальное отключение тяжёлых эффектов когда . Этот класс ставится JS-ом в base.html для Safari / macOS, мобилок, prefers-reduced-motion, и устройств с >2 cores. Убирает backdrop-filter, filter:blur и тяжёлые animation:infinite — это даёт +30–60 FPS и устраняет ощущение «страница лагает». */ html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.perf-lite .panel::before { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Важно: фон и анти-белые зоны при "перетягивании" */ html, body{ height:100%; margin:0; background:#070b17; /* fallback, чтобы не вылезал белый фон */ overscroll-behavior:none; /* убирает bounce в Chromium/Firefox */ } body{ min-height:100vh; font-family: var(--sans); color: var(--text); background: radial-gradient(1200px 800px at 20% 10%, rgba(var(--c-acc-1-rgb),.35), transparent 55%), radial-gradient(1100px 900px at 85% 15%, rgba(var(--c-acc-2-rgb),.22), transparent 55%), radial-gradient(900px 700px at 60% 90%, rgba(var(--c-acc-3-rgb),.18), transparent 55%), linear-gradient(180deg, var(--bg), #070b17 65%); overflow-x:hidden; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; border:0; background:transparent; cursor:pointer; } /* Обёртка страницы — держит высоту, чтобы снизу не появлялась "пустота" */ .page{ min-height: calc(100vh - 0px); padding-bottom: 24px; } /* Общий контейнер (совпадает с HTML: class="container") */ /* Сайт шире + меньше отступы от краёв */ .container{ width: min(1400px, calc(100vw - 32px)); /* по 16px с каждой стороны */ margin: 0 auto; } /* 1) СТЕКЛЯННАЯ ПАНЕЛЬ (class="panel") */ /* Убраны backdrop-filter:blur и ::before filter:blur — оба ОЧЕНЬ дорого стоят браузеру (особенно Safari/macOS), а на странице 5-10 .panel, и каждая запускает re-paint всего слоя при скролле/анимации. */ .panel{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border:1px solid var(--stroke); border-radius: var(--r); box-shadow: var(--shadow); position:relative; overflow:hidden; } .panel > *{ position:relative; } /* 2) ВЕРХНЯЯ ПОЛОСА (header.topbar) */ .topbar{ padding: 12px 0 8px; /* меньше воздуха */ } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; } /* Лого: