/* chrome.css — шапка сайта, шторка «Меню» и cookie-плашка (вариант Б, 25.09). Общие для посадочных, главной и кабинета; логика — site-chrome.js. ПК (≥900px): логотип · разделы · «Мои практики». Уже — логотип · «Таймер» · «Меню». */ .site-header{ position:relative; max-width:1120px;margin:0 auto; display:flex;align-items:center;gap:8px; padding:calc(8px + env(safe-area-inset-top,0px)) 16px 4px; } .sh-brand{display:inline-flex;flex:0 0 auto;margin-right:auto;border-radius:var(--radius-sm)} .sh-brand picture,.sf-about picture{display:contents} .sh-brand source,.sf-about source{display:none} .sh-brand img{display:block;height:28px;width:auto;max-width:100%;opacity:.92} .sh-cta,.sh-menu,.sh-my{ flex:0 0 auto;display:inline-flex;align-items:center;gap:8px; height:44px;padding:0 14px;border-radius:12px; font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer; } .sh-nav,.sh-my{display:none} .sh-cta{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border)} .sh-cta:hover{background:rgba(127,209,255,.24)} .sh-menu{color:var(--fg);background:var(--bg-elev);border:1px solid var(--border);padding:0 12px} .sh-menu:hover{background:var(--bg-elev-2)} .sh-menu svg,.sh-my svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (min-width:900px){ .site-header{gap:18px;padding:calc(16px + env(safe-area-inset-top,0px)) 24px 12px} .sh-brand{margin-right:0} .sh-nav{display:flex;gap:4px;margin:0 auto} .sh-nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:var(--radius-sm)} .sh-nav a:hover,.sh-nav a[aria-current]{color:var(--fg);background:var(--bg-elev)} /* «Как дышать?» — тёмная пилюля с вращающейся радужной обводкой (палитра главной) */ .site-header .sh-nav a.sh-lead{position:relative;isolation:isolate;margin-right:6px; padding:8px 14px;border-radius:999px;color:#fff;font-weight:600;background:rgba(8,14,32,.72)} .site-header .sh-nav a.sh-lead::before,.site-header .sh-nav a.sh-lead::after{content:"";position:absolute;border-radius:inherit;pointer-events:none; background:conic-gradient(from var(--sl-a,0deg),#ff9fd2,#ffd27a,#9ee9c5,#7fb8ff,#c8a8ff,#ff9fd2);animation:sl-spin 7s linear infinite} .site-header .sh-nav a.sh-lead::before{inset:0;padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .site-header .sh-nav a.sh-lead::after{inset:-3px;z-index:-1;filter:blur(10px);opacity:.38;transition:opacity .3s} .site-header .sh-nav a.sh-lead:hover,.site-header .sh-nav a.sh-lead[aria-current]{color:#fff;background:rgba(14,22,46,.82)} .site-header .sh-nav a.sh-lead:hover::after,.site-header .sh-nav a.sh-lead[aria-current]::after{opacity:.62} .sh-my{display:inline-flex;color:var(--fg);background:var(--bg-elev);border:1px solid var(--border)} .sh-my:hover,.sh-my[aria-current]{border-color:var(--accent-border);background:var(--accent-soft)} .sh-my svg{stroke:var(--accent)} .sh-cta,.sh-menu{display:none} } @property --sl-a{syntax:"";inherits:false;initial-value:0deg} @keyframes sl-spin{to{--sl-a:360deg}} @media (prefers-reduced-motion:reduce){.site-header .sh-nav a.sh-lead::before,.site-header .sh-nav a.sh-lead::after{animation:none}} /* шесть разделов в шапке — на узком ПК плотнее */ @media (min-width:900px) and (max-width:1099px){ .site-header{gap:10px} .sh-nav a{padding:8px 8px;font-size:14px} } @media (max-width:359px){ .sh-cta,.sh-menu{padding:0 10px} .sh-brand img{height:24px} } /* ---------- шапка «Живая аура» на всех страницах, кроме главной (этап 2 редизайна, 12.10.2026) ---------- Как на главной: пилюли на стекле, «Курсы» в строке разделов. Телефон — логотип, «Таймер», круглое «Меню». 900–1279 px — «Мои практики» и «Меню» круглыми значками, разделы мельче и nowrap; от 1280 — с подписями. Значения — прямо --au-*: у контактов и политики области «ауры» ещё нет (этап 6). У главной — свои правила в home.css. */ body:not([data-page="timer"]) .site-header{max-width:1240px;min-height:56px;padding:env(safe-area-inset-top,0px) 16px 0;gap:8px;font-family:var(--au-body)} body:not([data-page="timer"]) .sh-brand img{height:24px;opacity:1} body:not([data-page="timer"]) .sh-cta{height:40px;padding:0 16px;border-radius:999px;background:var(--au-glass);border:1px solid var(--au-line);color:var(--au-fg);font:600 14px/1 var(--au-body)} body:not([data-page="timer"]) .sh-cta:hover{background:var(--au-glass-2)} body:not([data-page="timer"]) .sh-my,body:not([data-page="timer"]) .sh-menu{height:44px;min-width:44px;padding:0;justify-content:center;border-radius:999px; background:var(--au-glass);border:1px solid var(--au-line);color:var(--au-fg);font:600 0/1 var(--au-body);gap:0} body:not([data-page="timer"]) .sh-my:hover,body:not([data-page="timer"]) .sh-menu:hover{background:var(--au-glass-2);border-color:var(--au-line)} body:not([data-page="timer"]) .sh-my[aria-current]{border-color:color-mix(in srgb,var(--au-in) 45%,transparent);background:var(--au-glass-2)} body:not([data-page="timer"]) .sh-my svg,body:not([data-page="timer"]) .sh-menu svg{width:20px;height:20px;stroke:currentColor} @media (min-width:900px){ body:not([data-page="timer"]) .site-header{min-height:72px;gap:12px;padding:env(safe-area-inset-top,0px) clamp(16px,2.4vw,36px) 0} body:not([data-page="timer"]) .sh-brand img{height:22px} body:not([data-page="timer"]) .sh-nav{margin:0 auto 0 4px;gap:0} body:not([data-page="timer"]) .sh-nav a{color:var(--au-muted);font:500 13.5px/1 var(--au-body);padding:9px 6px;border-radius:999px;white-space:nowrap} body:not([data-page="timer"]) .sh-nav a:hover,body:not([data-page="timer"]) .sh-nav a[aria-current]{color:var(--au-fg);background:none} body:not([data-page="timer"]) .site-header .sh-nav a.sh-lead{margin-right:4px;padding:9px 12px;font-weight:600;color:#fff} html:not(.is-app) body:not([data-page="timer"]) .sh-menu{display:inline-flex} html:not(.is-app) body:not([data-page="timer"]) .sh-cta{display:none} } @media (min-width:1100px){ body:not([data-page="timer"]) .sh-brand img{height:26px} body:not([data-page="timer"]) .sh-nav{margin-left:8px} body:not([data-page="timer"]) .sh-nav a{font-size:15px;padding:9px 10px} } /* Ширина строки (27.10.2026): с переключателем темы шапка не влезала в колонку на 900–959 и ≥ 1280 px («Меню» уезжало за край). Колонка на ПК ≈ 1175 px, на 900 — 856: зазоры, отступы разделов и переключатель здесь — впритык, не раздувать. */ @media (min-width:900px) and (max-width:1099px){ body:not([data-page="timer"]) .site-header{gap:8px} body:not([data-page="timer"]) .sh-nav a{font-size:13px;padding:9px 5px} body:not([data-page="timer"]) .sh-theme{--w:68px} } @media (min-width:1280px){ body:not([data-page="timer"]) .site-header{min-height:76px;gap:12px} body:not([data-page="timer"]) .sh-brand img{height:30px} body:not([data-page="timer"]) .sh-nav{margin-left:4px} body:not([data-page="timer"]) .sh-nav a{font-size:14.5px;padding:9px 9px} body:not([data-page="timer"]) .sh-my,body:not([data-page="timer"]) .sh-menu{font-size:14px;gap:8px;padding:0 13px} body:not([data-page="timer"]) .sh-my svg{stroke:var(--au-in)} } /* ---------- липкая шапка (27.10.2026; кроме главной и PWA — у главной полоса .sh-float в home.css) ---------- Наверху страницы — как была (прозрачная, пилюли на ауре). Классы ставит site-chrome.js (initStickyHeader). ПК ≥ 900: всегда видна. top = 56 − полная высота, поэтому, прилипнув, шапка показывает нижние 56 px, а содержимое сдвигается вниз transform'ом на половину разницы (--sh-dy) — раскладка страницы не меняется, CLS 0. Телефон: прокрутка вниз — уезжает (.is-hidden), вверх — возвращается. Подложка во всю ширину окна: шапка шириной 100%, колонка 1240 px — через padding-inline. */ html:not(.is-app) body:not([data-page="timer"]) .site-header{ --sh-full:56px;--sh-dy:0px;--sh-pad:16px; position:sticky;top:calc(56px - var(--sh-full));z-index:80; max-width:none;padding-inline:max(var(--sh-pad),calc((100% - 1240px) / 2 + var(--sh-pad))); transition:transform .3s var(--au-ease),background-color .25s,box-shadow .25s} html:not(.is-app) body:not([data-page="timer"]) .site-header>*{transition:transform .25s var(--au-ease)} html:not(.is-app) body:not([data-page="timer"]) .site-header.is-stuck{ background:var(--au-bar);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--au-line)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html:not(.is-app) body:not([data-page="timer"]) .site-header.is-stuck{background:var(--au-bar-solid)}} html:not(.is-app) body:not([data-page="timer"]) .site-header.is-stuck>*{transform:translateY(var(--sh-dy))} html:not(.is-app) body:not([data-page="timer"]) .site-header.is-hidden:not(:focus-within){transform:translateY(calc(-100% - 4px));box-shadow:none} @media (min-width:900px){ html:not(.is-app) body:not([data-page="timer"]) .site-header{--sh-full:72px;--sh-dy:8px;--sh-pad:clamp(16px,2.4vw,36px)} html:not(.is-app) body:not([data-page="timer"]) .site-header .sh-brand img{transform-origin:0 50%;transition:transform .25s var(--au-ease)} html:not(.is-app) body:not([data-page="timer"]) .site-header.is-stuck .sh-brand img{transform:scale(.82)} } @media (min-width:1280px){ html:not(.is-app) body:not([data-page="timer"]) .site-header{--sh-full:76px;--sh-dy:10px} } @media (prefers-reduced-motion:reduce){ html:not(.is-app) body:not([data-page="timer"]) .site-header,html:not(.is-app) body:not([data-page="timer"]) .site-header *{transition:none} } /* якоря не прячутся под шапку; --sh-h — видимая высота шапки (site-chrome.js) */ html:not(.is-app){scroll-padding-top:var(--sh-h,0px)} /* Полноэкранные режимы виджета в колонке статьи (.art-timer — sticky, свой слой) — поверх шапки, как до неё. */ .art-timer:has(.tw-max,.pm-full,.tw-tool.sh-on,.nz-dark:not([hidden])){z-index:1000} /* В установленном приложении разделы на ПК не нужны — остаётся «Меню». */ html.is-app .sh-nav,html.is-app .sh-my{display:none} html.is-app .sh-menu{display:inline-flex} html.is-app .sh-cta{display:inline-flex} /* В PWA шапка не липкая и без z-index: ночной герой курсов (.lp-hero/.lp-ihero — relative, заезжает под шапку отрицательным margin-top) перекрывал её, и с прелендинга/занятий было не уйти. */ html.is-app body:has(.lp-n.lp-hero,.lp-n.lp-ihero) .site-header{z-index:80} /* Страницы приложения («Мои практики», история, награды, контакты): в PWA внизу 4 вкладки, поэтому в шапке только логотип и еле заметный значок © (попап — nav.js). */ .sh-copy{display:none} html.is-app .sh-app .sh-menu,html.is-app .sh-app .sh-cta{display:none} html.is-app .sh-app .sh-copy{ display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;flex:0 0 auto; background:none;border:0;border-radius:12px;color:rgba(138,163,196,.45);font:inherit;font-size:17px;line-height:1;cursor:pointer} html.is-app .sh-app .sh-copy:hover{color:var(--muted)} html.is-app .mk{display:none !important} /* ---------- шторка «Меню» ---------- */ /* «Живая аура» (этап 6 редизайна, 13.10.2026): окно сайта card-solid, радиус 26; телефон — выезжает сверху, ПК от 900 px — панель справа во всю высоту (как шторка главной). Значения — --au-* напрямую: у контактов, политики и главной своя область токенов, шторка одна на все страницы. */ .menu-sheet{position:fixed;inset:0;z-index:1100;background:rgba(3,6,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .menu-sheet[hidden]{display:none} html.menu-open,html.menu-open body{overflow:hidden} .ms-panel{ max-width:560px;margin:0 auto; display:flex;flex-direction:column;gap:18px; padding:calc(12px + env(safe-area-inset-top,0px)) 16px 22px; background:var(--au-card-solid);border:1px solid var(--au-card-line);border-top:0; border-radius:0 0 26px 26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8); font-family:var(--au-body);color:var(--au-fg); animation:ms-in .5s var(--au-spring); } @keyframes ms-in{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}} @media (min-width:900px){ .ms-panel{position:fixed;top:12px;right:12px;bottom:12px;width:420px;max-width:none;margin:0;padding:16px 20px 22px; overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--au-card-line);border-radius:26px;animation-name:ms-side} @keyframes ms-side{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}} } .ms-top{display:flex;align-items:center;justify-content:space-between;height:44px} .ms-top .sh-brand{margin:0} .ms-close{width:44px;height:44px;border-radius:12px;border:1px solid var(--au-line);background:var(--au-glass);color:var(--au-fg); display:flex;align-items:center;justify-content:center;cursor:pointer} .ms-close:hover{background:var(--au-glass-2)} .ms-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} /* Состав (вариант Б + «Продолжить курс», 28.10.2026): баннер курса → «Что нужно сейчас?» 2×2 → «Приложение на телефон» → «Моё» в строку → «Разделы» чипами + «Все разделы» (
). Разметка — menuSheet() в parts.mjs. */ .ms-panel{gap:16px} .ms-h{margin:2px 0 -4px;font:700 21px/1.15 var(--au-display);letter-spacing:-.01em;color:var(--au-fg)} .ms-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ms-goal{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:100px;padding:14px;border-radius:22px; background:var(--au-glass);border:1px solid var(--au-card-line);color:var(--au-fg);text-decoration:none} .ms-goal:hover{background:var(--au-glass-2)} .ms-goal > span{display:flex;flex-direction:column;gap:4px} .ms-goal .nw{white-space:nowrap} .ms-goal b{font:600 15px/1.2 var(--au-display);letter-spacing:-.01em} .ms-goal small{font:400 12.5px/1.35 var(--au-body);color:color-mix(in srgb,var(--au-fg) 70%,transparent)} .ms-goal svg{width:24px;height:24px;fill:none;stroke:var(--gc,var(--au-fg));stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ms-goal .sos-blob{width:24px;height:24px} .ms-goal[data-mi="sleep"]{--gc:var(--au-hold)} .ms-goal[data-mi="kak"]{--gc:var(--au-in)} .ms-goal[data-mi="kursy"]{--gc:var(--au-out)} .ms-goal.ms-sos{border-color:rgba(255,143,158,.5);background:linear-gradient(160deg,rgba(255,143,158,.2),rgba(255,255,255,.03))} .ms-goal.ms-sos:hover{background:linear-gradient(160deg,rgba(255,143,158,.28),rgba(255,255,255,.05))} /* «Приложение на телефон» — всегда, кроме PWA (решение владельца); «Поставить» — системное окно или /prilozhenie/ */ .ms-app{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:20px;color:var(--au-fg);text-decoration:none; background:linear-gradient(120deg,rgba(127,209,255,.18),rgba(200,168,255,.14));border:1px solid rgba(127,209,255,.35)} .ms-app:hover{background:linear-gradient(120deg,rgba(127,209,255,.26),rgba(200,168,255,.2))} .ms-app > svg{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:var(--au-in);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ms-app > span:not(.ms-app-btn){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .ms-app b{font:600 14.5px/1.25 var(--au-body)} .ms-app small{font:400 12.5px/1.35 var(--au-body);color:color-mix(in srgb,var(--au-fg) 70%,transparent)} .ms-app-btn{flex:0 0 auto;padding:10px 14px;border-radius:999px;background:var(--au-accent);color:var(--au-on-accent);font:700 13px/1 var(--au-body)} html.is-app .ms-app{display:none} .ms-sec{display:flex;flex-direction:column;gap:8px} .ms-label{display:flex;align-items:center;gap:8px;margin:0;font:600 11.5px/1.2 var(--au-body);letter-spacing:.14em;text-transform:uppercase;color:var(--au-dim)} .ms-my{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .ms-my a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 6px;border-radius:999px; background:var(--au-glass);border:1px solid var(--au-card-line);color:var(--au-fg);text-decoration:none;font:500 13.5px/1.1 var(--au-body)} .ms-my a:hover{background:var(--au-glass-2)} .ms-my svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ms-chips{display:flex;flex-wrap:wrap;gap:8px} .ms-chips > a,.ms-all > summary{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:999px;background:var(--au-glass); border:1px solid var(--au-line);color:var(--au-fg);text-decoration:none;font:500 14px/1 var(--au-body)} .ms-chips > a:hover{background:var(--au-glass-2);border-color:var(--au-in)} /* «Все разделы» — раскрываются на месте; открытые — во всю ширину, сверху «Свернуть разделы» */ .ms-all > summary{list-style:none;cursor:pointer;color:var(--au-accent)} .ms-all > summary::-webkit-details-marker{display:none} .ms-all > summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--au-ease)} .ms-all > summary:hover{background:var(--au-glass-2)} .ms-all-off,.ms-all[open] .ms-all-on{display:none} .ms-all[open] .ms-all-off{display:inline} .ms-all[open]{flex-basis:100%} .ms-all[open] > summary{display:flex;justify-content:center;width:100%;border-color:rgba(127,209,255,.35);background:rgba(127,209,255,.08)} .ms-all[open] > summary svg{transform:rotate(180deg)} .ms-more{display:flex;flex-direction:column;gap:10px;margin-top:10px} .ms-group{display:flex;flex-direction:column;padding:12px 14px 4px;border-radius:20px;background:var(--au-glass);border:1px solid var(--au-card-line)} .ms-group .ms-label{margin-bottom:4px} .ms-group .ms-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 8px var(--dot)} .ms-practice{--dot:var(--au-in)} .ms-rest{--dot:var(--au-hold)} .ms-know{--dot:var(--au-out)} .ms-group a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 2px;border-top:1px solid var(--au-line); color:var(--au-fg);text-decoration:none;font:400 15px/1.2 var(--au-body)} .ms-group .ms-label + a{border-top:0} .ms-group a::after{content:"›";color:var(--au-dim);font-size:18px} .ms-group a:hover{color:var(--au-accent)} /* Баннер курса (site-chrome.js paintCourse по снимку pr_course_snap из courses.js): идёт — «Продолжить курс», пауза — «Вернуться к курсу», сегодняшний день пройден — тихая строка. --c — цвет курса. */ .ms-course[hidden]{display:none} .ms-crs{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:24px;color:var(--au-fg);text-decoration:none; background:linear-gradient(150deg,color-mix(in srgb,var(--c) 24%,transparent),rgba(127,209,255,.08));border:1px solid color-mix(in srgb,var(--c) 45%,transparent)} .ms-crs:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 32%,transparent),rgba(127,209,255,.1))} .ms-crs-k{font:600 11px/1.2 var(--au-body);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 55%,var(--au-fg))} .ms-crs-row{display:flex;align-items:center;gap:12px} .ms-crs-row > span:first-child{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .ms-crs b{font:700 18px/1.15 var(--au-display);letter-spacing:-.01em} .ms-crs small{font:400 13px/1.35 var(--au-body);color:color-mix(in srgb,var(--au-fg) 78%,transparent)} .ms-crs-play{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--c);color:var(--au-on-accent)} .ms-crs-play svg{width:20px;height:20px;margin-left:3px;fill:currentColor} .ms-crs-bar{display:flex;align-items:center;gap:10px} .ms-crs-bar > i{flex:1;height:6px;border-radius:99px;background:var(--au-glass-2);overflow:hidden} .ms-crs-bar > i > i{display:block;height:100%;border-radius:inherit;background:var(--c)} .ms-crs-bar small{font-size:12px} .ms-crs-done{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;border-radius:18px;border:1px solid var(--au-line); color:color-mix(in srgb,var(--au-fg) 78%,transparent);text-decoration:none;font:400 14px/1.35 var(--au-body)} .ms-crs-done:hover{background:var(--au-glass)} .ms-crs-done i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)} .ms-crs-done b{font-weight:600;color:var(--au-fg)} @media (prefers-reduced-motion:reduce){.ms-panel{animation:none}} /* «Мне плохо сейчас» заметнее (21.10.2026, marketing/home-sos/DECISIONS.md, Р4–Р5): карточка «Мне плохо» в «Меню» (с 28.10.2026 — первая в «Что нужно сейчас?»), карточка под виджетом статей тревоги, паники, сна и злости (sosCard) и первой в «Практиках» «Моих практик» (П1). Тихая строка (sosLine) осталась только на главной под «Ещё на сайте». Шар — палитра SOS из брендбука (--au-sos). */ .sos-blob{--c0:#ffe6ea;--c1:#ff8f9e;--c2:#ff3d6e;display:block;flex:none;width:22px;height:22px;border-radius:58% 42% 55% 45%/48% 60% 40% 52%; background:radial-gradient(circle at 34% 30%,var(--c0) 0,var(--c1) 42%,var(--c2) 100%);box-shadow:inset -4px -5px 10px rgba(0,0,0,.25),0 6px 18px -6px var(--c1); animation:sosMorph 4.5s ease-in-out infinite} @keyframes sosMorph{50%{border-radius:45% 55% 42% 58%/58% 44% 56% 42%;transform:scale(1.06)}} .sos-cardline{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 16px;border-radius:20px;text-decoration:none!important; border:1px solid rgba(255,143,158,.45);background:linear-gradient(140deg,rgba(255,143,158,.16),rgba(12,18,40,.6));color:var(--au-fg)!important} .sos-cardline:hover{background:linear-gradient(140deg,rgba(255,143,158,.24),rgba(12,18,40,.6))} .sos-cardline .sos-blob{width:44px;height:44px} .sos-cardline > span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .sos-cardline b{font:700 16px/1.2 var(--au-display);color:var(--au-fg)} .sos-cardline small{font:400 13.5px/1.35 var(--au-body);color:var(--au-muted)} .sos-cardline i.ar{font-style:normal;font-size:22px;color:var(--au-sos);flex:none} .sos-cardline:focus-visible{outline:2px solid var(--au-sos);outline-offset:3px} @media (prefers-reduced-motion:reduce){.sos-blob{animation:none}} .sos-line{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--muted)} .sos-line a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px} .sos-line a:hover{text-decoration-color:currentColor} /* Тихая строка курса (courseLine в parts.mjs): хабы и посадочные кластера, результат опросников. */ .crs-line{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--muted)} .crs-line::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--c,#7fd1ff);box-shadow:0 0 10px var(--c,#7fd1ff);vertical-align:1px} .crs-line a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px} .crs-line a:hover{text-decoration-color:currentColor} .prose .crs-line{margin:-8px 0 20px} .qz-crs{margin:12px 0 0} /* ---------- футер сайта (siteFooter в parts.mjs) — «Живая аура», 11.10.2026 ---------- Разделы (три стеклянные карточки с каплей цвета фазы) → строка бренда → юр. строка. Черты сверху нет: вместо неё аура трёх цветов фаз. Токены — из aura.css (.site-footer — область «ауры»), своё — только --sf-link. */ .site-footer{--sf-link:#d9def3; position:relative;isolation:isolate;display:flex;flex-direction:column;gap:20px; max-width:1120px;margin:64px auto 0;padding:0 20px calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--f-body);color:var(--fg)} /* Аура гаснет к краям со всех сторон (маска — пересечение горизонтали и вертикали), иначе край блока виден прямой линией. */ .site-footer::before{content:"";position:absolute;z-index:-1;inset:-80px 0 auto;height:min(100%,600px);pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(transparent,#000 22%,#000 40%,transparent 92%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(transparent,#000 22%,#000 40%,transparent 92%); mask-composite:intersect; background:radial-gradient(closest-side,rgba(94,200,255,.15),transparent) 22% 32%/46% 70% no-repeat, radial-gradient(closest-side,rgba(140,123,255,.16),transparent) 50% 24%/46% 70% no-repeat, radial-gradient(closest-side,rgba(95,224,176,.11),transparent) 78% 34%/46% 70% no-repeat} /* Блок разделов (hubNav) — посадочные, главная, «Мои практики», «Программы». */ .hub-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .hn-group{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 14px 14px;border-radius:26px;overflow:hidden; background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)} .hn-group::before{content:"";position:absolute;inset:0 0 auto;height:120px;pointer-events:none; background:radial-gradient(260px 120px at 20% 0%,color-mix(in srgb,var(--c1) 22%,transparent),transparent 75%)} .hn-top{position:relative;display:flex;align-items:center;gap:12px;padding:0 6px} .hn-blob{flex:none;width:34px;height:34px;border-radius:58% 42% 55% 45%/48% 60% 40% 52%; background:radial-gradient(circle at 34% 30%,var(--c0) 0,var(--c1) 42%,var(--c2) 100%); box-shadow:inset -4px -6px 12px rgba(0,0,0,.25),0 8px 22px -8px var(--c1);animation:hn-morph 9s ease-in-out infinite;animation-delay:var(--dl,0s)} @keyframes hn-morph{0%,100%{border-radius:58% 42% 55% 45%/48% 60% 40% 52%;rotate:0deg}33%{border-radius:42% 58% 38% 62%/60% 40% 58% 42%;rotate:8deg}66%{border-radius:52% 48% 62% 38%/42% 54% 46% 58%;rotate:-6deg}} .hn-label{margin:0;font:700 15px/1.2 var(--f-display);letter-spacing:.01em;color:var(--fg)} .hn-label small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--f-body);letter-spacing:0;color:var(--muted)} .hub-nav ul{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:2px} .hub-nav li{margin:0} .hub-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:14px; font:500 15px/1.3 var(--f-body);color:var(--sf-link);text-decoration:none;transition:background .2s,color .2s} .hub-nav a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c1);opacity:.45;transition:opacity .2s,transform .2s} .hub-nav a::after{content:"→";margin-left:auto;color:var(--c1);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s} .hub-nav a:hover,.hub-nav a:focus-visible{background:color-mix(in srgb,var(--c1) 13%,transparent);color:var(--fg)} .hub-nav a:hover::before,.hub-nav a:focus-visible::before{opacity:1;transform:scale(1.3)} .hub-nav a:hover::after,.hub-nav a:focus-visible::after{opacity:1;transform:none} .hn-practice{--c0:#e3f8ff;--c1:#5ec8ff;--c2:#5a63ff;--dl:0s} .hn-rest{--c0:#efe6ff;--c1:#8c7bff;--c2:#3a2aa8;--dl:-3s} .hn-know{--c0:#e2fff3;--c1:#5fe0b0;--c2:#2b8cff;--dl:-6s} /* строка бренда */ .sf-brand{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:22px 24px;border-radius:28px; background:linear-gradient(120deg,rgba(94,200,255,.12),rgba(140,123,255,.10) 55%,rgba(95,224,176,.08)),var(--card); border:1px solid var(--card-line);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)} .sf-about{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 280px} .sf-about img{display:block;align-self:flex-start;height:26px;width:auto;max-width:100%} .sf-about p{margin:0;max-width:44ch;font-size:14px;line-height:1.45;color:var(--muted)} .sf-acts{display:flex;flex-wrap:wrap;gap:10px} /* кнопки (28.10.2026): «Бесплатные курсы» — стекло с фиолетом задержки, «Мобильное приложение» — главная, голубая */ .sf-go,.sf-crs{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:999px;white-space:nowrap;text-decoration:none} .sf-go svg,.sf-crs svg{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .sf-go{padding:0 26px 0 20px;background:var(--au-go);color:var(--on-accent);font:700 15px/1 var(--f-display); box-shadow:0 14px 40px -14px var(--au-go);transition:transform .15s,box-shadow .3s} .sf-go:hover{box-shadow:0 16px 46px -10px var(--au-go)} .sf-go:active,.sf-crs:active{transform:scale(.97)} .sf-crs{padding:0 22px 0 18px;color:var(--fg);font:600 14.5px/1 var(--f-body); background:linear-gradient(120deg,color-mix(in srgb,var(--au-hold) 16%,transparent),color-mix(in srgb,var(--au-hold) 6%,transparent)),var(--glass); border:1px solid color-mix(in srgb,var(--au-hold) 34%,transparent);transition:border-color .25s,background .25s,transform .15s} .sf-crs svg{color:var(--au-hold)} .sf-crs:hover{border-color:color-mix(in srgb,var(--au-hold) 60%,transparent);background:color-mix(in srgb,var(--au-hold) 20%,transparent)} .site-footer :focus-visible{outline:2px solid var(--au-go);outline-offset:3px} .sf-legal{margin:0;padding:0 6px;font-size:12.5px;line-height:1.6;color:var(--dim)} .sf-legal a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.18);text-underline-offset:3px} .sf-legal a:hover{color:var(--fg)} @media (max-width:860px){.hub-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.hn-practice{grid-column:1/-1}.hn-practice ul{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){ .site-footer{padding-inline:14px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} /* кнопка ИИ-чата не закрывает юр. строку */ .hub-nav{grid-template-columns:minmax(0,1fr)} .hn-practice{grid-column:auto}.hn-practice ul{grid-template-columns:minmax(0,1fr)} .sf-brand{padding:18px;border-radius:24px} .sf-acts,.sf-go,.sf-crs{width:100%} } @media (prefers-reduced-motion:reduce){.hn-blob{animation:none}.hub-nav a,.hub-nav a::before,.hub-nav a::after,.sf-go,.sf-crs{transition:none}} /* ---------- cookie-плашка (этап 2 редизайна, 12.10.2026; вниз — 28.10.2026) ---------- Телефон и планшет — внизу экрана (сверху закрывала лого и меню); кнопка чата на это время стоит над ней (html.ck-on, высоту --ck-h пишет site-chrome.js). ПК от 1000 px — карточка слева внизу, как #ckf главной (у главной своя плашка, эту site-chrome.js там не рисует). */ .cookie-bar{ position:fixed;z-index:90;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px)); max-width:560px;min-height:52px;margin:0 auto;box-sizing:border-box; display:flex;align-items:center;gap:10px; padding:6px 6px 6px 14px;border-radius:16px; background:var(--au-card-solid);border:1px solid var(--au-card-line);box-shadow:0 -10px 40px -16px rgba(0,0,0,.8); font:400 12.5px/1.35 var(--au-body);color:var(--au-muted); animation:ck-in .5s var(--au-spring) both; } /* курс нидры: над нижним мини-плеером .nd-mini (870), под шторкой и плеером курса (879+) — nidra.css */ body:has(.nd-course) .cookie-bar{z-index:875} @keyframes ck-in{from{opacity:0;transform:translateY(calc(100% + 24px))}to{opacity:1;transform:none}} @media (max-width:999px){ html.ck-on .chat-dock{bottom:calc(var(--ck-h,52px) + 20px + env(safe-area-inset-bottom,0px))} } @media (prefers-reduced-motion:reduce){.cookie-bar{animation:none}} .cookie-bar span{flex:1 1 auto;min-width:0} .cookie-bar a{color:var(--au-fg);text-underline-offset:2px} .cookie-bar button{flex:0 0 auto;height:38px;min-height:0;padding:0 16px;border-radius:999px;border:1px solid var(--au-line); background:var(--au-glass-2);color:var(--au-fg);font:600 13px/1 var(--au-body);cursor:pointer} .cookie-bar button:hover{background:rgba(255,255,255,.18)} @media (min-width:1000px){ .cookie-bar{right:auto;left:clamp(16px,2.4vw,36px);bottom:20px;width:370px;max-width:none;margin:0;padding:10px 10px 10px 16px;border-radius:18px;font-size:13px} } @media print{.menu-sheet,.cookie-bar,.sh-menu,.sh-my{display:none !important}} /* ---------- ИИ-чат «Данил Прана»: кнопка вызова (лаунчер в site-chrome.js) ---------- Связка B → D со свечением A (прототип утверждён 10.10.2026): пилюля «Спросить Данила», через 12 с — круг с фото, дышащее свечение, кольцо ауры и плашка «ИИ», пузырь-сообщение. Панель чата — chat.css, грузится по клику. Токены чата — «Живая аура» (aura.css, этап 6 редизайна). */ .chat-dock,.chat-panel,.chat-ask{ --c-aura:conic-gradient(from 200deg,#ff9fd2,#ffd27a,#9ee9c5,#7fb8ff,#c8a8ff,#ff9fd2); --c-ink:var(--au-ink);--c-solid:#0a1022;--c-fg:var(--au-fg);--c-muted:var(--au-muted);--c-dim:var(--au-dim); --c-line:var(--au-line);--c-glass:var(--au-glass);--c-glass-2:var(--au-glass-2);--c-accent:var(--au-accent); --c-go:var(--au-go);--c-card:var(--au-card);--c-card-line:var(--au-card-line); --c-display:var(--au-display);--c-body:var(--au-body); --c-pink:#ff8fc6;--c-on:#071022;--c-spring:cubic-bezier(.32,.72,0,1);--c-ease:cubic-bezier(.4,0,.2,1); } .chat-dock{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none; transition:opacity .3s var(--c-ease),transform .3s var(--c-ease)} .chat-dock > *{pointer-events:auto} @media (min-width:900px){.chat-dock{right:24px;bottom:24px}} .chat-dock.is-off,html.chat-open .chat-dock,html.hold-running .chat-dock,body.focus .chat-dock,html.menu-open .chat-dock{ opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s .3s} .chat-dock[hidden],.chat-dock.is-gone{display:none} /* ПК с липкой колонкой таймера справа (≥ 1000 px): кнопка чата — слева внизу, иначе «Начать» колонки почти всё время под ней и кнопка прячется (AVOID в site-chrome.js) на всю статью. Решение владельца 13.10.2026 (этап 7 редизайна, вариант Б). */ @media (min-width:1000px){ body:has(.page-article.has-timer) .chat-dock{right:auto;left:24px;align-items:flex-start} body:has(.page-article.has-timer) .chat-bubble{border-radius:20px 20px 20px 6px;transform-origin:0 100%} } /* крестик кнопки: на телефоне виден всегда, с мышью — при наведении и фокусе */ .chat-lw{position:relative} .chat-x{position:absolute;z-index:3;top:-7px;left:-7px;width:22px;height:22px;min-height:0;min-width:0;padding:0;margin:0;box-sizing:border-box;border-radius:50%; border:1px solid var(--c-line);background:var(--c-solid);color:var(--c-muted);font:400 15px/20px system-ui,sans-serif;text-align:center;cursor:pointer; box-shadow:0 4px 10px -4px rgba(0,0,0,.6);transition:opacity .3s var(--c-ease),color .2s} .chat-x::before{content:"";position:absolute;inset:-7px;border-radius:50%} .chat-x:hover{color:var(--c-fg)} .chat-x:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px} .chat-launch.is-hide + .chat-x{opacity:0;pointer-events:none} @media (hover:hover) and (pointer:fine){ .chat-x{opacity:0} .chat-lw:hover .chat-launch:not(.is-hide) + .chat-x,.chat-x:focus-visible{opacity:1} } .chat-launch{position:relative;display:flex;align-items:center;gap:10px;height:58px;padding:6px 18px 6px 6px;margin:0; border-radius:999px;background:rgba(12,18,40,.78);border:1px solid var(--c-line);color:var(--c-fg);font:inherit;cursor:pointer; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px -10px rgba(0,0,0,.6); transition:height .7s var(--c-spring),padding .7s var(--c-spring),gap .7s var(--c-spring),background-color .5s var(--c-ease), border-color .5s var(--c-ease),box-shadow .5s var(--c-ease),opacity .4s var(--c-ease),transform .4s var(--c-ease)} .chat-launch.is-hide{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none} .chat-launch .cl-ph{position:relative;flex:none;width:44px;height:44px;transition:width .7s var(--c-spring),height .7s var(--c-spring)} .chat-launch .cl-ph::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:var(--c-aura);filter:blur(13px);opacity:0;transition:opacity .8s var(--c-ease)} .chat-launch .cl-ph::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--c-aura);transition:inset .7s var(--c-spring)} .chat-ava{position:absolute;inset:0;z-index:1;box-sizing:border-box;border-radius:50%;background:#1b2740 url(/assets/img/chat/danil.jpg) center/cover; filter:grayscale(1) contrast(1.05);border:2px solid var(--c-ink);transition:border-width .5s} .chat-launch .cl-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left;white-space:nowrap;overflow:hidden; max-width:160px;transition:max-width .7s var(--c-spring),opacity .35s var(--c-ease)} .chat-launch .cl-tx b{font-weight:600;font-size:15px} .chat-launch .cl-tx small{font-size:11.5px;color:var(--c-muted)} .chat-launch .cl-ai{position:absolute;z-index:2;right:-3px;bottom:-3px;font:700 9px/1 system-ui,sans-serif;letter-spacing:.04em;padding:3px 5px; border-radius:999px;background:var(--c-fg);color:var(--c-on);border:2px solid var(--c-ink);opacity:0;transform:scale(.4); transition:opacity .3s var(--c-ease) .45s,transform .45s var(--c-spring) .45s} .chat-launch .cl-dot{position:absolute;z-index:2;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px; background:var(--c-pink);color:var(--c-on);font:700 11px/16px system-ui,sans-serif;text-align:center;border:2px solid var(--c-ink); opacity:0;transform:scale(.3);transition:opacity .25s,transform .4s var(--c-spring)} .chat-launch.is-orb{height:64px;padding:0;gap:0;background-color:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .chat-launch.is-orb .cl-ph{width:64px;height:64px} .chat-launch.is-orb .cl-ph::before{opacity:.6;animation:chat-breath 10s var(--c-ease) infinite .8s} .chat-launch.is-orb .cl-ph::after{inset:-4px;animation:chat-spin 18s linear infinite} .chat-launch.is-orb .chat-ava{border-width:3px} .chat-launch.is-orb .cl-tx{max-width:0;opacity:0} .chat-launch.is-orb .cl-ai{opacity:1;transform:none} .chat-launch.is-unread .cl-dot{opacity:1;transform:none} .chat-launch.is-loading .cl-ph::after{animation:chat-spin 1.2s linear infinite} .chat-launch:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px} .chat-bubble{position:relative;max-width:min(256px,calc(100vw - 32px));padding:12px 38px 12px 14px;box-sizing:border-box;border-radius:20px 20px 6px 20px; background:var(--c-fg);color:var(--c-on);font-size:14px;line-height:1.38;text-align:left;box-shadow:0 14px 34px -12px rgba(0,0,0,.75);cursor:pointer; transform-origin:100% 100%;opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;transition:opacity .35s var(--c-ease),transform .5s var(--c-spring)} .chat-bubble.is-show{opacity:1;transform:none;pointer-events:auto} .chat-bubble[hidden]{display:none} .chat-bubble:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} .chat-bubble .cb-from{display:block;font-size:11px;font-weight:600;color:#56608a;margin-bottom:3px} .chat-bubble b{font-weight:700} .chat-bubble .cb-x{position:absolute;top:2px;right:2px;width:36px;height:36px;border:0;background:none;border-radius:50%;color:#56608a;font:400 20px/1 system-ui,sans-serif;cursor:pointer} .cb-typing,.chat-typing{display:inline-flex;gap:4px;padding:4px 0} .cb-typing i,.chat-typing i{width:7px;height:7px;border-radius:50%;background:#7c87ad;animation:chat-dots 1s infinite} .cb-typing i:nth-child(2),.chat-typing i:nth-child(2){animation-delay:.15s} .cb-typing i:nth-child(3),.chat-typing i:nth-child(3){animation-delay:.3s} .chat-bubble .cb-msg,.chat-bubble .cb-reply{display:none} .chat-bubble.is-typed .cb-typing{display:none} .chat-bubble.is-typed .cb-msg{display:block} .chat-bubble.is-typed .cb-reply{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .chat-bubble .cb-reply button{min-height:36px;padding:0 12px;border:0;border-radius:999px;background:#e2e7f7;color:var(--c-on);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .chat-bubble .cb-reply button:hover{background:#d3daf2} /* точки входа: строка в конце статьи и на 404 (вставляет site-chrome.js) */ .chat-ask{margin:28px 0 8px} .chat-ask button{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 18px 6px 6px;border-radius:999px;cursor:pointer; background:var(--c-glass);border:1px solid var(--c-line);color:var(--c-fg);font:inherit;font-size:15px;line-height:1.3;text-align:left} .chat-ask button:hover{background:var(--c-glass-2)} .chat-ask .ca-ph{position:relative;flex:none;width:36px;height:36px} .chat-ask .ca-ph::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--c-aura)} .chat-ask b{color:var(--c-accent);font-weight:600} @keyframes chat-spin{to{transform:rotate(360deg)}} @keyframes chat-breath{0%,100%{transform:scale(.86);opacity:.38}40%{transform:scale(1.14);opacity:.72}} @keyframes chat-dots{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}} @media (prefers-reduced-motion:reduce){ .chat-launch,.chat-launch *,.chat-launch .cl-ph::before,.chat-launch .cl-ph::after,.chat-bubble,.chat-dock{animation:none !important;transition-duration:.01ms !important} } @media print{.chat-dock,.chat-ask{display:none !important}} /* ---------- переключатель темы в шапке (20.10.2026, прототип marketing/light-theme/) ---------- Пилюля-сцена: ночь (по умолчанию) — чернила «ауры» со звёздами, луна справа; день (html[data-theme="light"]) — небо «Успокоиться» с облаками, солнце слева. За ручкой — мягкие круги, как у кольца дыхания. Цвета сцены светлый слой не перекрашивает (KEEP_SEL в site-src/lib/theme-light.mjs). Поведение — site-chrome.js. */ .sh-theme{all:unset;box-sizing:border-box;position:relative;flex:none;display:block;width:var(--w);height:40px;border-radius:999px; overflow:hidden;isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent; --w:78px;--k:30px;--pad:5px;--x:calc(var(--w) - var(--k) - var(--pad) * 2); box-shadow:inset 0 2px 6px rgba(8,16,48,.38),inset 0 -1px 0 rgba(255,255,255,.35),0 0 0 1px var(--au-line),0 6px 16px -10px rgba(8,16,48,.5)} .sh-theme:focus-visible{outline:2px solid var(--au-accent);outline-offset:3px} .sh-theme .tt-sky{position:absolute;inset:0;transition:opacity .55s var(--au-ease)} .sh-theme .tt-day{opacity:0; background:radial-gradient(circle at calc(var(--pad) + var(--k) / 2) 50%,transparent 0 19px,rgba(255,255,255,.2) 19px 26px,transparent 26px 32px,rgba(255,255,255,.13) 32px 40px,transparent 40px 47px,rgba(255,255,255,.08) 47px 56px,transparent 56px), linear-gradient(170deg,#3fa9f5 0%,#6fc6ff 55%,#a8e0ff 100%)} .sh-theme .tt-night{ background:radial-gradient(circle at calc(100% - var(--pad) - var(--k) / 2) 50%,transparent 0 19px,rgba(160,175,255,.12) 19px 26px,transparent 26px 32px,rgba(160,175,255,.08) 32px 40px,transparent 40px 47px,rgba(160,175,255,.05) 47px 56px,transparent 56px), linear-gradient(170deg,#060a18 0%,#121b3d 60%,#26305e 100%)} .sh-theme .tt-sky svg{position:absolute;display:block} .sh-theme .tt-clouds{right:-4px;bottom:-3px;width:52px;height:26px;transform:translateY(120%);transition:transform .55s var(--au-spring)} .sh-theme .tt-stars{left:6px;top:5px;width:40px;height:30px;transition:transform .55s var(--au-spring)} .sh-theme .tt-knob{position:absolute;z-index:2;top:50%;left:var(--pad);width:var(--k);height:var(--k);margin-top:calc(var(--k) / -2);border-radius:50%; transform:translateX(var(--x));transition:transform .55s var(--au-spring),scale .2s} .sh-theme:hover .tt-knob{scale:1.06} .sh-theme .tt-sun,.sh-theme .tt-moon{position:absolute;inset:0;border-radius:50%;transition:opacity .4s,transform .55s var(--au-spring)} .sh-theme .tt-sun{opacity:0;transform:rotate(40deg);background:radial-gradient(circle at 34% 30%,#fff3c4 0,#ffd14a 45%,#ffad1f 100%); box-shadow:0 0 0 3px rgba(255,255,255,.32),0 0 12px 2px rgba(255,236,170,.75),inset -2px -3px 4px rgba(214,120,0,.35)} .sh-theme .tt-moon{ background:radial-gradient(circle at 64% 30%,#a9b0d2 0 3.2px,transparent 3.8px),radial-gradient(circle at 36% 58%,#aab1d4 0 4.6px,transparent 5.2px), radial-gradient(circle at 70% 70%,#b3b9da 0 2.6px,transparent 3.2px),radial-gradient(circle at 34% 28%,#ffffff 0,#e4e8f8 50%,#c3c9e4 100%); box-shadow:0 0 0 3px rgba(200,208,255,.12),0 0 14px 1px rgba(170,185,255,.35),inset -2px -3px 4px rgba(80,90,140,.35)} html[data-theme="light"] .sh-theme .tt-day{opacity:1} html[data-theme="light"] .sh-theme .tt-night{opacity:0} html[data-theme="light"] .sh-theme .tt-clouds{transform:none} html[data-theme="light"] .sh-theme .tt-stars{transform:translateY(6px)} html[data-theme="light"] .sh-theme .tt-knob{transform:none} html[data-theme="light"] .sh-theme .tt-sun{opacity:1;transform:none} html[data-theme="light"] .sh-theme .tt-moon{opacity:0;transform:rotate(-40deg)} @media (max-width:899px){.sh-theme{--w:66px;--k:26px;height:36px}.sh-theme .tt-clouds{width:44px;height:22px}} @media (prefers-reduced-motion:reduce){.sh-theme *{transition:none!important}} @media print{.sh-theme{display:none}} /* в практике на главной шапка приглушена — переключатель вместе с ней */ body.focus .site-header .sh-theme{opacity:.35;transition:opacity .4s} /* Ролик о проекте — плеер-«фасад» (site-src/lib/promo.mjs, запуск — site-chrome.js initPromo). До нажатия только обложка;