/* ===================================================================== REFORMA — Landing (Hero section) Plain CSS. Palette: RED / BLACK / WHITE. Red #C50022 is the only accent. Structure grouped by component so more sections can be added below. ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------------------- */ :root { /* brand colours */ --red: #C50022; /* the single accent */ --red-2: #E10E2E; /* brighter — hover / glow */ --black: #050506; --bg: #0B0A0C; /* near-black hero base */ --surface: #141216; --white: #FFFFFF; --cream: #F4F1EA; --muted: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .12); /* type */ --font-display: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; /* layout */ --container: 1280px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --header-h: 84px; /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --------------------------------------------------------------------- 2. RESET / BASE --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--white); background: var(--bg); overflow-x: hidden; /* never allow horizontal page scroll */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, p { margin: 0; } button { font: inherit; color: inherit; cursor: pointer; } /* Visible focus states on every interactive element */ a:focus-visible, button:focus-visible { outline: 2px solid var(--red-2); outline-offset: 3px; border-radius: 2px; } /* Custom scroll progress bar — replaces the native scrollbar with a thin red strip that fills top-down as the page scrolls (see js/main.js for the scrollY -> scaleY math). Decorative/non-interactive: native wheel, keyboard and touch scrolling all still work exactly as normal, only the visual scrollbar itself is replaced. */ html { scrollbar-width: none; } /* Firefox */ html::-webkit-scrollbar { display: none; } /* Chrome / Safari / Edge */ .scroll-progress { position: fixed; top: 0; right: 0; bottom: 0; width: 4px; z-index: 110; /* above the header (100) and mobile menu (90) */ background: var(--line); /* faint track for the full page height */ pointer-events: none; } .scroll-progress__fill { position: absolute; inset: 0; transform: scaleY(var(--scroll-progress, 0)); transform-origin: top; background: linear-gradient(var(--red-2), var(--red)); /* БЕЗ transition: значение --scroll-progress пишется из rAF (модуль 2b), то есть ровно раз в кадр. Транзишен здесь только перезапускался ~60 раз в секунду и добавлял работы компоновщику на каждом тике скролла. */ } /* --------------------------------------------------------------------- 3. UTILITIES --------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Широкая полоса: тот же контейнер, но шире обычных 1280px и с ТЕМИ ЖЕ боковыми var(--gutter) — на средних экранах контент не липнет к краям, на больших читается как блок во всю ширину сайта. Сейчас используется витриной лотов (#auctions). */ .container--wide { max-width: 1600px; } /* Блокировка скролла фона — ОДНА на всю страницу. Класс вешает/снимает только lockScroll()/unlockScroll() в main.js (счётчик вложенности), потребители: мобильное меню и модалка заявки. Второй такой механизм заводить не нужно — иначе закрытие одного оверлея разблокирует фон под другим. Нативный скроллбар на лендинге спрятан -> без прыжка. */ body.scroll-locked { overflow: hidden; } /* Правило .ph (плейсхолдер реквизитов — токен-метка в пунктирной красной рамке) удалено: все реквизиты подставлены, незаполненных токенов на сайте и в юридических документах не осталось. Если когда-нибудь появится новый неподставленный реквизит — заводи метку заново вместе с правилом. */ /* Honeypot — поле-приманка для спам-ботов (по одному в каждой из трёх форм: квиз #calc, обратный звонок #contacts, модалка заявки). Прячем ИМЕННО так, а не display:none / visibility:hidden / type="hidden": часть ботов эти признаки распознаёт и поле пропускает, а увод за левый край выглядит для них как обычное видимое поле. Человека это поле не касается: за экраном, вне таб-порядка (tabindex="-1" в разметке), скрыто от скринридера (aria-hidden на обёртке), не ловит клики. Проверку заполненности делает общий слой заявок в js/main.js (модуль 0). left — отрицательный: справа/снизу появился бы горизонтальный скролл. */ .form-trap { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Buttons ------------------------------------------------------------- */ .btn { --btn-bg: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; padding: .95em 1.6em; border: 1px solid transparent; border-radius: 3px; background: var(--btn-bg); white-space: nowrap; transition: transform .3s var(--ease-out), background-color .25s ease, border-color .25s ease, box-shadow .3s ease; } .btn--primary { --btn-bg: var(--red); color: var(--white); box-shadow: 0 6px 18px -10px rgba(197, 0, 34, .8); } .btn--primary:hover { --btn-bg: var(--red-2); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(225, 14, 46, .65); } .btn--ghost { color: var(--white); border-color: var(--line); background: rgba(255, 255, 255, .02); } .btn--ghost:hover { border-color: var(--red); transform: translateY(-2px); } .btn__arrow { transition: transform .3s var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(4px); } /* --------------------------------------------------------------------- 4. HEADER --------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; /* backdrop-filter НАМЕРЕННО не анимируется: анимация блюра — самое дорогое, что есть у шапки, и она перезапускалась на каждом переключении .scrolled. Сам эффект остался (см. .scrolled ниже), появляется мгновенно. */ transition: background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } /* Permanent top scrim: keeps nav text (Контакты / phone) legible over the LIGHT, misty part of the hero photo BEFORE any scroll. Fades to transparent below the bar so it never reads as a hard band; on the dark left side it's invisible (dark-on-dark). The .scrolled solid bar supersedes it. */ .site-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 6, .88) 0%, rgba(5, 5, 6, .55) 46%, rgba(5, 5, 6, 0) 100%); transition: opacity .3s ease; } /* solid dark bg once scrolled past 40px (toggled from JS) */ .site-header.scrolled { background: rgba(11, 10, 12, .82); border-bottom-color: var(--line); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } .site-header.scrolled::before { opacity: 0; } /* solid bar takes over */ /* Телефоны/планшеты: НИКАКОГО backdrop-filter у шапки. Блюр под fixed-элементом заставляет браузер каждый кадр скролла заново снимать и размывать подложку во всю ширину экрана — на мобильных GPU это основной источник «дёрганого» скролла. Вместо полупрозрачности с блюром — непрозрачный фон секций: визуально шапка та же, стоимость нулевая. Десктоп (>900px) блюр сохраняет — см. правило выше. */ @media (max-width: 900px) { .site-header.scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } .site-header__inner { display: flex; align-items: center; gap: 2rem; height: var(--header-h); } .site-header__logo { flex: 0 0 auto; display: inline-flex; } .site-header__logo img { height: 38px; width: auto; } /* ~34–40px, keeps aspect */ /* nav sits between logo and actions */ .nav { margin-inline: auto; } .nav__list { display: flex; gap: clamp(0.9rem, 1.6vw, 1.7rem); } .nav__link { position: relative; font-size: .95rem; color: var(--muted); padding-block: .4rem; white-space: nowrap; /* each item stays on a single line */ transition: color .2s ease; } /* animated red underline on hover */ .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease-out); } .nav__link:hover { color: var(--white); } .nav__link:hover::after { transform: scaleX(1); } .site-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1.25rem; } /* small red diagonal accent tick */ .site-header__tick { width: 3px; height: 20px; background: var(--red); transform: skewX(-20deg); box-shadow: 0 0 12px -1px rgba(197, 0, 34, .8); } .site-header__phone { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: .01em; white-space: nowrap; transition: color .2s ease; } .site-header__phone:hover { color: var(--red-2); } /* Burger (hidden on desktop) ----------------------------------------- */ .burger { display: none; flex: 0 0 auto; margin-left: auto; /* pin to the right whenever it is shown */ width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--line); border-radius: 4px; } .burger span { display: block; height: 2px; width: 100%; margin-block: 4px; background: var(--white); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; } /* burger -> X when menu open */ body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu overlay ------------------------------------------------- */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2rem var(--gutter) 3rem; overflow-y: auto; /* фон заблокирован -> длинное меню скроллит себя само */ background: rgba(8, 7, 9, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); /* hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s ease, transform .35s var(--ease-out), visibility .3s; } body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-menu__nav { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; } .mobile-menu__link { font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: -.01em; padding: .55rem 0; border-bottom: 1px solid var(--line); transition: color .2s ease, padding-left .2s ease; } .mobile-menu__link:hover { color: var(--red-2); padding-left: .4rem; } .mobile-menu__footer { display: flex; flex-direction: column; gap: 1rem; } .mobile-menu__phone { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); } .mobile-menu .btn { width: 100%; } /* Оверлей начинается ровно под шапкой (inset: var(--header-h) ...) — там же, где стоит бегущая строка, и она просвечивала сквозь полупрозрачный фон меню. Гасим тикер на время меню: visibility (не display) не трогает поток, поэтому вёрстка под оверлеем не дёргается и --header-h ни при чём. */ body.menu-open .ticker { visibility: hidden; } /* --------------------------------------------------------------------- 4b. TICKER — бегущая строка Full-bleed dark strip that sits BELOW the fixed header (margin-top pushes it clear of the floating header). Content is duplicated in the markup, so a -50% translateX loops seamlessly. Edge fade masks + pause-on-hover. ЭТОТ ЖЕ КОМПОНЕНТ переиспользует шапка страницы stock.html (блок 10n): там он стоит внутри секции .stock, поэтому модификатор .ticker--inline снимает margin-top под fixed-шапку, а класс .anim-off на .stock ставит анимацию на паузу, пока строка за экраном. Правите разметку/классы тикера — проверьте обе страницы. --------------------------------------------------------------------- */ .ticker { margin-top: var(--header-h); /* sit below the fixed header */ position: relative; overflow: hidden; /* clip the marquee -> no horizontal page scroll */ background: var(--black); border-block: 1px solid var(--line); padding-block: .7rem; /* fade items into the edges */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: tickerScroll 38s linear infinite; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } /* content duplicated -> one full set */ } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__item { font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-inline: 1.1rem; } .ticker__item b { color: var(--white); font-weight: 600; } .ticker__sep { color: var(--red); font-size: .7rem; } /* Телефоны: маску снимаем. mask-image заставляет браузер держать для тикера ОТДЕЛЬНУЮ render-surface и композитить её каждый кадр бесконечной прокрутки строки. Затухание по краям делаем двумя псевдоэлементами — обычный градиент поверх непрозрачного фона выглядит так же (фон тикера = var(--black)), но рисуется бесплатно. Десктоп маску сохраняет. */ @media (max-width: 640px) { .ticker { -webkit-mask-image: none; mask-image: none; } .ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42px; z-index: 1; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, #050506, rgba(5, 5, 6, 0)); } .ticker::after { right: 0; background: linear-gradient(270deg, #050506, rgba(5, 5, 6, 0)); } } @media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } } /* --------------------------------------------------------------------- 5. HERO — layout --------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; /* svh, а НЕ dvh: dvh пересчитывается в реальном времени, пока схлопывается адресная строка мобильного браузера, — высота hero (а с ней и всего документа) плывёт прямо во время скролла и вызывает релэйаут при каждой смене направления. svh зафиксирован на «маленьком» вьюпорте и не меняется. */ min-height: 100svh; display: flex; align-items: center; /* header clearance is now provided by the ticker's margin-top above the hero, so the hero only needs a small breathing gap (avoids a double top offset) */ padding-top: clamp(0.9rem, 3vh, 2rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); background: var(--bg); overflow: hidden; /* clip glows / shards / parallax */ isolation: isolate; } /* Text lives in the normal flow (left column); the car is positioned absolutely over the hero so it can be large and low without stretching the section. .hero align-items:center keeps this block vertically centred. */ .hero__inner { position: relative; z-index: 4; /* text sits above the white plane (z2) */ width: 100%; } /* --------------------------------------------------------------------- 6. HERO — background layers (red/black liquid-marble over black) --------------------------------------------------------------------- */ .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* large soft red glow — kept on the DARK (left) side, behind the heading/CTA */ .hero__glow { position: absolute; left: 4%; /* shifted right so it drifts visibly under the text column */ bottom: -22%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle at center, rgba(197, 0, 34, .34) 0%, rgba(197, 0, 34, .15) 32%, rgba(197, 0, 34, 0) 62%); filter: blur(20px); /* slow ambient drift: rises up, off the top, reappears from the bottom, loops */ animation: heroGlowDrift 26s linear infinite; will-change: transform; } @keyframes heroGlowDrift { from { transform: translateY(65vh); } /* below its resting spot — entering from the bottom */ to { transform: translateY(-135vh); } /* drifted up and off the top of the screen */ } /* angular red "shards" via clip-path, low opacity */ /* will-change тут НЕ нужен: шарды статичны (ничего не анимируется), а слой под них браузер держал бы всё время жизни страницы. */ .hero__shard { position: absolute; background: linear-gradient(135deg, var(--red) 0%, rgba(197, 0, 34, 0) 80%); } .hero__shard--1 { top: -15%; left: 42%; width: 45vw; height: 130%; opacity: .10; clip-path: polygon(38% 0, 62% 0, 40% 100%, 16% 100%); filter: blur(6px); } .hero__shard--2 { top: -10%; right: -6%; width: 40vw; height: 120%; opacity: .07; clip-path: polygon(60% 0, 100% 0, 78% 100%, 40% 100%); filter: blur(8px); } /* faint grain / marble — tiled, tileable feTurbulence (desaturated), ~0.06 */ .hero__grain { position: absolute; inset: 0; opacity: .06; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* --------------------------------------------------------------------- 6b. HERO — photo Раньше здесь же жила диагональная белая «плоскость» (.hero__plane) и её контур (.hero__lines) — от них отказались, разметка и стили удалены (восстанавливаются из истории git). Осталось фото. --------------------------------------------------------------------- */ /* Photo of a real car — plain rectangle, vertically elongated, full section height, flush to the right edge (no gutter). Fixed shape (not derived from the photo's own aspect), so object-fit:cover crops to fill it — the portrait source (hero-photo-v2.jpg, 896:1200) suits this tall/narrow box: zero vertical crop (full roofline-to-wheels height always survives), and at width:40% the horizontal crop is light enough that BOTH mirrors, BOTH headlights, the badge and BOTH wheels all stay in frame — checked against 8 car-feature points across 375/901/1280/1440/1920/2560. Narrower widths would crop progressively more from the sides inward. */ .hero__photo { position: absolute; right: 0; top: 0; bottom: 0; width: 40%; border-left: 1px solid var(--line); /* same barely-visible treatment as .scroll-cue__line */ box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .5); /* lift off the dark background */ z-index: 3; overflow: hidden; pointer-events: none; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* --------------------------------------------------------------------- 7. HERO — content (text column) --------------------------------------------------------------------- */ .hero__content { position: relative; z-index: 2; max-width: clamp(19rem, 44vw, 38rem); } /* kicker with short red line */ .kicker { display: flex; align-items: center; gap: .8rem; font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(0.55rem, 1.4vh, 1.05rem); } .kicker__line { width: 34px; height: 2px; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 10px rgba(197, 0, 34, .7); } /* When the kicker is too narrow (mobile), let it break BETWEEN the two phrases only — each phrase stays whole, so "Без посредников" drops cleanly to line 2 instead of splitting mid-phrase. */ .kicker__seg { white-space: nowrap; } /* H1 — three mask-reveal lines */ .hero__title { font-family: var(--font-display); font-weight: 700; /* cap by BOTH width and height so long RU lines never wrap and the block stays short enough to keep the stats above the fold on ~768px viewports */ font-size: clamp(2.3rem, min(5.5vw, 11.5vh), 5rem); line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; } /* mask wrapper: clips the inner slide; padding+neg margin keeps glyphs uncut */ .line-mask { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; } /* без will-change: mask-reveal проигрывается ОДИН раз при загрузке, а слой висел бы вечно (три строки заголовка = три лишних композитных слоя) */ .line-inner { display: block; } .line-inner--red { color: var(--red); } /* red accent bar that wipes in under line 3 */ .hero__bar { display: block; width: clamp(120px, 17vw, 220px); height: 5px; margin-top: clamp(0.6rem, 1.4vh, 1rem); background: var(--red); border-radius: 2px; transform-origin: left center; box-shadow: 0 0 18px -2px rgba(197, 0, 34, .8); } .hero__sub { max-width: 46ch; margin-top: clamp(0.7rem, 1.7vh, 1.2rem); color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.6; text-wrap: pretty; /* avoids ugly single-word orphans when it wraps */ } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(0.9rem, 2vh, 1.5rem); } /* trust stats */ .stats { display: flex; flex-wrap: wrap; gap: clamp(1.1rem, 2.6vw, 2.2rem); margin-top: clamp(1rem, 2.4vh, 1.8rem); padding-top: clamp(0.9rem, 1.8vh, 1.4rem); border-top: 1px solid var(--line); } /* on phones force a clean, filled 2×2 (was 3 items → dangling empty cell) */ @media (max-width: 620px) { .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; } } .stat { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.01em; color: var(--white); } /* словесный стат («Проверка») — как .trust__metric-word в TRUST: чуть мельче цифр, потому что слово не переносится и в узкой колонке 1/4 вылезло бы за пределы ячейки. Цвет не меняем — в строке из 4 статов красный акцент перетянул бы на себя внимание. */ .stat__word { font-size: clamp(1.45rem, 2vw, 1.85rem); text-transform: uppercase; letter-spacing: 0; } .stat__label { font-size: .82rem; color: var(--muted); letter-spacing: .01em; } /* --------------------------------------------------------------------- 8. НОМЕР СВОБОДЕН (был «HERO — media»: PNG-авто + свечение + тень + параллакс от курсора, .hero__media / .hero__parallax / .hero__car*). Блок отключили ещё в вёрстке, теперь удалили вместе с JS-модулем 4; восстанавливается из истории git. Нумерацию соседей не сдвигали. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 9. SCROLL CUE --------------------------------------------------------------------- */ .scroll-cue { position: absolute; /* align with the container's content edge (dark side), clear of the plane */ left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: clamp(1.1rem, 3vh, 2rem); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; color: var(--muted); } .scroll-cue__line { position: relative; width: 1px; height: 46px; background: var(--line); overflow: hidden; } /* bright red segment travelling down the line */ .scroll-cue__line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--red-2); box-shadow: 0 0 8px var(--red-2); animation: cue-travel 1.9s var(--ease-out) infinite; } .scroll-cue__label { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; } @keyframes cue-travel { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(115px); opacity: 0; } } /* --------------------------------------------------------------------- 10. TRUST — metric counters + animated import route map --------------------------------------------------------------------- */ .trust { position: relative; padding-block: clamp(3.5rem, 9vh, 6.5rem); background: var(--bg); border-top: 1px solid var(--line); overflow: hidden; /* safety: clip any decorative bleed */ isolation: isolate; /* own stacking context for the decor layer */ } /* content sits above the decorative background */ .trust > .container { position: relative; z-index: 1; } /* --- decorative background (echoes the hero: drifting glow + red shards) --- */ .trust__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* slow floating red circle — drifts up the section and loops */ .trust__glow { position: absolute; left: 4%; bottom: -14%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; background: radial-gradient(circle at center, rgba(197, 0, 34, .22) 0%, rgba(197, 0, 34, .09) 34%, rgba(197, 0, 34, 0) 64%); filter: blur(26px); animation: trustGlowDrift 34s linear infinite; will-change: transform; } @keyframes trustGlowDrift { from { transform: translateY(55%); } /* low in the section */ to { transform: translateY(-210%); } /* drifts up and out, then loops */ } /* angular red shards (same treatment as the hero shards) */ .trust__shard { position: absolute; background: linear-gradient(135deg, var(--red) 0%, rgba(197, 0, 34, 0) 80%); filter: blur(8px); pointer-events: none; } .trust__shard--1 { top: -6%; right: 3%; width: 34vw; height: 78%; opacity: .07; clip-path: polygon(58% 0, 100% 0, 80% 100%, 40% 100%); } .trust__shard--2 { bottom: -8%; left: -5%; width: 30vw; height: 70%; opacity: .05; clip-path: polygon(40% 0, 64% 0, 42% 100%, 16% 100%); } /* eyebrow — same red-tick + spaced caps treatment as the hero kicker */ .trust__eyebrow { display: flex; align-items: center; gap: .8rem; font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); } .trust__eyebrow-line { width: 34px; height: 2px; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 10px rgba(197, 0, 34, .7); } /* --- Part A · counters ------------------------------------------------ */ .trust__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); padding-bottom: clamp(2.6rem, 6vh, 4.5rem); margin-bottom: clamp(2.6rem, 6vh, 4.5rem); border-bottom: 1px solid var(--line); } .trust__metric { display: flex; flex-direction: column; gap: .5rem; padding-left: 1rem; border-left: 2px solid var(--red); /* small red accent per palette */ } .trust__metric-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; /* stops width jitter while counting */ } /* word-based metric ("Договор") — a touch smaller so it aligns with the digits and never overflows its 1/4 grid cell; red accent to read as a guarantee. */ .trust__metric-word { font-size: clamp(1.6rem, 3.2vw, 2.5rem); text-transform: uppercase; letter-spacing: 0; color: var(--red-2); } .trust__metric-label { font-size: clamp(.82rem, 1.4vw, .95rem); color: var(--muted); letter-spacing: .01em; } /* --- Part B · map heading -------------------------------------------- */ .trust__map-head { margin-bottom: clamp(1.2rem, 3vh, 1.8rem); } .trust__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; color: var(--white); margin: 0; } .trust__lede { margin-top: .6rem; max-width: 46ch; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.1rem); } /* --- Part B · map panel (vector map, top crop + animated routes) --- */ .trust__map { position: relative; width: 100%; aspect-ratio: 2316 / 1400; /* top crop of the 2316x2292 vector map */ border: 1px solid var(--line); border-radius: 6px; overflow: hidden; isolation: isolate; background: var(--surface); } /* the vector map (image (5).svg) — transparent ocean over near-black; width fills the panel and it's top-aligned, so the panel shows the top crop (Russia + China/Korea/Japan + a little of India) where the routes live. */ .trust__map-img { position: absolute; inset: 0; z-index: 0; background: #0a0a0e url("../assets/map.svg") center top / 100% auto no-repeat; } /* gentle vignette: fade the far edges into the section, keep the routes clear */ .trust__map::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(150% 150% at 55% 44%, transparent 54%, rgba(11, 10, 12, .5) 100%); } .trust__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; } /* ROUTES — dashed red line, uncovered once by a mask (draw-on), then the dashes flow along it forever. The mask's white "reveal" stroke grows from the source to the city (stroke-dashoffset 100 -> 0), revealing the route. */ .trust__route { fill: none; stroke: var(--red-2); stroke-width: 1.2; /* thin, so many lines don't blob together */ vector-effect: non-scaling-stroke; /* constant px line at ANY map scale (mobile too) */ stroke-linecap: round; stroke-dasharray: 3.5 4.5; /* flowing dashes (screen px, non-scaling) */ /* drop-shadow УБРАН осознанно: на линии толщиной 1.2px свечение не читается, а SVG-фильтр на 22 путях заставляет перерисовывать всю карту каждый кадр. */ animation: trust-flow .9s linear infinite; animation-play-state: paused; /* wakes when the section is seen */ } @keyframes trust-flow { to { stroke-dashoffset: -8; } } /* one dash+gap period */ .trust__reveal { fill: none; stroke: #fff; stroke-width: 6; /* scales down with the map; kept wide enough to still cover the non-scaling route on phones */ stroke-linecap: round; stroke-dasharray: 100; /* pathLength=100 -> single full-length dash */ stroke-dashoffset: 100; /* start fully hidden */ animation: trust-draw 1.25s var(--ease-out) forwards; animation-delay: var(--dl, 0s); animation-play-state: paused; } @keyframes trust-draw { to { stroke-dashoffset: 0; } } /* destination dots — pop in as their route arrives */ .trust__dot { fill: var(--white); transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0); /* без drop-shadow (см. .trust__route): 17 точек x SVG-фильтр — та же перерисовка карты, а разницы на белой точке r=3.5 глазом не видно */ animation: trust-dot-in .5s var(--ease-out) forwards; animation-delay: var(--dl, 1.2s); animation-play-state: paused; } @keyframes trust-dot-in { to { opacity: 1; transform: scale(1); } } /* routes/dots wake up only once the MAP itself scrolls into view (JS adds .map-in via a separate IntersectionObserver on .trust__map) */ .trust.map-in .trust__route, .trust.map-in .trust__reveal, .trust.map-in .trust__dot { animation-play-state: running; } /* --- Part B · overlay (flags at sources + crisp city labels) ---------- */ .trust__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; } /* circular flag badge, centred on its source node */ .trust__flag { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px rgba(197, 0, 34, .30), 0 2px 8px rgba(0, 0, 0, .55); background: var(--surface); } .trust__flag img { width: 100%; height: 100%; object-fit: cover; display: block; } /* soft red pulse ring behind each flag */ .trust__flag::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--red-2); opacity: 0; } .trust.map-in .trust__flag::before { animation: trust-pulse 3s ease-out infinite; } @keyframes trust-pulse { 0% { transform: scale(.7); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } /* СТОП-КРАН для бесконечных анимаций карты. Класс .anim-off вешает JS (общий хелпер pauseWhenOffscreen в main.js), пока секция за экраном ИЛИ вкладка неактивна. Без него поток пунктира по 22 маршрутам и три пульсации флагов крутились всё время жизни страницы — браузер перерисовывал SVG-карту даже когда она в трёх экранах отсюда. Правило стоит ПОСЛЕ .trust.map-in ... (та же специфичность) — выигрывает порядком, поэтому его нельзя поднимать выше. Тормозим ТОЛЬКО бесконечные анимации: .trust__reveal / .trust__dot играют один раз (~2 с) и гаснут сами — их пауза дала бы только «полунарисованные» маршруты при быстром пролистывании. */ .trust.anim-off .trust__route, .trust.anim-off .trust__flag::before { animation-play-state: paused; } /* Текстовые подписи городов (.trust__city) с карты убраны — в разметке их больше нет, стили удалены. Названия городов несёт легенда под картой. */ /* --- Part B · legend (flags + per-country counts) -------------------- */ .trust__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; margin-top: clamp(1.1rem, 3vh, 1.7rem); font-size: clamp(.85rem, 1.3vw, .98rem); color: var(--muted); } .trust__legend-item { display: inline-flex; align-items: center; gap: .45em; color: var(--white); } .trust__legend-flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); } .trust__legend-item b { font-family: var(--font-display); font-weight: 700; color: var(--red-2); margin-left: .1em; font-variant-numeric: tabular-nums; } /* soft flash each time the live counter ticks */ .trust__legend-live { transition: color .3s ease, text-shadow .3s ease; } .trust__legend-live.is-tick { color: var(--white); text-shadow: 0 0 10px rgba(225, 14, 46, .7); } .trust__legend-sep { color: var(--line); } .trust__legend-arrow { color: var(--red-2); margin-inline: .1rem; font-weight: 700; } /* --- reveal on scroll (JS adds .is-visible via IntersectionObserver) -- */ .js .trust__eyebrow, .js .trust__metric, .js .trust__map-head, .js .trust__map, .js .trust__legend { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease-out); } .trust.is-visible .trust__eyebrow, .trust.is-visible .trust__metric, .trust.is-visible .trust__map-head, .trust.is-visible .trust__map, .trust.is-visible .trust__legend { opacity: 1; transform: none; } /* stagger: eyebrow -> the four metrics -> heading -> map -> legend */ .trust.is-visible .trust__eyebrow { transition-delay: .00s; } .trust.is-visible .trust__metric:nth-child(1){ transition-delay: .08s; } .trust.is-visible .trust__metric:nth-child(2){ transition-delay: .16s; } .trust.is-visible .trust__metric:nth-child(3){ transition-delay: .24s; } .trust.is-visible .trust__metric:nth-child(4){ transition-delay: .32s; } .trust.is-visible .trust__map-head { transition-delay: .30s; } .trust.is-visible .trust__map { transition-delay: .40s; } .trust.is-visible .trust__legend { transition-delay: .52s; } /* --------------------------------------------------------------------- 10b. HOW — process timeline (как мы работаем) Two columns on desktop (red car panel | 6-step timeline), stacks on mobile. Steps reveal staggered on scroll; the dashed connector fills red as they appear; badge line-icons draw on (stroke-dashoffset). Hidden pre-reveal states are gated behind html.js so no-JS users see it all. --------------------------------------------------------------------- */ .how { position: relative; padding-block: clamp(3.5rem, 9vh, 6.5rem); background: var(--bg); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; } /* --- decorative red glow + shard background (mirrors HERO / TRUST) --- */ .how__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .how > .container { position: relative; z-index: 1; } /* slow floating red circle — set to the RIGHT, drifts up and loops */ .how__glow { position: absolute; right: -6%; top: 20%; width: 48vw; height: 48vw; max-width: 660px; max-height: 660px; border-radius: 50%; background: radial-gradient(circle at center, rgba(197, 0, 34, .24) 0%, rgba(197, 0, 34, .10) 36%, rgba(197, 0, 34, 0) 66%); filter: blur(28px); animation: howGlowDrift 38s linear infinite; will-change: transform; } @keyframes howGlowDrift { from { transform: translateY(40%); } to { transform: translateY(-180%); } } /* angular red shards (same treatment as the hero / trust shards) */ .how__shard { position: absolute; background: linear-gradient(135deg, var(--red) 0%, rgba(197, 0, 34, 0) 80%); filter: blur(8px); pointer-events: none; } .how__shard--1 { top: -6%; right: 6%; width: 32vw; height: 74%; opacity: .07; clip-path: polygon(58% 0, 100% 0, 80% 100%, 40% 100%); } .how__shard--2 { bottom: -8%; left: -4%; width: 28vw; height: 66%; opacity: .05; clip-path: polygon(40% 0, 64% 0, 42% 100%, 16% 100%); } /* heading — same red-tick eyebrow + Oswald heading as TRUST (centred) */ .how__head { margin-bottom: clamp(2rem, 5vh, 3.4rem); text-align: center; } .how__eyebrow { display: flex; align-items: center; justify-content: center; gap: .8rem; font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(.9rem, 2vh, 1.3rem); } .how__eyebrow-line { width: 34px; height: 2px; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 10px rgba(197, 0, 34, .7); } .how__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; color: var(--white); margin: 0; } /* single centred column — the steps timeline (photo column removed) */ .how__grid { display: block; } /* --- timeline, centred on the page -------------------------------- */ .how__timeline { position: relative; max-width: 640px; margin-inline: auto; } .how__steps { display: flex; flex-direction: column; gap: clamp(1.6rem, 3.6vh, 2.5rem); } /* dashed connector running through the badge centres (badge = 56px, so its centre sits at 28px from the left) — echoes the dashed import routes */ .how__track { position: absolute; left: 26px; top: 28px; bottom: 28px; width: 4px; z-index: 0; display: block; overflow: visible; } /* svg fills the (correctly top/bottom-sized) track box — a bare positioned would collapse to its viewBox intrinsic height instead of stretching */ .how__flow-svg { display: block; width: 100%; height: 100%; overflow: visible; } .how__flow { fill: none; stroke: var(--red-2); stroke-width: 4; stroke-dasharray: 18 16; stroke-linecap: butt; animation: howFlow 1.1s linear infinite; } /* progressive reveal: clip the line to the revealed fraction (JS sets --how-progress 0->1); full line when no JS */ .js .how__track { clip-path: inset(0 0 calc((1 - var(--how-progress, 0)) * 100%) 0); transition: clip-path .6s var(--ease-out); } /* dashes flow downward one full cycle (18+16 = 34), looping seamlessly */ @keyframes howFlow { to { stroke-dashoffset: -34; } } /* та же пауза, что у карты в TRUST: класс .anim-off вешает JS, пока секция за экраном или вкладка неактивна (хелпер pauseWhenOffscreen в main.js) */ .how.anim-off .how__flow { animation-play-state: paused; } /* a step row: circular icon badge + text block */ .how__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; } .how__badge { position: relative; z-index: 1; width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--red); background: rgba(197, 0, 34, .10); color: var(--white); } .how__icon { width: 26px; height: 26px; display: block; overflow: visible; } .how__index { display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; color: var(--red-2); } .how__step-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; color: var(--white); margin: .15rem 0 .4rem; } .how__step-desc { color: var(--muted); font-size: clamp(.95rem, 1.1vw, 1.02rem); line-height: 1.6; max-width: 46ch; text-wrap: pretty; } /* работает и на , и на

остаётся в потоке (места он не занимает — соседей сдвигает только gap). */ .auctions__count { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(.95rem, 1.6vw, 1.08rem); letter-spacing: .02em; color: var(--white); } .auctions__count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: 0 0 auto; box-shadow: 0 0 10px rgba(197, 0, 34, .7); } .auctions__count:empty::before { content: none; } /* «Ищем лоты…» / «Ничего не найдено» — тот же слот, но приглушённо */ .auctions__count--muted { color: var(--muted); font-weight: 500; } .auctions__stale { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--muted); font-size: .78rem; } .auctions__stale::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: 0 0 auto; } .auctions__stale[hidden] { display: none; } /* ЗДЕСЬ БЫЛА .auctions__pricenote — оговорка «цена в валюте страны, без доставки, таможни и комиссии» справа в статус-панели. Удалена по требованию заказчика вместе с разметкой. Не возвращать. (Ровно так же раньше убрали .stock__pricenote на stock.html.) */ /* Оговорка про оферту — под витриной. Приглушённый тон подписи, по центру, потому что закрывает всю выдачу, а не отдельную карточку. Это ДРУГОЙ текст, не удалённая .auctions__pricenote. Видна во всех состояниях. */ .auctions__offernote { margin: clamp(1rem, 2.4vh, 1.5rem) auto 0; max-width: 68ch; text-align: center; color: var(--muted); font-size: .78rem; line-height: 1.5; text-wrap: pretty; } /* --- сетка лотов: без своего скролла, число колонок задано явно --- */ .auctions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.6rem); } .auctions__grid:empty { display: none; } /* Пульсация на ВРЕМЯ ЗАГРУЗКИ. Одна анимация на всю сетку, а не по одной на каждый скелетон — бюджет бесконечных анимаций в проекте жёсткий (см. блок 12b, там она вдобавок выключена на телефоне). */ .auctions__grid--loading { animation: auctionsSkeletonPulse 1.5s ease-in-out infinite; } @keyframes auctionsSkeletonPulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } } /* --- a lot card --- */ .lot { position: relative; /* якорь для растянутого .lot__open::after */ display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; transition: border-color .2s ease, transform .2s var(--ease-out); } .lot:hover { border-color: rgba(197, 0, 34, .55); transform: translateY(-2px); } .lot__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 12%, rgba(197, 0, 34, .10) 0%, rgba(197, 0, 34, 0) 60%), linear-gradient(160deg, #17151a 0%, #0d0c0f 100%); border-bottom: 1px solid var(--line); color: rgba(255, 255, 255, .28); overflow: hidden; } .lot__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .lot__photo[hidden] { display: none; } /* подпись под пустым местом фото: видна, только пока фото нет */ .lot__nophoto { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .22); } .lot__nophoto[hidden] { display: none; } .lot__flag { position: absolute; top: 8px; left: 8px; line-height: 0; z-index: 1; } .lot__flag[hidden] { display: none; } .lot__flag img { width: 26px; height: 19px; border-radius: 3px; display: block; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } /* красная пилюля справа сверху: теперь это аукционная оценка (только Япония) */ .lot__badge { position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; padding: .18em .5em; border-radius: 999px; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .12em; } .lot__badge[hidden] { display: none; } /* САНКЦИОННЫЙ АВТОМОБИЛЬ — та же пилюля, но КОНТУРНАЯ и в нижнем левом углу медиа: с красной оценкой (верх справа) и флагом (верх слева) не пересекается ни при каких данных. Заливки нет намеренно — это факт о лоте, а не предупреждение; красный на сайте означает акцент, и отдавать его сюда нельзя. Палитра прежняя: чёрный фон + белый контур и текст. */ .lot__badge--sanction { top: auto; right: auto; bottom: 8px; left: 8px; background: rgba(5, 5, 6, .78); border: 1px solid rgba(255, 255, 255, .55); color: var(--white); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; max-width: calc(100% - 16px); } .lot__body { flex: 1 1 auto; padding: .8rem .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; } .lot__title { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; line-height: 1.1; letter-spacing: -.01em; color: var(--white); margin: 0; } /* ОТКРЫТЬ ПОДРОБНУЮ КАРТОЧКУ (

). Настоящая