/* ───────────────────────────────────────────────────────────────────────── CryAUTO — сайт проверки автомобилей. Тёмное золото по чёрному. Главное здесь — лупа: посетитель водит ею по машине и видит её насквозь. Это не фокус ради фокуса, а тот самый товар, только показанный, а не описанный словами. Шрифты системные. Сайт должен открываться мгновенно и без обращений на чужие домены — сто килобайт веб-шрифта того не стоят. Движение здесь несущее, а не украшение: машина просвечивается насквозь ровно там, где рассказано, что видно в отчёте. Но всё оно разложено на transform и opacity, работает от IntersectionObserver и целиком гаснет при prefers-reduced-motion. Без скриптов страница остаётся читаемой: прятать содержимое до появления разрешено только классу .js на . ───────────────────────────────────────────────────────────────────────── */ :root { /* Тёмное золото. Не жёлтый «в лоб», а медовый по чёрному: на больших заливках чистый жёлтый выглядит дёшево, приглушённый — дорого. */ --bg: #060607; --bg-alt: #0b0a0c; --surface: #131115; --surface-2: #1b181d; --line: #2b2620; --line-soft: #1f1c1c; --gold: #f5c542; --gold-2: #ffe08a; --gold-deep: #c9901f; --gold-dim: rgba(245, 197, 66, .12); /* Второй акцент. Золото — это про нас и про действие, красный — про то, что нашли в машине. Одним цветом страница выглядела ровной и скучной; двумя она начинает что-то говорить. Красного намеренно мало: он работает, пока его меньше золота. */ --red: #ff4d3f; --red-deep: #c2291d; --red-dim: rgba(255, 77, 63, .12); /* Цвета строк отчёта. Приглушены под общий тон. */ --ok: #4ec98a; --warn: #f5b13c; --bad: #ff5f52; --text: #f6f3ee; --muted: #a49c92; --muted-2: #756d64; --radius: 18px; --radius-sm: 11px; --wrap: 1380px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.22, .8, .28, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 70px; scroll-snap-type: y proximity; } .hero, .section { scroll-snap-align: start; } /* На невысоких окнах привязка мешает: блок в них всё равно не влезает. */ @media (max-height: 700px) { html { scroll-snap-type: none; } .section, .hero { min-height: 0; } } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.62 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; } h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); } h3 { font-size: 1.14rem; letter-spacing: -.015em; } p { margin: 0; } .accent { color: var(--gold); } .mono { font-family: var(--mono); letter-spacing: .04em; } /* Поля по краям растут вместе с экраном: на широком мониторе содержимое, прижатое к 1200 пикселям, выглядит колонкой в газете. */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(22px, 3.4vw, 54px); } .wrap--narrow { max-width: 900px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gold); color: #1a1205; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 700; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ───────────────────────── Появление при прокрутке ───────────────────── Прячем только когда скрипт жив: иначе страница без JS осталась бы пустой, а поисковику досталась бы разметка без текста. */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0ms); will-change: opacity, transform; } .js-reveal .reveal.is-in { opacity: 1; transform: none; } /* ────────────────────────────── Фон ─────────────────────────────── Пустой чёрный лист выглядит недоделанным: глазу не за что зацепиться между блоками. Четыре слоя, и ни один ничего не весит. 1. Сетка — как миллиметровка под чертежом. Тема техническая, и сетка говорит об этом раньше любого текста. 2. Пыль: россыпь точек размером в пиксель. Их не разглядывают, их замечают краем глаза — ровно настолько, чтобы фон перестал быть плоской заливкой. 3. Тёплый свет. Раньше это были три ярких пятна, и правое читалось жёлтым мазком поперёк экрана. Теперь один широкий и мягкий сверху и один почти невидимый снизу — свет, а не пятна. 4. Зерно поверх всего, чтобы большие заливки не выглядели пластиком. Всё лежит в fixed-слоях под содержимым, не перерисовывается при прокрутке и не ловит нажатия. */ .bg-grid { position: fixed; inset: 0; z-index: -4; pointer-events: none; background-image: linear-gradient(rgba(245, 197, 66, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 197, 66, .03) 1px, transparent 1px); background-size: 72px 72px; /* К краям сетка гаснет: ровная клетка до самого низа выглядит обоями. */ mask-image: radial-gradient(ellipse 86% 62% at 50% 0%, #000 26%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 86% 62% at 50% 0%, #000 26%, transparent 76%); } /* Пыль. Плитка в 560 пикселей с горсткой точек разного размера и яркости; на такой прозрачности повтор плитки глазом не ловится. */ .bg-dust { position: fixed; inset: -80px; z-index: -3; pointer-events: none; opacity: .55; background-image: radial-gradient(1.6px 1.6px at 44px 72px, rgba(245, 197, 66, .55), transparent 60%), radial-gradient(1.1px 1.1px at 188px 34px, rgba(255, 224, 138, .40), transparent 60%), radial-gradient(1.4px 1.4px at 312px 148px, rgba(245, 197, 66, .35), transparent 60%), radial-gradient(1px 1px at 96px 232px, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(1.8px 1.8px at 452px 96px, rgba(245, 197, 66, .28), transparent 60%), radial-gradient(1.2px 1.2px at 248px 306px, rgba(255, 224, 138, .30), transparent 60%), radial-gradient(1px 1px at 404px 392px, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(1.5px 1.5px at 132px 452px, rgba(245, 197, 66, .32), transparent 60%), radial-gradient(1.1px 1.1px at 512px 498px, rgba(255, 224, 138, .26), transparent 60%), radial-gradient(1.3px 1.3px at 20px 366px, rgba(245, 197, 66, .22), transparent 60%); background-size: 560px 560px; animation: dust 120s linear infinite; } /* Смещение ровно на плитку: движение есть, а шва не появляется. */ @keyframes dust { to { transform: translate3d(-560px, -280px, 0); } } .aura { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .aura span { position: absolute; display: block; } /* Широкий тёплый свет сверху: не круг, а растянутый эллипс — так он читается освещением сцены, а не пятном краски. */ /* Верхнего тёплого пятна больше нет. Над первым экраном оно ложилось ровно на заголовок и читалось жёлтым налётом на тексте, а не освещением сцены. Глубину дают сетка, пыль и виньетка. */ .aura span:nth-child(1) { display: none; } /* Тёплого и красного пятен нет совсем. Любое цветное свечение на первом экране читалось налётом поверх текста, а не освещением. Глубину дают сетка, пыль, значки и виньетка — их достаточно. */ .aura span:nth-child(2) { display: none; } /* Красный подпал слева снизу. Он не должен читаться как отдельное пятно — только как то, что золото сверху не одиноко. */ .aura span:nth-child(3) { display: none; } /* Виньетка: края темнее середины, взгляд сам идёт к содержимому. */ .aura span:nth-child(4) { inset: 0; background: radial-gradient(ellipse 78% 62% at 50% 44%, transparent 54%, rgba(0, 0, 0, .55) 100%); } @keyframes glow1 { to { transform: translate3d(5vw, 3vh, 0) scale(1.08); } } @keyframes glow2 { to { transform: translate3d(-4vw, -3vh, 0) scale(1.1); } } /* Плёнка зерна: убирает «пластиковость» больших заливок. */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ─────────────────────────────── Кнопки ─────────────────────────────── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 30px; border-radius: 13px; border: 1px solid transparent; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s ease, border-color .2s ease, color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--main { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1205; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); } .btn--main:hover { box-shadow: 0 12px 30px rgba(245, 197, 66, .22); } /* Блик пробегает по кнопке — недорого и сразу дороже на вид. */ .btn--main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); transform: translateX(-130%); animation: sheen 4.5s ease-in-out infinite; } @keyframes sheen { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } } .btn--ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); } /* Вторая кнопка при наведении зеленеет. Красный тут читался запретом: человек тянется нажать, а цвет ему говорит «нельзя». Зелёный — цвет «можно», и он же цвет чистых строк в отчёте, так что чужим на этом сайте не выглядит. */ .btn--ghost:hover { border-color: var(--ok); color: var(--ok); } .btn--sm { padding: 10px 18px; font-size: .92rem; border-radius: 10px; } .btn--wide { width: 100%; } /* ─────────────────────────────── Шапка ──────────────────────────────── */ .header { position: sticky; top: 0; z-index: 50; background: rgba(6, 6, 7, .72); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; } .header.is-stuck { border-bottom-color: var(--line-soft); background: rgba(6, 6, 7, .92); } .header__in { display: flex; align-items: center; gap: 22px; height: 70px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.18rem; } .logo__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--gold-dim); color: var(--gold); transition: box-shadow .3s ease; } .logo:hover .logo__mark { box-shadow: 0 0 0 4px rgba(245, 197, 66, .1); } .logo__mark svg { width: 20px; height: 20px; } .logo__text { letter-spacing: -.035em; } .logo__text b { color: var(--gold); font-weight: 800; } .nav { display: flex; gap: 24px; margin-left: auto; font-size: .96rem; color: var(--muted); } .nav a { position: relative; transition: color .18s ease; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); } .nav a:hover { color: var(--text); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--text); } .header__right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nav + .header__right { margin-left: 0; } .burger { display: none; width: 42px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .burger span { width: 17px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .24s var(--ease), opacity .2s ease; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 960px) { .burger { display: flex; } .nav { position: fixed; inset: 70px 0 auto 0; flex-direction: column; gap: 0; background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 8px 22px 18px; display: none; } .nav.is-open { display: flex; } .nav a { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.02rem; } .nav a::after { display: none; } .nav a:last-child { border-bottom: 0; } } @media (max-width: 560px) { .header__right .btn { display: none; } } /* ────────────────────────────── Обложка ─────────────────────────────── */ /* Экран под каждый блок. Высота считается от окна за вычетом шапки: она липкая и всегда занимает свои 70 пикселей. Раньше блоки были ниже окна, и человек, ещё не тронув колесо мыши, видел половину следующего — сайт выглядел свёрстанным впритык. Первый экран заканчивается лентой источников: она стоит внутри секции нижней кромкой, а не отдельной полосой, выглядывающей снизу. */ .hero { position: relative; padding: 2px 0 14px; min-height: calc(100svh - 70px); display: flex; flex-direction: column; justify-content: center; } .hero--first { padding-bottom: 0; } .hero__body { flex: 1; display: flex; flex-direction: column; gap: clamp(6px, .9vh, 12px); } /* Свободную высоту делим не поровну: сверху четверть, снизу три. При равном дележе верх читался провалом — над ним ведь ещё и шапка, и вместе они давали двойной отступ. */ .hero__body::before { content: ""; flex: 1; } .hero__body::after { content: ""; flex: 3; } .hero--first .marquee { margin-top: clamp(5px, .8vh, 10px); will-change: opacity, transform; } /* Машина справа от текста. Во всю ширину она распирала экран и уводила кнопку за сгиб — а кнопка важнее картинки. */ /* Машине отдано больше колонки: её увеличили на пятую часть, иначе в лупу попадал кусок узла вместо узла. */ /* Колонки под машину анфас. Она почти квадратная и набирает высоту сама: широкая колонка делала бы её выше экрана. */ .hero__in { display: grid; grid-template-columns: 1fr 1.46fr; gap: clamp(22px, 2.2vw, 40px); align-items: center; } /* Машина выходит за поле обёртки к самому краю экрана: внутри колонки ей не хватало ширины, чтобы набрать высоту, и она снова отбивалась полями сверху и снизу. */ .hero__stage { margin-right: calc(-1 * clamp(22px, 3.4vw, 54px)); } .hero__text > * + * { margin-top: clamp(14px, 1.9vh, 24px); } /* В одну строку: перенос посреди короткого вопроса выглядел так, будто заголовку не хватило места. */ .hero__text h1 { max-width: none; font-size: clamp(1.7rem, 3.3vw, 2.85rem); text-wrap: balance; } .hero .trust { margin-top: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); background: var(--gold-dim); padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(245, 197, 66,.2); } /* Точка зелёная, а не красная. Красная рядом со словом «официальные» читалась предупреждением: цвет говорил «осторожно» там, где текст говорит «всё в порядке». */ .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(78, 201, 138, .75); animation: blink 2.4s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .crumbs { font-size: .88rem; color: var(--muted-2); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--gold); } .lead { font-size: clamp(1.08rem, 1.9vw, 1.4rem); color: var(--muted); max-width: 42ch; } .lead b { color: var(--text); font-weight: 700; } .hero__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .price { font-size: clamp(2.2rem, 4.8vw, 3.4rem); font-weight: 800; color: var(--gold); letter-spacing: -.035em; text-shadow: 0 0 22px rgba(245, 197, 66, .18); } .hero__price-note { color: var(--muted); font-size: .95rem; } .cta { display: flex; gap: 12px; flex-wrap: wrap; } .trust { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(26px, 3.4vw, 54px); flex-wrap: wrap; } .trust li { display: flex; flex-direction: column; gap: 2px; } .trust b { font-size: clamp(1.08rem, 1.5vw, 1.32rem); color: var(--text); } .trust span { font-size: .94rem; color: var(--muted-2); } @media (max-width: 820px) { .hero { padding: 36px 0 24px; } .hero__in { grid-template-columns: 1fr; gap: 26px; } .hero__text h1 { max-width: none; } .hero .trust { margin-top: 28px; gap: 20px; } } /* ─────────────────────── Лупа: машина насквозь ───────────────────── Два одинаковых по размеру слоя друг на друге. Верхний — кузов, каким его видит покупатель. Нижний — то, что внутри: рама, двигатель, подвеска и отметки о находках. Нижний вырезан кругом, который ходит за курсором. Круг ходит сам, пока мышь не тронули. Без этого на телефоне, где курсора нет вовсе, половина посетителей не поняла бы, что тут можно что-то делать, и ушла бы, ничего не увидев. */ /* Высоту машине задаём от окна, а не от ширины колонки. Пока она тянулась по ширине, её размер зависел от вёрстки текста рядом: колонка узкая — машина мелкая, а сверху и снизу оставался воздух. Теперь наоборот: машина занимает отведённую высоту целиком, а в ширину разворачивается сама. */ .lens-stage { position: relative; height: clamp(280px, 68vh, 740px); display: flex; align-items: center; justify-content: center; padding-bottom: 38px; --lr: clamp(41px, 5.9vw, 73px); --lx: 50%; --ly: 50%; cursor: crosshair; touch-action: pan-y; } .lens-stage > svg { display: block; height: 100%; width: auto; max-width: 100%; } .lens-stage__under { position: absolute; inset: 0 0 38px; display: flex; align-items: center; justify-content: center; } .lens-stage__under > svg { display: block; height: 100%; width: auto; max-width: 100%; } /* Край лупы растушёван, а не обрезан. clip-path режет слой ровно по окружности, и на краю машины было видно диск чужого фона с обрубленными линиями сетки — как дырка в картинке. Маска с мягким спадом убирает край: изнутри наружу изображение тает, и стык перестаёт читаться границей. */ .js .lens-stage__under { -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%); mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%); } /* Ободок линзы. Отдельным слоем поверх — так у круга есть край, и видно, что это стекло, а не дырка. */ .lens-ring { position: absolute; left: var(--lx); top: var(--ly); width: calc(var(--lr) * 2); height: calc(var(--lr) * 2); margin: calc(var(--lr) * -1) 0 0 calc(var(--lr) * -1); border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(245, 197, 66, .55); box-shadow: 0 0 26px rgba(245, 197, 66, .22), 0 0 54px rgba(255, 77, 63, .12), inset 0 0 38px rgba(245, 197, 66, .07); background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.05), transparent 44%); } html:not(.js) .lens-ring { display: none; } /* Подпись под машиной, а не поверх неё: на кузове она закрывала заднее колесо и читалась как часть картинки. */ .lens-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; /* В две строки подпись налезала на заднее колесо. */ white-space: nowrap; font-size: .8rem; color: var(--muted); background: rgba(6, 6, 7, .72); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; pointer-events: none; transition: opacity .4s ease; } .lens-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 2.2s ease-in-out infinite; } .lens-stage.is-touched .lens-hint { opacity: 0; } html:not(.js) .lens-hint { display: none; } /* Кузов сверху. Заливка градиентом из самого SVG: плоская заливка читается наклейкой, а перепад сверху вниз даёт объём. Группа кузова растянута по горизонтали, поэтому всем штрихам задан non-scaling-stroke: без него линии растянулись бы вместе с геометрией и стали бы разной толщины по вертикали и горизонтали. */ .car [class^="car__"], .car [class*=" car__"], .xr [class^="xr__"], .xr [class*=" xr__"] { vector-effect: non-scaling-stroke; } .car__body { stroke: #4e463a; stroke-width: 2.4; stroke-linejoin: round; } .car__glass { fill: #1a1721; stroke: #4e463a; stroke-width: 2; } /* Окантовка стекла — светлее кузова: на машине это хром, и он ловит свет. Без неё стекло выглядит дырой. */ .car__trim { fill: none; stroke: #5f5646; stroke-width: 1.4; } .car__line { stroke: #3a342c; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .car__crease { stroke: #5c5246; stroke-width: 1.8; fill: none; stroke-linecap: round; } .car__wiper { stroke: #4a4238; stroke-width: 2.6; fill: none; stroke-linecap: round; } .car__grille { fill: #0d0c0f; stroke: #4e463a; stroke-width: 2; stroke-linejoin: round; } .car__slat { stroke: #332e27; stroke-width: 1.3; fill: none; } /* Резкие грани: плечевая линия, клин от фары и кромка юбки. Ими на машине ломают объём, без них кузов выглядит надутым. */ .car__edge { stroke: #6a5f4e; stroke-width: 1.8; fill: none; stroke-linecap: round; } .car__vent { fill: #0c0b0e; stroke: #4a4238; stroke-width: 1.6; stroke-linejoin: round; } .car__lamp { fill: rgba(245, 197, 66, .09); stroke: #6a5b3a; stroke-width: 1.6; stroke-linejoin: round; } /* Светодиодная полоса в фаре — единственное, что на тёмной машине светится само. Она и делает передок живым. */ .car__led { stroke: var(--gold-2); stroke-width: 2.4; fill: none; stroke-linecap: round; opacity: .55; } .car__plate { fill: rgba(246, 243, 238, .06); stroke: #5f5646; stroke-width: 1.6; } .car__plate-text { fill: rgba(246, 243, 238, .52); font: 800 21px var(--font); letter-spacing: .1em; text-anchor: middle; } .car__tyre { fill: #09080a; stroke: #413a31; stroke-width: 2.2; } /* Канавки на беговой дорожке. Без них покрышка — просто тёмный прямоугольник под бампером. */ .car__tread { stroke: #2b2721; stroke-width: 1.5; fill: none; stroke-linecap: round; } .car__ground { stroke: rgba(245, 197, 66, .14); stroke-width: 1; } /* Начинка снизу: золотой чертёж по угольному фону. */ /* Подложка рентгена полупрозрачная: сплошная заливка вместе с растушёвкой всё равно давала заметное тёмное пятно вокруг лупы. */ .xr__bg { fill: #0a0907; fill-opacity: .82; } .xr__ghost { fill: none; stroke: rgba(245, 197, 66, .22); stroke-width: 1.4; } .xr__part { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; } .xr__part--soft { stroke: rgba(255, 224, 138, .6); stroke-width: 1.2; } .xr__fill { fill: rgba(245, 197, 66, .09); stroke: var(--gold); stroke-width: 1.5; } .xr__grid { stroke: rgba(245, 197, 66, .07); stroke-width: 1; } /* Находки. Их видно только через лупу — в этом и смысл. */ .xr__pin circle { transform-box: fill-box; transform-origin: center; } .js .xr__pin .pin__ring { animation: ping 2.8s ease-out infinite; } .xr__pin .pin__ring:nth-of-type(2) { animation-delay: .9s; } @keyframes ping { 0% { transform: scale(.7); opacity: .75; } 75% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } .xr__pin text { font: 800 14px var(--font); } .xr__pin .pin__cap { fill: var(--bad); } .xr__pin .pin__cap--warn { fill: var(--warn); } .xr__pin .pin__sub { font-weight: 500; font-size: 11.5px; fill: var(--muted); } @media (max-width: 700px) { .lens-stage { --lr: 52px; } } /* ────────────────────────────── Секции ──────────────────────────────── */ .section { position: relative; padding: clamp(56px, 7vh, 96px) 0; min-height: calc(100svh - 70px); display: flex; align-items: center; } .section > .wrap { width: 100%; } /* Юридическим и длинным текстам высота ни к чему: они и так длиннее экрана, а выравнивание по центру у них разъезжается. */ .section.legal, .prose > .section { display: block; min-height: 0; } @media (max-height: 680px) { .section { min-height: 0; } } /* Чередование секций без единой чёткой линии. Резкая граница режет страницу на плитки и выдаёт вёрстку; здесь фон появляется и уходит плавно, и стык виден только как смена освещения. */ .section--alt { background: none; } .section--alt::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 10, 12, 0) 0%, rgba(11, 10, 12, .85) 14%, rgba(11, 10, 12, .85) 86%, rgba(11, 10, 12, 0) 100%); } .section--alt > .wrap { position: relative; } .section > .wrap > * + * { margin-top: 24px; } .section h2 + p { color: var(--muted); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; } /* ────────────────────── Прилипающий разбор отчёта ─────────────────── Слева машина стоит на месте, справа проезжают находки. Это и есть «листаешь, а машину видно насквозь». */ .scan { position: relative; } .scan__in { display: grid; grid-template-columns: .95fr 1.05fr; gap: 54px; align-items: start; } .scan__stick { position: sticky; top: 108px; } .scan__stick h2 { margin-bottom: 16px; } .scan__stick p { color: var(--muted); margin-bottom: 22px; } .scan__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .scan__steps li { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(19, 17, 21, .78); padding: 26px 26px; transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s ease; } .scan__steps li.is-live { border-color: rgba(245, 197, 66,.5); background: var(--surface-2); } .scan__steps h3 { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .scan__steps p { color: var(--muted); font-size: .97rem; } .scan__num { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--gold-dim); color: var(--gold); font-size: .9rem; font-weight: 800; } @media (max-width: 960px) { .scan__in { grid-template-columns: 1fr; gap: 30px; } .scan__stick { position: static; } } /* ──────────────────────── Пример строк отчёта ───────────────────────── */ .sample { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } .sample__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); flex-wrap: wrap; } .sample__car { font-weight: 700; } .sample__vin { font-family: var(--mono); font-size: .85rem; color: var(--muted-2); letter-spacing: .05em; } .sample__rows { list-style: none; margin: 0; padding: 0; } .sample__rows li { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); font-size: .97rem; } .sample__rows li:last-child { border-bottom: 0; } .js-reveal .sample__rows li { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js-reveal .sample.is-in .sample__rows li { opacity: 1; transform: none; } .js-reveal .sample.is-in .sample__rows li:nth-child(1) { transition-delay: .05s; } .js-reveal .sample.is-in .sample__rows li:nth-child(2) { transition-delay: .13s; } .js-reveal .sample.is-in .sample__rows li:nth-child(3) { transition-delay: .21s; } .js-reveal .sample.is-in .sample__rows li:nth-child(4) { transition-delay: .29s; } .js-reveal .sample.is-in .sample__rows li:nth-child(5) { transition-delay: .37s; } .js-reveal .sample.is-in .sample__rows li:nth-child(6) { transition-delay: .45s; } .js-reveal .sample.is-in .sample__rows li:nth-child(7) { transition-delay: .53s; } .sample__name { flex: 1; color: var(--muted); } .sample__val { font-weight: 700; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .dot--ok { background: var(--ok); box-shadow: 0 0 12px rgba(78,201,138,.6); } .dot--warn { background: var(--warn); box-shadow: 0 0 12px rgba(245,177,60,.6); } .dot--bad { background: var(--bad); box-shadow: 0 0 12px rgba(255,95,82,.6); } .is-ok { color: var(--ok); } .is-warn { color: var(--warn); } .is-bad { color: var(--bad); } .sample__note { font-size: .87rem; color: var(--muted-2); padding: 14px 22px; background: var(--bg-alt); } /* ───────────────────────────── Счётчики ─────────────────────────────── */ .stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stats li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 26px 22px; text-align: center; } .stats b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; color: var(--gold); font-variant-numeric: tabular-nums; } .stats span { font-size: .9rem; color: var(--muted); } @media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ─────────────────────────── Сетка проверок ─────────────────────────── */ .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); } .checks li { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 24, 29, .72), rgba(19, 17, 21, .72)); backdrop-filter: blur(6px); padding: 22px 22px; transition: transform .3s var(--ease), border-color .3s ease; } .checks li:hover { transform: translateY(-4px); border-color: rgba(245, 197, 66,.45); } .checks li::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform .45s var(--ease); } .checks li:hover::before { transform: scaleX(1); } .checks h3 { margin-bottom: 8px; } .checks p { color: var(--muted); font-size: .93rem; } @media (max-width: 1180px) { .checks { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .checks { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .checks { grid-template-columns: 1fr; } } /* ───────────────────────────── Что внутри ───────────────────────────── */ .blocks { display: grid; gap: 18px; margin: 0; padding: 0; } .blocks > li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px 26px; list-style: none; } .blocks h3 { margin-bottom: 9px; color: var(--text); } .blocks p { color: var(--muted); } .blocks p + p { margin-top: 10px; } /* ────────────────────────────── Шаги ────────────────────────────────── */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); } .steps li { counter-increment: s; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 26px 24px 24px; } .steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; background: var(--gold-dim); color: var(--gold); font-weight: 800; font-size: 1.02rem; } .steps h3 { margin-bottom: 8px; } .steps p { color: var(--muted); font-size: .95rem; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } /* ──────────────────────────── Два отчёта ────────────────────────────── */ .plans { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } .plan { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; transition: transform .3s var(--ease), border-color .3s ease; } .plan:hover { transform: translateY(-4px); } .plan--pick { border-color: rgba(245, 197, 66,.55); box-shadow: 0 0 60px rgba(245, 197, 66,.09); } .plan__tag { align-self: flex-start; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); background: var(--gold-dim); padding: 6px 12px; border-radius: 999px; } .plan__price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.035em; } .plan__price small { font-size: .92rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--muted); font-size: .95rem; } .plan ul li { display: flex; gap: 10px; align-items: flex-start; } .plan ul li::before { content: "—"; color: var(--gold); flex: none; } .plan .btn { margin-top: auto; } @media (max-width: 800px) { .plans { grid-template-columns: 1fr; } } /* ──────────────────────────── Таблица цен ───────────────────────────── */ .prices__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .prices { width: 100%; border-collapse: collapse; min-width: 420px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .prices th, .prices td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); } .prices thead th { background: var(--surface-2); font-size: .86rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; } .prices tbody th { font-weight: 700; } .prices tbody tr:last-child th, .prices tbody tr:last-child td { border-bottom: 0; } .prices td { color: var(--muted); } .prices .old { text-decoration: line-through; text-decoration-color: rgba(255,95,82,.6); } .prices .ours { color: var(--gold); font-weight: 800; font-size: 1.1rem; } .prices__note { font-size: .87rem; color: var(--muted-2); } /* ────────────────────────────── Бегущая ─────────────────────────────── */ .marquee { overflow: hidden; padding: 18px 0; position: relative; background: linear-gradient(180deg, transparent, rgba(11, 10, 12, .8) 30%, rgba(11, 10, 12, .8) 70%, transparent); } /* Лента гаснет к краям экрана, а не обрывается на них. */ .marquee__row { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__row { display: flex; gap: 40px; width: max-content; } .js .marquee__row { animation: roll 38s linear infinite; } .marquee:hover .marquee__row { animation-play-state: paused; } .marquee span { color: var(--muted-2); font-size: .93rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; } .marquee span::after { content: "•"; color: var(--gold); opacity: .5; } @keyframes roll { to { transform: translateX(-50%); } } /* ──────────────────────────── Призыв ────────────────────────────────── */ .final { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(140deg, var(--surface-2), var(--surface)); padding: 56px 40px; text-align: center; } .final::before { content: ""; position: absolute; inset: -60% 20% auto; height: 340px; background: radial-gradient(closest-side, rgba(245, 197, 66,.22), transparent 72%); pointer-events: none; } .final > * + * { margin-top: 18px; } .final p { color: var(--muted); max-width: 56ch; margin-inline: auto; position: relative; } .final h2 { position: relative; } .final .cta { justify-content: center; position: relative; } /* ───────────────────────────── Плитки ───────────────────────────────── */ .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } .tiles a { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 20px 22px; transition: border-color .2s ease, transform .25s var(--ease); } .tiles a:hover { border-color: var(--gold); transform: translateY(-3px); } .tiles h3 { margin-bottom: 6px; } .tiles p { color: var(--muted); font-size: .92rem; } @media (max-width: 700px) { .tiles { grid-template-columns: 1fr; } } /* ───────────────────────────── Вопросы ──────────────────────────────── */ .faq { display: grid; gap: 11px; } .faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 0 22px; transition: border-color .22s ease; } .faq details[open] { border-color: rgba(245, 197, 66,.4); } .faq summary { cursor: pointer; padding: 17px 0; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; font-weight: 400; line-height: 1; flex: none; transition: transform .22s var(--ease); } .faq details[open] summary::after { content: "−"; transform: rotate(180deg); } .faq details p { padding-bottom: 18px; color: var(--muted); font-size: .96rem; } /* ───────────────────────────── Подвал ───────────────────────────────── */ .footer { background: linear-gradient(180deg, transparent, rgba(11, 10, 12, .9) 22%); padding: 56px 0 40px; } .footer__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; } .footer h4 { margin: 0 0 13px; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); font-weight: 700; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; color: var(--muted); } .footer a { transition: color .18s ease; } .footer a:hover { color: var(--gold); } .footer__about { color: var(--muted); font-size: .93rem; max-width: 40ch; } .footer__about .logo { margin-bottom: 14px; } .footer__bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: var(--muted-2); } #stamp:not([data-shown]) { display: none; } @media (max-width: 800px) { .footer__in { grid-template-columns: 1fr; gap: 28px; } } /* ───────────────────────────── Текст ────────────────────────────────── */ .prose > * + * { margin-top: 18px; } .prose p { color: var(--muted); } .prose h2 { margin-top: 44px; } .prose h3 { margin-top: 28px; font-size: 1.22rem; } .prose ul, .prose ol { color: var(--muted); padding-left: 22px; margin: 0; display: grid; gap: 8px; } .prose strong { color: var(--text); } .prose blockquote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--gold); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted); } /* ────────────────────────────── 404 ─────────────────────────────────── */ .oops { padding: 110px 0 96px; text-align: center; } .oops > * + * { margin-top: 18px; } .oops p { color: var(--muted); } .oops .cta { justify-content: center; } /* ──────────────────── Кому движение мешает ────────────────────────── Не «поменьше», а совсем: у части людей от параллакса кружится голова. Содержимое при этом остаётся на месте и целиком видимым. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .js-reveal .reveal { opacity: 1 !important; transform: none !important; } .js-reveal .sample__rows li { opacity: 1 !important; transform: none !important; } .js .xray__pin { opacity: 1 !important; } .bg-dust { animation: none; } .motifs { display: none; } } /* ─────────────────────── Соглашение и политика ────────────────────── Юридический текст читают иначе, чем рекламный: заголовки здесь — указатели в длинном документе, а не витринные вывески. Поэтому они мельче, а нумерация пунктов проставляется браузером. */ .legal h1 { margin-bottom: 22px; font-size: clamp(1.9rem, 3.6vw, 2.7rem); } .legal h2 { margin: 38px 0 14px; font-size: 1.32rem; letter-spacing: -.015em; } .legal__intro { color: var(--muted); margin-bottom: 8px; } .legal p { color: var(--muted); } .legal a { color: var(--gold); } .legal a:hover { text-decoration: underline; } .legal .crumbs { margin-bottom: 18px; } .legal__list { margin: 0; padding-left: 26px; display: grid; gap: 11px; color: var(--muted); font-size: .97rem; counter-reset: none; } .legal__list li::marker { color: var(--gold); font-weight: 700; } /* ─────────────────────────── Пример отчёта ────────────────────────── Показываем не чужой скриншот, а собранный своими руками разбор: в настоящем отчёте данные живого человека и живой машины. Состав и порядок при этом те же, и на каждом блоке написано, что это пример. */ .report { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 34px 80px rgba(0, 0, 0, .5); } .report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 24px 26px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(140deg, var(--surface-2), var(--surface)); } .report__head h2 { font-size: 1.5rem; margin-bottom: 6px; } .report__head p { color: var(--muted-2); font-size: .85rem; } .report__verdict { font-size: .84rem; font-weight: 800; letter-spacing: .03em; color: var(--warn); background: rgba(245, 177, 60, .12); border: 1px solid rgba(245, 177, 60, .3); padding: 7px 13px; border-radius: 999px; white-space: nowrap; } .report__part { padding: 24px 26px; border-bottom: 1px solid var(--line-soft); } .report__part h3 { margin-bottom: 12px; } .report__part > p { color: var(--muted); font-size: .95rem; margin-bottom: 16px; } .report__part .sample__rows li { padding-inline: 0; } .report__note { padding: 16px 26px; font-size: .87rem; color: var(--muted-2); background: var(--bg-alt); } /* График пробега. Излом вниз на последней точке — та самая скрутка, и её видно раньше, чем человек дочитает подпись. */ .odo { width: 100%; height: auto; } .odo__grid { stroke: var(--line-soft); stroke-width: 1; } .odo__line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linejoin: round; } .odo__dot { fill: var(--gold); } .odo__bad { fill: var(--bad); } .odo__year { fill: var(--muted-2); font: 500 11px var(--font); } .crashes, .owners { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .crashes li, .owners li { display: grid; grid-template-columns: 148px 1fr; gap: 16px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-alt); } .crashes h4, .owners h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; } .crashes p, .owners p { color: var(--muted); font-size: .92rem; } .crash__when, .owner__when { color: var(--gold); font-weight: 700; font-size: .92rem; } @media (max-width: 620px) { .crashes li, .owners li { grid-template-columns: 1fr; gap: 6px; } .report__head, .report__part, .report__note { padding-inline: 18px; } } /* ─────────────────── Мелочь на фоне, бегущая от мыши ──────────────── Номерные знаки, шестерни, поршни — на десяти процентах прозрачности. Их не разглядывают, их замечают: фон перестаёт быть заливкой, а тема читается раньше первой строки текста. Смещение ставит скрипт в transform, возврат делает переход. Ничего, кроме transform, при этом не меняется — раскладка не пересчитывается и рука не тормозит. */ .motifs { position: fixed; inset: 0; z-index: -3; pointer-events: none; } .motif { position: absolute; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); opacity: .1; transition: transform .9s cubic-bezier(.16, .84, .32, 1); will-change: transform; } .motif svg { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--turn)); } /* Пока курсор рядом, значок должен отскакивать быстро, а возвращаться медленно: так движение читается как отталкивание, а не как желе. */ .motif.is-pushed { transition-duration: .22s; } @media (max-width: 760px) { .motifs { display: none; } } /* ─────────────────────── Красное на видном месте ─────────────────── Один знак вопроса в заголовке и подсвеченные находки. Больше красного странице не нужно: он должен оставаться сигналом. */ /* Знак вопроса красным выглядел опечаткой, а не приёмом: цвет опасности на пунктуации ничего не значит. */ .q { color: inherit; } /* Цена — зелёным. Красным она читалась предостережением, хотя это как раз хорошая новость страницы. */ .stats li:nth-child(3) b { color: var(--ok); } /* Карточка дорогого отчёта у поставщика — перечёркнута красным. */ .prices .old { text-decoration-color: rgba(255, 77, 63, .75); } /* Пара значков на фоне — красные. Не ряд, а вкрапление. */ .motif:nth-child(3n) svg { stroke: var(--red); } .motif:nth-child(3n) { opacity: .075; } .car__lamp--rear { fill: rgba(255, 77, 63, .16); stroke: #8a3a2f; } .xr__hot { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; } /* ─────────────────── Живая проверка рядом с шагами ───────────────── Место под прилипающим блоком пустовало, а показать там уместнее всего то самое, что происходит после отправки VIN. Первая версия притворялась терминалом — с кружками оконной рамки и моноширинным логом. На сайте про покупку машины это выглядело чужой декорацией. Теперь карточка сделана как остальной сайт, а из «технического» в ней только сам VIN, которому это к лицу. Целиком на ключевых кадрах, без скрипта: один круг в девять секунд, строки загораются по очереди и гаснут к концу. */ .probe { margin-top: clamp(26px, 4vh, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 24, 29, .66), rgba(19, 17, 21, .66)); padding: clamp(24px, 3vh, 34px) clamp(24px, 2.4vw, 34px); } .probe__top { display: flex; flex-direction: column; gap: 10px; } .probe__live { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); } .probe__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px rgba(245, 197, 66, .8); } .js .probe__live::before { animation: blink 1.8s ease-in-out infinite; } .probe__vin { font-size: clamp(1.15rem, 1.5vw, 1.44rem); font-weight: 700; color: var(--gold); letter-spacing: .14em; } /* Полоса заполняется за круг: видно, что проверка идёт, а не замерла. */ .probe__track { height: 3px; margin: clamp(18px, 2.4vh, 26px) 0 clamp(18px, 2.4vh, 24px); border-radius: 3px; background: var(--line-soft); overflow: hidden; } .probe__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); } .js .probe__track span { animation: probeFill 9s ease-in-out infinite; } @keyframes probeFill { 0% { width: 0; } 78% { width: 100%; } 92% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } } .probe__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(13px, 1.7vh, 19px); } .probe__rows li { display: flex; align-items: center; gap: 14px; font-size: clamp(.97rem, 1.1vw, 1.08rem); color: var(--muted-2); } .js .probe__rows li { animation: probeRow 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.05s); } @keyframes probeRow { 0%, 8% { color: var(--muted-2); } 16%, 86% { color: var(--text); } 96%, 100% { color: var(--muted-2); } } /* Кружок превращается в галочку, когда до строки дошла очередь. */ .probe__tick { position: relative; flex: none; width: 21px; height: 21px; border-radius: 50%; border: 1.6px solid var(--line); transition: border-color .3s ease; } .probe__tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 10px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; } .js .probe__rows li .probe__tick { animation: probeRing 9s ease-in-out infinite; } .js .probe__rows li .probe__tick::after { animation: probeTick 9s ease-in-out infinite; } .js .probe__rows li .probe__tick, .js .probe__rows li .probe__tick::after { animation-delay: calc(var(--i) * 1.05s); } @keyframes probeRing { 0%, 10% { border-color: var(--line); } 18%, 86% { border-color: rgba(245, 197, 66, .55); } 96%, 100% { border-color: var(--line); } } @keyframes probeTick { 0%, 12% { transform: rotate(45deg) scale(0); } 22%, 86% { transform: rotate(45deg) scale(1); } 96%, 100% { transform: rotate(45deg) scale(0); } } @media (prefers-reduced-motion: reduce) { .probe__rows li { color: var(--text); } .probe__track span { width: 100%; } } /* ─────────────────────── Чем это кончается ────────────────────────── Раньше здесь был столбец текста посреди пустого экрана. Три карточки говорят то же самое, но с цифрой потери — а цифра убеждает сильнее абзаца. */ .risks { list-style: none; margin: 34px 0 30px; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } .risks li { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(27, 24, 29, .72), rgba(19, 17, 21, .72)); padding: 26px 24px 24px; transition: transform .3s var(--ease), border-color .3s ease; } .risks li:hover { transform: translateY(-4px); border-color: rgba(255, 77, 63, .4); } .risks li::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .5; } .risks__tag { align-self: flex-start; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--red); background: var(--red-dim); padding: 6px 11px; border-radius: 999px; } .risks b { font-size: 1.22rem; letter-spacing: -.02em; } .risks p { color: var(--muted); font-size: .94rem; } .risks__cost { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--gold); font-weight: 700; font-size: .92rem; } .risks__after { color: var(--muted); } @media (max-width: 980px) { .risks { grid-template-columns: 1fr; } } /* Опоры под финальным призывом: голый заголовок с кнопкой посреди экрана выглядел заглушкой, а не концовкой. */ .final__facts { list-style: none; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; } .final__facts b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--gold); } .final__facts span { font-size: .87rem; color: var(--muted); } @media (max-width: 760px) { .final__facts { grid-template-columns: repeat(2, 1fr); } } /* ─────────────────────────── Робот с лупой ────────────────────────── Тот самый, что встречает людей в боте, только перерисован линией: растровая картинка рядом с векторной машиной выглядела бы вклейкой из другого проекта. Он не иллюстрация к тексту, а знак: кто-то внимательно смотрит на машину вместо вас. Поэтому стоит там, где человека зовут проверить. */ .bot { display: block; } .bot__line { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .bot__eye { fill: var(--gold); } .bot__hot { fill: var(--red); } .bot__grip { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; } .bot__glass { fill: rgba(245, 197, 66, .07); stroke: var(--gold); stroke-width: 3.4; } .bot__spark { fill: none; stroke: var(--gold-2); stroke-width: 2.4; stroke-linecap: round; opacity: .8; } /* Под финальным призывом — водяным знаком сбоку: он должен читаться краем глаза, а не спорить с кнопкой. */ .bot--watermark { position: absolute; right: -10px; bottom: -22px; width: clamp(180px, 20vw, 290px); height: auto; opacity: .12; pointer-events: none; } .js .bot--watermark { animation: botFloat 7s ease-in-out infinite; } @keyframes botFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.4deg); } } @media (max-width: 860px) { .bot--watermark { display: none; } } /* На странице «не найдено» он же — главный герой, в полный рост. */ .bot--lost { width: clamp(160px, 22vw, 230px); height: auto; margin: 0 auto 26px; opacity: .85; } .js .bot--lost { animation: botFloat 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .bot--watermark, .bot--lost { animation: none; } }