@import url('../fonts/fonts.css'); /* ========================================================================== ZD Racing — дизайн-система v2. Значения взяты из макета Figma (файл O5MYdDahVctcUwhqGCZUDr, страница «design», 8 фреймов 1920 px). Сетка макета: контент 1840 px, поля 40 px, колонка 445 px, зазор 20 px. ========================================================================== */ :root { --black: #020202; --red: #e30613; --red-dark: #bf0510; --card: #1d1d1d; --card-2: #2f2f2f; --white: #ffffff; --muted: rgba(255, 255, 255, .64); --muted-2: rgba(255, 255, 255, .56); --hairline: rgba(255, 255, 255, .24); --grey-text: #6e6e6e; --grey-num: #a2a2a2; --grey-num-2: #dadada; --display: 'Druk Cyr', 'Oswald', 'Arial Narrow', Impact, sans-serif; --sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --gut: 40px; --content: 1840px; --col: 20px; /* зазор сетки */ } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--sans); font-size: clamp(16px, 1.04vw, 20px); line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; } html { max-width: 100%; overflow-x: hidden; } main { overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } /* ─────────────────────────── типографика ─────────────────────────── */ .d { /* Druk Condensed Cyr Super */ font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin: 0; word-break: normal; hyphens: none; } /* Подменный Oswald примерно на четверть шире Druk Condensed Super: при том же кегле строки перестают помещаться. Пока фирменного файла нет, класс no-druk на ужимает все заголовочные кегли. JS снимет класс, если Druk найдётся. */ :root { --ds: 1; } .no-druk { --ds: .82; } .h2 { font-size: calc(clamp(30px, 5vw, 96px) * var(--ds)); } .h2-s { font-size: calc(clamp(26px, 4.17vw, 80px) * var(--ds)); } .h3 { font-size: calc(clamp(24px, 2.92vw, 56px) * var(--ds)); } .h4 { font-size: calc(clamp(21px, 2.5vw, 48px) * var(--ds)); } .red { color: var(--red); } .lead { font-size: clamp(16px, 1.04vw, 20px); line-height: 1.4; } .small { font-size: clamp(15px, .94vw, 18px); line-height: 1.39; } .muted { color: var(--muted); } .muted-2{ color: var(--muted-2); } .cap { /* Onest 500/600 uppercase */ text-transform: uppercase; font-weight: 500; line-height: 1.2; } .cap-6 { text-transform: uppercase; font-weight: 600; } /* ─────────────────────────── каркас ─────────────────────────── */ .c { width: min(var(--content), 100% - var(--gut) * 2); margin-inline: auto; } .sec { padding-block: clamp(56px, 6.25vw, 120px); position: relative; } .sec--tight { padding-block: clamp(40px, 4vw, 76px); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col); } /* ─────────────────────────── кнопки ─────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 24px; font-weight: 600; font-size: clamp(16px, 1.04vw, 20px); text-transform: uppercase; letter-spacing: .01em; transition: background-color .18s ease, color .18s ease, transform .18s ease; } .btn:active { transform: translateY(1px); } .btn--red { background: var(--red); color: var(--white); } .btn--red:hover { background: var(--red-dark); } .btn--black { background: var(--black); color: var(--white); } .btn--black:hover { background: #1a1a1a; } .btn--white { background: var(--white); color: var(--black); } .btn--white:hover { background: #ededed; } .btn--wide { width: 100%; } /* ─────────────────────────── шапка ─────────────────────────── */ .head { position: absolute; z-index: 40; inset: 24px var(--gut) auto var(--gut); display: flex; align-items: center; gap: 24px; } .head__logo { width: 96px; flex: none; } .head__logo img { width: 100%; height: auto; } .head__nav { display: flex; gap: clamp(20px, 3.3vw, 64px); margin-inline: auto; font-size: clamp(13px, .94vw, 18px); text-transform: uppercase; } .head__nav a { opacity: .92; transition: opacity .15s, color .15s; } .head__nav a:hover { color: var(--red); opacity: 1; } .head__nav a[aria-current='page'] { color: var(--red); } .head__cta { flex: none; min-height: 56px; padding: 10px 24px; border: 1px solid var(--white); display: inline-flex; align-items: center; font-weight: 600; font-size: clamp(13px, .94vw, 18px); text-transform: uppercase; transition: background-color .18s, color .18s; } .head__cta:hover { background: var(--white); color: var(--black); } .head__burger { display: none; flex: none; width: 44px; height: 44px; } .head__burger span { display: block; height: 2px; background: var(--white); margin: 6px 8px; } /* ─────────────────────────── герой ─────────────────────────── */ .hero { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; padding: 5.2vw var(--gut) 3vw; min-height: 67.7vw; display: flex; flex-direction: column; } .hero__bg { position: absolute; inset: 2.6vw 0 auto 0; z-index: -3; } .hero__bg img { width: 100%; height: auto; } .hero__bg::after { /* затемнение к фону страницы снизу кадра */ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%; background: linear-gradient(180deg, rgba(2,2,2,0), var(--black) 92%); } .hero::after { /* добивка тёмного низа секции */ content: ''; position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(180deg, rgba(2,2,2,0), var(--black)); pointer-events: none; } /* размер подбирается скриптом так, чтобы строка занимала всю ширину — как в макете */ .hero__title { font-size: calc(var(--fs, 19.95) * 1cqw); margin-bottom: clamp(16px, 1.7vw, 32px); white-space: nowrap; } .hero--center .hero__title { text-align: center; } @media (max-width: 760px) { .hero__title { white-space: normal; } } .hero__meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: clamp(18px, 1.67vw, 32px); line-height: 1.19; text-transform: uppercase; } .hero__place { display: inline-flex; align-items: center; gap: 12px; } .hero__place img { width: 40px; height: 40px; flex: none; } .hero__body { padding-top: 12vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 459px); gap: clamp(24px, 3vw, 60px); align-items: start; } .hero__lead { max-width: 540px; color: var(--muted); } .hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; } .hero__points { display: grid; gap: clamp(12px, 1.7vw, 32px); color: var(--muted); align-self: end; } /* красный квадратный маркер списка */ .mark { display: flex; gap: 14px; } .mark::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .55em; background: var(--red); } /* ─────────────────────────── светофор над заголовком ─────────────────────────── */ /* Светофор, точки трассы, флажок, шлемы и иконки — растровые фрагменты макета (assets/art/*.png), вырезанные из рендера Figma. Фон и обводка уже внутри картинки, поэтому здесь только габариты и положение. */ .lights { width: 131px; margin: 0 auto 12px; } .lights img { width: 131px; height: 40px; } .sec-head { text-align: center; margin-bottom: clamp(32px, 3.1vw, 60px); } .sec-head .h2 { max-width: 1100px; margin-inline: auto; } .sec-head p { max-width: 910px; margin: 24px auto 0; } .sec-head--left { text-align: left; } .sec-head--left .h2, .sec-head--left p { margin-inline: 0; } /* ─────────────────────────── «сцена»: блоки с абсолютной раскладкой ─────────── Держим 1:1 с макетом на десктопе через transform: scale(), а на узких экранах превращаем в обычный поток (см. медиазапрос ниже). -------------------------------------------------------------------------- */ .stage { position: relative; width: 100%; } .stage__in { position: relative; width: var(--dw, 1840px); height: var(--dh, 1000px); transform: scale(var(--k, 1)); transform-origin: top left; } .stage__in > .at { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); } .stage__in > .at.h { height: calc(var(--h) * 1px); } /* ─────────────────────────── карточки-преимущества (тёмные) ─────────────────── */ .adv { background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 32px; } .adv__bars { display: flex; height: 15px; } .adv__bars i { width: 24px; height: 15px; margin-right: -8px; background: rgba(255, 255, 255, .4); clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%); } .adv__bars i.on { background: var(--red); } .adv h3 { margin: 0 0 16px; font-size: clamp(17px, 1.04vw, 20px); } .adv p { margin: 0; color: var(--muted-2); } /* контур трассы: белый PNG с альфой, цвет задаётся фильтром (в макете штрих #424242 на тёмной секции и белый 12 % на красной) */ .track-art { position: absolute; width: 886px; height: 411px; pointer-events: none; } .track-art img { width: 886px; height: 411px; filter: brightness(.26); } .track-dot { position: absolute; width: 36px; height: 36px; } .track-dot img { width: 36px; height: 36px; } .track-flag { position: absolute; width: 72px; height: 24px; } .track-flag img { width: 72px; height: 24px; } /* ─────────────────────────── «шлем» с номером ─────────────────────────── */ .helmet, .mts > img { width: 72px; height: 72px; flex: none; display: block; } .helmet img { width: 72px; height: 72px; } .price .helmet { position: absolute; left: 32px; top: 32px; } /* ─────────────────────────── карточки-шаги (белые) ─────────────────────────── */ .step { background: var(--white); color: var(--black); padding: 32px; display: flex; flex-direction: column; gap: 24px; height: 100%; } .step__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .step__num { font-family: var(--display); font-weight: 900; letter-spacing: .02em; line-height: 1; font-size: clamp(56px, 6.25vw, 120px); color: var(--red); opacity: .4; } .step__img { width: 320px; max-width: 55%; aspect-ratio: 4 / 3; object-fit: cover; } .step__body { margin-top: auto; display: flex; flex-direction: column; gap: 16px; } .step h3 { margin: 0 0 12px; font-size: clamp(19px, 1.25vw, 24px); text-transform: uppercase; font-weight: 600; } .step__tag { color: var(--red); } .step p { margin: 0; color: var(--grey-text); } /* ─────────────────────────── спортсмены ─────────────────────────── */ .athlete { position: relative; background: var(--card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 397px; gap: 24px; padding: 24px; min-height: 445px; } .athlete__col { display: flex; flex-direction: column; } .athlete__name { margin: 104px 0 14px; } .athlete__role { margin: 0; } .athlete__note { margin-top: auto; color: var(--muted); } .athlete__photo { width: 397px; height: 397px; object-fit: cover; } .athlete .helmet { position: absolute; left: 24px; top: 24px; } /* ─────────────────────────── тренер ─────────────────────────── */ .coach { position: relative; overflow: hidden; padding-block: clamp(48px, 5.2vw, 100px); } /* Стоковая картинка флагов пришла из макета с впечатанной «шахматкой» прозрачности — в Figma она тоже видна, поэтому оставляем как есть, только приглушаем до уровня макета. */ .coach__flags { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1386px; max-width: 130%; pointer-events: none; opacity: .12; } .coach__marquee { position: absolute; left: 0; right: 0; top: 46%; display: flex; gap: 80px; white-space: nowrap; pointer-events: none; font-family: var(--display); font-weight: 900; letter-spacing: .02em; line-height: 1; font-size: clamp(56px, 10.4vw, 200px); color: var(--red); text-transform: uppercase; justify-content: space-between; } .coach__card { position: relative; width: min(600px, 100%); margin-inline: auto; } .coach__photo { width: 100%; aspect-ratio: 600 / 720; object-fit: cover; object-position: center top; } .coach__facts { position: relative; margin: -70px auto 0; width: min(568px, 100%); background: var(--white); color: var(--black); padding: 20px; display: grid; gap: 8px; } .coach__facts li { display: flex; gap: 14px; } .coach__facts li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .6em; background: var(--red); } .coach__quote { max-width: 550px; margin: clamp(32px, 3.4vw, 66px) auto 0; text-align: center; color: var(--muted); position: relative; } .coach__quote::before { content: '“'; position: absolute; left: -28px; top: -14px; font-family: var(--display); font-size: 56px; color: var(--red); line-height: 1; } /* ─────────────────────────── красная панель «путь» ─────────────────────────── */ .panel-red { background: var(--red); padding: clamp(40px, 6.25vw, 120px) clamp(24px, 3.4vw, 65px) clamp(40px, 4vw, 76px); } .panel-red .stage__in > img { max-width: none; } .panel-red__head { text-align: center; max-width: 1062px; margin: 0 auto clamp(32px, 3.1vw, 60px); } .panel-red__head p { max-width: 910px; margin: 24px auto 0; } .panel-red .stage { width: calc(100% + 2 * clamp(24px, 3.4vw, 65px)); margin-inline: calc(-1 * clamp(24px, 3.4vw, 65px)); } .tile { background: var(--white); color: var(--black); padding: 24px; display: flex; gap: 16px; align-items: flex-start; } .tile__ico { width: 72px; height: 72px; flex: none; display: block; } .tile__ico img { width: 72px; height: 72px; } .tile h3 { margin: 0 0 12px; font-size: clamp(17px, 1.04vw, 20px); text-transform: uppercase; font-weight: 500; } .tile p { margin: 0; color: var(--grey-text); } /* ─────────────────────────── безопасный старт ─────────────────────────── */ .safety { position: relative; background: var(--red); overflow: hidden; padding: clamp(40px, 3.1vw, 60px) clamp(24px, 2.9vw, 56px); } .safety__grid { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); gap: 40px; position: relative; z-index: 2; } .safety__note { display: flex; gap: 8px; align-items: flex-start; max-width: 244px; } .safety__note img { width: 24px; height: 24px; flex: none; } .safety__art { position: absolute; right: 0; top: 7%; width: 61%; z-index: 1; } .safety__kart { width: 100%; transform: rotate(-5deg); } .safety__smoke { position: absolute; left: -4%; bottom: -14%; width: 96%; opacity: .56; mix-blend-mode: screen; pointer-events: none; } .safety__kit { position: relative; z-index: 3; display: grid; gap: 12px; justify-items: end; margin-top: 24px; } .safety__chip { background: var(--white); color: var(--black); display: inline-flex; align-items: center; gap: 16px; padding: 8px 16px 8px 8px; text-transform: uppercase; font-weight: 500; } .safety__chip img { width: 64px; height: 64px; flex: none; } /* ─────────────────────────── сертификат ─────────────────────────── */ .gift { display: grid; grid-template-columns: minmax(0, 1fr) 373px minmax(0, 672px); gap: clamp(24px, 2.3vw, 44px); align-items: start; } .gift__cert { width: 373px; border: 8px solid var(--white); object-fit: cover; } .gift__list { display: grid; gap: 16px; } .gift__row { background: var(--card); padding: 24px; display: flex; align-items: center; gap: 16px; min-height: 120px; } .gift__row img { width: 72px; height: 72px; flex: none; } .gift__row span { font-size: clamp(18px, 1.25vw, 24px); font-weight: 600; text-transform: uppercase; } /* ─────────────────────────── цены ─────────────────────────── */ .price { position: relative; padding: 32px; min-height: 400px; display: flex; flex-direction: column; background: var(--white); color: var(--black); } .price--red { background: var(--red); color: var(--white); } .price__num { position: absolute; right: 32px; top: 32px; font-family: var(--display); font-weight: 900; letter-spacing: .02em; line-height: 1; font-size: 48px; color: var(--grey-num-2); } .price--red .price__num { color: rgba(255, 255, 255, .4); } .price h3 { margin: 104px 0 0; font-size: clamp(19px, 1.25vw, 24px); font-weight: 600; text-transform: uppercase; line-height: 1.21; } .price__dur { margin-top: 12px; display: flex; align-items: center; gap: 8px; color: var(--grey-num); font-weight: 500; } .price__dur img { width: 24px; height: 24px; flex: none; } .price--red .price__dur { color: rgba(255, 255, 255, .64); } .price__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .price__sum { font-family: var(--display); font-weight: 900; letter-spacing: .02em; white-space: nowrap; font-size: calc(clamp(26px, 2.5vw, 48px) * var(--ds)); color: var(--red); } .price--red .price__sum { color: var(--white); } .price__more { width: 48px; height: 48px; flex: none; padding: 0; transition: transform .18s; } .price__more img { width: 48px; height: 48px; } .price__more:hover { transform: rotate(90deg); } /* ─────────────────────────── FAQ ─────────────────────────── */ .faq { display: grid; grid-template-columns: minmax(0, 773px) minmax(0, 910px); gap: clamp(24px, 3.1vw, 60px); align-items: start; } .faq__list { display: grid; gap: 16px; } .faq__item { background: var(--card); } .faq__q { width: 100%; min-height: 120px; padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; text-transform: uppercase; font-weight: 500; font-size: clamp(17px, 1.04vw, 20px); } .faq__q::after { content: ''; flex: none; width: 20px; height: 20px; background: currentColor; clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%); transition: transform .2s; } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__a { background: var(--card-2); padding: 40px; color: var(--muted); margin: 0; } /* ─────────────────────────── блог ─────────────────────────── */ .post { background: var(--white); color: var(--black); padding: 32px; display: flex; flex-direction: column; gap: 32px; } .post img { width: 100%; aspect-ratio: 536 / 340; object-fit: cover; } .post h3 { margin: auto 0 0; font-size: clamp(19px, 1.25vw, 24px); font-weight: 600; text-transform: uppercase; line-height: 1.21; } /* ─────────────────────────── финальный CTA ─────────────────────────── */ .cta { position: relative; background: var(--red); overflow: hidden; padding: clamp(40px, 3.4vw, 66px) clamp(24px, 2.1vw, 40px); } .cta__grid { display: grid; grid-template-columns: minmax(0, 653px) minmax(0, 1fr); gap: 40px; align-items: start; } .cta__photos { position: relative; min-height: 420px; } .cta__photo-a { width: 100%; aspect-ratio: 910 / 664; object-fit: cover; } .cta__photo-b { position: absolute; left: -2%; top: 12%; width: 39%; aspect-ratio: 3 / 2; object-fit: cover; } .cta__lead { margin: clamp(24px, 2.1vw, 40px) 0 0; max-width: 480px; } .cta__final { margin-top: clamp(24px, 2.1vw, 40px); text-transform: uppercase; font-weight: 500; max-width: 602px; } .cta .btn { margin-top: clamp(24px, 2.1vw, 40px); } .cta__track { position: absolute; left: 20%; top: 26%; width: 47%; opacity: .12; pointer-events: none; } .cta__track img { width: 100%; height: auto; } /* ─────────────────────────── «больше чем школа» ─────────────────────────── */ .mts { background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 24px; min-height: 320px; } .mts h3 { margin: 0 0 12px; font-size: clamp(17px, 1.04vw, 20px); text-transform: uppercase; font-weight: 500; } .mts p { margin: 0; color: var(--muted-2); } .mts__body { margin-top: auto; } /* ─────────────────────────── подвал ─────────────────────────── */ .foot { position: relative; background: var(--red); overflow: hidden; } .foot__in { background: rgba(2, 2, 2, .16); padding: 88px var(--gut) 0; } .foot__grid { display: grid; grid-template-columns: 465px 465px 465px auto; gap: 24px; padding-bottom: 40px; } .foot__logo { width: 137px; } .foot__about { margin: 27px 0 0; color: rgba(255, 255, 255, .64); font-size: clamp(15px, .94vw, 18px); } .foot__col { display: grid; gap: 24px; align-content: start; } .foot__col a:hover, .foot__contacts a:hover { text-decoration: underline; } .foot__contacts { display: grid; gap: 24px; align-content: start; font-weight: 500; } .foot__social { display: flex; gap: 16px; margin-top: 24px; } .foot__social a, .foot__social span { width: 56px; height: 56px; display: block; transition: opacity .18s; } .foot__social a:hover { opacity: .8; } .foot__social img { width: 56px; height: 56px; } .foot__marquee { display: flex; gap: 40px; white-space: nowrap; overflow: hidden; user-select: none; font-family: var(--display); font-weight: 900; letter-spacing: .02em; line-height: 1; font-size: clamp(72px, 18.75vw, 360px); text-transform: uppercase; } .foot__marquee > span { animation: marquee 26s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .foot__marquee > span { animation: none; } } .foot__bottom { border-top: 1px solid rgba(255, 255, 255, .24); padding: 32px var(--gut); display: grid; grid-template-columns: 465px 465px auto; gap: 24px; color: rgba(255, 255, 255, .64); font-size: clamp(15px, .94vw, 18px); background: rgba(2, 2, 2, .16); } /* полосы протектора-разделители */ .tire { height: 128px; overflow: hidden; margin-block: clamp(24px, 2.6vw, 50px); } .tire svg { width: 100%; height: 100%; } /* ─────────────────────────── модальное окно заявки ─────────────────────────── */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(2, 2, 2, .82); } .modal__box { width: min(560px, 100%); background: var(--card); padding: clamp(24px, 3vw, 48px); position: relative; } .modal__close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; font-size: 28px; line-height: 1; } .modal h2 { margin: 0 0 8px; } .modal p { margin: 0 0 24px; color: var(--muted); } .modal label { display: block; margin-bottom: 16px; } .modal input, .modal textarea, .modal select { width: 100%; margin-top: 8px; padding: 14px 16px; background: var(--black); border: 1px solid var(--hairline); color: var(--white); font: inherit; } .modal input:focus, .modal textarea:focus, .modal select:focus { outline: 2px solid var(--red); outline-offset: 0; } .modal__legal { font-size: 14px; color: var(--muted-2); margin-top: 16px; } .modal__ok { display: none; color: #7ee081; margin-top: 16px; } /* ─────────────────────────── доступность ─────────────────────────── */ :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: var(--white); padding: 12px 20px; } .skip:focus { left: 8px; top: 8px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ══════════════════════════ адаптив ══════════════════════════ */ @media (max-width: 1440px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .foot__bottom { grid-template-columns: 1fr 1fr 1fr; } .athlete { grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; } .athlete__photo { width: 300px; height: 300px; } .athlete__name { margin-top: 88px; } .gift { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 520px); } .gift__cert { width: 300px; } } @media (max-width: 1100px) { :root { --gut: 24px; } /* инлайновые сетки страниц — максимум две колонки */ [style*='grid-template-columns'] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .athlete[style*='grid-template-columns'] { grid-template-columns: 1fr !important; } .head__nav, .head__cta { display: none; } .head__burger { display: block; margin-left: auto; } .head.is-open .head__nav { display: grid; gap: 20px; position: absolute; left: 0; right: 0; top: 64px; background: var(--black); padding: 24px; font-size: 18px; } .head.is-open .head__cta { display: inline-flex; position: absolute; left: 24px; right: 24px; top: 260px; justify-content: center; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .hero__body { grid-template-columns: 1fr; } .hero__points { align-self: start; } .safety__grid, .cta__grid, .faq { grid-template-columns: 1fr; } .safety__art { position: static; width: 100%; margin-top: 24px; } .safety__kit { justify-items: start; } .gift { grid-template-columns: 1fr 1fr; } .gift__list { grid-column: 1 / -1; } .cta__photo-b { left: 0; } /* «сцены» превращаем в обычный поток */ .stage__in { width: auto !important; height: auto !important; transform: none !important; display: grid; gap: var(--col); } .stage__in > .at { position: static !important; width: auto !important; height: auto !important; } .stage__in > .stage-hide { display: none !important; } .stage--2col .stage__in { grid-template-columns: 1fr 1fr; } .stage__in > .stage-pad { grid-column: 1 / -1; } .stage__in > img { height: auto !important; width: 100% !important; } .panel-red { padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 48px); } } @media (max-width: 760px) { .grid-4, .grid-3, .grid-2, .stage--2col .stage__in { grid-template-columns: 1fr; } /* секции с сеткой, заданной инлайново в разметке страницы, тоже в одну колонку */ [style*='grid-template-columns'] { grid-template-columns: 1fr !important; } .hero { padding-top: 88px; min-height: 0; } .hero__title { font-size: clamp(34px, 10vw, 60px) !important; white-space: normal !important; } .hero--center .hero__title, .hero__meta { text-align: left; } .athlete { grid-template-columns: 1fr; } .athlete__photo { width: 100%; height: auto; aspect-ratio: 1; } .athlete__name { margin-top: 88px; } .step { padding: 24px; } .step__img { width: 40%; } .gift, .foot__grid, .foot__bottom { grid-template-columns: 1fr; } .gift__cert { width: 100%; } .coach__marquee { display: none; } .price { min-height: 0; } .faq__q { padding: 20px 24px; min-height: 0; } .faq__a { padding: 24px; } .tire { height: 64px; } .foot__in { padding-top: 48px; } }