/* cabinet.css — дизайн-система кабинета Авроры v3 * Токены и компоненты из прототипа aurora-cabinet-v3.html. * Тема: data-theme на , ключ localStorage aurora-theme (как у /jobs). */ :root{ --cyan:#36c9e8;--blue:#4a7bff;--purple:#8b5cf6;--green:#46e0a0;--amber:#f5b14c;--red:#ef6d6d; --r:16px;--r-sm:12px;--r-xs:10px;--nav-w:236px;--ff:'Inter',system-ui,sans-serif;--fd:'Unbounded',var(--ff); --ease:cubic-bezier(.32,.72,0,1);--t-open:.46s;--t-close:.38s; } [data-theme="dark"]{ --bg0:#06081c;--bg1:#0b0e24;--panel:#0e1230;--card:#161b3a;--card2:#1c2350; --text:#eef1ff;--muted:#9aa3c7;--faint:#6b7398;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14); --hover:rgba(255,255,255,.04);--shadow:0 10px 40px rgba(0,0,0,.5);--soft:rgba(139,92,246,.14); --grid:rgba(255,255,255,.08);--track:rgba(255,255,255,.1); } [data-theme="light"]{ --bg0:#eef1fb;--bg1:#f6f8ff;--panel:#fff;--card:#fff;--card2:#f1f4ff; --text:#0d1130;--muted:#5b6390;--faint:#8b93b8;--line:rgba(20,26,63,.10);--line2:rgba(20,26,63,.16); --hover:rgba(20,26,63,.035);--shadow:0 8px 32px rgba(30,40,90,.10); --cyan:#159fc0;--blue:#3a63e0;--purple:#7c4de0;--green:#1fae74;--amber:#c9852a;--red:#d9534f;--soft:rgba(124,77,224,.10); --grid:rgba(20,26,63,.08);--track:rgba(20,26,63,.10); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--ff);background:var(--bg0);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.45;transition:background .25s,color .25s} a{color:inherit;text-decoration:none} button,input,select{font-family:inherit;color:inherit} button{cursor:pointer;border:none;background:none} :focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* Шапка — aurora-landing/partials/header.html (префикс ah-). Стили здесь не живут. */ /* ============ SHELL ============ */ /* Ширина как у шапки (.ah-in: max-width 1240 + padding 24): боковое меню и контент выровнены по логотипу слева и кнопке «Кабинет» справа. */ .shell{display:grid;grid-template-columns:var(--nav-w) 1fr;align-items:start;max-width:1240px;margin:0 auto;padding:0 24px;width:100%;box-sizing:border-box} .side{position:sticky;top:64px;padding:22px 8px 22px 0;display:flex;flex-direction:column;gap:2px;height:calc(100vh - 64px);overflow:auto} .side .cap{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:14px 12px 7px} .side .cap:first-child{padding-top:0} .snav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--muted); font-size:14px;font-weight:500;position:relative;transition:.15s;width:100%;text-align:left} .snav svg{width:18px;height:18px;flex:none;opacity:.92} .snav:hover{background:var(--hover);color:var(--text)} .snav.on{background:var(--soft);color:var(--text);font-weight:600} .snav.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:19px;border-radius:3px;background:linear-gradient(var(--cyan),var(--purple))} .snav .bdg{margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--card2);color:var(--muted)} .snav .lk{margin-left:auto;width:14px;height:14px;opacity:.65;display:none} /* блокировка для гостя */ [data-role="guest"] .snav.reg,[data-role="guest"] .mchips button.reg,[data-role="guest"] .mchips a.mchip.reg{opacity:.5} [data-role="guest"] .snav.reg .lk{display:block} [data-role="guest"] .snav.reg .bdg{display:none} [data-role="guest"] .mchips button.reg .lkm,[data-role="guest"] .mchips a.mchip.reg .lkm{display:inline-block} .lkm{display:none;width:12px;height:12px;margin-left:5px;vertical-align:-1px} /* тултип */ .tip{position:fixed;z-index:300;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-xs); padding:9px 12px;font-size:12.5px;color:var(--text);box-shadow:var(--shadow);max-width:250px; opacity:0;pointer-events:none;transition:opacity .15s;line-height:1.4} .tip.show{opacity:1} /* Атрибут hidden должен побеждать всегда. По умолчанию он этого не делает: браузер задаёт [hidden]{display:none} в своей таблице стилей, а ЛЮБОЕ авторское правило с display её перебивает. Так подпись «Сверяем список с hh.ru…» горела постоянно: у неё .res-hint{display:flex}, и скрипт, выставляя el.hidden = true, ничего не добивался — визуально подпись не гасла никогда. Правило чинит этот класс ошибок целиком: в кабинете hidden означает «не показывать», и точка. */ [hidden]{display:none!important} .main{padding:26px 0 90px 20px;min-width:0} #cabPage{transition:opacity .18s ease} /* Во время перехода блокируем клики, но НЕ гасим прозрачностью: раньше было opacity:.55, и полупрозрачный раздел выглядел сломанным, а не грузящимся. Теперь на это время в #cabPage лежит скелет — он и говорит «идёт загрузка». */ #cabPage.is-loading{pointer-events:none} .mchips{display:none;gap:7px;overflow-x:auto;padding:0 0 4px;margin-bottom:18px;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 100%); mask-image:linear-gradient(90deg,#000 0%,#000 100%); transition:-webkit-mask-image .2s,mask-image .2s} .mchips::-webkit-scrollbar{display:none} /* Справа ещё есть чипы — градиент «съедает» край, как корешок для свайпа */ .mchips.can-scroll-right{ -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 42px),transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 42px),transparent 100%) } .mchips.can-scroll-left{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28px,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 28px,#000 100%) } .mchips.can-scroll-left.can-scroll-right{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28px,#000 calc(100% - 42px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 28px,#000 calc(100% - 42px),transparent 100%) } .mchips button,.mchips a.mchip{flex:none;padding:9px 14px;border-radius:var(--r-xs);background:var(--card);border:1px solid var(--line); font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none} .mchips button.on,.mchips a.mchip.on{background:var(--soft);border-color:var(--purple);color:var(--text)} /* Невидимый корешок: всегда чуть вылезает за правый край, если чипов больше ширины */ .mchips .mchip-peek{flex:none;width:22px;height:1px;pointer-events:none;visibility:hidden} /* ============ БЛОКИ ============ */ .ph{margin-bottom:20px} .ph h1{font-family:var(--fd);font-weight:700;font-size:29px;letter-spacing:-.015em;line-height:1.1} .ph p{color:var(--muted);font-size:13.5px;margin-top:7px;max-width:640px} .sec{display:flex;flex-direction:column;gap:14px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:19px} .card>h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:3px} .card>h3 svg{width:17px;height:17px;color:var(--muted)} .card>.sub{color:var(--faint);font-size:12.5px;margin-bottom:14px} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .split{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:var(--r-xs); font-weight:600;font-size:13.5px;border:1px solid transparent;white-space:nowrap; transition:filter .2s var(--ease),background .2s var(--ease),transform .16s var(--ease)} .btn:active{transform:scale(.975)} .btn svg{width:15px;height:15px} .btn-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff} .btn-primary:hover{filter:brightness(1.09)} .btn-green{background:var(--green);color:#04231a;font-weight:700} .btn-green:hover{filter:brightness(1.06)} .btn-ghost{border-color:var(--line2);color:var(--text)} .btn-ghost:hover{background:var(--hover)} .btn-quiet{color:var(--muted);padding:9px 8px} .btn-quiet:hover{color:var(--text)} .btn-danger{border-color:rgba(239,109,109,.4);color:var(--red)} .btn-sm{padding:7px 12px;font-size:12.5px} .chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px; background:var(--card2);color:var(--muted)} .chip .d{width:6px;height:6px;border-radius:50%;background:currentColor} .chip.ok{background:rgba(70,224,160,.14);color:var(--green)} .chip.warn{background:rgba(245,177,76,.14);color:var(--amber)} .chip.info{background:var(--soft);color:var(--purple)} .row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)} .row:first-of-type{border-top:none} .row .ic{width:37px;height:37px;border-radius:var(--r-xs);background:var(--card2);display:grid;place-items:center;flex:none;color:var(--purple)} .row .ic svg{width:17px;height:17px} .row .t{font-weight:600;font-size:13.5px} .row .s{color:var(--faint);font-size:12px;margin-top:1px} .row .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none} .field{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 13px;font-size:13.5px;width:100%;transition:.15s} .field:focus{outline:none;border-color:var(--purple)} .field::placeholder{color:var(--faint)} select.field{cursor:pointer} .lab{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block} .sw{width:44px;height:25px;border-radius:20px;background:var(--card2);border:1px solid var(--line2);position:relative;flex:none;transition:.2s;cursor:pointer} .sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--faint);transition:.2s} .sw.on{background:var(--green);border-color:transparent} .sw.on::after{left:21px;background:#fff} .note{border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.5} .note svg{width:16px;height:16px;flex:none;margin-top:2px} .note.amber{background:rgba(245,177,76,.09);border:1px solid rgba(245,177,76,.3)} .note.amber svg{color:var(--amber)} .note.info{background:var(--soft);border:1px solid var(--line2)} .note.info svg{color:var(--purple)} .offer{background:radial-gradient(120% 150% at 92% 0%,rgba(139,92,246,.20),transparent 55%), radial-gradient(110% 130% at 0% 100%,rgba(54,201,232,.14),transparent 55%),var(--card2);border:1px solid var(--line2)} .offer .eb{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--faint);font-weight:700} .offer .big{font-family:var(--fd);font-weight:700;font-size:27px;line-height:1.14;margin:9px 0 8px;letter-spacing:-.015em} .offer .big b{color:var(--cyan)} .offer p{color:var(--muted);font-size:13px;max-width:600px} .track{height:12px;border-radius:20px;background:rgba(120,130,180,.2);overflow:hidden;margin-top:18px} .fill{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple)); transition:width 1s var(--ease);box-shadow:0 0 16px rgba(74,123,255,.4)} .marks{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--faint);font-weight:500} .marks .d{color:var(--cyan)} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;position:relative} .kpi .n{font-family:var(--fd);font-weight:600;font-size:26px;line-height:1} .kpi .l{font-size:13px;font-weight:600;margin-top:9px} .kpi .h{color:var(--faint);font-size:11.5px;margin-top:3px} .k1 .n{color:var(--cyan)}.k2 .n{color:var(--blue)} .kpi.soon{opacity:.6} .kpi.soon .n{color:var(--faint)} .kpi .soon-t{position:absolute;top:13px;right:13px;font-size:9px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);border:1px solid var(--line2);border-radius:20px;padding:2px 8px} /* ---------- график «Отклики за неделю» (столбики с осью) ---------- */ .plot{display:grid;grid-template-columns:32px 1fr;gap:12px} .yax{position:relative;height:190px} .yax b{position:absolute;right:0;transform:translateY(-50%);font-size:11px;color:var(--faint);font-weight:500;line-height:1;white-space:nowrap} .plot-area{position:relative;height:190px} .grid-lines{position:absolute;inset:0;pointer-events:none} .grid-lines i{position:absolute;left:0;right:0;height:1px;background:var(--grid)} .grid-lines i.base{background:var(--line2)} .bars{position:absolute;inset:0;display:flex;align-items:stretch;gap:10px} .bars .col{flex:1;display:flex;align-items:flex-end;justify-content:center;min-width:0} .bars .v{position:relative;width:100%;max-width:46px;border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--blue),var(--purple))} .bars .col.tod .v{background:linear-gradient(180deg,var(--cyan),var(--blue))} .bars .v .num{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .bars .col.tod .v .num{color:var(--cyan)} .bars .zero{width:100%;max-width:46px;height:3px;border-radius:3px;background:var(--line2)} .xax{display:flex;gap:10px;margin-top:10px;padding-left:44px} .xax div{flex:1;text-align:center;font-size:11px;color:var(--faint);line-height:1.3;min-width:0} .xax div b{display:block;color:var(--muted);font-weight:600;font-size:11.5px} .xax div.tod b{color:var(--cyan)} .chart-empty{height:190px;display:grid;place-items:center;text-align:center;color:var(--faint);font-size:13px} /* ---------- карточки резюме (автоподнятие внутри активной) ---------- */ .res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px; transition:border-color var(--t-open) var(--ease),box-shadow var(--t-open) var(--ease),background var(--t-open) var(--ease)} .res:last-child{margin-bottom:0} .res.act{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),0 6px 22px rgba(124,77,224,.10)} .res .top{display:flex;align-items:center;gap:14px;padding:16px 18px} .res .av{width:42px;height:42px;border-radius:var(--r-sm);background:var(--card2);display:grid;place-items:center;color:var(--faint);flex:none; transition:color var(--t-open) var(--ease),background var(--t-open) var(--ease)} .res.act .av{color:var(--purple);background:var(--soft)} .res .av svg{width:20px;height:20px} .res .nm{font-weight:700;font-size:14.5px} .res .mt{color:var(--faint);font-size:12px;margin-top:3px} .res .state{margin-left:auto;display:flex;align-items:center;gap:11px;flex:none} .res .state .lbl{font-size:12.5px;font-weight:600;color:var(--faint);white-space:nowrap;transition:color var(--t-open) var(--ease)} .res.act .state .lbl{color:var(--green)} @media(max-width:620px){.res .state .lbl{display:none}} .res .sw{width:46px;height:26px;border-radius:20px;background:var(--card2);border:1px solid var(--line2);position:relative;flex:none;cursor:pointer; transition:background var(--t-close) var(--ease),border-color var(--t-close) var(--ease)} .res .sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--faint); transition:transform var(--t-close) var(--ease),background var(--t-close) var(--ease),width var(--t-close) var(--ease)} .res.act .sw{background:var(--green);border-color:transparent;transition-duration:var(--t-open)} .res.act .sw::after{transform:translateX(20px);background:#fff;transition-duration:var(--t-open)} .res .sw:active::after{width:24px} .res .boost{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-close) var(--ease)} .res.act .boost{grid-template-rows:1fr;transition-duration:var(--t-open)} .res .boost>.in{overflow:hidden;min-height:0} .res .bcontent{margin:0 18px 16px;border-radius:var(--r-sm);padding:14px;background:var(--soft);border:1px solid var(--line2); display:flex;gap:12px;align-items:center;flex-wrap:wrap; opacity:0;transform:translateY(-8px) scale(.985); transition:opacity .2s var(--ease),transform .28s var(--ease),background .3s var(--ease),border-color .3s var(--ease)} .res.act .bcontent{opacity:1;transform:none;transition-delay:.1s,.1s,0s,0s;transition-duration:.34s,.42s,.3s,.3s} .res .bcontent .bi{width:32px;height:32px;border-radius:9px;background:var(--card);display:grid;place-items:center;color:var(--purple);flex:none; transition:color .3s var(--ease)} .res .bcontent .bi svg{width:16px;height:16px} .res .bcontent .bt{font-size:13px;font-weight:600} .res .bcontent .bs{font-size:12px;color:var(--muted);margin-top:2px} .res .bcontent .ba{margin-left:auto} @media(max-width:620px){.res .bcontent .ba{margin-left:0;width:100%}.res .bcontent .ba .btn{width:100%}} .res.boosted.act .bcontent{background:rgba(70,224,160,.12);border-color:rgba(70,224,160,.35)} .res.boosted.act .bcontent .bi{color:var(--green)} .res .b-off,.res .b-on,.res .b-locked{display:none;align-items:center;gap:12px;width:100%;flex-wrap:wrap} .res:not(.boosted) .b-off{display:flex} .res.boosted .b-on{display:flex} [data-plan="trial"] .res .b-off,[data-plan="trial"] .res .b-on{display:none!important} [data-plan="trial"] .res .b-locked{display:flex} [data-plan="trial"] .res.act .bcontent{background:var(--card2);border-color:var(--line)} [data-plan="trial"] .res .bcontent .bi{color:var(--faint)} .res .moved{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-close) var(--ease);margin:0 18px} .res .moved.show{grid-template-rows:1fr;transition-duration:var(--t-open)} .res .moved>i{overflow:hidden;min-height:0;font-style:normal;display:block} .res .moved .mm{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-sm);padding:11px 13px;margin-bottom:14px; font-size:12.5px;line-height:1.45;background:rgba(245,177,76,.1);border:1px solid rgba(245,177,76,.32); opacity:0;transform:translateY(-6px);transition:opacity .24s var(--ease),transform .3s var(--ease)} .res .moved.show .mm{opacity:1;transform:none;transition-delay:.12s} .res .moved svg{width:15px;height:15px;color:var(--amber);flex:none;margin-top:2px} .res-foot{margin-top:8px} .tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs button{flex:none;padding:8px 13px;border-radius:var(--r-xs);font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line)} .tabs button.on{background:var(--soft);border-color:var(--purple);color:var(--text)} .app{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap} .app:first-of-type{border-top:none} .app .co{width:38px;height:38px;border-radius:var(--r-xs);background:var(--card2);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--muted);flex:none;overflow:hidden} .app .co img{width:100%;height:100%;object-fit:contain;background:#fff} .app .ti{font-weight:600;font-size:14px} .app .ti a{text-decoration:none;transition:color .15s var(--ease)} .app .ti a:hover{color:var(--purple)} .app-note{font-size:12.5px;color:var(--muted);margin-top:10px;display:flex;gap:8px;align-items:flex-start;line-height:1.45} .app-note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--purple)} .app .me{color:var(--faint);font-size:12px;margin-top:2px} .app .rr{margin-left:auto;display:flex;align-items:center;gap:10px} .empty{text-align:center;padding:46px 20px} .empty .ei{width:64px;height:64px;border-radius:50%;background:var(--card2);display:grid;place-items:center;margin:0 auto 16px;color:var(--faint)} .empty .ei svg{width:28px;height:28px} .empty h4{font-size:16px;font-weight:700;margin-bottom:6px} .empty p{color:var(--muted);font-size:13px;max-width:360px;margin:0 auto 18px} .plan{background:linear-gradient(180deg,var(--soft),transparent 55%),var(--card);border:1px solid var(--line2)} .sline{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:8px 0;border-top:1px solid var(--line)} .sline:first-of-type{border-top:none} .sline span{color:var(--muted)} .months{display:flex;gap:5px;background:var(--card2);padding:4px;border-radius:var(--r-sm);border:1px solid var(--line)} .months button{flex:1;padding:9px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);position:relative} .months button.on{background:var(--panel);color:var(--text);box-shadow:var(--shadow)} .months button em{position:absolute;top:-8px;right:3px;font-style:normal;font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:10px;background:var(--purple);color:#fff} .price{font-family:var(--fd);font-weight:700;font-size:27px;margin:14px 0 3px} .price small{font-size:13px;color:var(--muted);font-weight:400} .feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin:14px 0} .feat li{font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start} .feat li svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--green)} .proryv{background:linear-gradient(180deg,rgba(139,92,246,.15),transparent 55%),var(--card);border:1px solid rgba(139,92,246,.32)} .proryv .feat li svg{color:var(--purple)} .refbox{display:flex;gap:9px;align-items:center;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:11px 13px;font-size:13px;font-family:ui-monospace,monospace} .refbox span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Реферальные коды — отдельная карточка на слот, без скученности */ .ref-head{margin-bottom:16px} .ref-head h3{margin-bottom:6px} .ref-head .sub{margin:0;line-height:1.45;max-width:52ch} .refslots{display:flex;flex-direction:column;gap:10px} .refslot{ border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card2); padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px } .refslot.is-used{opacity:.78;background:transparent} .rs-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px} .rs-label{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text);flex:none} .rs-badge{ flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px; letter-spacing:.02em;line-height:1.2;white-space:nowrap } .rs-badge-free{background:var(--soft);color:var(--purple);border:1px solid rgba(139,92,246,.28)} .rs-badge-used{background:rgba(70,224,160,.12);color:var(--green);border:1px solid rgba(70,224,160,.28)} .rs-body{display:flex;align-items:center;gap:8px;min-width:0} .rs-code{ flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;line-height:1.4;color:var(--text); background:var(--panel);border:1px solid var(--line);border-radius:8px; padding:10px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .rs-code.is-struck{color:var(--faint);text-decoration:line-through} .rs-copy{ flex:none;display:inline-flex;align-items:center;gap:6px; height:38px;padding:0 12px;border-radius:8px; border:1px solid var(--line2);background:var(--panel); color:var(--muted);font-size:12.5px;font-weight:600;transition:.15s } .rs-copy svg{width:15px;height:15px} .rs-copy:hover{color:var(--text);border-color:var(--purple)} .rs-copy.ok{color:var(--green);border-color:rgba(70,224,160,.4)} .ref-meta{ display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;padding-top:12px; border-top:1px solid var(--line);font-size:11.5px;color:var(--faint);line-height:1.4 } .ref-meta b{color:var(--muted);font-weight:600} @media(max-width:560px){ .rs-copy span{display:none} .rs-copy{width:38px;padding:0;justify-content:center} } /* Фоллбэк-модалка, если браузер срезал вкладку оплаты */ .paywall{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px; background:rgba(6,8,28,.72);backdrop-filter:blur(8px)} .paywall-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line2); border-radius:var(--r);padding:22px;box-shadow:var(--shadow)} .paywall-card h3{font-size:17px;font-weight:700;margin-bottom:8px} .iconb{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--muted);transition:.15s;flex:none} .iconb:hover{color:var(--text);border-color:var(--purple)} .iconb svg{width:16px;height:16px} .tpick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:440px} .tpick button{border:2px solid var(--line);border-radius:var(--r-sm);padding:8px;background:var(--card2);transition:.15s} .tpick button.on{border-color:var(--green)} .tpick .prev{height:58px;border-radius:8px;display:flex;overflow:hidden;margin-bottom:8px;border:1px solid var(--line)} .tpick .lbl{font-size:12px;font-weight:600;color:var(--muted)} .tpick button.on .lbl{color:var(--text)} .soonhead{display:inline-flex;align-items:center;gap:7px} .soonbdg{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber); border:1px solid rgba(245,177,76,.4);border-radius:20px;padding:2px 8px} /* состояния */ [data-state="active"] .only-trial{display:none!important} [data-state="trial"] .only-active,[data-state="noprofile"] .only-active{display:none!important} [data-state="noprofile"] .has-profile{display:none!important} .no-profile{display:none} [data-state="noprofile"] .no-profile{display:block} .guest-only{display:none} [data-role="guest"] .guest-only{display:flex} [data-role="guest"] .user-only{display:none!important} @media(max-width:1080px){.split{grid-template-columns:1fr}} @media(max-width:860px){ .shell{grid-template-columns:1fr;padding:0 15px} .side{display:none} .mchips{display:flex} .main{padding:20px 0 80px} .ph h1{font-size:24px} .offer .big{font-size:21px} .kpis{grid-template-columns:1fr 1fr} .two{grid-template-columns:1fr} .xax{padding-left:40px} } /* links styled as nav/buttons */ a.snav{color:inherit} a.di{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border-radius:var(--r-xs); font-size:13.5px;font-weight:500;color:var(--muted);transition:.15s;text-align:left;text-decoration:none} a.di:hover{background:var(--hover);color:var(--text)} a.di svg{width:17px;height:17px;flex:none} .mchips a.mchip{text-decoration:none} .mchips a.mchip.on{background:var(--soft);border-color:var(--purple);color:var(--text)} /* ============ ПЛАШКА ИНТЕГРАЦИИ (Telegram / hh.ru) ============ */ .intg{display:flex;align-items:center;gap:14px} .intg .ic{width:40px;height:40px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none; background:var(--soft);color:var(--purple)} .intg .ic svg{width:19px;height:19px} .intg .tx{flex:1;min-width:0} .intg .tt{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .intg .ss{color:var(--faint);font-size:12px;margin-top:2px;line-height:1.45} .intg.ok .ic{background:rgba(70,224,160,.14);color:var(--green)} .intg .act{flex:none} @media(max-width:600px){ .intg{flex-wrap:wrap} .intg .act,.intg .act .btn{width:100%} } /* ============ ТОСТ ============ */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:10001; max-width:min(420px,calc(100vw - 32px));padding:12px 18px;border-radius:var(--r-sm); background:var(--card2);border:1px solid var(--line2);color:var(--text);font-size:13px;line-height:1.45; box-shadow:0 12px 40px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast.err{border-color:rgba(239,109,109,.45)} /* ============ СКОРОСТЬ ОТКЛИКОВ + буст-модалка ============ */ .btn-sm{padding:9px 14px;font-size:12.5px;width:auto} .offer .eta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2); display:flex;align-items:center;gap:14px;flex-wrap:wrap} .offer .eta .txt{flex:1;min-width:240px;font-size:13px;color:var(--muted);line-height:1.5} .offer .eta .txt b{color:var(--text);font-weight:700} .speed{margin:14px 0} .speed.on{border-color:rgba(70,224,160,.4); background:linear-gradient(180deg,rgba(70,224,160,.06),transparent 50%),var(--card)} .sp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px} .sp-head h3{font-size:15px;font-weight:700;margin:0} .sp-head .s{font-size:12.5px;color:var(--faint)} .sp-head .sp{flex:1} .sp-head .now{font-size:12.5px;color:var(--muted);font-weight:600} .sp-head .now b{color:var(--cyan)} .scale{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:7px} .zone{display:flex;gap:5px} .zone i{flex:1;height:9px;border-radius:3px;background:var(--track); transition:background .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)} .zone.have i{background:var(--cyan)} .zone.ghost i{background:transparent;border:1.5px dashed var(--line2)} .zone.lit i{background:var(--green);border-color:transparent;transform:translateY(-2px)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .step{border-radius:var(--r-sm);padding:12px 13px;border:1px solid transparent;background:transparent; transition:border-color .22s var(--ease),background .22s var(--ease),transform .16s var(--ease);width:100%} .step .tt{font-weight:700;font-size:14.5px;line-height:1.2;font-family:var(--ff)} .step .tt b{color:var(--faint);font-weight:600;font-size:12px;margin-left:4px} .step .tl{font-size:11.5px;color:var(--faint);margin-top:3px} .step .tp{font-size:12.5px;font-weight:600;margin-top:8px} .step .td{font-size:11.5px;font-weight:600;margin-top:3px} .step.cur{background:var(--card2)} .step.cur .tt{color:var(--cyan)} .step.cur .td{color:var(--muted)} .step.buy{border-color:var(--line2);background:var(--card2);cursor:pointer;text-align:left;color:inherit} .step.buy:hover{border-color:var(--purple);background:var(--soft)} .step.buy:active{transform:scale(.985)} .step.buy .td{color:var(--green)} .step.hot{border-color:rgba(139,92,246,.35); background:linear-gradient(135deg,rgba(139,92,246,.08),transparent 70%),var(--card2)} .step-wrap{position:relative;display:block} .step-wrap .step{width:100%} .step-wrap .flag{position:absolute;top:-8px;left:13px;z-index:1;font-size:8.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:20px;background:var(--purple);color:#fff} .sp-fine{font-size:11px;color:var(--faint);margin-top:12px;line-height:1.45} .sp-status{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--green);margin-top:4px} .sp-status .d{width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 0 4px rgba(70,224,160,.16);flex:none} .m-scale{display:none} @media(max-width:720px){ .scale{display:none} .steps{grid-template-columns:1fr;gap:10px} .step{border:1.5px solid var(--line);background:var(--card2);padding:13px 14px} .step.cur{border-color:var(--line2)} .m-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px} .m-scale .z{display:flex;gap:3px} .m-scale .z i{flex:1;height:7px;border-radius:3px;background:var(--track)} .m-scale .z.on i{background:var(--cyan)} .m-scale .z.gain i{background:var(--green)} .m-scale .z.off i{background:transparent;border:1.5px dashed var(--line2)} } .bill-boost{margin-top:12px;padding-top:12px;border-top:1px solid var(--line); font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px} .bill-boost b{color:var(--text);font-weight:600} .bill-boost .hint{font-size:12px;color:var(--amber)} .app-boost{margin-top:14px} .app-boost .inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} .app-boost p{margin:0;flex:1;min-width:200px;font-size:13px;color:var(--muted);line-height:1.45} .bmod{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;pointer-events:none;transition:opacity .2s} .bmod.show{opacity:1;pointer-events:auto} .bmod-back{position:absolute;inset:0;background:rgba(8,10,18,.72);backdrop-filter:blur(8px)} .bmod-card{position:relative;z-index:1;width:100%;max-width:440px;max-height:min(90vh,640px);overflow:auto; background:var(--card2);border:1px solid var(--line2);border-radius:var(--r);padding:22px 22px 20px; box-shadow:0 24px 80px rgba(0,0,0,.45)} .bmod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px} .bmod-head h2{font-family:var(--fd);font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.2} .bmod-x{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--muted); font-size:22px;line-height:1;cursor:pointer;flex:none} .bmod-x:hover{background:var(--hover);color:var(--text)} .bmod-lead{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 16px} .bmod-lead b{color:var(--text);font-weight:600} .bmod-tier{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px; text-align:left;padding:14px 16px;margin-bottom:10px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--card);cursor:pointer;transition:.15s} .bmod-tier:hover{border-color:var(--purple);background:var(--hover)} .bmod-tier:disabled{opacity:.55;cursor:wait} .bmod-tier strong{display:block;font-size:14.5px;font-weight:650} .bmod-tier small{display:block;margin-top:3px;color:var(--faint);font-size:12px} .bmod-tier em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--purple);flex:none} .bmod-tier-hot{background:linear-gradient(135deg,rgba(90,48,208,.35),rgba(54,123,255,.2)); border-color:rgba(139,92,246,.45)} .bmod-tier-hot em{color:var(--cyan)} .bmod-err{margin-top:10px;padding:10px 12px;border-radius:var(--r-xs);font-size:12.5px; background:rgba(239,109,109,.1);border:1px solid rgba(239,109,109,.35);color:#f0a0a0} .bmod-price{margin-top:8px;font-family:var(--fd);font-size:28px;font-weight:700} .bmod-price b{font-weight:700} /* ---- Billing: мягкое появление блоков + раскрытие разовой оплаты ---- */ .bill-page{gap:14px} /* ── Скелетоны загрузки ────────────────────────────────────────────────────── Зачем. Раздел кабинета появляется в три приёма: сначала едет разметка страницы, потом её скрипт, потом ответ API — и всё это по сети. Пока не пришёл последний ответ, показывать было нечего, поэтому на быстрой сети раздел просто мигал, а на медленной висел пустым и потом выпадал рывком. Скелет занимает место заранее: содержимое приходит на готовую форму, а не раздвигает пустоту. Правило одно: скелет — это силуэт РЕАЛЬНОГО блока, который он замещает, а не произвольный набор серых полосок. У него те же отступы, та же высота строк, тот же силуэт справа (тумблер / кнопки / чип), потому что именно от этого зависит, будет ли переход на настоящий контент незаметным или раздел скакнёт по высоте. Общий блок на все случаи (аватар + две строки + тумблер) для этого не годится — он совпадает по силуэту только с карточкой резюме; на разделе уведомлений, где у строк нет ни аватара, ни тумблера, тот же блок выглядит чужеродно. Поэтому ниже — не один универсальный элемент, а набор, зеркальный компонентам кабинета: `.res`, `.row`, `.app`, `.offer`, `.card.plan`, `.intg` (смотри их в этом же файле). */ .sk{ background:linear-gradient(90deg, var(--card2) 25%, color-mix(in srgb,var(--line2) 60%,var(--card2)) 50%, var(--card2) 75%); background-size:200% 100%; animation:cabShimmer 1.4s linear infinite; border-radius:6px; } @keyframes cabShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Карточка «Путь к офферу» залита градиентом, и скелет на токенах поверхности на ней почти не виден. Здесь он строится от прозрачного белого — так он читается на любой заливке и в обеих темах. */ .offer .sk{ background:linear-gradient(90deg, rgba(255,255,255,.10) 25%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 75%); background-size:200% 100%; } [data-theme="light"] .offer .sk{ background:linear-gradient(90deg, rgba(20,26,63,.07) 25%, rgba(20,26,63,.15) 50%, rgba(20,26,63,.07) 75%); background-size:200% 100%; } /* Текстовые строки и мелкие фигуры — общие кирпичи для всех скелетов ниже. */ .sk-l{height:12px} .sk-l.w20{width:20%} .sk-l.w30{width:30%} .sk-l.w45{width:45%} .sk-l.w55{width:55%} .sk-l.w70{width:70%} .sk-l.w85{width:85%} .sk-pill{border-radius:999px} /* Фигуры справа — общие для нескольких силуэтов: тумблер 46×26 (.res .sw, .row .sw в автопилоте) и круглая кнопка-иконка 34×34 (.iconb в списке уведомлений). Заведены один раз, чтобы .sk-row мог собрать любой из них. */ .sk-sw{width:46px;height:26px;border-radius:20px;flex:none} .sk-ic{width:34px;height:34px;border-radius:9px;flex:none} /* .res — карточка резюме: аватар 42×42, две строки, тумблер 46×26. Размеры взяты 1:1 из .res .av / .res .sw, чтобы карточка не «подрастала», когда скелет сменяется настоящим содержимым. */ .sk-res{background:var(--card);border:1px solid var(--line);border-radius:var(--r); margin-bottom:12px;padding:16px 18px;display:flex;align-items:center;gap:14px} .sk-res .sk-av{width:42px;height:42px;border-radius:var(--r-sm);flex:none} .sk-res .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} /* .row — плоская строка: заголовок + подпись слева, произвольная фигура справа (тумблер автопилота, две кнопки-иконки уведомлений — то, что реально стоит в этом месте у настоящей строки). Верхняя граница как у настоящей строки, у первой её нет. */ .sk-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line)} .sk-row:first-child{border-top:none} .sk-row .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .sk-row .sk-act{margin-left:auto;display:flex;gap:8px;flex:none} /* .app — строка отклика: логотип-квадрат 38×38, заголовок + метаданные слева, чип статуса и дата справа — как .app .co / .app .rr. */ .sk-app{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid var(--line)} .sk-app:first-child{border-top:none} .sk-app .sk-logo{width:38px;height:38px;border-radius:var(--r-xs);flex:none} .sk-app .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .sk-app .sk-side{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none} .sk-app .sk-chip{width:64px;height:20px} .sk-app .sk-date{width:46px;height:10px} /* .offer — карточка «Путь к офферу»: рубрика, крупный заголовок, абзац, затем сама шкала прогресса (.track) и подписи-отметки под ней (.marks). Раньше здесь стояли две тонкие строки — заметно короче настоящей карточки, и она «подрастала» на глазах, когда приходили данные. Теперь скелет повторяет все пять уровней настоящей карточки, включая шкалу. */ .offer .sk-eb{height:10px;width:96px;margin-bottom:12px} .offer .sk-big{height:27px;width:72%;margin-bottom:10px;border-radius:8px} .offer .sk-p{height:13px;margin-bottom:8px} .offer .sk-p.w90{width:90%} .offer .sk-p.w60{width:60%} .offer .sk-track{height:12px;border-radius:20px;margin-top:18px} .offer .sk-marks{display:flex;justify-content:space-between;margin-top:10px;gap:10px} .offer .sk-marks .sk{height:10px;width:28px;flex:none} /* .card.plan — статус подписки: иконка 40×40 + заголовок/подзаголовок сверху, ниже строки .sline (подпись слева, значение справа, разделены сверху). */ .sk-plan .sk-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px} .sk-plan .sk-hd .sk-ic{width:40px;height:40px;border-radius:var(--r-xs);flex:none} .sk-plan .sk-hd .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .sk-sline{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line)} .sk-sline:first-of-type{border-top:none} .sk-sline .sk{height:12px} /* .intg — строка интеграции (Telegram, автоподнятие): иконка 40×40 + заголовок и подзаголовок. Разница с .row в том, что заголовок и подпись здесь ближе друг к другу и иконка квадратная, не круглая — как в самом .intg. */ .sk-intg{display:flex;align-items:center;gap:14px} .sk-intg .sk-ic{width:40px;height:40px;border-radius:var(--r-xs);flex:none} .sk-intg .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} /* Мерцание несёт смысл «идёт работа», поэтому не убираем его совсем — замедляем: застывший серый прямоугольник читается как поломка. */ @media(prefers-reduced-motion:reduce){ .sk{animation-duration:3.4s} } /* ── Появление разделов кабинета ───────────────────────────────────────────── Один механизм на все разделы сразу — и на первую загрузку страницы, и на переход внутри кабинета: shell.js подменяет #cabPage целиком, узлы каждый раз новые, поэтому анимация проигрывается заново сама, без единой строчки JS. Появление привязано к СОДЕРЖИМОМУ, а не к вставке узла. Разметка раздела — это пустые коробки, которые скрипт наполняет уже после ответа API, и анимация «по вставке» играла бы на пустоте: сначала плавно проявился бы воздух, а потом рывком выпало бы содержимое — ровно то, от чего уходим. Отсюда :not(:empty): правило начинает действовать в тот момент, когда в коробке появилось содержимое, тогда же стартует и анимация. Почему не по-старому (класс .bill-loading, который снимал JS): этот способ уже подвёл на разделе резюме. Не дошёл enter() до снятия класса — упал запрос, выбросило исключение — и раздел оставался пустым НАВСЕГДА. Прятать содержимое так, чтобы его показ зависел от JS, нельзя. Здесь худшее, что может случиться, — раздел появится без анимации. */ @keyframes cabReveal{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } .sec > *:not(:empty){ animation:cabReveal .38s var(--ease, cubic-bezier(.22,1,.36,1)) both; } /* Лесенка: сперва заголовок, следом карточки. Задержки идут ПОСЛЕ краткой записи animation выше — она сбрасывает animation-delay в ноль. */ .sec > :nth-child(1){animation-delay:0s} .sec > :nth-child(2){animation-delay:.04s} .sec > :nth-child(3){animation-delay:.07s} .sec > :nth-child(4){animation-delay:.1s} .sec > :nth-child(5){animation-delay:.13s} .sec > :nth-child(n+6){animation-delay:.16s} /* Смена скелета на настоящее содержимое — второй, отдельный переход. Без него оставалась ровно та резкость, на которую жаловались: блок плавно проявлялся СО СКЕЛЕТОМ внутри, а дальше скрипт молча подменял innerHTML, и содержимое возникало мгновенным щелчком. Правило :not(:empty) этого момента не видит — контейнер как был непустым, так и остался. Ловим момент через :has(): пока внутри есть .sk, играет появление блока выше; исчез — селектор начинает подходить, меняется имя анимации, и браузер запускает её заново. Именно поэтому анимация отдельная, а не та же самая: одинаковое значение свойства animation браузер считает неизменным и ничего не перезапускает. Правило висит на атрибуте data-sk, которым в разметке помечены ровно те контейнеры, где скелет действительно лежит. Иначе оно перехватило бы и блоки без скелета (заголовок раздела, сноски) — им досталась бы простая прозрачность вместо лестничного появления выше. Здесь только прозрачность, без сдвига: размеры уже заняты скелетом, и двигать готовую раскладку значило бы вернуть тот же рывок с другой стороны. Если :has() не поддерживается, правило целиком отбрасывается — переход пропадает, содержимое просто появляется. Это ровно то, что было до сих пор, так что терять нечего. */ @keyframes cabSwap{from{opacity:0}to{opacity:1}} .sec [data-sk]:not(:has(.sk)){ animation:cabSwap .34s var(--ease, cubic-bezier(.22,1,.36,1)) both; } #billOneTimePlans.bill-expand{ animation:cabReveal .42s var(--ease, cubic-bezier(.22,1,.36,1)) both; transform-origin:top center; } @media(prefers-reduced-motion:reduce){ .reveal{animation:none} .toast{transition:none} .sec > *:not(:empty), .sec [data-sk]:not(:has(.sk)), #billOneTimePlans.bill-expand{animation:none} } /* ── Обновление списка резюме: видимая реакция на нажатие ────────────────── Обновление стало быстрым (список приходит за ~600 мс одним запросом вместо загрузки страницы браузером), но раньше нажатие вообще ничем не отзывалось: кнопка молча блокировалась, и человек не понимал, сработало ли. Крутим ту же иконку, что уже стоит в кнопке, с лёгким смазыванием — оно создаёт ощущение скорости и прячет ступенчатость на низких частотах. */ .btn.is-busy { pointer-events: none; opacity: .75; } .btn.is-busy > svg { animation: cab-spin .6s cubic-bezier(.45, .05, .55, .95) infinite; transform-origin: 50% 50%; } @keyframes cab-spin { 0% { transform: rotate(0deg); filter: blur(0); } 45% { filter: blur(.6px); } 100% { transform: rotate(360deg); filter: blur(0); } } /* Тем, кто просил меньше движения, отдаём медленный оборот без смазывания: совсем убирать анимацию нельзя — она здесь несёт смысл «идёт работа». */ @media (prefers-reduced-motion: reduce) { .btn.is-busy > svg { animation: cab-spin-plain 2.4s linear infinite; } @keyframes cab-spin-plain { to { transform: rotate(360deg); } } } /* ── Раздел «Резюме»: мягкое появление и признак фоновой сверки ────────────── Общее появление раздела делает правило .sec > *:not(:empty) выше. Здесь — только то, что есть лишь у резюме: подпись о фоновой сверке и перерисовка списка после неё. Без них резюме, удалённое на hh, просто исчезало на глазах через секунду после отрисовки, без всякого объяснения. */ /* Подпись «сверяем с hh.ru» — тихая, без блокировки: страница уже работает, просто данные могут ещё уточниться. */ .res-hint{ display:flex;align-items:center;gap:8px; font-size:13px;color:var(--muted);margin:0 0 12px; animation:cabReveal .28s var(--ease, cubic-bezier(.22,1,.36,1)) both; } .res-hint-dot{ width:7px;height:7px;border-radius:50%;background:var(--purple); animation:res-pulse 1.1s ease-in-out infinite; } @keyframes res-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} /* Список после сверки перерисовывается — показываем это переходом, а не мгновенной подменой. */ #resumeList.res-updated{ animation:cabReveal .32s var(--ease, cubic-bezier(.22,1,.36,1)) both } @media(prefers-reduced-motion:reduce){ #resumeList.res-updated{ animation:none } .res-hint-dot{ animation-duration:2.4s } } /* Пометка про поисковый профиль в карточке резюме. Цвета — от токенов темы, через color-mix, чтобы держались и в светлой, и в тёмной без второго набора. */ .rprof{ display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px; font-size:11px;font-weight:600;white-space:nowrap;vertical-align:1px; } .rprof.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)} .rprof.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}