/* ===================================================================== Как мы работаем Ноды: 539:258 (заголовок), 539:261 / 539:267 / 539:269 / 539:262 / 539:268 / 539:270 (карточки 400x197), 539:284 / 539:286 / 539:288 / 539:285 / 539:287 / 539:289 (номера), 539:271 / 539:273 / 539:275 / 539:272 / 539:274 / 539:276 (названия шагов), 539:277 / 539:279 / 539:281 / 539:278 / 539:280 / 539:282 (жёлтые линии), 539:283 / 539:290 / 539:291 / 539:292 / 539:299 / 539:300 (описания) ===================================================================== */ .efir-steps { --steps-yellow: #fccb1b; --steps-num: #fff1be; --steps-dark: #262626; --steps-card-bg: #fbfafa; --steps-border: #f5f5f5; --steps-gutter: 100px; font-family: Montserrat, "Proxima Nova", Arial, Helvetica, sans-serif; padding: 90px 0 0; } .efir-steps *, .efir-steps *::before, .efir-steps *::after { box-sizing: border-box; } .efir-steps__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--steps-gutter); } .efir-steps__title { margin: 0 0 30px; font-size: 30px; font-weight: 700; line-height: 1.35; text-align: center; text-transform: uppercase; color: var(--steps-dark); } .efir-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* --- Карточка шага 400x197 --------------------------------------- */ .efir-step-card { position: relative; min-height: 197px; padding: 25px 30px 30px; overflow: hidden; background: var(--steps-card-bg); border: 1px solid var(--steps-border); box-shadow: 0 0 6px 3px rgba(38, 38, 38, 0.05); } /* крупная цифра прижата к верхнему правому углу, под контентом */ .efir-step-card__num { position: absolute; top: 0; right: 34px; z-index: 0; font-size: 90px; font-weight: 700; line-height: 1.35; color: var(--steps-num); pointer-events: none; user-select: none; } .efir-step-card__title, .efir-step-card__line, .efir-step-card__text { position: relative; z-index: 1; } .efir-step-card__title { display: block; font-size: 16px; font-weight: 500; line-height: 1.35; text-align: center; text-transform: uppercase; color: var(--steps-dark); overflow-wrap: anywhere; } .efir-step-card__line { display: block; width: 90px; height: 2px; margin: 10px auto 0; background: var(--steps-yellow); } .efir-step-card__text { margin: 18px 0 0; font-size: 16px; font-weight: 400; line-height: 1.1; color: var(--steps-dark); overflow-wrap: anywhere; } /* ===================================================================== Адаптив ===================================================================== */ @media (max-width: 1279px) { .efir-steps { --steps-gutter: 40px; padding-top: 70px; } .efir-step-card { padding: 22px 20px 24px; } .efir-step-card__num { right: 20px; font-size: 76px; } } @media (max-width: 1023px) { .efir-steps { padding-top: 60px; } .efir-steps__title { font-size: 26px; margin-bottom: 24px; } .efir-steps__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .efir-steps { --steps-gutter: 20px; padding-top: 40px; } .efir-steps__title { font-size: 22px; } .efir-steps__grid { grid-template-columns: 1fr; gap: 16px; } .efir-step-card { min-height: 0; padding: 20px; } .efir-step-card__num { font-size: 64px; right: 16px; } .efir-step-card__title { text-align: left; } .efir-step-card__line { margin-left: 0; } .efir-step-card__text { margin-top: 14px; font-size: 15px; line-height: 1.3; } } /* ===================================================================== Анимация блока --------------------------------------------------------------------- Работает только если на есть класс .anim (его ставит скрипт из blocks/_core/core.js) и класс .is-in на элементе (его ставит IntersectionObserver оттуда же). Без JS контент виден сразу. ===================================================================== */ html.anim .efir-steps__title, html.anim .efir-steps__grid > * { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- Ховеры ------------------------------------------------------- */ .efir-step-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .efir-step-card:hover { transform: translateY(-3px); box-shadow: 0 4px 14px 3px rgba(38, 38, 38, 0.09); } @media (prefers-reduced-motion: reduce) { html.anim .efir-steps__title, html.anim .efir-steps__grid > * { opacity: 1; transform: none; animation: none; transition: none; } .efir-step-card:hover { transform: none; } }