/* ============================================================ motion.css — фирменные моушн-механики «Ночной галереи» Ванильный CSS, без CDN. Пара к motion.js (подключать в ПОСЛЕ tokens/base или инлайн-стилей страницы, чтобы .rv-l/.rv-r переопределяли базовый .rv). Механики: прелоадер-сборка, переходы страниц, чёрная точка, sticky-карусель, reveal v2, фулскрин-hero. ============================================================ */ /* ---------- Анти-hscroll: pre-reveal сдвиги .rv-l/.rv-r не расширяют scrollWidth ---------- */ html,body{overflow-x:clip} /* ---------- 0. Мгновенная шторка (до DOMContentLoaded) ---------- */ html.ml-hold::before{ content:"";position:fixed;inset:0;background:#000;z-index:998; } /* ---------- 1. Прелоадер: сборка эмблемы + леттеринга ---------- */ .ml-preloader{ position:fixed;inset:0;z-index:999;background:#000; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:26px; } .ml-preloader.ml-out{ transition:transform .6s cubic-bezier(.7,0,.2,1); transform:translateY(-101%); } /* Короткая шторка внутренних переходов уходит быстрее */ .ml-preloader.ml-short.ml-out{transition-duration:.4s} .ml-preloader .ml-emblem{ height:clamp(56px,12vw,84px);width:auto; opacity:0;transform:scale(.82);filter:invert(1) blur(12px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease; } .ml-preloader.ml-run .ml-emblem{ opacity:1;transform:none;filter:invert(1) blur(0); } .ml-word{ display:flex;flex-wrap:nowrap; font-family:'Unbounded',sans-serif;font-weight:700; /* ИСКЛЮЧЕНИЕ typography.md: локап прелоадера, не текст. Кегль привязан к высоте эмблемы (clamp(56px,12vw,84px)) и к white-space:nowrap — токен ломает строку. */ font-size:clamp(13px,3.6vw,22px);letter-spacing:.14em; text-transform:uppercase;color:#fff;white-space:nowrap; } /* Буквы въезжают из рассыпанного состояния: blur + scale + разлёт. Начальные смещения (--dx/--dy/--ds) и задержка (--d) — инлайн из JS. */ .ml-word span{ display:inline-block; opacity:0; transform:translate(var(--dx,0),var(--dy,20px)) scale(var(--ds,1.4)); filter:blur(9px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease; transition-delay:var(--d,0s); } .ml-preloader.ml-run .ml-word span{opacity:1;transform:none;filter:none} /* Короткая версия (внутренние переходы): без разлёта, быстрый фейд */ .ml-preloader.ml-short .ml-emblem, .ml-preloader.ml-short .ml-word span{ transition-duration:.22s;transition-delay:0s; transform:none;filter:invert(1) blur(0); } .ml-preloader.ml-short .ml-word span{filter:none} /* Уход со страницы: fade-out перед навигацией */ .ml-leave{ position:fixed;inset:0;z-index:999;background:#000; opacity:0;pointer-events:none; transition:opacity .32s ease; } .ml-leave.on{opacity:1;pointer-events:auto} /* ---------- 2. Scroll-reveal v2: вылет слева/справа + blur ---------- */ /* Совместимо со старым .rv: вешается как class="rv rv-l" — базовый IntersectionObserver страницы добавит .in, эти правила победят каскадом. */ .rv-l,.rv-r{ opacity:0;filter:blur(6px); transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1),filter .55s cubic-bezier(.23,1,.32,1); } .rv-l{transform:translateX(-44px)} .rv-r{transform:translateX(44px)} .rv-l.in,.rv-r.in{opacity:1;transform:none;filter:none} /* ---------- 3. Sticky-карусель (.sticky-rail) ---------- */ .sticky-rail{height:300vh;padding-top:0;padding-bottom:0} .sticky-rail .rail-pin{ position:sticky;top:0;height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center;gap:30px; padding-top:76px;padding-bottom:24px; } .sticky-rail .rail-head h2{ text-transform:uppercase; /* кегль — из роли h2 в base.css */ margin-top:16px;max-width:20ch; } .rail-viewport{overflow:hidden} .rail-track{ display:flex;gap:14px;width:max-content; padding-left:var(--gutter,20px);padding-right:var(--gutter,20px); will-change:transform; } .rail-card{ flex:0 0 clamp(240px,72vw,340px); display:flex;flex-direction:column;align-items:flex-start; min-height:clamp(280px,44svh,400px); padding:22px;border:1px solid var(--hair,rgba(255,255,255,.14)); border-radius:var(--radius,10px);background:#050505; transition:border-color .3s ease,transform .3s ease; } @media (hover:hover) and (pointer:fine){ .rail-card:hover{border-color:rgba(255,255,255,.45);transform:translateY(-4px)} } /* Кадр направления: карточка перестаёт быть «слепой» текстовой плиткой */ .rail-card .ph{ display:block;width:100%;aspect-ratio:16/10; margin-top:16px;border-radius:calc(var(--radius,10px) - 4px); overflow:hidden;background:#0a0a0a; } .rail-card .ph picture{display:contents} .rail-card .ph img{width:100%;height:100%;object-fit:cover;display:block} .rail-card .no{ font-family:var(--display,'Unbounded',sans-serif);font-weight:400; font-size:var(--fs-micro);letter-spacing:var(--ls-caps-wide);color:var(--muted,#999); } .rail-card .name{ font-family:var(--display,'Unbounded',sans-serif);font-weight:600; letter-spacing:-.02em;line-height:1.08;text-transform:uppercase; font-size:var(--fs-list);margin-top:14px; } .rail-card .tag{ display:inline-block;margin-top:14px;padding:7px 14px; border-radius:var(--pill,9999px);background:var(--lozenge,rgba(200,200,200,.1)); font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--ls-caps-wide);text-transform:uppercase; color:var(--muted,#999); } .rail-card .go{ margin-top:auto;align-self:flex-end; width:44px;height:44px;border-radius:50%; border:1px solid var(--hair,rgba(255,255,255,.14)); display:grid;place-items:center; transition:background-color .3s ease,border-color .3s ease; } .rail-card .go svg{width:14px;height:14px} @media (hover:hover) and (pointer:fine){ .rail-card:hover .go{background:#fff;border-color:#fff} .rail-card:hover .go svg{stroke:#000} } @media (min-width:768px){ .rail-card{flex-basis:clamp(300px,30vw,380px);padding:28px} .rail-track{gap:18px} } /* Правка Димы 13.09: карусель на ПК, но карточки целиком — в контейнере ровно три карточки, трек стартует от левого края контейнера, JS двигает трек шагами по целой карточке */ @media (min-width:1200px){ .sticky-rail:not(.rail-static) .rail-viewport{ /* окно карусели = контейнер: за его краями ничего не выглядывает */ --rail-inner:calc(min(100vw,var(--wrap-max,1240px)) - 2*var(--gutter,20px)); width:var(--rail-inner);margin:0 auto;overflow:hidden; } .sticky-rail:not(.rail-static) .rail-track{ gap:18px;padding-left:0;padding-right:0; transition:transform .55s cubic-bezier(.22,.61,.36,1); /* шаг на целую карточку — плавно, без догона в JS */ } .sticky-rail:not(.rail-static) .rail-card{flex-basis:calc((var(--rail-inner) - 36px)/3);min-height:0} /* Правка Димы 13.09: карточки не режутся — закреплённый блок не обрезает по высоте, шапка секции компактнее */ .sticky-rail:not(.rail-static) .rail-pin{height:auto;min-height:0;overflow:visible;justify-content:flex-start;padding-top:56px;padding-bottom:28px;gap:22px} .sticky-rail:not(.rail-static) .rail-head h2{margin-top:10px} .sticky-rail:not(.rail-static) .rail-card .ph{aspect-ratio:16/9} } /* Статичный фолбэк (reduced motion / нет IO): обычная горизонтальная лента */ .sticky-rail.rail-static{height:auto;padding-top:var(--sect,30px);padding-bottom:var(--sect,30px)} .rail-static .rail-pin{position:static;height:auto;padding-top:0;padding-bottom:0} .rail-static .rail-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .rail-static .rail-viewport::-webkit-scrollbar{display:none} .rail-static .rail-track{will-change:auto;transform:none !important} .rail-static .rail-card{scroll-snap-align:start} /* Правка Димы 13.09: карточки форматов не режутся — на ПК сетка 3×3, на телефоне лента с полной карточкой */ .rail-static .rail-viewport{scroll-padding-inline:var(--gutter,20px)} @media (max-width:1199px){ .rail-static .rail-track{padding-inline:var(--gutter,20px)} .rail-static .rail-card{flex:0 0 min(86vw,380px)} } /* Правка Димы 15.09: на ПК без JS-рейла — тоже карусель (3 карточки в кадре, стрелки), не сетка 3×3 */ @media (min-width:1200px){ .rail-static .rail-viewport{overflow-x:auto;max-width:var(--wrap-max,1240px);margin:0 auto;scroll-behavior:smooth} .rail-static .rail-track{gap:18px;padding-inline:var(--gutter,20px)} .rail-static .rail-card{flex:0 0 calc((min(var(--wrap-max,1240px),100vw) - 2*var(--gutter,20px) - 36px)/3)} .rail-static .rail-card .ph{aspect-ratio:16/9} .rail-static .rail-card .name{min-height:calc(2 * 1.08em)} /* заголовки в один ряд: место под две строки */ .rail-static .snap-arrows{max-width:var(--wrap-max,1240px);padding-inline:var(--gutter,20px)} } /* ---------- 4. Чёрная точка (компонент [data-dot-form]) ---------- */ .dot-sec{position:relative;height:220vh;padding-top:0;padding-bottom:0} .dot-pin{ position:sticky;top:0;height:100svh;overflow:hidden; background:#e9e9e7; /* светлая сцена — единственное место, где точке есть на чём читаться */ } .dot-stage{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:30px; } .dot-hint{ font-family:var(--body,'Manrope',sans-serif);font-weight:600; font-size:var(--fs-micro);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:#55524e; } /* Якорь: точка + SVG-кольцо прогресса скролла вокруг неё */ .dot-anchor{position:relative;width:76px;height:76px;display:grid;place-items:center} .dot-core{ width:24px;height:24px;border-radius:50%;background:#000; animation:ml-pulse 1.9s ease-in-out infinite; } @keyframes ml-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.30)} 55%{box-shadow:0 0 0 16px rgba(0,0,0,0)} } .dot-ring{position:absolute;inset:0;transform:rotate(-90deg)} .dot-ring .ring-track{fill:none;stroke:rgba(0,0,0,.12);stroke-width:2} .dot-ring .ring-fill{ fill:none;stroke:#000;stroke-width:2;stroke-linecap:round; stroke-dasharray:213.63;stroke-dashoffset:213.63; } /* Подсказка скролла под якорем */ .dot-cue{ display:flex;align-items:center;gap:8px; font-family:var(--body,'Manrope',sans-serif);font-weight:600; font-size:var(--fs-micro);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:#8a867f; } .dot-cue .cue-arrow{display:inline-block;animation:ml-cue 1.6s var(--ease-in-out,cubic-bezier(0.77,0,0.175,1)) infinite} @keyframes ml-cue{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} } /* Чёрный слой: раскрывается векторной circle-маской — край всегда чёткий. Маска на отдельном пустом слое: кадр прокрутки перерисовывает заливку, а не заголовок, поля формы и контакты (замер: кадр 385мс → 60fps). */ .dot-veil{ position:absolute;inset:0;z-index:2;background:#000; clip-path:circle(0% at 50% 50%);will-change:clip-path; pointer-events:none; } .dot-black{ position:absolute;inset:0;z-index:3; display:flex;align-items:center;justify-content:center; pointer-events:none;overflow-y:auto; } .dot-inner{ width:100%;max-width:680px; display:flex;flex-direction:column;gap:26px; padding-top:44px;padding-bottom:44px; opacity:0;visibility:hidden; /* невидимая форма вне tab-порядка (WCAG 2.4.3); JS снимает в фазе 3 */ will-change:opacity,transform; } .dot-title{ font-family:var(--display,'Unbounded',sans-serif);font-weight:700; letter-spacing:-.02em;line-height:1.06;text-transform:uppercase; font-size:var(--fs-hero);color:#fff;text-wrap:balance;max-width:var(--measure-display); } .dot-title em{font-style:normal;color:var(--accent,#f36c5e)} /* hero-момент секции */ .dot-lead{color:var(--muted,#999);font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:44ch} .dot-contacts{display:flex;flex-wrap:wrap;gap:0 26px;font-size:var(--fs-body)} /* Правка Димы 13.09: на ПК форма целиком в экране — две колонки: заголовок и лид слева, поля справа */ @media (min-width:1200px){ .dot-sec:not(.dot-static) .dot-inner{ max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px); column-gap:64px;row-gap:22px;align-items:start;padding-top:24px;padding-bottom:24px; } .dot-sec:not(.dot-static) .dot-title{grid-column:1;grid-row:1;font-size:var(--fs-h2)} .dot-sec:not(.dot-static) .dot-lead{grid-column:1;grid-row:2} .dot-sec:not(.dot-static) .dot-contacts{grid-column:1;grid-row:3;align-self:end;flex-direction:column;gap:8px} .dot-sec:not(.dot-static) .dot-inner>form{grid-column:2;grid-row:1/4} } .dot-contacts a{ display:inline-flex;align-items:center;min-height:44px;color:#bbb; transition:color .25s ease; } .dot-contacts a:hover{color:#fff} /* Статичный фолбэк: обычная чёрная секция с формой, точка скрыта */ .dot-sec.dot-static{height:auto} .dot-static .dot-pin{position:static;height:auto;background:#000} .dot-static .dot-stage{display:none} .dot-static .dot-veil{display:none} .dot-static .dot-black{position:static;clip-path:none;pointer-events:auto;overflow:visible} .dot-static .dot-inner{opacity:1;visibility:visible;transform:none !important;padding-top:60px;padding-bottom:60px;will-change:auto} /* ---------- 5. Фулскрин-hero с видео cover-режимом ---------- */ .hero-full{ position:relative;display:flex;overflow:clip; min-height:calc(100svh - 64px); padding-top:0;padding-bottom:0; } .hero-full .hero-bg{position:absolute;inset:0;overflow:hidden;background:#0a0a0a} /* Cover-трюк для 16:9 iframe: обёртка режет по краям, iframe масштабируется до max(ширина вьюпорта, высота×16/9) — всегда закрывает секцию */ .hero-full .hero-bg iframe{ position:absolute;top:50%;left:50%; width:max(100vw,177.8svh);height:max(100svh,56.3vw); transform:translate(-50%,-50%); border:0;pointer-events:none; } /* Свой фоновый mp4: cover без трюков с размерами — режет object-fit */ .hero-full .hero-bg video{ position:absolute;top:0;left:0;width:100%;height:100%; object-fit:cover;border:0;pointer-events:none;background:#0a0a0a; } /* Скрим — единственный градиент дизайн-системы (contrast для слоганов) */ .hero-full .hero-bg::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.26) 42%,rgba(0,0,0,.62)); } .hero-full .hero-content{ position:relative;z-index:2;width:100%; display:flex;flex-direction:column;align-items:flex-start; padding-top:26px;padding-bottom:18px; } .hero-full .hero-slogans{margin-top:auto;margin-bottom:auto;width:100%} .hero-full .hero-sub{margin-top:0;width:100%} .hero-full .scrolldown{margin-top:24px} @media (min-width:768px){ .hero-full{min-height:calc(100svh - 76px)} } @media (min-width:1200px){ .hero-full .hero-content{align-items:center} .hero-full .hero-sub{max-width:1100px} } /* ---------- 6. prefers-reduced-motion: всё выключено ---------- */ @media (prefers-reduced-motion:reduce){ html.ml-hold::before{content:none} .ml-preloader,.ml-leave{display:none} .rv-l,.rv-r{opacity:1;transform:none;filter:none;transition:none} .dot-core{animation:none} .scrolldown svg{animation:none} } /* ---------- 7. Хедер v2: компактный, с hide-on-scroll ---------- */ /* Базовые правила живут в base.css; здесь только поведение при скролле и высоты. Раскладка навигации (десктоп/планшет/телефон) — §19. */ .hdr{transition:transform .35s cubic-bezier(0.23,1,0.32,1),background-color .3s ease} html.hdr-hide .hdr{transform:translateY(-100%)} .hdr .hdr-in{height:60px} .hdr .brand img{height:34px} .hdr .brand span{font-size:var(--fs-micro);letter-spacing:.08em} @media (min-width:1200px){ .hdr .hdr-in{height:66px} .hdr .brand img{height:38px} } /* ---------- 8. Типографика внутренних h1 ---------- */ /* Снято 2026-09-13 (typography.md §3, $deprecated): заплатки clamp(40,4.8vw,74) и clamp(24,7.2vw,34) перебивали токен. Кегль h1 теперь один — --fs-hero (30 → 56), капы заданы в шкале, отдельные правила не нужны. */ /* ---------- 9. Центровка hero: контент в оптическом центре экрана ---------- */ /* Фидбек: на мобиле заголовок и кнопки съезжали вниз — h1 держался auto-маргинами, а группа не центровалась. Центр считаем от области ПОД липкой шапкой (--hdr-h), поэтому одинаково до и после пина. */ .hero-full{min-height:calc(100svh - var(--hdr-h,61px))} @media (max-width:767px){ .hero-full .hero-content{ justify-content:center; padding-top:16px;padding-bottom:24px; } .hero-full .hero-slogans{margin-top:0;margin-bottom:14px} .hero-full .hero-sub{margin-top:0} .hero-full .scrolldown{margin-top:24px} } /* Страховка на любой вьюпорт: одиночное длинное слово переносится, а не режется */ .hero h1{overflow-wrap:break-word} /* ---------- 11. Мобильный hero: ролик по ширине экрана, без cover-зума ---------- На узком высоком экране cover-трюк (width:max(100vw,177.8svh)) раздувал iframe до ~1500px и показывал увеличенный центральный кусок кадра. На телефоне отдаём видео полосой 16:9 во всю ширину (кадр целиком), а слоган и кнопку — под ней. Селекторы через #heroSec — иначе страничные правила hero-cine перебивают. */ @media (max-width:767px){ #heroSec.hero-cine, #heroSec.hero-cine.hero-pin{height:auto;margin-top:0} #heroSec .hero-stage{position:static;height:auto;overflow:visible} #heroSec .hero-media{position:static;transform:none !important;opacity:1 !important} #heroSec .hero-bg{ position:relative;inset:auto;width:100%; aspect-ratio:16/9;height:auto;overflow:hidden; } #heroSec .hero-bg iframe, #heroSec .hero-bg video{ position:absolute;top:0;left:0; width:100%;height:100%;transform:none; } #heroSec .hero-bg::after{opacity:.22} /* УТП главной (13.09): h1, лид, CTA и факты идут потоком ПОД видео-полосой; на самом кадре остаются только бейдж (сверху) и слоган-подпись заказчика (снизу) */ #heroSec .hero-stage{position:relative;top:auto;height:auto} /* top от sticky-правила сдвигал сцену на 61px */ #heroSec .hero-content{ position:static;height:auto; opacity:1 !important;transform:none !important; display:flex;flex-direction:column;align-items:flex-start; padding:20px var(--gutter,20px) 8px; } #heroSec .hero-tag{position:absolute;top:14px;left:var(--gutter,20px);margin:0;z-index:2} #heroSec .hero-tag .kicker{font-size:var(--fs-micro);letter-spacing:var(--ls-caps-wide)} /* Кнопка шоурила на телефоне не нужна — ролик и так играет фоном; подпись к нему — на нижней кромке кадра */ #heroSec .btn-reel{display:none} #heroSec .hero-reel{position:absolute;left:var(--gutter,20px);right:var(--gutter,20px);top:56.25vw;transform:translateY(calc(-100% - 14px));z-index:2} #heroSec .hero-reel .hero-plaque{margin:0;text-shadow:0 2px 14px rgba(0,0,0,.75)} #heroSec .hero-bar{margin:0;flex-direction:column;align-items:flex-start;gap:0} #heroSec .hero-bar>h1{margin:0} /* Затемнение снизу кадра, чтобы слоган читался на любом кадре */ #heroSec .hero-bg::after{ opacity:1; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.62) 100%); } #heroSec .scrolldown{display:none} } /* ---------- 12. Карточка кейса: название сверху, описание под ним ---------- Раньше плашка шла «номер + описание», а название висело ниже картинки — читалось шиворот-навыворот. Теперь порядок нормальный и высоты выровнены. */ .w-item .plaque{ display:flex;flex-direction:column;gap:8px; padding-left:14px;border-left:1px solid var(--hair,rgba(255,255,255,.14)); margin-top:14px; } .w-item .plaque .w-name{ margin:0;font-family:var(--display,'Unbounded',sans-serif);font-weight:600; font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-display); text-transform:uppercase;color:var(--text,#fff); } .w-item .plaque .cap{ margin:0;color:var(--muted,#999);font-size:var(--fs-caption);line-height:var(--lh-caption); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } /* ---------- 13. Мобильная типографика заголовков ---------- Жалоба: «заголовки сплюснуты». На 390px h2 шёл с межстрочным 1.05 — для капса Unbounded строки слипаются. Даём воздух. */ @media (max-width:767px){ h2, .wheel-head h2, .rail-head h2{line-height:1.16} h3{line-height:1.2} } /* ---------- 14. Согласие на ПД, cookies, страница «Спасибо» ---------- Требования директологов и 152-ФЗ: чекбокс согласия в каждой форме, баннер cookies один раз, отдельный URL после отправки. */ .consent{ display:flex;align-items:flex-start;gap:12px; margin:4px 0 18px;min-height:44px;cursor:pointer; font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--dim2); } .consent input{ appearance:none;-webkit-appearance:none;flex:none; width:22px;height:22px;margin-top:1px;border-radius:6px; border:1px solid var(--hair);background:var(--card-bg);cursor:pointer; display:grid;place-items:center;transition:border-color .2s ease,background-color .2s ease; } .consent input::after{ content:"";width:6px;height:11px;margin-top:-2px; border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0); transition:transform .18s cubic-bezier(.2,.8,.2,1); } .consent input:checked{background:var(--text);border-color:var(--text)} .consent input:checked::after{transform:rotate(45deg) scale(1)} .consent input:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px} .consent a{color:var(--soft);text-decoration:underline;text-underline-offset:3px} .consent.err{color:var(--accent)} .consent.err input{border-color:var(--accent)} .cookie-bar{ position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:60; display:flex;flex-direction:column;gap:12px; padding:16px 18px;border-radius:var(--radius); background:var(--card-bg);border:1px solid var(--hair); box-shadow:0 18px 50px rgba(0,0,0,.6); opacity:0;transform:translateY(16px); transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1); } .cookie-bar.show{opacity:1;transform:none} .cookie-bar p{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--soft)} .cookie-bar a{color:var(--text);text-decoration:underline;text-underline-offset:3px} .cookie-bar .btn{min-height:44px;padding:10px 22px;align-self:flex-start} @media (min-width:768px){ .cookie-bar{left:auto;right:28px;bottom:28px;max-width:420px;flex-direction:row;align-items:center} .cookie-bar .btn{align-self:auto} } @media (prefers-reduced-motion:reduce){.cookie-bar{transition:opacity .2s ease;transform:none}} /* Страница «Спасибо»: один экран, минимум слов, «пыль света» на канвасе. На телефоне всё по центру, на десктопе — по левому краю, как остальные страницы. */ .thanks{ position:relative;overflow:hidden; display:flex;align-items:center; min-height:calc(100svh - var(--hdr-h,61px)); padding:48px 0 72px; } .thanks-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .thanks-in{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center} .thanks .ring{width:84px;height:84px;margin-bottom:30px} .thanks .ring circle{fill:none;stroke:var(--hair);stroke-width:1.5} .thanks .ring .fill{stroke:var(--text);stroke-dasharray:213.6;stroke-dashoffset:213.6;animation:ring-draw 1.1s cubic-bezier(.2,.8,.2,1) .15s forwards} .thanks .ring .tick{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:ring-draw .5s ease-out .9s forwards} @keyframes ring-draw{to{stroke-dashoffset:0}} .thanks h1{font-size:var(--fs-hero);line-height:var(--lh-display);text-transform:uppercase;max-width:12ch;letter-spacing:var(--ls-display)} .thanks h1 .w{display:inline-block;opacity:0;transform:translateY(.6em);animation:word-up .7s cubic-bezier(.2,.8,.2,1) forwards} .thanks h1 .w:nth-child(2){animation-delay:.12s} .thanks h1 .w:nth-child(3){animation-delay:.22s} @keyframes word-up{to{opacity:1;transform:none}} .thanks .lead{margin-top:16px;font-family:var(--display);font-weight:400;font-size:var(--fs-h2-md);line-height:1.25;color:var(--text);max-width:none; opacity:0;animation:word-up .7s cubic-bezier(.2,.8,.2,1) .45s forwards} .thanks .alt{margin-top:16px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted);max-width:32ch;opacity:0;animation:word-up .7s ease .65s forwards} .thanks .alt a{color:var(--text);text-decoration:underline;text-underline-offset:3px} .thanks .alt.pdf{max-width:none} @media (min-width:768px){ .thanks{padding:64px 0 96px} .thanks-in{align-items:flex-start;text-align:left} .thanks .ring{width:104px;height:104px;margin-bottom:40px} } @media (prefers-reduced-motion:reduce){ .thanks .ring .fill,.thanks .ring .tick{animation:none;stroke-dashoffset:0} .thanks h1 .w,.thanks .lead,.thanks .alt{animation:none;opacity:1;transform:none} } /* ---------- 15. Лента клиентов: на всех посадочных (гипотеза H2, доверие на первом экране) ---------- */ .partners{border-top:1px solid var(--hair-soft)} .partners-h{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px} .partners-h h2{font-size:var(--fs-h2-md);text-transform:uppercase;max-width:30ch} .marq{ overflow:hidden;position:relative; border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft); padding:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .marq-track{display:flex;gap:56px;width:max-content;animation:marq 36s linear infinite} .marq:hover .marq-track{animation-play-state:paused} @keyframes marq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marq-track{animation:none;flex-wrap:wrap;width:auto}} .marq img{height:34px;width:auto;opacity:.92} /* цветные фирменные логотипы (Дима 13.09, Codex ASSET-003) */ /* ---------- 16. Правки под рекламу: полоса шапки, преимущества в hero, страницы направлений ---------- Формула первого экрана директологов: УТП + 3 преимущества + доверие + CTA. */ .topbar{border-bottom:1px solid var(--hair-soft);background:var(--bg);font-size:var(--fs-caption);color:var(--soft)} .topbar-in{display:none;align-items:center;justify-content:space-between;gap:16px;min-height:36px} .topbar-usp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-right{display:flex;align-items:center;gap:18px;white-space:nowrap} .topbar-right a{color:var(--soft);text-decoration:none;min-height:36px;display:inline-flex;align-items:center} .topbar-right a:hover{color:var(--text)} .topbar-promise{color:var(--text);font-weight:600} @media (min-width:768px){.topbar-in{display:flex}} @media (min-width:768px){.hdr{top:0}} /* Первый экран посадочной (правка Димы 13.09) — spec: system/hero-landing.md. Одна раскладка на 17 посадочных: кикер → h1 → (лид + экспликация + CTA | кадр). Скоуп .hero-landing (0,2,0) намеренно перебивает страничные