/* the fixed header and the whole first screen: the blue hero, the printed photo with its tilt and glare, the calculator, and the trust strip under it. */ /* ---------- header ---------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:transparent; border-bottom:1px solid transparent; transition:background-color .28s ease, border-color .28s ease, box-shadow .28s ease; } .site-header.is-scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line);box-shadow:var(--shadow-header)} .nav{display:flex;align-items:center;gap:20px;min-height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:var(--fs-h3);line-height:1;color:var(--ink);text-decoration:none;letter-spacing:-0.02em} .logo:hover{text-decoration:none} /* Знак нарисован один раз и красится через currentColor: раньше лежали два файла с одинаковыми контурами и подменялись через display. */ /* Знак на 30% меньше прежнего: 217 точек в ширину и 21,56 в высоту (было 310 и 30,8). Пропорция знака 227 к 23 держится, высота шапки 88 — знак занимает около четверти и не распирает строку. */ .logo-mark{display:block;width:217px;height:21.56px;fill:currentColor} /* спрайт с одним начертанием знака лежит в начале body и не рисуется сам */ .sprite{position:absolute;width:0;height:0;overflow:hidden} /* вся правая группа поднята на 3 пикселя относительно логотипа — одинаково и на прозрачной шапке, и на белой */ .nav-right{display:flex;align-items:center;gap:24px;margin-left:auto;position:relative;top:-3px} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a{color:var(--ink-2);font-weight:500;font-size:var(--fs-body)} .nav-links a:hover{color:var(--brand);text-decoration:none} /* два номера в шапке: каждый со своим флагом. Шрифт обычный, не жирный, и того же размера, что подпись «Оценка Яндекс» в стеклянном бабле. */ /* оптическая центровка: строки номеров и почты сидят на полпикселя ниже центра логотипа — поднимаем их на пиксель, чтобы центры совпали */ .nav-phones{display:flex;align-items:center;gap:18px;flex:none} a.nav-phone{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:var(--fs-body);line-height:1.2;color:var(--ink);white-space:nowrap;transition:color .15s ease-out} /* Номера телефонов набраны на 10% мельче почты. Кегль у них общий, но цифры в шрифте выше строчных букв, и телефон рядом с адресом читался крупнее. Почту это правило не задевает: у неё свой класс .nav-mail. */ a.nav-phone:not(.nav-mail){font-size:calc(var(--fs-body) * .9)} /* флаги стран в шапке на компьютере: было 18, потом 16,2, теперь ещё на 10% меньше — 14,6. В покое они приглушены до 80%, при наведении на номер открываются полностью. */ .nav-phone .flag{width:14.6px;height:14.6px;opacity:.8;transition:opacity .15s ease-out} .nav-phone:hover .flag{opacity:1} @media (max-width:900px){ .nav-phones{display:none} } a.nav-phone:hover{color:var(--brand);text-decoration:none} .nav-phone svg{color:var(--brand)} /* Кнопки набраны тем же шрифтом, что и вся страница, — SF UI Display, в начертании 700. Отдельного заголовочного шрифта на странице больше нет: кнопка в нижней полосе на телефоне задана в 04-chrome.css, но это тот же набор, просто объявленный в своём файле стилей. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 26px;border-radius:14px;border:2px solid transparent;font-family:"SF UI Display",-apple-system,system-ui,"Segoe UI",sans-serif;font-size:var(--fs-lead);font-weight:700;cursor:pointer;text-decoration:none;transition:transform .15s ease,background-color .15s ease,border-color .15s ease;line-height:1.2;white-space:nowrap} .btn:hover{text-decoration:none} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-2)} .btn-light{background:#fff;color:var(--brand)} .btn-light:hover{background:var(--tint-hover)} .btn-sm{min-height:46px;padding:10px 20px;font-size:var(--fs-body)} .site-header .logo{color:#fff} .site-header.is-scrolled .logo{color:var(--ink)} .site-header .nav-links a{color:rgba(255,255,255,.92)} .site-header .nav-links a:hover{color:#fff;text-decoration:none} .site-header a.nav-phone{color:#fff} .site-header .nav-phone svg{color:#fff} .site-header.is-scrolled .nav-links a{color:var(--ink-2)} .site-header.is-scrolled .nav-links a:hover{color:var(--brand);text-decoration:none} .site-header.is-scrolled a.nav-phone{color:var(--ink)} .site-header.is-scrolled .nav-phone svg{color:var(--brand)} /* Телефон и почта в шапке на прозрачной синей шапке: цвет белый, а не светлый синий, — и вся строка приглушена до 80%. При наведении непрозрачность возвращается к 100%. Цвет при этом не меняется, он белый в обоих случаях. Флаг внутри строки свою приглушённость не добавляет, иначе 80% легли бы на 80% и вышло бы 64%: здесь он открыт полностью и берёт прозрачность от строки. На прилипшей белой шапке наоборот: текст тёмный и полностью непрозрачный, при наведении — фирменный синий, а флаг держит свои 80%. Раньше правило стояло выше состояния .is-scrolled и проигрывало ему по порядку, поэтому наведение не срабатывало нигде. */ .site-header a.nav-phone{color:#fff;opacity:.8} .site-header:not(.is-scrolled) a.nav-phone .flag{opacity:1} .site-header a.nav-phone:hover{color:#fff;opacity:1;text-decoration:none} .site-header.is-scrolled a.nav-phone{color:var(--ink);opacity:1} .site-header.is-scrolled a.nav-phone:hover{color:var(--brand);text-decoration:none} .site-header .header-cta{display:none} .site-header.is-scrolled .header-cta{display:inline-flex} /* кнопка в белой шапке ниже, чем в обычном состоянии: она не должна распирать строку и делать шапку выше, чем у логотипа */ /* flex:none — кнопка не сжимается. Раньше в тесной строке браузер ужимал её по ширине, и «расчёт» уезжал на вторую строку: это и была ошибка на масштабе 125%. Теперь кнопка держит свой размер, а под неё подгоняются остальные объекты шапки — см. медиазапрос ниже. */ /* Высота кнопки в белой шапке на 20% больше прежней: было примерно 32,8 точки с полями, стало 39,4. Строка шапки это держит — она высотой 88, так что вёрстка не расползается. */ .site-header .header-cta{min-height:39.4px;padding:6px 16px;font-size:var(--fs-small);border-radius:10px;flex:none} .site-header:not(.is-scrolled) a:focus-visible{outline-color:#fff} @media (max-width:900px){ .nav-links{display:none} .nav-phone span{display:none} /* на телефоне знак вдвое крупнее прежнего, но не шире 60% окна: иначе он выдавливает кнопку и меню за край */ .logo-mark{width:min(175px,42vw);height:auto;aspect-ratio:227/23} } /* Узкий компьютер — это в том числе масштаб 125% на обычном мониторе: окно в точках становится примерно 1150. Здесь места мало, поэтому все объекты справа от логотипа уменьшены согласованно: логотип, флаги с номерами, просветы и кнопка расчёта. Размеры одинаковые и в прозрачной шапке над первым экраном, и в белой после прокрутки — правила не зависят от состояния шапки. Кнопка расчёта не сжимается и не переносится: её текст в одну строку задан общим правилом .btn, а вес держит flex:none. */ @media (min-width:901px) and (max-width:1180px){ .nav-links{gap:12px} .logo-mark{width:177.8px;height:17.64px} /* на узком компьютере номеров два, и оба подписаны: убирать текст больше нельзя — в ссылке теперь флаг и номер, а не одна трубка */ .nav-phones{gap:14px} .nav-right{gap:16px} .nav-burger{margin-left:6px;width:38px} a.nav-phone{gap:5px;font-size:var(--fs-body-s)} /* на узком компьютере та же поправка: номера на 10% мельче почты */ a.nav-phone:not(.nav-mail){font-size:calc(var(--fs-body-s) * .9)} /* и флаги на 10% меньше: было 14,4, стало 13 */ .nav-phone .flag{width:13px;height:13px} /* на узком компьютере та же поправка: высота на 20% больше, было 31,6, стало 38 */ .site-header a.header-cta{min-height:38px;padding:6px 11px;font-size:13px} .site-header:not(.is-scrolled) a.nav-phone:hover{background:var(--onblue-hover)} .site-header.is-scrolled a.nav-phone:hover{background:var(--tint-neutral)} } /* ---------- sections ---------- */ section{scroll-margin-top:var(--header-h)} /* ---------- hero ---------- */ .hero{color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(18px,3.2vh,56px);background-color:var(--field-1);background-image:linear-gradient(158deg,var(--field-1) 0%,var(--field-2) 46%,var(--field-3) 100%)} .hero .wrap{position:relative;z-index:3} /* зерно бумаги поверх синего поля: overlay оставляет цвет на месте и добавляет только рельеф. Плитка поля контрастнее остальных — это единственное место, где зерно смотрят против ровной заливки. */ .hero-tex{ position:absolute;inset:0;z-index:1;pointer-events:none; background-image:var(--grain-image-field); background-size:var(--grain-tile);background-repeat:repeat; mix-blend-mode:overlay;opacity:var(--grain-blue); } /* Воздух сверху (от шапки) и снизу (до полосы доверия) — одно и то же число, и он же стоит у самой полосы. Поэтому смысловой блок слева и правый блок со снимком стоят ровно посередине между шапкой и полосой доверия: у сетки align-items:center, а сдвиги-подтяжки в панели сняты в ноль. */ .hero-inner{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:40px;align-items:center;padding-top:calc(clamp(48px,6vw,80px) + 92px);padding-bottom:0} .hero-copy{grid-column:1 / span 7} /* Положения объектов первой секции (надзаголовок, оба заголовка, буллеты, кнопки, стеклянный бабл, калькулятор, фото, кнопка в шапке) задаются в одном месте — в «панели управления первой секцией» внутри index.html. Там у каждого объекта своя строка с двумя числами, и сдвиг одного объекта не трогает соседей. Здесь эти значения не дублируются. */ .hero::before{content:"";position:absolute;inset:0;z-index:1;background: radial-gradient(1150px 660px at 86% -14%, var(--field-glow), transparent 62%), radial-gradient(820px 560px at -6% 106%, var(--field-deep), transparent 64%);} .hero::after{content:"";position:absolute;inset:0;z-index:1;opacity:.16;background-image: radial-gradient(var(--field-dot) 1px, transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent, #000 45%, #000);-webkit-mask-image:linear-gradient(90deg,transparent, #000 45%, #000)} /* ═══ ЗАГОЛОВОК ПЕРВОГО ЭКРАНА — ОДИН, ИЗ ТРЁХ СТРОК ═══ «Оплати рублями» / «недвижимость 🇹🇭» / «с 0,1% комиссии». Значка договора в конце третьей строки больше нет — убран по просьбе владельца, вместе с ним ушли его правила (.ht-doc, .ht-doc-sheet) и обёртка .ht-tail, которая держала значок от переноса. Раньше это были ДВА заголовка: сверху «0,1% комиссии / в договоре» своим кеглем (1,356 от кегля заголовка), ниже «Оплати рублями / недвижимость / в Таиланде» кеглем 0,81 и начертанием 400. По просьбе владельца они склеены в один — значит один кегль, одно начертание, один шаг строк. Всё, что относилось к двум частям (.h1-hook, .h1-main и их медиазапросы), удалено. */ /* Кегль — один плавный на все ширины: от 28 до 52 точек. Верхняя граница проверена по самой длинной строке: «недвижимость 🇹🇭» вместе с флагом занимает около 9,4 кегля (замер по метрикам шрифта), а колонка первого экрана — 7 столбцов из 12, то есть около 597 точек на большом окне. */ .hero h1{color:#fff;font-weight:700;font-size:clamp(28px,min(4.2vw,5.4vh),52px);line-height:0.98;letter-spacing:-0.02em;max-width:none} /* Каждая строка — отдельный блок: переносы ровно там, где задумано. */ .hero h1 .ht-line{display:block} /* Флаг Таиланда стоит вместо слова «Таиланде» круглым кружком. Кружок ровно в высоту строчной «в» — 0,537 кегля, — низ на базовой линии, поэтому он читается как ещё одна буква в строке. Сам флаг — прямоугольник 3 к 2, и в квадратной рамке он не сжимается, а обрезается по бокам (object-fit:cover): полосы остаются ровными и горизонтальными, а по краю идёт тонкая светлая обводка. */ /* Кружок подтянут влево так, чтобы его правый край встал ровно под правый край буквы «и» в слове «рублями» строкой выше. Расчёт по метрикам шрифта (SF UI Display 700, разрядка −0,02 кегля): строка «Оплати рублями» — 7,878 кегля до правого края буквы «и»; строка «недвижимость » + поле кружка + сам кружок — 8,036 кегля. Разница 0,158 кегля плюс боковой просвет буквы «и» около 0,02 — итого сдвиг на 0,17 кегля влево. Поэтому левое поле отрицательное: 0,14 − 0,17 = −0,03 кегля. Всё в долях кегля, поэтому совпадение держится на любом размере заголовка. */ .hero h1 .ht-flag{display:inline-block;width:.537em;height:.537em; vertical-align:baseline;margin:0 .14em 0 -.03em;border-radius:50%;object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.35)} /* Знак процента встаёт верхом ровно на верх строчной «к» из слова «комиссии», которое идёт сразу за ним. Считаем по метрикам шрифта: высота строчных в SF UI Display — 0,5376 кегля, а знак «%» набран от −0,0103 до 0,7241, то есть его рост 0,7344. Значит кегль знака 0,5376 / 0,7241 = 0,742 — верх совпадает с «к». Низ знака при этом опускается под строку на 0,0103 своего кегля, поэтому сдвиг вверх — 0,0076: низ возвращается на базовую линию. Левое поле отрицательное: знак подтянут к единице на 0,04 кегля, и всё слово «комиссии» едет влево вместе с ним. */ .hero h1 .h1-pct{font-size:.742em;letter-spacing:0;color:#fff; -webkit-text-fill-color:#fff;position:relative;top:-.0076em;margin-left:-.04em} /* ═══ «0,1» — барабан двумя колонками ═══ Колонка барабана равна самой широкой цифре шрифта (0,652 кегля — доля «8» в SF UI Display), поэтому ни одна цифра не режется краем колонки. Барабан опущен на 0,035 кегля вниз: низ ячейки уходит на столько же под базовую линию, и закругление «0» (у цифр есть наплыв ниже строки) больше не срезается краем колонки. Сама цифра при этом остаётся на строке — её шаг строки подобран так, чтобы базовая линия была ровно на 0,035 кегля выше низа ячейки. */ .hero h1 .h1-count{vertical-align:-.035em;letter-spacing:0} /* Запятая мельче цифр (0,82). Уменьшение кегля поднимает над строкой и её саму: поле строки у мелкого знака меньше. Поэтому высота строки запятой пересчитана так, чтобы её базовая линия встала на ту же высоту, что у цифр — 0,965 кегля от верха ячейки: 1,93 / 0,82 − 0,711 = 1,643. */ .hero h1 .h1-count > span:not(.rv-col){font-size:.82em;margin:0; align-self:flex-start;line-height:1.643em} /* «1» подтянута к запятой. Колонка барабана шире самой «1» на 0,086 кегля с каждой стороны; снимаем весь левый воздух и ещё 0,044 — чтобы между запятой и единицей не читалось провала. Всё, что правее, включая «%» и слово «комиссии», сдвигается влево на те же 0,13 кегля. Подрезки нет: цифра стоит по центру колонки. */ .hero h1 .h1-count > span:not(.rv-col) + .rv-col{margin-left:-.13em} /* Цифра стоит на базовой линии так же, как обычная буква. Шаг строки цифры 1,219 кегля выведен из вертикальных метрик шрифта (SF UI Display: верх 1950, низ −494 при кегле 2048): (1,219 − 1,193) / 2 + 0,952 = 0,965 То есть базовая линия цифры — на 0,035 кегля выше низа ячейки, а ячейка остаётся ровно 1 кегль высотой, то есть ровно шагом ленты. Раньше цифра стояла по центру ячейки и висела над строкой на 0,14 кегля — отсюда и «0,51» в первой секции. */ .hero h1 .h1-count .rv-digit{display:block;height:1em;line-height:1.219em; text-align:center;font-variant-numeric:tabular-nums} /* Мягкая кромка у барабана — только сверху. Цифра стоит низом на базовой линии, у самого низа ячейки, и прежняя полоса прозрачности внизу съедала её нижний край. Верхние 6 % ячейки всегда пустые: там затенение ничего не задевает и прячет цифру, которая уходит вверх. */ .hero h1 .h1-count .rv-col{ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 100%)} /* Телефон: те же три строки, тот же шаг строк и тот же кегль — размер задан общим плавным правилом выше, отдельных переопределений больше нет. */ /* Воздух до кнопок такой же, как между заголовком и буллетами: кнопки подняты наверх и стоят в общем ритме колонки. */ .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0;margin-top:40px} .hero-cta .btn{font-size:var(--fs-lead);padding:14px 24px;white-space:nowrap;color:var(--ink-0)} .hero-cta .btn:hover{color:var(--brand)} /* Группа мессенджеров. Общий вид: та же рамка и скругление. Этим же классом пользуется нижняя мобильная панель, поэтому всё, что относится только к первому экрану, ниже задано через .hero-cta и панель не задевает. */ .hero-mess{display:flex;align-items:stretch;background:transparent;border:1px solid rgba(255,255,255,.45);border-radius:14px;overflow:hidden} /* Первый экран: зазора между кнопкой и группой нет, а контур уходит под кнопку так же, как у кнопок ниже. Слева у группы нет боковой рамки — вместо неё тонкий выступ, спрятанный за кнопкой: верхняя и нижняя линии контура выходят из-под её округления, а не начинаются обрубленными. Ячейки 54 × 54: с рамкой контур получается ровно 56 — как высота кнопки. */ .hero-cta .hero-mess{position:relative;z-index:0;overflow:visible; border-left:0;border-radius:0 14px 14px 0} .hero-cta .hero-mess .mess-btn{width:54px;height:54px} /* значки мессенджеров в первом экране: в покое приглушены до 80%, на наведении открываются в полную силу. Слово «max» ведёт себя так же — это тот же знак, просто набран буквами. */ .hero-cta .hero-mess .mess-btn img, .hero-cta .hero-mess .mess-word{opacity:.95;transition:opacity .15s ease-out} .hero-cta .hero-mess .mess-btn:hover img, .hero-cta .hero-mess .mess-btn:hover .mess-word{opacity:1} .hero-cta .hero-mess .mess-btn:last-child{border-radius:0 13px 13px 0} .hero-cta .hero-mess::before{content:"";position:absolute;top:-1px;bottom:-1px;left:-24px;width:24px; border:1px solid rgba(255,255,255,.45);border-right:0;border-radius:0; z-index:-1;pointer-events:none; transition:border-color .15s ease-out,background-color .15s ease-out} /* Наведение в первом экране: контур вокруг ячейки загорается белым на 100%. Синий здесь не виден — поле само синее, поэтому берём цвет того же контура, только в полную силу. Контур рисуется тенью по трём сторонам — верх, низ, право. Слева линии нет: там контур уходит под кнопку, и белеет как раз выступ, видный из-под её скругления. Раньше контур рисовался рамкой внутри ячейки, и она лежала на точку ниже рамки группы: под кнопкой линия шла по одной высоте, а вокруг ячейки — на точку ниже, получалась ступенька. Тень лежит ровно на линии рамки группы, поэтому линии совпадают точка в точку. В покое тень есть, но прозрачная: так её цвет может плавно проявиться и одновременно с выступом слева. Иначе выступ вспыхивал бы мгновенно, а контур проявлялся за 0,15 с — выходило «сначала левая часть, потом правая». Заливка наведения тоже продлевается влево под кнопку — там она видна из-под скругления, как и контур. */ .hero-cta .hero-mess .mess-btn{ box-shadow:0 -1px 0 0 transparent,0 1px 0 0 transparent,1px 0 0 0 transparent; transition:background-color .15s ease,box-shadow .15s ease-out,border-color .15s ease-out} /* Слева у второй и третьей ячейки лежит их собственная перегородка — это и есть левая линия контура. Тенью её не достать (тень ложится на точку левее, на соседнюю ячейку), поэтому перегородку красим напрямую, её же цветом. */ .hero-cta .hero-mess .mess-btn:hover{z-index:2;border-left-color:#fff; box-shadow:0 -1px 0 0 #fff,0 1px 0 0 #fff,1px 0 0 0 #fff} .hero-cta .hero-mess:has(.mess-btn:first-child:hover)::before{ border-color:#fff;background:var(--onblue-hover)} /* кнопка выше по слою: она закрывает выступ контура, ушедший под неё */ .hero-cta .btn{z-index:1} /* На телефоне и планшете кнопка и мессенджеры расходятся по разным строкам — там выступ не нужен, у группы снова замкнутый контур. */ @media (max-width:1024px){ .hero-cta .hero-mess{overflow:hidden;border-left:1px solid var(--onblue-frame);border-radius:14px} .hero-cta .hero-mess::before{display:none} } /* Та же группа мессенджеров, но на светлой подложке — для кнопок ниже первого экрана: контур светло-синий (Glass Blue #658EE2 вполсилы: на белом читается мягко, а не рамкой-обводкой), значки чёрные, при наведении — фирменный синий. Пробегающий блик — приём синего поля, на белом он не читается, поэтому выключен. Ячейки 54 × 54, а не 56: рамка добавляет по точке сверху и снизу, и в сумме контур получается ровно 56 — как высота кнопки. С ячейкой 56 контур был на две точки выше кнопки и заметно из неё выступал. Вся группа стоит рядом с кнопкой целиком — ни одна ячейка не заходит под кнопку, все три нажимаются. */ /* Контур группы — светло-синий (Glass Blue #658EE2 вполсилы), а не серый: на светлой подложке серый читался как «выключенный», а синий стоит в одной семье с кнопкой рядом и с синей обводкой при наведении. Группа стоит отдельной пилюлей: у неё свой замкнутый контур со всех сторон и свои скругления, а от кнопки её отделяет общий просвет ряда (12 точек). Раньше группа срасталась с кнопкой в одну фигуру — левой рамки не было, и контур подсовывался под кнопку выступом. Отказались: кнопка «Получить расчёт» в отзывах стоит сама по себе, и кнопки «Обсудить задачу», «Задать вопрос» и кнопка формы должны выглядеть так же. */ .mess-row{display:flex;align-items:stretch;flex:none; border:1px solid rgba(101,142,226,.55);border-radius:14px} .mess-row .mess-btn{width:54px;height:54px} /* Крайние ячейки получают свои скругления: наведение красит их тенью по трём сторонам, и без радиуса синяя заливка вылезала бы за угол. */ .mess-row .mess-btn:first-child{border-radius:13px 0 0 13px} .mess-row .mess-btn:last-child{border-radius:0 13px 13px 0} .mess-row .mess-btn+.mess-btn{border-left:1px solid rgba(101,142,226,.55)} /* Наведение на кнопку мессенджера: синим загорается только тот контур, который видно, — тот же синий, что у почты и телефонов в шапке. Контур рисуется тенью по трём сторонам (верх, низ, право), а слева — цветом собственной перегородки ячейки: тень туда не достаёт, она ложится на точку левее. Тенью, а не отдельной рамкой, — чтобы ячейку можно было обрезать по краю: внутри неё пробегает блик, и обрезка нужна именно ему. */ .mess-row .mess-btn{ box-shadow:0 -1px 0 0 transparent,0 1px 0 0 transparent,1px 0 0 0 transparent; transition:background-color .15s ease,box-shadow .15s ease-out,border-color .15s ease-out} /* Наведение — тем же фирменным синим, что у кнопки «Смотреть в Яндексе» и у кнопок в блоке «За экосистемой»: одна заливка, один цвет обводки, значки при этом становятся белыми. */ .mess-row .mess-btn:hover{z-index:2;background:var(--brand);border-left-color:var(--brand); box-shadow:0 -1px 0 0 var(--brand),0 1px 0 0 var(--brand),1px 0 0 0 var(--brand)} /* контур всей пилюли тоже синеет: крайние ячейки упираются в её рамку, и без этого у первой слева оставалась бы светло-синяя полоска */ .mess-row:has(.mess-btn:hover){border-color:var(--brand)} /* «волна» у мессенджеров на светлой подложке: блик синий — на белом он и должен быть синим, белый здесь не виден. Ячейка обрезает его по своим краям, поэтому за соседние кнопки он не вылезает. */ .mess-row .mess-btn::after{ background:linear-gradient(105deg,rgba(59,97,206,0) 0%,rgba(59,97,206,.16) 40%,rgba(59,97,206,.34) 50%,rgba(59,97,206,.16) 60%,rgba(59,97,206,0) 100%)} /* На светлой подложке значки и слово «max» чёрные и приглушены до 90%. На наведении они открываются в полную силу и красятся фирменным синим — тем же, что контур вокруг ячейки. Синий для значка получен набором фильтров от исходного белого SVG: цепочка подобрана расчётом под #3b61ce и даёт на выходе ровно этот цвет. */ .mess-row .mess-btn img{filter:brightness(0);opacity:.9; transition:opacity .15s ease-out,filter .15s ease-out} .mess-row .mess-word{color:var(--ink);opacity:.9; transition:opacity .15s ease-out,color .15s ease-out} .mess-row .mess-btn:hover img{opacity:1;filter:brightness(0) invert(1)} .mess-row .mess-btn:hover .mess-word{opacity:1;color:#fff} .mess-btn{position:relative;overflow:hidden;width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;background:transparent;text-decoration:none;transition:background-color .15s ease} .mess-btn+.mess-btn{border-left:1px solid var(--onblue-frame)} .mess-btn:hover{background:var(--onblue-hover);text-decoration:none} .mess-btn img{height:24px;width:auto;display:block} .mess-btn img.ico-tg{height:21px} .mess-word{font-weight:700;font-size:var(--fs-body-s);letter-spacing:-.03em;color:#fff;line-height:1} /* Пробегающий блик — «волна» на наведении. Собран на классе .btn, значит есть у каждой кнопки страницы: в шапке, в первом экране, в документах, в вопросах, в форме и в нижней полосе на телефоне. Сюда же вписан .rv-maps-link — кнопка Яндекса в отзывах: она объявлена в 03-sections.css, но блик у неё общий. */ .btn,.rv-maps-link{position:relative;overflow:hidden} .btn::after,.rv-maps-link::after,.mess-btn::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;width:45%;pointer-events:none;opacity:0;transform:skewX(-16deg)} /* на светлой кнопке блик синий, на синей — белый: иначе он на ней не виден */ .btn::after,.rv-maps-link::after{background:linear-gradient(105deg,rgba(59,97,206,0) 0%,rgba(59,97,206,.16) 40%,rgba(59,97,206,.34) 50%,rgba(59,97,206,.16) 60%,rgba(59,97,206,0) 100%)} .btn-primary::after{background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.26) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.26) 60%,rgba(255,255,255,0) 100%)} .mess-btn::after{background:linear-gradient(105deg,rgba(255,255,255,0) 0%,var(--onblue-line-strong) 40%,rgba(255,255,255,.60) 50%,var(--onblue-line-strong) 60%,rgba(255,255,255,0) 100%)} /* Кнопка первого экрана на наведении не подпрыгивает: она стоит на месте, а синеет только надпись (цвет задан выше, у .hero-cta .btn:hover). */ .hero-cta .btn:hover{transform:none} .hero-cta .btn:active{transform:translateY(0)} @media (hover:hover){ .btn:hover::after,.btn:focus-visible::after,.rv-maps-link:hover::after,.rv-maps-link:focus-visible::after,.mess-btn:hover::after,.mess-btn:focus-visible::after{animation:shine .47s ease-out} } @keyframes shine{ 0%{opacity:0;transform:skewX(-16deg) translateX(0)} 12%{opacity:1} 72%{opacity:1} 100%{opacity:0;transform:skewX(-16deg) translateX(390%)} } @media (prefers-reduced-motion: reduce){ .btn::after,.rv-maps-link::after,.mess-btn::after{display:none} } /* «Волна внимания» у главных кнопок: раз в две секунды по кнопке слева направо проходит мягкая полоса света — как блик по стеклу, а не вспышка. Полоса узкая, размытая по краям и стоит под тем же наклоном, что блики на наведении; её края уходят за верх и низ кнопки, поэтому обрезка по скруглению не видна. Между проходами — пауза: у кнопок страницы такт 3s, у маленькой кнопки «Принять» в плашке cookie — 1,5s (своё правило в 04-chrome.css). Полоса идёт примерно треть такта, остальное отдыхает, поэтому движение читается как один спокойный мазок, а не как мельтешение. Скорость самой полосы на странице и в плашке одна и та же: кнопка в плашке вдвое уже, поэтому и такт у неё вдвое короче. Кнопка обрезает полосу по своим границам (overflow:hidden), так что за скругление и на соседей она не вылезает. На синей кнопке волна белая, на белой — синяя: белая на белом не видна. */ .btn-pulse::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:58%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.46) 50%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%); transform:translateX(-150%) skewX(-14deg);filter:blur(2px);opacity:0;pointer-events:none; will-change:transform,opacity; animation:btn-sweep 3s cubic-bezier(.45,0,.2,1) infinite} @keyframes btn-sweep{ 0%{transform:translateX(-150%) skewX(-14deg);opacity:0} 10%{opacity:1} 52%{transform:translateX(280%) skewX(-14deg);opacity:1} 63%{opacity:0} 100%{transform:translateX(280%) skewX(-14deg);opacity:0} } .btn-light.btn-pulse::before{ background:linear-gradient(100deg, rgba(59,97,206,0) 0%, rgba(59,97,206,.07) 30%, rgba(59,97,206,.26) 50%, rgba(59,97,206,.07) 70%, rgba(59,97,206,0) 100%)} @media (prefers-reduced-motion: reduce){ .btn-pulse::before{animation:none;opacity:0} } .hero a:focus-visible,.hero button:focus-visible{outline-color:#fff;outline-offset:3px} /* Переносы строк по ширине экрана: .d-br — только компьютер, .t-br — только планшет, .n-br — компьютер и планшет, .p-br — только телефон, .m-br — планшет и телефон. */ .m-br{display:none} .t-br{display:none} .n-br{display:none} .p-br{display:none} /* .c-br зависит не от окна, а от ширины самой карточки: включается там, где карточка стоит одна в ряд (телефон и широкий компьютер), и молчит, когда карточки идут по три и колонка узкая */ .c-br{display:none} @container (min-width:300px){ .c-br{display:inline} } @media (min-width:701px){ .n-br{display:inline} } /* .t-br — планшетный вариант: карточка узкая, потому что их три в ряд. Считается от ширины карточки, а не окна, поэтому включается и на планшете 768, и на 1024. */ @container (max-width:299px){ .t-br{display:inline} } @media (max-width:900px){ .m-br{display:inline} .d-br{display:none} } @media (max-width:700px){ .p-br{display:inline} } /* the kicker is set 10% smaller (14px -> 12.6px) but the line box stays at the height the 14px line had, so shrinking the type never lifts or drops the top edge of the line — the smaller letters simply sit centred inside the same box. */ /* Просвет от надзаголовка до строки «0,1% комиссии» закреплён в точках, а не в процентах высоты окна: раньше он плавал от 8 до 18 точек. Взято 13 — это прежние 18 минус 5, то есть надзаголовок опущен на пять точек вниз. */ /* Просвет до заголовка закреплён на 10 точках: заголовок больше не сдвигается вверх-вниз относительно надзаголовка, поэтому играться с ним можно, не трогая эту строку. */ .hero-cats{font-size:12.6px;line-height:22.4px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--onblue-muted);margin-bottom:10px} /* Два просвета в левой колонке первого экрана закреплены числами и больше не зависят ни от высоты окна, ни от сдвигов в «панели управления»: от заголовка до первого буллета — 20 точек; от последнего буллета до кнопок — 30 точек. Сдвиги у заголовка, буллетов и кнопок одинаковые (−20), поэтому видимые просветы равны этим полям при любом размере окна. */ .hero-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(8px,1.1vh,12px);max-width:640px;counter-reset:none} /* Номер шага стоит без кружка: маркер — сама цифра. Первая колонка сжата до ширины одной цифры (1ch), а просвет до текста остался прежним — те же 12 px, что раньше отделяли текст от правого края кружка. Поэтому текст подтянулся влево ровно на ширину пропавшего кружка (26 px), а расстояние «цифра — текст» осталось тем, к которому глаз привык. Колонка задана заранее, а не по ширине каждой цифры: иначе строки 1 и 4 встали бы по-разному. */ /* Вес текста — тот же, что у подписей в полосе доверия («в финансах и праве»): на синем поле тонкий набор читается хуже. */ /* Кегль пунктов — 16 точек, тот же, что на планшете и в подписях полосы доверия. Раньше на компьютере он был на две точки мельче остального текста первого экрана. */ .hero-steps li{display:grid;grid-template-columns:1.45ch 1fr;gap:3px;align-items:baseline;color:var(--onblue-text);font-size:var(--fs-body);font-weight:500;line-height:1.4} /* Цифра — обычный знак в строке: белая, жирная, на первой строке текста. tabular-nums держит одинаковую ширину у всех цифр, поэтому тексты всех четырёх шагов начинаются на одной вертикали. */ /* номера пунктов набраны тем же шрифтом, что заголовок «Оплати рублями недвижимость в Таиланде» — SF UI Display. Кегль и высота строки прежние, поэтому ритм списка не меняется; в начертании 700, как у заголовка */ .hero-steps .hs-n{display:block;text-align:right;color:#fff; font-weight:700; font-size:var(--fs-small);line-height:inherit;font-variant-numeric:tabular-nums} .hero-trust{display:grid;grid-template-columns:1fr 1.2fr 1fr;row-gap:28px;margin-top:clamp(48px,6vw,80px)} /* computer (from 901px): высоту синего блока задаёт содержимое, а не высота окна. Воздух над смысловым блоком и воздух под ним до полосы доверия — одно и то же значение, поэтому блок доверия не уезжает вниз на высоком мониторе; под синим полем сразу начинается следующая секция. */ @media (min-width:901px){ /* Растяжка «во весь экран» убрана: ни min-height:100vh, ни flex, который уносил полосу доверия к нижнему краю окна. Именно из-за них на высоком экране под смысловым блоком появлялась пустота, а сам блок уезжал вверх. */ .hero{display:block} /* воздух под шапкой и воздух до полосы доверия — одно и то же значение */ .hero-inner{padding-top:calc(var(--header-h) + var(--hero-gap));padding-bottom:0} /* и то же значение становится верхним полем всех секций: расстояние от верхней границы секции до её заголовка — как у первого экрана */ :root{--sec-top:calc(var(--header-h) + var(--hero-gap))} .hero-trust{margin-top:var(--hero-gap)} } .ht-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 30px;border-left:1px solid var(--onblue-line)} .ht-item:first-child{padding-left:0;border-left:0} .ht-item:last-child{padding-right:0} /* логотип банка стоит на одной базовой линии с цифрами: снизу у цифр остаётся место под выносные элементы, у картинки его нет — компенсируем */ .ht-item--nbrb .ht-nbrb{display:block;height:38px;width:auto;margin-bottom:calc(var(--ht-num) * .16)} .ht-item--thesis{display:none} .ht-num{font-weight:700;font-size:var(--ht-num);color:#fff;line-height:1.12;white-space:nowrap} .ht-num .u{font-size:var(--fs-body);font-weight:600} /* подписи под цифрами в полосе доверия: на полступени жирнее обычного текста — на синем поле тонкий набор читается хуже */ .ht-lbl{color:#fff;font-size:clamp(15px,1.15vw,16px);font-weight:500;margin-top:auto;padding-top:10px;line-height:1.45;width:100%} /* тот же знак Яндекса в полосе доверия: по центру колонки, ростом со строку */ .ht-ya{display:block;height:1.15em;width:auto;margin:2px auto 0} @media (max-width:900px){ .ht-item{padding:16px 0;border-left:0;border-top:1px solid var(--onblue-line-strong)} /* the bank keeps a divider above it as well */ .hero-trust .ht-item:nth-child(2){border-top:1px solid var(--onblue-line-strong)} /* no glass plate on phones and tablets: these two read like the other three */ .ht-item--thesis{display:flex} .ht-item--nbrb .ht-lbl{white-space:normal;font-size:clamp(15px,1.15vw,16px)} } .doc{grid-column:8 / span 5;position:relative} /* hero stats — a plate that hangs slightly over the top edge of the document photo. It wears the same surface as the bullet digits (--onblue-fill): the field's own blue, no light gradient, no bright top line, so it belongs to the background instead of standing on it. One gap value (22px) is reused for every space inside the plate: to the left edge, both sides of the divider, and to the right edge. */ .doc-note{position:relative;z-index:2;display:flex;justify-content:center;width:var(--photo-w);margin:0 0 calc(-1 * var(--plate-overlap)) var(--photo-x)} /* баббл плотнее базовой плашки: во время появления он едет, и размытие фона под ним работает слабее — плотная заливка держит цвет и непрозрачность. Последняя правка: заливка на 10% темнее прежней — была rgba(30,89,200), стала rgba(27,80,180); прозрачность и размытие те же. */ .doc-note-plate{display:flex;align-items:center;padding:13px 22px;border:1px solid;border-radius:14px;border-color:rgba(255,255,255,.32);background:rgba(27,80,180,.60);-webkit-backdrop-filter:blur(27px) saturate(115%);backdrop-filter:blur(27px) saturate(115%);box-shadow:var(--shadow-plate);color:var(--onblue-text);font-size:var(--fs-caption);line-height:1.3} .dn-item{display:flex;flex:0 0 auto;align-items:center;gap:10px} .dn-item:first-child{padding-right:22px} .dn-item+.dn-item{border-left:1px solid var(--onblue-line-soft);padding-left:22px} .dn-item b{font-weight:700;font-size:clamp(22px,2.1vw,28px);color:#fff;line-height:1;white-space:nowrap} .dn-item span{display:block;text-align:left;white-space:nowrap;line-height:1.12;font-weight:500} /* логотип Яндекса вместо слова: высота равна строке текста, ширина по пропорции знака (745 × 215), поэтому он подстраивается под кегль подписи */ .dn-ya{display:block;height:1.1em;width:auto;margin-top:2px} /* printed photo in the hero: thin equal photo-paper frame, soft multi-layer shadow, 3D tilt */ .doc-photo{position:relative;width:var(--photo-w);margin:0 0 0 var(--photo-x)} /* Фотография стоит с постоянным наклоном: левый нижний угол опущен примерно на десятую часть высоты снимка. Угол считается так: смещение угла равно половине ширины снимка на синус угла; при отношении сторон 1000 × 562 десять процентов высоты дают sin = 0,1125, то есть 6,46 градуса. По просьбе владельца наклон чуть уменьшен: 5,5 градуса вместо 6,46 (тот же расчёт даёт около 8,6% высоты вместо 10), а затем ещё вдвое — до 2,75 градуса: владелец попросил сократить разницу с прямым положением ровно в два раза. Вместе с наклоном самой фигуры (−0,55) итоговый перекос снимка стал 2,2 градуса вместо прежних 4,4. */ .doc-photo__tilt{position:relative;transform-style:preserve-3d; transform:perspective(1100px) rotateZ(2.75deg) rotateX(0deg) rotateY(0deg) translateZ(0)} .doc-photo__shadow{position:absolute;left:2%;right:2%;top:5%;bottom:2%;border-radius:12px;background:var(--photo-cast);filter:blur(26px);opacity:.8;pointer-events:none;transform:translate3d(var(--shx,0px),var(--shy,10px),0)} /* Поля бумажного листа вокруг снимка — та самая светлая рамка. Было 10 px, по просьбе владельца стало 5 px: рамка вдвое тоньше, а снимок на те же 5 px крупнее с каждой стороны. */ .doc-photo__paper{position:relative;--frame:5px;padding:var(--frame);background:#fff;border-radius:3px;overflow:hidden;box-shadow:var(--shadow-photo)} .doc-photo img{display:block;width:100%;height:auto;border-radius:1px;box-shadow:none} /* a lamp, not a spotlight under the cursor: one wide specular streak with a soft halo. It slides across the paper as the paper turns and leaves the frame at the ends, so the photo catches the light only now and then, the way a glossy print does. The light and the grain it reveals are two layers, because they need two blends: screen for the light (it can only add), multiply for the grain — a lighter blend leaves white untouched, so the near-white frame would stay blank under the lamp. JS moves both by the same pair of custom properties, so they travel together. */ /* Вспышка на фотографии убрана совсем, по просьбе владельца: ни бегающего блика от указателя, ни зерна, которое он проявлял. Слои остались в разметке, и скрипт по-прежнему считает их координаты, но на экран они не выводятся — вернуть можно, убрав display:none. */ .doc-photo__glare,.doc-photo__glare-grain{display:none;position:absolute;inset:-45%;pointer-events:none;transform:rotate(-16deg) translate3d(var(--glare-x,0px),var(--glare-y,0px),0)} .doc-photo__glare{mix-blend-mode:screen;opacity:var(--glare,0);background:radial-gradient(26% 12% at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,0) 68%),radial-gradient(52% 26% at 50% 50%,var(--onblue-line-strong),rgba(255,255,255,0) 76%)} /* the paper's grain, carried by the lamp: the same file the rest of the page uses, cut to the shape of the streak, so while the light runs over the print the texture reads on the picture and on the white frame around it alike. */ .doc-photo__glare-grain{ mix-blend-mode:multiply;opacity:calc(var(--glare,0) * .25); background-image:var(--grain-image);background-size:var(--grain-tile-small);background-repeat:repeat; -webkit-mask-image:radial-gradient(26% 12% at 50% 50%,#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,0) 72%),radial-gradient(52% 26% at 50% 50%,#000 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,0) 82%); mask-image:radial-gradient(26% 12% at 50% 50%,#000 0%,rgba(0,0,0,.92) 45%,rgba(0,0,0,0) 72%),radial-gradient(52% 26% at 50% 50%,#000 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,0) 82%); } /* подсказку about-слоях держим только пока указатель над первым экраном: постоянный will-change заставляет браузер держать лишние слои в памяти */ .hero.is-tilting .doc-photo__tilt{will-change:transform} .hero.is-tilting .doc-photo__glare,.hero.is-tilting .doc-photo__glare-grain{will-change:transform,opacity} /* Раньше здесь при открытии страницы срабатывала вспышка: бумага на мгновение заливалась белым, а снимок проявлялся из пересвета. По просьбе владельца вспышка убрана совсем — фотография просто появляется сразу, в нормальной яркости, без белого хлопка и без «проявки». */ /* the print is white paper: the same grain the hero field and the cards use, only whisper-quiet here. One layer covers the whole sheet — the picture AND the frame around it — so the white frame carries exactly the same amount of grain as the photo inside it. Multiply is what makes that possible: a lighter blend leaves white untouched, so the frame would look clean and the picture grainy. */ .doc-photo__paper::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; opacity:var(--grain-photo);mix-blend-mode:multiply; background-image:var(--grain-image);background-size:var(--grain-tile-small);background-repeat:repeat; } /* the clip sits in the gap between the stats plate and the paper's right edge; on narrower windows that gap closes up, so the clip steps aside instead of sliding under the plate */ /* наклон снимка выключается на планшете и телефоне, а также по настройке «уменьшить движение»: там же гаснут слои блика и зерна под лампой */ @media (max-width:1024px),(prefers-reduced-motion: reduce){ .doc-photo__tilt{transform:none !important;will-change:auto} .doc-photo__glare,.doc-photo__glare-grain{display:none} } /* phones and tablets: the very same printed snapshot — photo-paper frame, soft shadow, square corners and a slight left-down tilt — only it never moves there */ @media (max-width:900px){ .doc-photo{transform:rotate(-0.75deg)} .doc-photo__shadow{display:none} .doc-photo__paper{--frame:4px;padding:var(--frame);box-shadow:var(--shadow-photo-flat)} } /* the calculator is a white paper card: the card stays white, the grain is printed into it as a separate layer that sits behind the content. A veil over the sheet would have dragged the card towards the sheet's own colour, which is beige — multiplying a white-levelled grain only adds relief. */ /* Нижний отступ карточки меньше верхнего: сумма набрана крупным SF UI Display, и под цифрами в её строке остаётся запас по высоте. Без поправки просвет от суммы до нижнего края выходил на несколько точек больше, чем от верхнего края до заголовка. Поэтому сумма стоит вплотную к своей строке (line-height:1), а нижний отступ подобран так, чтобы оба просвета на глаз совпали. */ .hero-calc{position:relative;z-index:2;width:var(--calc-w);margin:calc(-1 * var(--calc-overlap)) 0 0 var(--calc-x);background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 15px;color:var(--ink);box-shadow:var(--shadow-card-blue)} /* the grain of the calculator card and of the cards on phones and tablets. It is painted behind the content, so no label, number or slider is ever textured, and it only appears where a card really is: on the computer the photo column has no card of its own, so nothing is drawn there. */ /* Зерно бумаги лежит ПОВЕРХ содержимого: буквы, цифры и кнопки читаются как напечатанные на листе, а не как лежащие под ним. Multiply на тёмном ничего не меняет — чернила остаются чернилами, текстура видна на бумаге между ними. */ .hero-trust::after{ position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background-image:var(--grain-image);background-size:var(--grain-tile-small);background-repeat:repeat; mix-blend-mode:multiply;opacity:var(--grain-card); } /* Калькулятор — чистая белая бумага без единого эффекта: ни зерна, ни текстуры. На планшете и телефоне он к тому же закрывает зерно карточки под собой, поэтому выглядит одинаково чисто на всех размерах. */ /* карточка на телефоне и планшете остаётся ПОД содержимым: иначе зерно легло бы и на фотографию, а у неё уже своё */ .doc::before{ position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; background-image:var(--grain-image);background-size:var(--grain-tile-small);background-repeat:repeat; mix-blend-mode:multiply;opacity:var(--grain-card); } @media (max-width:900px){ .doc::before{content:""} } /* шапка карточки: слово «Калькулятор» слева, выбор валюты справа. На узком окне они разъезжаются на две строки, валюты прижимаются вправо. */ /* Шапка карточки — две колонки: слева слово «Калькулятор» и подсказка, справа выбор валюты. Левая колонка растянута по высоте кнопок и разводит содержимое по краям: слово встаёт по верхней границе кнопок, подсказка — по нижней. Высоту задают сами кнопки, отдельных чисел для этого нет. */ .hc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:stretch;margin-bottom:12px} .hc-headtext{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0} /* слово «Калькулятор» — тем же заголовочным шрифтом, что и цифры рядом */ .hc-title{font-size:var(--fs-body-s);font-weight:700;line-height:1;color:var(--ink);margin:0;letter-spacing:.02em;text-transform:uppercase} /* символы валют на кнопках выбора — тоже фирменным шрифтом */ .hc-sym{transition:color .15s ease} /* подсказка мельче слова, чтобы обе строки вставали в высоту кнопок */ /* подсказка заметно мельче слова, иначе она не встаёт двумя строками рядом с подписями валют */ /* жирность та же, что у подписей в полосе доверия («в финансах и праве») */ .hc-hint{font-size:var(--fs-note);font-weight:500;line-height:1.05;color:var(--ink-2);margin:0} /* Стрелка цепляется к самому слову «слайдер» и вынута из потока: она не участвует в высоте шапки, поэтому кнопки валют меряются только по двум строкам подсказки. */ .hc-slider-word{position:relative;white-space:nowrap} /* Полотно стрелки лежит на пустом месте под подсказкой и само ничего не занимает. Стрелка — прямая линия: начало в середине просвета между словами «потянув» и «слайдер», в 3 px под нижней границей текста (не справа от слова), кончик — в 3 px от края кружка ползунка, на прямой к его центру. Где именно, считает скрипт (drawArrow в site.js): и просвет, и высота строки, и кружок зависят от шрифта, суммы и ширины окна, поэтому одна нарисованная навсегда линия приходила мимо. Полотно шире слова влево на 80 px: начало стоит слева от слова, а кончик при малой сумме уезжает ещё левее. */ .hc-arrow{position:absolute;left:-80px;top:0;width:240px;height:110px; /* в основе лежит правило svg{max-width:100%} — оно сжимало стрелку до ширины слова и всё ломало. Для этой картинки ограничение снимаем. */ max-width:none;overflow:visible;color:var(--ink-3);pointer-events:none} /* как только человек тронул ползунок, подсказка свою работу сделала */ .hero-calc.is-used .hc-arrow{display:none} /* после того как человек взялся за ползунок, исчезает только вторая строка подсказки — «, потянув слайдер» — вместе со стрелкой. Первая строка «Выберите сумму,» остаётся. Место сохраняется, чтобы карточка не дёргалась. */ .hero-calc.is-used .hc-hint-tail{visibility:hidden} /* the three currencies share one contour, the way the messenger buttons in the hero do: a single outline, a hair line between the cells, and the chosen cell filled. The outline lives on the group, so the strip keeps the same 32px the separate buttons had and nothing around it moves. */ /* рамка обтягивает кнопки по высоте — нижняя обводка стоит вплотную к ним */ .hc-cur-btns{display:flex;height:fit-content;align-items:center;align-self:end;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:transparent} /* на компьютере мышь: кнопки валют остаются компактными, как были. Крупные — только там, где нажимают пальцем, см. медиазапрос ниже. */ .hc-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;font-family:inherit;font-size:var(--fs-caption);font-weight:700;color:var(--ink-2);background:transparent;border:0;cursor:pointer;white-space:nowrap;gap:5px;transition:background-color .15s ease,color .15s ease} .hc-chip+.hc-chip{border-left:1px solid var(--line)} .hc-chip:hover{background:var(--tint-neutral)} /* При наведении символ валюты подкрашивается синим — тем же, что у выбранной валюты, но вполсилы (--brand-50: синий 50%). У выбранной кнопки символ остаётся полным синим: иначе текущий выбор выглядел бы погасшим. */ .hc-chip:not(.is-active):hover .hc-sym{color:var(--brand-50)} /* the cell that is chosen reads as a light blue plate with blue letters; the filled part of the slider takes the brand at 50% */ .hc-chip.is-active{color:var(--brand);background:var(--brand-10)} /* these buttons sit on the white calculator, not on the blue field, so they take the brand ring instead of the white one the rest of the hero uses; the outline is clipped by the group, so the ring is drawn inside the cell */ .hc-cur-btns .hc-chip:focus-visible{outline-color:var(--focus);outline-offset:-3px} .hc-amount-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:0} .hc-amount{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:clamp(20px,2.6vw,26px);color:var(--ink);line-height:1.05;white-space:nowrap} .hc-amount .sym{color:var(--ink-0);font-size:var(--fs-h3)} /* просветы над и под линией одинаковые: бегунок выступает за линию на 10 px в каждую сторону, поэтому видимый зазор выходит ровным */ .hc-slider{display:block;width:100%;margin:9px 0;appearance:none;-webkit-appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand-50) var(--fill,40%),var(--line) var(--fill,40%));outline:none} .hc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;box-shadow:0 2px 8px rgba(16,33,59,.28);transition:background-color .15s ease-out} .hc-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;box-shadow:0 2px 8px rgba(16,33,59,.28);transition:background-color .15s ease-out} /* Наведение на ручку слайдера: белый кружок заливается светло-синим — тем же, что подписи на синем поле. Синяя обводка и тень остаются, поэтому кружок не пропадает ни на треке, ни на синем фоне. */ .hc-slider:hover::-webkit-slider-thumb, .hc-slider:active::-webkit-slider-thumb{background:var(--onblue-soft)} .hc-slider:hover::-moz-range-thumb, .hc-slider:active::-moz-range-thumb{background:var(--onblue-soft)} .hc-slider::-moz-range-track{height:8px;border-radius:999px;background:var(--line)} .hc-slider::-moz-range-progress{height:8px;border-radius:999px;background:var(--brand-50)} .hc-minmax{display:flex;justify-content:space-between;color:var(--ink-3);opacity:.5;font-size:var(--fs-body-s);margin-bottom:16px} /* margin-left:auto держит сумму справа и тогда, когда курса нет и она остаётся в строке одна */ .hc-result{font-weight:400;font-size:clamp(18px,2.4vw,24px);line-height:1;color:var(--brand);white-space:nowrap;margin-left:auto} .hc-result .lbl{font-weight:700;font-size:var(--fs-body-s);color:var(--ink-2)} /* Блик по итоговой сумме в рублях. Включается скриптом: когда человек отпустил ползунок и с полсекунды ничего не трогает, по цифрам пробегает светлая полоса слева направо. Цвет букв не меняется: тёмно-синяя заливка лежит нижним слоем, а полоса — верхним, и оба обрезаны по форме букв. Поэтому блик виден только на самих цифрах, а не на фоне вокруг них. */ @keyframes hc-sum-shine{ 0%{background-position:-140% 0,0 0} 100%{background-position:240% 0,0 0} } .hc-result [data-hero-rub].is-shine{ background-image: linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 60%), linear-gradient(var(--brand),var(--brand)); background-size:220% 100%,100% 100%; background-repeat:no-repeat; background-position:-140% 0,0 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:hc-sum-shine .9s ease-out 1} @media (prefers-reduced-motion: reduce){ .hc-result [data-hero-rub].is-shine{animation:none;background:none;-webkit-text-fill-color:currentColor} } /* курс стоит под выбором валюты и прижат вправо; перенос разрешён, иначе длинный текст про недоступный курс вылезал за карточку */ /* итоговая строка: курс слева внизу, сумма в рублях справа */ .hc-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-top:10px} /* курс печатается тем же цветом, что подписи «20 000» и «1 000 000» под ползунком: тот же ink-3 и та же прозрачность */ .hc-rate{display:block;text-align:left;color:var(--ink-3);opacity:.5;font-size:var(--fs-body-s);margin:0} /* phone (up to 767px): a plain flex column — caption, headline, bullets, trust list, then the white card with the calculator and the photo. Only the inner wrapper is dissolved so the trust list can sit between the text and the card without splitting the text block apart. */ /* планшет и телефон: тут нажимают пальцем, поэтому кнопки валют крупнее, а слово «Калькулятор» читается капсом */ @media (max-width:900px){ .hc-chip{min-height:30px;height:30px;padding:0 18px;font-size:var(--fs-body-l)} /* на планшете и телефоне в кнопке остаётся только символ */ .hc-word{display:none} } @media (max-width:767px){ .hero{overflow:visible;padding-bottom:0;display:flow-root} .hero>.wrap{display:flex;flex-direction:column;align-items:stretch; /* верх первого экрана на телефоне возвращён на прежнее место: текст поднимается не отступом сверху, а сдвигом самого блока текста */ padding-top:calc(var(--header-h) + clamp(20px,3.2vw,32px));padding-bottom:0; margin-bottom:calc(-1 * var(--card-lift,0px))} .hero-inner{display:contents} .hero-copy{order:1} .hero-trust{order:2;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:0;margin:34px 0 0} .doc{order:3;display:flex;flex-direction:column;position:relative;z-index:2;margin-top:24px; background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-notepad)} .hero-calc{order:1;width:100%;margin:0;border:0;border-radius:0;box-shadow:none; background:#fff;padding:8px 4px 14px} .doc-photo{order:2;width:90%;margin:0 auto 16px} .doc-photo img{border-radius:1px;box-shadow:none} .doc-note{display:none} /* Телефон: текст булетов идёт тем же кеглем, что обычный текст, — как у подписи «Доверка Финтех в реестре поставщиков платёжных услуг» (16 px). Раньше шаги стояли на шаг мельче (15 px) и читались как сноска под заголовком. Номер шага растёт вместе со строкой: он часть того же булета, и при 14 px цифра выглядела приклеенной сбоку. */ .hero-steps li{font-size:var(--fs-body);line-height:1.25} .hero-steps .hs-n{font-size:inherit} .ht-lbl{margin-top:6px;padding-top:0} /* Межстрочный просвет подписей плотнее, как на планшете: 1.45 -> 1.25. Пять подписей идут между булетами и карточкой и занимают меньше высоты. */ .hero-trust .ht-lbl{font-size:clamp(15px,1.15vw,16px);white-space:normal;line-height:1.25} /* same list order as on the tablet, with "15 лет" and "4,9" sharing one line */ .hero-trust .ht-item{grid-column:1 / -1} .hero-trust .ht-item:nth-child(1){order:3;grid-column:1} .hero-trust .ht-item:nth-child(2){order:1} .hero-trust .ht-item:nth-child(3){order:2} .hero-trust .ht-item:nth-child(4){order:5} .hero-trust .ht-item:nth-child(5){order:4;grid-column:2} } /* tablet (768–900px): the headline and the two-column bullet list run the full width. Below them one white card carries the trust list (left) and the calculator with the photo (right), and it hangs over the blue/white edge. */ @media (min-width:768px) and (max-width:900px){ /* flow-root keeps the negative pull on the wrap inside the hero, so the blue field really becomes shorter instead of staying at the card's bottom */ .hero{overflow:visible;padding-bottom:0;display:flow-root} .hero>.wrap{display:grid;grid-template-columns:1fr 1fr; grid-template-areas:"cats cats" "h1 h1" "steps steps" "trust doc"; column-gap:0;row-gap:0;align-content:start; /* верх первого экрана на планшете возвращён на прежнее место: текст поднимается сдвигом самих надзаголовка и заголовка */ padding-top:calc(var(--header-h) + var(--hero-gap) / 2);padding-bottom:0; margin-bottom:calc(-1 * var(--card-lift,0px))} .hero-inner,.hero-copy{display:contents} .hero-cats{grid-area:cats} /* размер берётся из общего плавного правила: фиксированные 53 точки здесь давали скачок при переходе на планшет */ .hero h1{grid-area:h1} .hero-steps{grid-area:steps;grid-template-columns:1fr 1fr;column-gap:24px;max-width:none;margin-bottom:28px} /* Планшет: булеты идут тем же кеглем и с тем же межстрочным шагом, что обычный текст на телефоне, — 16 px и 1.25. Раньше здесь было 15 px и 1.4, и шаги читались мельче подписей под цифрами, хотя это текст того же уровня. Номер шага растёт вместе со строкой, как и на телефоне. */ .hero-steps li{font-size:var(--fs-body);line-height:1.25} .hero-steps .hs-n{font-size:inherit} /* the notepad: paper, rounded only on its outer corners, and it carries the shadow */ .hero-trust{grid-area:trust;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:0;margin:0;align-content:center; position:relative;isolation:isolate; background:#fff;border-radius:18px 0 0 18px;padding:22px;box-shadow:var(--shadow-notepad)} .hero-trust::after{content:""} .doc{grid-area:doc;display:flex;flex-direction:column;justify-content:flex-start;position:relative;z-index:2; background:#fff;border-radius:0 18px 18px 0;padding:0;overflow:hidden;box-shadow:var(--shadow-notepad)} .hero-calc{order:1;width:100%;margin:0;border:0;border-radius:0;box-shadow:none; background:#fff;padding:22px} .doc-photo{order:2;width:80%;margin:0 auto 28px} .doc-photo img{border-radius:1px;box-shadow:none;display:block;width:100%;height:auto} .doc-note{display:none} /* the list reads dark on white, with no rule at the top or bottom edge */ /* содержимое левого листа стоит по центру, а не по левому краю */ /* между строками блокнота воздух: 20 точек от содержимого до разделителя. Было 24, потом 12 — 12 оказалось тесно, здесь середина: строки дышат, но список не растягивается на весь лист. */ .ht-item{flex-direction:column;align-items:center;text-align:center;padding:20px 0;border-left:0;border-top:1px solid rgba(28,30,42,.14)} .ht-item--thesis{display:flex} .ht-item--nbrb .ht-nbrb{height:36px;filter:brightness(0)} :root{--ht-num:32px} .ht-num{color:var(--navy)} /* Планшет: подписи того же кегля, что на телефоне, — 16 px, и с тем же межстрочным шагом 1.25. Эталон — «Доверка Финтех в реестре поставщиков платёжных услуг» на телефоне. Раньше здесь было 15 px и 1.45, и подписи читались мельче основного текста. */ .hero-trust .ht-lbl{margin-top:4px;padding-top:0;font-size:clamp(15px,1.15vw,16px);color:var(--ink-2);white-space:normal;line-height:1.25} /* bank, operations, "15 лет" + "4,9" on one line, then the deals. The visible block runs from the bank's logo to the last caption, so the outer paddings must not add air above or below it — otherwise the whole list sits off-centre inside the notepad. */ .hero-trust .ht-item{grid-column:1 / -1} .hero-trust .ht-item:nth-child(2){border-top:0;padding-top:0} .hero-trust .ht-item:nth-child(4){padding-bottom:0} .hero-trust .ht-item:nth-child(1){order:3;grid-column:1} .hero-trust .ht-item:nth-child(2){order:1} .hero-trust .ht-item:nth-child(3){order:2} .hero-trust .ht-item:nth-child(4){order:5} .hero-trust .ht-item:nth-child(5){order:4;grid-column:2} } /* short laptop windows: the photo plate and the calculator get a little more compact, so the same first screen still ends above the fold */ @media (min-width:1200px) and (max-height:880px){ :root{--photo-w:127.8%} /* было 142%, минус 10% */ .hero-calc{padding:16px 18px 11px} .hc-head,.hc-minmax{margin-bottom:12px} /* тот же пересчёт, что и в обычной карточке: нижний просвет не больше верхнего */ .hc-result{line-height:1} } /* narrow computer windows: there the photo takes a smaller share of the column */ @media (min-width:901px) and (max-width:1199px){ :root{--photo-w:121.5%} /* было 135%, минус 10% */ /* the narrow desktop is the one place where the rate used to drop onto a second line: the card keeps its width, but its inner paddings and the currency cells give back the few pixels the rate needs to stay on the same row */ .hero-calc{padding-left:14px;padding-right:14px} .hc-head{gap:8px} .hc-chip{padding:0 7px} } /* wide screens have room to spare between the currency strip and the rate, so the calculator gives a little of its width back; below this the narrow desktop keeps the wider card, or the rate would drop onto its own line */ @media (min-width:1200px){ :root{--calc-w:96%} /* На широком окне карточка уже, и слово «Калькулятор» подходило к подписям валют. Клетки валют становятся мельче: шрифт подписей и внутренние поля ужимаются, вместе с ними ужимается весь контур выбора валюты. */ .hc-chip{padding:0 9px;font-size:12px;gap:4px} /* Заголовок «Оплати рублями…» на широком окне подходил к снимку справа: сам текст мельче, плашка «0% комиссии в договоре» остаётся прежнего размера. Было 0.9 от кегля заголовка, по просьбе владельца уменьшено ещё на 10% — 0.81. */ /* зелёная строка повторяет кегль второй части — они должны быть одного размера. Межстрочный шаг тоже: у всей надписи он здесь 0,98, а у основной части — свой, 1; зелёная берёт 1, чтобы строки стояли так же */ /* Ограничение сверху: на высоких окнах строка вырастала настолько, что заходила на фотографию справа. 58 точек — предел, при котором «0,1% комиссии» (7 кеглей в ширину) остаётся в своей колонке. */ } /* Компьютер: логотип банка ровно по высоте букв цифр — верх логотипа на верхней границе «15», низ — на базовой линии. */ @media (min-width:901px){ .ht-item--nbrb .ht-nbrb{ height:calc(var(--ht-num) * .75); margin-top:calc(var(--ht-num) * .19); margin-bottom:0; } /* Подпись стоит вдвое ближе к цифрам, чем раньше: просвет от нижнего края «15» до верхнего края «в финансах» — 11 px вместо 22. */ /* Межстрочный просвет подписи плотнее (1.3 -> 1.2 -> 1.1): две строки встают ближе друг к другу. Нижняя граница подписи при этом остаётся на месте — у двух строк отняли 0.1em на строку, и ровно эти 0.2em вернули сверху отступом. Поэтому вторая строка («и праве», «поставщиков платёжных услуг», «операций») стоит там же, где стояла, а первая («в финансах», «Доверка Финтех в реестре», «проведённых») опускается на 0.2em — 3 px. Итого за два раза (1.3 -> 1.1) сверху возвращено 0.4em. */ .ht-lbl{margin-top:0;margin-bottom:5px;padding-top:.4em;line-height:1.1} /* У логотипа своя высота, поэтому 6 px возвращают тот же просвет до подписи, что у цифр: низ всех трёх подписей остаётся на одной линии. */ .ht-item--nbrb .ht-lbl{margin-top:6px} /* Булеты на компьютере идут с тем же межстрочным шагом, что подпись «в финансах и праве» под цифрами: 1.4 -> 1.1. Строки внутри одного шага встают плотнее, и четыре шага занимают меньше высоты. Кегль при этом не трогаем — он остаётся 14 px, как и был. */ .hero-steps li{line-height:1.1} /* Разделители между «15 лет», банком и «55 000+» короче на 30%: линия больше не тянется на всю высоту пункта (84 px), а занимает 70% высоты (около 59 px) и стоит по центру. Раньше это была рамка самого пункта, поэтому рамку снимаем, а линию рисуем отдельным слоем — только между пунктами, у первого её нет. */ .ht-item{position:relative;border-left:0} .ht-item+.ht-item::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:70%;background:var(--onblue-line); } /* Шапка калькулятора собрана плотнее: между словом «Калькулятор» и подсказкой 2 px вместо 6. Подсказка поднимается на эти 4 px, и шапка карточки становится ниже — а вместе с ней и кнопки валют: их высоту задаёт шапка, сами кнопки тянутся по строке (46 -> 42 px). */ .hc-headtext{gap:2px} /* Подписи 20 000 / 1 000 000 поднимаются к линии ползунка: отступ под ним 9 -> 5 px. Ниже не поднимаем — кружок ползунка выступает за линию на 10 px и начал бы наезжать на строку цифр. */ .hc-slider{margin-bottom:5px} } /* наклон напечатанного снимка: только на компьютере, где он и был */ @media (min-width:901px){ .doc-photo{transform:rotate(-0.55deg)} } /* Планшет: блокнот с калькулятором опущен на 10 точек вместе со всем, что под ним */ /* подтяжка правого блока на планшете и узком компьютере снята: он должен стоять ровно по центру между шапкой и полосой доверия */ @media (min-width:701px) and (max-width:900px){ .hero{padding-bottom:10px} } /* нижнее поле сетки здесь тоже 0: лишние 10 точек сдвигали центровку вниз */ @media (min-width:901px) and (max-width:1199px){ .hero-inner{padding-bottom:0} } /* левый лист блокнота встаёт по верхней границе правого */ @media (min-width:701px) and (max-width:900px){ .hero-trust{transform:translateY(10px)} } /* высота кнопок выбора валюты — на 20% меньше */ @media (min-width:901px){ .hc-chip{height:28px} } /* Компьютер: заголовок первого экрана крупнее (было до 44 точек), надзаголовок «Покупка · Рассрочка · Аренда» поднят выше заголовка */ @media (min-width:1200px){ /* на широком компьютере тот же закреплённый просвет: 20 − 5 = 15 точек */ /* просвет до заголовка тот же, что на остальных ширинах — 20 точек */ .hero-copy{padding-bottom:10px} } /* --- Компьютер: валюта без подписей -------------------------------------- По просьбе владельца у выбора валюты остаются только значки: «Доллары», «Баты» и «Евро» убраны, поэтому кнопки стали узкими и карточка калькулятора тоже сузилась. Курс печатается тем же кеглем, что подсказка «Выберите сумму, потянув слайдер», а не крупнее неё. */ @media (min-width:901px){ .hc-word{display:none} .hc-chip{padding:0 11px;gap:0;font-size:var(--fs-body-s)} .hc-rate{font-size:var(--fs-note)} } /* Масштабы 125% (узкий компьютер) и 100% (широкий экран): калькулятор занимает одну и ту же долю колонки — 88% — и одинаково уменьшен на 4% (scale .96) вокруг своей середины по верху. Поток страницы не меняется. */ @media (min-width:901px){ :root{--calc-w:88%} .hero-calc{transform:scale(.96);transform-origin:center top} } /* --- Центровка правого блока на широком экране --------------------------- Стеклянный бабл выступает выше фотографии, а калькулятор — ниже неё, поэтому колонка справа по краскам стояла на 19 точек ниже левого текста. Поднимаем её ровно на эту разницу: середина бабл + фото + калькулятор совпадает с серединой левого блока. Поток страницы не меняется. */ @media (min-width:1200px){ /* Сдвиг задан обычным top у относительно позиционированного блока, а не transform: трансформ на предке создаёт свой слой, и стеклянная плашка внутри него перестаёт размывать фон — за ней видно всё как сквозь чистое стекло. top поток не меняет, поэтому раскладка та же. */ .hero .doc{top:-14.5px} } /* --- Появление первого экрана на компьютере ------------------------------ При загрузке страницы объекты первого экрана выезжают на место: фотография — снизу вверх через 0,2 с, калькулятор — через 0,4 с, стеклянный бабл — сверху вниз через 0,6 с, тезисы доверия — по очереди через 0,5 с, 0,4 с и 0,6 с. Движение сделано свойством translate, оно складывается с наклонами и масштабом, поэтому ничего не ломает. */ @keyframes hero-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}} @keyframes hero-drop{from{opacity:0;translate:0 -30px}to{opacity:1;translate:0 0}} @keyframes dn-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} @media (min-width:901px) and (prefers-reduced-motion: no-preference){ .hero .doc-photo{animation:hero-rise .55s cubic-bezier(.22,.61,.36,1) .2s both} .hero-calc{animation:hero-rise .55s cubic-bezier(.22,.61,.36,1) .4s both} /* Плашка сама не анимируется: любая анимация на её предке (translate или opacity) создаёт отдельный слой, и размытие фона пропадает на всё время движения — стекло «включалось» только после неё. Поэтому стекло стоит на месте с первого кадра, а плавно проявляются только цифры внутри него: анимация на дочерних элементах размытие не ломает. */ .doc-note .dn-item{animation:dn-in .5s cubic-bezier(.22,.61,.36,1) .6s backwards} .hero-trust .ht-item{animation:hero-rise .5s cubic-bezier(.22,.61,.36,1) both} .hero-trust .ht-item:nth-child(1){animation-delay:.5s} .hero-trust .ht-item:nth-child(2){animation-delay:.4s} .hero-trust .ht-item:nth-child(3){animation-delay:.6s} .hero-trust .ht-item:nth-child(4){animation-delay:.7s} .hero-trust .ht-item:nth-child(5){animation-delay:.8s} } /* --- Вспышка при появлении фотографии ---------------------------------- Белая пелена на листе снимка: вспыхивает в момент выезда и гаснет. */ .doc-photo__paper::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none; background:#fff;opacity:0;border-radius:inherit} @keyframes hero-photo-flash{ 0%{opacity:.9} 45%{opacity:.35} 100%{opacity:0} } @media (min-width:901px) and (prefers-reduced-motion: no-preference){ .doc-photo__paper::after{animation:hero-photo-flash .55s ease-out .2s both} }