/* Everything below the first screen: the case, the three entry points, the documents, the payment route, the client stories, the founder and the team, the FAQ memo, the blue call-to-action field, the lead form and the footer. The rule for all of it is the first screen's rule: a section is not a grid of equal boxes, it is a desk with paper on it. Every block below is built from the same four things — a white sheet with printed grain, a real shadow that says which sheet lies on top, one object that hangs over an edge, and type that stays straight while the paper around it may lean. */ /* ---------- the sheet ----------------------------------------------- A piece of white paper: grain printed over the content (multiply, 5%), so letters look printed on the sheet instead of floating above it. Nothing here draws a border — real paper has none, the shadow separates it. */ .sheet{position:relative;background:#fff;border-radius:var(--sheet-radius);box-shadow:var(--sheet-2)} .sheet::after{ content:"";position:absolute;inset:0;z-index:2;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); } /* ---------- the printed photo --------------------------------------- One frame for every photo below the first screen: a thin white paper margin, a soft shadow, a barely visible tilt and the same grain the hero's print carries. The photo keeps its own height — the frame wraps it, never crops it. */ .print{position:relative;margin:0;padding:var(--print-frame);background:#fff;border-radius:3px;box-shadow:var(--shadow-photo-flat);transform:rotate(var(--print-tilt))} .print img{display:block;width:100%;height:auto;border-radius:2px} .print::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:3px; background-image:var(--grain-image);background-size:var(--grain-tile-small);background-repeat:repeat; mix-blend-mode:multiply;opacity:var(--grain-photo); } /* a polaroid: the writing lives on the paper below the picture */ .print--polaroid{padding:12px 12px 20px;border-radius:2px;transform:rotate(var(--pt));box-shadow:var(--sheet-3)} .print--polaroid figcaption{display:flex;flex-direction:column;gap:8px;padding:16px 4px 0} /* ---------- three payment steps --------------------------------------- Three quiet columns on the white sheet, as on the reference: a small number, the object that stands for the step, a headline in deep blue and two or three lines under it. No card, no border, no shadow — the air between the columns does the separating work. The picture keeps its own frame: it is drawn on white, so it sits on the page without a box. */ .fc{padding:var(--sec-top) 0 var(--section);background:var(--paper)} .fc-title{font-size:clamp(24px,3vw,34px);line-height:1.16;letter-spacing:-.02em;color:var(--ink);margin:0} .fc-row{list-style:none;margin:var(--head-gap) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px)} /* карточка — контейнер: переносы .c-br внутри неё считаются от её ширины */ .fc-card{display:flex;flex-direction:column;container-type:inline-size} /* номера шагов 01 · 02 · 03: кегль вдвое крупнее и светлое начертание — для этого в набор добавлено тонкое начертание (weight 300). Цвет — серый, ровно тот же, что у номеров в «Этапах работ» и в «Частых вопросах» (Slate Gray): это одна и та же серия номеров на всей странице, и синими они больше не выделяются. */ .fc-num{font-weight:300;font-size:calc(var(--fs-caption) * 2); line-height:1;letter-spacing:.08em;color:var(--ink-3)} /* иллюстрация шага занимает 80% ширины колонки — на 20% меньше прежнего */ .fc-photo{display:block;width:80%;height:auto;margin-top:clamp(12px,2.2vw,24px)} /* начертание и кегль у заголовка карточки и у строки «Мы разберёмся…» одни и те же — они читаются как одна серия; цвет у обоих чёрный. Шрифт — тот же, что у обычного текста страницы (SF UI Display), и записан он ровно теми же словами, что в 01-foundation.css у body: если веб-шрифт не загрузится, запасной будет один и тот же, и заголовок не выпадет. */ .fc-card-title{margin:clamp(18px,2.6vw,32px) 0 0; font-size:clamp(19px,1.75vw,25px); font-weight:700;line-height:1.22;letter-spacing:-.01em;color:var(--ink)} .fc-card-text{margin:12px 0 0;font-size:clamp(15px,1.15vw,16px);line-height:1.55;color:var(--ink-2)} @media (max-width:900px){ /* планшет: три карточки держатся в один ряд, как на компьютере, но колонки уже — поэтому между ними меньше просвета. Сверху секция отступает на высоту свисающего блокнота (--card-lift) плюс свой воздух: иначе заголовок уходит под блокнот с первого экрана. */ .fc{padding-top:calc(var(--section) + var(--card-lift,0px) + clamp(16px,3vw,28px))} .fc-row{grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px)} } @media (max-width:700px){ /* телефон: карточки в одну колонку; сверху та же поправка на свисающий блокнот плюс больше воздуха, чтобы заголовок не прятался под калькулятор */ .fc{padding-top:calc(var(--section) + var(--card-lift,0px) + clamp(24px,6vw,40px))} /* на телефоне картинка шага занимает 48% ширины колонки */ .fc-photo{width:48%} .fc-row{grid-template-columns:1fr;gap:clamp(32px,8vw,44px)} } /* ---------- what we do with the documents ---------------------------- A quiet white block after the grey cards. The headline runs the full width of the block, so its words break exactly where the copy breaks them; under it two columns — the words on the left, the picture on the right. The words keep a comfortable measure, the picture keeps its own frame: no cropping, no fixed height. */ /* Обе строки заголовка лежат в одной ячейке, поэтому верхний воздух считается как у всех: один шаг секции от её края до заголовка. Запасное значение на случай, если скрипт не отработал: высота первой строки в долях кегля заголовка (0,607) при том же кегле, что у всех заголовков страницы. */ /* Снимок в этом блоке выезжает справа: пока он не встал на место, он стоит на 64 точки правее. Когда секция занимает всю ширину окна, эти 64 точки вылезали за край и на странице появлялась горизонтальная прокрутка. overflow-x:clip режет только вылет по горизонтали; вертикаль по-прежнему видна, поэтому конфетти, которые летают над заголовком, не обрезаются. */ .docs{padding:var(--sec-top) 0 var(--section);background:#f7f9fd;overflow-x:clip} /* «Неразбериха / с документами?» — отдельная полоса над блоком: две строки крупным кеглем, по центру. Кегль считается от ширины окна и упирается в 72 точки. Строки заходят друг на друга вдвое сильнее прежнего: шаг 0.4 от кегля минус 6 точек. Скрипт растягивает шаг, пока заголовок входит в экран. ОТСТУПЫ СЧИТАЮТСЯ В ДОЛЯХ ОТ ШАГА СЕКЦИИ (--section), а не в жёстких точках. Раньше здесь стояли постоянные −100 и +50 точек: при масштабе 125% окно в точках становится уже, шаг секции уменьшается, а эти числа оставались прежними — и соотношение двух просветов вокруг заголовка ломалось. Теперь: сверху 0.96 шага секции, снизу 0.82. Соотношение 1 : 0.85 держится на любом масштабе и на любой ширине окна. Сверху отступ собирается из собственного отступа блока карточек (он равен одному шагу) и отрицательного внешнего отступа этой полосы в −0.04 шага. Именно внешним, а не внутренним: внутренний пришлось бы считать вычитанием, и на узких экранах он стал бы отрицательным, а такой отступ браузер просто отбрасывает. */ .docs-intro{padding:0 0 calc(var(--section) * 0.82);margin-top:calc(var(--section) * -0.04);background:var(--paper)} /* две колонки: слева «Документы под ключ» и текст с кнопкой, справа снимок. Левый столбец открывается заголовком, поэтому текст начинается ровно от его верхней границы; снимок стоит по центру высоты. */ /* Колонки ровно по половине ширины: слева текст, справа снимок, и снимок занимает честные 50% всей ширины блока. Просвет между колонками не отдельной дорожкой, а полем внутри левой колонки — иначе сетка отдавала под зазор часть ширины, и картинка выходила уже половины. */ /* Две колонки в один ряд: слева снимок, справа одной колонкой заголовок «Решим под ключ» и весь текст с кнопками. Ряд выравнивается по центру, поэтому правая часть стоит ровно по вертикальному центру квадрата — от его верхней до нижней границы. Заголовок живёт в правой колонке, а не отдельным рядом сетки — иначе он оказывался выше снимка и центровка считалась по нему. */ .docs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:0;row-gap:var(--hero-line-gap);align-items:center} /* правая колонка: заголовок, затем текст с кнопками; центрируется по квадрату */ .docs-col{grid-column:2;grid-row:1;align-self:center;padding-right:0;padding-left:clamp(28px,5vw,72px)} /* прежний отступ у внутренней части больше не нужен: он теперь у колонки */ .docs-left{padding-left:0} /* воздух между «Документы под ключ» и «Мы разберёмся…» теперь задаёт просвет между рядами сетки, поэтому у самого текста верхнего поля нет */ .docs-copy{margin-top:0} /* то же начертание, кегль и тот же шрифт, что у заголовков карточек выше */ /* Жирность на две ступени легче прежней: было 700, стало 500. Кегль, шаг строк и переносы те же — строки в разметке заданы жёстко. */ .docs-lead{margin:0;font-size:clamp(19px,1.75vw,25px); line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink);max-width:60ch} /* кегль тот же, что у текста карточек выше («Вы будете понимать порядок оплаты…»): было 14 точек, стало те же 15–16, что у соседнего блока */ .docs-text{margin:clamp(20px,2.4vw,28px) 0 0;font-size:clamp(15px,1.15vw,16px); line-height:1.55;color:var(--ink-2);max-width:62ch} .docs-text + .docs-text{margin-top:14px} /* кнопка и группа мессенджеров стоят одной строкой без зазора: кнопка своим правым краем заходит на группу, и та читается как её продолжение. На совсем узком месте группа всё равно уйдёт под кнопку. */ .docs-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px; margin-top:clamp(28px,3.2vw,40px)} /* Снимок НЕ участвует в расчёте высоты строки: он вынут из потока и вписан в площадь, которую задаёт левая колонка с текстом. Так его верхний край никогда не поднимается выше заголовка «Трудности с документами?», а по вертикали он стоит по центру этой площади. Раньше картинка была выше текста и сама растягивала строку — отсюда и торчащий верх. */ /* Верхний и нижний отступ равны высоте надстрочного просвета у заголовка (.docs-subtitle: кегль 24–34 точки и шаг 1,16, значит буквы начинаются примерно на 0,22 кегля ниже верхней границы блока). Без этой поправки верхний край рисунка вставал на границу блока — то есть чуть выше самих букв «Трудности с документами?». */ /* Снимок здесь — горизонтальный экран сервиса (1672 на 941). Раньше стояла вертикальная фотография, и клетка тянулась на всю высоту текста. Теперь клетка берёт пропорции самого кадра, а не высоту соседа: экран не обрезается по краям и не растягивается. По центру строки он стоит серединой — по высоте текста рядом. */ .docs-figure{position:relative;margin:0;align-self:center;grid-column:1;grid-row:1; aspect-ratio:1/1} /* Отступ сверху и снизу равен надстрочному просвету заголовка (.docs-subtitle: кегль 24–34 точки при шаге 1,16, значит буквы начинаются примерно на 0,22 кегля ниже верхней границы блока). Без него верхний край рисунка вставал на границу блока — чуть выше самих букв «Трудности с документами?». Отступ задан через top/bottom у самой картинки: это надёжнее, чем padding у родителя, потому что абсолютный элемент считает inset от padding-box. */ /* Снимок целиком в своей клетке: пропорции клетки и кадра совпадают, поэтому экран показан полностью — без обрезки по краям. */ .docs-figure img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:center;border-radius:20px} /* планшет: та же схема, что на компьютере — снимок слева, слова справа */ @media (max-width:900px){ .docs-col{padding-left:clamp(20px,3.6vw,36px);padding-right:0} } /* телефон: всё в одну колонку — текст с кнопкой, затем снимок */ @media (max-width:700px){ .docs-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(12px,3vw,18px)} .docs-col{grid-column:1;grid-row:1;padding-left:0;padding-right:0} /* на телефоне квадратный экран идёт во всю ширину: в половину колонки на нём ничего не прочитать */ .docs-figure{grid-column:1;grid-row:2;width:100%;align-self:start} .docs-figure img{position:static;width:100%;height:auto;object-fit:fill} } /* ---------- how the payment goes ---------------------------------------- A plain white section: the headline in the left column, its paragraph in the right one, and the numbered steps under them across the whole width, ruled off with hairlines that run edge to edge. */ .why{padding:var(--sec-top) 0 var(--section);background:var(--paper)} /* Две колонки: слева заголовок «Этапы работ», справа подпись о нескольких платежах. Список этапов идёт ниже во всю ширину. Подпись стоит в правой колонке по верхней границе заголовка, поэтому у неё нет верхнего отступа — только небольшая оптическая поправка. Воздух от подписи «порядок расчётов можно определить заранее» до списка этапов — общий --head-gap, как у остальных блоков страницы. */ .why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(28px,5vw,72px);row-gap:var(--head-gap);align-items:start} .why-title{grid-column:1;grid-row:1;margin:0;font-size:clamp(32px,4.4vw,68px);line-height:1.04; letter-spacing:-.03em;color:var(--ink)} .why-lead{grid-column:2;grid-row:1;margin:0;padding-top:clamp(4px,.8vw,14px); font-size:clamp(15px,1.25vw,18px);line-height:1.6; color:var(--ink-3);max-width:56ch} .why-list{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0} @media (max-width:700px){ .why-grid{grid-template-columns:minmax(0,1fr)} .why-title,.why-lead,.why-list{grid-column:1;grid-row:auto} /* зазор между строками задаёт row-gap сетки (--head-gap) — свой отступ не нужен */ .why-lead{padding-top:0;margin-top:0} } /* номер и текст стоят на одной базовой линии — цифра не «висит» выше строки. Колонка под номер и просвет до текста уменьшены круглыми числами: было 48–96 под номер и 12–24 просвета, стало 36–64 и 10–20. Текст подошёл к цифрам ближе, а цифры по-прежнему стоят в одну вертикаль. */ .why-item{display:grid;grid-template-columns:clamp(36px,5%,64px) minmax(0,1fr); column-gap:clamp(10px,1.4vw,20px);align-items:baseline; padding:clamp(16px,2vw,30px) 0;position:relative} /* Разделители между этапами — отдельные линии у каждого пункта: верхняя линия у всех пунктов, нижняя — у последнего. Раньше это были рамки пунктов, но рамку нельзя нарисовать слева направо, поэтому линии — псевдоэлементы, которые раскрываются масштабом от левого края. Появляются по очереди с шагом 0,2с, когда центр окна совпадает с центром секции (класс .is-in добавляет скрипт). Без скрипта линии видны сразу. */ .why-item::before,.why-item:last-child::after{content:"";position:absolute;left:0;width:100%;height:1px; background:var(--line-strong);transform-origin:left center; transition:transform .55s cubic-bezier(.22,.61,.36,1) var(--why-line-delay,0s),background-color .18s ease} .why-item::before{top:-1px} .why-item:last-child::after{bottom:-1px} html.js .why .why-item::before,html.js .why .why-item:last-child::after{transform:scaleX(0)} html.js .why.is-in .why-item::before,html.js .why.is-in .why-item:last-child::after{transform:scaleX(1)} html.js .why.is-in .why-item:nth-child(1)::before{--why-line-delay:0s} html.js .why.is-in .why-item:nth-child(2)::before{--why-line-delay:.2s} html.js .why.is-in .why-item:nth-child(3)::before{--why-line-delay:.4s} html.js .why.is-in .why-item:nth-child(4)::before{--why-line-delay:.6s} html.js .why.is-in .why-item:nth-child(5)::before{--why-line-delay:.8s} html.js .why.is-in .why-item:nth-child(6)::before{--why-line-delay:1s} html.js .why.is-in .why-item:last-child::after{--why-line-delay:1.2s} @media (prefers-reduced-motion: reduce){ html.js .why .why-item::before,html.js .why .why-item:last-child::after{transform:scaleX(1);transition:none} } /* номер шага тем же начертанием, что цифры 01–03 в первом блоке, и таким же синим: серии чисел должны читаться как одна. Номер и текст этапа крупнее в 1.3 раза (просьба «на тридцать процентов»), поэтому и строки между разделителями стали выше. */ /* Номера этапов — того же кегля и той же светлой насыщенности, что номера в блоке «На любом этапе поможем с оплатой» */ /* Номера этапов — серые, того же цвета, что номера вопросов в «Частых вопросах» (Slate Gray). На наведении они, как и там, синеют. */ .why-num{font-weight:300;font-size:calc(var(--fs-caption) * 2); line-height:1.2;letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums} .why-item-title{margin:0;font-size:calc(clamp(17px,1.35vw,22px) * 1.3);font-weight:500;line-height:1.4;color:var(--ink)} /* Наведение на строку этапа. Заливки синим больше нет — вместо неё: · синими становятся разделитель над пунктом и разделитель под ним (это верхняя граница следующего пункта, у последнего — его нижняя); · номер и текст пункта красятся фирменным синим; · справа появляется иллюстрация этого этапа: она повёрнута на 20 градусов, стоит серединой на верхнем разделителе и выступает за правый край на 100 точек. Секция обрезает выступ по горизонтали, поэтому страница не получает лишней прокрутки. Всё это только там, где есть мышь. */ .why{overflow-x:clip} /* без мыши иллюстрации не нужны — иначе они встанут в сетку строки */ .why-img{display:none} @media (hover:hover){ .why-num,.why-item-title{transition:color .18s ease} .why-item:hover::before{background:var(--brand)} .why-item:hover + .why-item::before{background:var(--brand)} .why-item:last-child:hover::after{background:var(--brand)} .why-item:hover .why-item-title{color:var(--brand)} .why-item:hover .why-num{color:var(--brand)} /* иллюстрация стоит по центру самой полоски этапа (а не на верхнем разделителе) и у всех этапов наклонена одинаково — вправо на 20° */ /* тень ложится по силуэту иллюстрации, а не по прямоугольнику кадра: у всех снимков этапов прозрачный фон */ .why-img{display:block;position:absolute;right:0;top:50%;z-index:2; width:clamp(156px,18.2vw,260px);height:auto; /* наклон уменьшен на 20%: было 20°, стало 16° */ transform:translateY(-50%) rotate(16deg);transform-origin:center; opacity:0;pointer-events:none;transition:opacity .2s ease; filter:drop-shadow(0 16px 28px rgba(16,33,59,.38))} .why-item:hover .why-img{opacity:1} @media (prefers-reduced-motion: reduce){ .why-img{transition:none} } } @media (max-width:700px){ .why-item{grid-template-columns:auto minmax(0,1fr);column-gap:14px} } /* ---------- frequently asked questions --------------------------------- A pale section with its own background, edge to edge: the big question on the left with the promise of help under it, and the questions themselves on the right — numbered, ruled off, each one opening in place. */ .faq{--faq-bg:#f7f9fd;--faq-rail:clamp(44px,7%,88px);--faq-gap:clamp(10px,1.4vw,20px); padding:var(--sec-top) 0 var(--section);background:var(--faq-bg)} /* Две колонки: слева заголовок, снимок и блок «Остались вопросы?», справа список вопросов. На компьютере колонки РАВНЫЕ — секция делится пополам. */ /* Колонки те же, что у блока с формой: слева 0,72 доли, справа 1 доля. Благодаря этому правый столбец «Частых вопросов» может встать ровно на ту же вертикаль, что заголовок «Оплати рублями недвижимость…» в синей подложке: она начинается через поле карточки формы (24–40 точек). */ .faq-grid{display:grid;column-gap:40px; grid-template-columns:minmax(0,calc((100% - 40px) * var(--split) + var(--card-pad))) minmax(0,1fr)} /* Левая колонка — один столбик сверху вниз. Он ничего не догоняет и не привязан к низу: когда справа раскрывается вопрос, список становится выше, а заголовок, снимок и блок помощи остаются на своих местах. Положение снято со свёрнутого состояния — того, где все вопросы закрыты. */ .faq-copy{display:flex;flex-direction:column} /* Список — колонка из вопросов. Никакого растягивания: каждый пункт занимает свою высоту, и разделитель под последним вопросом стоит сразу под его ответом. Раньше последний пункт тянулся до низа колонки, чтобы линия совпала с низом кнопки. Когда все вопросы закрыты, колонка заметно выше списка — и линия уезжала вниз, оставляя под последним вопросом пустоту. */ /* Список сдвинут влево ровно на поле карточки формы: его левый край совпадает с левым краем заголовка формы, а правый остаётся на границе контента. Отступ внешний, а не внутренний, — иначе линии-разделители начинались бы левее текста. */ .faq-list{display:flex;flex-direction:column} /* Просвет между снимком и «Остались вопросы?». Раньше он был 10–16 точек: низ снимка с его мягкой тенью упирался в заголовок, и снимок выглядел обрезанным снизу. Теперь воздух 28–44 точки — снимок дышит, а сам низ листа виден целиком. Опускается весь блок: заголовок, строка про менеджера и кнопка. */ .faq-help{padding-top:clamp(28px,3vw,44px)} /* Заголовок стоит в две строки: «Частые» сверху, «вопросы» снизу. Разрыв поставлен прямо в разметке (
), поэтому строка рвётся всегда в одном и том же месте, а не там, где кончилась ширина колонки. Кегль, шаг строк и разряд сюда не пишем: их задаёт общая группа заголовков ниже в файле, и любые значения здесь она всё равно перекрывала бы. Своё у заголовка только поле снизу и цвет. */ .faq-title{margin:0 0 var(--hero-line-gap);color:var(--ink)} /* Снимок документов под заголовком. Слева: в файле вокруг листа остались прозрачные поля с мягкой тенью — сам лист начинается с 103-го пикселя из 1400. Приложить файл к колонке её краем нельзя: лист встанет правее линии на ширину тени. Поэтому файл делаем шире колонки и сдвигаем влево ровно на своё теневое поле: на линии левого края колонки оказывается край листа, а тень уходит в поле. Ширина листа — 60% колонки; все числа — доли от размеров файла, поэтому пропорция держится на любой ширине экрана. По вертикали: отступ сверху постоянный, а не «резиновый». Если бы он тянул воздух, снимок вместе с блоком уезжал бы вниз при каждом раскрытом вопросе. Расстояние до заголовка задано его margin-bottom, до блока помощи — отступом самого блока; сумма повторяет свёрнутое состояние. */ .faq-photo{--photo-share:60%;--shot-w:1400;--sheet-l:103;--sheet-w:1194; width:calc(var(--photo-share) * var(--shot-w) / var(--sheet-w)); margin:0 0 0 calc(-1 * var(--photo-share) * var(--sheet-l) / var(--sheet-w))} /* Низ снимка: в самом файле лист кончается на 96,85% высоты, а тень под ним обрывается прямо на границе файла — на экране это читалось жёсткой линией «тень резко ушла». Файл не перерисовать, поэтому гасим последние 3,15% высоты маской: тень сходит на ноль плавно, до самого края листа маска не дотягивается и лист остаётся целиком. */ .faq-photo img{width:100%;height:auto; -webkit-mask-image:linear-gradient(180deg,#000 96.85%,transparent 100%); mask-image:linear-gradient(180deg,#000 96.85%,transparent 100%)} .faq-help-title{margin:0;font-size:clamp(18px,1.5vw,24px);font-weight:600;line-height:1.25;color:var(--ink)} .faq-help-text{margin:8px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink-3);max-width:38ch} .faq-help-btn{margin-top:0} /* Кнопка «Задать вопрос», а под ней — мессенджеры: в столбик, по левому краю */ .faq-help-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px; margin-top:clamp(18px,2vw,26px)} /* планшет: кнопка стоит справа от слов и центрируется по их середине */ @media (min-width:701px) and (max-width:1024px){ .faq-help{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px)} .faq-help-copy{flex:1 1 auto} .faq-help-cta{margin-top:0;flex:none} } .faq-item{border-top:1px solid var(--line-strong);transition:border-color .18s ease-out} /* Последний вопрос — обычный пункт, без растягивания: его линия идёт сразу под ответом. Раньше он добирал остаток высоты колонки, чтобы низ линии совпадал с низом кнопки, но при полностью свёрнутом списке это уводило разделитель вниз и оставляло под вопросом пустое поле. */ .faq-item:last-child{border-bottom:1px solid var(--line-strong)} /* номер, вопрос и плюсик: номер и вопрос выравниваются по базовой линии, плюсик остаётся у верхнего края своей строки */ .faq-q{display:grid;grid-template-columns:var(--faq-rail) minmax(0,1fr) auto;column-gap:var(--faq-gap); align-items:baseline;padding:clamp(18px,2vw,30px) 0;cursor:pointer;list-style:none} .faq-sign{align-self:start} .faq-q::-webkit-details-marker{display:none} .faq-q:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px} /* то же начертание, что у номеров в первых двух блоках, но без синего: здесь номер — тихая метка, цвет остаётся серым */ /* номер вопроса крупнее в 1.3 раза (просьба «на тридцать процентов»); текст вопроса при этом остаётся прежним, чтобы длинные вопросы по-прежнему помещались в одну строку */ /* Номера вопросов — того же кегля и насыщенности, что номера карточек выше */ .faq-num{font-weight:300;font-size:calc(var(--fs-caption) * 2); line-height:1.2;letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums} /* без жёстких переносов: строки делятся сами, а balance выравнивает их длину — на любой ширине окна это выглядит аккуратно */ .faq-question{font-size:clamp(17px,1.45vw,24px);font-weight:500;line-height:1.3;color:var(--ink); text-wrap:balance;transition:color .18s ease-out} .faq-num{transition:color .18s ease-out} /* Наведение на строку вопроса: синим становится вся строка, а не только текст. Вопрос, номер слева и плюсик-минус — прямой окраской; плюсик рисуется линиями цвета currentColor, поэтому ему достаточно задать цвет. Разделители сверху и снизу — это рамки самого пункта, а нижняя линия строки на деле принадлежит СЛЕДУЮЩЕМУ пункту. Отсюда три правила ниже. Через :has — чтобы подсветка шла от наведения именно на строку вопроса, а не на раскрытый ответ под ней. Там, где :has не поддерживается, подсветятся только текст, номер и плюсик, а рамки останутся серыми: страница не ломается. */ .faq-q:hover .faq-question, .faq-q:hover .faq-sign{color:var(--brand)} .faq-q:hover .faq-num{color:var(--brand)} .faq-item:has(.faq-q:hover){border-top-color:var(--brand)} .faq-item:has(.faq-q:hover) + .faq-item{border-top-color:var(--brand)} .faq-item:last-child:has(.faq-q:hover){border-bottom-color:var(--brand)} .faq-sign{position:relative;width:16px;height:16px;flex:none;margin-top:clamp(4px,.6vw,8px);color:var(--ink-3)} .faq-sign::before,.faq-sign::after{content:"";position:absolute;background:currentColor;border-radius:2px} .faq-sign::before{left:0;right:0;top:7px;height:2px} .faq-sign::after{top:0;bottom:0;left:7px;width:2px;transition:transform .18s ease-out} .faq-item[open] .faq-sign::after{transform:scaleY(0)} .faq-a{margin:0 0 clamp(20px,2.2vw,32px); padding-left:calc(var(--faq-rail) + var(--faq-gap)); font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--ink-3);max-width:70ch} @media (max-width:1024px){ /* одна колонка: заголовок, снимок, вопросы, блок помощи. Порядок прежний, хотя блок помощи живёт внутри левой колонки — поэтому она растворяется (display:contents), а порядок задаётся номерами. */ .faq-grid{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)} .faq-copy{display:contents} .faq-title{order:1;margin-bottom:0} .faq-photo{order:2} /* одна колонка: сдвиг влево, равный полю формы, здесь не нужен */ .faq-list{order:3;margin-left:0} .faq-help{order:4;padding-top:0} } @media (max-width:700px){ .faq-a{padding-left:0} } /* ---------- lead form --------------------------------------------------- The blue field of the first screen comes back, full width, after the pale questions: white words on the left, the pale form card on the right, beginning exactly on the second column of the site grid. */ /* Секция с формой белая. Синяя подложка формы теперь лежит ПОД всей сеткой, от левого до правого края контента — то есть на все 12 колонок. Сверху секции воздуху больше обычного: из-за подложки голова менеджера выходит вверх на 20% её высоты, и этот выступ должен помещаться целиком. */ /* Верхний воздух считается по верхней границе синей подложки, а не по верхнему краю секции. Снимок выходит над подложкой на 50 точек, и раньше эти 50 точек съедались из воздуха: до подложки оставалось 120, а до снимка — только 70, поэтому секция казалась прижатой к «Частым вопросам». Теперь верхнее поле равно ровно этому выступу: снимок начинается на самой границе секции, подложка стоит на 50 точках ниже, а от последнего вопроса до видимого верха секции остаётся стандартный шаг. */ /* Одна пропорция колонок на две секции: форма и «Частые вопросы». --split — доля левой колонки, --card-pad — поле внутри синей подложки. Правая колонка формы начинается на --split, а список вопросов — на те же --split плюс --card-pad, поэтому его левый край стоит ровно на линии заголовка формы. */ /* Доля левой колонки чуть больше прежней (0,34 → 0,372): правая часть — и форма, и список вопросов — сдвинулась вправо примерно на 34 точки, при этом обе левые границы по-прежнему считаются одной формулой и стоят на одной линии. */ .leadsec,.faq{--split:.372;--card-pad:clamp(22px,2.5vw,34px)} .leadsec{--lead-photo-w:clamp(200px,26vw,380px);--bubble-drop:45px; position:relative;overflow:hidden; /* Секция белая, а синяя полоса живёт внутри неё и повторяет поле первого экрана: тот же градиент, те же два блика, зерно и точки. Полоса начинается ниже головы Александры Дроздович и кончается ровно по низ её снимка — поэтому и голова, и бабл с цитатой выходят за её границы, как и было задумано. Верхнее поле секции оставляет место для головы над полосой, нижнее — для свисающего бабла и для обычного шага до следующей секции. */ padding:80px 0 var(--section); color:var(--ink);background:#fff} .leadsec>.wrap{position:relative;z-index:2} /* Верхнее поле сетки — 100 точек внутри полосы. Вместе с полем секции это и есть воздух до заголовка формы, а снимок благодаря нему поднимается головой выше верхней кромки полосы на 50 точек. */ .lead-grid{position:relative;display:grid;padding-top:100px; grid-template-columns:minmax(0,calc((100% - 40px) * var(--split))) minmax(0,1fr); column-gap:40px;align-items:stretch} /* Синяя полоса: уходит за оба края окна, по высоте равна сетке — то есть начинается ниже головы и кончается по низу снимка. Секция обрезает лишнее по горизонтали (overflow:hidden), поэтому полосы нет за экраном. */ .lead-grid::before{content:"";position:absolute;top:0;bottom:0;left:50%; margin-left:-50vw;width:100vw;z-index:0; background-color:var(--field-1); background-image: radial-gradient(1150px 660px at 86% -14%, var(--field-glow), transparent 62%), radial-gradient(820px 560px at -6% 106%, var(--field-deep), transparent 64%), linear-gradient(158deg,var(--field-1) 0%,var(--field-2) 46%,var(--field-3) 100%)} /* зерно бумаги поверх синего — overlay оставляет цвет на месте */ .lead-tex{position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw; z-index:0;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)} /* сетка точек, как в первом экране: к левому краю гаснет */ .lead-grid::after{content:"";position:absolute;top:0;bottom:0;left:50%; margin-left:-50vw;width:100vw;z-index:0;pointer-events:none;opacity:.16; background-image:radial-gradient(var(--field-dot) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000); mask-image:linear-gradient(90deg,transparent,#000 45%,#000)} /* Заголовок стоит в правой колонке, внутри подложки. Кегль подобран так, чтобы три заданные строки влезали в ширину колонки без лишних переносов. */ /* Кегль 29 — это максимум, при котором вторая строка «в Таиланде с 0,1% комиссии в договоре» ещё влезает в колонку целиком. */ /* Кегль — из общей группы заголовков сайта: ровно как у «Частых вопросов» и «Этапов работ». Своего размера здесь больше нет, поэтому заголовок формы растёт и уменьшается вместе со всеми заголовками страницы. */ /* Надзаголовок «Покупка · Рассрочка · Аренда» — тем же приёмом, что в первом экране: мелкие прописные с разрядом, приглушённые, и ровно 10 точек до заголовка. */ .leadsec .lead-cats{font-size:12.6px;line-height:22.4px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--onblue-muted); margin:0 0 10px} .leadsec .lead-title{margin:0 0 var(--hero-line-gap); line-height:1.16;letter-spacing:-.02em;color:#fff} /* Знак процента в заголовке формы подогнан по верхней границе буквы «К» следующего слова. Расчёт по Сан-Франциско: у «%» верх 0,7241 кегля и низ −0,0103, полный рост 0,7344; у «К» рост 0,7046. Отношение 0,7046 / 0,7344 = 0,959 — при таком кегле верх «%» встаёт ровно на верх «К». Сдвиг на 0,0103 своего кегля возвращает низ знака на строку. */ /* Знак процента ещё на ступень меньше: 0,9 → 0,85 кегля. Его высота теперь около 0,62 кегля против 0,704 у буквы «К», то есть верх знака заведомо ниже верха соседних букв и он не спорит с ними. Низ по-прежнему стоит на строке: сдвиг равен 0,0103 своего кегля. */ .leadsec .lead-title .lead-pct{font-size:.85em;letter-spacing:0; position:relative;top:-.0088em} /* Три строки заголовка — отдельные блоки: по третьей считается кегль, чтобы она кончалась ровно на правой границе колонки (у поля e-mail). */ .leadsec .lead-title .lt-line{display:block;white-space:nowrap} /* «0,1» — тот же счётчик-барабан, что у «64 отзыва»: две колонки цифр. Стоит на строке так же, как обычный текст: верх выровнен по строке, поэтому цифры не подпрыгивают относительно соседних букв. */ .leadsec .lead-title .lead-count{vertical-align:baseline;margin-right:.02em} /* Запятая внутри счётчика: колонки цифр шире самих цифр, поэтому вокруг запятой скапливался лишний воздух — до «1» получалось около пяти точек. Подтягиваем запятую к соседям с обеих сторон. */ .leadsec .lead-title .lead-count > span:not(.rv-col){margin:0 -.1em} /* Флаг Таиланда вместо слова «Таиланде». Это настоящий флаг — прямоугольник 3 к 2 с пятью полосами (красная, белая, синяя вдвое шире, белая, красная), а не кружок из набора флагов-медальонов: у медальона полосы срезаны по кругу, и красных полос сверху и снизу не было видно. Высота равна высоте строчной «в» слева (0,537 кегля — замер по шрифту), низ стоит на строке, поэтому верх и низ флага совпадают с буквой. По бокам по 0,12 кегля — чтобы флаг не лип к соседним словам. */ /* Флаг стал круглым — как в первом экране. Кружок ровно в высоту строчной «в» (0,537 кегля, тот же замер по шрифту), низ на базовой линии. Сам флаг в квадратной рамке не сжимается, а обрезается по бокам, поэтому полосы остаются ровными и горизонтальными. */ .leadsec .lead-title .lead-flag{display:inline-block; width:.537em;height:.537em;vertical-align:baseline; margin:0 .14em;border-radius:50%;object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.35)} /* ---- снимок и бабл поверх подложки ------------------------------------- Оба вынуты из потока, поэтому высоту сетки задаёт только форма. · Снимок растянут от «на 20% выше верхней границы подложки» до её низа. Процент в top считается от высоты колонки, то есть от высоты подложки. · Бабл прижат к низу и опущен вниз на 20% своей высоты: нижняя часть свисает с подложки на белое поле секции. Так как бабл лежит выше по слою, он накрывает нижнюю часть снимка — получается, будто кадр выходит из-под верхней границы бабла. Кадрирование прежнее: object-fit:cover и привязка к верху кадра. */ .lead-copy{position:relative;z-index:1;min-height:0} /* Снимок отбрасывает мягкую тень на синюю подложку — drop-shadow повторяет силуэт, а не прямоугольник кадра. Нижний левый угол снимка скруглён ровно так же, как угол подложки: иначе кадр закрывал собой скругление и угол выглядел прямым. */ /* Снимок по-прежнему начинается на 30 точек ниже верхнего края секции, но это уже край самого синего поля, а не карточки: отступ считается от шага секции, поэтому снимок не вылезает за границу поля на узких экранах, где шаг меньше 150 точек. */ /* снимок сдвинут вправо на 100 точек: правый край фигуры выходит за колонку */ .lead-photo{position:absolute;left:0;right:-100px;top:-150px;bottom:0;margin:0; filter:drop-shadow(0 26px 38px rgba(3,10,50,.45))} /* Снимок больше не обрезается по бокам: он вписан по высоте, а ширину берёт свою, из пропорций кадра, и растёт влево — за левую линию колонки. Раньше стоял cover по ширине колонки, и от кадра срезались бока, в том числе слева. Правый край снимка остался там же, где был. */ .lead-photo img{display:block;position:absolute;right:0;bottom:0; height:auto;width:auto;max-height:100%;max-width:none; object-fit:contain;object-position:right bottom} /* Бабл — то же стекло, что у плашек первого экрана: полупрозрачная синяя заливка, сильное размытие того, что под ней (сквозь него видно снимок), светлая обводка. Сдвинут вправо на 100 точек от левого края подложки. */ /* бабл прижат к левой линии контента (left:0 — это край колонки, он же первая линия появления контента) и заходит на синюю подложку справа. Нижнее поле увеличено на 5 точек: весь текст внутри поднялся на пять точек относительно нижней границы бабла. */ /* Бабл с цитатой появляется снизу вверх, когда центр окна совпадает с центром секции с формой. Движение сделано свойством translate, а не transform: transform уже занят постоянным свисанием бабла на 45 точек, и сдвиг на появление не должен его перебивать. Так работает и на узком экране, где у бабла свой transform:none. */ .js .leadsec .lead-bubble{translate:0 38px;opacity:0; transition:translate .62s cubic-bezier(.22,1,.36,1),opacity .5s ease-out} .js .leadsec.is-bubble-in .lead-bubble{translate:0 0;opacity:1} @media (prefers-reduced-motion: reduce){ .js .leadsec .lead-bubble{translate:0 0;opacity:1;transition:none} } .lead-bubble{position:absolute;left:0;right:-40px;bottom:0;z-index:2;margin:0; transform:translateY(var(--bubble-drop)); padding:clamp(14px,1.5vw,20px) clamp(14px,1.6vw,22px) calc(clamp(11px,1.2vw,16px) + 5px); border:1px solid rgba(255,255,255,.16);border-radius:20px 20px 20px 6px; /* Стекло стало спокойнее: меньше белой дымки, меньше насыщенности и меньше размытия — читается как тёмное стекло, а не как синий блок. Справа бабл заходит на синюю подложку на 40 точек, и эта часть должна быть того же цвета, что подложка. Поэтому заливка — не сплошная, а градиент того же синего (--field-1), который к правому краю сходит почти в ноль: над подложкой от бабла остаётся только обводка и стекло, без собственного цвета. */ /* Два слоя: слева направо тот же синий, что к правому краю сходит в ноль, и снизу вверх тёмное затемнение — подпись Дроздович белая, и на светлом стекле её не было видно. Низ (примерно нижняя треть) уходит в тёмно-синий, поэтому росчерк читается так же, как текст цитаты. */ background: linear-gradient(180deg, rgba(6,18,44,0) 56%, rgba(6,18,44,.42) 78%, rgba(6,18,44,.72) 100%), linear-gradient(90deg, rgba(19,52,108,.60) 0, rgba(23,62,130,.50) calc(100% - 64px), rgba(23,62,130,.16) calc(100% - 40px), rgba(23,62,130,.06) 100%); color:#fff; -webkit-backdrop-filter:blur(18px) saturate(104%); backdrop-filter:blur(18px) saturate(104%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px rgba(3,10,50,.22)} /* первая строка бабла — имя, кеглем и весом как «Остались вопросы?» */ /* Имя идёт вторым, после надзаголовка: от него же теперь и отступ до самой цитаты (раньше этот отступ давала должность). */ .lead-name{display:block;margin:0 0 clamp(8px,1vw,12px);white-space:nowrap; font-size:clamp(18px,1.5vw,24px);font-weight:600;line-height:1.25; letter-spacing:-.02em;color:#fff} /* Должность стала надзаголовком над именем: мелкая, прописными, с широким разрядом и приглушённая — так она читается как ярлык над именем, а не как вторая строка под ним. */ .lead-role{display:block;margin:0 0 .35em; font-size:clamp(10.5px,.82vw,12px);font-weight:600;line-height:1.25; letter-spacing:.09em;text-transform:uppercase; color:var(--onblue-muted)} .lead-quote{margin:0;font-size:clamp(12px,1.02vw,14.5px);line-height:1.5; color:var(--onblue-text);letter-spacing:-.005em} /* подпись — светло-синяя. Она поднята на 20 точек выше прежнего места (отрицательное поле), поэтому бабл с цитатой стал ниже на те же 20. */ /* подпись выросла на 20%: было 74–104 на 24–34, стало 88,8–124,8 на 28,8–40,8 */ .lead-sign{display:block;width:clamp(88.8px,8.64vw,124.8px);height:clamp(28.8px,2.88vw,40.8px); margin:calc(clamp(8px,1vw,12px) - 26px) 0 0 auto; /* подпись: последняя правка — влево 10 и вверх 10 от прежнего места */ transform:translate(15px,0px) rotate(-4deg);transform-origin:right bottom; background:#fff; -webkit-mask-image:url(../lead-signature.webp); -webkit-mask-repeat:no-repeat;-webkit-mask-position:right center;-webkit-mask-size:contain; mask-image:url(../lead-signature.webp); mask-repeat:no-repeat;mask-position:right center;mask-size:contain} /* одна колонка: подложка та же, но снимок и бабл возвращаются в поток — на узком экране выступов за края быть не должно */ @media (max-width:1024px){ .lead-grid{grid-template-columns:1fr;row-gap:clamp(28px,4vw,40px)} .lead-copy{display:flex;flex-direction:column} .lead-photo{position:static;top:auto;bottom:auto;width:clamp(150px,32vw,260px);height:auto} .lead-photo img{position:static;width:100%;height:auto;max-width:none;max-height:none;object-fit:fill} .lead-bubble{position:static;transform:none;width:min(100%,560px)} /* в одну колонку поле карточки возвращается со всех сторон */ .lead-side{padding:var(--card-pad)} /* бабл больше не свисает — нижнее поле обычное */ .leadsec{padding-bottom:var(--section)} } /* Правая колонка — прозрачная: синюю подложку рисует сама сетка. Здесь только воздух внутри неё. */ /* Слева поле карточки остаётся (по нему правая колонка встаёт на одну линию со списком вопросов), справа его нет: форма доходит до той же правой границы, что и список в «Частых вопросах». */ /* Правая колонка поднята на 50 точек: сверху у полотна 100 точек воздуха, снизу 34, из-за чего содержимое стояло ниже середины. Сдвиг выравнивает его по центральной линии синего полотна, высота полотна не меняется. */ .lead-side{position:relative;top:-50px;z-index:1;padding:var(--card-pad) 0 var(--card-pad) var(--card-pad); color:#fff;background:none;box-shadow:none;border-radius:0} /* Мессенджеры в форме — как на первом экране: светлая обводка, светлые значки и полупрозрачная белая заливка при наведении. */ .lead-side .mess-row{border-color:rgba(255,255,255,.45)} .lead-side .mess-row .mess-btn+.mess-btn{border-left-color:rgba(255,255,255,.32)} .lead-side .mess-row .mess-btn img{filter:none;opacity:.95} .lead-side .mess-row .mess-word{color:#fff;opacity:.95} .lead-side .mess-row .mess-btn:hover{background:var(--onblue-hover);box-shadow:none; border-left-color:rgba(255,255,255,.45)} .lead-side .mess-row .mess-btn:hover img, .lead-side .mess-row .mess-btn:hover .mess-word{opacity:1} .lead-side .mess-row:has(.mess-btn:hover){border-color:#fff} .lead-form{display:grid;gap:clamp(14px,1.5vw,20px)} /* Первый ряд — три поля: имя, телефон, почта. Второй — сумма и комментарий, но сетка у него та же, что у первого: сумма встаёт ровно под именем и имеет ту же ширину, а комментарий начинается с левого края телефона и забирает две оставшиеся колонки. Поэтому все вертикальные линии полей на форме совпадают. */ .lead-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)} .lead-row--two{grid-template-columns:repeat(2,minmax(0,1fr))} .leadsec .field{margin-bottom:0;position:relative} /* Поля формы — как на doverka.com: высота 58 точек (на телефоне 64), а подпись живёт ВНУТРИ поля. Пока поле пустое, подпись стоит по центру; как только в нём начали печатать или оно получило фокус — уменьшается и уезжает в левый верх, освобождая место тексту. Подсказка-пример (тайский телефон, сумма) видна только когда поле в фокусе: иначе она спорила бы с подписью на одном месте. */ .leadsec .field>input, .leadsec .field .amount-box>input{width:100%;height:58px;min-height:0; padding:21px 16px 7px;border:1px solid #dfe6f3;border-radius:12px;background:#fff; font-family:inherit;font-size:16px;font-weight:600;line-height:1.25;color:var(--ink); transition:border-color .18s ease-out,box-shadow .18s ease-out} .leadsec .field--amount .amount-box>input{font-size:14px;letter-spacing:-.02em;padding-right:118px} .leadsec .field>input::placeholder, .leadsec .field .amount-box>input::placeholder{color:transparent} .leadsec .field>input:focus::placeholder, .leadsec .field .amount-box>input:focus::placeholder{color:#66758c} .leadsec .field>label{position:absolute;left:17px;right:17px;top:50%;transform:translateY(-50%); margin:0;font-size:14px;font-weight:500;letter-spacing:0;color:#3b4b64; pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:top .18s ease-out,transform .18s ease-out,font-size .18s ease-out,color .18s ease-out} .leadsec .field.is-filled>label, .leadsec .field>input:focus~label, .leadsec .field--amount:has(.amount-box>input:focus)>label{ top:9px;transform:none;font-size:11.5px;letter-spacing:.02em;color:#3b4b64} .leadsec .field--amount>label{right:104px} .leadsec .field>input:hover, .leadsec .field .amount-box>input:hover{border-color:#c9d4ea} .leadsec .field>input:focus, .leadsec .field .amount-box>input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(59,97,206,.12);outline:none} /* Сумма и комментарий снова такие же белые, как остальные поля: полупрозрачность убрана по просьбе владельца. */ .leadsec .field--amount .amount-box>input, .lead-row--two > .field:last-child>input{ background:#fff; border-color:#dfe6f3} /* звёздочка обязательного поля красная, пока поле пустое; заполнили — становится обычного цвета подписи */ .leadsec .field .req{color:#d92b2b;transition:color .18s ease-out,opacity .2s ease-out} /* у телефона и почты звёздочки синие: это не «обязательное поле» каждое само по себе, а половина пары «телефон или почта» — заполнить нужно хотя бы одно из двух. Как только одно заполнено верно, звёздочка на втором гаснет: скрипт ставит ей класс is-off. */ .leadsec .field .req--blue{color:#3b61ce} .leadsec .field .req.is-off{opacity:0} .leadsec .field.is-filled .req{color:inherit} .leadsec .field .err{display:block;margin-top:7px;font-size:13px;color:var(--danger)} /* ---------- валюта внутри поля суммы: как на doverka.com ------------- На doverka.com валюта — не отдельное поле, а кнопка справа внутри строки «Сумма операции»: тонкая черта-разделитель слева, круглый флаг, код валюты и стрелка вниз, которая при открытии переворачивается. По нажатию под полем раскрывается список: белая карточка со скруглением 14, в ней строки по 40 точек — флаг 26 точек в кружке и код. Выбранная строка подсвечена светло-синим #e8eefb и подписана синим. Размеры взяты оттуда же и приведены к нашей высоте поля (58 точек). Расстояния внутри кнопки: от разделителя до флага 18 точек, между флагом и кодом 7 — они читаются как одна пара. Справа после кода 10 точек и после стрелки 8: кнопка стала уже на 12 точек, поэтому разделитель, кружок страны и код валюты сдвинулись вправо внутри поля суммы. Флаг и стрелка опущены на 1,5 точки: по вертикали они должны стоять на одной оптической линии с кодом валюты и в центре поля. Кружок флага сделан как флаги стран в шапке: тот же размер и та же тонкая обводка-кольцо. */ .amount-box{position:relative} .cur-btn{position:absolute;top:1px;right:1px;height:calc(100% - 2px); display:flex;align-items:center;padding:0 8px 0 18px;border:0; border-radius:0 11px 11px 0;background:transparent;cursor:pointer;color:#10213b; font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.02em;text-align:left; transition:background-color .22s cubic-bezier(.4,0,.2,1)} .cur-btn:hover{background:#e8eefb} .cur-btn:focus-visible{outline:2px solid #3b61ce;outline-offset:-2px} .cur-btn__sep{position:absolute;left:0;top:50%;width:1px;height:30px; transform:translateY(-50%);background:rgba(16,33,59,.1)} .cur-btn__flag{position:relative;top:1.5px;width:14.6px;height:14.6px;flex:none; border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px rgba(110,118,140,.9)} .cur-btn__code{position:relative;top:1px;margin:0 10px 0 7px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cur-btn__chev{position:relative;top:1.5px;width:11px;height:7px;flex:none;color:#10213b; transition:transform .22s ease-out} .cur-btn[aria-expanded="true"] .cur-btn__chev{transform:rotate(180deg)} .cur-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:6;width:280px; animation:cur-in .16s ease-out both} @keyframes cur-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .cur-list{display:flex;flex-direction:column;gap:2px;max-height:238px;overflow-y:auto; padding:8px;background:#fff;border:1px solid #dfe6f3;border-radius:14px; box-shadow:0 18px 40px rgba(16,33,59,.14)} .cur-opt{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px; border:0;border-radius:8px;background:transparent;cursor:pointer;font-family:inherit; font-size:15px;font-weight:500;letter-spacing:-.01em;color:#10213b;text-align:left} .cur-opt img{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;background:#fff} .cur-opt:hover{background:#e8eefb} .cur-opt[aria-selected="true"]{background:#e8eefb;color:#3b61ce} .cur-opt:focus-visible{outline:2px solid #3b61ce;outline-offset:-2px} /* «уменьшить движение»: список раскрывается без подъезда, стрелка без поворота */ @media (prefers-reduced-motion: reduce){ .cur-pop{animation:none} .cur-btn__chev{transition:none} .lead-check__tile svg{transition:none} } /* Галки стоят в один ряд, но ширина колонок не 50 на 50: подпись согласия заметно длиннее подписи про рассылку, поэтому ей отдано больше места — так обе колонки укладываются в одинаковое число строк, и общая высота блока получается наименьшей. Согласие идёт вторым, поэтому широкая колонка теперь правая. */ /* Просвет между двумя согласиями увеличен: было 12 точек, стало до 48. Из-за этого вторая пара «квадратик + текст» (согласие на обработку данных) сдвигается вправо, к правой линии контента. Выключку по формату убрал: она растягивала пробелы внутри строк, и текст выглядел рваным. Строки снова набраны как обычно. */ /* Колонка первой галочки шире второй: в подписи про рассылку стоит жёсткий перенос после «рекламные», и вторая строка «и информационные сообщения» должна влезать целиком, иначе слово «сообщения» падало на третью строку. */ /* Рассылке отдано ровно столько ширины, сколько нужно её двум строкам, всё остальное — согласию: у него длинный текст, и лишняя ширина убирает целую строку. Просвет между ними уменьшен, чтобы отдать место согласию. */ /* Согласия идут по одному в строке и во всю ширину карточки: сначала «Хочу получать рекламные…», под ним согласие на обработку данных. Раньше они стояли в две колонки, и длинные тексты сжимались в половину ширины — ломались на четыре строки каждый. */ .lead-checks{display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(10px,1.1vw,16px);margin-top:2px} /* сообщение об ошибке согласия — под обеими колонками, во всю ширину */ .lead-checks>.err{grid-column:1 / -1} /* ---------- согласия: перенесено с doverka.com ---------------------- На doverka.com чекбокс — квадрат 26 на 26 точек (на телефоне 29) со скруглением 8 точек, тонкой рамкой #dfe6f3bf и светлой заливкой #dfe6f3. Отмеченный заливается синим #3b61ce, рамка того же цвета; галочка — значок 14 на 11 с белым штрихом толщиной 2 и круглыми концами. Переход — только цвет, 0,22 секунды, плавное ускорение и торможение. Текст рядом тёмно-синий #10213b; слова-ссылки синие #3b61ce и подчёркнуты с отступом 4 точки, при наведении подчёркивание убирается. Отличие одно: там нажимается только квадратик, у нас — вся строка, чтобы попадать пальцем было проще. */ .lead-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center; position:relative;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent} .lead-check>input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .lead-check__tile{position:relative;width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center; border-radius:8px;border:1px solid rgba(102,117,140,.35);background:#fff;color:#fff; transition:background-color .22s cubic-bezier(.4,0,.2,1),border-color .22s cubic-bezier(.4,0,.2,1)} .lead-check__tile svg{opacity:0;transition:opacity .14s ease-out} .lead-check:hover .lead-check__tile{border-color:#b4c0d8} .lead-check>input:checked ~ .lead-check__tile{background:#3b61ce;border-color:#3b61ce} .lead-check>input:checked ~ .lead-check__tile svg{opacity:1} .lead-check.is-invalid .lead-check__tile{border-color:#d92b2b} .lead-check>input:focus-visible ~ .lead-check__tile{outline:2px solid #3b61ce;outline-offset:2px} .lead-check__text{min-width:0;font-size:14px;line-height:1.42;letter-spacing:-.02em;color:#10213b} .lead-check__text a{color:#3b61ce;text-decoration:none;text-underline-offset:4px; text-decoration-thickness:1px;transition:color .22s cubic-bezier(.4,0,.2,1)} .lead-check__text a:hover{text-decoration:underline} /* Звёздочка обязательного согласия стоит над квадратиком, у его правого верхнего угла, — не в хвосте фразы. Красная, пока галочка не стоит; отметили — становится обычного цвета текста. */ .lead-check__tile .req{position:absolute;top:-10px;right:-5px;line-height:1; font-size:14px;font-weight:400} .lead-check .req{color:#d92b2b;transition:color .18s ease-out} .lead-check:has(input:checked) .req{color:inherit} /* кнопка и мессенджеры стоят с тем же просветом 12, что в вопросах и документах. Поля кнопки — 26 точек по бокам, как у «Получить расчёт» в отзывах: вместе с группой мессенджеров строка занимает 381 точку из 428 в карточке, поэтому она по-прежнему влезает в одну строку. */ .lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px} /* кнопка формы лежит на карточке без тени: синий ореол под ней убран */ /* Кнопка «Получить расчёт». Цвет в покое — тот же, что раньше получался от 50% прозрачности, но взят сплошной краской: синий #3b61ce, смешанный пополам с подложкой карточки #e8eefb, даёт #92a8e5. Текст при этом белый и полностью непрозрачный, а не бледный, как было. Отметили согласие — кнопка наливается полным синим. */ .lead-btn{min-height:56px;padding:0 26px;border-radius:14px;background:#92a8e5; transition:background-color .2s ease-out} .lead-btn:hover{background:#8099dd} .lead-form.is-ready .lead-btn{background:#3b61ce} .lead-form.is-ready .lead-btn:hover{background:var(--brand-2)} /* ---- текст прямо на синей карточке ------------------------------------ Всё, что лежит не в белом поле, а на самой карточке, переведено на светлое: согласие, ссылки, звёздочки обязательных галочек, сообщения об ошибке. Кнопка, пока согласие не отмечено, — полупрозрачная светлая; отметили — становится белой с фирменным синим текстом, чтобы читалась как готовое действие. «Спасибо» после отправки — белая панель. */ .lead-side .lead-check__text{color:var(--onblue-text)} .lead-side .lead-check__text a{color:#fff;text-decoration:underline;text-underline-offset:3px} .lead-side .lead-check__text a:hover{text-decoration:none} .lead-side .lead-check__tile{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)} .lead-side .lead-check:hover .lead-check__tile{border-color:#fff} .lead-side .lead-check>input:checked ~ .lead-check__tile{background:#fff;border-color:#fff;color:var(--brand)} .lead-side .lead-check .req{color:#ffc9c9} .lead-side .lead-check:has(input:checked) .req{color:inherit} .lead-side .field .err{color:#ffc9c9} /* «Укажите имя» и «Укажите телефон» стоят внутри поля — вместо подписи, тем же светло-красным, что и «Введите корректный e-mail» */ .leadsec .field.is-error > label, .leadsec .field.is-error > input:focus ~ label, .leadsec .field.is-error .amount-box > input:focus ~ label{color:#ffc9c9} /* ошибка согласия: та же краска, строки плотнее */ .lead-side #consent-err{color:#ffc9c9;line-height:1.22;margin-top:6px;display:block} /* текст кнопки наполовину прозрачный, как просил владелец */ /* Подсказка над кнопкой: что осталось сделать, чтобы она стала доступной. Показывается, пока кнопка неактивна, и исчезает, как только всё заполнено. Стоит на синей карточке, поэтому светло-голубая и не выглядит ошибкой. */ .lead-hint{margin:12px 0 0;font-size:14px;line-height:1.35; letter-spacing:-.01em;color:#ffc9c9} /* Пока форма не готова, волна идёт не по кнопке, а по тем полям, которые ещё надо заполнить: имя, телефон или почта, галочки согласий. Светлое кольцо вокруг поля читается на синей карточке и не спорит с ошибками — это приглашение, а не сообщение о проблеме. Когда всё заполнено, волна уходит с полей и включается у кнопки. */ @keyframes lead-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} 50%{box-shadow:0 0 0 4px rgba(255,255,255,.26)} } .leadsec .field.lead-pulse > input, .leadsec .field.lead-pulse .amount-box > input{ animation:lead-pulse 2.2s ease-in-out infinite} /* цвет рамки у галочки не трогаем: он нужен ошибке, поэтому подсветка — */ /* только кольцом вокруг, без смены цвета */ .leadsec .lead-check.lead-pulse .lead-check__tile{ animation:lead-pulse 2.2s ease-in-out infinite} @media (prefers-reduced-motion: reduce){ .leadsec .field.lead-pulse > input, .leadsec .field.lead-pulse .amount-box > input, .leadsec .lead-check.lead-pulse .lead-check__tile{ animation:none;box-shadow:0 0 0 3px rgba(255,255,255,.24)} } .lead-hint:empty{display:none} /* Кнопка нажимается всегда: пока форма не готова, она просто не белая, а нажатие показывает под кнопками, чего не хватает. */ .lead-side .lead-btn{background:rgba(255,255,255,.18);color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.38)} .lead-side .lead-btn:hover{background:rgba(255,255,255,.27)} .lead-side .lead-form.is-ready .lead-btn{background:#fff;color:var(--brand);border-color:#fff} .lead-side .lead-form.is-ready .lead-btn:hover{background:#eef3ff;border-color:#eef3ff} .lead-side .lead-success{background:#fff;border-radius:16px;padding:clamp(14px,1.6vw,20px)} .lead-success{padding:clamp(6px,1vw,12px)} .lead-success-title{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.2;color:var(--ink)} .lead-success-text{margin:10px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--ink-3)} /* спрятанная форма и спрятанное «спасибо» действительно не видны: класс с display:grid не должен перебивать скрытое состояние */ .leadsec [hidden]{display:none} @media (max-width:620px){ .lead-row{grid-template-columns:1fr} /* в одну колонку комментарий стоит под суммой во всю ширину */ .lead-row--two > .field:last-child{grid-column:auto} .lead-checks{grid-template-columns:1fr} /* телефон: поля выше (64 против 58, как на doverka.com), квадратик согласия крупнее (29 против 26), кнопка валюты уже, а список раскрывается во всю ширину поля */ .leadsec .field>input, .leadsec .field .amount-box>input{height:64px;padding-top:24px;padding-bottom:8px} .lead-check__tile{width:29px;height:29px} .cur-btn{padding:0 10px 0 14px;font-size:14px} .cur-btn__flag{width:13px;height:13px} .cur-btn__code{margin:0 14px 0 5px} .leadsec .field--amount .amount-box>input{padding-right:99px} .leadsec .field--amount>label{right:86px} .cur-pop{width:100%} } .field{margin-bottom:16px} .field label{display:block;font-weight:700;font-size:var(--fs-body);margin-bottom:7px} .field input{width:100%;min-height:54px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:var(--fs-body-l);color:var(--ink);background:#fff} .field input:focus{border-color:var(--brand);outline:none} .field input[aria-invalid="true"]{border-color:var(--danger-line)} .err{color:var(--danger);font-size:var(--fs-body-s);margin-top:6px} /* ---------- «За экосистемой — реальные люди и события» ---------------- Повторено по дизайну doverka.com: полоса во всю ширину высотой 55% окна (но не меньше 560 точек), студийный снимок фоном и вырезанные ведущие поверх него. По центру сверху — заголовок, подпись и ряд круглых кнопок. Размеры и пропорции взяты из их вёрстки: заголовок 90 точек при шаге 0,9 и разрядке −0,04 кегля, подпись 18 точек на 70% белого, кнопки 58 точек в диаметре. */ /* Полоса укорочена на 100 точек снизу: нижняя граница секции поднята на эту высоту, и всё, что оказалось ниже неё, отрезано — и от полосы, и от снимка. Снимок вписан по ширине, поэтому вместе с полосой подрезается и его нижняя часть. Высота тянется за окном, но не опускается ниже 460. */ /* Цвет полосы — не «наш серый», а тот, что стоит у самой верхней кромки снимка: пиксели кадра на линии, где начинается фотография, дают #121219 (тёмный сине-чёрный). Поэтому полоса сверху и кадр — один цвет, шва между ними не видно, и полоса читается как продолжение снимка. */ .podcast{position:relative;width:100%;height:max(calc(55 * 1vh - 100px),460px); overflow:hidden;background:#121219} /* Фон — один снимок: на нём уже есть ведущие. Второй слой с вырезанными людьми раньше лежал сверху со сдвигом на 10 точек и давал двойных людей. */ /* Снимок больше не растягивается на любую ширину: у него есть предел в 1600 точек. На широком экране он остаётся по центру и в своём масштабе, а по краям его продолжает размытая копия того же кадра — то же стекло, только сильно расфокусированное. Стык снимка с этой подложкой растворяется градиентной маской, поэтому шва не видно. */ .podcast-bg,.podcast-bg-m{position:absolute;width:100%;height:100%; object-fit:cover;object-position:center} .podcast-bg-blur{position:absolute;inset:-8%;z-index:0;width:116%;height:116%; object-fit:cover;object-position:center; filter:blur(46px) saturate(120%) brightness(.78)} .podcast-bg{left:50%;top:0;transform:translateX(-50%); width:min(100%,1600px);height:100%} /* Зеркало над снимком: тот же кадр, перевёрнутый вверх дном и приставленный нижней кромкой к верхней кромке снимка. Стена на фоне продолжается вверх, поэтому верхняя полоса секции — не размытое пятно, а сама фотография. Важно: коробка зеркала ровно та же, что у снимка (top:100px и bottom:-100px, то есть высота полосы плюс 100), иначе «cover» вписал бы кадр в другой прямоугольник и на стыке поехала бы каждая строка. И лежит оно выше размытой подложки (z-index 1), иначе размытие перекрывало бы его. */ .podcast-mirror{position:absolute;left:50%;top:100px;z-index:1; width:min(100%,1600px);height:100%;object-fit:cover;object-position:center; transform:translateX(-50%) translateY(-100%) scaleY(-1)} @media (min-width:1600px){ .podcast-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)} } /* Снимок сдвинут вниз на 100 точек: сверху освобождается полоса нашего тёмно-серого (цвет полосы), а сам кадр уходит ниже — поэтому заголовок оказывается к нему на 100 точек выше, чем был. Полоса сверху столько же прибавила к себе: раньше она упиралась в почти чёрный верх снимка (#0d0d0f), теперь сверху ровное серое поле. Дымка ниже растворяет шов между полем и снимком. */ @media (min-width:768px){ .podcast-bg{top:100px;bottom:-100px} } .podcast-bg-m{display:none} /* Раньше все три элемента разделял один и тот же просвет 40. Теперь между заголовком и описанием его половина — 20, поэтому описание и кнопки поднимаются выше. Просвет между описанием и кнопками оставлен прежним. */ /* Воздух над заголовком — тот же шаг секции, что у всех остальных блоков: было 80 точек, и просвет до верхнего края полосы выглядел меньше обычного. */ .podcast-in{position:absolute;top:var(--section);left:50%;transform:translateX(-50%); width:min(862px,100%);padding:0 16px;display:flex;flex-direction:column; align-items:center;gap:0;text-align:center;z-index:2} /* Дымка поверх снимка: тот же цвет, что у кромки кадра (#121219), плотный у верхней границы секции и растворяющийся в снимке книзу. Она нужна, чтобы переход из ровной полосы в фотографию был именно градиентом, а не стыком двух полей: на линии кромки цвета совпадают, а дальше дымка мягко сходит на нет и остаётся чистый кадр. */ /* на телефоне заголовок начинается через 50 точек от кромки — короткий белый сход только убирает стык и до текста не доходит */ @media (max-width:767px){ .podcast::before{display:none} .podcast-mirror{display:none} } /* шрифт страницы и её разрядка: заголовок должен читаться как остальные заголовки сайта, а не как чужой фирменный */ /* кегль и шаг строк — из общей группы заголовков сайта: те же 26–44 точки и шаг 1,14, что у «Оплатите ваш объект в Таиланде» и «15 лет Доверка делает жизнь» */ .podcast-title{margin:0;color:#fff; font-weight:700;line-height:1.14;letter-spacing:-.02em; font-size:clamp(26px,min(3.2vw,4.05vh),44px)} .podcast-sub{margin:20px 0 0;max-width:412px;color:rgba(255,255,255,.7);font-size:18px;line-height:1.5} .podcast-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px} /* кнопки без стеклянной подложки: в покое только контур и иконка. При наведении любая из них наливается фирменным синим. */ .podcast-cta,.podcast-ico{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:100px;text-decoration:none;flex:none; border:1px solid rgba(255,255,255,.15);color:#fff; background:transparent; transition:background .18s ease,border-color .18s ease,transform .18s ease} .podcast-cta:hover,.podcast-ico:hover{background:var(--brand);border-color:var(--brand); color:#fff;transform:translateY(-1px)} .podcast-cta svg,.podcast-ico svg{width:19px;height:19px;fill:currentColor} /* ---- подписи сооснователей --------------------------------------------- Два стеклянных бабла лежат прямо на снимке: слева — Алексей Барбакарь, справа — Павел Селезнев. Стекло то же, что у круглых кнопок под заголовком: светлая полупрозрачная заливка, размытие снимка под ней и тонкая светлая обводка. */ /* Подписи стоят по линиям контента, а не по краям экрана: внутри — та же обёртка .wrap, что у всех секций, поэтому левый бабл начинается на левой линии колонок, а правый заканчивается на правой. */ .podcast-people{position:absolute;left:0;right:0;bottom:clamp(14px,2.4vw,30px); z-index:2;pointer-events:none} .podcast-people-in{display:flex;align-items:flex-end;justify-content:space-between; gap:16px} .podcast-person{margin:0;pointer-events:auto; padding:clamp(8px,.9vw,12px) clamp(12px,1.3vw,18px); border:1px solid rgba(255,255,255,.16);border-radius:14px;color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.20) 100%); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28)} .pp-role{display:block;font-size:clamp(11px,.85vw,13px);line-height:1.3; color:rgba(255,255,255,.7)} .pp-name{display:block;margin-top:2px; font-size:clamp(14px,1.1vw,17px);font-weight:600;line-height:1.25;color:#fff} .podcast-cta:focus-visible,.podcast-ico:focus-visible{outline:3px solid #fff;outline-offset:3px} @media (max-width:767px){ /* телефон: своя вертикальная картинка и своя раскладка, как у них */ .podcast{height:auto;min-height:640px} .podcast-bg{display:none} .podcast-bg-m{display:block} .podcast-in{position:relative;top:0;left:0;transform:none;width:100%; padding:50px 16px 40px;gap:20px} .podcast-sub{font-size:16px;max-width:250px} .podcast-cta,.podcast-ico{width:38px;height:38px} .podcast-cta svg,.podcast-ico svg{width:17px;height:17px} } /* ---------- footer ---------- */ /* общие значения подвала: шаг строки, просвет между объектами, ширина логотипа (--foot-line остаётся цветом разделителей из 01-foundation) */ /* --foot-logo — ширина блока контактов и кнопок соцсетей (430). --foot-lockup-w — ширина связки «логотип Доверки + знаки банка и PCI DSS»: её правый край встаёт ровно по правому краю второй колонки иконок соцсетей. Откуда 318: блок соцсетей занимает 214 точек (46·4 + 10·3), а сами иконки стоят двумя колонками и занимают 102 (46 + 10 + 46). То есть справа внутри блока остаётся 112 пустых точек. Значит правый край иконок = 430 − 112 = 318. */ .site-footer{--foot-lead:19px;--foot-gap:12px;--foot-logo:318px;--foot-lockup-w:318px;background:var(--navy);color:var(--foot-text);padding-top:var(--section);padding-bottom:var(--section)} /* низ подвала отбит тем же воздухом, что и верх: от логотипа до края секции сверху и от последней строки текста до края снизу — одно и то же расстояние (--section). */ /* Знак Доверки в подвале вырос со 300 до 430 точек. Это не прихоть: группа знаков под ним тянется на ту же ширину, а два знака — Нацбанк и PCI DSS — вместе занимают 411 точек. При прежних 300 они не влезали в строку и вставали друг под друга; при 430 встают в одну линию, и правый край PCI DSS снова совпадает с правым краем логотипа. */ /* Логотип и знаки — одна связка: ширину задают сами знаки (Нацбанк плюс PCI DSS), а логотип тянется ровно на неё. Поэтому правый край логотипа совпадает с правым краем знака PCI DSS, а не выступает за него на 19 точек. Знак внутри связки считается нулевой ширины, чтобы не диктовать ей свой размер, и растягивается по её ширине. */ /* Связка стала уже: логотип и знаки ужимаются до правого края иконок соцсетей. Внутренние размеры знаков уменьшены на столько же, чтобы пара «Нацбанк + PCI DSS» по-прежнему стояла в одну строку. */ .foot-lockup{display:grid;width:min(var(--foot-lockup-w),100%);max-width:100%;justify-items:stretch} /* Знак вынут из потока и растянут по ссылке: так он не диктует связке свою ширину (у SVG без размеров она по умолчанию 300 точек), и ширину задают только знаки банка и PCI DSS. Высота ссылки идёт от её ширины по той же пропорции знака 227 к 23. */ .foot-lockup > .logo{display:block;position:relative;width:100%;aspect-ratio:227/23;color:#fff} .foot-lockup .logo-mark{position:absolute;inset:0;width:100%;height:100%} .site-footer .logo{display:block;width:min(var(--foot-logo),100%);color:#fff} .site-footer .logo-mark{width:100%;height:auto;aspect-ratio:227/23} /* колонки верхнего блока совпадают с колонками нижнего: правовая информация начинается по той же линии, что второй абзац обязательного текста */ /* Три колонки подвала: слева логотип со знаками, контактами и соцсетями, в середине правовая информация, справа два абзаца обязательного текста. Ширины: под логотип и контакты нужно около 430 точек (иначе почты и телефоны начинают переноситься), остальное делится поровну между правовой информацией и текстом. */ /* Три секции. Первая — ровно по содержимому, 318 точек: логотип, знаки, контакты и соцсети стоят на тех же местах, что и раньше, потому что пустые 112 точек внутри блока соцсетей больше не считаются. Остаток ширины делится между правовой информацией и текстом поровну: по 321 точке на каждую. */ .foot-grid{display:grid;grid-template-columns:minmax(0,318px) minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start} /* заголовки подвала — «Контакты», «Соцсети», «Правовая информация» — набраны тем же шрифтом, что и остальные заголовки страницы */ .foot-grid h3{color:#fff;font-size:var(--fs-body);margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase} /* «Соцсети» больше не отдельный подзаголовок внизу, а второй столбец в строке с «Контактами» — поэтому верхнего поля у него нет */ .foot-sub{margin-top:0} /* контакты и телефоны: почты и телефоны стоят в одной строке сетки, поэтому первый телефон попадает на линию первой почты, второй — на линию второй. Просвет между колонками почт и телефонов вдвое меньше прежнего: было 14–22 точки, стало 7–11. */ /* Два столбца: слева «Контакты» — под ними почты, под почтами телефоны; справа «Соцсети» — заголовок встаёт на одну линию с «Контактами», а под ним кнопки. Правый столбец начинается примерно с половины ширины блока: ширина блока равна ширине логотипа, левый столбец занимает всё, что осталось после кнопок соцсетей. */ .foot-contact{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head sub" "mails social" "phones social"; column-gap:clamp(10px,1.2vw,18px);row-gap:6px;align-items:start; width:min(var(--foot-logo),100%);margin-top:32px} .foot-contact > h3:first-child{grid-area:head} .foot-mails{grid-area:mails} /* Телефоны прижаты к низу своей строки: последний номер встаёт ровно на нижнюю границу второго ряда кнопок соцсетей. */ .foot-phones{grid-area:phones;align-self:end} .foot-sub{grid-area:sub} .foot-social{grid-area:social} .foot-grid p{font-size:15.5px;line-height:1.6} .foot-grid a{color:var(--foot-link)} /* один шаг строки и один просвет между объектами — и в контактах, и в правовой информации. В стопках почт и телефонов просвет вдвое меньше общего: строки внутри одной колонки стоят плотнее (было 12 точек, стало 6). Ссылки правового блока по-прежнему идут общим шагом. */ .foot-stack{display:grid;gap:calc(var(--foot-gap) / 2);font-size:15.5px;line-height:var(--foot-lead)} .foot-links{list-style:none;margin:0;padding:0;display:grid;gap:var(--foot-gap);max-width:400px} /* строки делятся поровну, а не «сколько влезло»: перенос встаёт по смыслу */ .foot-links li{line-height:var(--foot-lead);text-wrap:balance} .foot-links a{color:var(--foot-text);font-size:15.5px} .foot-links a:hover{color:#fff;text-decoration:underline} /* Знаки банка и PCI DSS стоят парой у левого края через 14 точек — раньше их растаскивало по краям блока. От логотипа Доверки до них 17 точек вместо 22: знаки подняты на пять точек вверх, как просил владелец. */ /* Знаки растянуты по всей ширине связки: правый край пары встаёт ровно по правому краю логотипа, а он — по правому краю иконок соцсетей. Остаток ширины уходит в просвет между знаками, а не в пустоту справа. */ .foot-badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;width:100%;max-width:100%;margin-top:14px} /* Плашка-кнопка как на doverka.com: высота 55, скругление 14, обводка белым в 10% и полупрозрачная тёмная подложка. */ /* Поля, просвет и сами знаки сжимаются вместе с шириной колонки: на широком экране всё как было (20 / 20 / 28 и 35), а уже 1000 точек знаки чуть уменьшаются, чтобы пара по-прежнему стояла в одну строку, — колонка там уже 411 точек, которые занимают оба знака в полный размер. */ /* Поля и просвет внутри плашек поджаты ещё на пару точек: вместе с рамками (по одной точке с каждой стороны) пара выходила ровно на 318,2 при доступных 318 — и DSS срывался на вторую строку из-за двух десятых точки. Теперь пара занимает около 308 точек, запас почти десять. */ .foot-badge{display:flex;align-items:center;gap:clamp(8px,1vw,12px);min-height:47px; padding:0 clamp(10px,1vw,12px); border:1px solid rgba(255,255,255,.10);border-radius:14px; background:rgba(43,44,52,.5);text-decoration:none; transition:border-color .18s ease-out} a.foot-badge:hover{border-color:rgba(255,255,255,.25);text-decoration:none} .foot-badge img{display:block;height:clamp(16px,1.75vw,22px);width:auto;opacity:.9} /* знак PCI DSS нарисован серым — приводим его к белому, как у банка */ /* У знака PCI DSS был свой, отдельный размер — 35 точек, выше знака банка. Из-за него пара перестала влезать в новую, более узкую связку, и DSS уезжал на вторую строку. Теперь оба знака ужимаются в одной пропорции: было 28 против 35, стало 22 против 27,5 — отношение сохранено. */ .foot-badge .foot-pci{height:clamp(20px,2.2vw,27.5px);filter:brightness(0) invert(1)} /* стрелка справа у знака банка: он ведёт в реестр Нацбанка */ .foot-badge-arrow{width:4px;height:8px;flex:none;color:#fff;opacity:.3; transition:opacity .18s ease-out;overflow:visible} a.foot-badge:hover .foot-badge-arrow{opacity:.7} /* Кнопки соцсетей стоят в два ряда по две: сверху Телеграм и WhatsApp, снизу Инстаграм и YouTube. Ширина блока оставлена прежней — как у ряда из четырёх кнопок (46 × 4 + 10 × 3 = 214), поэтому заголовок «Соцсети» и весь второй столбец контактов остались на своих местах; свободное место справа от пар ничем не занято. */ /* Ширина блока соцсетей — по содержимому: две колонки по 46 и просвет 10. Раньше здесь стояла ширина в четыре колонки (214) при содержимом в 102, и справа висели 112 пустых точек: они и были тем «местом слева» от правовой информации. Важно: колонка контактов от этого не сдвинулась. Раньше она получала 430 − 214 − 18 = 198 точек, теперь 318 − 102 − 18 = те же 198, и иконки стоят там же, где стояли. */ .foot-social{display:grid;grid-template-columns:repeat(2,46px);gap:10px; width:auto;justify-content:start;margin-top:0} .foot-social a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--foot-chip);text-decoration:none} .foot-social a:hover{background:var(--foot-chip-hover)} .foot-social img{width:22px;height:auto} /* Третий столбец: два абзаца обязательного текста друг под другом. Верхнего поля нет — колонка начинается ровно по верхней границе двух первых, как и они. Просветы между всеми тремя колонками одинаковые: их задаёт column-gap у сетки, 40 точек. */ .foot-note{display:grid;gap:10px;padding-top:0} .foot-note p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--foot-legal)} /* подвал в две колонки держится и на планшете: «Контакты» слева, «Правовая информация» справа, две юридические строки — тоже в две колонки. В одну колонку всё складывается только на телефоне. */ /* планшет: три колонки на узком окне сжимаются в нитку, поэтому текст уходит под обе колонки во всю ширину */ @media (max-width:1024px){ .foot-grid{grid-template-columns:minmax(0,318px) minmax(0,1fr)} .foot-note{grid-column:1 / -1;padding-top:26px} } @media (max-width:700px){ .foot-grid{grid-template-columns:1fr;row-gap:32px} /* на телефоне текст идёт сразу за правовой информацией, отступ сверху больше не нужен: колонки стоят друг под другом */ .foot-note{padding-top:0} } /* ---------- phones: one column, no lean, nothing to scroll sideways ---- */ @media (max-width:760px){ .print{transform:none} /* a polaroid stays a polaroid: the small angle is the point of the block */ .print--polaroid{transform:rotate(var(--pt))} /* на телефоне контакты и телефоны встают друг под друга, а не рядом */ .foot-contact{grid-template-columns:1fr;grid-template-areas:"head" "mails" "phones" "sub" "social";row-gap:16px} } /* ---------- one voice for every section headline ---------------------- The headline that opens the page — "0% комиссии в договоре" over "Оплати рублями недвижимость в Таиланде" — sets the measure for all of them: the same face, the same weight, the same size, the same tight fitting. The hero keeps its own rule in 02-header-hero.css; every headline below the first screen is cut to the same measure, so the page speaks in a single voice from top to bottom. */ .fc-title, .docs-subtitle, .why-title, .faq-title, .lead-title{ font-weight:700; font-size:clamp(26px,min(3.2vw,4.05vh),44px); line-height:1.14; letter-spacing:-.02em; } /* Заголовок «Неопределенность / решаем под ключ» — простые две строки одна под другой. Шрифт, кегль и жирность — из общей группы заголовков выше, как у «На любом этапе поможем с оплатой». Шаг строк плотный (1), по просьбе «строки должны стоять плотно». Воздух до текста под заголовком — половина общего --head-gap: вдвое короче, чем у остальных секций, по просьбе поднять контент ближе к заголовку. */ .docs-subtitle{margin:0 0 calc(var(--head-gap) * .5); color:var(--ink);line-height:1} /* «На любом этапе поможем с оплатой» — тот же шаг строк, что у эталона: у «64 отзыва…» он равен 1 */ .fc-title{line-height:1} /* строки заголовка — отдельные блоки, каждая не переносится */ .docs-sub-part{display:block;white-space:nowrap} /* ---------- отзывы ----------------------------------------------------- Слева лента карточек, справа большой отзыв — как на референсе. Лента едет сама по кругу: список стоит в разметке дважды, дорожка сдвигается ровно на высоту одного списка, поэтому шва на стыке не видно. По краям лента растворяется до полной прозрачности — сверху уходит в ноль, снизу из нуля появляется, и только потом её обрезает край карточки. Подложки под лентой нет: каждая карточка клиента — самостоятельная белая карточка со своей рамкой и лёгкой тенью, между ними видно фон секции. Выбранная залита синим. Под лентой видно ровно три карточки: снизу въезжают новые, сверху растворяются старые. */ /* скругление карточек — как у фото Павла Селезнева (.trust-photo: 22px) */ .reviews{--reviews-bg:#fff;--rv-card-radius:22px;--rv-item-gap:10px; /* Ширина левой колонки: кнопка «Получить расчёт» обычного размера плюс метка Карт и просвет между ними. Ниже 280 точек колонка не сжимается — иначе кнопки перестают помещаться и наезжают на правый блок. .31506 — это доля 0,46 от суммы 0,46 + 1, то есть прежняя пропорция «0,46 к 1». Считаем её от ширины без просвета, поэтому колонки и про- свет всегда складываются ровно в ширину секции, без остатка справа. 316 точек — это «Получить расчёт» обычного размера плюс кнопка Карт с полями по 26 и просвет между ними: ниже этого колонка не сжимается. */ --rv-gap:clamp(16px,2vw,26px); --rv-left:max(316px,calc((100% - var(--rv-gap)) * .31506)); /* одна высота на оба блока: слева она делится ровно на три карточки, справа задаёт высоту карточки с отзывом. Границы блоков совпадают. */ --rv-block-h:clamp(440px,48vh,470px); --rv-item-h:calc((var(--rv-block-h) - 2 * var(--rv-item-gap)) / 3); /* высота кнопки: по ней же считается подъём кнопки к нижней линии блока */ --rv-btn-h:56px; padding:var(--sec-top) 0 var(--section);background:var(--reviews-bg)} /* Заголовок стоит по левому краю контента — как «Документы под ключ» */ .reviews-head{margin:0;text-align:left} /* у трёх отзывов на картах нет фотографии — там кружок с инициалами */ .rv-ava--init,.ra-ava--init{display:flex;align-items:center;justify-content:center; background:#e8eefb;color:var(--brand);font-weight:700;letter-spacing:.02em} .rv-ava--init{font-size:14px} .ra-ava--init{font-size:16px} /* погасшая звезда у отзыва с оценкой ниже пяти */ .rv-star--off{opacity:.2} /* Ссылка на Яндекс Карты — маленькая квадратная кнопка с той же геометрией, что у кнопок страницы: та же высота, то же скругление 14, та же светлая заливка и та же обводка. Внутри две иконки: чёрная буква «Я» и значок внешней ссылки — такой же, какой был у кнопки раньше. Слов нет: рядом с «Получить расчёт» обычного размера на подпись места не остаётся, поэтому смысл ссылки живёт в title и в aria-label — его прочитают всплывающая подсказка и экранные читалки. */ /* Ширина не задана числом: её дают сами иконки и поля по 26 точек слева и справа — ровно такие же, как у «Получить расчёт». Поэтому кнопка читается как кнопка, а не как квадратик, и стоит по правой границе левой колонки, как «Получить расчёт» стоит по левой. */ .rv-maps-link{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none; width:auto;min-height:var(--rv-btn-h);padding:0 26px; border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink); text-decoration:none;transition:border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out} /* при наведении кнопка наливается фирменным синим, метка белеет — так же, как кнопки в блоке «За экосистемой» */ .rv-maps-link:hover{background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none} /* Знак Яндекса — буква «Я» одним чёрным цветом, без красного квадрата: так он стоит в одной семье с чёрной иконкой ссылки и с текстом страницы. Цвет берётся из ссылки, поэтому на синей заливке обе иконки белеют сами. Высота задана числом, ширина считается из пропорций знака: «Я» высокий и узкий, по ширине он вышел бы вдвое мельче по высоте. */ /* Знак «Я»: сначала был уменьшен на 30% (22 → 15,4), затем увеличен на 30% от этого размера — стало 20 точек. Кнопка при этом прежней высоты: она держит строку с «Получить расчёт». */ .rv-maps-logo{display:block;flex:none;height:20px;width:auto;color:currentColor} /* иконка ссылки — та же, что была у кнопки до замены логотипа на метку, но по высоте ровно как знак «Я»: 22 × 22 — верх и низ у обеих иконок стоят на одних линиях. Обводка от этого не жирнеет: при крупном знаке толщина штриха 1,05 в тех же единицах даёт на экране ту же линию, что 1,35 в прежнем мелком значке. */ /* стрелка идёт за знаком шаг в шаг, чтобы пара «Я + стрелка» оставалась одного роста и стояла на одних линиях */ /* Значок ссылки по высоте ровно как буква «Я» рядом — по чернилам, а не по рамкам рисунка. Считаем по внутренним полям обеих иконок: «Я»: рисунок занимает 10 из 10,1 единицы поля, при поле 20 точек видимая высота буквы — 19,8; ссылка: рисунок занимает 9,85 из 14 единиц поля (штрих 1,05 учтён), то есть 0,7036 поля. Чтобы видимая высота совпала с 19,8, поле значка должно быть 19,8 / 0,7036 = 28 точек. Поля у обеих иконок симметричны сверху и снизу, поэтому при выравнивании по центру строки верх и низ совпадают. */ .rv-maps-ico{display:block;flex:none;width:28px;height:28px} /* Под блоками, на их нижней линии, стоят две кнопки одной строкой: «Получить расчёт» — по левой границе левой колонки, ссылка на Яндекс Карты — по её правой границе. Сетка и просвет те же, что у самих блоков, поэтому границы совпадают без единого вычисленного числа. Строка поднята на свою высоту: её низ ложится ровно на нижнюю линию блоков, а на поток это не влияет — секция не меняет высоту. */ .reviews-cta{position:relative;z-index:3;display:grid; grid-template-columns:var(--rv-left) minmax(0,1fr); gap:var(--rv-gap);margin-top:calc(-1 * var(--rv-btn-h))} .reviews-cta-row{grid-column:1;display:flex;align-items:center;justify-content:space-between; gap:12px;min-width:0} /* «Получить расчёт» остаётся обычного размера: не сжимается и не тянется ни под соседа, ни под ширину колонки */ .reviews-cta-row .btn{flex:none} /* шрифт, кегль, жирность и шаг строк — как у «Документы под ключ» (.docs-subtitle): тот же шрифт, та же шкала, тот же плотный шаг */ .reviews-title{font-weight:700; font-size:clamp(26px,min(3.2vw,4.05vh),44px);line-height:1;letter-spacing:-.02em;color:var(--ink)} /* Счётчик отзывов — два барабана, как в компоненте «Spinning counter remix» (transitions.dev). Каждая цифра живёт в своей колонке с обрезкой по высоте строки и мягкой маской сверху и снизу: лента цифр прокручивается внутри и останавливается на нужной. Размеры в долях кегля заголовка, поэтому цифры растут и уменьшаются вместе с ним. Цвет и шрифт наследуются от заголовка — наш SF UI Display и чернильный, а не Inter из исходника. */ /* Ширина колонки — по самой широкой цифре нынешнего шрифта, SF UI Display: его цифры занимают от 0,48 («1») до 0,652 («8») кегля. Колонка 0,652 вмещает любую из десяти. Межбуквенный интервал обнуляем: от заголовка наследуется −0,02 кегля, и цифры слипались. Маску сверху и снизу сузили до 6%: при 12% она срезала верх и низ самих цифр, и они выглядели подрезанными. */ .rv-count{display:inline-flex;align-items:center;height:1em;line-height:1;vertical-align:top; letter-spacing:0;color:inherit} .rv-count .rv-col{position:relative;width:.652em;height:1em;overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 94%,transparent 100%)} /* Колонка равна самой широкой цифре, поэтому у узких цифр по бокам остаётся воздух. Подтягиваем колонки друг к другу. Важно: считать надо не по ширине знака, а по его чернилам. При колонке 0,652 у «6» внутри знака по 0,044 кегля пустого места с каждой стороны, у «4» — по 0,035. Подтяжка 0,055 оставляет между чернилами соседних цифр около 0,024 кегля — чуть больше точки при кегле 44, как и было задумано. */ .rv-count .rv-col + .rv-col{margin-left:-.055em} .rv-count .rv-strip{display:flex;flex-direction:column;will-change:transform,filter} /* Бесконечное вращение счётчика «64»: пока он в кадре, цифры едут по кругу без остановки — один оборот десяти цифр за 3 секунды. Лента прокручивается ровно на свой цикл, поэтому стык не виден. Останавливается и «садится» на нужную цифру, когда доскроллили до кнопки «Смотреть в Яндексе». */ @keyframes rv-loop{from{transform:translateY(0)}to{transform:translateY(-10em)}} .rv-col.is-spinning .rv-strip{animation:rv-loop 3s linear infinite} @media (prefers-reduced-motion: reduce){ .rv-col.is-spinning .rv-strip{animation:none} } .rv-count .rv-digit{height:1em;line-height:1;display:flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums} /* «уменьшить движение»: барабаны не крутятся и не размываются, но стоят на нужных цифрах — поэтому transform здесь не отключаем, его выставляет скрипт */ @media (prefers-reduced-motion: reduce){ .rv-count .rv-col{overflow:hidden} .rv-count .rv-strip{transition:none!important;filter:none!important} } /* Логотип Яндекса стоит внутри строки заголовка: высоту берёт от кегля заголовка, поэтому растёт и уменьшается вместе с ним, а не живёт своей жизнью. display:inline-block обязателен — общее правило страницы делает все картинки блочными, и без этого логотип уехал бы на свою строку. */ /* Логотип крупнее строчных букв, но стоит низом ровно по нижнему краю слов «на» и «картах». В самом логотипе под буквами остаётся запас на хвосты (у «д» они свисают ниже строки) — это 1/7 его высоты, поэтому значок опущен на ту же величину и низ приходится точно на строку текста. */ .reviews-logo{display:inline-block;height:.92em;width:auto;vertical-align:-.13em; margin:0} .reviews-grid{display:grid;grid-template-columns:var(--rv-left) minmax(0,1fr); gap:var(--rv-gap);margin-top:var(--head-gap);align-items:start} /* ---------- лента карточек ---------- Высота ленты задана, содержимое за ней прячется, а края гасятся маской: верхняя карточка проступает из ничего, нижняя в ничего уходит. Нижнее затухание длиннее на высоту кнопки «Смотреть в Яндексе»: кнопка находит на низ ленты, и под ней уже должно быть погашено. */ .rv-feed{position:relative;overflow:hidden;height:var(--rv-block-h); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 9%,#000 22%,#000 calc(78% - var(--rv-btn-h)),rgba(0,0,0,.35) calc(91% - var(--rv-btn-h)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 9%,#000 22%,#000 calc(78% - var(--rv-btn-h)),rgba(0,0,0,.35) calc(91% - var(--rv-btn-h)),transparent 100%)} /* Движение ленты больше не в стилях: им управляет скрипт. Так колесо мыши может листать карточки вручную, а после паузы лента сама подъезжает к выбранной карточке. Здесь остаётся только подготовка к сдвигу. */ .rv-track{display:flex;flex-direction:column;width:100%;will-change:transform} /* подсказка «крутите колесом», когда курсор над лентой */ .rv-feed:focus-visible{outline-offset:-4px} .rv-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .rv-cell{margin:0 0 var(--rv-item-gap)} .rv-card{position:relative;display:flex;flex-direction:column;gap:3px;width:100%;height:var(--rv-item-h);margin:0; padding:18px;border:1px solid #dfe6f3;border-radius:var(--rv-card-radius); background:#fff;box-shadow:0 2px 8px rgba(16,33,59,.05); color:var(--ink);font:inherit;text-align:left; /* карточки ничего не делают по нажатию: выбор идёт только по ленте */ cursor:default;pointer-events:none; transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out} /* Выбранная карточка остаётся белой: её выделяет синяя обводка, а не заливка. Обводка нарисована в два слоя — рамкой и кольцом ВНУТРИ карточки. Кольцо снаружи лента обрезала по бокам (у неё overflow:hidden), поэтому слева и справа край выглядел тоньше, чем сверху и снизу. Теперь все четыре стороны одинаковые. */ .rv-card[aria-selected="true"]{color:var(--ink);border-color:var(--brand); background-color:#fff; box-shadow:inset 0 0 0 1px var(--brand),0 6px 18px rgba(16,33,59,.10)} /* фотография автора: круг, снимок вписан по центру и не растянут */ .rv-ava{display:block;flex:none;width:44px;height:44px;margin-bottom:8px; border-radius:50%;object-fit:cover;object-position:50% 30%;background:#e8eefb} .rv-card[aria-selected="true"] .rv-ava{box-shadow:0 0 0 2px rgba(59,97,206,.5)} .rv-card[aria-selected="true"] .rv-name{color:var(--brand)} .rv-name{font-size:20px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rv-meta{font-size:15px;line-height:1.35;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rv-card[aria-selected="true"] .rv-meta{color:var(--ink-3)} /* ---------- большая карточка с отзывом ---------- */ .reviews-panels{display:flex;min-height:var(--rv-block-h); padding:clamp(26px,2.8vw,38px);background:#fff;border-radius:var(--rv-card-radius); box-shadow:0 10px 30px rgba(16,33,59,.08)} .review-panel{display:flex;flex:1 1 auto;flex-direction:column;width:100%} /* новый отзыв не появляется рывком: короткое проявление снизу вверх — так смена читается как «текст сменился», а не «страница дёрнулась» */ .review-panel.rv-enter{animation:rv-panel-in .3s ease-out both} @keyframes rv-panel-in{ from{opacity:0;transform:translate3d(0,8px,0)} to{opacity:1;transform:translate3d(0,0,0)} } .review-panel:focus-visible{outline-offset:6px} /* Знак цитаты набран тем же шрифтом, что и весь текст: у SF UI Display кавычки — настоящие «лапки», запятыми, поэтому отдельный набор собирать не нужно. */ /* Кавычка: светло-синяя заливка внутри и синий контур снаружи. Обводка заметнее прежней (1,6 точки, 72% плотности) — так крупный знак читается и на белой карточке, и рядом с синими звёздами. */ .review-mark{display:block;font-weight:700; font-size:clamp(108px,12.8vw,168px);line-height:1; /* Шаг строки 1 — это важнее, чем кажется: заливка по буквам рисуется только внутри рамки блока, и при плотном шаге низ кавычки оказывался за рамкой — буква обрезалась. Пустое место, которое появляется при шаге 1, убираем отрицательными полями. */ /* Верхний отступ не в долях кегля: иначе при увеличении знака он вырос вместе с ним и приклеил кавычку к верхней границе карточки. Держим его постоянным — просвет от края карточки до знака остаётся прежним. Нижний, наоборот, в долях кегля: он убирает пустоту под знаком, и при крупном знаке она тоже крупнее. */ margin:calc(-1 * clamp(10px,1.4vw,18px)) 0 -.22em;padding:.02em 0; background-image:none; color:#d7e4fa; -webkit-text-fill-color:#d7e4fa; -webkit-text-stroke:1.6px rgba(59,97,206,.72)} .review-text{font-size:clamp(20px,1.6vw,22px);line-height:1.4;max-width:50ch;color:var(--ink)} /* подвал карточки прижат к низу листа: и у короткого, и у длинного отзыва звёзды и подпись стоят на одном месте */ .review-foot{margin-top:auto;padding-top:clamp(14px,1.8vw,22px); display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end; column-gap:20px;row-gap:clamp(10px,1.2vw,14px)} /* звёзды-стекло: полупрозрачная синяя заливка с тонкой обводкой; сама заливка живёт в градиенте #glass-star внутри спрайта страницы */ .review-stars{display:flex;gap:3px;grid-column:1/-1;margin-bottom:4px; filter:drop-shadow(0 1px 1px rgba(10,26,120,.18))} .rv-star{width:22px;height:22px;flex:none} /* Кружок, имя и подпись под ним. Кружок стоит слева от обеих строк, поэтому имя и описание держатся вместе, а не разъезжаются по ширине. */ .review-author{display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:14px;row-gap:2px;align-items:center;align-content:center;min-width:0} .ra-ava{grid-column:1;grid-row:1 / span 2;display:block;width:52px;height:52px; border-radius:50%;object-fit:cover;object-position:50% 30%;background:#e8eefb} .ra-name{grid-column:2;grid-row:1;font-size:22px;font-weight:700;line-height:1.25} .ra-meta{grid-column:2;grid-row:2;font-size:16px;line-height:1.35;color:var(--ink-3)} .review-deal{font-size:16px;line-height:1.35;color:var(--ink-3);text-align:right} /* телефон и планшет: одна колонка. Сверху лента — она нажимается, — под ней отзыв. Ничего не уезжает вбок и не прячется за прокруткой. */ /* на узком экране лица и ссылка уходят под заголовок */ @media (max-width:900px){ .reviews-grid{grid-template-columns:minmax(0,1fr)} /* на телефоне блоки стоят друг под другом — кнопка просто идёт следом */ .reviews-cta{grid-template-columns:minmax(0,1fr);margin-top:clamp(16px,2.4vw,24px)} .reviews{--rv-block-h:440px} .review-text{max-width:none} } @media (max-width:560px){ .review-foot{grid-template-columns:minmax(0,1fr)} .review-deal{text-align:left} } /* Кому движение мешает — лента стоит. Копию в разметке прячем, а саму ленту разрешаем листать пальцем, чтобы до любого отзыва можно было добраться. */ @media (prefers-reduced-motion: reduce){ .review-panel.rv-enter{animation:none} .rv-feed{overflow-y:auto} .rv-list--copy{display:none} .rv-card{transition:none} } /* ---- мягкие переходы между светлыми секциями --------------------------- Соседние секции стоят на разных оттенках: белая и светло-синяя. Раньше граница была жёсткой линией — теперь у секции, которая идёт после соседки другого оттенка, сверху лежит градиент от цвета соседки к своему. Длина градиента чуть больше шага секции, поэтому переход растворяется в воздухе между блоками и не задевает их содержимое. Пары ровно те, где оттенки разные: «На любом этапе» (белая) → «Решим под ключ» (светло-синяя) «Решим под ключ» (св.син) → «64 отзыва» (белая) «15 лет Доверка» (св.син) → «Этапы работ» (белая) «Этапы работ» (белая) → «Частые вопросы» (светло-синяя) */ .docs,.reviews,.why,.faq,.leadsec{background-repeat:no-repeat; background-size:100% calc(var(--section) * 1.25)} .docs{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%)} .reviews{background-image:linear-gradient(180deg,#f7f9fd 0%,rgba(247,249,253,0) 100%)} .why{background-image:linear-gradient(180deg,#f7f9fd 0%,rgba(247,249,253,0) 100%)} .faq{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%)} /* секция с формой стала белой — стык с «Частыми вопросами» тоже мягкий */ /* Над синей полосой должен быть цвет секции, которая стоит выше, — а выше «Этапы работ», и низ у неё белый. Светло-синий градиент (#f7f9fd) здесь был ошибкой: он остался с тех пор, когда этот блок стоял последним, после «Частых вопросов». Теперь фон ровный белый. */ .leadsec{background-image:none} /* ================= ФУТЕР — ТЁМНО-СЕРЫЙ (перенесено из 09-theme.css) ========= К синей палитре не относится: фон собран, как первый экран, — сверху бумажное зерно (grain-band), под ним диагональ из трёх тёмно-серых точек. Раньше эти правила жили в отдельном файле и работали только из-за порядка подключения; теперь они в конце секций, после всех правил подвала. */ .site-footer{ color:rgba(255,255,255,.72); background-color:#1c1c1c; background-image: url("../textures/paper/grain-band.webp"), linear-gradient(158deg,#2a2a2a 0%,#1e1e1e 46%,#151515 100%); background-size:var(--grain-tile),auto; background-repeat:repeat,no-repeat; background-blend-mode:overlay,normal; border-top:1px solid rgba(255,255,255,.10); } .site-footer .logo{color:#fff} .foot-grid h3{color:#fff} .foot-grid p{color:rgba(255,255,255,.68)} .foot-links a{color:rgba(255,255,255,.68)} .foot-links a:hover{color:#fff} .site-footer a{color:rgba(255,255,255,.78)} .site-footer a:hover{color:#fff} .foot-social a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)} .foot-social a:hover{background:rgba(255,255,255,.16)} .site-footer .legal,.site-footer .foot-legal,.site-footer small{color:rgba(255,255,255,.45)} /* два абзаца внизу подвала: в две колонки, чуть светлее ради читаемости */ .site-footer .foot-note p{color:rgba(255,255,255,.62)}