/* ============================================================ Полировка кузова — Summit Motors Vladivostok. Макет v2. Направление B «Плакат» с тёмным первым экраном и бликом по лаку. Шрифты только локальные (fonts/), без CDN. Без JS страница читается целиком: всё скрытие навешивается только через класс .js на . ============================================================ */ /* ---------- Шрифты: Oswald + Onest, OFL, из fonts/ ---------- */ @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/oswald-cyrillic-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/oswald-cyrillic-ext-wght-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;} @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/oswald-cyrillic-wght-normal.woff2') format('woff2-variations'),url('../fonts/oswald-cyrillic-wght-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/oswald-latin-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/oswald-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/oswald-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/oswald-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-cyrillic-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/onest-cyrillic-ext-wght-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-cyrillic-wght-normal.woff2') format('woff2-variations'),url('../fonts/onest-cyrillic-wght-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-latin-ext-wght-normal.woff2') format('woff2-variations'),url('../fonts/onest-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/onest-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ---------- Токены ---------- */ :root { --paper: #ffffff; --tint: #f1f3f5; --ink: #000000; --ink-soft: #1c1e22; --red: #b5122e; --red-hover: #960f26; --grey: #5f646c; --grey-on-black: #b3b8c0; --line: #e4e6ea; --line-dark: #2a2c31; --ok: #1e7a3d; --ok-bar: #2ea35a; --mid: #9a6905; --mid-bar: #e2a41f; --no: #b5122e; --no-bar: #d8203f; --todo: #ffe600; --display: "Oswald", "Arial Narrow", Impact, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --text: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --wrap: 1320px; --gutter: clamp(1.1rem, 4vw, 3.5rem); --header-h: 60px; --section: clamp(3.5rem, 8vw, 7rem); --ease: cubic-bezier(.2, .7, .2, 1); } @media (min-width: 1024px) { :root { --header-h: 72px; } } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + .5rem); } body { margin: 0; font-family: var(--text); font-size: 1.0625rem; line-height: 1.5; color: var(--ink); background: var(--paper); overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: .96; text-transform: uppercase; letter-spacing: .005em; } h2 { font-size: clamp(2.2rem, 5.6vw, 5.2rem); letter-spacing: -.005em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } address { font-style: normal; } .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } .icon { width: 1.35rem; height: 1.35rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; } .intro { margin-top: 1rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--grey); max-width: 52ch; } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .on-black :focus-visible { outline-color: #fff; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 1rem; } .anchor-top { position: absolute; top: 0; } .todo-fact { background: var(--todo); color: #000; padding: .1em .35em; font-weight: 600; border-radius: 2px; } /* ---------- Кнопки: прямоугольные, плакатные ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: .8rem 1.4rem; border-radius: 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--red); color: #fff; border-color: var(--red); } .btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); } .btn-black { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-black:hover { background: #fff; color: var(--ink); } .btn-white { background: #fff; color: var(--red); border-color: #fff; } .btn-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--ink); color: #fff; } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn .icon { width: 1.25rem; height: 1.25rem; } .text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; } .text-link:hover { text-decoration-color: transparent; } /* ---------- Шапка: белая, логотип только на белом ---------- */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 2px solid var(--ink); } .header-row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .logo { display: block; flex: none; } .logo img { width: 132px; height: auto; } .site-nav { display: none; } .header-phone { margin-left: auto; text-decoration: none; text-align: right; line-height: 1.1; } .header-phone strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: .02em; white-space: nowrap; } .header-phone small { display: none; color: var(--grey); font-size: .8rem; } @media (min-width: 1024px) { .logo img { width: 176px; } .site-nav { display: flex; gap: clamp(1rem, 2vw, 1.8rem); margin-left: 1.5rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; } .site-nav a { text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; } .site-nav a:hover { border-bottom-color: var(--red); } .header-phone strong { font-size: 1.35rem; } .header-phone small { display: block; } } /* ---------- 1. Первый экран: плакат на чёрном ---------- */ .hero { background: var(--ink); color: #fff; min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; } .hero-title { padding: clamp(.8rem, 2vh, 1.6rem) 0 clamp(.6rem, 1.6vh, 1.2rem); } .h1-big { display: block; font-size: clamp(3.9rem, 17vw, 4.6rem); line-height: .9; letter-spacing: -.005em; } .h1-small { display: block; margin-top: .35rem; font-size: clamp(1.15rem, 5.4vw, 1.5rem); font-weight: 500; letter-spacing: .04em; color: var(--grey-on-black); } /* маска для подъёма слов: запас сверху и снизу, чтобы не срезать Й, Ё и хвосты Д, Ц, Щ */ .h1-big .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .14em 0 .12em; margin: -.14em 0 -.12em; } .h1-big .w > span { display: inline-block; } .hero-row { display: grid; grid-template-columns: 1fr; flex: 1 1 auto; } /* Плита — контейнер: цена считается от её ширины, а не от окна (см. .price) */ .hero-plate { background: var(--red); color: #fff; padding: clamp(1.2rem, 3vw, 2.6rem) var(--gutter) clamp(1.3rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; position: relative; container-type: inline-size; } .price-row { display: flex; align-items: flex-start; gap: .5rem; } .price-from { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.8rem); text-transform: uppercase; padding-top: .5em; } /* «15 000 ₽» в Oswald 700 занимает ~3,55 em; делим ширину контента плиты (минус «от» и зазор) на 3,8 — запас ~7% */ .price { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 18.5vw, 5.6rem); line-height: .86; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } @supports (font-size: 1cqw) { .price { font-size: clamp(3.4rem, (100cqw - 2.8rem) / 3.95, 5.6rem); } /* 100cqw — ширина контента плиты */ } .price-time { display: block; margin-top: .55rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 3rem); text-transform: uppercase; letter-spacing: .02em; line-height: 1; } .hero-claim { margin-top: clamp(.8rem, 1.8vh, 1.4rem); font-size: clamp(1.05rem, 1.4vw, 1.3rem); max-width: 32ch; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: clamp(1rem, 2.4vh, 1.6rem); } .hero-note { margin-top: 1.2rem; font-size: .9rem; opacity: .92; max-width: 42ch; } /* Кадр: чёрное поле с воздухом по краям, вшитые «ДО» и «ПОСЛЕ» целиком */ .hero-media { margin: 0; position: relative; background: var(--ink); overflow: hidden; padding: .6rem 3.5% 0; } .hero-media img { width: 100%; height: auto; aspect-ratio: 1080 / 691; object-fit: cover; object-position: 50% 0; display: block; } /* края кадра уходят в чёрное поле: чёрные градиенты, без масок */ .hero-media::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 28%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 8%), linear-gradient(to left, #000 0%, rgba(0,0,0,0) 8%); } /* Блик по лаку — диагональная светлая полоса; один проход при загрузке, потом на десктопе идёт за курсором */ .hero-media::after { content: ""; position: absolute; top: -12%; bottom: -12%; left: 0; width: 42%; pointer-events: none; z-index: 3; mix-blend-mode: screen; background: linear-gradient(104deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.62) 50%, rgba(255,255,255,0) 64%); transform: translateX(-140%); } .js .hero-media::after { animation: gloss 1.5s 1.1s var(--ease) 1 forwards; } .js .hero-media.is-live::after { animation: none; transform: translateX(calc(-50% + var(--gx, .5) * 238%)); transition: transform .5s var(--ease); } @keyframes gloss { to { transform: translateX(300%); } } /* Пятно света вокруг курсора: отклик без задержки */ .hero-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(circle at calc(var(--gx, .5) * 100%) calc(var(--gy, .5) * 100%), rgba(255,255,255,.34) 0, rgba(255,255,255,.12) 18%, rgba(255,255,255,0) 38%); } .js .hero-media.is-live:hover .hero-shine { opacity: 1; } /* Варианты приглушения вшитых надписей «ДО» / «ПОСЛЕ» — переключаются классом на
*/ .hero--dim-top .hero-media::before { background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 18%, rgba(0,0,0,0) 40%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 28%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 8%), linear-gradient(to left, #000 0%, rgba(0,0,0,0) 8%); } .hero--vignette .hero-media img { filter: brightness(.86); } .hero--vignette .hero-media::before { background: radial-gradient(ellipse 58% 62% at 50% 64%, rgba(0,0,0,0) 38%, rgba(0,0,0,.86) 100%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 28%); } /* Кадрирование: верхняя полоса с надписями срезана (они занимают 19–33% высоты), показываются нижние 64% кадра */ .hero--crop .hero-media { padding-top: 0; } .hero--crop .hero-media img { aspect-ratio: 1080 / 440; object-position: 50% 100%; } /* Шторка «до/после»: включается скриптом, когда указаны data-before и data-after и оба файла загрузились */ .hero-media.is-compare { padding: .6rem 3.5% 0; cursor: ew-resize; } .hero-media.is-compare::before, .hero-media.is-compare::after, .hero-media.is-compare .hero-shine { display: none; } .cmp-stage { position: relative; overflow: hidden; } .cmp-stage img { width: 100%; height: auto; aspect-ratio: 1080 / 691; object-fit: cover; object-position: 50% 0; } .cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .cmp-before img { position: absolute; inset: 0; width: 100%; height: 100%; } .cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 2; } .cmp-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.5); } .cmp-arrows { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); z-index: 3; pointer-events: none; color: #000; display: flex; gap: 6px; font: 700 18px/1 var(--display); } .cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; touch-action: pan-y; } .cmp-range:focus-visible + .cmp-line { outline: 3px solid var(--red); outline-offset: 2px; } .cmp-tags { position: absolute; left: 0; right: 0; top: .8rem; display: flex; justify-content: space-between; padding: 0 1rem; z-index: 2; pointer-events: none; font: 600 clamp(.9rem, 1.4vw, 1.2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); } /* Появление первого экрана: только под .js, чистый CSS — не ждёт скрипта */ .js .h1-big .w > span { transform: translateY(125%); animation: rise .6s var(--ease) forwards; animation-delay: calc(60ms + var(--i, 0) * 90ms); } .js .h1-small, .js .hero-media { opacity: 0; animation: fade .7s var(--ease) forwards; animation-delay: .45s; } .js .hero-plate { transform: translateX(-100%); animation: slide-in .7s var(--ease) forwards; animation-delay: .3s; } .js .hero-plate > * { opacity: 0; transform: translateY(12px); animation: fade-up .6s var(--ease) forwards; } .js .hero-plate > :nth-child(1) { animation-delay: .6s; } .js .hero-plate > :nth-child(2) { animation-delay: .7s; } .js .hero-plate > :nth-child(3) { animation-delay: .8s; } .js .hero-plate > :nth-child(4) { animation-delay: .9s; } .js .hero-plate > :nth-child(5) { animation-delay: 1s; } @keyframes rise { to { transform: none; } } @keyframes fade { to { opacity: 1; } } @keyframes fade-up { to { opacity: 1; transform: none; } } @keyframes slide-in { to { transform: none; } } @media (min-width: 1024px) { .hero-title { padding-top: clamp(1rem, 3vh, 2rem); } .h1-big { font-size: clamp(4.6rem, 10.3vw, 9.2rem); } /* 9.2rem — «ПОЛИРОВКА КУЗОВА» в одну строку внутри .wrap */ .h1-small { font-size: clamp(1.4rem, 2.4vw, 2.4rem); margin-top: .2rem; } /* плита: от левого края окна до 40% контейнера страницы; её контент выровнен по .wrap и не сжимается на широких экранах */ .hero-row { grid-template-columns: clamp(40vw, (100vw - var(--wrap)) / 2 + var(--wrap) * .4, 44vw) minmax(0, 1fr); } .hero-plate { padding-left: max(var(--gutter), (100vw - var(--wrap)) / 2); } .price { font-size: clamp(4.6rem, 7.2vw, 7.3rem); } @supports (font-size: 1cqw) { .price { font-size: clamp(4rem, (100cqw - 2.8rem) / 3.95, 9.5rem); } } /* кадр не обрезается: высота идёт от его пропорций, лишнее — чёрное поле сверху и снизу */ .hero-media { padding: 0 max(3vw, (100vw - var(--wrap)) / 4) 0 1.5vw; display: flex; align-items: center; } .hero-media img { width: 100%; height: auto; aspect-ratio: 1080 / 691; max-width: 1080px; } .hero-media.is-compare .cmp-stage { width: 100%; max-width: 1080px; } .hero-media::before { background: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 7%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 14%), linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 8%); } .hero--dim-top .hero-media::before { background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, rgba(0,0,0,.55) 16%, rgba(0,0,0,0) 38%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 7%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 14%); } .hero--vignette .hero-media::before { background: radial-gradient(ellipse 56% 64% at 50% 66%, rgba(0,0,0,0) 38%, rgba(0,0,0,.88) 100%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 7%); } .hero--crop .hero-media img { aspect-ratio: 1080 / 440; object-position: 50% 100%; } } /* ---------- Заголовки секций: появление через маску ---------- */ .h2-mask { overflow: hidden; padding: .12em 0 .1em; margin: -.12em 0 -.1em; } .h2-mask > span { display: block; } .js .h2-mask > span { transform: translateY(104%); transition: transform .7s var(--ease); } .js .h2-mask.is-visible > span, .js .is-visible .h2-mask > span { transform: none; } /* ---------- 2. Паутинка: свет проходит по панели один раз ---------- Взаимодействия нет: одинаково на телефоне и на компьютере. Тёмная вуаль уезжает вправо, за её краем идёт светлая полоса; после прохода кадр остаётся освещённым и резким — назад в тусклое состояние не возвращается. */ .lamp { background: var(--ink); color: #fff; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .lamp-head { padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(1.2rem, 2.6vw, 1.8rem); display: grid; gap: .8rem; } .lamp-tag { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .4rem .75rem .35rem; background: var(--ok-bar); color: #000; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.05; } .lamp-tag .icon { width: 1.15em; height: 1.15em; stroke-width: 2.6; } .lamp-head h2 { font-size: clamp(1.9rem, 4.4vw, 3.8rem); max-width: 22ch; } .lamp-lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 52ch; color: var(--grey-on-black); } .lamp-stage { position: relative; width: 100%; aspect-ratio: 1280 / 696; max-height: 78svh; overflow: hidden; background: #000; } .lamp-shot { position: absolute; inset: 0; filter: contrast(1.38) brightness(1.05) saturate(.85); } .lamp-shot img { width: 100%; height: 100%; object-fit: cover; filter: url(#pautinka-sharp-sm); } @media (min-width: 768px) { .lamp-shot img { filter: url(#pautinka-sharp); } } /* Без JS кадр сразу освещён: вуали и полосы просто нет */ .lamp-veil, .lamp-beam { display: none; } .js .lamp-veil { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 250%; background: linear-gradient(100deg, rgba(0,0,0,0) 0 36%, rgba(0,0,0,.86) 40% 100%); transform: translateX(-44%); will-change: transform; } .js .lamp-beam { display: block; position: absolute; top: -8%; bottom: -8%; left: 0; width: 30%; opacity: 0; mix-blend-mode: screen; will-change: transform; background: linear-gradient(100deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.3) 38%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.3) 62%, rgba(255,255,255,0) 82%); } .js .lamp-stage.is-visible .lamp-veil { animation: lamp-wipe 2.4s linear forwards; } .js .lamp-stage.is-visible .lamp-beam { animation: lamp-sweep 2.4s linear forwards, lamp-glow 2.4s linear forwards; } @keyframes lamp-wipe { from { transform: translateX(-44%); } to { transform: translateX(8%); } } @keyframes lamp-sweep { from { transform: translateX(-100%); } to { transform: translateX(333.333%); } } @keyframes lamp-glow { 0% { opacity: 0; } 7% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } } .lamp-foot { padding: clamp(1.4rem, 3vw, 2.2rem) 0 0; display: grid; gap: 1.4rem; } .lamp-check { display: flex; gap: .8rem; align-items: flex-start; max-width: 62ch; font-size: clamp(1rem, 1.35vw, 1.15rem); color: var(--grey-on-black); } .lamp-check strong { color: #fff; font-weight: 600; } .lamp-check .icon { color: var(--ok-bar); margin-top: .15rem; } /* Переход к трём уровням: полоса во всю ширину на стыке чёрного и белого блоков */ .lamp-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 0 1.2rem; border-top: 1px solid var(--line-dark); text-decoration: none; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.15; } .lamp-next span { max-width: 40ch; } .lamp-next .icon { width: 1.6rem; height: 1.6rem; flex: none; color: var(--red); transition: transform .3s var(--ease); } .lamp-next:hover { color: #fff; } .lamp-next:hover .icon { transform: translateY(4px); } @media (min-width: 900px) { .lamp-foot { grid-template-columns: minmax(0, 1fr); } } /* ---------- 3. Три уровня + разрез: самый заметный блок ---------- */ .levels { background: var(--paper); padding: var(--section) 0 clamp(3rem, 6vw, 5rem); } .levels h2 { font-size: clamp(2.6rem, 7.2vw, 7rem); max-width: 24ch; } .levels h2 em { font-style: normal; color: var(--red); } .levels-grid { display: grid; gap: 2.5rem; margin-top: clamp(1.8rem, 4vw, 3.5rem); } @media (min-width: 1024px) { .levels-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .cut { position: sticky; top: calc(var(--header-h) + 1.5rem); } } .level-list { border-top: 2px solid var(--ink); } .level { display: grid; gap: .8rem; padding: 1.3rem 0 1.5rem; border-bottom: 1px solid var(--line); } .level-tag { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .8rem .4rem; background: var(--bar); color: #000; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.15rem, 1.9vw, 1.7rem); line-height: 1.05; justify-self: start; max-width: 100%; transform-origin: left; } .level-tag .icon { width: 1.2em; height: 1.2em; stroke-width: 2.6; } .level-ok .level-tag { --bar: var(--ok-bar); } .level-mid .level-tag { --bar: var(--mid-bar); } .level-no .level-tag { --bar: var(--no-bar); color: #fff; } .level p { font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.25; font-weight: 500; max-width: 26ch; } .js .level-tag { transform: scaleX(0); transition: transform .7s var(--ease); } .js .level-tag > * { opacity: 0; transition: opacity .3s var(--ease) .35s; } .js .level-list.is-visible .level-tag { transform: none; } .js .level-list.is-visible .level-tag > * { opacity: 1; } .js .level-list.is-visible .level:nth-child(2) .level-tag { transition-delay: .15s; } .js .level-list.is-visible .level:nth-child(3) .level-tag { transition-delay: .3s; } .js .level-list.is-visible .level:nth-child(2) .level-tag > * { transition-delay: .5s; } .js .level-list.is-visible .level:nth-child(3) .level-tag > * { transition-delay: .65s; } .cut { margin: 0; } .cut-svg { width: 100%; height: auto; font-family: var(--text); } .cut-note { font-size: 15px; font-weight: 600; fill: var(--ink); } .cut-lead { stroke: var(--grey); stroke-width: 1.5; } .cut-label { font-size: 18px; font-weight: 700; fill: #14161a; } .cut-label-light { fill: #ffffff; } .cut-verdict { font-size: 16px; font-weight: 800; } .cut figcaption { margin-top: .8rem; color: var(--grey); font-size: .92rem; } @media (max-width: 639px) { .cut-note { font-size: 18px; } .cut-label { font-size: 23px; } .cut-verdict { font-size: 20px; } .cut-lead { stroke-width: 2; } } .js .cut-layer { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .cut-defect { opacity: 0; transition: opacity .5s var(--ease); } .js .cut.is-visible .cut-layer, .js .cut.is-visible .cut-defect { opacity: 1; transform: none; } .js .cut.is-visible .cut-layer-2 { transition-delay: .14s; } .js .cut.is-visible .cut-layer-3 { transition-delay: .28s; } .js .cut.is-visible .cut-layer-4 { transition-delay: .42s; } .js .cut.is-visible .cut-defect-1 { transition-delay: .7s; } .js .cut.is-visible .cut-defect-2 { transition-delay: .9s; } .js .cut.is-visible .cut-defect-3 { transition-delay: 1.1s; } /* Врезка про осмотр: малиновая плита во всю ширину */ .callout { background: var(--red); color: #fff; padding: clamp(2rem, 5vw, 4rem) 0; } .callout-row { display: grid; gap: 1.4rem; align-items: center; } .callout h2 { font-size: clamp(1.7rem, 3.6vw, 3.1rem); max-width: 26ch; } .callout p { margin-top: .8rem; font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 50ch; } @media (min-width: 900px) { .callout-row { grid-template-columns: 1fr auto; gap: 3rem; } } /* Общее появление блоков */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- 4. Что входит: бегущая строка + четыре пункта ---------- */ .sostav { background: var(--tint); padding-bottom: var(--section); } .marquee { background: var(--ink); color: #fff; overflow: hidden; } .marquee-track { display: flex; width: max-content; } .marquee-list { display: flex; align-items: center; padding: .75rem 0; } .marquee-list li { display: flex; align-items: center; gap: 1.2rem; padding-right: 1.2rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.45rem); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .marquee-list li::after { content: ""; width: .55em; height: .55em; background: var(--red); flex: none; } .js .marquee-track { animation: marquee 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .sostav .wrap { padding-top: var(--section); } .sostav h2 { max-width: 24ch; } .includes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(1.6rem, 4vw, 3rem); } .includes li { position: relative; background: var(--paper); padding: 1.4rem 1.3rem 1.5rem; display: grid; gap: .9rem; align-content: start; } .includes .icon { width: 2.6rem; height: 2.6rem; color: var(--red); stroke-width: 1.8; } .inc-n { position: absolute; top: 1rem; right: 1.1rem; font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--line); line-height: 1; } .inc-t { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.1; } @media (min-width: 640px) { .includes { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .includes { grid-template-columns: repeat(4, 1fr); } .includes li { padding: 1.8rem 1.6rem 2rem; } } .js .icon-draw path, .js .icon-draw circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease); } .js .includes.is-visible .icon-draw path, .js .includes.is-visible .icon-draw circle { stroke-dashoffset: 0; } .js .includes.is-visible li:nth-child(2) .icon-draw * { transition-delay: .15s; } .js .includes.is-visible li:nth-child(3) .icon-draw * { transition-delay: .3s; } .js .includes.is-visible li:nth-child(4) .icon-draw * { transition-delay: .45s; } .sostav-note { margin-top: 1.4rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); } /* ---------- 5. Цены ---------- */ .prices { background: var(--paper); padding: var(--section) 0; } .price-grid { display: grid; gap: 1rem; margin-top: clamp(1.6rem, 4vw, 3rem); } .price-card { position: relative; overflow: hidden; border: 2px solid var(--ink); padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; background: var(--paper); } .price-card h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); } .card-price { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .card-time { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--grey); } .card-time .icon { width: 1.15rem; height: 1.15rem; } .card-text { flex: 1 1 auto; color: var(--ink-soft); } .price-card .btn { margin-top: .6rem; align-self: flex-start; } .price-card.featured { background: var(--ink); color: #fff; border-color: var(--ink); } .price-card.featured .card-time { color: var(--grey-on-black); } .price-card.featured .card-text { color: #fff; } .card-flag { position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; padding: .35rem .7rem .3rem; } .prices-note { margin-top: 1.4rem; color: var(--grey); } @media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; } .price-card.featured { transform: translateY(-.6rem); } } .js .price-grid .price-card { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .price-grid.is-visible .price-card { opacity: 1; transform: none; } .js .price-grid.is-visible .price-card:nth-child(2) { transition-delay: .12s; } .js .price-grid.is-visible .price-card:nth-child(3) { transition-delay: .24s; } @media (min-width: 900px) { .js .price-grid.is-visible .price-card.featured { transform: translateY(-.6rem); } } /* рекомендуемая карточка один раз подсвечивается после появления */ .price-card.featured::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 65%); transform: translateX(-120%); } .js .price-grid.is-visible .price-card.featured::after { animation: gloss-card .9s .8s var(--ease) 1 forwards; } @keyframes gloss-card { to { transform: translateX(120%); } } /* ---------- 6. Как идёт работа ---------- */ .work { background: var(--tint); padding: var(--section) 0; } .work-lead { display: grid; gap: .6rem; margin-top: 1rem; max-width: 60ch; } .work-grid { display: grid; gap: 1.2rem; margin-top: clamp(1.6rem, 4vw, 3rem); } .work-photo { margin: 0; } .ken { overflow: hidden; background: #000; } .ken img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; } .work-photo.tall .ken { aspect-ratio: 854 / 1280; } .work-photo:not(.tall) .ken { aspect-ratio: 1280 / 705; } .work-photo figcaption, .contact-photo figcaption { margin-top: .6rem; color: var(--grey); font-size: .92rem; } @media (min-width: 900px) { .work-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: 1.4rem 1.6rem; } .work-photo.tall { grid-row: 1 / span 2; } .work-photo.tall .ken { height: calc(100% - 2rem); aspect-ratio: auto; min-height: 520px; } } /* Кен Бёрнс при появлении + лёгкий параллакс по прокрутке (JS двигает --py) */ .js .ken img { transform: scale(1.08) translateY(var(--py, 0px)); transition: transform 1.2s var(--ease); } .js .is-visible .ken img, .js .work-photo.is-visible .ken img { transform: scale(1.02) translateY(var(--py, 0px)); } .why { margin-top: clamp(2.4rem, 5vw, 4rem); border-top: 2px solid var(--ink); padding-top: 1.6rem; } .why h3 { font-size: clamp(1.7rem, 3.2vw, 3rem); } .why-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 1.2rem; } .why-grid li { background: var(--paper); padding: 1.3rem 1.3rem 1.5rem; display: grid; gap: .6rem; align-content: start; border-top: 4px solid var(--red); } .why-grid strong { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.1; } .why-grid p { color: var(--ink-soft); font-size: 1rem; } @media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, 1fr); } .why-grid li { padding: 1.5rem 1.5rem 1.8rem; } } /* ---------- 7. Ролик ---------- */ .video { background: var(--ink); color: #fff; padding: var(--section) 0; } .video-row { display: grid; gap: 2rem; align-items: center; } .video-text { display: grid; gap: 1rem; } .video-text .lead { max-width: 40ch; } .video-note { color: var(--grey-on-black); font-size: .95rem; max-width: 44ch; } .video-frame { position: relative; width: min(380px, 100%); margin-inline: auto; aspect-ratio: 9 / 16; background: #000; border: 2px solid #fff; overflow: hidden; } .video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%); color: #fff; border: 0; cursor: pointer; font: inherit; padding: 0; width: 100%; } .video-play-btn { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--red); transition: transform .3s var(--ease), background-color .2s var(--ease); } .video-play-btn .icon { width: 2rem; height: 2rem; fill: #fff; stroke: none; margin-left: .2rem; } .video-play:hover .video-play-btn { transform: scale(1.06); background: var(--red-hover); } .video-play-label { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 1.3rem; } .video-frame.is-playing .video-play, .video-frame.is-auto .video-play { display: none; } /* кнопка звука: появляется, когда ролик идёт */ .video-controls { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 3; display: none; justify-content: center; gap: .5rem; padding: 0 .6rem; flex-wrap: wrap; } .video-frame.is-playing .video-controls, .video-frame.is-auto .video-controls { display: flex; } .video-sound { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem .9rem; border: 2px solid #fff; background: rgba(0,0,0,.6); color: #fff; font: 600 .98rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .video-sound .icon { width: 1.2rem; height: 1.2rem; } .video-sound:hover { background: #fff; color: #000; } .video-sound[aria-pressed="true"] { background: var(--red); border-color: var(--red); } .video-sound[aria-pressed="true"]:hover { background: var(--red-hover); border-color: var(--red-hover); color: #fff; } .video-status { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .7rem 1rem calc(.7rem + 2px); background: rgba(0,0,0,.85); color: #fff; font-size: .92rem; text-align: center; z-index: 4; } .video-status:empty { display: none; } @media (min-width: 900px) { .video-row { grid-template-columns: 1fr 380px; gap: clamp(2rem, 6vw, 6rem); } } /* ---------- 8. Как проходит запись ---------- */ .steps-section { background: var(--paper); padding: var(--section) 0; } .steps { display: grid; gap: 1px; background: var(--line); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: clamp(1.6rem, 4vw, 3rem); counter-reset: step; } .steps li { background: var(--paper); padding: 1.3rem 0 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: start; } .step-n { grid-row: 1 / span 2; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; color: var(--red); min-width: 2ch; } .steps h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); padding-top: .2rem; } .steps p { color: var(--ink-soft); } .steps a { font-weight: 600; } .steps-cta { margin-top: clamp(1.4rem, 3vw, 2.2rem); } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, 1fr); border-bottom: 0; } .steps li { grid-template-columns: 1fr; padding: 1.3rem 1.2rem 1.6rem 0; gap: .6rem; } .steps li + li { padding-left: 1.2rem; } .step-n { grid-row: auto; } } .js .steps li { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .steps.is-visible li { opacity: 1; transform: none; } .js .steps.is-visible li:nth-child(2) { transition-delay: .1s; } .js .steps.is-visible li:nth-child(3) { transition-delay: .2s; } .js .steps.is-visible li:nth-child(4) { transition-delay: .3s; } .js .steps.is-visible li:nth-child(5) { transition-delay: .4s; } /* ---------- 9. Вопросы ---------- */ .faq { background: var(--tint); padding: var(--section) 0; } .faq-row { display: grid; gap: 1.6rem; } @media (min-width: 1024px) { .faq-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: start; } } .faq-list { border-top: 2px solid var(--ink); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.15; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin-right: .3rem; transition: transform .3s var(--ease); } .faq-list details[open] summary::after { transform: rotate(225deg); margin-top: .4rem; } .faq-list details p { padding: 0 0 1.2rem; max-width: 64ch; color: var(--ink-soft); font-size: 1.05rem; } .faq-list details a { font-weight: 600; } /* ---------- 10. Контакты и форма ---------- */ .contacts { background: var(--paper); padding: var(--section) 0; } .contact-grid { display: grid; gap: 2rem; margin-top: clamp(1.6rem, 4vw, 3rem); } .contact-line { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid var(--line); } .contact-line:first-child { border-top: 2px solid var(--ink); } .contact-line .icon { color: var(--red); margin-top: .2rem; } .contact-line small { display: block; color: var(--grey); font-size: .9rem; } .contact-phone { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; text-decoration: none; letter-spacing: .01em; } .contact-phone-main { font-size: clamp(1.3rem, 2vw, 1.7rem); } .contact-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .contact-photo { margin: 0; } .contact-photo .ken { aspect-ratio: 1280 / 712; } @media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem; align-items: start; } } .lead-form { margin-top: clamp(2rem, 5vw, 3.5rem); border: 2px solid var(--ink); background: var(--tint); display: grid; } .form-head { padding: 1.4rem 1.4rem 0; display: grid; gap: .5rem; align-content: start; } .form-head h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); } .form-note { color: var(--ink-soft); font-size: .98rem; } .form-note a { font-weight: 600; } .form-fields { padding: 1.2rem 1.4rem 1.5rem; display: grid; gap: .9rem; } .lead-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; } .lead-form input[type="text"], .lead-form input[type="tel"] { font: inherit; font-size: 1.05rem; padding: .8rem .9rem; border: 2px solid var(--ink); border-radius: 0; background: #fff; min-height: 48px; } .lead-form input:focus-visible { outline-offset: 2px; } .lead-form .consent { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; } .lead-form .consent input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--red); flex: none; } .lead-form .consent a { font-weight: 600; } .form-status { font-size: 1rem; color: var(--ink); min-height: 1.4em; } .form-status a { font-weight: 700; } @media (min-width: 900px) { .lead-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .form-head { padding: 1.6rem 1.6rem 1.6rem; border-right: 2px solid var(--ink); } .form-fields { padding: 1.6rem; grid-template-columns: 1fr 1fr; } .form-fields label:nth-child(3), .form-fields .consent, .form-fields .form-status { grid-column: 1 / -1; } .form-fields .btn { grid-column: 1 / -1; justify-self: start; } } /* ---------- Подвал ---------- */ .site-footer { border-top: 2px solid var(--ink); padding: 2rem 0 2.2rem; color: var(--grey); font-size: .95rem; } .footer-row { display: grid; gap: 1rem; } .footer-row strong { color: var(--ink); } .footer-row a { text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--ink); letter-spacing: .02em; } @media (min-width: 768px) { .footer-row { grid-template-columns: 1fr 1fr auto; align-items: start; } .footer-row .copy { text-align: right; } } /* ---------- Закреплённая полоса на телефоне ---------- */ .sticky-call { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom)); background: #fff; color: var(--ink); border-top: 2px solid var(--ink); } .sticky-price { font-family: var(--display); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; line-height: 1; } .sticky-price small { display: block; margin-top: .25rem; font-family: var(--text); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--grey); } .sticky-call .btn { min-height: 46px; padding: .6rem 1rem; font-size: 1.1rem; white-space: nowrap; } .js .sticky-call { transform: translateY(110%); transition: transform .4s var(--ease); } .js .sticky-call.is-shown { transform: none; } @media (max-width: 860px) { body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); } } @media (min-width: 861px) { .sticky-call { display: none; } body { padding-bottom: 0; } } /* ---------- Движение выключено ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .h1-big .w > span, .js .h1-small, .js .hero-media, .js .hero-plate, .js .hero-plate > * { opacity: 1; transform: none; } .js .hero-media::after, .hero-shine { display: none; } .js .h2-mask > span, .js .level-tag, .js .level-tag > *, .js .cut-layer, .js .cut-defect, .js .reveal, .js .price-grid .price-card, .js .steps li { opacity: 1; transform: none; } .js .icon-draw path, .js .icon-draw circle { stroke-dashoffset: 0; } .js .ken img { transform: none; } .price-card.featured::after { display: none; } .js .lamp-veil, .js .lamp-beam { display: none; } /* кадр сразу в конечном состоянии */ .js .marquee-track { animation: none !important; } .js .sticky-call { transform: none; } }