/* Дизайн-система сайта Устьянцев.рф (Э1). Токены — те же, что в лендинге 03_BUILD/index.html: единый стиль проекта. Палитра: графит/тёмно-синий + белый/светло-серый + сдержанный фиолетовый акцент. */ :root{ --ink:#14161C; --muted:#5C6373; --soft:#828A99; --paper:#FFFFFF; --mist:#F5F6F8; --mist2:#EEF0F4; --navy:#171A24; --navy2:#1F2331; --line:#E6E8EC; --line-d:#2C3140; --violet:#5B4CE0; --violet-d:#4A3CC4; --violet-ghost:rgba(91,76,224,.10); --amber:#E8722A; --amber-d:#CC5C17; --amber-ghost:rgba(232,114,42,.12); --warm:#FBF3EA; --warm2:#F6E9DA; --warm-line:#EFE0CE; --wrap:1180px; --r:16px; --r-s:12px; --sh:0 1px 2px rgba(20,22,28,.04),0 8px 30px rgba(20,22,28,.06); --sh-l:0 20px 60px rgba(20,22,28,.10); --hdr-h:64px; --tab-h:58px; } /* ── база ── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } img{max-width:100%;height:auto;display:block} a{color:var(--violet);text-decoration:none} a:hover{color:var(--violet-d)} :focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;letter-spacing:-.02em;margin:.2em 0 .5em;font-weight:800} h2{font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.01em;margin:1.4em 0 .5em;font-weight:750} h3{font-size:19px;margin:1.2em 0 .4em;font-weight:700} p{margin:.55em 0} /* ── шапка ── */ .hdr{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line); } .hdr-in{height:var(--hdr-h);display:flex;align-items:center;gap:28px} .logo{font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap; display:flex;align-items:center} .logo span{color:var(--violet)} /* Фирменный знак: книжка + «Устьянцев.рф». Картинка, а не набранный текст — это логотип бренда, у него своя гарнитура. Высота задана, ширина сама: без этого шапка дёргается, пока картинка грузится (CLS). */ .logo img{height:38px;width:auto;display:block} @media(max-width:640px){.logo img{height:32px}} .nav{display:flex;gap:2px;margin-left:auto} .nav-item{position:relative} .nav-item>a{ display:block;padding:10px 13px;border-radius:10px; color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap; } .nav-item>a:hover{background:var(--mist)} .nav-item.on>a{color:var(--violet)} .sub{ position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-width:330px; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s); box-shadow:var(--sh-l);padding:8px;display:none;z-index:60; } /* Невидимый мост через 6px-зазор между пунктом и выпадашкой: курсор в зазоре раньше выпадал из :hover, и список исчезал на пути к нему. */ .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .sub a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:14.5px;line-height:1.35} .sub a:hover{background:var(--violet-ghost);color:var(--violet-d)} .sub-all{font-weight:700;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px} .has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:block} .burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px} .burger span{display:block;height:2px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.2s} /* ── хлебные крошки ── */ .crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; padding-top:16px;padding-bottom:2px;font-size:13.5px;color:var(--soft); } .crumbs a{color:var(--soft)} .crumbs a:hover{color:var(--violet)} .crumbs .sep{color:var(--line-d);opacity:.5} .crumbs .here{color:var(--muted);font-weight:600} /* ── тело страницы ── */ .main{min-height:52vh;padding-bottom:56px} .page{padding-top:8px} .page p{max-width:76ch;color:var(--ink)} .stub-note{ margin:6px 0 20px;padding:10px 14px;border-radius:10px;font-size:13.5px; background:var(--violet-ghost);color:var(--violet-d);border:1px dashed rgba(91,76,224,.35); max-width:640px; } /* ── 404 ── */ .nf{text-align:center;padding-top:8vh} .nf-code{font-size:clamp(64px,14vw,120px);font-weight:800;color:var(--mist2);line-height:1} .nf h1{margin-top:0} /* ── подвал ── */ .ftr{background:var(--navy);color:#C7CBD6;margin-top:24px} .ftr a{color:#C7CBD6;display:block;padding:5px 0;font-size:14px} .ftr a:hover{color:#fff} .ftr-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:28px; padding-top:44px;padding-bottom:28px; } .ftr-h{color:#fff;font-weight:700;margin-bottom:10px;font-size:15px} .ftr-bottom{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid var(--line-d);padding-top:18px;padding-bottom:22px; font-size:13.5px;color:var(--soft); } .ftr-bottom a{display:inline;color:#C7CBD6;padding:0} /* ── мобильная нижняя панель ── */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:55;display:none; background:rgba(255,255,255,.96);backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); } .tab{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 2px 7px;border:0;background:none;cursor:pointer; color:var(--muted);font-size:11px;font-weight:600;font-family:inherit; } .tab .ic{width:22px;height:22px} .tab.on{color:var(--violet)} /* ── выдвижное меню (мобайл) ── */ .drawer{ position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:70; background:var(--paper);box-shadow:var(--sh-l); display:flex;flex-direction:column; transform:translateX(100%);transition:transform .22s ease; } .drawer.open{transform:none} /* Закрытое меню обязано исчезать. Своё display:flex перебивает браузерное [hidden]{display:none}, и панель оставалась в потоке: за краем экрана её не видно, но клавиша Tab уводила в невидимое меню, а любая правка transform превратила бы это в перекрытие страницы — ровно тот случай, что уже стрельнул у просмотрщика фото (26.08). */ .drawer[hidden]{display:none} .drawer-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-bottom:1px solid var(--line); } .drawer-x{border:0;background:none;font-size:20px;cursor:pointer;color:var(--muted);padding:8px} .drawer-body{overflow-y:auto;padding:10px 8px calc(20px + env(safe-area-inset-bottom))} .dr-top{display:block;padding:11px 12px;font-weight:750;color:var(--ink);font-size:16px;border-radius:10px} .dr-top:hover{background:var(--mist)} .dr-sub{display:block;padding:7px 12px 7px 26px;color:var(--muted);font-size:14.5px;border-radius:8px} .dr-sub:hover{background:var(--violet-ghost);color:var(--violet-d)} .scrim{position:fixed;inset:0;z-index:65;background:rgba(20,22,28,.45)} /* ── адаптив ── */ @media (max-width:1040px){ .nav{display:none} .burger{display:block} .ftr-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .tabbar{display:flex} .main{padding-bottom:calc(var(--tab-h) + 40px)} .ftr{padding-bottom:var(--tab-h)} .ftr-grid{grid-template-columns:1fr 1fr;gap:18px;padding-top:32px} } @media (max-width:420px){ .ftr-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .drawer{transition:none} } /* ═══ Э2: денежный контур — блоки, герой, услуги, контакты ═══ */ .b{margin:34px 0} .b-h{font-size:clamp(21px,2.6vw,27px);margin:0 0 16px;letter-spacing:-.01em} .b p{max-width:76ch} .lead{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);line-height:1.6} .btn{ display:inline-block;padding:12px 22px;border-radius:12px; background:var(--violet);color:#fff;font-weight:650;font-size:15px; border:1px solid var(--violet);transition:background .15s,transform .15s; } .btn:hover{background:var(--violet-d);color:#fff} .btn:active{transform:translateY(1px)} .btn-lg{padding:15px 28px;font-size:16px} .btn-ghost{background:transparent;color:var(--violet);border-color:var(--line)} .btn-ghost:hover{background:var(--violet-ghost);color:var(--violet-d);border-color:var(--violet)} /* герой главной */ .hero{background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%);border-bottom:1px solid var(--line)} .hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:44px 20px 36px} .hero h1{margin:.15em 0 .35em} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px} .chip{ font-size:12.5px;font-weight:650;padding:6px 11px;border-radius:999px; background:var(--violet-ghost);color:var(--violet-d); } .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .hero-img img{ width:100%;max-width:380px;margin-left:auto;border-radius:var(--r); background:linear-gradient(160deg,var(--navy),var(--navy2)); } /* цифры */ .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .fact{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px} .fact-v{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--violet)} .fact-c{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.4} /* карточки-перечисления */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s); padding:14px 16px;font-size:15px;line-height:1.45;box-shadow:var(--sh); } /* услуги на главной */ .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .svc-card{ display:flex;flex-direction:column;gap:7px;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:20px;box-shadow:var(--sh);transition:border-color .15s,transform .15s; } .svc-card:hover{border-color:var(--violet);transform:translateY(-2px);color:var(--ink)} .svc-t{font-weight:700;font-size:17px;line-height:1.3} .svc-d{font-size:14px;color:var(--muted);line-height:1.5;flex:1} .svc-go{font-size:14px;font-weight:650;color:var(--violet)} /* шаги, цитаты, галерея */ .steps{display:grid;gap:10px} .step{border-left:3px solid var(--violet);background:var(--mist);padding:12px 16px;border-radius:0 var(--r-s) var(--r-s) 0} .quote{ margin:0;padding:18px 22px;background:var(--mist);border-radius:var(--r); border-left:3px solid var(--violet); } .quote p{margin:.35em 0;color:var(--ink)} .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .gal img{border-radius:var(--r-s);border:1px solid var(--line);background:var(--mist);width:100%} /* призыв */ .b-cta{background:var(--navy);border-radius:var(--r);padding:26px 24px;margin:40px 0} .wrap>.b-cta,.page .b-cta{margin-left:0;margin-right:0} .cta-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .cta-t{color:#fff;font-size:clamp(17px,2.2vw,22px);font-weight:700;letter-spacing:-.01em} /* контакты */ .contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 8px} .ct{ display:flex;flex-direction:column;gap:3px;color:var(--ink); border:1px solid var(--line);border-radius:var(--r);padding:18px 20px; box-shadow:var(--sh);transition:border-color .15s,transform .15s; } .ct:hover{border-color:var(--violet);transform:translateY(-2px);color:var(--ink)} .ct-k{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--violet)} .ct-v{font-size:18px;font-weight:700} .ct-n{font-size:13.5px;color:var(--soft)} .ct-wa{border-color:rgba(37,211,102,.45)} .ct-wa .ct-k{color:#128C4A} @media (max-width:900px){ .hero-in{grid-template-columns:1fr;padding-top:30px} .hero-img{order:-1} .hero-img img{max-width:230px;margin:0} .facts,.cards,.svc{grid-template-columns:repeat(2,1fr)} .contacts{grid-template-columns:1fr} } @media (max-width:560px){ .facts{grid-template-columns:repeat(2,1fr)} .cards,.svc{grid-template-columns:1fr} .cta-in{flex-direction:column;align-items:flex-start} } /* Перечни (kind=list): галочка вместо маркера, две колонки на широком экране */ .tick{list-style:none;margin:0;padding:0;display:grid;gap:10px} @media(min-width:760px){.tick{grid-template-columns:1fr 1fr;gap:10px 28px}} .tick li{position:relative;padding-left:30px;line-height:1.5} .tick li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:50%; background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat} .fact-c-solo{font-size:16px;color:var(--navy);font-weight:600;line-height:1.4} /* ═══════════════════════════════════════════════════════════════════════════ Э2д: ДИЗАЙН-СЛОЙ Тильда держала внимание полноэкранными полосами и фото. Повторяем приём своими средствами: секция = полоса во всю ширину, внутри — .wrap. Ритм задаётся фоном полосы (белый → мгла → тёмный), а не отступами. ═══════════════════════════════════════════════════════════════════════════ */ /* ── полосы ── */ .band{padding:clamp(44px,6vw,84px) 0} .band+.band{border-top:0} .band-mist{background:var(--mist)} .band-tint{background:linear-gradient(180deg,#FAFAFE 0%,var(--paper) 100%)} .band-dark{background:var(--navy);color:#E8EAF0} .band-dark .b-h,.band-dark p{color:#fff} .band-tight{padding:clamp(28px,3.4vw,44px) 0} /* заголовок секции с надзаголовком */ .b-eyebrow{ display:block;font-size:12.5px;font-weight:750;letter-spacing:.09em; text-transform:uppercase;color:var(--violet);margin-bottom:10px; } .band .b-h{ font-size:clamp(24px,3.4vw,38px);line-height:1.16;letter-spacing:-.022em; margin:0 0 20px;max-width:22ch;font-weight:800; } .band .b-h.wide{max-width:none} .band p{font-size:16.5px;line-height:1.68;color:var(--muted);max-width:70ch} .band p strong{color:var(--ink)} /* ── герой внутренней страницы ── */ .phero{ background: radial-gradient(1100px 420px at 88% -8%,rgba(91,76,224,.14),transparent 62%), linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%); border-bottom:1px solid var(--line);padding:6px 0 clamp(30px,4.6vw,56px); } .phero h1{max-width:19ch;margin:.15em 0 .3em} .phero .lead{max-width:62ch;font-size:clamp(16.5px,1.7vw,19.5px);color:var(--muted)} .phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .phero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center} .phero-img img{ width:100%;border-radius:20px;box-shadow:var(--sh-l); aspect-ratio:4/3;object-fit:cover;background:var(--mist2); } @media(max-width:900px){.phero-in{grid-template-columns:1fr}.phero-img{display:none}} /* ── цифры: крупно, без коробок ── */ .band .facts{grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,32px)} .band .fact{background:none;border:0;border-top:2px solid var(--violet);border-radius:0;padding:16px 0 0} .band .fact-v{font-size:clamp(34px,5vw,54px);line-height:1;font-weight:800;color:var(--ink)} .band .fact-c{font-size:14.5px;color:var(--muted);margin-top:8px} .band-dark .fact{border-top-color:var(--violet)} .band-dark .fact-v{color:#fff} .band-dark .fact-c{color:#A8AFC2} /* ── карточки услуг: крупнее, со стрелкой ── */ .band .svc{gap:clamp(14px,1.8vw,22px)} .band .svc-card{padding:26px 24px 22px;border-radius:20px;box-shadow:none;background:var(--paper)} .band .svc-card:hover{box-shadow:var(--sh-l);transform:translateY(-3px)} .band .svc-t{font-size:19px;letter-spacing:-.01em} .band-mist .svc-card{border-color:transparent;box-shadow:var(--sh)} /* ── чек-лист: крупнее и с воздухом ── */ .band .tick{gap:14px 32px} .band .tick li{font-size:16.5px;padding-left:34px;color:var(--ink)} .band .tick li::before{width:22px;height:22px;background-size:13px;top:.22em} /* ── таймлайн шагов ── */ .tl{display:grid;gap:0;counter-reset:st;margin-top:6px} .tl .step{ position:relative;border:0;background:none;border-radius:0; padding:0 0 30px 58px;margin:0;counter-increment:st; } .tl .step::before{ content:counter(st);position:absolute;left:0;top:-2px; width:38px;height:38px;border-radius:50%;background:var(--violet);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:750;font-size:15px; } .tl .step::after{content:"";position:absolute;left:18.5px;top:42px;bottom:2px;width:2px;background:var(--line)} .tl .step:last-child{padding-bottom:0} .tl .step:last-child::after{display:none} .tl .step-t{font-weight:700;font-size:17.5px;line-height:1.35;margin-bottom:5px;color:var(--ink)} .tl .step p{margin:.2em 0;font-size:15.5px} /* ── аккордеон вопрос-ответ ── */ .faq{border-top:1px solid var(--line);max-width:900px} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-weight:700;font-size:17px;line-height:1.4;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:26px;width:11px;height:11px; border-right:2px solid var(--violet);border-bottom:2px solid var(--violet); transform:rotate(45deg);transition:transform .18s; } .faq details[open] summary::after{transform:rotate(-135deg);top:30px} .faq summary:hover{color:var(--violet-d)} .faq .faq-a{padding:0 0 20px;color:var(--muted);font-size:16px;line-height:1.65;max-width:74ch} .faq .faq-a p{margin:.35em 0} /* ── логотипы клиентов ── */ .logos{ display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;align-items:center; } .logos img{ width:100%;height:96px;object-fit:contain;padding:16px;background:var(--paper); border:1px solid var(--line);border-radius:14px; filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s,transform .2s; } .logos img:hover{filter:none;opacity:1;transform:translateY(-2px)} .band-mist .logos img{border-color:transparent} /* ── отзыв ── */ .rev{ background:var(--paper);border:1px solid var(--line);border-radius:20px; padding:30px 32px;position:relative;box-shadow:var(--sh);max-width:860px; } .rev::before{ content:"”";position:absolute;left:24px;top:-6px;font-size:88px;line-height:1; color:var(--violet);opacity:.16;font-family:Georgia,serif; } .rev p{color:var(--ink);font-size:16.5px;position:relative} .rev-who{display:flex;align-items:center;gap:12px;margin-top:18px} .rev-av{ width:44px;height:44px;border-radius:50%;background:var(--violet-ghost); color:var(--violet-d);display:flex;align-items:center;justify-content:center; font-weight:800;font-size:16px;flex:none; } .rev-n{font-weight:700;font-size:15.5px} .rev-r{font-size:13.5px;color:var(--soft)} /* ── галерея: крупнее плитка ── */ .band .gal{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .band .gal img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;border-color:transparent;box-shadow:var(--sh)} /* ── текст рядом с фото ── */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center} .split img{border-radius:20px;box-shadow:var(--sh-l);width:100%;aspect-ratio:4/3;object-fit:cover} @media(max-width:860px){.split{grid-template-columns:1fr}} /* ── призыв: во всю полосу ── */ .band-dark .cta-in{align-items:center} .band-dark .cta-t{font-size:clamp(22px,3vw,34px);max-width:20ch;line-height:1.2;font-weight:800} .band-dark .btn{background:#fff;color:var(--navy);border-color:#fff} .band-dark .btn:hover{background:#E9E7FF;color:var(--navy)} /* ── адаптив дизайн-слоя ── */ @media(max-width:860px){ .band .facts{grid-template-columns:repeat(2,1fr)} .band .svc{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .band .svc,.cards{grid-template-columns:1fr} .logos{grid-template-columns:repeat(2,1fr)} .rev{padding:24px 20px} } /* Полоса «лёгких» блоков: внутри — компактный ритм, между полосами — воздух */ .band-soft{padding:clamp(34px,4.4vw,60px) 0} .band-soft>.wrap>*+*{margin-top:26px} .band-soft .b-h{margin-top:0} .band-soft .b-h+p{margin-top:-6px} .band-soft p+p{margin-top:10px} .b-sub{font-size:19.5px;font-weight:750;letter-spacing:-.01em;margin:26px 0 8px;color:var(--ink)} .band-soft>.wrap>*+.b-sub{margin-top:26px} .revs{display:grid;gap:18px} @media(min-width:1000px){.revs{grid-template-columns:1fr 1fr;align-items:start}} .revs .rev{max-width:none} .trust-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .stub{max-width:760px} .stub .lead{font-size:18px;color:var(--muted)} /* ═══════════════════════════════════════════════════════════════════════════ ПРОДАЮЩИЙ СЛОЙ: доверие в первом экране, кнопка всегда под рукой, шаги работы. Правило прежнее — акцент только там, где нужно действие. ═══════════════════════════════════════════════════════════════════════════ */ /* ── строка доверия под кнопками героя ── */ .proof{ list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px; margin:22px 0 0;padding:0;font-size:14px;color:var(--muted); } .proof li{position:relative;padding-left:22px;line-height:1.4} .proof li::before{ content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;border-radius:50%; background:var(--violet-ghost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%235B4CE0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; } /* ── CTA в шапке: появляется, когда призыв героя ушёл из вида ── Всегда КОНТУРНАЯ (решение оркестратора, №106): акцент живёт только в контенте. В середину длинных страниц врезаны акцентные призывы — заливка ещё и в шапке дала бы два ярких пятна в одном экране. */ .hdr-cta{ margin-left:14px;padding:9px 18px;font-size:14.5px;border-radius:10px; opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .2s,transform .2s,visibility .2s; background:transparent;color:var(--navy);border:1.5px solid var(--line); } .hdr-cta:hover{background:var(--mist);color:var(--navy);border-color:var(--navy)} .hdr-cta.show{opacity:1;visibility:visible;transform:none} @media(max-width:1040px){.hdr-cta{display:none}} /* на мобильном роль у .wa-fab */ /* ── липкая кнопка WhatsApp (мобильный) ── */ .wa-fab{ position:fixed;left:16px;right:16px;bottom:calc(var(--tab-h) + 12px);z-index:54; display:none;align-items:center;justify-content:center;gap:10px; height:52px;border-radius:14px;background:#128C4A;color:#fff; font-weight:700;font-size:15.5px;box-shadow:0 10px 30px rgba(18,140,74,.35); transform:translateY(120%);transition:transform .25s; } .wa-fab.show{transform:none} .wa-fab:hover,.wa-fab:active{color:#fff;background:#0F7B41} @media(max-width:720px){.wa-fab{display:flex}} /* ── шаги работы на главной: без нумерованной ленты, ровные карточки ── */ .tl-flat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st} .tl-flat .step{padding:26px 24px;background:var(--paper);border:1px solid var(--line); border-radius:20px;box-shadow:var(--sh)} .tl-flat .step::before{position:static;margin-bottom:14px} .tl-flat .step::after{display:none} .tl-flat .step p{color:var(--muted);font-size:15.5px} @media(max-width:860px){.tl-flat{grid-template-columns:1fr}} /* ── появление блоков при прокрутке ── */ /* Класс ставит site.js только при поддержке IntersectionObserver: без JS контент виден сразу — анимация никогда не прячет содержимое. */ .js-reveal .reveal{opacity:0;transform:translateY(10px)} .js-reveal .reveal.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1;transform:none} .hdr-cta,.wa-fab{transition:none} } /* ═══ Смысловые блоки: было простынёй — стало структурой ═══ */ /* пары «термин → объяснение» */ .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,28px)} .feat-i{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:var(--sh)} .feat-t{font-size:18.5px;font-weight:750;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)} .feat-i p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0;max-width:none} .band-mist .feat-i{border-color:transparent} /* программа занятий */ .prog{list-style:none;counter-reset:pr;margin:0;padding:0;display:grid;gap:14px;max-width:900px} .prog li{counter-increment:pr;position:relative;padding:20px 22px 20px 66px; background:var(--paper);border:1px solid var(--line);border-radius:16px} .prog li::before{content:counter(pr);position:absolute;left:20px;top:20px; width:30px;height:30px;border-radius:50%;background:var(--violet-ghost);color:var(--violet-d); display:flex;align-items:center;justify-content:center;font-weight:750;font-size:14px} .prog-t{font-weight:700;font-size:17px;margin-bottom:4px} .prog li p{margin:.2em 0;font-size:15.5px;color:var(--muted);max-width:none} /* видео: превью, плеер подгружается по клику */ .vid{position:relative;max-width:860px;aspect-ratio:16/9;border-radius:20px;overflow:hidden; background:var(--mist2);box-shadow:var(--sh-l);cursor:pointer} .vid img,.vid iframe{width:100%;height:100%;object-fit:cover;display:block;border:0} .vid-play{position:absolute;inset:0;margin:auto;width:62px;height:44px;border:0;background:none; cursor:pointer;padding:0;transition:transform .15s} .vid:hover .vid-play{transform:scale(1.08)} /* плитка галереи — ссылка на полноразмерное фото */ .gal a{display:block;border-radius:16px;overflow:hidden} .gal a img{transition:transform .25s} .gal a:hover img{transform:scale(1.03)} /* ═══ Пропорции фотографий ═══ Плитки были жёстко 4:3 с обрезкой, но под это подходит лишь пятая часть архива: четверть кадров вертикальные (0.7 — у них срезалось до половины высоты вместе с головами), треть — 16:9, есть панорамы до 2.3. Галерея стала колоночной (masonry): каждый кадр показывается целиком, в своих пропорциях, ряды сходятся по вертикали. */ .band .gal,.gal{display:block;columns:4 230px;column-gap:16px} .band .gal a,.gal a{break-inside:avoid;display:block;margin:0 0 16px} .band .gal img,.gal img{ width:100%;height:auto;aspect-ratio:auto;object-fit:initial; border-radius:16px;box-shadow:var(--sh);background:var(--mist2); } @media(max-width:900px){.band .gal,.gal{columns:2 150px}} @media(max-width:480px){.band .gal,.gal{columns:1}} /* Герой и врезка рядом с текстом — кадрирование осознанное (нужна ровная плашка), но точку кадра смещаем вверх: на фото с людьми лица выше центра. */ .phero-img img,.split img{object-position:center 28%} /* Фото героя показываем целиком: рамка 4:3 срезала у вертикальных портретов (0.71) почти половину кадра. Теперь высота ограничена, а пропорции — родные: горизонтальный кадр занимает всю колонку, вертикальный становится у́же. */ .phero-img img{ width:auto;max-width:100%;height:auto;max-height:440px; aspect-ratio:auto;object-fit:initial;margin-left:auto;display:block; } /* ═══ Заявки (Э5б) ═══ Форма — второй канал рядом с WhatsApp: часть корпоративных заказчиков не пишет в мессенджеры с рабочего места. Светлый вид — /contacts и блоки kind=form; тёмный — компактная форма в финале страниц. */ .lf{margin-top:18px;max-width:760px} .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .lf-wide{grid-column:1/-1} .lf-f>span{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px} .lf-f em{font-style:normal;font-weight:400;color:var(--soft)} .lf input:not([type=checkbox]),.lf select,.lf textarea{ width:100%;min-height:46px;padding:11px 14px;font:inherit;font-size:15.5px; color:var(--ink);background:var(--paper);border:1px solid var(--line); border-radius:var(--r-s); } .lf ::placeholder{color:var(--soft)} .lf textarea{resize:vertical;min-height:96px} .lf input:focus-visible,.lf select:focus-visible,.lf textarea:focus-visible{ outline:2px solid var(--violet);outline-offset:0;border-color:var(--violet)} .lf-agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0; font-size:13.5px;line-height:1.5;color:var(--muted);cursor:pointer;max-width:56ch} .lf-agree input{width:17px;height:17px;margin-top:2px;accent-color:var(--violet);flex:none} .lf-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px} .lf-note{font-size:13.5px;color:var(--soft)} /* состояния: единственные красный/зелёный на сайте — только у формы */ .lf-err{color:#B3362F;font-weight:600;font-size:14.5px;margin:12px 0 0} .lf-ok{font-size:17px;font-weight:700;color:#1D7A45;margin:14px 0 0} /* honeypot: вне экрана, а не display:none — часть ботов display уважает */ .lf-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} @media(max-width:620px){.lf-grid{grid-template-columns:1fr}} /* тёмный финал: поля на стекле, фокус и ссылки белые (фиолетовый на тёмном не проходит по контрасту — паспорт §2) */ /* .cta-in — flex-ряд (заголовок ↔ кнопка); связка «или…»+форма занимает всегда всю ширину ряда и встаёт под ними по центру */ .cta-or{flex-basis:100%;text-align:center;margin-top:22px; font-size:15px;color:rgba(255,255,255,.66)} .cta-in .lf{flex-basis:100%} .band-dark .lf{margin:6px auto 0;max-width:640px;width:100%} .band-dark .lf input:not([type=checkbox]){ background:rgba(255,255,255,.07);border-color:var(--line-d);color:#fff} .band-dark .lf ::placeholder{color:rgba(255,255,255,.38)} .band-dark .lf input:focus-visible{outline-color:#fff;border-color:#fff} .band-dark .lf-f>span{color:rgba(255,255,255,.66)} .band-dark .lf-agree{color:rgba(255,255,255,.6);margin-left:auto;margin-right:auto} .band-dark .lf-agree input{accent-color:#fff} .band-dark .lf-agree a{color:#fff;text-decoration:underline} .band-dark .lf-send{justify-content:center} .band-dark .lf-note{color:rgba(255,255,255,.55)} .band-dark .lf-err{color:#FFB4A8} .band-dark .lf-ok{color:#fff} /* ═══ Кейсы: задача → что делали → результат цифрой ═══ */ .cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(18px,2.4vw,28px)} .case{display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:var(--sh)} .case-who{font-size:13.5px;font-weight:750;color:var(--violet-d);margin-bottom:10px} .case-k{font-size:12.5px;font-weight:700;color:var(--soft);text-transform:uppercase; letter-spacing:.06em;margin:14px 0 4px} .case-who+.case-k,.case>.case-k:first-child{margin-top:0} .case p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:none} .case-r{margin-top:auto;padding-top:16px;font-size:17px;font-weight:750;color:var(--ink)} .case-r::before{content:"Результат";display:block;font-size:12.5px;font-weight:700; color:var(--soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px} /* ═══ Условия и цена (V5, тип price) ═══ */ .price{max-width:760px;background:var(--paper);border:1px solid var(--line); border-radius:20px;padding:26px 28px;box-shadow:var(--sh)} .price-rows{margin:0;display:grid;gap:0} .price-row{display:grid;grid-template-columns:200px 1fr;gap:16px; padding:11px 0;border-bottom:1px solid var(--line)} .price-row:last-child{border-bottom:0} .price-row dt{font-size:13.5px;font-weight:700;color:var(--soft); text-transform:uppercase;letter-spacing:.04em;padding-top:2px} .price-row dd{margin:0;font-size:16px;color:var(--ink);font-weight:600} .price-note{margin:14px 0 0;font-size:14.5px;color:var(--muted);max-width:none} .price .btn{margin-top:16px} @media(max-width:560px){.price-row{grid-template-columns:1fr;gap:2px;padding:10px 0}} /* ═══ Квиз «Подобрать формат за минуту» (главная) ═══ */ .quiz-box{max-width:760px;background:var(--paper);border:1px solid var(--line); border-radius:20px;padding:28px;box-shadow:var(--sh)} .quiz-n{font-size:12.5px;font-weight:700;color:var(--soft); text-transform:uppercase;letter-spacing:.06em} .quiz-q{font-size:21px;font-weight:750;letter-spacing:-.01em;margin:6px 0 16px} .quiz-opts{display:grid;gap:10px} .quiz-opt{font:inherit;font-size:15.5px;font-weight:600;text-align:left; padding:13px 16px;border:1px solid var(--line);border-radius:12px; background:var(--paper);color:var(--ink);cursor:pointer; transition:border-color .15s,background .15s} .quiz-opt:hover{border-color:var(--violet);background:var(--violet-ghost)} .quiz-res-e{display:block;font-size:12.5px;font-weight:700;color:var(--violet-d); text-transform:uppercase;letter-spacing:.06em} .quiz-res-t{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:4px 0 6px} .quiz-res-d{color:var(--muted);max-width:56ch} .quiz-form-t{margin-top:20px;padding-top:18px;border-top:1px solid var(--line); font-weight:600;font-size:15px} .quiz .lf{margin-top:4px} .quiz-again{margin-top:16px;padding:0;border:0;background:none;font:inherit; font-size:14px;color:var(--soft);cursor:pointer} .quiz-again:hover{color:var(--violet)} /* ═══ Ленты постов Тильды (Э6): карточки, пагинация, тело поста ═══ */ .fp-n{color:var(--soft);font-weight:600;font-size:.7em;vertical-align:.25em;margin-left:6px} .fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(16px,2.2vw,24px)} .fp{display:flex;flex-direction:column;gap:8px;background:var(--paper); border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink); box-shadow:var(--sh);transition:transform .2s,box-shadow .2s} .fp:hover{transform:translateY(-3px);box-shadow:var(--sh-l);color:var(--ink)} .fp-im{position:relative;display:block;margin:-16px -16px 4px;border-radius:16px 16px 0 0; overflow:hidden;background:var(--mist2)} .fp-im img{width:100%;height:170px;object-fit:cover;object-position:center 30%;display:block} .fp-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:15px;color:#fff;background:rgba(20,22,28,.28)} .fp-t{font-weight:700;font-size:16.5px;line-height:1.35} .fp-d{font-size:14px;line-height:1.5;color:var(--muted); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .fp-meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--soft); display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* Плашка рубрики — всегда в одну строку. Длинные названия («Открытые мастер-классы и выступления») переносились внутри пилюли: она растягивалась на всю карточку, текст прилипал к краям, и ровный ряд карточек рассыпался. Теперь лишнее уходит в многоточие, а полное название — в подсказке. */ .fp-part{padding:3px 10px;border-radius:99px;background:var(--mist);font-weight:600; max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fp-pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:28px} .fp-pageinfo{font-size:14px;color:var(--soft)} .post-meta{font-size:14px;color:var(--soft);margin:-4px 0 10px} .post-body{max-width:800px} /* Запись без текста: воздух вокруг кнопки «Все записи раздела» сжимаем в design.css — там живут отступы между блоками, и там же правило `.phero + .band`, которое иначе перебивает здешнее по специфичности. */ .post-body p{max-width:none;font-size:16.5px;line-height:1.7} .post-body .b-sub{margin-top:30px} .post-ol{padding-left:22px;display:grid;gap:8px} .post-im{display:block;margin:22px 0;border-radius:16px;overflow:hidden} .post-im img{width:100%;height:auto;display:block;box-shadow:var(--sh)} /* Выравнивание фото из метки «|влево»/«|вправо» (18.08): обтекание текстом на широком экране; телефон снимает float — узкой колонке обтекать нечем (width инлайновый, потому !important). Хвост потока чистит clearfix. */ .post-im-l{float:left;margin:6px 22px 12px 0} .post-im-r{float:right;margin:6px 0 12px 22px} @media(max-width:560px){ .post-im-l,.post-im-r{float:none;margin:22px auto;width:100%!important} } .post-body::after{content:"";display:block;clear:both} /* Кнопка призыва из текста записи ([кнопка:…]) — по центру, с воздухом. */ .post-cta{text-align:center;margin:28px 0} .post-back{margin-top:34px} .post .vid{margin:18px 0} /* ═══ Движение (паспорт §7): ровно три приёма, всё остальное неподвижно ═══ */ /* 1. Каскад карточек в появляющейся полосе: сцена, шаг 60 мс, максимум шесть */ .js-reveal .reveal .svc-card,.js-reveal .reveal .feat-i, .js-reveal .reveal .case,.js-reveal .reveal .tl-flat .step{ opacity:0;transform:translateY(8px)} .js-reveal .reveal.in .svc-card,.js-reveal .reveal.in .feat-i, .js-reveal .reveal.in .case,.js-reveal .reveal.in .tl-flat .step{ opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease} .js-reveal .reveal.in .svc-card:nth-child(2),.js-reveal .reveal.in .feat-i:nth-child(2), .js-reveal .reveal.in .case:nth-child(2),.js-reveal .reveal.in .tl-flat .step:nth-child(2){ transition-delay:.06s} .js-reveal .reveal.in .svc-card:nth-child(3),.js-reveal .reveal.in .feat-i:nth-child(3), .js-reveal .reveal.in .case:nth-child(3),.js-reveal .reveal.in .tl-flat .step:nth-child(3){ transition-delay:.12s} /* паспорт §7.2.3: ступеней задержки не больше трёх — дальше общая волна */ .js-reveal .reveal.in .svc-card:nth-child(n+4),.js-reveal .reveal.in .feat-i:nth-child(n+4){ transition-delay:.18s} /* 2. Прорисовка линии таймлайна «Как проходит» при появлении полосы */ .js-reveal .reveal .tl .step::after{transform:scaleY(0);transform-origin:top} .js-reveal .reveal.in .tl .step::after{ transform:scaleY(1);transition:transform .6s ease .15s} /* 3. Пульс главной кнопки героя: мягкая волна раз в ~6 с, только первый экран */ @keyframes cta-pulse{ 0%,88%,100%{box-shadow:0 0 0 0 rgba(91,76,224,0)} 94%{box-shadow:0 0 0 9px rgba(91,76,224,.14)} } .hero-cta .btn:not(.btn-ghost),.phero-cta .btn:not(.btn-ghost){ animation:cta-pulse 6s ease-in-out 2s infinite} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal .svc-card,.js-reveal .reveal .feat-i, .js-reveal .reveal .case,.js-reveal .reveal .tl-flat .step{opacity:1;transform:none} .js-reveal .reveal .tl .step::after{transform:none} .hero-cta .btn:not(.btn-ghost),.phero-cta .btn:not(.btn-ghost){animation:none} } /* подпись под видео-визиткой на главной */ .vid-note{margin-top:12px;font-size:14px;color:var(--soft);max-width:860px} /* ═══ Поиск по сайту (V7-Н1) и навигация-2 ═══ */ .s-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px; margin-left:6px;border:0;border-radius:10px;background:none;color:var(--ink); cursor:pointer} .s-btn:hover{background:var(--mist);color:var(--violet)} @media(max-width:1040px){.s-btn{margin-left:auto}} .s-ov{position:fixed;left:0;right:0;top:0;z-index:80;background:var(--paper); border-bottom:1px solid var(--line);box-shadow:var(--sh-l); padding:14px 20px calc(14px + env(safe-area-inset-top) * 0)} .s-ov-form{max-width:var(--wrap);margin:0 auto;display:flex;gap:10px;align-items:center} .s-ov input{flex:1;min-height:48px;padding:12px 16px;font:inherit;font-size:17px; color:var(--ink);background:var(--mist);border:1px solid var(--line); border-radius:12px} .s-ov input:focus-visible{outline:2px solid var(--violet);border-color:var(--violet)} .s-x{width:44px;height:44px;border:0;background:none;font-size:18px; color:var(--muted);cursor:pointer;border-radius:10px} .s-x:hover{background:var(--mist);color:var(--ink)} .dr-search{padding:4px 12px 10px} .dr-search input{width:100%;min-height:44px;padding:10px 14px;font:inherit; font-size:15.5px;background:var(--mist);border:1px solid var(--line); border-radius:10px;color:var(--ink)} /* страница результатов */ .sr-form{display:flex;gap:10px;max-width:640px;margin:6px 0 26px} .sr-form input{flex:1;min-height:48px;padding:12px 16px;font:inherit; font-size:16.5px;border:1px solid var(--line);border-radius:12px; background:var(--paper);color:var(--ink)} .sr-form input:focus-visible{outline:2px solid var(--violet);border-color:var(--violet)} .sr-n{color:var(--soft);font-weight:600;font-size:.7em;vertical-align:.25em;margin-left:6px} .sr-list{display:grid;gap:12px;margin:0 0 30px;max-width:800px} .sr-item{display:block;padding:16px 18px;background:var(--paper); border:1px solid var(--line);border-radius:14px;color:var(--ink); box-shadow:var(--sh);transition:transform .2s,box-shadow .2s} .sr-item:hover{transform:translateY(-2px);box-shadow:var(--sh-l);color:var(--ink)} .sr-t{display:block;font-weight:700;font-size:16.5px;margin-bottom:4px} .sr-s{display:block;font-size:14.5px;line-height:1.55;color:var(--muted)} .sr-s b{color:var(--violet-d);background:var(--violet-ghost);border-radius:3px; padding:0 2px;font-weight:700} .sr-u{display:block;margin-top:6px;font-size:12.5px;color:var(--soft)} .sr-none{max-width:56ch} /* 404 с поиском */ .nf-form{margin:18px auto 22px;justify-content:center} .nf-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* кнопка «наверх» (V7-Н9) */ .totop{position:fixed;right:16px;bottom:calc(var(--tab-h) + 74px);z-index:53; width:46px;height:46px;border:1px solid var(--line);border-radius:50%; background:var(--paper);color:var(--muted);font-size:19px;cursor:pointer; box-shadow:var(--sh-l);opacity:0;transform:translateY(8px); transition:opacity .2s,transform .2s} .totop.show{opacity:1;transform:none} .totop:hover{color:var(--violet);border-color:var(--violet)} @media(min-width:721px){.totop{bottom:24px}} /* футер: пять колонок с «Тренингами» (V7-Н5) */ .ftr-grid{grid-template-columns:repeat(5,1fr)} @media(max-width:1040px){.ftr-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.ftr-grid{grid-template-columns:1fr}} /* соседние записи в посте (V7-Н3) */ .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px} .post-nav-a{display:block;padding:14px 16px;border:1px solid var(--line); border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--sh)} .post-nav-a:hover{border-color:var(--violet);color:var(--ink)} .post-nav-r{text-align:right} .post-nav-k{display:block;font-size:12.5px;font-weight:700;color:var(--soft); text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .post-nav-t{display:block;font-weight:650;font-size:14.5px;line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:560px){.post-nav{grid-template-columns:1fr}.post-nav-r{text-align:left}} /* Н7 (подсказки в сабменю) отменён владельцем: навигация без подробностей */ /* чипы-фильтры рубрик в лентах (V7-Н2, как на Тильде) */ .fp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .fp-tag{padding:8px 16px;border-radius:99px;border:1px solid var(--line); background:var(--paper);color:var(--ink);font-weight:600;font-size:14px; transition:border-color .15s,background .15s} .fp-tag:hover{border-color:var(--violet);color:var(--violet-d)} .fp-tag.on{background:var(--violet);border-color:var(--violet);color:#fff} /* ═══ Просмотр фото (№131 п.7): модалка вместо сырого файла в новой вкладке ═══ Канон размеров модалки: ширина — по содержимому (кадр в родных пропорциях, не растягиваем), высота — не выше 90vh, длинная подпись прокручивается ВНУТРИ окна, на телефоне — почти во весь экран. Закрытие: крестик, фон, Escape — вешает site.js. dvh-строки после vh — уточнение для мобильных браузеров с плавающей адресной строкой, старые их просто игнорируют. */ /* Вуаль 0.92, не меньше: при 0.84 белая шапка и таб-бар «светились сквозь» и на глаз читались стоящими ПОВЕРХ модалки (стэкинг при этом верный — проверено непрозрачным фоном). */ .lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center; background:rgba(20,22,28,.92);padding:24px;opacity:0;transition:opacity .2s} /* Закрытый просмотрщик обязан ИСЧЕЗАТЬ, а не становиться прозрачным. Своё display:flex перебивало браузерное [hidden]{display:none}: после закрытия фото оставалась невидимая вуаль на весь экран с pointer-events, и страница переставала нажиматься целиком — вопросы-ответы, ссылки, меню. Поймано владельцем 26.08. Тот же приём уже стоит у индикатора загрузки. */ .lb[hidden]{display:none} .lb.open{opacity:1} /* Листание: стрелки по краям ОКНА, счётчик снизу. Пальцем — свайп (site.js). position:fixed, а не absolute: привязанные к рамке фото, они ложились поверх самого снимка — на светлом скане письма полупрозрачный кружок не читался вовсе. У края экрана под ними тёмная вуаль, и кнопка видна. */ .lb-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2; width:52px;height:52px;border:1px solid rgba(255,252,247,.28);border-radius:50%; cursor:pointer;background:rgba(20,22,28,.62);color:#fff;font-size:30px;line-height:1; padding:0 0 4px;display:flex;align-items:center;justify-content:center; transition:background .2s,transform .2s,border-color .2s} .lb-nav:hover{background:rgba(20,22,28,.9);border-color:rgba(255,252,247,.6)} .lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px} .lb-nav:active{transform:translateY(-50%) scale(.94)} .lb-prev{left:24px} .lb-next{right:24px} .lb-schet{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%); color:rgba(255,252,247,.62);font-size:14px;letter-spacing:.02em;white-space:nowrap} @media(max-width:700px){ .lb-nav{width:44px;height:44px;font-size:26px} .lb-prev{left:8px} .lb-next{right:8px} } @media(prefers-reduced-motion:reduce){.lb-nav{transition:none}} .lb-box{position:relative;margin:0;max-width:100%;max-height:90vh;max-height:90dvh; display:flex;flex-direction:column;align-items:center} .lb-img{max-width:100%;max-height:80vh;max-height:80dvh;width:auto;height:auto; border-radius:12px;background:var(--mist2);box-shadow:var(--sh-l)} .lb-cap{margin-top:12px;max-height:16vh;overflow-y:auto; color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.5;text-align:center;max-width:72ch} .lb-x{position:absolute;top:-16px;right:-16px;z-index:1;width:44px;height:44px;border:0; border-radius:50%;background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer; box-shadow:var(--sh-l)} .lb-x:hover{color:var(--violet)} @media(max-width:720px){ .lb{padding:10px} .lb-x{position:fixed;top:10px;right:10px} /* крест у кромки кадра срезало бы экраном */ .lb-img{max-height:86vh;max-height:86dvh} /* почти во весь экран */ } @media(prefers-reduced-motion:reduce){.lb{transition:none}} /* Пока открыт просмотр, плавающий хром сайта убран совсем: даже сквозь плотную вуаль белая шапка и таб-бар просвечивали и спорили с окном за внимание. */ body.lb-open .hdr,body.lb-open .tabbar,body.lb-open .wa-fab,body.lb-open .totop{visibility:hidden} /* ═══ Шапка: место под честный текст кнопки (№131 п.6) ═══ Кнопке шапки дан текст «Написать в WhatsApp», и замер вскрыл добандный баг: ряд из восьми пунктов меню НЕ ВХОДИЛ в контейнер 1180 ещё со старым текстом «Написать» (сумма 1153 при месте 1140): на 1041–1180 это давало горизонтальную прокрутку каждой страницы, шире — тихий вылет кнопки за сетку на ~13px. Невидимая кнопка место занимает всегда — .show меняет только opacity. Лечение двумя ступенями, перенос текста кнопки в две строки запрещён всегда: — с 1041px ряд уплотняется (зазоры 28→12, пилюли меню 13→10) — этого хватает и полному тексту: 1114 ≤ 1140, прежний вылет за сетку тоже уходит; — на 1041–1279 места всё равно меньше (контейнер = экрану), поэтому меню ещё плотнее и кнопка показывает короткую форму «WhatsApp» — канал по-прежнему назван, человек знает, куда попадёт. */ .hdr-cta{white-space:nowrap} .hdr-cta-s{display:none} @media(max-width:1279px){ .hdr-cta-l{display:none} .hdr-cta-s{display:inline} } @media(min-width:1041px){ .hdr-in{gap:12px} .nav-item>a{padding:10px 10px} .hdr-cta{margin-left:6px;padding:9px 14px} } @media(min-width:1041px) and (max-width:1279px){ .nav-item>a{padding:10px 8px;font-size:14.5px} } /* Кабинет участника: свёрнутая форма «что-то не работает». Свёрнута намеренно — /lk это место для материалов, а форма багов там гость. */ .lk-bag { margin-top: 22px; border-top: 1px solid var(--line, #e6e6ef); padding-top: 14px; } .lk-bag summary { cursor: pointer; font-weight: 600; } .lk-bag-f { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .lk-bag-f input, .lk-bag-f textarea { width: 100%; } .lk-bag-f button { align-self: flex-start; } .lk-ok { color: #177d51; font-weight: 600; } .lk-err { color: #c02626; font-weight: 600; } /* Разделитель в тексте записи («---» из меню «+» редактора, 18.08) */ .post-hr{border:0;border-top:1px solid var(--line);margin:30px auto;max-width:220px} /* ═══ ЖИВОЙ СЛОЙ (stil-zhivoy) ═══ Полигон приёмов движения: включается page.opts {"stil":"zhivoy"} (сейчас — /moskva). История решений — в ЖУРНАЛ РАЗРАБОТКИ (19–21.08) и паспорте §7.2.0. Языковые законы: прямые линии, маски и fade, изинг cubic-bezier(.2,.7,.2,1), движение однократное; палитра: бежевые фоны, фиолетовые действия, оранжевые линии-акценты. Каждому прячущему правилу — зеркальный показ + сторож pokazat-vsyo (site.js): контент важнее эффекта. */ /* Полоса прочитанного (общая .chital из anim.js) — теплеет. */ .stil-zhivoy .chital i{background:linear-gradient(90deg,var(--amber),#F09B54)} /* Герой: бежевый градиент + тёплое свечение; линейка под H1; каскад входа (h1 ведёт только подъём — прозрачностью управляют буквы проступания, без скрипта заголовок просто виден). */ .stil-zhivoy .phero{background: radial-gradient(1100px 420px at 88% -8%,rgba(232,114,42,.08),transparent 62%), linear-gradient(180deg,var(--warm) 0%,var(--paper) 100%)} .stil-zhivoy .phero h1::after{content:"";display:block;width:64px;height:3px; margin-top:14px;background:var(--amber);border-radius:2px; transform:scaleX(0);transform-origin:left center; animation:zh-lineyka .55s cubic-bezier(.2,.7,.2,1) .3s forwards} @keyframes zh-lineyka{to{transform:scaleX(1)}} .stil-zhivoy .phero .phero-in > div > h1{animation:zh-vhod-h1 .6s cubic-bezier(.2,.7,.2,1) both} @keyframes zh-vhod-h1{from{transform:translateY(14px)}to{transform:none}} .stil-zhivoy .phero .lead{animation:zh-vhod .6s cubic-bezier(.2,.7,.2,1) .12s both} .stil-zhivoy .phero-cta{animation:zh-vhod .6s cubic-bezier(.2,.7,.2,1) .22s both} .stil-zhivoy .phero .proof{animation:zh-vhod .6s cubic-bezier(.2,.7,.2,1) .3s both} .stil-zhivoy .phero-img{animation:zh-vhod-foto .7s cubic-bezier(.2,.7,.2,1) .15s both} @keyframes zh-vhod{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes zh-vhod-foto{from{opacity:0;transform:translateY(10px) scale(1.015)} to{opacity:1;transform:none}} /* Полосы: бежевое чередование. design.css гасит вторую mist подряд в белый — здесь возвращаем ритм тёплая-белая-тёплая (специфичность выше). */ .stil-zhivoy .band-mist{background:var(--warm)} .stil-zhivoy .band-tint{background:linear-gradient(180deg,#FDF8F1 0%,var(--paper) 100%)} .stil-zhivoy .band-mist + .band-mist{background:var(--paper)} .stil-zhivoy .band-mist + .band-mist + .band-mist{background:var(--warm)} /* Линейка-надчерк заголовка полосы; растягивается при входе (.in). */ .stil-zhivoy .band .b-h{position:relative;padding-top:16px} .stil-zhivoy .band .b-h::before{content:"";position:absolute;left:0;top:0; width:36px;height:2px;background:var(--amber)} .stil-zhivoy .band.reveal .b-h::before{transform:scaleX(0);transform-origin:left center} .stil-zhivoy .band.reveal.in .b-h::before{ animation:zh-lineyka .5s cubic-bezier(.2,.7,.2,1) .2s forwards} /* Карточки: номер-декор, hover-подъём и линия сверху (референс bpride, приглушено до делового). */ .stil-zhivoy .feat{counter-reset:zh} .stil-zhivoy .feat-i{position:relative;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease} .stil-zhivoy .feat-i:hover{transform:translateY(-3px);box-shadow:var(--sh-l)} .stil-zhivoy .feat-i::before{counter-increment:zh;content:"0" counter(zh); position:absolute;right:14px;top:6px;font-size:40px;line-height:1; font-weight:800;letter-spacing:-.02em;color:var(--warm2);z-index:0} .stil-zhivoy .feat-i>*{position:relative;z-index:1} .stil-zhivoy .feat-i::after{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:var(--amber);transform:scaleX(0);transform-origin:left center; transition:transform .25s cubic-bezier(.2,.7,.2,1)} .stil-zhivoy .feat-i:hover::after{transform:scaleX(1)} /* Полоса первого экрана (без .reveal — её не прячем) играет при загрузке. */ .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i{ animation:zh-vhod .55s cubic-bezier(.2,.7,.2,1) backwards} .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i:nth-child(1){animation-delay:.45s} .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i:nth-child(2){animation-delay:.55s} .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i:nth-child(3){animation-delay:.65s} .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i:nth-child(4){animation-delay:.75s} /* Цифры уровня: тёплая черта, оранжевое значение, подъём каскадом. */ .stil-zhivoy .band .fact-v{color:var(--amber-d)} .stil-zhivoy .band .fact{border-top-color:var(--amber)} .stil-zhivoy .band.reveal .fact{opacity:0;transform:translateY(12px)} .stil-zhivoy .band.reveal.in .fact{opacity:1;transform:none; transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)} .stil-zhivoy .band.reveal.in .fact:nth-child(2){transition-delay:.1s} .stil-zhivoy .band.reveal.in .fact:nth-child(3){transition-delay:.2s} .stil-zhivoy .band.reveal.in .fact:nth-child(4){transition-delay:.3s} /* Фото кейса: тень, раскрытие маской снизу вверх, тихий hover 1.015. */ .stil-zhivoy .split img{border-radius:14px;box-shadow:0 24px 70px rgba(20,22,28,.16); transition:transform .25s ease} .stil-zhivoy .split img:hover{transform:scale(1.015)} .stil-zhivoy .band.reveal .split img{clip-path:inset(100% 0 0 0);opacity:0} .stil-zhivoy .band.reveal.in .split img{clip-path:inset(0 0 0 0);opacity:1; transition:clip-path .65s cubic-bezier(.2,.7,.2,1) .15s,opacity .3s ease .15s, transform .25s ease} /* Отзывы — «письмо ложится на стол»: вход, маркерная отметка, подпись последней. После появления полоса неподвижна (паспорт §7.2 п.3). */ .stil-zhivoy .rev{position:relative;overflow:hidden} .stil-zhivoy .rev::before{color:var(--amber)} .stil-zhivoy .rev::after{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px; background:var(--amber);border-radius:0 3px 3px 0; transform:scaleY(0);transform-origin:top center} .stil-zhivoy .band.reveal .rev{opacity:0;transform:translateY(14px)} .stil-zhivoy .band.reveal.in .rev{opacity:1;transform:none; transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)} .stil-zhivoy .band.reveal.in .rev:nth-child(2){transition-delay:.1s} .stil-zhivoy .band.reveal.in .rev:nth-child(3){transition-delay:.2s} .stil-zhivoy .band.reveal.in .rev::after{ animation:zh-otmetka .55s cubic-bezier(.2,.7,.2,1) .35s forwards} .stil-zhivoy .band.reveal.in .rev:nth-child(2)::after{animation-delay:.45s} .stil-zhivoy .band.reveal.in .rev:nth-child(3)::after{animation-delay:.55s} @keyframes zh-otmetka{to{transform:scaleY(1)}} .stil-zhivoy .rev-av{background:var(--amber-ghost);color:var(--amber-d)} .stil-zhivoy .band.reveal .rev-who{opacity:0} .stil-zhivoy .band.reveal.in .rev-who{opacity:1;transition:opacity .45s ease .6s} .stil-zhivoy .band.reveal.in .rev:nth-child(2) .rev-who{transition-delay:.7s} .stil-zhivoy .band.reveal.in .rev:nth-child(3) .rev-who{transition-delay:.8s} /* Тёмный финал: точечная фактура; сцена «выравнивание» (SVG вставляет site.js) — штрихи сходятся в линию, оранжевая точка; призыв собирается каскадом следом за сценой. */ .stil-zhivoy .band-dark{position:relative;overflow:hidden} .stil-zhivoy .band-dark::before{content:"";position:absolute;inset:0; background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px;pointer-events:none} .stil-zhivoy .band-dark .wrap{position:relative} .zh-vyravnivanie{display:block;width:min(300px,66%);height:auto;margin:0 0 18px} .zh-vyravnivanie line{stroke:rgba(255,255,255,.38);stroke-width:2} .zh-vyravnivanie .v-seg{opacity:0} .zh-vyravnivanie .v-itog{stroke:rgba(255,255,255,.9);stroke-width:2.4; stroke-dasharray:1;stroke-dashoffset:1} .zh-vyravnivanie .v-tochka{fill:var(--amber);opacity:0} .band-dark.in .zh-vyravnivanie .v-seg{ animation:zh-sbor .7s cubic-bezier(.2,.7,.2,1) forwards} .band-dark.in .zh-vyravnivanie .v-seg:nth-of-type(2){animation-delay:.08s} .band-dark.in .zh-vyravnivanie .v-seg:nth-of-type(3){animation-delay:.16s} .band-dark.in .zh-vyravnivanie .v-seg:nth-of-type(4){animation-delay:.24s} .band-dark.in .zh-vyravnivanie .v-itog{ animation:zh-liniya-itog .6s cubic-bezier(.2,.7,.2,1) .85s forwards} .band-dark.in .zh-vyravnivanie .v-tochka{ animation:zh-tochka .25s ease-out 1.45s forwards} @keyframes zh-sbor{from{opacity:0;transform:translateY(var(--sdvig,8px))} to{opacity:1;transform:none}} @keyframes zh-liniya-itog{to{stroke-dashoffset:0}} @keyframes zh-tochka{to{opacity:1}} .stil-zhivoy .band-dark.reveal .cta-in > *{opacity:0;transform:translateY(10px)} .stil-zhivoy .band-dark.reveal.in .cta-in > *{opacity:1;transform:none; transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)} .stil-zhivoy .band-dark.reveal.in .cta-in > *:nth-child(1){transition-delay:.15s} .stil-zhivoy .band-dark.reveal.in .cta-in > *:nth-child(2){transition-delay:.35s} .stil-zhivoy .band-dark.reveal.in .cta-in > *:nth-child(3){transition-delay:.95s} .stil-zhivoy .band-dark.reveal.in .cta-in > *:nth-child(4){transition-delay:1.05s} .stil-zhivoy .band-dark.reveal.in .cta-in > *:nth-child(5){transition-delay:1.15s} /* Спутник кнопки героя: виден после ухода героя, прячется у финала (классы zh-cta-vidna / zh-final-vidna ставит site.js по прокрутке). */ .zh-cta-bar{position:fixed;right:22px;bottom:22px;z-index:70;opacity:0; transform:translateY(14px);pointer-events:none; transition:opacity .25s ease,transform .25s ease} body.zh-cta-vidna:not(.zh-final-vidna) .zh-cta-bar{opacity:1;transform:none; pointer-events:auto} .zh-cta-bar .btn{box-shadow:0 14px 38px rgba(20,22,28,.24)} /* Проступание заголовка по буквам (Moving Letters #3 в деловом темпе: шаг 26ms; разбивку на .zh-slovo/.zh-bukva делает site.js). */ .zh-slovo{display:inline-block} .zh-bukva{opacity:0;animation:zh-prostup .8s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i,0) * 26ms)} @keyframes zh-prostup{to{opacity:1}} .stil-zhivoy .phero h1 .zh-bukva{animation-delay:calc(var(--i,0) * 26ms + .2s)} /* Лента логотипов: три дорожки с разной скоростью (иначе едут как один брусок), пауза под курсором, маска по краям. Отступ margin-ом, не gap: ширина дорожки должна делиться ровно пополам, иначе цикл дёргается. Утверждённое idle-исключение паспорта §7.2 п.4. Размер плитки 170x96 при поле 11 (заявка Дмитрия №17, 01.09): было 158x88/14, и логотип рисовался примерно 40x30 — пятая часть плитки. Половину проблемы давали сами файлы (квадрат 320x320, рисунок внутри на 44-59% высоты) — поля обрезаны, оригиналы в 05_ASSETS/logo-originaly-20260901. */ .logo-lenta{display:grid;gap:12px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .ll-ryad{overflow:hidden} .ll-bezhit{display:flex;width:max-content;animation:ll-edet 48s linear infinite} .ll-ryad:nth-child(2) .ll-bezhit{animation-duration:62s} .ll-ryad:nth-child(3) .ll-bezhit{animation-duration:54s} @keyframes ll-edet{from{transform:translateX(-50%)}to{transform:translateX(0)}} .logo-lenta:hover .ll-bezhit{animation-play-state:paused} .ll-bezhit img{flex:0 0 auto;width:170px;height:96px;object-fit:contain;padding:11px; background:var(--paper);border:1px solid var(--line);border-radius:14px; filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s; margin-right:12px} .ll-bezhit img:hover{filter:none;opacity:1} /* Отсчёт до события (дату отдаёт data-sobytie, строку вставляет site.js). */ .zh-otschet{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0; font-size:14.5px;font-weight:700;letter-spacing:.01em;color:var(--amber-d); animation:zh-vhod .6s cubic-bezier(.2,.7,.2,1) .36s both} .zh-otschet::before{content:"";width:7px;height:7px;border-radius:2px; background:var(--amber);flex:none} .stil-zhivoy .phero .proof{margin-top:10px} /* Вопросы раскрываются плавно (сетка 0fr→1fr; схлопывание мгновенно — details прячет содержимое сразу). */ .stil-zhivoy .faq .faq-a{display:grid;grid-template-rows:0fr;padding-bottom:0; overflow:hidden; transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),padding-bottom .32s ease} .stil-zhivoy .faq .faq-a > *{min-height:0} .stil-zhivoy .faq details[open] .faq-a{grid-template-rows:1fr;padding-bottom:20px} .stil-zhivoy .faq summary::after{border-color:var(--amber)} .stil-zhivoy .faq summary:hover{color:var(--amber-d)} /* Индикатор загрузки: только если разметка не готова за 500 мс (таймер в base.html). Сетка 3×3 (выбор владельца), цвет меняется оранжевый↔синий ровно в точке схлопывания — грязного перехода не видно. */ .zagr{position:fixed;inset:0;z-index:120;display:flex;align-items:center; justify-content:center;background:var(--paper); animation:zagr-vhod .2s ease both} .zagr[hidden]{display:none} .zagr-setka{width:44px;height:44px;display:grid; grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)} .zagr-setka i{background:var(--amber); animation:zagr-kub 1.3s infinite ease-in-out, zagr-cvet 2.6s infinite ease-in-out} .zagr-setka i:nth-child(4),.zagr-setka i:nth-child(8){animation-delay:.1s} .zagr-setka i:nth-child(1),.zagr-setka i:nth-child(5), .zagr-setka i:nth-child(9){animation-delay:.2s} .zagr-setka i:nth-child(2),.zagr-setka i:nth-child(6){animation-delay:.3s} .zagr-setka i:nth-child(3){animation-delay:.4s} .zagr-ushel{opacity:0;transition:opacity .25s ease} @keyframes zagr-vhod{from{opacity:0}to{opacity:1}} @keyframes zagr-kub{0%,70%,100%{transform:scale3D(1,1,1)} 35%{transform:scale3D(0,0,1)}} @keyframes zagr-cvet{ 0%,17.4%{background:var(--amber)} 17.5%,67.4%{background:var(--violet)} 67.5%,100%{background:var(--amber)} } /* ── Широкий экран: риски-разделители между цифрами. */ @media (min-width: 861px){ .stil-zhivoy .facts .fact{padding-left:18px;border-left:1px solid var(--warm-line)} .stil-zhivoy .facts .fact:first-child{padding-left:0;border-left:0} } /* ── Телефон: фото героя возвращается (родные пропорции — рамка 16:9 с object-fit:initial РАСТЯГИВАЛА кадр, баг №11); спутник скрыт (есть нижняя панель); поэлементное появление — каскад по входу полосы отыгрывал за сгибом, поэтому каждый элемент ждёт своего выхода на экран (.vidno-el ставит site.js; показ зеркалит скрытие той же силой селектора — короткое правило проигрывало и давало белые дыры). */ @media (max-width:900px){ .stil-zhivoy .phero-in{grid-template-columns:1fr} .stil-zhivoy .phero-img{display:block;margin-top:18px} .stil-zhivoy .phero-img img{width:100%;height:auto;max-height:none;border-radius:16px} } @media (max-width:860px){ .zh-cta-bar{display:none} .js-reveal body.stil-zhivoy .feat-i, .js-reveal body.stil-zhivoy .facts .fact, .js-reveal body.stil-zhivoy .tl .step, .js-reveal body.stil-zhivoy .rev, .js-reveal body.stil-zhivoy .ll-ryad{ opacity:0;transform:translateY(16px); transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)} .js-reveal body.stil-zhivoy .feat-i.vidno-el, .js-reveal body.stil-zhivoy .facts .fact.vidno-el, .js-reveal body.stil-zhivoy .tl .step.vidno-el, .js-reveal body.stil-zhivoy .rev.vidno-el, .js-reveal body.stil-zhivoy .ll-ryad.vidno-el, .js-reveal body.stil-zhivoy.pokazat-vsyo .feat-i, .js-reveal body.stil-zhivoy.pokazat-vsyo .facts .fact, .js-reveal body.stil-zhivoy.pokazat-vsyo .tl .step, .js-reveal body.stil-zhivoy.pokazat-vsyo .rev, .js-reveal body.stil-zhivoy.pokazat-vsyo .ll-ryad{opacity:1;transform:none} .stil-zhivoy .band.reveal .rev-who, .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i{opacity:1;transform:none;animation:none} } @media (max-width:560px){ .ll-bezhit img{width:132px;height:76px;padding:12px;margin-right:10px} .logo-lenta{gap:10px} } /* Без курсора линия карточки не ждёт наведения. */ @media (hover:none){ .stil-zhivoy .feat-i.vidno-el::after{transform:scaleX(1); transition:transform .45s cubic-bezier(.2,.7,.2,1) .1s} } /* ── Аварийный режим: сторож site.js ставит pokazat-vsyo, если контент уехал вверх скрытым. Перебивает ВСЕ прячущие правила слоя. */ body.stil-zhivoy.pokazat-vsyo .feat-i, body.stil-zhivoy.pokazat-vsyo .fact, body.stil-zhivoy.pokazat-vsyo .tl .step, body.stil-zhivoy.pokazat-vsyo .rev, body.stil-zhivoy.pokazat-vsyo .rev-who, body.stil-zhivoy.pokazat-vsyo .ll-ryad, body.stil-zhivoy.pokazat-vsyo .zh-bukva, body.stil-zhivoy.pokazat-vsyo .band-dark .cta-in > *{ opacity:1!important;transform:none!important} body.stil-zhivoy.pokazat-vsyo .split img{ opacity:1!important;clip-path:none!important;transform:none!important} body.stil-zhivoy.pokazat-vsyo .rev::after, body.stil-zhivoy.pokazat-vsyo .b-h::before, body.stil-zhivoy.pokazat-vsyo .phero h1::after{transform:none!important} /* ── Покой: reduced-motion выключает весь слой, контент виден сразу. */ @media (prefers-reduced-motion: reduce){ .stil-zhivoy .phero h1::after, .stil-zhivoy .phero .phero-in > div > h1,.stil-zhivoy .phero .lead, .stil-zhivoy .phero-cta,.stil-zhivoy .phero .proof,.stil-zhivoy .phero-img, .js-reveal body.stil-zhivoy .band:not(.reveal) .feat-i, .zh-otschet,.zagr,.zagr-setka i{animation:none} .stil-zhivoy .phero h1::after{transform:none} .stil-zhivoy .band.reveal .b-h::before{transform:none;animation:none} .stil-zhivoy .band.reveal .fact{opacity:1;transform:none} .stil-zhivoy .band.reveal .split img{clip-path:none;opacity:1} .zh-vyravnivanie .v-seg{opacity:1;transform:none;animation:none!important} .zh-vyravnivanie .v-itog{stroke-dashoffset:0;animation:none!important} .zh-vyravnivanie .v-tochka{opacity:1;animation:none!important} .zh-cta-bar{transition:none} .zh-bukva{opacity:1;animation:none} .stil-zhivoy .band-dark.reveal .cta-in > *{opacity:1;transform:none} .stil-zhivoy .feat-i::after{display:none} .stil-zhivoy .band.reveal .rev, .stil-zhivoy .band.reveal .rev-who{opacity:1;transform:none} .stil-zhivoy .rev::after{transform:scaleY(1);animation:none} .stil-zhivoy .faq .faq-a{transition:none} .ll-ryad{overflow:visible} .ll-bezhit{animation:none;width:auto;flex-wrap:wrap;justify-content:center} .ll-dubl{display:none} .logo-lenta{-webkit-mask-image:none;mask-image:none} .js-reveal body.stil-zhivoy .feat-i, .js-reveal body.stil-zhivoy .facts .fact, .js-reveal body.stil-zhivoy .tl .step, .js-reveal body.stil-zhivoy .rev, .js-reveal body.stil-zhivoy .ll-ryad{opacity:1;transform:none;transition:none} } /* ═══ СЛОЙ СОБЫТИЯ (stil-sobytie) ═══════════════════════════════════════════ Оформление страницы-анонса мероприятия: включается page.opts {"stil":"sobytie"} (сейчас — /moskva). Это перенос утверждённого макета 03_BUILD/_varianty-moskva/variant-b.html на разметку движка: свою вёрстку макет не приносит, повторяем его вид на тех блоках, что уже отдаёт page.html. ЗАКОН СЛОЯ: каждое правило начинается с body.stil-sobytie. Остальные 68 страниц про этот файл знать не должны. Классы .sob-* нигде больше не встречаются — их ставит слой события в site.js. ЯЗЫК МАКЕТА бумага тёплая (#FFFCF7), не белая; фиолетовый #5B4CE0 ведёт; янтарный #E8722A — только там, где нужно действие; единственный тёмный блок — «Что вы унесёте», финал светлый; заголовки плитой (Bitter), текст Onest (кириллица родная). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. Шрифты макета, свои. Внешний CDN сюда не годится: у сайта строгая политика (CSP default-src 'self'), запрос на fonts.googleapis.com браузер отклоняет — проверено в браузере, стиль просто не грузился. Держим файлы у себя: и политику не ослабляем, и от чужого сервиса страница не зависит. Bitter и Onest вариативные, поэтому один файл на подмножество и диапазон весов. Объявление шрифта ничего не грузит, пока его никто не просит: остальные 68 страниц ими не набраны и ни одного байта не скачают. font-display:swap — текст виден сразу. ── */ /* Bitter · cyrillic-ext */ @font-face{font-family:'Bitter';font-style:normal;font-weight:500 800;font-display:swap; src:url('/static/fonts/bitter-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} /* Bitter · cyrillic */ @font-face{font-family:'Bitter';font-style:normal;font-weight:500 800;font-display:swap; src:url('/static/fonts/bitter-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} /* Bitter · latin-ext */ @font-face{font-family:'Bitter';font-style:normal;font-weight:500 800;font-display:swap; src:url('/static/fonts/bitter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Bitter · latin */ @font-face{font-family:'Bitter';font-style:normal;font-weight:500 800;font-display:swap; src:url('/static/fonts/bitter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Onest · cyrillic-ext */ @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('/static/fonts/onest-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} /* Onest · cyrillic */ @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('/static/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} /* Onest · latin-ext */ @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('/static/fonts/onest-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* Onest · latin */ @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('/static/fonts/onest-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ── 1. Палитра. Подменяем ТОКЕНЫ базы, а не переписываем её правила: вся база ходит через var(--paper)/--mist/--line/--navy, поэтому одна подстановка на body разом переводит страницу в тёплую гамму, и каждая мелочь (выпадашка меню, поля формы, рамки) теплеет сама. ── */ body.stil-sobytie{ --paper:#FFFCF7; --mist:#FBF3EA; --mist2:#F1E7DA; --line:#EBDFD0; --line-d:rgba(255,255,255,.16); --navy:#1B1550; --navy2:#2A2270; --muted:#3E4353; --soft:#6C7284; --warm:#FBF3EA; --warm2:#F1E7DA; --warm-line:#EFE0CE; --sh:0 2px 6px rgba(40,25,10,.05),0 12px 30px rgba(40,25,10,.07); --sh-l:0 20px 54px rgba(40,25,10,.14); /* свои токены слоя */ --so-line2:#F0E6DA; --so-st1:#F7EFE3; --so-st2:#F1E7DA; --so-disp:"Bitter",Georgia,"Times New Roman",serif; --so-body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --so-ease:cubic-bezier(.2,.7,.3,1); background:var(--paper); font-family:var(--so-body); } /* ── 2. Типографика: заголовки плитой, текст Onest. ── */ body.stil-sobytie h1,body.stil-sobytie h2,body.stil-sobytie h3,body.stil-sobytie h4, body.stil-sobytie .b-h,body.stil-sobytie .b-sub,body.stil-sobytie .fact-v, body.stil-sobytie .feat-t,body.stil-sobytie .step-t,body.stil-sobytie .cta-t, body.stil-sobytie .rev-n,body.stil-sobytie .rev-av,body.stil-sobytie .ftr-h, body.stil-sobytie .logo,body.stil-sobytie .svc-t,body.stil-sobytie .form__t{ font-family:var(--so-disp);font-weight:800;letter-spacing:-.015em;line-height:1.1} body.stil-sobytie .band .b-h{font-size:clamp(26px,3.5vw,45px);line-height:1.08;max-width:22ch} body.stil-sobytie .band .b-h.wide{max-width:none} body.stil-sobytie .band p,body.stil-sobytie .lead{color:var(--muted)} body.stil-sobytie .lead{font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.55} /* Надзаголовок макета: капитель с янтарной точкой. Пустой (герой отдаёт его без текста) убираем совсем — иначе на странице повисает одна точка. */ body.stil-sobytie .b-eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--violet)} body.stil-sobytie .b-eyebrow::before{ content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none} body.stil-sobytie .b-eyebrow:empty{display:none} /* ── 3. Кнопки: таблетка; заливка янтарём только на действии. ── */ /* Форму таблетки берут ВСЕ кнопки, размер — только те, что в теле страницы. Служебные кнопки шапки трогать нельзя: у .hdr-cta свой компактный размер и своё `display:none` до 1040 px. Общее правило с display перебивало его по силе селектора — кнопка вылезала в шапку телефона и уводила страницу вбок на 56 px (поймано замером scrollWidth, а не на глаз). */ body.stil-sobytie .btn{border-radius:999px;font-family:var(--so-body);font-weight:700} body.stil-sobytie .main .btn{font-size:16px;padding:14px 26px} body.stil-sobytie .main .btn-lg{padding:16px 30px;font-size:16.5px} body.stil-sobytie .phero-cta .btn:not(.btn-ghost){ background:var(--amber);border-color:var(--amber);box-shadow:0 10px 24px rgba(232,114,42,.3)} body.stil-sobytie .phero-cta .btn:not(.btn-ghost):hover{ background:var(--amber-d);border-color:var(--amber-d); box-shadow:0 14px 30px rgba(232,114,42,.36)} body.stil-sobytie .btn-ghost{border-color:var(--line);color:var(--violet);background:transparent} body.stil-sobytie .btn-ghost:hover{background:rgba(91,76,224,.08);border-color:var(--violet)} /* Пульс главной кнопки — тёплый, как в макете (база даёт фиолетовый). */ @keyframes so-pulse{ 0%{box-shadow:0 10px 24px rgba(232,114,42,.3),0 0 0 0 rgba(232,114,42,.42)} 70%{box-shadow:0 10px 24px rgba(232,114,42,.3),0 0 0 18px rgba(232,114,42,0)} 100%{box-shadow:0 10px 24px rgba(232,114,42,.3),0 0 0 0 rgba(232,114,42,0)} } body.stil-sobytie .phero-cta .btn:not(.btn-ghost){animation:so-pulse 3.4s ease-out 1.2s infinite} body.stil-sobytie .phero-cta .btn:not(.btn-ghost):hover{animation-play-state:paused} /* ── 4. Шапка и полоса прочитанного. ── */ body.stil-sobytie .hdr{ background:rgba(255,252,247,.88);border-bottom:1px solid rgba(235,223,208,.9)} body.stil-sobytie .chital i{background:linear-gradient(90deg,var(--violet),var(--amber))} /* ── 5. Ритм полос. Макет: герой с фактами на бумаге → тёплый блок → бумага → ТЁМНЫЙ → градиент в тёплый → тёплый → бумага → тёплый. ── */ body.stil-sobytie .band-mist{background:var(--warm)} body.stil-sobytie .band-mist+.band-mist{background:var(--warm)} body.stil-sobytie .band-tint{background:linear-gradient(180deg,#FDF8F1 0%,var(--paper) 100%)} /* «Как проходит»: полоса перетекает из бумаги в тёплый — дальше «Кто ведёт». */ body.stil-sobytie .band:has(>.wrap>.tl){ background:linear-gradient(180deg,var(--paper) 0%,#FEF7EF 55%,var(--warm) 100%)} /* «Узнаёте себя?» и «Кто ведёт» — тёплые (в макете sec--warm). */ body.stil-sobytie .band-soft:has(.feat):has(.b-h.wide), body.stil-sobytie .band-soft:has(.split){background:var(--warm)} /* ── 6. Герой: коллаж с биркой даты. ── */ body.stil-sobytie .phero{ position:relative;overflow:hidden;border-bottom:0; padding:clamp(16px,2.6vw,38px) 0 clamp(38px,5vw,72px); background: radial-gradient(1100px 460px at 88% -10%,rgba(232,114,42,.10),transparent 62%), radial-gradient(760px 420px at -6% -12%,rgba(91,76,224,.13),transparent 64%), linear-gradient(180deg,var(--warm) 0%,var(--paper) 100%)} /* Пятна-подложки макета: медленно плавают, курсору не мешают. */ body.stil-sobytie .phero::before,body.stil-sobytie .phero::after{ content:"";position:absolute;border-radius:50%;filter:blur(70px); opacity:.5;pointer-events:none;z-index:0} body.stil-sobytie .phero::before{ width:420px;height:420px;background:#C9C2FF;top:-160px;left:-120px; animation:so-plyvet1 20s ease-in-out infinite} body.stil-sobytie .phero::after{ width:360px;height:360px;background:#F3DCC6;top:120px;right:-130px; animation:so-plyvet2 26s ease-in-out infinite} @keyframes so-plyvet1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(24px,26px,0)}} @keyframes so-plyvet2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-30px,18px,0)}} body.stil-sobytie .phero>.wrap{position:relative;z-index:1} body.stil-sobytie .phero-in{ grid-template-columns:1.03fr .97fr;gap:clamp(28px,4vw,58px);align-items:center} body.stil-sobytie .phero h1{ font-size:clamp(32px,5.4vw,62px);line-height:1.06;letter-spacing:-.025em; max-width:none;margin:.1em 0 0} body.stil-sobytie .phero .lead{margin-top:1.25rem;max-width:34em} body.stil-sobytie .phero-cta{margin-top:1.8rem;gap:12px 16px;align-items:center} body.stil-sobytie .proof{margin-top:20px;color:var(--soft)} body.stil-sobytie .proof li::before{ background:rgba(232,114,42,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23CC5C17' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat} /* Коллаж: главный кадр, врезка снизу-слева и бирка с датой сверху-справа. Врезку и бирку вставляет site.js (дату берёт из data-sobytie — считать её на сервере нельзя, страницы отдаются из кэша). */ body.stil-sobytie .phero-img{position:relative;padding:0 0 46px 30px} body.stil-sobytie .phero-img>img{ width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:26px; box-shadow:var(--sh-l);background:var(--warm)} body.stil-sobytie .sob-vrezka{ position:absolute;left:0;bottom:0;width:46%;aspect-ratio:4/3; border-radius:18px;overflow:hidden;border:6px solid var(--paper); box-shadow:var(--sh);background:var(--warm);display:block; animation:so-kachaet 7s ease-in-out infinite} body.stil-sobytie .sob-vrezka img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0} @keyframes so-kachaet{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}} body.stil-sobytie .sob-birka{ position:absolute;top:-14px;right:-6px;z-index:2; background:var(--amber);color:#fff;border-radius:16px;padding:.55rem .95rem; font-family:var(--so-disp);font-weight:800;font-size:1.02rem;line-height:1.1; box-shadow:0 10px 22px rgba(232,114,42,.32);transform:rotate(3.5deg); animation:so-birka 5.5s ease-in-out infinite} @keyframes so-birka{0%,100%{transform:rotate(3.5deg)}50%{transform:rotate(-2.5deg)}} /* Маркерный штрих под последним словом H1 — сигнатура макета (разбивку слова делает site.js, текст заголовка не меняется). */ body.stil-sobytie .sob-mk{position:relative;white-space:nowrap;display:inline-block} body.stil-sobytie .sob-mk svg{ position:absolute;left:-1.5%;bottom:-.16em;width:103%;height:.42em; overflow:visible;pointer-events:none} body.stil-sobytie .sob-mk svg path{ fill:none;stroke:var(--amber);stroke-width:8;stroke-linecap:round; vector-effect:non-scaling-stroke;opacity:.9; stroke-dasharray:1;stroke-dashoffset:1; animation:so-shtrih .85s var(--so-ease) .45s forwards} body.stil-sobytie .sob-mk svg path+path{stroke-width:5;opacity:.5;animation-delay:.7s} @keyframes so-shtrih{to{stroke-dashoffset:0}} @media(max-width:560px){ body.stil-sobytie .sob-mk svg path{stroke-width:6} body.stil-sobytie .sob-mk svg path+path{stroke-width:4} } /* ── 7. Цифры. Общий вид — карточка достижений («Кто ведёт»), а первая полоса под героем это плашки факта с чертой сверху. ── */ body.stil-sobytie .band .facts{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px)} body.stil-sobytie .band .fact{ background:var(--paper);border:1px solid var(--so-line2);border-top:1px solid var(--so-line2); border-radius:18px;padding:16px 16px 18px;box-shadow:0 4px 14px rgba(40,25,10,.04); transition:transform .28s var(--so-ease),box-shadow .28s ease,border-color .28s ease} body.stil-sobytie .band .fact:hover{ transform:translateY(-5px);box-shadow:0 16px 30px rgba(40,25,10,.11);border-color:var(--violet)} body.stil-sobytie .band .fact-v{ font-size:clamp(22px,2.1vw,29px);line-height:1;color:var(--violet); font-variant-numeric:tabular-nums} body.stil-sobytie .band .facts .fact:nth-child(2) .fact-v{color:var(--amber)} body.stil-sobytie .band .facts .fact:nth-child(4) .fact-v{ font-size:clamp(15px,1.45vw,20px);color:var(--navy)} body.stil-sobytie .band .fact-c{font-size:14.5px;color:var(--soft);margin-top:7px;line-height:1.35} /* Плашки факта под героем: продолжение первого экрана, поэтому без своего фона. */ body.stil-sobytie .phero+.band{ background:transparent;padding-top:clamp(24px,3.2vw,44px);padding-bottom:clamp(30px,4vw,56px)} body.stil-sobytie .phero+.band .fact{ background:var(--so-st1);border:1px solid var(--line);border-top:1px solid var(--line); border-radius:20px;padding:20px 18px;position:relative;overflow:hidden;box-shadow:none} /* Правило выше уменьшает ЧЕТВЁРТУЮ плашку под длинное «НАСДОБР» в блоке достижений. В блоке под героем четвёртая — «Разбор», и рядом с «Москва»/«Практикум» она выглядела недоделкой: 16 px против 25. Возвращаем ей размер соседей. */ body.stil-sobytie .phero+.band .facts .fact:nth-child(4) .fact-v{ font-size:clamp(20px,2.2vw,31px);color:var(--ink)} body.stil-sobytie .phero+.band .fact::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--violet);opacity:.85} body.stil-sobytie .phero+.band .fact:nth-child(2), body.stil-sobytie .phero+.band .fact:nth-child(4){background:var(--so-st2)} body.stil-sobytie .phero+.band .fact:nth-child(2)::before, body.stil-sobytie .phero+.band .fact:nth-child(4)::before{background:var(--amber)} body.stil-sobytie .phero+.band .fact:hover{ transform:translateY(-5px) rotate(-.7deg);box-shadow:0 16px 32px rgba(40,25,10,.13); border-color:var(--line)} body.stil-sobytie .phero+.band .fact-v{font-size:clamp(20px,2.2vw,31px);color:var(--ink)} body.stil-sobytie .phero+.band .facts .fact:nth-child(n) .fact-v{color:var(--ink)} body.stil-sobytie .phero+.band .facts .fact:first-child .fact-v{font-size:clamp(34px,3.6vw,48px)} body.stil-sobytie .phero+.band .fact-c{color:var(--muted);margin-top:6px} /* ── 8. «Узнаёте себя?»: стикеры с наклоном. ── */ body.stil-sobytie .feat{grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)} body.stil-sobytie .feat-i{ background:var(--so-st1);border:1px solid var(--line);border-radius:18px; padding:clamp(20px,2.4vw,30px);box-shadow:0 10px 26px rgba(40,25,10,.09); transform:rotate(-1.1deg); transition:transform .3s ease,box-shadow .3s ease} body.stil-sobytie .feat-i:nth-child(even){background:var(--so-st2);transform:rotate(.9deg)} body.stil-sobytie .feat-i:nth-child(3){transform:rotate(1.2deg)} body.stil-sobytie .feat-i:nth-child(4){transform:rotate(-.7deg)} body.stil-sobytie .feat-i:hover{ transform:rotate(0deg) translateY(-5px);box-shadow:0 20px 40px rgba(40,25,10,.16)} body.stil-sobytie .feat-t{font-size:clamp(17px,1.5vw,20px);font-weight:800;margin-bottom:.55rem} body.stil-sobytie .feat-i p{color:var(--muted);font-size:16px} /* База гасит рамку карточек в тёплой полосе — стикеру рамка нужна. */ body.stil-sobytie .band-mist .feat-i{border-color:var(--line)} /* ── 9. «Что вы унесёте»: единственный тёмный блок страницы. Опознаём его по содержимому, а не по номеру: это band-soft с карточками .feat, у которого НЕТ широкого заголовка (широкий — у «Узнаёте себя?» и «Кто ведёт»). Без :has() блок просто останется светлым — вёрстка не рассыпется. ── */ body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)){ background:var(--navy);color:#fff} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide))>.wrap{ display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide))>.wrap>*{margin-top:0} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .b-h{color:#fff;margin-bottom:0} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat{ grid-template-columns:1fr;gap:14px} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); border-radius:20px;padding:20px 22px 20px 82px;position:relative; transform:none;box-shadow:none; transition:background-color .25s ease,transform .25s ease} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i:hover{ transform:translateX(6px);background:rgba(255,255,255,.12);box-shadow:none} /* Иконка: в макете у каждой карточки свой рисунок, здесь один тёплый знак — движок иконки не хранит, а придумывать их за него слой не должен. */ body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i::before{ content:"";position:absolute;left:22px;top:20px;width:48px;height:48px; border-radius:15px;background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0A46A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L4.5 13.5H11l-1 8 8.5-11H12l1-7.5z'/%3E%3C/svg%3E") center/24px no-repeat; transition:transform .3s cubic-bezier(.34,1.5,.64,1)} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i:hover::before{ transform:scale(1.12) rotate(-8deg)} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-t{color:#fff;font-weight:700} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i p{color:rgba(255,255,255,.76)} /* ── 10. Лента кадров: .gal становится бегущей дорожкой (дубль кадров и классы .sob-* ставит site.js — бесшовный цикл без второго набора невозможен). Полосе снимаем рамку .wrap, заголовку возвращаем её собственными полями: vw-единицы не трогаем, поэтому полоса прокрутки не может вылезти вбок. ── */ body.stil-sobytie .sob-lenta-band>.wrap{max-width:none;padding-left:0;padding-right:0} body.stil-sobytie .sob-lenta-band>.wrap>:not(.sob-lenta){ max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px} body.stil-sobytie .sob-lenta{ overflow:hidden;padding:8px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} body.stil-sobytie .sob-lenta .gal{ display:flex;gap:14px;width:max-content;margin:0; grid-template-columns:none;columns:auto;align-items:stretch; animation:so-lenta calc(var(--so-kadrov,7) * 7.4s) linear infinite} /* Пауза ленты — по наведению и при заходе КЛАВИАТУРОЙ. Прежнее :focus-within залипало: после закрытия просмотрщика фокус штатно возвращается на плитку, лента считала это «человек рассматривает» и останавливалась насовсем — владелец 26.08: «закрыл картинку, анимация зависла на месте». :focus-visible при мышином клике не выставляется, а при обходе клавишей Tab — да, поэтому доступность не пострадала. */ body.stil-sobytie .sob-lenta:hover .gal, body.stil-sobytie .sob-lenta:has(:focus-visible) .gal{animation-play-state:paused} /* Лента едет СЛЕВА НАПРАВО (решение владельца 26.08): дорожка стартует сдвинутой на свой второй комплект кадров и возвращается в ноль. Кадры продублированы, комплекты одинаковые — поэтому в момент перезапуска картинка совпадает сама с собой и шва не видно. */ @keyframes so-lenta{ from{transform:translateX(calc(-50% - 7px))} to{transform:translateX(0)} } body.stil-sobytie .sob-lenta .gal-i{ flex:0 0 auto;width:clamp(200px,25vw,330px);margin:0; border-radius:18px;overflow:hidden;box-shadow:var(--sh);background:var(--warm); transform-origin:center; transition:transform .45s var(--so-ease),box-shadow .45s ease} /* Кадр под курсором как будто вынули из стопки: приподняли, увеличили и наклонили. Соседи наклоняются в другую сторону — стопка раскрывается. */ body.stil-sobytie .sob-lenta .gal-i:hover, body.stil-sobytie .sob-lenta .gal-i:has(:focus-visible){ transform:scale(1.07) rotate(-1.6deg);box-shadow:0 26px 54px rgba(40,25,10,.26); position:relative;z-index:2} body.stil-sobytie .sob-lenta .gal-i:nth-child(even):hover, body.stil-sobytie .sob-lenta .gal-i:nth-child(even):has(:focus-visible){ transform:scale(1.07) rotate(1.6deg)} body.stil-sobytie .sob-lenta .gal-i a{border-radius:18px} body.stil-sobytie .sob-lenta .gal-i img{ width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border:0;border-radius:18px; box-shadow:none;transition:transform .6s var(--so-ease)} body.stil-sobytie .sob-lenta .gal-i:hover img, body.stil-sobytie .sob-lenta .gal-i:has(:focus-visible) img{transform:scale(1.08)} @media(max-width:560px){ body.stil-sobytie .sob-lenta .gal-i{width:clamp(180px,62vw,260px)} } /* ── 11. «Как проходит»: этапы карточками с янтарным номером и пунктиром. ── */ body.stil-sobytie .tl{gap:20px} body.stil-sobytie .tl .step{ background:var(--paper);border:1px solid var(--so-line2);border-radius:20px; padding:20px 22px 20px 82px;box-shadow:0 6px 18px rgba(40,25,10,.05); transition:transform .28s var(--so-ease),box-shadow .28s ease} body.stil-sobytie .tl .step:last-child{padding-bottom:20px} body.stil-sobytie .tl .step:hover{transform:translateX(6px);box-shadow:0 14px 30px rgba(40,25,10,.11)} body.stil-sobytie .tl .step::before{ left:22px;top:20px;width:44px;height:44px;background:var(--amber); font-family:var(--so-disp);font-weight:800;font-size:1.15rem; transition:transform .3s cubic-bezier(.34,1.5,.64,1),background-color .2s ease} body.stil-sobytie .tl .step:hover::before{transform:scale(1.1) rotate(-8deg);background:var(--amber-d)} body.stil-sobytie .tl .step::after{ left:43px;top:auto;bottom:-21px;height:21px;width:0;background:none; border-left:2px dashed var(--amber);opacity:.5} /* Полоску прогресса под этапами (.shagi-liniya от anim.js) убираем: в макете ход работы показывает пунктир между карточками, а сплошная фиолетовая черта во всю ширину резала полосу пополам. */ body.stil-sobytie .shagi-liniya{display:none} body.stil-sobytie .step-t{font-size:clamp(16.5px,1.5vw,19px);font-weight:700;margin-bottom:6px} body.stil-sobytie .tl .step p{font-size:16px;color:var(--muted)} /* ── 12. «Кто ведёт»: фото слева, текст справа (в макете так). ── */ body.stil-sobytie .split{grid-template-columns:.92fr 1.08fr;align-items:center} body.stil-sobytie .split>img{ order:-1;border-radius:26px;box-shadow:var(--sh-l);aspect-ratio:16/11; transition:transform .8s var(--so-ease)} body.stil-sobytie .split>img:hover{transform:scale(1.04)} /* ── 13. Отзывы: карточка с фиолетово-янтарной чертой сверху. ── */ body.stil-sobytie .revs{gap:clamp(16px,2.2vw,26px)} body.stil-sobytie .rev{ /* .rev — это blockquote, и браузер сам даёт ему margin:1em 40px: карточки стояли уже своей колонки на 40 px с каждой стороны. В макете они во всю ширину — поля снимаем (замечено замером, глазом почти незаметно). */ margin:0; background:var(--paper);border:1px solid var(--so-line2);border-radius:24px; padding:clamp(24px,3vw,34px);box-shadow:var(--sh);overflow:hidden; transition:transform .3s var(--so-ease),box-shadow .3s ease} body.stil-sobytie .rev:hover{transform:translateY(-6px);box-shadow:var(--sh-l)} /* Кавычка-глиф макету не нужна — вместо неё черта во всю ширину карточки. */ body.stil-sobytie .rev::before{ content:"";position:absolute;left:0;right:0;top:0;height:6px;width:auto; font-size:0;opacity:1;border-radius:0; background:linear-gradient(90deg,var(--violet),var(--amber))} body.stil-sobytie .rev p{color:var(--muted);font-size:16.5px} body.stil-sobytie .rev-who{ gap:13px;margin-top:20px;padding-top:18px;border-top:1px solid var(--so-line2)} body.stil-sobytie .rev-av{ width:48px;height:48px;background:var(--violet);color:#fff;font-size:16px; transition:transform .3s cubic-bezier(.34,1.5,.64,1)} body.stil-sobytie .revs .rev:nth-child(2) .rev-av{background:var(--violet-d)} body.stil-sobytie .rev:hover .rev-av{transform:scale(1.08) rotate(-6deg)} body.stil-sobytie .rev-n{font-size:16.5px;font-weight:700} body.stil-sobytie .rev-r{font-size:14px;color:var(--soft);margin-top:2px} /* ── 14. Вопросы: карточками, знак «плюс» янтарём. ── */ body.stil-sobytie .faq{border-top:0;display:grid;gap:12px;max-width:860px} body.stil-sobytie .band-mist+.band-mist .faq{border-top:0;padding-top:0} body.stil-sobytie .faq details{ background:var(--paper);border:1px solid var(--so-line2);border-bottom:1px solid var(--so-line2); border-radius:18px;box-shadow:0 4px 14px rgba(40,25,10,.04); transition:box-shadow .28s ease} body.stil-sobytie .faq details:hover, body.stil-sobytie .faq details[open]{box-shadow:0 12px 26px rgba(40,25,10,.09)} body.stil-sobytie .faq summary{ padding:19px 60px 19px 22px;border-radius:18px; font-family:var(--so-disp);font-weight:700;font-size:17px} body.stil-sobytie .faq summary:hover{color:var(--violet)} body.stil-sobytie .faq summary::after{ content:"";right:22px;top:50%;margin-top:-7.5px;width:15px;height:15px;border:0; transform:none; background: linear-gradient(var(--amber),var(--amber)) center/15px 2.6px no-repeat, linear-gradient(var(--amber),var(--amber)) center/2.6px 15px no-repeat; transition:transform .3s ease} body.stil-sobytie .faq details[open] summary::after{transform:rotate(135deg);top:50%} body.stil-sobytie .faq .faq-a{padding:0 22px 22px;color:var(--muted);max-width:none} /* Плавное раскрытие: сетка 0fr→1fr (схлопывание details мгновенно). */ body.stil-sobytie .faq .faq-a{ display:grid;grid-template-rows:0fr;padding-bottom:0;overflow:hidden; transition:grid-template-rows .32s var(--so-ease),padding-bottom .32s ease} body.stil-sobytie .faq .faq-a>*{min-height:0} body.stil-sobytie .faq details[open] .faq-a{grid-template-rows:1fr;padding-bottom:22px} /* ── 15. Разделы (строка доверия) — плитками, как в макете. ── */ body.stil-sobytie .trust-links{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)} body.stil-sobytie .trust-links .btn{ display:grid;place-items:center;text-align:center;min-height:88px;padding:18px 14px; border:1px solid var(--line);border-radius:16px;background:var(--paper); font-family:var(--so-disp);font-weight:700;font-size:16.5px;color:var(--ink); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease} body.stil-sobytie .trust-links .btn:hover{ transform:translateY(-4px);border-color:var(--violet);color:var(--violet); background:var(--paper);box-shadow:0 16px 32px rgba(40,25,10,.12)} /* ── 16. Финал: в макете он светлый, а тёмный — блок «Что вы унесёте». Полосу-призыв движка разворачиваем в белую карточку на тёплом фоне. ── */ body.stil-sobytie .band-dark{ background:var(--warm);color:var(--ink);position:relative;overflow:hidden; padding-left:20px;padding-right:20px} /* Кадр из зала за карточкой: сам снимок и тёплая вуаль поверх него. Класс и ссылку на файл ставит site.js — без него полоса просто остаётся тёплой. */ body.stil-sobytie .band-dark.sob-final-foto::before{ content:"";position:absolute;inset:0;z-index:0; background-image:var(--so-final-foto);background-size:cover;background-position:center 34%} body.stil-sobytie .band-dark.sob-final-foto::after{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(251,243,234,.62),rgba(251,243,234,.9) 58%,var(--warm))} body.stil-sobytie .band-dark>.wrap{position:relative;z-index:1} body.stil-sobytie .band-dark .b-h,body.stil-sobytie .band-dark p{color:var(--ink)} body.stil-sobytie .band-dark .cta-in{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px); align-items:start;align-content:start; grid-template-areas:"zag forma" "knopka forma" "podpis forma"; max-width:980px;background:var(--paper);border-radius:30px; padding:clamp(24px,3.4vw,50px);box-shadow:var(--sh-l)} body.stil-sobytie .band-dark .cta-t{ grid-area:zag;color:var(--ink);font-size:clamp(24px,3vw,40px);max-width:none;line-height:1.08} body.stil-sobytie .band-dark .cta-in>.btn{ grid-area:knopka;justify-self:start;align-self:start;margin-top:6px; background:var(--amber);border-color:var(--amber);color:#fff; box-shadow:0 10px 24px rgba(232,114,42,.3); animation:so-pulse 3.4s ease-out 1.2s infinite} body.stil-sobytie .band-dark .cta-in>.btn:hover{ background:var(--amber-d);border-color:var(--amber-d);color:#fff} body.stil-sobytie .band-dark .cta-or{ grid-area:podpis;flex-basis:auto;text-align:left;margin-top:6px; color:var(--soft);font-size:15.5px} body.stil-sobytie .band-dark .lf{ grid-area:forma;flex-basis:auto;margin:0;max-width:none;width:100%; border-left:1px solid var(--so-line2);padding-left:clamp(0px,3vw,40px)} body.stil-sobytie .band-dark .lf-grid{grid-template-columns:1fr} body.stil-sobytie .band-dark .lf input:not([type=checkbox]){ background:var(--warm);border:1.5px solid var(--line);color:var(--ink); border-radius:14px;min-height:48px} body.stil-sobytie .band-dark .lf ::placeholder{color:#A9A296} body.stil-sobytie .band-dark .lf input:focus-visible{ outline:none;border-color:var(--violet);background:var(--paper); box-shadow:0 0 0 4px rgba(91,76,224,.16)} body.stil-sobytie .band-dark .lf-f>span{color:var(--muted);font-weight:600} body.stil-sobytie .band-dark .lf-agree{color:var(--soft);margin-left:0;margin-right:0} body.stil-sobytie .band-dark .lf-agree input{accent-color:var(--violet)} body.stil-sobytie .band-dark .lf-agree a{color:var(--violet);text-decoration:underline} body.stil-sobytie .band-dark .lf-send{justify-content:flex-start;flex-direction:column;align-items:stretch;gap:10px} body.stil-sobytie .band-dark .lf-send .btn{ background:var(--violet);border-color:var(--violet);color:#fff;width:100%; box-shadow:0 10px 24px rgba(91,76,224,.28)} body.stil-sobytie .band-dark .lf-send .btn:hover{background:var(--violet-d);border-color:var(--violet-d)} body.stil-sobytie .band-dark .lf-note{color:var(--soft);text-align:center} body.stil-sobytie .band-dark .lf-err{color:#B3362F} body.stil-sobytie .band-dark .lf-ok{color:#1D7A45} /* ── 17. Подвал: тёмно-фиолетовый, как в макете (через --navy он уже такой). Воздух под последней полосой убираем: в макете подвал начинается сразу за призывом, а светлая щель между тёплой полосой и подвалом читалась как случайный шов. ── */ body.stil-sobytie .ftr{margin-top:0} body.stil-sobytie .main{padding-bottom:0} /* ── 18. Появление при прокрутке. Правило слоя: каждому прячущему правилу — зеркальный показ той же силы, иначе блок останется невидимым. Полосы получают .reveal/.in от site.js; тёплые (band-mist/band-tint) он не наблюдает — там ничего не прячем. ── */ .js-reveal body.stil-sobytie .reveal .fact{opacity:0;transform:translateY(14px)} .js-reveal body.stil-sobytie .reveal.in .fact{ opacity:1;transform:none; transition:opacity .5s var(--so-ease),transform .5s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .fact:nth-child(2){transition-delay:.08s} .js-reveal body.stil-sobytie .reveal.in .fact:nth-child(3){transition-delay:.16s} .js-reveal body.stil-sobytie .reveal.in .fact:nth-child(n+4){transition-delay:.24s} .js-reveal body.stil-sobytie .reveal .tl .step{opacity:0;transform:translateX(26px)} .js-reveal body.stil-sobytie .reveal.in .tl .step{ opacity:1;transform:none; transition:opacity .55s var(--so-ease),transform .55s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .tl .step:nth-child(2){transition-delay:.08s} .js-reveal body.stil-sobytie .reveal.in .tl .step:nth-child(3){transition-delay:.16s} .js-reveal body.stil-sobytie .reveal.in .tl .step:nth-child(n+4){transition-delay:.24s} .js-reveal body.stil-sobytie .reveal .rev{opacity:0;transform:translateY(16px)} .js-reveal body.stil-sobytie .reveal.in .rev{ opacity:1;transform:none; transition:opacity .5s var(--so-ease),transform .5s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .rev:nth-child(2){transition-delay:.1s} .js-reveal body.stil-sobytie .reveal .trust-links .btn{opacity:0;transform:translateY(14px)} .js-reveal body.stil-sobytie .reveal.in .trust-links .btn{ opacity:1;transform:none; transition:opacity .5s var(--so-ease),transform .5s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .trust-links .btn:nth-child(2){transition-delay:.07s} .js-reveal body.stil-sobytie .reveal.in .trust-links .btn:nth-child(3){transition-delay:.14s} .js-reveal body.stil-sobytie .reveal.in .trust-links .btn:nth-child(4){transition-delay:.21s} /* Селектор появления сильнее правил :hover — возвращаем отклик на курсор. */ .js-reveal body.stil-sobytie .reveal.in .fact:hover{transform:translateY(-5px)} .js-reveal body.stil-sobytie .phero+.band.reveal.in .fact:hover{transform:translateY(-5px) rotate(-.7deg)} .js-reveal body.stil-sobytie .reveal.in .tl .step:hover{transform:translateX(6px)} .js-reveal body.stil-sobytie .reveal.in .rev:hover{transform:translateY(-6px)} .js-reveal body.stil-sobytie .reveal.in .trust-links .btn:hover{transform:translateY(-4px)} /* Стикеры: общий каскад базы ставит на .in transform:none — наклон бы пропал. Возвращаем его теми же ступенями, силой селектора выше. */ .js-reveal body.stil-sobytie .reveal .feat-i{opacity:0;transform:translateY(22px) rotate(0deg) scale(.97)} .js-reveal body.stil-sobytie .reveal.in .feat-i{opacity:1;transform:rotate(-1.1deg); transition:opacity .55s var(--so-ease),transform .55s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(even){transform:rotate(.9deg)} .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(3){transform:rotate(1.2deg)} .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(4){transform:rotate(-.7deg)} .js-reveal body.stil-sobytie .reveal.in .feat-i:hover{transform:rotate(0deg) translateY(-5px)} /* В тёмном блоке карточки не наклоняются. */ .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal.in .feat-i, .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal.in .feat-i:nth-child(even), .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal.in .feat-i:nth-child(3){ transform:none} .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal .feat-i{ transform:translateX(-26px)} .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal.in .feat-i:hover{ transform:translateX(6px)} /* Черта под заголовком полосы дорисовывается при входе. */ body.stil-sobytie .band .b-h{position:relative;padding-top:19px} body.stil-sobytie .band .b-h::before{ content:"";position:absolute;left:0;top:0;width:40px;height:3px; background:var(--amber);border-radius:2px} /* Где полоса уже открыта надзаголовком, черта лишняя — знак один. */ body.stil-sobytie .b-eyebrow+.b-h{padding-top:0} body.stil-sobytie .b-eyebrow+.b-h::before{display:none} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .b-h::before{background:#F0A46A} .js-reveal body.stil-sobytie .reveal .b-h::before{transform:scaleX(0);transform-origin:left center} .js-reveal body.stil-sobytie .reveal.in .b-h::before{ transform:scaleX(1);transition:transform .5s var(--so-ease) .15s} /* ── 19. Адаптив. ── */ @media(max-width:1000px){ body.stil-sobytie .band-dark .cta-in{grid-template-columns:1fr; grid-template-areas:"zag" "knopka" "podpis" "forma"} body.stil-sobytie .band-dark .lf{border-left:0;border-top:1px solid var(--so-line2); padding-left:0;padding-top:26px} } @media(max-width:960px){ body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide))>.wrap{grid-template-columns:1fr} body.stil-sobytie .split{grid-template-columns:1fr} } @media(max-width:900px){ /* Фото героя база прячет на телефоне — макету оно нужно. */ body.stil-sobytie .phero-in{grid-template-columns:1fr} body.stil-sobytie .phero-img{display:block;margin-top:24px;max-width:620px;padding:0 0 40px 26px} body.stil-sobytie .phero-img>img{border-radius:20px} } @media(max-width:860px){ body.stil-sobytie .band .facts{grid-template-columns:1fr 1fr} } @media(max-width:760px){ body.stil-sobytie .trust-links{grid-template-columns:1fr 1fr} } @media(max-width:720px){ body.stil-sobytie .feat{grid-template-columns:1fr} body.stil-sobytie .feat-i, .js-reveal body.stil-sobytie .reveal.in .feat-i, .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(even), .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(3), .js-reveal body.stil-sobytie .reveal.in .feat-i:nth-child(4){transform:none} body.stil-sobytie .feat-i:hover, .js-reveal body.stil-sobytie .reveal.in .feat-i:hover{transform:translateY(-4px)} body.stil-sobytie .sob-birka{font-size:.92rem;padding:.45rem .8rem} } @media(max-width:560px){ body.stil-sobytie .tl .step{padding:64px 18px 20px} body.stil-sobytie .tl .step::before{left:18px;top:16px} body.stil-sobytie .tl .step::after{left:39px} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i{padding:76px 20px 20px} body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)) .feat-i::before{left:20px;top:18px} } /* ── 20. Покой: prefers-reduced-motion гасит ВСЁ движение слоя, вёрстка при этом остаётся на месте и ничего не спрятано. ── */ @media (prefers-reduced-motion: reduce){ body.stil-sobytie .phero::before,body.stil-sobytie .phero::after, body.stil-sobytie .sob-vrezka,body.stil-sobytie .sob-birka, body.stil-sobytie .phero-cta .btn:not(.btn-ghost), body.stil-sobytie .band-dark .cta-in>.btn{animation:none} body.stil-sobytie .sob-birka{transform:rotate(3.5deg)} body.stil-sobytie .sob-mk svg path{stroke-dashoffset:0;animation:none} /* Лента кадров стоит и листается пальцем/колесом. */ body.stil-sobytie .sob-lenta{ -webkit-mask-image:none;mask-image:none;overflow-x:auto;scroll-snap-type:x mandatory} body.stil-sobytie .sob-lenta .gal{animation:none;width:auto} body.stil-sobytie .sob-lenta .gal-i{scroll-snap-align:center;transition:none} body.stil-sobytie .sob-lenta .gal-i:hover, body.stil-sobytie .sob-lenta .gal-i:has(:focus-visible){transform:none;box-shadow:var(--sh)} body.stil-sobytie .sob-lenta .gal-i img{transition:none} body.stil-sobytie .sob-lenta .gal-i:hover img{transform:none} /* Стикеры встают ровно — так решено в макете (бирка даты наклон сохраняет: там гасится только качание, сам поворот остаётся). */ body.stil-sobytie .feat-i, body.stil-sobytie .feat-i:nth-child(even), body.stil-sobytie .feat-i:nth-child(3), body.stil-sobytie .feat-i:nth-child(4){transform:none} body.stil-sobytie .feat-i,body.stil-sobytie .fact,body.stil-sobytie .tl .step, body.stil-sobytie .rev,body.stil-sobytie .split>img,body.stil-sobytie .faq details, body.stil-sobytie .faq .faq-a,body.stil-sobytie .trust-links .btn, body.stil-sobytie .rev-av,body.stil-sobytie .tl .step::before{transition:none} .js-reveal body.stil-sobytie .reveal .fact, .js-reveal body.stil-sobytie .reveal .tl .step, .js-reveal body.stil-sobytie .reveal .rev, .js-reveal body.stil-sobytie .reveal .trust-links .btn, .js-reveal body.stil-sobytie .reveal .feat-i, .js-reveal body.stil-sobytie .band-soft:has(.feat):not(:has(.b-h.wide)).reveal .feat-i{ opacity:1;transform:none;transition:none} .js-reveal body.stil-sobytie .reveal .b-h::before{transform:none} } /* ═══ СЛОЙ СОБЫТИЯ · ГЛАВНАЯ (продолжение) ══════════════════════════════════ Слой выше писался под состав страницы мероприятия. У главной свой герой (.hero вместо .phero) и свои полосы: услуги карточками, квиз, перечень тем, видео-визитка, три шага и призыв под ними. Ниже — тот же язык макета, натянутый на эти узлы. ЗАКОН ТОТ ЖЕ: каждое правило начинается с body.stil-sobytie. Ни одна из остальных 68 страниц ничего отсюда не получает. Три файла подключаются ПОСЛЕ site.css (design/money/galleries) и при равных селекторах бьют его порядком. Здесь это не мешает: у каждого правила впереди body.stil-sobytie — по силе селектора оно выше любого их правила из одного класса. Проверено вычисленными стилями, не на глаз. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 21. Герой главной. Повторяем первый экран мероприятия: тёплая подложка с плывущими пятнами, янтарная кнопка действия, фото на плите. Бирки с датой здесь нет и быть не может — у главной нет события. ── */ body.stil-sobytie .hero{ position:relative;overflow:hidden;border-bottom:0; background: radial-gradient(1100px 460px at 88% -10%,rgba(232,114,42,.10),transparent 62%), radial-gradient(760px 420px at -6% -12%,rgba(91,76,224,.13),transparent 64%), linear-gradient(180deg,var(--warm) 0%,var(--paper) 100%)} body.stil-sobytie .hero::before,body.stil-sobytie .hero::after{ content:"";position:absolute;border-radius:50%;filter:blur(70px); opacity:.5;pointer-events:none;z-index:0} body.stil-sobytie .hero::before{ width:420px;height:420px;background:#C9C2FF;top:-160px;left:-120px; animation:so-plyvet1 20s ease-in-out infinite} body.stil-sobytie .hero::after{ width:360px;height:360px;background:#F3DCC6;top:120px;right:-130px; animation:so-plyvet2 26s ease-in-out infinite} body.stil-sobytie .hero-in{ position:relative;z-index:1; grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,58px); padding:clamp(18px,2.8vw,40px) 20px clamp(38px,5vw,72px)} body.stil-sobytie .hero h1{ font-size:clamp(31px,5vw,58px);line-height:1.06;letter-spacing:-.025em; max-width:none;margin:.14em 0 0} body.stil-sobytie .hero .lead{margin-top:1.25rem;max-width:34em} body.stil-sobytie .hero-cta{margin-top:1.8rem;gap:12px 16px;align-items:center} /* Метки над заголовком: тёплая плашка вместо холодной сиреневой. */ body.stil-sobytie .chips{gap:9px;margin-bottom:12px} body.stil-sobytie .chip{ background:var(--so-st1);border:1px solid var(--warm-line);color:var(--muted); font-family:var(--so-body);font-size:13px;font-weight:600;letter-spacing:0; padding:7px 14px; transition:border-color .25s ease,color .25s ease,transform .25s var(--so-ease)} body.stil-sobytie .chip:hover{ border-color:var(--violet);color:var(--violet);transform:translateY(-2px)} /* Кнопка действия — янтарём и с тем же пульсом, что на мероприятии. Базовый пульс (cta-pulse, фиолетовый) гасим: он бы шёл поверх. */ body.stil-sobytie .hero-cta .btn:not(.btn-ghost){ background:var(--amber);border-color:var(--amber);color:#fff; box-shadow:0 10px 24px rgba(232,114,42,.3); animation:so-pulse 3.4s ease-out 1.2s infinite} body.stil-sobytie .hero-cta .btn:not(.btn-ghost):hover{ background:var(--amber-d);border-color:var(--amber-d);color:#fff; box-shadow:0 14px 30px rgba(232,114,42,.36);animation-play-state:paused} /* Фото на тёплой плите — коллаж макета без второго кадра: врезку брать неоткуда (галереи на главной нет), поэтому глубину даёт плита. */ body.stil-sobytie .hero-img{ position:relative;width:-moz-fit-content;width:fit-content;margin-left:auto} body.stil-sobytie .hero-img::before{ content:"";position:absolute;inset:30px -16px -16px 24px;z-index:0; border-radius:28px;background:var(--so-st2);border:1px solid var(--warm-line); transform:rotate(2.4deg);animation:so-plita 9s ease-in-out infinite} @keyframes so-plita{ 0%,100%{transform:rotate(2.4deg) translate3d(0,0,0)} 50%{transform:rotate(1.3deg) translate3d(0,-8px,0)}} body.stil-sobytie .hero-img>img{ position:relative;z-index:1;border-radius:26px;box-shadow:var(--sh-l); max-width:400px} /* Вход первого экрана: та же волна, что у слоя «живой», но своим шагом. Анимация работает без скрипта и всегда заканчивается видимым состоянием (both) — спрятать содержимое она не может. */ @keyframes so-vhod{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}} @keyframes so-vhod-foto{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}} body.stil-sobytie .hero .chips{animation:so-vhod .55s var(--so-ease) both} body.stil-sobytie .hero h1{animation:so-vhod .6s var(--so-ease) .07s both} body.stil-sobytie .hero .lead{animation:so-vhod .6s var(--so-ease) .15s both} body.stil-sobytie .hero-cta{animation:so-vhod .6s var(--so-ease) .24s both} body.stil-sobytie .hero .proof{animation:so-vhod .6s var(--so-ease) .32s both} body.stil-sobytie .hero-img{animation:so-vhod-foto .75s var(--so-ease) .12s both} /* ── 22. Полоса цифр под героем — продолжение первого экрана, плашками с чертой сверху (на мероприятии это правило висит на .phero+.band). ── */ body.stil-sobytie .hero+.band{ background:transparent; padding-top:clamp(8px,1.4vw,20px);padding-bottom:clamp(34px,4.4vw,62px)} body.stil-sobytie .hero+.band .fact{ background:var(--so-st1);border:1px solid var(--line);border-top:1px solid var(--line); border-radius:20px;padding:20px 18px;position:relative;overflow:hidden;box-shadow:none} body.stil-sobytie .hero+.band .fact::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--violet);opacity:.85} body.stil-sobytie .hero+.band .fact:nth-child(2), body.stil-sobytie .hero+.band .fact:nth-child(4){background:var(--so-st2)} body.stil-sobytie .hero+.band .fact:nth-child(2)::before, body.stil-sobytie .hero+.band .fact:nth-child(4)::before{background:var(--amber)} body.stil-sobytie .hero+.band .fact:hover{ transform:translateY(-5px) rotate(-.7deg);box-shadow:0 16px 32px rgba(40,25,10,.13); border-color:var(--line)} /* Разноцветья не нужно: цифры одного цвета, разницу несёт черта сверху. */ body.stil-sobytie .hero+.band .facts .fact .fact-v{ font-size:clamp(21px,2.3vw,32px);color:var(--ink)} body.stil-sobytie .hero+.band .facts .fact:first-child .fact-v{font-size:clamp(30px,3.4vw,46px)} body.stil-sobytie .hero+.band .fact-c{color:var(--muted);margin-top:6px;font-size:14.5px} /* Две строки боли под цифрами — на бумаге, тем же кеглем, что лид. */ body.stil-sobytie .pain-lead{ margin-top:clamp(22px,2.6vw,34px);color:var(--muted); font-size:clamp(16px,1.25vw,17.5px);line-height:1.6;max-width:66ch} /* ── 23. Услуги карточками. Тот же приём, что у плашек: тёплая карточка, подъём и фиолетовая рамка под курсором, стрелка уезжает. ── */ body.stil-sobytie .svc{gap:clamp(14px,1.8vw,20px)} body.stil-sobytie .svc-card{ background:var(--paper);border:1px solid var(--so-line2);border-radius:22px; padding:clamp(20px,2.2vw,26px);gap:9px; box-shadow:0 4px 14px rgba(40,25,10,.04); transition:transform .3s var(--so-ease),box-shadow .3s ease,border-color .3s ease} body.stil-sobytie .svc-card:hover{ transform:translateY(-6px);border-color:var(--violet); box-shadow:0 18px 36px rgba(40,25,10,.13)} body.stil-sobytie .svc-t{font-size:clamp(17px,1.4vw,19.5px);line-height:1.14} body.stil-sobytie .svc-d{font-size:15px;color:var(--muted);line-height:1.55} body.stil-sobytie .svc-go{ font-family:var(--so-body);font-weight:700;font-size:14.5px;color:var(--violet); display:inline-block;transition:transform .3s var(--so-ease),color .3s ease} body.stil-sobytie .svc-card:hover .svc-go{transform:translateX(5px);color:var(--amber-d)} /* ── 24. Квиз: та же карточка, что у макета, ответы — плитками. ── */ body.stil-sobytie .quiz-box{ background:var(--paper);border:1px solid var(--so-line2);border-radius:26px; padding:clamp(24px,3vw,34px);box-shadow:var(--sh);max-width:820px} body.stil-sobytie .quiz-n{ font-family:var(--so-body);font-size:12.5px;font-weight:600;letter-spacing:.14em; color:var(--violet)} body.stil-sobytie .quiz-q{ font-family:var(--so-disp);font-weight:800;letter-spacing:-.015em; font-size:clamp(19px,1.9vw,24px);line-height:1.15;margin:8px 0 18px} body.stil-sobytie .quiz-opts{gap:11px} body.stil-sobytie .quiz-opt{ font-family:var(--so-body);font-weight:600;font-size:16px; border:1px solid var(--line);border-radius:16px;background:var(--so-st1); padding:15px 18px; transition:transform .25s var(--so-ease),border-color .25s ease,background-color .25s ease} body.stil-sobytie .quiz-opt:hover{ border-color:var(--violet);background:var(--paper);transform:translateX(6px); box-shadow:0 10px 22px rgba(40,25,10,.09)} body.stil-sobytie .quiz-res-e{ font-family:var(--so-body);font-size:12.5px;font-weight:600;letter-spacing:.14em; color:var(--amber-d);text-transform:uppercase} body.stil-sobytie .quiz-res-t{ font-family:var(--so-disp);font-weight:800;letter-spacing:-.015em; font-size:clamp(21px,2.2vw,28px);line-height:1.1;margin:6px 0 8px} body.stil-sobytie .quiz-res-d{color:var(--muted)} body.stil-sobytie .quiz-form-t{ border-top:1px solid var(--so-line2);font-weight:600;font-size:15.5px;color:var(--muted)} body.stil-sobytie .quiz-again{color:var(--soft);font-family:var(--so-body);font-weight:600} body.stil-sobytie .quiz-again:hover{color:var(--violet)} /* ── 25. Перечень тем — единственная тёмная полоса главной. На мероприятии ритм держит «Что вы унесёте»; здесь тот же приём и тот же вид: пункты плитками на тёмно-фиолетовом, знак — янтарный. Опознаём по содержимому: .band-tint с перечнем .tick бывает только у главной (блокам kind=quote движок отдаёт ту же полосу, но без .tick). Без :has() полоса просто остаётся светлой — ничего не рассыпается. ── */ body.stil-sobytie .band-tint:has(.tick){ background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);color:#fff} body.stil-sobytie .band-tint:has(.tick) .b-h{color:#fff} body.stil-sobytie .band-tint:has(.tick) .b-eyebrow{color:#C9C2FF} body.stil-sobytie .band-tint:has(.tick) .tick{gap:12px} body.stil-sobytie .band-tint:has(.tick) .tick li{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); border-radius:18px;padding:17px 20px 17px 60px;color:rgba(255,255,255,.88); font-size:16.5px;line-height:1.35; transition:transform .28s var(--so-ease),background-color .28s ease} body.stil-sobytie .band-tint:has(.tick) .tick li:hover{ transform:translateX(6px);background:rgba(255,255,255,.13)} body.stil-sobytie .band-tint:has(.tick) .tick li::before{ left:20px;top:50%;margin-top:-12px;width:24px;height:24px; background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; transition:transform .3s cubic-bezier(.34,1.5,.64,1)} body.stil-sobytie .band-tint:has(.tick) .tick li:hover::before{transform:scale(1.12) rotate(-8deg)} /* Перечни на светлых полосах (блоки kind=list) — тот же знак, фиолетом. */ body.stil-sobytie .tick li{line-height:1.5} body.stil-sobytie .tick li::before{ width:22px;height:22px;top:.15em;background-size:12px; transition:transform .3s cubic-bezier(.34,1.5,.64,1)} body.stil-sobytie .tick li:hover::before{transform:scale(1.12) rotate(-8deg)} /* ── 26. Видео-визитка: та же плитка, что у кадров ленты. ── */ body.stil-sobytie .vid{ border-radius:24px;box-shadow:var(--sh-l);background:var(--so-st2); transition:transform .4s var(--so-ease),box-shadow .4s ease} body.stil-sobytie .vid:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(40,25,10,.22)} body.stil-sobytie .vid img{transition:transform .6s var(--so-ease)} body.stil-sobytie .vid:hover img{transform:scale(1.04)} body.stil-sobytie .vid-play{transition:transform .3s cubic-bezier(.34,1.5,.64,1)} body.stil-sobytie .vid:hover .vid-play{transform:scale(1.14)} body.stil-sobytie .vid+.vid{margin-top:clamp(14px,1.6vw,20px)} body.stil-sobytie .vid-note{ margin-top:14px;font-size:15px;color:var(--soft);font-family:var(--so-body)} body.stil-sobytie .vid-note a{color:var(--violet);font-weight:600} /* Карточка-ссылка для площадок без превью (ВК и прочие). */ body.stil-sobytie .vid-ext{background:var(--so-st1);border:1px solid var(--line)} body.stil-sobytie .vid-ext-t{font-family:var(--so-body);font-weight:700} /* ── 27. Три шага. Слой выше делает из .step карточку с номером слева и пунктиром вниз — это раскладка колонкой. На главной шаги стоят в ряд (.tl-flat), номер в них статичен: возвращаем нормальные поля, иначе слева зияет 82 px пустоты (замечено замером, не на глаз). ── */ body.stil-sobytie .tl.tl-flat{gap:clamp(14px,1.8vw,20px)} body.stil-sobytie .tl-flat .step{ padding:clamp(22px,2.2vw,28px);border-radius:22px;border-color:var(--so-line2)} body.stil-sobytie .tl-flat .step:last-child{padding-bottom:clamp(22px,2.2vw,28px)} body.stil-sobytie .tl-flat .step::before{ position:static;left:auto;top:auto;margin:0 0 15px} body.stil-sobytie .tl-flat .step:hover{ transform:translateY(-6px);box-shadow:0 16px 34px rgba(40,25,10,.12)} body.stil-sobytie .tl-flat .step p{font-size:15.5px} /* Призыв под шагами: белая карточка с янтарным действием — та же мысль, что у финала мероприятия, только в один столбец. */ body.stil-sobytie .step-cta{ margin-top:clamp(24px,3vw,38px);display:grid;justify-items:center;gap:16px; text-align:center;background:var(--paper);border:1px solid var(--so-line2); border-radius:26px;padding:clamp(22px,3vw,34px); box-shadow:0 8px 26px rgba(40,25,10,.06)} body.stil-sobytie .step-anchor{margin:0;max-width:54ch;color:var(--muted)} body.stil-sobytie .step-cta .btn{ background:var(--amber);border-color:var(--amber);color:#fff; box-shadow:0 10px 24px rgba(232,114,42,.3); animation:so-pulse 3.4s ease-out 1.2s infinite} body.stil-sobytie .step-cta .btn:hover{ background:var(--amber-d);border-color:var(--amber-d);color:#fff; animation-play-state:paused} /* ── 28. Виды блоков, которых у мероприятия не было ─────────────────────── Полосу движок соберёт из них ровно так же, как на остальных страницах; слой заранее одевает их в свой язык, чтобы главная не рассыпалась разнобоем, если владелец добавит такой блок. ── */ /* Карточки-перечисления (kind=cards). */ body.stil-sobytie .cards{gap:clamp(10px,1.3vw,14px)} body.stil-sobytie .card{ background:var(--so-st1);border:1px solid var(--line);border-radius:16px; padding:16px 18px;font-size:15.5px;line-height:1.45;box-shadow:none; transition:transform .28s var(--so-ease),box-shadow .28s ease,border-color .28s ease} body.stil-sobytie .card:nth-child(even){background:var(--so-st2)} body.stil-sobytie .card:hover{ transform:translateY(-4px);border-color:var(--violet); box-shadow:0 14px 28px rgba(40,25,10,.11)} /* Галереи сеткой. Решение по галереям главной: бегущая лента — приём для живых кадров с занятий, а сертификаты и благодарности человек листает глазами и хочет разглядеть, поэтому здесь остаётся сетка. Наклон при наведении тот же, что у кадров ленты, — язык один. Лента живёт внутри .sob-lenta, сетка — прямым ребёнком .wrap: селекторы не пересекаются, страница мероприятия ничего отсюда не берёт. */ body.stil-sobytie .wrap>.gal{gap:clamp(12px,1.5vw,18px)} body.stil-sobytie .wrap>.gal .gal-i{ transform-origin:center; transition:transform .4s var(--so-ease),box-shadow .4s ease} body.stil-sobytie .wrap>.gal .gal-i:hover, body.stil-sobytie .wrap>.gal .gal-i:has(:focus-visible){ transform:scale(1.045) rotate(-1.4deg);position:relative;z-index:2} body.stil-sobytie .wrap>.gal .gal-i:nth-child(even):hover, body.stil-sobytie .wrap>.gal .gal-i:nth-child(even):has(:focus-visible){ transform:scale(1.045) rotate(1.4deg)} body.stil-sobytie .wrap>.gal .gal-i a{border-radius:18px} body.stil-sobytie .wrap>.gal img{ border-radius:18px;border:1px solid var(--so-line2);background:var(--warm); box-shadow:var(--sh);transition:box-shadow .4s ease} body.stil-sobytie .wrap>.gal .gal-i:hover img{box-shadow:0 22px 46px rgba(40,25,10,.22)} body.stil-sobytie .gal-cap{color:var(--soft);font-size:14px} /* ── 29. Появление в тёплых полосах главной. Общий наблюдатель их не берёт (на мероприятии там ничего не пряталось), поэтому у главной свой — site.js, блок «Появление в тёплых полосах». Прячем не полосу, а её карточки: если скрипт не доработает, текст всё равно на месте. Каждому прячущему правилу — зеркальный показ той же силы. ── */ html.sob-anim body.stil-sobytie .sob-zhdet .fact, html.sob-anim body.stil-sobytie .sob-zhdet .faq details, html.sob-anim body.stil-sobytie .sob-zhdet .ll-ryad, html.sob-anim body.stil-sobytie .sob-zhdet .tick li, html.sob-anim body.stil-sobytie .sob-zhdet .card, html.sob-anim body.stil-sobytie .sob-zhdet .wrap>.gal .gal-i{ opacity:0;transform:translateY(15px)} html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .fact, html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .faq details, html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .ll-ryad, html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .tick li, html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .card, html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .wrap>.gal .gal-i{ opacity:1;transform:none; transition:opacity .5s var(--so-ease),transform .5s var(--so-ease)} /* Ступени задержки. Пишем обычным :nth-child (не «:nth-child(N of S)»): старый браузер, не знающий формы «of», выбросил бы ВЕСЬ список селекторов разом — вместе с показом. .fact лежат в .facts, .tick li в .tick, details в .faq — по позиции среди детей счёт получается тот же. */ html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .fact:nth-child(2), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .tick li:nth-child(2), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .card:nth-child(2), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .faq details:nth-child(2), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .ll-ryad:nth-child(2){transition-delay:.08s} html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .fact:nth-child(3), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .tick li:nth-child(3), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .card:nth-child(3), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .faq details:nth-child(3), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .ll-ryad:nth-child(3){transition-delay:.16s} html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .fact:nth-child(n+4), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .tick li:nth-child(n+4), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .card:nth-child(n+4), html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .faq details:nth-child(n+4){transition-delay:.24s} /* Показ сильнее :hover — возвращаем отклик на курсор. */ html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .fact:hover{transform:translateY(-5px)} html.sob-anim body.stil-sobytie .hero+.band.sob-zhdet.sob-vidno .fact:hover{ transform:translateY(-5px) rotate(-.7deg)} html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .tick li:hover{transform:translateX(6px)} html.sob-anim body.stil-sobytie .sob-zhdet.sob-vidno .card:hover{transform:translateY(-4px)} /* Появление на бумажных полосах (их ведёт общий наблюдатель) — узлы, которых у мероприятия не было. Тоже парами «спрятать → показать». */ .js-reveal body.stil-sobytie .reveal .svc-card{opacity:0;transform:translateY(16px)} .js-reveal body.stil-sobytie .reveal.in .svc-card{ opacity:1;transform:none; transition:opacity .5s var(--so-ease),transform .5s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .svc-card:nth-child(2){transition-delay:.07s} .js-reveal body.stil-sobytie .reveal.in .svc-card:nth-child(3){transition-delay:.14s} .js-reveal body.stil-sobytie .reveal.in .svc-card:nth-child(n+4){transition-delay:.21s} .js-reveal body.stil-sobytie .reveal.in .svc-card:hover{transform:translateY(-6px)} .js-reveal body.stil-sobytie .reveal .vid{opacity:0;transform:translateY(18px)} .js-reveal body.stil-sobytie .reveal.in .vid{ opacity:1;transform:none; transition:opacity .55s var(--so-ease),transform .55s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .vid:hover{transform:translateY(-4px)} /* Шаги в ряд едут снизу, а не сбоку: колонок три, боковой сдвиг их рвал. */ .js-reveal body.stil-sobytie .reveal .tl-flat .step{opacity:0;transform:translateY(18px)} .js-reveal body.stil-sobytie .reveal.in .tl-flat .step{ opacity:1;transform:none; transition:opacity .55s var(--so-ease),transform .55s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .tl-flat .step:hover{transform:translateY(-6px)} .js-reveal body.stil-sobytie .reveal .step-cta{opacity:0;transform:translateY(16px)} .js-reveal body.stil-sobytie .reveal.in .step-cta{ opacity:1;transform:none; transition:opacity .5s var(--so-ease) .2s,transform .5s var(--so-ease) .2s} /* ── 30. Адаптив главной. ── */ @media(max-width:1000px){ body.stil-sobytie .svc{grid-template-columns:1fr 1fr} } @media(max-width:900px){ body.stil-sobytie .hero-in{grid-template-columns:1fr;padding-top:clamp(16px,4vw,26px)} body.stil-sobytie .hero-img{margin-left:0;margin-bottom:8px} body.stil-sobytie .hero-img>img{max-width:250px;border-radius:22px} body.stil-sobytie .hero-img::before{inset:22px -12px -12px 18px;border-radius:24px} body.stil-sobytie .hero h1{font-size:clamp(29px,7.4vw,44px)} } @media(max-width:760px){ body.stil-sobytie .svc{grid-template-columns:1fr} body.stil-sobytie .band-tint:has(.tick) .tick li{padding:15px 16px 15px 54px;font-size:16px} } @media(max-width:560px){ body.stil-sobytie .quiz-box{padding:20px 18px;border-radius:22px} body.stil-sobytie .quiz-opt{padding:13px 15px;font-size:15.5px} body.stil-sobytie .step-cta{padding:20px 18px;border-radius:22px} body.stil-sobytie .step-cta .btn{width:100%} body.stil-sobytie .chip{font-size:12.5px;padding:6px 12px} } /* ── 31. Покой: prefers-reduced-motion гасит движение и здесь. Вёрстка остаётся на месте, ничего не спрятано. ── */ @media (prefers-reduced-motion: reduce){ body.stil-sobytie .hero::before,body.stil-sobytie .hero::after, body.stil-sobytie .hero-img::before, body.stil-sobytie .hero .chips,body.stil-sobytie .hero h1, body.stil-sobytie .hero .lead,body.stil-sobytie .hero-cta, body.stil-sobytie .hero .proof,body.stil-sobytie .hero-img, body.stil-sobytie .hero-cta .btn:not(.btn-ghost), body.stil-sobytie .step-cta .btn{animation:none} body.stil-sobytie .hero-img::before{transform:rotate(2.4deg)} body.stil-sobytie .chip,body.stil-sobytie .svc-card,body.stil-sobytie .svc-go, body.stil-sobytie .quiz-opt,body.stil-sobytie .vid,body.stil-sobytie .vid img, body.stil-sobytie .vid-play,body.stil-sobytie .card, body.stil-sobytie .band-tint:has(.tick) .tick li, body.stil-sobytie .tick li::before, body.stil-sobytie .wrap>.gal .gal-i,body.stil-sobytie .wrap>.gal img{transition:none} html.sob-anim body.stil-sobytie .sob-zhdet .fact, html.sob-anim body.stil-sobytie .sob-zhdet .faq details, html.sob-anim body.stil-sobytie .sob-zhdet .ll-ryad, html.sob-anim body.stil-sobytie .sob-zhdet .tick li, html.sob-anim body.stil-sobytie .sob-zhdet .card, html.sob-anim body.stil-sobytie .sob-zhdet .wrap>.gal .gal-i, .js-reveal body.stil-sobytie .reveal .svc-card, .js-reveal body.stil-sobytie .reveal .vid, .js-reveal body.stil-sobytie .reveal .tl-flat .step, .js-reveal body.stil-sobytie .reveal .step-cta{ opacity:1;transform:none;transition:none} } /* ── 32. Штрих под последним словом заголовка главной ──────────────────── Штрих рисуется пунктиром длиной в сам путь (pathLength=1) при vector-effect:non-scaling-stroke. Пока рамка svg близка к пропорциям viewBox, длина совпадает; у главной последнее слово шире (300 px против 247), рамка растягивается по горизонтали в 1,29 раза — и браузер отмеряет пунктир по нерастянутой длине. Итог: штрих обрывался на 79 % слова (замерено getBoundingClientRect по путям, не на глаз). Берём пунктир с запасом — путь закрашивается целиком при любом слове; сама отрисовка при этом заканчивается чуть раньше конца анимации. Ниже слова, чем на мероприятии: у «модератор» есть выносные элементы («д», «р»), и штрих на прежней высоте резал их пополам. ── */ body.stil-sobytie .hero .sob-mk svg{bottom:-.23em} body.stil-sobytie .hero .sob-mk svg path{ stroke-dasharray:2;stroke-dashoffset:2;animation-name:so-shtrih-shirokiy} @keyframes so-shtrih-shirokiy{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){ body.stil-sobytie .hero .sob-mk svg path{stroke-dashoffset:0;animation:none} } /* ═══ 33. Слой события: программа, цены, кейсы ═══════════════════════════════ Эти три вида блоков живут на самых денежных страницах — тренинги и услуги — и до раскатки слоя на весь сайт оставались в холодном виде посреди тёплых полос. Язык тот же, что у остальных: тёплая подложка, черта-акцент, номер янтарным, подъём при наведении. */ /* Программа тренинга: настоящая последовательность, поэтому номера уместны. */ body.stil-sobytie .prog{gap:12px} body.stil-sobytie .prog li{ background:var(--paper);border:1px solid var(--line);border-radius:18px; padding:20px 22px 20px 72px; transition:transform .3s var(--so-ease),box-shadow .3s ease,border-color .3s ease} body.stil-sobytie .prog li:hover{ transform:translateY(-3px);border-color:var(--violet); box-shadow:0 14px 30px rgba(40,25,10,.1)} body.stil-sobytie .prog li::before{ left:20px;top:18px;width:40px;height:40px;border-radius:13px; display:grid;place-items:center; background:var(--amber);color:#fff; font-family:var(--so-disp);font-weight:800;font-size:1.05rem; transition:transform .3s cubic-bezier(.34,1.5,.64,1),background-color .2s ease} body.stil-sobytie .prog li:hover::before{ transform:scale(1.1) rotate(-8deg);background:var(--amber-d)} body.stil-sobytie .prog-t{font-family:var(--so-disp);font-weight:800;font-size:1.08rem} /* Цены: карточка-счёт. Сумма — единственное, что должно бросаться в глаза. */ body.stil-sobytie .price{ background:var(--paper);border:1px solid var(--line);border-radius:24px; box-shadow:0 10px 30px rgba(40,25,10,.07);position:relative;overflow:hidden} body.stil-sobytie .price::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--violet)} body.stil-sobytie .price-row{border-color:var(--so-line2)} body.stil-sobytie .price-row dt{ font-family:var(--so-body);letter-spacing:.04em;text-transform:uppercase; color:var(--ink-3)} body.stil-sobytie .price-row dd{ font-family:var(--so-disp);font-weight:700;color:var(--ink)} body.stil-sobytie .price .btn{ background:var(--amber);border-color:var(--amber);color:#fff; box-shadow:0 10px 24px rgba(232,114,42,.28)} body.stil-sobytie .price .btn:hover{background:var(--amber-d);border-color:var(--amber-d)} /* Кейсы: доказательство. Результат — тёплой плашкой внизу карточки. */ body.stil-sobytie .cases{gap:16px} body.stil-sobytie .case{ background:var(--paper);border:1px solid var(--line);border-radius:22px; transition:transform .3s var(--so-ease),box-shadow .3s ease,border-color .3s ease} body.stil-sobytie .case:hover{ transform:translateY(-4px);border-color:var(--violet); box-shadow:0 16px 34px rgba(40,25,10,.11)} body.stil-sobytie .case-who{ font-family:var(--so-disp);font-weight:800;color:var(--violet)} body.stil-sobytie .case-k{color:var(--amber-d);letter-spacing:.06em} body.stil-sobytie .case-r{ font-family:var(--so-disp);font-weight:800;color:var(--ink); background:var(--so-st1);border-radius:14px;padding:14px 16px;margin-top:auto} body.stil-sobytie .case-r::before{color:var(--amber-d);letter-spacing:.06em} /* Появление — как у остальных карточек слоя. */ .js-reveal body.stil-sobytie .reveal .prog li, .js-reveal body.stil-sobytie .reveal .cases .case{opacity:0;transform:translateY(16px)} .js-reveal body.stil-sobytie .reveal.in .prog li, .js-reveal body.stil-sobytie .reveal.in .cases .case{ opacity:1;transform:none; transition:opacity .55s var(--so-ease),transform .55s var(--so-ease)} .js-reveal body.stil-sobytie .reveal.in .prog li:nth-child(2), .js-reveal body.stil-sobytie .reveal.in .cases .case:nth-child(2){transition-delay:.08s} .js-reveal body.stil-sobytie .reveal.in .prog li:nth-child(n+3), .js-reveal body.stil-sobytie .reveal.in .cases .case:nth-child(n+3){transition-delay:.16s} @media (prefers-reduced-motion: reduce){ body.stil-sobytie .prog li,body.stil-sobytie .case, body.stil-sobytie .prog li::before{transition:none} body.stil-sobytie .prog li:hover,body.stil-sobytie .case:hover{transform:none} } /* ── 34. Юридические документы (tip-dokument) ───────────────────────────── Оферта, политика: длинный сплошной текст, который читают глазами, а иногда и юрист. Требования другие, чем у продающей страницы: • узкая колонка (~68 знаков) — глаз не теряет строку на 1280px; • маркетинговые плашки в шапке договора неуместны — «300+ компаний-клиентов» над текстом обязательств выглядит как реклама внутри контракта; • нумерованные разделы отбиты, продолжения пунктов (.b-cont) — с отступом, чтобы перечисление не читалось как самостоятельный пункт. Правила намеренно НЕ привязаны к stil-*: документ должен читаться одинаково при любом оформлении сайта. */ body.tip-dokument .phero .proof{display:none} body.tip-dokument .band .wrap>p, body.tip-dokument .band .wrap>h3.b-sub{max-width:620px} body.tip-dokument .band .wrap>h2.b-h{max-width:620px} body.tip-dokument .band .wrap>p{ font-size:15.5px;line-height:1.72;color:var(--muted,#3E4353);margin:0 0 .85em} body.tip-dokument .band .wrap>h3.b-sub{ font-size:20px;line-height:1.3;margin:2.1em 0 .7em;padding-top:.9em; border-top:1px solid var(--line,#E8E2DA)} body.tip-dokument .band .wrap>h3.b-sub:first-of-type{border-top:0;padding-top:0;margin-top:.4em} body.tip-dokument .band .wrap>p.b-cont{ padding-left:1.35em;margin-bottom:.5em;color:var(--muted,#5C6373)} body.tip-dokument .band .wrap>p.b-cont::before{ content:"—";position:absolute;margin-left:-1.35em;opacity:.45} body.tip-dokument .band .wrap>p.b-cont{position:relative} body.tip-dokument .band .wrap>p>a.btn{margin-top:1.6em} @media (max-width:700px){ body.tip-dokument .band .wrap>p{font-size:15px;line-height:1.66} body.tip-dokument .band .wrap>h3.b-sub{font-size:18px;margin-top:1.7em} } /* ── 35. Набор строк: сироты, переносы, длинные слова ───────────────────── Дополняет типограф на сервере (tipograf.py вешает предлоги неразрывным пробелом). Здесь — то, что решается только браузером: • text-wrap:balance — заголовок не оставляет одно слово на последней строке (замер 26.08: 103 таких «сироты» по сайту); • text-wrap:pretty — то же для абзацев, но без перекройки всего блока; • hyphens:auto в узкой колонке документа — юридические слова длинные, без переносов правый край рвётся клочьями (работает по lang="ru"); • overflow-wrap — длинный URL внутри текста не растягивает страницу (в оферте адреса сайтов идут прямо в абзацах). */ h1,h2,h3,.b-h,.b-sub,.feat-t,.step-t,.phero h1{text-wrap:balance} p,li,.lead,.card{text-wrap:pretty} p,li,.lead,td,.b-sub{overflow-wrap:break-word} body.tip-dokument .band .wrap>p{hyphens:auto;-webkit-hyphens:auto} /* ── 36. Подвал: соцсети и кликабельные заголовки колонок (заявка №15) ──── Дмитрий приложил подвал старой Тильды как образец: там были соцсети и три раздела, которых у нас не было. Иконки стоят ПОД колонками, а не в них: в ряду колонок они читались бы как ещё одна рубрика, а это другой жанр — выход с сайта, а не навигация внутри него. */ .ftr-soc{display:flex;gap:10px;padding-bottom:26px;flex-wrap:wrap} .ftr-soc .soc{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;padding:0;border-radius:50%; border:1px solid var(--line-d,rgba(255,255,255,.18));color:#C7CBD6; transition:color .2s,border-color .2s,background .2s} .ftr-soc .soc svg{width:21px;height:21px} .ftr-soc .soc:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)} .ftr-soc .soc:focus-visible{outline:2px solid #fff;outline-offset:2px} .ftr-h a{display:inline;padding:0;color:#fff} .ftr-h a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} /* Восемь колонок: на десктопе по четыре в два ряда, так подвал не превращается в узкие полоски по одному слову в строке. */ @media(min-width:1041px){.ftr-grid{grid-template-columns:repeat(4,1fr)}}