/* =====================================================================
MakeItFree — личный кабинет (lk.makeitfree.online)
Общий каркас для всех страниц ЛК: index (вход), result (кабинет),
tickets, ticket, faq.
Палитра один-в-один с клиентами (windows Theme/Colors.xaml,
android ui/theme/Color.kt) и клиентским сайтом (client_site/styles.css):
ЛК должен читаться как тот же продукт, а не «похожий тёмный».
Страницы подключают этот файл ПЕРВЫМ и держат у себя только
странично-специфический CSS. Токены (--bg-*, --fg-*, --line-*, акценты)
объявлены только здесь — не дублировать в шаблонах.
===================================================================== */
/* ---------------------------------------------------------------------
ШРИФТЫ — СВОИ, а не с fonts.googleapis.com.
Каждый шаблон начинался с на fonts.googleapis.com, и это стоило
дороже, чем выглядит:
— сторонняя таблица стилей в БЛОКИРУЕТ первую отрисовку:
пока она не приехала, страница пустая;
— файлы шрифтов лежат на ВТОРОМ хосте (fonts.gstatic.com), и браузер
узнаёт про него, только прочитав первую таблицу, — то есть хосты
выстраиваются в цепочку, а не открываются параллельно;
— из России соединение с каждым новым хостом обходится в десятки
секунд (см. DEPLOY.md, раздел про загрузку из РФ), поэтому три
хоста вместо одного — это минуты, а не миллисекунды.
Теперь хост один — свой. `font-display: swap` означает, что текст виден
СРАЗУ системным шрифтом и подменяется, когда файл доедет: не приехавший
шрифт больше не способен задержать страницу.
Файлы переменные (один на все начертания) и урезаны: латиница — по
списку знаков, которые действительно встречаются в разметке, кириллица
как есть. Знак, не попавший в unicode-range, рисуется системным
шрифтом — это обычное поведение, а не поломка.
`?v=1` включает вечное кеширование (NoCacheStaticFiles в main.py).
Меняете файл — ДВИГАЙТЕ НОМЕР, иначе у вернувшегося человека навсегда
останется старый.
--------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/static/fonts/inter-cyrillic.woff2?v=1') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/static/fonts/inter-latin.woff2?v=1') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC,
U+20BD, U+2122, U+2190-2193, U+2212, U+221E, U+25CF,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/jetbrains-mono-cyrillic.woff2?v=1') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/static/fonts/jetbrains-mono-latin.woff2?v=1') format('woff2');
unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC,
U+20BD, U+2122, U+2190-2193, U+2212, U+221E, U+25CF,
U+FEFF, U+FFFD;
}
:root {
/* --- surfaces (BgDeep/BgBase/BgSurface/BgElevated из клиента) --- */
--bg-deep: #04060c;
--bg-base: #06080f;
--bg-surface: #0a0e1c;
--bg-elevated: #0f1428;
--bg-inset: #03050a;
--bg-card: rgba(255,255,255,0.022);
/* --- text (Fg1..Fg4) --- */
--fg-1: #ffffff;
--fg-2: rgba(255,255,255,0.78);
--fg-3: rgba(255,255,255,0.50);
--fg-4: rgba(255,255,255,0.32);
/* --- lines (Line1..Line3) --- */
--line-1: rgba(255,255,255,0.05);
--line-2: rgba(255,255,255,0.09);
--line-3: rgba(255,255,255,0.16);
/* --- accents --- */
--cyan-soft: #67e8f9;
--cyan: #22d3ee;
--cyan-deep: #06b6d4;
--accent-dim: rgba(34,211,238,0.12);
--accent-line: rgba(34,211,238,0.32);
--purple: #8b5cf6;
--green: #10b981;
--orange: #f97316;
--red: #ef4444;
/* --- radii (как на клиентском сайте) --- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 20px;
--shadow-card: 0 1px 0 0 var(--line-1) inset, 0 12px 40px -16px rgba(0,0,0,0.7);
--shadow-lift: 0 1px 0 0 var(--line-2) inset, 0 22px 60px -22px rgba(0,0,0,0.85);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--maxw: 1080px;
/* Полупрозрачная подложка «шапки»: сквозь неё видно аврору, но текст под
ней не просвечивает. Отдельный токен, потому что --bg-deep непрозрачен,
а альфу к hex в CSS не добавить без color-mix. */
--bg-scrim: rgba(4, 6, 12, 0.72);
}
/* Светлая тема — холодная нейтральная (slate), не «тёплая бумага».
Белые карточки на светло-сером фоне, тот же циановый акцент. */
:root[data-theme="light"] {
--bg-deep: #edf0f6;
--bg-base: #f4f6fa;
--bg-surface: #ffffff;
--bg-elevated: #f0f3f9;
--bg-inset: #e9edf4;
--bg-card: rgba(15,23,42,0.02);
--fg-1: #0f172a;
--fg-2: #3b475c;
--fg-3: #64748b;
--fg-4: #94a3b8;
--line-1: rgba(15,23,42,0.06);
--line-2: rgba(15,23,42,0.10);
--line-3: rgba(15,23,42,0.18);
--cyan-soft: #0891b2;
--cyan: #06b6d4;
--cyan-deep: #0e7490;
--accent-dim: rgba(6,182,212,0.09);
--accent-line: rgba(6,182,212,0.32);
--green: #059669;
--orange: #ea700b;
--red: #dc2626;
--shadow-card: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 8px 26px -14px rgba(15,23,42,0.14), 0 1px 2px rgba(15,23,42,0.04);
--shadow-lift: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 18px 44px -18px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.06);
--bg-scrim: rgba(244, 246, 250, 0.76);
}
/* ------------------------------ reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-deep);
color: var(--fg-1);
line-height: 1.55;
font-size: 15px;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Aurora-подсветка как в WPF-клиенте + едва заметная сетка сверху.
В светлой теме — тёплый мягкий вариант без сетки. */
/* Аврора не статичная заливка, а медленный дрейф — как три блоба на Loaded
Storyboard в WPF-клиенте. Анимируем ТОЛЬКО transform: слой уезжает на GPU
и градиенты не перерисовываются каждый кадр (перерисовка полноэкранных
радиальных градиентов на слабой машине — это выброшенные кадры).
inset отрицательный, а не 0: слой должен быть больше экрана, иначе на
краях сдвига проступала бы пустота.
will-change не ставим: бесконечная анимация transform и так уводит слой на
GPU, а постоянный хинт держал бы лишний полноэкранный буфер — в том числе
когда анимация выключена по prefers-reduced-motion. */
body::before {
content: "";
position: fixed; inset: -18%; z-index: -2;
background:
radial-gradient(1100px 620px at 78% -8%, rgba(34,211,238,0.10), transparent 60%),
radial-gradient(900px 540px at 8% 4%, rgba(14,116,144,0.10), transparent 58%),
radial-gradient(820px 520px at 40% 100%, rgba(103,232,249,0.05), transparent 62%),
var(--bg-deep);
animation: lk-aurora 46s var(--ease) infinite alternate;
}
@keyframes lk-aurora {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-1.8%, 1.4%, 0) scale(1.07); }
100% { transform: translate3d(1.5%, -1.1%, 0) scale(1.03); }
}
body::after {
content: "";
position: fixed; inset: 0; z-index: -1;
background-image:
linear-gradient(var(--line-1) 1px, transparent 1px),
linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(900px 600px at 50% -5%, #000 0%, transparent 70%);
mask-image: radial-gradient(900px 600px at 50% -5%, #000 0%, transparent 70%);
opacity: 0.5;
pointer-events: none;
}
:root[data-theme="light"] body::before {
background:
radial-gradient(1000px 560px at 80% -6%, rgba(6,182,212,0.08), transparent 60%),
radial-gradient(820px 500px at 6% 2%, rgba(14,116,144,0.05), transparent 58%),
linear-gradient(180deg, #f0f3f9 0%, var(--bg-deep) 340px),
var(--bg-deep);
}
:root[data-theme="light"] body::after { opacity: 0.4; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
/* --- Автозаполнение браузера ---
Chrome и Safari рисуют поверх поля СВОЙ фон (в тёмной теме — светлый
прямоугольник со своим цветом текста), и обычным background-color его не
перебить: правило сидит в UA-стилях с приоритетом выше авторских. Рабочий
способ ровно один — залить поле внутренней тенью и подменить цвет текста
через -webkit-text-fill-color (обычный color автозаполнение игнорирует).
Фон полей во всём кабинете — --bg-inset, поэтому правило общее: страница
входа, тикеты, админка. Тень пересчитывается вместе с темой, так как берёт
значение из переменной.
Два отдельных блока, а НЕ один список селекторов: :autofill (стандарт,
Firefox) и :-webkit-autofill не знают друг про друга, а неизвестный
селектор в списке отменяет правило целиком во всех браузерах. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--fg-1);
-webkit-box-shadow: 0 0 0 100px var(--bg-inset) inset;
box-shadow: 0 0 0 100px var(--bg-inset) inset;
caret-color: var(--fg-1);
/* Свой фон Chrome применяет переходом. Растянутый transition не даёт ему
проступить ни на первом кадре после подстановки, ни при смене темы. */
transition: background-color 100000s ease-in-out 0s;
}
input:autofill,
textarea:autofill,
select:autofill {
-webkit-text-fill-color: var(--fg-1);
box-shadow: 0 0 0 100px var(--bg-inset) inset;
caret-color: var(--fg-1);
transition: background-color 100000s ease-in-out 0s;
}
code, kbd, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
::selection { background: var(--accent-dim); color: var(--cyan-soft); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
/* Плавный кросс-фейд при смене темы (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
html { scroll-behavior: auto; }
}
/* ------------------------------ shell ------------------------------ */
.lk {
position: relative; z-index: 1;
width: 100%; max-width: var(--maxw);
margin: 0 auto;
padding: 20px 22px calc(48px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 22px;
}
/* ------------------------------ header ----------------------------- */
.lk-head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 6px 0 2px;
}
.lk-brand { display: inline-flex; align-items: center; gap: 11px; transition: filter .18s var(--ease); }
.lk-brand:hover { filter: drop-shadow(0 0 14px rgba(34,211,238,0.5)); }
.lk-brand svg { height: 28px; width: auto; }
.lk-brand .name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.lk-brand .dom { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fg-4); margin-top: 1px; }
.lk-head-right { display: flex; align-items: center; gap: 8px; }
.head-link {
display: inline-flex; align-items: center; gap: 8px;
height: 36px; padding: 0 13px; border-radius: var(--r-sm);
border: 1px solid var(--line-2); background: var(--bg-surface);
font-size: 13px; font-weight: 550; color: var(--fg-2);
transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.head-link:hover { border-color: var(--cyan); color: var(--cyan-soft); transform: translateY(-1px); }
.head-link svg { width: 14px; height: 14px; flex: none; }
.head-link.icon-only { width: 36px; padding: 0; justify-content: center; }
@media (max-width: 640px) { .head-link .lbl { display: none; } .head-link { width: 36px; padding: 0; justify-content: center; } }
/* ------------------------------ buttons ---------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
font-size: 14px; font-weight: 560; letter-spacing: -0.01em;
border: 1px solid transparent; white-space: nowrap; cursor: pointer;
transition: transform .18s var(--ease), background .18s var(--ease),
border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-primary {
background: linear-gradient(180deg, #5fe6f5, var(--cyan-deep));
color: #042b33; font-weight: 650;
box-shadow: 0 8px 24px -10px rgba(34,211,238,0.6), 0 0 0 1px rgba(34,211,238,0.25) inset;
}
.btn-primary:hover { box-shadow: 0 12px 30px -10px rgba(34,211,238,0.75); transform: translateY(-1px); }
.btn-ghost { background: var(--bg-elevated); color: var(--fg-1); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--line-3); transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--fg-2); border-color: var(--line-2); }
.btn-line:hover { color: var(--fg-1); border-color: var(--line-3); }
.btn-tg { background: #2AABEE; color: #fff; font-weight: 600; }
.btn-tg:hover { background: #1e9ad9; transform: translateY(-1px); }
.btn-warn {
background: linear-gradient(180deg, #fb923c, var(--orange));
color: #431407; font-weight: 650;
box-shadow: 0 8px 24px -10px rgba(249,115,22,0.55);
}
.btn-warn:hover { box-shadow: 0 12px 30px -10px rgba(249,115,22,0.7); transform: translateY(-1px); }
.btn-sm { height: 36px; padding: 0 13px; font-size: 13px; }
/* ------------------------------ cards ------------------------------ */
.card {
background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
border: 1px solid var(--line-1);
border-radius: var(--r-lg);
padding: 22px;
box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .card { background: var(--bg-surface); }
.sec-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 12px;
}
.sec-title {
display: inline-flex; align-items: center; gap: 9px;
font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg-3);
}
.sec-title svg { width: 14px; height: 14px; color: var(--cyan); }
.sec-meta { font-size: 12.5px; color: var(--fg-4); }
.sec-meta .ok { color: var(--green); font-weight: 650; }
/* ------------------------------ chips ------------------------------ */
.chip {
display: inline-flex; align-items: center; gap: 7px;
height: 28px; padding: 0 12px; border-radius: 999px;
background: var(--bg-elevated); border: 1px solid var(--line-2);
font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg-2);
white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px var(--accent-dim); flex: none; }
.chip-ok { color: var(--green); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.chip-ok .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.chip-warn { color: var(--orange); border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.08); }
.chip-warn .dot { background: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
.chip-bad { color: var(--red); border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.chip-bad .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.chip-accent{ color: var(--cyan); border-color: var(--accent-line); background: var(--accent-dim); }
@keyframes lk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.chip .dot.pulse { animation: lk-pulse 2s ease-in-out infinite; }
/* --------------------------- fold (спойлер) ------------------------ */
details.fold {
background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
border: 1px solid var(--line-1); border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
:root[data-theme="light"] details.fold { background: var(--bg-surface); }
details.fold summary {
list-style: none; cursor: pointer; user-select: none;
display: flex; align-items: center; gap: 12px;
padding: 16px 20px;
font-size: 14px; font-weight: 600; color: var(--fg-2);
transition: color .15s var(--ease), background .15s var(--ease);
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary:hover { color: var(--fg-1); background: var(--bg-card); }
details.fold summary .f-ic {
width: 32px; height: 32px; border-radius: var(--r-sm); flex: none;
display: grid; place-items: center;
background: var(--bg-elevated); border: 1px solid var(--line-2); color: var(--cyan);
}
details.fold summary .f-ic svg { width: 15px; height: 15px; }
details.fold summary .f-text { flex: 1; min-width: 0; }
details.fold summary .f-sub { display: block; font-size: 12px; font-weight: 450; color: var(--fg-4); margin-top: 1px; }
details.fold summary .f-chev { flex: none; color: var(--fg-4); transition: transform .2s var(--ease); }
details.fold summary .f-chev svg { width: 15px; height: 15px; }
details.fold[open] summary .f-chev { transform: rotate(180deg); }
details.fold .f-body { padding: 4px 20px 20px; border-top: 1px solid var(--line-1); padding-top: 16px; }
/* -------------------- proxy-поля (login + кабинет) ------------------ */
.proxy-field {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--r-sm);
background: var(--bg-inset); border: 1px solid var(--line-1);
min-width: 0;
}
.proxy-field + .proxy-field { margin-top: 7px; }
.pf-label { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); flex: none; width: 52px; }
.pf-value { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--fg-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn {
width: 28px; height: 28px; flex: none; border-radius: 7px;
display: grid; place-items: center;
border: 1px solid var(--line-2); background: var(--bg-elevated); color: var(--fg-3);
transition: color .15s, border-color .15s;
}
.copy-btn:hover { color: var(--cyan-soft); border-color: var(--cyan); }
.copy-btn.done { color: var(--green); border-color: var(--green); }
/* ------------------------------ toast ------------------------------ */
.toast {
position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%;
transform: translate(-50%, 16px);
display: flex; align-items: center; gap: 9px;
padding: 11px 18px; border-radius: var(--r-sm);
background: var(--bg-elevated); border: 1px solid var(--line-3);
box-shadow: 0 16px 44px -12px rgba(0,0,0,0.8);
font-size: 13.5px; font-weight: 550;
opacity: 0; pointer-events: none; z-index: 200;
transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="light"] .toast { box-shadow: 0 14px 36px -10px rgba(15,23,42,0.25); }
/* --------------------------- theme toggle -------------------------- */
.theme-toggle {
position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 120;
width: 42px; height: 42px; border-radius: var(--r-sm);
background: var(--bg-surface); border: 1px solid var(--line-2); color: var(--fg-2);
display: grid; place-items: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan-soft); transform: translateY(-1px); }
:root[data-theme="light"] .theme-toggle { box-shadow: 0 6px 18px rgba(15,23,42,0.10); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .tt-sun { display: none; }
:root[data-theme="light"] .theme-toggle .tt-sun { display: block; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: none; }
/* ------------------------------ footer ----------------------------- */
.lk-foot {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding-top: 6px; font-size: 12.5px; color: var(--fg-4);
}
.lk-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); transition: color .15s; }
.lk-foot a:hover { color: var(--cyan-soft); }
.lk-foot a svg { width: 12px; height: 12px; }
.lk-foot .sep { color: var(--fg-4); opacity: 0.6; }
/* ===================================================================
ДВИЖЕНИЕ И ГЛУБИНА
Появление страницы, липкая шапка, раскрытие спойлеров. Всё держится
на opacity/transform — свойствах, которые браузер считает на GPU и не
пересобирает ради них раскладку. Внизу секции — общий выключатель по
prefers-reduced-motion.
=================================================================== */
/* Карточки приезжают лесенкой, а не вываливаются разом: разница между
«страница собралась» и «страница мигнула». Задержки маленькие — на
полное появление уходит меньше полусекунды, ожидания не создаёт. */
@keyframes lk-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
.lk > *, .stage > *, .app > * { animation: lk-rise .5s var(--ease) both; }
.lk > *:nth-child(1), .stage > *:nth-child(1), .app > *:nth-child(1) { animation-delay: .03s; }
.lk > *:nth-child(2), .stage > *:nth-child(2), .app > *:nth-child(2) { animation-delay: .09s; }
.lk > *:nth-child(3), .stage > *:nth-child(3), .app > *:nth-child(3) { animation-delay: .15s; }
.lk > *:nth-child(4), .stage > *:nth-child(4), .app > *:nth-child(4) { animation-delay: .21s; }
.lk > *:nth-child(5), .stage > *:nth-child(5), .app > *:nth-child(5) { animation-delay: .27s; }
.lk > *:nth-child(6), .stage > *:nth-child(6), .app > *:nth-child(6) { animation-delay: .32s; }
.lk > *:nth-child(7), .stage > *:nth-child(7), .app > *:nth-child(7) { animation-delay: .36s; }
/* Дальше задержку не наращиваем: на длинной странице низ приезжал бы
через секунду после верха и это читалось бы как тормоза. */
.lk > *:nth-child(n+8), .stage > *:nth-child(n+8), .app > *:nth-child(n+8) { animation-delay: .4s; }
/* Шапка остаётся на месте при прокрутке. z-index ниже тостов (200) и
переключателя темы (120), но выше карточек.
Ширину НЕ растягиваем на весь экран: 100vw считается вместе с полосой
прокрутки (здесь это 15px), вылезает за clientWidth и добавляет странице
горизонтальную прокрутку. Вместо этого панель чуть шире колонки за счёт
отрицательных margin — 14px внутри 22px паддинга .lk, так что за вьюпорт
она не выходит ни при какой ширине, а текст шапки остаётся ровно над
текстом карточек. Скруглены только нижние углы: панель прижата к верху,
и скруглять там нечего.
Фон и размытие появляются только при прокрутке: наверху странице не нужна
лишняя полоса, а когда под шапку уезжает контент — нужна. */
.lk-head {
position: sticky; top: 0; z-index: 60;
margin: 0 -14px; padding: 12px 14px;
border-radius: 0 0 var(--r-md) var(--r-md);
border: 1px solid transparent; border-top: 0;
transition: background .28s var(--ease), border-color .28s var(--ease),
box-shadow .28s var(--ease);
}
.lk-head.scrolled {
background: var(--bg-scrim);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
border-color: var(--line-1);
box-shadow: 0 14px 34px -24px rgba(0,0,0,0.9);
}
:root[data-theme="light"] .lk-head.scrolled { box-shadow: 0 12px 28px -22px rgba(15,23,42,0.45); }
/* Спойлер раскрывается плавно: по умолчанию щёлкает содержимым. */
@keyframes lk-fold-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
details.fold[open] .f-body { animation: lk-fold-in .28s var(--ease) both; }
details.fold { transition: border-color .2s var(--ease); }
details.fold:hover { border-color: var(--line-2); }
details.fold summary .f-ic { transition: border-color .18s var(--ease), color .18s var(--ease); }
details.fold summary:hover .f-ic { border-color: var(--accent-line); color: var(--cyan-soft); }
/* Акцентная подсветка в углу карточки — тот же приём, что в клиентах.
Вешается точечно (.card.card-glow), а не на все карточки подряд. */
.card-glow { position: relative; overflow: hidden; isolation: isolate; }
.card-glow::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(460px 240px at 100% 0%, var(--accent-dim), transparent 68%);
}
/* Выключатель движения. scroll-behavior и переходы тем гасит блок выше,
рядом с их объявлениями, — здесь только то, что добавлено в этой секции. */
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
.lk > *, .stage > *, .app > * { animation: none; opacity: 1; transform: none; }
details.fold[open] .f-body { animation: none; }
.chip .dot.pulse { animation: none; }
}
/* --------------------------- responsive ---------------------------- */
@media (max-width: 640px) {
.lk { padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); gap: 16px; }
.card { padding: 18px; border-radius: var(--r-md); }
details.fold { border-radius: var(--r-md); }
}