/* ========================================================================== QuickSell — landing styles 1. Tokens & base 6. Problem 11. Transformation 2. Nav 7. Success 12. Pricing 3. Hero 8. Guide 13. Final CTA 4. Dashboard 9. Plan 14. Responsive 5. Sections 10. Agreement 15. Motion layer 16. Documents Слой движения (15) включается классом .anim на — его ставит инлайн-скрипт в index.html. Нет .anim — страница статична. Страницы документов (16) скрипт не подключают: чистый HTML + CSS. ========================================================================== */ /* ============ 1. TOKENS & BASE ============ */ *{box-sizing:border-box;margin:0;padding:0;} :root{ --bg:#1F1F1F; --card:#fff; --card-border:rgba(0,0,0,0.07); --text:#1a1a1a; --text2:#666; --text3:#aaa; --white:rgba(255,255,255,0.92); --white2:rgba(255,255,255,0.55); --white3:rgba(255,255,255,0.32); --purple50:#EEEDFE;--purple200:#AFA9EC;--purple400:#7F77DD;--purple600:#534AB7;--purple800:#3C3489; --teal50:#E1F5EE;--teal400:#1D9E75;--teal600:#0F6E56;--teal800:#085041; --coral50:#FAECE7;--coral400:#D85A30;--coral600:#993C1D;--coral800:#712B13; --amber50:#FAEEDA;--amber600:#854F0B; --red400:#E24B4A; --radius:16px; } html{scroll-behavior:smooth;} body{font-family:'Geist',system-ui,sans-serif;background:var(--bg);color:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;} .wrap{max-width:1080px;margin:0 auto;padding:0 24px;} /* ============ 2. NAV ============ */ nav{position:sticky;top:0;z-index:100;background:rgba(31,31,31,0.85);backdrop-filter:blur(12px);border-bottom:0.5px solid rgba(255,255,255,0.07);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;} .logo{display:flex;align-items:center;gap:9px;} .logo svg{width:19px;height:22px;flex-shrink:0;} .logo-text{font-size:15px;font-weight:600;color:#fff;letter-spacing:-0.01em;} .nav-links{display:flex;align-items:center;gap:22px;} .nav-link{font-size:13.5px;color:var(--white2);text-decoration:none;transition:color 0.15s;} .nav-link:hover{color:#fff;} .nav-cta{display:flex;gap:10px;align-items:center;} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:500;padding:9px 18px;border-radius:10px;border:none;cursor:pointer;text-decoration:none;transition:all 0.18s;} .btn-primary{background:var(--purple400);color:#fff;} .btn-primary:hover{background:var(--purple600);} .btn-ghost{background:transparent;color:var(--white2);border:0.5px solid rgba(255,255,255,0.15);} .btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,0.35);} .btn-lg{font-size:15px;padding:13px 26px;border-radius:12px;} .btn:focus-visible{outline:2px solid var(--purple200);outline-offset:2px;} /* ============ 3. HERO ============ */ .hero{padding:88px 0 40px;text-align:center;position:relative;} .hero-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:900px;height:500px;background:radial-gradient(ellipse at center,rgba(127,119,221,0.14),transparent 65%);pointer-events:none;} .hero h1{font-size:clamp(32px,5.5vw,56px);font-weight:600;letter-spacing:-0.03em;line-height:1.12;color:#fff;max-width:760px;margin:0 auto;position:relative;} .hero h1 .accent{color:var(--purple200);} .hero .sub{font-size:clamp(15px,2vw,18px);color:var(--white2);max-width:560px;margin:20px auto 0;font-weight:300;position:relative;} .hero-cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap;position:relative;} .hero-note{font-size:12.5px;color:var(--white3);margin-top:14px;position:relative;} /* ============ 4. DASHBOARD (Прибыль и расходы) ============ */ .door{margin:56px auto 0;max-width:820px;position:relative;} .door-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:128%;background:radial-gradient(ellipse at center,rgba(127,119,221,0.3),transparent 66%);pointer-events:none;} .mock{position:relative;display:block;background:#F7F6F3;border-radius:16px;box-shadow:0 40px 90px -24px rgba(0,0,0,0.58),0 0 0 0.5px rgba(255,255,255,0.1);color:var(--text);text-align:left;overflow:hidden;font-size:12px;} .mock-topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:0.5px solid rgba(0,0,0,0.07);padding:11px 16px;} .mtb-left{display:flex;align-items:center;gap:9px;} .mtb-title{font-size:13px;font-weight:600;} .mtb-store{font-size:10.5px;padding:3px 7px;background:var(--teal50);border-radius:5px;color:var(--teal600);} .mtb-right{display:flex;gap:4px;} .mtb-chip{padding:4px 11px;font-size:11px;border-radius:6px;background:transparent;color:#888;} .mtb-chip.on{background:#1F1F1F;color:#fff;font-weight:500;} .mock-body{padding:14px 16px 16px;} /* KPI row — акцент на прибыли */ .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px;} .kpi{background:#fff;border-radius:10px;border:0.5px solid rgba(0,0,0,0.07);padding:11px 13px;} .kpi.hero-kpi{background:linear-gradient(135deg,#F3F1FE,#EAE8FC);border-color:var(--purple200);box-shadow:0 6px 16px -8px rgba(127,119,221,0.4);} .kpi .kl{font-size:9.5px;color:#aaa;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;} .kpi.hero-kpi .kl{color:var(--purple600);display:flex;align-items:center;gap:5px;} .kpi .kv{font-size:17px;font-weight:600;letter-spacing:-0.02em;line-height:1;color:#1a1a1a;} .kpi .kv.coral{color:var(--coral600);} .kpi .kv.purple{color:var(--purple600);} .kpi.hero-kpi .kv{font-size:22px;color:var(--purple800);} .kpi .kd{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap;} .chip{font-size:10px;padding:1px 6px;border-radius:4px;} .chip.up{background:var(--teal50);color:var(--teal800);} .chip.dn{background:var(--coral50);color:var(--coral800);} .kmut{font-size:9.5px;color:#ccc;} .kbar{height:4px;border-radius:2px;background:#EDEBF9;overflow:hidden;margin-top:8px;} .kbar>div{height:100%;background:var(--purple400);border-radius:2px;} /* row 2: chart + expenses */ .mock-row2{display:grid;grid-template-columns:1.35fr 1fr;gap:9px;margin-bottom:10px;} .mc{background:#fff;border-radius:10px;border:0.5px solid rgba(0,0,0,0.07);padding:13px 15px;} .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .mc-title{font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.07em;color:#aaa;} .legend{display:flex;gap:9px;font-size:10px;color:#888;} .legend span{display:flex;align-items:center;gap:4px;} .dot{width:8px;height:8px;border-radius:2px;display:inline-block;} /* bar chart — общая базовая линия */ .bars{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;height:132px;border-bottom:0.5px solid rgba(0,0,0,0.08);} .bar-group{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;} .bar-pair{display:flex;align-items:flex-end;gap:5px;height:100%;width:100%;justify-content:center;} .bar{width:20px;border-radius:4px 4px 0 0;min-height:3px;} .bar.rev{background:#AFA9EC;} .bar.prof{background:var(--teal600);} .bar-lbl{font-size:9.5px;color:#bbb;margin-top:6px;} .exp-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:0.5px solid rgba(0,0,0,0.05);} .exp-row .sw{width:7px;height:7px;border-radius:1.5px;flex-shrink:0;} .exp-row .en{font-size:11px;color:#555;flex:1;} .exp-row .et{width:48px;height:4px;background:#f0f0f0;border-radius:2px;overflow:hidden;flex-shrink:0;} .exp-row .et>div{height:100%;border-radius:2px;} .exp-row .ep{font-size:9.5px;color:#aaa;width:26px;text-align:right;} .exp-row .ev{font-size:11px;font-weight:500;color:#1a1a1a;width:54px;text-align:right;} .exp-total{display:flex;justify-content:space-between;padding:8px 0 0;border-top:0.5px solid rgba(0,0,0,0.1);margin-top:3px;} .exp-total .l{font-size:11.5px;font-weight:500;color:#1a1a1a;} .exp-total .v{font-size:11.5px;font-weight:500;color:var(--coral600);} /* insights */ .insights{display:grid;grid-template-columns:1fr 1fr;gap:9px;} .ins{background:#fff;border-radius:10px;border:0.5px solid rgba(0,0,0,0.07);padding:12px 14px;display:flex;align-items:center;gap:11px;} .ins-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .ins-ico svg{width:16px;height:16px;} .ins-body{flex:1;min-width:0;} .ins-title{font-size:12px;font-weight:500;color:#1a1a1a;line-height:1.3;} .ins-sub{font-size:10.5px;color:#999;margin-top:2px;} .ins-btn{font-size:10.5px;color:var(--purple400);font-weight:500;white-space:nowrap;flex-shrink:0;} /* ============ 5. SECTIONS ============ */ section{padding:88px 0;position:relative;} .eyebrow{font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;color:var(--purple200);margin-bottom:14px;} h2{font-size:clamp(26px,3.6vw,38px);font-weight:600;letter-spacing:-0.025em;line-height:1.15;color:#fff;max-width:640px;} .section-sub{font-size:16px;color:var(--white2);max-width:540px;margin-top:14px;font-weight:300;} .glow-spot{position:absolute;width:520px;height:380px;background:radial-gradient(ellipse at center,rgba(127,119,221,0.10),transparent 68%);pointer-events:none;} /* ============ 6. PROBLEM ============ */ .problem{border-top:0.5px solid rgba(255,255,255,0.07);} .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;position:relative;} .p-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:24px;} .p-card .ico{width:36px;height:36px;border-radius:10px;background:rgba(216,90,48,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .p-card .ico svg{width:18px;height:18px;stroke:#F0997B;} .p-card h3{font-size:16px;font-weight:600;color:#fff;letter-spacing:-0.01em;} .p-card p{font-size:14px;color:var(--white2);margin-top:8px;font-weight:300;} /* ============ 7. SUCCESS ============ */ .success-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;position:relative;} .s-card{background:var(--card);border-radius:var(--radius);padding:26px;color:var(--text);} .s-card .ico{width:36px;height:36px;border-radius:10px;background:var(--purple50);display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .s-card .ico svg{width:18px;height:18px;stroke:var(--purple600);} .s-card h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;} .s-card p{font-size:14px;color:var(--text2);margin-top:8px;} /* ============ 8. GUIDE ============ */ .guide{border-top:0.5px solid rgba(255,255,255,0.07);} .guide-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;} .quote{background:rgba(127,119,221,0.08);border:0.5px solid rgba(127,119,221,0.25);border-radius:var(--radius);padding:32px;position:relative;} .quote p{font-size:17px;line-height:1.6;color:var(--white);font-weight:300;} .quote .who{display:flex;align-items:center;gap:12px;margin-top:22px;} .quote .ava{width:40px;height:40px;border-radius:50%;background:var(--purple400);display:flex;align-items:center;justify-content:center;} .quote .ava svg{width:16px;height:18px;} .quote .name{font-size:13.5px;font-weight:500;color:#fff;} .quote .role{font-size:12px;color:var(--white3);} /* ============ 9. PLAN ============ */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;position:relative;} .step{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:24px;} .step .n{font-size:12px;font-weight:600;color:var(--purple200);letter-spacing:0.08em;} .step h3{font-size:15.5px;font-weight:600;color:#fff;margin-top:10px;letter-spacing:-0.01em;} .step p{font-size:13.5px;color:var(--white2);margin-top:6px;font-weight:300;} .plan-cta{text-align:center;margin-top:40px;} /* ============ 10. AGREEMENT ============ */ .agree{border-top:0.5px solid rgba(255,255,255,0.07);text-align:center;} .agree h2{margin:0 auto;} .agree-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;text-align:left;position:relative;} .a-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:var(--radius);padding:24px;} .a-card .check{width:26px;height:26px;border-radius:50%;background:rgba(29,158,117,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .a-card .check svg{width:13px;height:13px;stroke:#5DCAA5;stroke-width:3;} .a-card h3{font-size:15px;font-weight:600;color:#fff;} .a-card p{font-size:13.5px;color:var(--white2);margin-top:6px;font-weight:300;} /* ============ 11. TRANSFORMATION ============ */ .transform-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch;margin-top:44px;position:relative;} .t-card{border-radius:var(--radius);padding:30px;} .t-card.from{background:rgba(226,75,74,0.07);border:0.5px solid rgba(226,75,74,0.22);} .t-card.to{background:rgba(29,158,117,0.08);border:0.5px solid rgba(29,158,117,0.28);} .t-card .tag{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;} .t-card.from .tag{color:#F0997B;} .t-card.to .tag{color:#5DCAA5;} .t-card p{font-size:17px;color:var(--white);margin-top:12px;font-weight:400;line-height:1.5;} .t-arrow{display:flex;align-items:center;justify-content:center;} .t-arrow svg{width:28px;height:28px;stroke:var(--purple200);} /* ============ 12. PRICING ============ */ .pricing{border-top:0.5px solid rgba(255,255,255,0.07);text-align:center;} .pricing h2{margin:0 auto;} .tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:44px auto 0;text-align:left;align-items:start;} .tier{background:var(--card);border-radius:18px;padding:30px;color:var(--text);position:relative;display:flex;flex-direction:column;height:100%;} .tier-pro{background:linear-gradient(180deg,#fff,#FAF9FF);box-shadow:0 30px 80px -30px rgba(127,119,221,0.5);outline:1.5px solid var(--purple400);} .tier-flag{position:absolute;top:-11px;left:30px;background:var(--purple400);color:#fff;font-size:11px;font-weight:500;padding:4px 12px;border-radius:7px;letter-spacing:0.02em;} .tier-name{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.08em;} .tier-pro .tier-name{color:var(--purple600);} .tier-price{font-size:38px;font-weight:600;letter-spacing:-0.03em;margin-top:10px;line-height:1;} .tier-price .per{font-size:14px;color:var(--text3);font-weight:400;letter-spacing:0;} .tier-desc{font-size:13.5px;color:var(--text2);margin-top:10px;} .tier-list{list-style:none;margin:22px 0;padding:0;flex:1;} .tier-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text);padding:6px 0;} .tier-list li svg{width:15px;height:15px;stroke:var(--teal400);stroke-width:2.5;flex-shrink:0;margin-top:3px;} .tier-list li.pro-plus{font-weight:500;} .tier-list li.pro-plus svg{stroke:var(--purple400);} .tier-btn{width:100%;} .tier-note{font-size:12px;color:var(--text3);margin-top:12px;text-align:center;} /* ============ 13. FINAL CTA ============ */ .final{text-align:center;padding-bottom:110px;} .final h2{margin:0 auto;position:relative;} .final .hero-cta{margin-top:30px;} footer{border-top:0.5px solid rgba(255,255,255,0.07);padding:28px 0;} .foot{font-size:12.5px;color:var(--white3);} .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding-bottom:24px;flex-wrap:wrap;} .foot-brand{display:flex;flex-direction:column;gap:10px;} .foot-tag{font-size:12.5px;color:var(--white3);} .foot-links{display:flex;flex-direction:column;gap:9px;text-align:right;border:none;} .foot-links a{font-size:13px;color:var(--white2);text-decoration:none;border:none;transition:color .15s;} .foot-links a:hover{color:#fff;} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;margin-top:24px;border-top:0.5px solid rgba(255,255,255,0.07);flex-wrap:wrap;} .foot-copy{font-size:12.5px;color:var(--white3);} .foot-pay{display:flex;gap:8px;align-items:center;} .foot-pay svg{border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.25);} @media(max-width:560px){ .foot-links{text-align:left;} .foot-top{flex-direction:column;gap:20px;} } /* ============ 14. RESPONSIVE ============ */ @media(max-width:840px){ .problem-grid,.success-grid,.agree-grid{grid-template-columns:1fr;} .steps{grid-template-columns:repeat(2,1fr);} .guide-inner{grid-template-columns:1fr;gap:32px;} .transform-grid{grid-template-columns:1fr;} .t-arrow{transform:rotate(90deg);} .kpi-row{grid-template-columns:1fr 1fr;} .mock-row2{grid-template-columns:1fr;} .insights{grid-template-columns:1fr;} .tiers{grid-template-columns:1fr;max-width:420px;} section{padding:64px 0;} .hero{padding:56px 0 24px;} .nav-links{display:none;} } @media(max-width:520px){ .steps{grid-template-columns:1fr;} .nav-cta .btn-ghost{display:none;} .kpi-row{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} /* ============================================================ 15. MOTION LAYER Всё, что ниже, включается только классом .anim на (его ставит инлайн-скрипт, если пользователь не просил prefers-reduced-motion: reduce). Разметка и дизайн не меняются. ============================================================ */ /* ---- скрытые состояния (:where → нулевая специфичность) ---- */ html.anim :where(.hero h1,.hero .sub,.hero-cta,.hero-note,.door,.eyebrow,h2,.section-sub, .p-card,.s-card,.step,.a-card,.t-card,.quote,.tier,.plan-cta,.foot-top,.foot-bottom){ opacity:0;transform:translateY(22px); } html.anim :where(.t-arrow){opacity:0;} html.anim :where(.hero h1,.hero .sub,h2){filter:blur(9px);transform:translateY(26px);} html.anim :where(.door){transform:translateY(40px) scale(.97);} html.anim .is-in{ opacity:1;transform:none;filter:blur(0); transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0s), transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s), filter .8s cubic-bezier(.22,.61,.36,1) var(--d,0s), translate .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, background-color .35s ease, border-color .35s ease; } /* стрелка на мобильных развёрнута — сохраняем поворот после появления */ @media(max-width:840px){html.anim .t-arrow.is-in{transform:rotate(90deg);}} /* ---- дашборд собирается по частям ---- */ html.anim :where(.mock .kpi,.mock .mc,.mock .ins){opacity:0;transform:translateY(12px);} html.anim :where(.mock .chip,.mock .kmut,.mock .ins-btn){opacity:0;} html.anim :where(.mock .bar){transform:scaleY(0);transform-origin:bottom center;} html.anim :where(.mock .et>div,.mock .kbar>div){transform:scaleX(0);transform-origin:left center;} html.anim .mock.is-drawn .kpi, html.anim .mock.is-drawn .mc, html.anim .mock.is-drawn .ins{ opacity:1;transform:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), translate .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; } html.anim .mock.is-drawn .kpi:nth-child(1){transition-delay:.02s} html.anim .mock.is-drawn .kpi:nth-child(2){transition-delay:.09s} html.anim .mock.is-drawn .kpi:nth-child(3){transition-delay:.16s} html.anim .mock.is-drawn .kpi:nth-child(4){transition-delay:.23s} html.anim .mock.is-drawn .mock-row2 .mc:nth-child(1){transition-delay:.30s} html.anim .mock.is-drawn .mock-row2 .mc:nth-child(2){transition-delay:.37s} html.anim .mock.is-drawn .insights .ins:nth-child(1){transition-delay:.64s} html.anim .mock.is-drawn .insights .ins:nth-child(2){transition-delay:.72s} html.anim .mock.is-drawn .chip{opacity:1;transition:opacity .5s ease .45s} html.anim .mock.is-drawn .kmut{opacity:1;transition:opacity .5s ease .52s} html.anim .mock.is-drawn .ins-btn{opacity:1;transition:opacity .5s ease .85s,translate .3s cubic-bezier(.22,.61,.36,1)} /* столбики графика растут от базовой линии */ html.anim .mock.is-drawn .bar{transform:scaleY(1);transition:transform .85s cubic-bezier(.22,.61,.36,1);} html.anim .mock.is-drawn .bar-group:nth-child(1) .bar{transition-delay:.42s} html.anim .mock.is-drawn .bar-group:nth-child(2) .bar{transition-delay:.48s} html.anim .mock.is-drawn .bar-group:nth-child(3) .bar{transition-delay:.54s} html.anim .mock.is-drawn .bar-group:nth-child(4) .bar{transition-delay:.60s} html.anim .mock.is-drawn .bar-group:nth-child(5) .bar{transition-delay:.66s} /* полоски расходов заполняются слева направо */ html.anim .mock.is-drawn .et>div{transform:scaleX(1);transition:transform .8s cubic-bezier(.22,.61,.36,1);} html.anim .mock.is-drawn .exp-row:nth-child(2) .et>div{transition-delay:.44s} html.anim .mock.is-drawn .exp-row:nth-child(3) .et>div{transition-delay:.50s} html.anim .mock.is-drawn .exp-row:nth-child(4) .et>div{transition-delay:.56s} html.anim .mock.is-drawn .exp-row:nth-child(5) .et>div{transition-delay:.62s} html.anim .mock.is-drawn .exp-row:nth-child(6) .et>div{transition-delay:.68s} html.anim .mock.is-drawn .kbar>div{transform:scaleX(1);transition:transform .9s cubic-bezier(.22,.61,.36,1) .34s;} /* мягкое «дыхание» карточки прибыли */ @keyframes kpiPulse{ 0%,100%{box-shadow:0 6px 16px -8px rgba(127,119,221,0.40)} 50%{box-shadow:0 12px 28px -8px rgba(127,119,221,0.72)} } html.anim .mock.is-drawn .kpi.hero-kpi{animation:kpiPulse 3.8s ease-in-out 1.4s infinite;} /* лёгкий 3D-наклон дашборда за курсором */ html.anim .mock{transition:transform .35s cubic-bezier(.22,.61,.36,1);will-change:transform;} /* ---- фоновые свечения ---- */ @keyframes glowA{ 0%,100%{opacity:.75;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.08)} } @keyframes glowB{ 0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} } html.anim .hero-glow{animation:glowA 10s ease-in-out infinite;} html.anim .glow-spot{animation:glowA 13s ease-in-out infinite;} html.anim .door-glow{animation:glowB 8s ease-in-out infinite;} /* ---- навигация ---- */ @keyframes navIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}} html.anim body>nav{animation:navIn .7s cubic-bezier(.22,.61,.36,1) both;} body>nav{transition:background .35s ease,box-shadow .35s ease;} body>nav.scrolled{background:rgba(31,31,31,0.94);box-shadow:0 10px 30px -18px rgba(0,0,0,0.9);} html.anim .logo svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1);} html.anim .logo:hover svg{transform:rotate(180deg) scale(1.12);} /* ---- кнопки: подъём + блик ---- */ .btn{position:relative;overflow:hidden;} html.anim .btn::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,0.22) 50%,transparent 68%); transform:translateX(-130%); transition:transform .75s cubic-bezier(.22,.61,.36,1); } html.anim .btn:hover::after{transform:translateX(130%);} html.anim .btn:hover{translate:0 -2px;} html.anim .btn:active{translate:0 0;} html.anim .btn-primary:hover{box-shadow:0 12px 26px -10px rgba(127,119,221,0.8);} /* ---- карточки: ховер ---- */ html.anim .p-card:hover,html.anim .step:hover,html.anim .a-card:hover{ translate:0 -4px;background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.16);box-shadow:0 20px 40px -26px rgba(0,0,0,0.9); } html.anim .s-card:hover{translate:0 -4px;box-shadow:0 24px 48px -24px rgba(0,0,0,0.55);} html.anim .tier:hover{translate:0 -4px;} html.anim .quote{transition:border-color .35s ease,background-color .35s ease;} html.anim .quote:hover{border-color:rgba(127,119,221,0.45);background:rgba(127,119,221,0.11);} html.anim .ins{transition:translate .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;} html.anim .ins:hover{translate:0 -2px;box-shadow:0 10px 22px -14px rgba(0,0,0,0.45);} html.anim .ins:hover .ins-btn{translate:4px 0;} html.anim .p-card .ico svg,html.anim .s-card .ico svg{transition:transform .45s cubic-bezier(.34,1.56,.64,1);} html.anim .p-card:hover .ico svg,html.anim .s-card:hover .ico svg{transform:scale(1.14);} /* ---- стрелка «было → стало» ---- */ @keyframes nudge{0%,100%{translate:0 0}50%{translate:7px 0}} html.anim .t-arrow.is-in svg{animation:nudge 1.9s ease-in-out infinite;} /* ---- галочки в «обещании»: прорисовка ---- */ html.anim :where(.a-card .check svg path){stroke-dasharray:24;stroke-dashoffset:24;} html.anim .a-card.is-in .check svg path{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease .35s;} /* ---- тарифы ---- */ html.anim :where(.tier-flag){opacity:0;transform:translateY(-8px) scale(.9);} html.anim .tier.is-in .tier-flag{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.34,1.56,.64,1) .35s,transform .5s cubic-bezier(.34,1.56,.64,1) .35s;} html.anim :where(.tier-list li){opacity:0;transform:translateX(-8px);} html.anim .tier.is-in .tier-list li{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease;} html.anim .tier.is-in .tier-list li:nth-child(1){transition-delay:.24s} html.anim .tier.is-in .tier-list li:nth-child(2){transition-delay:.31s} html.anim .tier.is-in .tier-list li:nth-child(3){transition-delay:.38s} html.anim .tier.is-in .tier-list li:nth-child(4){transition-delay:.45s} html.anim .tier.is-in .tier-list li:nth-child(5){transition-delay:.52s} html.anim .tier.is-in .tier-list li:nth-child(6){transition-delay:.59s} @keyframes proGlow{ 0%,100%{box-shadow:0 30px 80px -30px rgba(127,119,221,0.50)} 50%{box-shadow:0 34px 92px -28px rgba(127,119,221,0.78)} } html.anim .tier-pro.is-in{animation:proGlow 5.5s ease-in-out 1.2s infinite;} /* ---- блик по акценту в заголовке ---- */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ /* крайние позиции дают ровный --purple200, блик проходит только между ними */ @keyframes shine{0%{background-position:0% 0}55%,100%{background-position:100% 0}} html.anim .hero h1 .accent{ background-image:linear-gradient(100deg,var(--purple200) 42%,#F2F0FF 50%,var(--purple200) 58%); background-size:300% 100%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:shine 7s ease-in-out 1.4s infinite; } } /* ---- ссылки в футере ---- */ html.anim .foot-links a{transition:color .15s ease,translate .3s cubic-bezier(.22,.61,.36,1);} html.anim .foot-links a:hover{translate:2px 0;} /* ============ 16. DOCUMENTS ============ */ /* Страницы оферты / политики / процедуры оплаты. Скрипт не подключается, поэтому слой .anim здесь не действует и текст виден всегда. */ a.logo{text-decoration:none;color:inherit;} .doc{max-width:760px;padding-top:52px;padding-bottom:88px;} .doc-head{border-bottom:0.5px solid rgba(255,255,255,0.1);padding-bottom:26px;margin-bottom:34px;} .doc h1{font-size:clamp(23px,3.2vw,33px);font-weight:600;letter-spacing:-0.02em;line-height:1.22;color:#fff;} .doc-sub{font-size:14.5px;color:var(--white2);margin-top:9px;font-weight:300;} .doc-actions{margin-top:20px;} .doc-actions a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500; color:var(--purple200);text-decoration:none;padding:8px 15px;border-radius:9px; background:rgba(127,119,221,0.09);border:0.5px solid rgba(127,119,221,0.32);transition:all 0.18s;} .doc-actions a:hover{background:rgba(127,119,221,0.17);border-color:rgba(127,119,221,0.6);color:#fff;} .doc h2{font-size:16.5px;font-weight:600;color:#fff;letter-spacing:-0.005em;line-height:1.4; max-width:none;margin:36px 0 13px;} .doc p{font-size:15px;line-height:1.75;color:var(--white2);font-weight:300;margin-bottom:13px;} .doc ul{margin:0 0 15px;padding-left:19px;} .doc li{font-size:15px;line-height:1.75;color:var(--white2);font-weight:300;margin-bottom:7px;padding-left:3px;} .doc li::marker{color:var(--purple200);} .doc-field{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:9px;} .doc-field span{color:var(--white3);min-width:200px;flex-shrink:0;} .foot-links a[aria-current]{color:#fff;} /* на лендинге ghost-кнопка на мобильных скрыта, но в документах это единственная кнопка возврата — возвращаем её */ @media(max-width:520px){.nav-cta-doc .btn-ghost{display:inline-flex;}} @media(max-width:560px){ .doc{padding-top:36px;padding-bottom:60px;} .doc-field span{min-width:0;width:100%;margin-bottom:-4px;} }