/* ============ ЛЕНДИНГ-ШАПКА (fixed + glassmorphism) ============ */ /* Обёртка

— фиксируем поверх контента. Селектор усилен (.site header.header-1), чтобы перебить zerro.site.css «.module, .template {position:relative}» — иначе шапка уезжает при скролле. */ .site header.header-1 { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } /* Контентная колонка шапки = ширина контента модулей */ .header-1 > .container { max-width: var(--maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* При скролле — чёрное стекло (glassmorphism) */ .site header.header-1.is-scrolled { background: rgba(10, 10, 12, .55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 8px 30px rgba(0, 0, 0, .35); border-bottom-color: rgba(255, 255, 255, .08); } /* --- Бар --- */ .header-1 .lh { position: relative; z-index: 2; display: flex; align-items: center; gap: 34px; min-height: 78px; } .header-1 .lh__logo { flex: 0 0 auto; display: block; } .header-1 .lh__logo img { height: 42px; width: auto; display: block; } .header-1 .lh__nav { display: flex; gap: 30px; } .header-1 .lh__nav a { color: #fff; font-family: var(--font-text); font-weight: 500; white-space: nowrap; opacity: .9; } .header-1 .lh__nav a:hover { color: var(--red); opacity: 1; } .header-1 .lh__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; } .header-1 .lh__phone { display: inline-flex; align-items: center; color: #fff; font-weight: 700; white-space: nowrap; } .header-1 .lh__phone:hover { color: var(--red); } .header-1 .lh__phone-ic { display: none; } .header-1 .lh__reg { flex: 0 0 auto; padding: 12px 20px; font-size: 15px; white-space: nowrap; } /* «Забронировать» (форма) — обводка, чтобы отличать от билетной кнопки */ .header-1 .lh__reg--book { background: transparent; border: 1px solid rgba(255,255,255,.5); } .header-1 .lh__reg--book:hover { background: var(--red); border-color: var(--red); } /* --- Гамбургер (моб.) --- */ .header-1 .lh__burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; } .header-1 .lh__burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } body.lh-open .header-1 .lh__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.lh-open .header-1 .lh__burger span:nth-child(2) { opacity: 0; } body.lh-open .header-1 .lh__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Мобильное меню (полноэкранное стекло) --- */ /* ВАЖНО: дравер выносится JS-ом в , поэтому селекторы БЕЗ префикса .header-1. Причина: при скролле шапка получает backdrop-filter и становится containing-block для position:fixed потомков — внутри неё меню схлопывалось. */ .lh-drawer { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(10, 10, 12, .92); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); flex-direction: column; align-items: center; justify-content: center; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } body.lh-open .lh-drawer { opacity: 1; visibility: visible; } /* Блокируем прокрутку страницы под открытым меню */ body.lh-open { overflow: hidden; } .lh-drawer__nav { display: flex; flex-direction: column; align-items: center; gap: 22px; } .lh-drawer__nav a { color: #fff; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 24px; } .lh-drawer__nav a:hover { color: var(--red); } .lh-drawer__reg { margin-top: 10px; } .lh-drawer__reg--book { background: transparent; border: 1px solid rgba(255,255,255,.5); } .lh-drawer__reg--book:hover { background: var(--red); border-color: var(--red); } .site .lh-drawer__phone { color: #fff; font-weight: 700; font-size: 18px; } .site .lh-drawer__phone:hover { color: var(--red); } .lh-drawer__org { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; } .lh-drawer__org img { height: 88px; width: auto; display: block; } .lh-drawer__org span { color: rgba(255,255,255,.6); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; } /* ===== Билетный попап (fullscreen iframe) ===== */ .tickets-modal .modal-content { background: #fff; border: 0; border-radius: 0; height: 100%; position: relative; } .tickets-modal .modal-body { padding: 0; height: 100%; overflow: hidden; } .tickets-modal iframe { width: 100%; height: 100%; border: 0; display: block; } /* Явный крестик — белый на тёмном круге, поверх iframe */ .tickets-modal .tickets-close { position: absolute; top: 14px; right: 14px; z-index: 10; width: 46px; height: 46px; border-radius: 50%; background: rgba(15, 15, 15, .8); color: #fff; border: 1px solid rgba(255, 255, 255, .25); font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; padding: 0; } .tickets-modal .tickets-close:hover { background: var(--red); border-color: var(--red); } @media (max-width: 575px) { .tickets-modal .tickets-close { width: 40px; height: 40px; font-size: 26px; top: 10px; right: 10px; } } /* ============ Мобилка ============ */ @media (max-width: 991px) { .header-1 > .container { padding-left: 16px; padding-right: 16px; } .header-1 .lh { min-height: 62px; gap: 14px; } .header-1 .lh__logo img { height: 34px; } .header-1 .lh__nav { display: none; } .header-1 .lh__reg { display: none; } .header-1 .lh__phone-txt { display: none; } .header-1 .lh__phone { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); justify-content: center; } .header-1 .lh__phone-ic { display: block; font-size: 17px; color: #fff; line-height: 1; } .header-1 .lh__phone:hover .lh__phone-ic { color: var(--red); } .header-1 .lh__actions { gap: 12px; } .header-1 .lh__burger { display: inline-flex; } .lh-drawer { display: flex; } } [data-color="#000000FF"] {color:#000000FF} /* ================= HERO (первый экран) ================= */ /* Обёртка модуля с классом vh100 (design.height=1) — убираем flex-центрирование, чтобы контент растягивался на всю ширину, а высота была 100vh */ .hero.vh100 { align-items: stretch; justify-content: flex-start; padding: 0; } .hero .hero { position: relative; min-height: 100vh; background-size: cover; background-position: center; color: #fff; display: flex; overflow: hidden; } /* Фоновое видео */ .hero .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; /* лёгкая «сочность» — компенсируем затемнение и делаем картинку насыщеннее */ filter: contrast(1.06) saturate(1.08); } /* Затемнение поверх видео/постера */ .hero .hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1; } /* Плёночное зерно поверх видео — маскирует артефакты сжатия. Случайный шум (не периодический) → нет муара и ряби при скролле */ .hero .hero__lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url('/assets/images/grain.svg?v=1'); background-size: 200px 200px; opacity: .3; mix-blend-mode: overlay; } /* Центральная кнопка «Посмотреть видео» */ .hero .hero__play { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; background: none; border: none; cursor: pointer; color: #fff; padding: 0; } .hero .hero__play-btn { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .3s ease, background .3s ease; } .hero .hero__play-btn i { margin-left: 4px; } /* пульсирующие круги */ .hero .hero__play-btn::before, .hero .hero__play-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(183, 0, 0, .6); animation: hero-ripple 2.4s ease-out infinite; } .hero .hero__play-btn::after { animation-delay: 1.2s; } @keyframes hero-ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } } .hero .hero__play:hover .hero__play-btn { transform: scale(1.08); background: var(--red-hover); } .hero .hero__play-label { font-family: var(--font-text); font-weight: 600; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.6); font-size: 14px; } .hero .hero__col { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; max-width: 1220px; padding-top: 22px; padding-bottom: 40px; } /* --- Шапка --- */ .hero .hero__top { display: flex; align-items: flex-start; gap: 36px; } .hero .hero__logo { flex-shrink: 0; display: block; } .hero .hero__logo img { width: auto; } .hero .hero__menu { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 6px; } .hero .hero__menu a { color: #fff; white-space: nowrap; } .hero .hero__menu a:hover { color: var(--red); } /* Правая часть шапки — колонка: строка (контакт+кнопка), под ней логотип организатора */ .hero .hero__top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-left: auto; } .hero .hero__top-row { display: flex; align-items: center; gap: 24px; } /* Организатор — под кнопкой, прижат к верху, справа */ /* Организатор — в hero, справа-сверху (под кнопкой регистрации из шапки), крупно */ .hero .hero__org { position: absolute; top: 100px; right: 20px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero .hero__org-label { font-family: var(--font-text); font-weight: 400; letter-spacing: normal; text-transform: none; color: #fff; text-align: center; } .hero .hero__organizer { width: 250px; height: auto; pointer-events: none; } .hero .hero__contact { text-align: right; } .hero .hero__contact-name { color: var(--muted); } .hero .hero__contact-phone { font-weight: 700; color: #fff; white-space: nowrap; } .hero .hero__contact-phone:hover { color: var(--red); } .hero .hero__reg { flex-shrink: 0; } .hero .hero__seats-wrap { display: flex; justify-content: flex-end; margin-top: 20px; } /* Имя спикера над заголовком */ .hero .hero__speaker { margin-bottom: 18px; } .hero .hero__speaker span { display: inline-block; font-family: var(--font-text); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: 8px 18px; border-left: 3px solid var(--red); background: rgba(183, 0, 0, .18); } /* --- Контент --- */ .hero .hero__body { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: flex-end; margin-top: 90px; } .hero .hero__title { color: #fff; display: flex; flex-direction: column; margin-bottom: 40px; } .hero .hero__title-l { text-align: left; } .hero .hero__title-r { text-align: right; } .hero .hero__sub1 { max-width: 497px; margin-left: auto; text-align: right; margin-bottom: 40px; } .hero .hero__sub2 { max-width: 497px; margin-bottom: 40px; } .hero .hero__cities { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .hero .hero__city { font-family: var(--font-text); font-weight: 600; font-size: 36px; white-space: nowrap; } /* ================= Адаптив ================= */ /* ===== Модалка видео (рендерится в body, вне модуля) ===== */ #heroVideoModal .modal-content { background: #0d0d0d; border: none; border-radius: 10px; overflow: hidden; } #heroVideoModal .modal-header { border: none; padding: 16px 20px; align-items: center; gap: 12px; } #heroVideoModal .modal-title { display: none; } #heroVideoModal .hero-video-ttl { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #fff; font-size: 18px; line-height: 1.15; } #heroVideoModal .hero-video-ttl span { color: var(--red); white-space: nowrap; } #heroVideoModal .btn-close { margin: 0; background-color: rgba(255,255,255,.08); border-radius: 50%; padding: 12px; opacity: .9; filter: invert(1) grayscale(1) brightness(2); } #heroVideoModal .modal-body { padding: 0; } #heroVideoModal .hero-video-player { display: block; width: 100%; height: auto; max-height: 74vh; background: #000; } #heroVideoModal .modal-footer { border: none; justify-content: center; padding: 16px 20px 20px; } #heroVideoModal .hero-video-reg { min-width: 260px; } @media (max-width: 575px) { #heroVideoModal .hero-video-ttl { font-size: 15px; } #heroVideoModal .hero-video-reg { min-width: 0; width: 100%; } #heroVideoModal .hero-video-player { max-height: 68vh; } } @media (max-width: 991px) { .hero .hero__play-btn { width: 64px; height: 64px; } .hero .hero__col { padding-top: 16px; padding-bottom: 48px; min-height: 100vh; justify-content: space-between; } .hero .hero__menu { display: none; } .hero .hero__top { gap: 16px; } .hero .hero__logo img { width: 150px; } .hero .hero__org { display: none; } .hero .hero__top-right { gap: 14px; } .hero .hero__contact { display: none; } .hero .hero__reg { padding: 11px 14px; } .hero .hero__speaker span { padding: 6px 14px; } .hero .hero__body { margin-top: 40px; } .hero .hero__sub1, .hero .hero__sub2 { max-width: 100%; text-align: left; margin-left: 0; } .hero .hero__cities { gap: 14px; } .hero .hero__buy { width: 100%; margin-top: 8px; } } /* ===== Мобильная доводка (custom_cloude): не влияет на >=992px ===== */ @media (max-width: 991px) { /* Крупный дисплейный заголовок — через clamp, чтобы не переполнял узкий экран */ .hero .hero__title { font-size: clamp(28px, 8.5vw, 48px); line-height: 1.12; margin-bottom: 28px; } /* На мобиле «и зарабатывать» выравниваем влево (на десктопе — справа) */ .hero .hero__title-r { text-align: left; } .hero .hero__city { font-size: clamp(15px, 4.4vw, 20px); } /* Тап-таргет кнопки шапки >= 44px */ .hero .hero__reg { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 575px) { .hero .hero__top { gap: 12px; } .hero .hero__logo img { width: 132px; } .hero .hero__reg { font-size: 12px; padding: 11px 12px; } .hero .hero__cities { gap: 6px 14px; } .hero .hero__city { font-size: clamp(14px, 4.2vw, 18px); } } @media (max-width: 400px) { .hero .hero__top { gap: 8px; } .hero .hero__logo img { width: 104px; } .hero .hero__reg { font-size: 11px; padding: 10px 10px; letter-spacing: 0; } .hero .hero__title { font-size: clamp(26px, 8vw, 40px); } .hero .hero__cities { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ============ СПИКЕР + ЛОГОТИПЫ (светлая секция) ============ */ .speaker-logos .splg { background: #fff; color: #111; padding: 90px 0 70px; } .speaker-logos .splg__title { font-size: 44px; text-align: center; color: #111; margin: 0 auto 60px; max-width: 900px; } .speaker-logos .splg__title-red { color: var(--red); } .speaker-logos .splg__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .speaker-logos .splg__pill { flex: 0 0 auto; width: 228px; height: 90px; background: #fff; border-radius: 45px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; padding: 0 26px; } .speaker-logos .splg__pill img { max-height: 46px; max-width: 170px; width: auto; object-fit: contain; } .speaker-logos .splg__desc { max-width: 760px; margin: 48px auto 0; text-align: center; color: #444; } @media (max-width: 991px) { .speaker-logos .splg { padding: 56px 0 40px; } .speaker-logos .splg__title { font-size: clamp(26px,6.5vw,34px); margin-bottom: 36px; } .speaker-logos .splg__pill { width: 44%; max-width: 200px; height: 74px; } } /* --- Узкие экраны: плотнее раскладка пилюль --- */ @media (max-width: 575px) { .speaker-logos .splg { padding: 48px 0 36px; } .speaker-logos .splg__title { overflow-wrap: break-word; word-break: break-word; } .speaker-logos .splg__logos { gap: 12px; } .speaker-logos .splg__pill { width: 46%; max-width: 180px; height: 66px; padding: 0 14px; } .speaker-logos .splg__pill img { max-height: 40px; max-width: 100%; } .speaker-logos .splg__desc { margin-top: 32px; } } /* ============ ПРЕМИЯ «МАРКЕТОЛОГ ГОДА» ============ */ /* Крутилки для подгонки на десктопе: --plate-top — высота белой плашки сверху (насколько опущен фон) --statue-up — насколько статуэтка выходит из стека вверх */ .module.award { --plate-top: 200px; --statue-up: 90px; color: #fff; } /* Фон (design.image) опускаем вниз — сверху белая плашка */ .module.award .module-background { top: var(--plate-top); border-radius: 0; } /* Движковый .container = центрирующая колонка + точка отсчёта для спикера (перебиваем обнуление из custom.css повышенной специфичностью) */ .site .module.award > .container { position: relative; max-width: var(--maxw); margin: 0 auto; min-height: 620px; padding: 150px 20px 60px; /* сверху — под плашку, снизу — воздух */ } /* --- Текст --- */ .award .award__text { padding-left: 0; padding-bottom: 10px; } .award .award__lead { margin-bottom: 20px; } .award .award__year { font-weight: 600; margin-bottom: 12px; } .award .award__quote { max-width: 460px; color: var(--muted); margin-bottom: 24px; } .award .award__title span { display: block; } /* --- Статуэтка (001): справа, relative, выходит вверх --- */ .award .award__statue-col { display: flex; justify-content: center; } .award .award__statue { position: relative; top: calc(-1 * var(--statue-up)); width: auto; height: auto; max-height: 560px; max-width: 100%; filter: drop-shadow(0 24px 55px rgba(0,0,0,.5)); } /* --- Спикер (003): absolute, во всю высоту блока, под текстом, над фоном --- */ .award .award__speaker-col { position: static; } .award .award__speaker { position: absolute; right: 40%; bottom: 0; height: 100%; /* во всю высоту .container */ width: auto; max-width: none; z-index: -1; /* ниже текста, но выше фона (.module-background = -10) */ pointer-events: none; } /* ============ Адаптив ============ */ @media (max-width: 1199px) { .module.award { --statue-up: 70px; } .award .award__statue { max-height: 480px; } } /* Планшет/мобилка — всё в столбик: статуэтка → текст → спикер (порядок задан в разметке) */ @media (max-width: 991px) { .module.award { --plate-top: 40px; } .site .module.award > .container { min-height: auto; padding: 60px 16px 0; } .award .award__text { padding-left: 0; padding-top: 28px; text-align: center; } .award .award__quote { margin-left: auto; margin-right: auto; } .award .award__statue { top: -24px; max-height: 340px; } /* Спикер возвращается в поток, стоит на плашке по центру */ .award .award__speaker-col { display: flex; justify-content: center; margin-top: 16px; } .award .award__speaker { position: static; height: auto; max-height: 440px; max-width: 100%; z-index: 0; } } /* --- Мобильная доводка заголовка/картинок --- */ @media (max-width: 991px) { .award .award__title { font-size: clamp(26px, 7vw, 40px); line-height: 1.12; overflow-wrap: break-word; word-break: break-word; } } @media (max-width: 575px) { .site .module.award > .container { padding: 48px 16px 0; } .award .award__statue { max-height: 300px; } .award .award__speaker { max-height: 380px; } .award .award__quote { font-size: 16px; } } /* ============ КНИГА «КРАСНАЯ КНОПКА» (светлая секция) ============ */ .module.book { color: #111; } /* Движковый .container = центрирующая колонка + точка отсчёта для курсора (перебиваем обнуление из custom.css повышенной специфичностью) */ .site .module.book > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 70px 20px 80px; } /* --- Курсор (декор, blocks/book/001.png) — правый верхний угол --- */ .book .book__cursor { position: absolute; top: 170px; right: -80px; width: 210px; height: auto; z-index: 0; pointer-events: none; user-select: none; } .book .book__row { position: relative; z-index: 1; } /* Картинка книги (col-5, слева) — наклон + тень */ .book .book__media { display: flex; justify-content: center; } .book .book__media img { width: 100%; height: auto; } .book .book__img { max-width: 460px; transform: rotate(-8deg); /* наклон книги */ filter: drop-shadow(0 30px 60px rgba(0,0,0,.25)); } /* Текст (col-7, справа) */ .book .book__text { text-align: right; } .book .book__title { font-size: 56px; color: #111; margin-bottom: 10px; } .book .book__title-black { color: #111; } .book .book__title-red { color: var(--red); } .book .book__lead { font-weight: 700; color: var(--red); margin: 20px 0 24px; } .book .book__desc { color: #6a6a6a; } .book .book__bottom { font-size: 52px; color: #111; text-align: left; margin-top: 40px; } .book .book__bottom .r { color: var(--red); } /* --- Аудио-плеер: отрывок книги --- */ .book .book__audio { display: flex; align-items: center; gap: 16px; max-width: 500px; margin: 26px 0 0 auto; /* прижат вправо, как текст блока */ padding: 14px 18px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.10); text-align: left; } .book .book__audio-btn { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--red); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; } .book .book__audio-btn:hover { background: var(--red-hover); transform: scale(1.06); } .book .book__audio-btn svg { width: 22px; height: 22px; fill: #fff; display: block; } .book .book__audio-btn .ic-pause { display: none; } .book .book__audio.is-playing .ic-play { display: none; } .book .book__audio.is-playing .ic-pause { display: block; } .book .book__audio-body { flex: 1 1 auto; min-width: 0; } .book .book__audio-label { font-weight: 700; color: #111; font-size: 15px; margin-bottom: 9px; } .book .book__audio-bar { height: 6px; border-radius: 4px; background: rgba(0,0,0,.1); position: relative; overflow: hidden; cursor: pointer; } .book .book__audio-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); border-radius: 4px; transition: width .1s linear; } .book .book__audio-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 12.5px; color: #8a8a8a; } .book .book__audio-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; } @media (max-width: 991px) { .site .module.book > .container { padding: 48px 16px 56px; } .book .book__audio { margin-left: 0; max-width: none; } .book .book__cursor { width: 110px; top: 24px; right: 8px; } .book .book__title { font-size: clamp(24px,6.5vw,34px); text-align: left; overflow-wrap: break-word; } .book .book__text { text-align: left; } .book .book__media { margin-bottom: 12px; } .book .book__img { max-width: 320px; } .book .book__bottom { font-size: clamp(26px,7vw,40px); } } @media (max-width: 480px) { .book .book__audio { gap: 12px; padding: 12px 14px; } .book .book__audio-btn { width: 48px; height: 48px; } .book .book__audio-meta { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ============ 10 УДАРОВ ПО КОНКУРЕНТАМ (заставка программы) ============ */ .module.ten { --stage-h: 620px; color: #111; margin-top: 100px; } .site .module.ten > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 46px 20px 0; } /* --- Белая шапка --- */ .ten .ten__title { font-size: 40px; text-align: right; color: var(--red); margin: 0 0 16px; } .ten .ten__subtitle { font-size: 60px; text-align: left; color: #111; } .ten .ten__subtitle .r { color: var(--red); } /* Перчатки — декор в правом-верхнем углу */ .ten .ten__gloves { position: absolute; top: 54px; right: -20px; width: 190px; height: auto; z-index: 4; pointer-events: none; user-select: none; } /* Фон полосы — из design.image конфига (движковый .module-background) */ .module.ten .module-background.image { top: auto; bottom: 230px; height: 460px; } /* --- Полоса: row (текст col-6 + картинки col-6) --- */ .ten .ten__stage { position: relative; min-height: var(--stage-h); margin-top: 60px; margin-bottom: 100px; } /* Текст пункта */ .ten .ten__item { position: relative; z-index: 5; padding-top: 140px; /* padding-bottom: 50px; */ color: #fff; } .ten .ten__num { font-weight: 600; margin-bottom: 6px; } .ten .ten__lead { color: rgba(255,255,255,.85); max-width: 420px; margin-bottom: 26px; } .ten .ten__big { font-size: 40px; color: #fff; } /* Картинки: man — в потоке (задаёт высоту media), chess — поверх, прижата к низу (у них разные холсты 822×916 и 636×756 → клеим по нижней кромке, z-index выше) */ .ten .ten__media { position: relative; } .ten .ten__man { display: block; width: 100%; height: auto; margin-left: -170px; } .ten .ten__chess { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 2; } .ten .ten__man, .ten .ten__chess { pointer-events: none; user-select: none; } /* ============ Адаптив ============ */ @media (min-width: 992px) { /* картинки — col-6, absolute к полосе, правая половина, прижаты к низу */ .ten .ten__media { position: absolute; right: 0; bottom: 0; width: 50%; } } @media (max-width: 1199px) { .ten .ten__subtitle { font-size: 48px; } .ten .ten__big { font-size: 34px; } } @media (max-width: 991px) { .module.ten { margin-top: 0; } .site .module.ten > .container { padding: 28px 16px 0; } .ten .ten__title { text-align: left; } .ten .ten__subtitle { font-size: clamp(28px,8vw,40px); } .ten .ten__gloves { width: 92px; top: 8px; right: 12px; } .ten .ten__stage { min-height: auto; margin-top: 22px; margin-bottom: 40px; } .ten .ten__item { padding: 24px 16px 0; } .ten .ten__media { margin-top: 16px; } .ten .ten__big { font-size: clamp(24px,6.5vw,34px); } } /* ===== Мобильная доводка (custom_cloude): только <=991px, десктоп не трогаем ===== */ @media (max-width: 991px) { /* Красный заголовок-«шапка»: clamp, чтобы не переполнял 300px */ .ten .ten__title { font-size: clamp(22px, 6vw, 36px); line-height: 1.15; } /* Снимаем десктопный сдвиг картинки влево (иначе горизонтальный вылет за экран) */ .ten .ten__man { margin-left: 0; } /* Движковая фон-полоса на мобилке не совпадает с текстом — прячем и рисуем свою тёмную сцену */ .module.ten .module-background.image { display: none; } /* Тёмная «сцена» вокруг пункта и картинок — гарантирует читаемость белого текста */ .ten .ten__stage { background: var(--dark, #0d0d0d); border-radius: 16px; padding: 26px 16px 0; margin-top: 20px; margin-bottom: 40px; overflow: hidden; } .ten .ten__item { padding: 0 0 8px; } .ten .ten__lead { max-width: 100%; } .ten .ten__media { margin-top: 8px; } /* Шахматы — прижаты к правому нижнему углу, 70% ширины */ .ten .ten__chess { position: absolute; left: auto; right: 0; bottom: 0; width: 70%; height: auto; z-index: 2; } } /* ============ Программа 02 — Брендированные пространства (светлая) ============ */ .module.brand { color: #111; } .site .module.brand > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 130px 20px; } /* Декор — красный SVG (blocks/brand/002.svg) на ::after, за контентом */ .brand::after { content: url(/assets/images/blocks/brand/002.svg); position: absolute; z-index: 0; right: 0; top: 90%; width: 12vw; height: auto; pointer-events: none; } /* Красный декор показываем только от 1200px */ @media (max-width: 1199px) { .brand::after { content: none; display: none; } } .brand .brand__text, .brand .brand__media { position: relative; z-index: 1; } /* Текст (col-6) — заголовок → цифра → мелкий текст */ .brand .brand__title { font-size: 48px; color: #111; margin-bottom: 34px; } .brand .brand__title .r { color: var(--red); } .brand .brand__num { font-weight: 600; color: #111; margin-bottom: 8px; } .brand .brand__desc { color: #6a6a6a; max-width: 480px; } .brand .brand__desc b { color: #111; font-weight: 700; } /* Динамик (col-6) */ .brand .brand__media { display: flex; justify-content: center; position: relative; } .brand .brand__img { width: 100%; max-width: none; position: absolute; top: 0; transform: translateY(-50%); } @media (max-width: 991px) { .site .module.brand > .container { padding: 48px 16px; } .brand .brand__title { font-size: clamp(26px,7vw,40px); margin-bottom: 24px; overflow-wrap: break-word; } /* «доминирование:» не рвём посреди слова — целиком на своей строке */ .brand .brand__title .r { white-space: nowrap; } .brand .brand__desc { max-width: none; } .brand .brand__media { margin-top: 12px; } .brand .brand__img { position: static; transform: none; max-width: 360px; } } /* ============ Программа 03 — Кросс-маркетинг ============ */ /* Фото бильярда — в конфиге (design.image), высота блока — кнопкой 100vh (design.height=1). Никаких магических цифр высоты в CSS. */ .module.cross { color: #111; } /* vh100 центрирует контент флексом — тут не нужно, раскладку делаем сами. min-height = высота фото фона при полной ширине (001.jpg 1691×930) — чтобы фото не обрезалось */ .module.cross.vh100 { display: block; min-height: calc(100vw * 930 / 1691) !important; } .site .module.cross > .container { position: relative; max-width: var(--maxw); margin: 0 auto; min-height: inherit; /* на всю высоту блока */ padding: 40px 20px; } /* Текст — справа-сверху, поверх белой части фото */ .cross .cross__text { position: absolute; top: 40px; right: 20px; max-width: 620px; text-align: right; z-index: 2; } .cross .cross__title { font-size: 44px; color: #111; margin-bottom: 22px; } .cross .cross__title .r { color: var(--red); } .cross .cross__num { font-weight: 600; color: #111; margin-bottom: 8px; } .cross .cross__desc { color: #6a6a6a; max-width: 460px; margin-left: auto; } @media (max-width: 991px) { /* Фото бильярда — не на всю высоту, а полосой 240px в потоке (сверху), текст ниже */ .module.cross .module-background { position: relative; top: auto; bottom: auto; height: 240px; z-index: 0; } .module.cross.vh100 { min-height: 0 !important; } .site .module.cross > .container { padding: 48px 16px; } .cross .cross__title { font-size: clamp(24px,6.5vw,34px); margin-bottom: 16px; overflow-wrap: break-word; } /* текст — в поток, слева, читаемо поверх фото */ .cross .cross__text { position: static; max-width: none; text-align: left; text-shadow: 0 1px 3px rgba(255,255,255,.75); } .cross .cross__num { margin-bottom: 6px; } .cross .cross__desc { max-width: none; margin-left: 0; } } /* ============ Программа 04 — Событийный маркетинг (светлая) ============ */ .module.event { color: #111; } .site .module.event > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 60px 20px 56px; } /* Верхний заголовок */ .event .event__title { font-size: 48px; position: relative; z-index: 2; color: #111; max-width: 820px; } .event .event__title .r { color: var(--red); } /* Рупор — в натуральном потоке, без форсированных размеров/отступов */ .event .event__img { max-width: 100%; /* защита от горизонтального скролла */ height: auto; z-index: 1; } /* Нижний блок: цифра → подзаголовок → описание — всё справа */ .event .event__foot { position: relative; z-index: 2; text-align: right; } .event .event__num { font-weight: 600; } .event .event__title2 { font-size: 40px; color: #111; max-width: 900px; margin-left: auto; } .event .event__title2 .r { color: var(--red); } .event .event__desc { color: #6a6a6a; } @media (max-width: 991px) { .site .module.event > .container { padding: 48px 16px; } .event .event__title { font-size: clamp(28px,6.5vw,40px); overflow-wrap: break-word; } .event .event__title2 { font-size: clamp(24px,5.5vw,34px); margin-left: 0; max-width: none; overflow-wrap: break-word; } .event .event__img { width: 100%; margin: 8px auto; } .event .event__foot { text-align: left; } } /* ============ Программа 05 — Геймификация (красная секция) ============ */ /* Фон (красный + чёрная волна) — SVG в конфиге (design.image). Высота — vh100. */ .module.game.vh100 { display: block; } /* без флекс-центрирования обёртки */ /* Волна (SVG из конфига) — во всю ширину, растянута к низу */ .site .module.game .module-background.image { background-size: 100% 100% !important; background-position: center bottom !important; } .site .module.game > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 140px 20px 0; min-height: 100vh; display: flex; align-items: center; } /* Текст (col-6, слева) */ .game .game__item { position: relative; z-index: 2; color: #fff; } .game .game__num { font-weight: 600; color: #fff; margin-bottom: 8px; } .game .game__desc { color: rgba(255,255,255,.9); max-width: 520px; margin-bottom: 42px; } .game .game__title { font-size: 92px; color: #fff; margin-bottom: 20px; } .game .game__lead { font-size: 40px; color: #fff; margin-bottom: 40px; } .game .game__bottom { font-size: 72px; color: #fff; } /* Геймпад (col-6, справа) */ .game .game__media { position: relative; z-index: 1; text-align: center; } .game .game__pad { width: 100%; max-width: 540px; height: auto; pointer-events: none; user-select: none; position: absolute; /* top: 50%; */ transform: translateY(-40%); } @media (max-width: 1199px) { .game .game__title { font-size: 64px; } .game .game__lead { font-size: 30px; } .game .game__bottom { font-size: 52px; } } @media (max-width: 991px) { .site .module.game > .container { min-height: 0; padding: 48px 16px; display: block; } .game .game__desc { max-width: none; } .game .game__title { font-size: clamp(28px,8vw,64px); overflow-wrap: break-word; } .game .game__lead { font-size: clamp(20px,6vw,30px); overflow-wrap: break-word; } .game .game__bottom { font-size: clamp(28px,8vw,52px); overflow-wrap: break-word; } .game .game__media { margin-top: 24px; max-width: 320px; margin-left: auto; margin-right: auto; } .game .game__pad { position: static; transform: none; width: 100%; max-width: 100%; margin: 0 auto; } } /* Тёмная подложка под фон-картинку до 1200px */ @media (max-width: 1199px) { .site .module.game .module-background.image { background-color: #000; } } .module.game {padding:60px 0;} /* ============ Программа 06 — Нейросети (светлая) ============ */ .module.ai { color: #111; } .site .module.ai > .container { position: relative; } /* Роборука (col-8) */ .ai .ai__media { position: relative; } .ai .ai__media img { height: auto; display: block; position: absolute; right: 0; max-width: none; transform: translateY(-50%); } /* Текст (col-4, справа) */ .ai .ai__text { text-align: right; } .ai .ai__title { font-size: 48px; color: #111; margin-bottom: 24px; } .ai .ai__title .r { color: var(--red); } .ai .ai__num { font-weight: 600; color: #111; margin-bottom: 8px; } /* текст после цифры — по левому краю */ .ai .ai__list { color: #111; margin-bottom: 24px; text-align: left; } .ai .ai__list ol { margin: 0; padding-left: 1.3em; list-style: decimal; } .ai .ai__list li { margin: 0 0 14px; padding-left: 4px; } .ai .ai__desc { color: #6a6a6a; text-align: left; } @media (max-width: 991px) { /* Убираем нижний отступ модуля и дочернего контейнера */ .module.ai { margin-bottom: 0; padding-bottom: 0; } .site .module.ai > .container { padding: 48px 16px 0; } .ai .ai__title { font-size: clamp(26px,6.5vw,36px); overflow-wrap: break-word; } .ai .ai__text { text-align: left; } .ai .ai__desc { max-width: none; margin-left: 0; } .ai .ai__media img { position: static; transform: none; width: 100%; max-width: 100%; } } .module.ai {padding:60px 0;} /* ============ Программа 07 — Строим экосистемы ============ */ /* Белый верх с логотипами + тёмная полоса-сцена (row): текст col-6 + мужчина col-6. Фон полосы — inline background из content.stage_bg (конфиг не трогаем). */ .module.eco { --stage-h: 700px; --bg-top: 260px; /* насколько опустить фон, чтобы сверху была белая плашка над логотипами */ color: #111; } .site .module.eco > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 30px 20px 0; } /* Фон-картинка (движок) опущена вниз — верх остаётся белым (плашка над логотипами) */ .eco .module-background { top: var(--bg-top); } /* Логотипы — белый верх, на всю ширину */ .eco .eco__logos { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto 40px; } /* Тёмная полоса: row (текст col-6 + картинка col-6) */ .eco .eco__stage { position: relative; min-height: var(--stage-h); /* margin-bottom: 100px; */ color: #fff; } /* Текст: заголовок → цифра → мелкий текст */ .eco .eco__item { position: relative; z-index: 3; padding-top: 150px; padding-bottom: 56px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 4px 30px rgba(0,0,0,.8); } .eco .eco__big { font-size: 56px; color: #fff; max-width: 680px; margin-bottom: 20px; } .eco .eco__num { font-weight: 600; color: #fff; margin-bottom: 8px; } .eco .eco__desc { color: rgba(255,255,255,.85); max-width: 420px; } /* Мужчина с деньгами — прижат к низу своей половины */ .eco .eco__media { position: relative; } .eco .eco__man { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; } /* ============ Адаптив ============ */ @media (min-width: 992px) { /* картинка — full-bleed: вырывается на всю ширину вьюпорта, прижата к низу сцены */ .eco .eco__media { position: absolute; left: 50%; margin-left: -50vw; width: 100vw; bottom: 0; z-index: 1; max-width: none; } } @media (max-width: 991px) { .module.eco { --stage-h: auto; --bg-top: 150px; } .site .module.eco > .container { padding: 20px 16px 0; } .eco .eco__logos { max-width: 100%; margin-bottom: 20px; } .eco .eco__stage { min-height: 0; margin-bottom: 40px; } .eco .eco__item { padding: 24px 16px 0; } .eco .eco__media { margin-top: 16px; max-width: 420px; margin-left: auto; margin-right: auto; } .eco .eco__big { font-size: clamp(30px,8vw,44px); } } /* ===== Мобильная доводка (custom_cloude): только <=991px, десктоп не трогаем ===== */ @media (max-width: 991px) { .eco .eco__big { line-height: 1.14; } /* Опущенный движковый фон на мобилке заменяем плоской тёмной сценой (иначе белый заголовок на белом) */ .module.eco .module-background { display: none; } .eco .eco__stage { background: var(--dark, #0d0d0d); border-radius: 16px; padding: 28px 16px 0; overflow: hidden; } .eco .eco__item { padding: 0 0 20px; } .eco .eco__media { margin: 0 auto; max-width: 460px; } } /* ============ Программа 08 — Персонализация (светлая) ============ */ .module.person { color: #111; } .site .module.person > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 180px 20px; } /* Текст (col-7) — заголовок → цифра → мелкий текст → крупная строка */ .person .person__title { font-size: 44px; color: var(--red); margin-bottom: 22px; } .person .person__num { font-weight: 600; color: #111; margin-bottom: 8px; } .person .person__desc { color: #6a6a6a; text-align: left; max-width: 560px; } .person .person__big { font-size: 48px; color: #111; text-align: right; } /* Телефон (col-5) */ .person .person__media { display: flex; justify-content: center; position: relative; } .person .person__media img { position: absolute; transform: translateY(-50%); max-width: none; left: 0; } .person .person__img { } @media (max-width: 991px) { .site .module.person > .container { padding: 40px 16px; } .person .person__title { font-size: clamp(26px,6.5vw,36px); } .person .person__desc { text-align: left; max-width: none; } .person .person__big { font-size: clamp(26px,7vw,40px); text-align: left; } .person .person__media { margin-top: 12px; } .person .person__media img { position: static; transform: none; width: 100%; max-width: 320px; height: auto; } .person .person__title, .person .person__big { overflow-wrap: break-word; } } /* ============ Программа 09 — Голубой океан (тёмная полоса) ============ */ /* Крутилки: --band-h высота тёмной полосы, --man-h рост мужчины (торчит вверх). */ .module.vs { --band-h: 520px; --man-h: 660px; color: #fff; } .site .module.vs > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* Фон-картинку (движок) опускаем вниз */ .vs .module-background.image { top: 140px; } /* Контекст для мужчины/мусора/текста (море — фон модуля из конфига) */ .vs .vs__stage { position: relative; height: var(--band-h); } /* Летящий мусор (листья) — шире фона, торчит за края полосы */ .vs .vs__stage { overflow: visible; } .vs .vs__debris { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120vw; max-width: none; height: auto; z-index: 2; pointer-events: none; user-select: none; } /* Мужчина — по центру, торчит вверх из полосы */ .vs .vs__man { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); height: var(--man-h); width: auto; z-index: 3; pointer-events: none; user-select: none; } /* Текст — по центру полосы */ .vs .vs__item { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 5; text-align: left; padding: 0 20px; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 6px 34px rgba(0,0,0,.7); } .vs .vs__num { font-weight: 600; color: #fff; margin-bottom: 10px; } .vs .vs__title { font-size: 52px; color: #fff; text-align: left; line-height: 1.15; } .vs .vs__title .vs__first { display: block; } .vs .vs__title .vs__mid { display: block; text-align: center; margin: 12px 0; } .vs .vs__title .vs__last { display: block; text-align: right; } .vs .vs__desc { color: rgba(255,255,255,.85); max-width: 640px; margin: 16px 0 0; } @media (max-width: 1199px) { .vs .vs__title { font-size: 40px; } } @media (max-width: 991px) { .module.vs { --band-h: 420px; --man-h: 460px; } .site .module.vs > .container { padding: 0 16px 40px; } .vs .vs__stage { overflow: hidden; } .vs .vs__debris { width: 200%; } /* Текст — из абсолюта в поток под сценой, читаемая тёмная плашка */ .vs .vs__item { position: static; left: auto; right: auto; bottom: auto; margin-top: 20px; padding: 24px 20px; background: rgba(5, 5, 5, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 16px; text-align: center; text-shadow: none; } .vs .vs__title { font-size: clamp(26px,8vw,40px); text-align: center; } .vs .vs__title .vs__first, .vs .vs__title .vs__mid, .vs .vs__title .vs__last { text-align: center; margin: 6px 0; } .vs .vs__desc { max-width: none; margin: 12px auto 0; } } @media (max-width: 575px) { .module.vs { --band-h: 340px; --man-h: 380px; } .vs .vs__title { overflow-wrap: break-word; } } @media (max-width: 400px) { .module.vs { --band-h: 300px; --man-h: 330px; } } .module.vs {padding:100px 0;} /* ============ Программа 10 — Перезагрузка компании (светло-серая) ============ */ /* Экран с лицами — фоном (config design.image), 60% по центру. Сцена — row: текст col-6 + мужчина col-6 (на десктопе прижат к низу своей половины). */ /* Экран-фон: 60% по центру */ .site .module.reload .module-background.image { background-size: 60% !important; background-position: bottom !important; } /* градиент-оверлей: чёрный снизу гаснет к середине (движок ставит 100%, перебиваем на 50%) */ .site .module.reload .module-background.image .cover { background: linear-gradient(0deg, #000000 0%, #00000000 90%) !important; } .site .module.reload > .container { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 100px 20px 0; } /* Верхний заголовок */ .reload .reload__title { font-size: 44px; text-align: center; color: #1e1e1e; margin-bottom: 8px; } /* Сцена: row */ .reload .reload__stage { /* position: relative; */ /* min-height: 700px; */ /* margin-bottom: 40px; */ } /* Текст (col-6): крупный текст + описание */ .reload .reload__item { position: relative; z-index: 3; padding-top: 60px; padding-bottom: 60px; text-align: right; } .reload .reload__big { font-size: 44px; color: #fff; margin-bottom: 16px; } .reload .reload__desc { color: rgba(255,255,255,.9); max-width: 520px; margin-left: auto; } /* Мужчина — прижат к низу */ .reload .reload__media { position: relative; } .reload .reload__man { display: block; width: 100%; max-width: 35vw; height: auto; pointer-events: none; user-select: none; position: absolute; right: 50%; bottom: 0; } /* ============ Адаптив ============ */ @media (min-width: 992px) { .reload .reload__media { /* position: relative; */ /* bottom: 0; */ } } @media (max-width: 1199px) { .reload .reload__title { font-size: 34px; } .reload .reload__big { font-size: 34px; } } @media (max-width: 991px) { /* На мобиле — сплошной чёрный фон вместо фото, текст белый */ .module.reload { background: #000; color: #fff; } .site .module.reload .module-background.image { display: none; } .reload .reload__title { color: #fff; } .site .module.reload > .container { padding: 36px 16px 0; } .reload .reload__stage { min-height: 0; margin-bottom: 24px; } .reload .reload__item { padding: 24px 16px 0; } .reload .reload__media { margin-top: 16px; max-width: 320px; margin-left: auto; margin-right: auto; } .reload .reload__title { font-size: clamp(24px,6.5vw,32px); } .reload .reload__big { font-size: clamp(24px,6.5vw,32px); } .reload .reload__desc { max-width: none; } .reload .reload__man { position: static; right: auto; bottom: auto; transform: none; width: 100%; max-width: 100%; margin: 0 auto; } .reload .reload__item { text-align: left; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 4px 24px rgba(0,0,0,.7); } .reload .reload__desc { margin-left: 0; } .reload .reload__title { overflow-wrap: break-word; } } /* ============ ПЕРЕХОД: 18 СЕНТЯБРЯ / КТО ТАКОЙ (тёмная интрига) ============ */ .intro-who .iwho { position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; padding: 90px 0; color: #fff; } /* Красные «?» из конфига — screen-блендинг убирает чёрный фон картинки */ .site .module.intro-who .module-background.image { opacity: .6; mix-blend-mode: screen; } /* Портрет — справа, вырастает из темноты, левый край растворяется */ .intro-who .iwho__photo { position: absolute; right: 3%; bottom: 0; height: 112%; width: auto; object-fit: contain; object-position: bottom right; mix-blend-mode: lighten; /* чёрный фон фото становится прозрачным на чёрной секции */ -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 96%); mask-image: linear-gradient(to left, #000 55%, transparent 96%); pointer-events: none; user-select: none; z-index: 1; } /* Текстовый блок — слева */ .intro-who .iwho__inner { position: relative; z-index: 2; text-align: left; max-width: 700px; } .intro-who .iwho__over { font-size: 22px; letter-spacing: .03em; color: rgba(255,255,255,.6); margin-bottom: 22px; } .intro-who .iwho__date { font-size: 44px; color: rgba(255,255,255,.9); margin-bottom: 26px; } .intro-who .iwho__day { color: var(--red); } .intro-who .iwho__who { font-size: 64px; line-height: 1.08; color: #fff; } .intro-who .iwho__who .r { color: var(--red); } /* Соцсети — иконки */ .intro-who .iwho__socials { display: flex; gap: 14px; margin-top: 36px; } .intro-who .iwho__soc { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.28); color: #fff; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .intro-who .iwho__soc svg { width: 24px; height: 24px; fill: currentColor; display: block; } .intro-who .iwho__soc:hover { background: var(--red); border-color: var(--red); transform: translateY(-3px); color: #fff; } /* ============ Адаптив ============ */ @media (max-width: 1199px) { .intro-who .iwho__who { font-size: 52px; } .intro-who .iwho__photo { right: -4%; opacity: .8; } } @media (max-width: 991px) { .intro-who .iwho { min-height: 0; padding: 56px 0; } .intro-who .iwho__photo { right: -12%; height: 100%; opacity: .3; } .intro-who .iwho__inner { text-align: center; max-width: none; } .intro-who .iwho__over { font-size: 16px; margin-bottom: 14px; } .intro-who .iwho__date { font-size: clamp(30px,9vw,40px); margin-bottom: 16px; } .intro-who .iwho__who { font-size: clamp(34px,10vw,48px); } .intro-who .iwho__socials { justify-content: center; } } /* ============ Мобильная доводка (≤480 → 300px), десктоп не тронут ============ */ @media (max-width: 480px) { .intro-who .iwho { padding: 48px 0; } /* иконки соцсетей не переполняют узкий экран */ .intro-who .iwho__socials { gap: 10px; flex-wrap: wrap; } .intro-who .iwho__soc { width: 46px; height: 46px; } .intro-who .iwho__soc svg { width: 22px; height: 22px; } } /* ============ ПРОЕКТЫ (тёмная секция — фон из design.color конфига) ============ */ .projects { color: #fff; } /* Каждый проект — .row (контекст позиционирования для картинки) */ .projects .row { position: relative; padding: 90px 0; overflow: hidden; } /* --- Картинка проекта: правая половина, за текстом --- */ .projects .images { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 56%; border-radius: 16px; overflow: hidden; pointer-events: none; } .projects .images img { width: 100%; height: 100%; object-fit: contain; object-position: right center; } /* Градиент — картинка «утопает» в чёрный, текст читаем */ .projects .images::after { content: ""; position: absolute; inset: 0; border-radius: inherit; /* радиальный: центр прозрачный → края чернеют, острые края растворяются */ background: radial-gradient(ellipse at center, rgba(5,5,5,0) 42%, var(--black) 96%); } /* --- Слово-категория (золото): сверху, справа, свечение на тёмном --- */ .projects .projects__word-col { position: relative; z-index: 2; mix-blend-mode: screen; margin-bottom: 28px; text-align: left; } .projects .projects__word-img { max-width: min(540px, 78%); height: auto; display: block; margin-right: auto; } /* --- Текст --- */ .projects .projects__text-col { position: relative; z-index: 2; } .projects .projects__title { font-size: 56px; margin-bottom: 22px; color: #fff; } .projects .projects__p { color: rgba(255,255,255,.68); margin-bottom: 16px; max-width: 520px; } /* --- Миниатюры-видео: ряд карточек снизу --- */ .projects .row > .d-flex { position: relative; z-index: 2; margin-top: 44px; flex-wrap: wrap; } .projects .projects__thumb { position: relative; flex: 1 1 0; min-width: 200px; max-width: 340px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 16px 40px rgba(0,0,0,.45); transition: transform .35s ease; } .projects .projects__thumb:hover { transform: translateY(-4px); } .projects .projects__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .projects .projects__thumb:hover img { transform: scale(1.06); } /* --- Попап с VK-плеером --- */ .projects__modal .modal-content { background: #0d0d0d; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; } .projects__modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.1); } .projects__modal .modal-title { font-size: 20px; } .projects__modal .btn-close { filter: invert(1) grayscale(1); opacity: .8; } .projects__modal .modal-body { padding: 0; background: #000; } .projects__player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .projects__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Зигзаг: чётные проекты зеркалим (картинка слева, текст справа) --- */ @media (min-width: 992px) { .projects .row:nth-child(even) .images { right: auto; left: 0; } .projects .row:nth-child(even) .projects__text-col { margin-left: auto; text-align: right; } .projects .row:nth-child(even) .projects__p { margin-left: auto; } /* слово-категория справа только у чётных (совпадает со стороной текста) */ .projects .row:nth-child(even) .projects__word-col { text-align: right; } .projects .row:nth-child(even) .projects__word-img { margin-left: auto; margin-right: 0; } } /* ============ Адаптив ============ */ @media (max-width: 991px) { .projects .row { padding: 48px 0; } .projects .images { position: relative; width: 100%; height: auto; margin-top: 20px; } .projects .images::after { display: none; } .projects .images img { width: 100%; height: auto; object-fit: contain; object-position: center; } .projects .projects__title { font-size: clamp(32px, 9vw, 44px); } .projects .projects__thumb { min-width: 130px; } } /* ============ Мобильная доводка (≤991 → 300px), десктоп не тронут ============ */ @media (max-width: 991px) { .projects .projects__title { line-height: 1.12; } } @media (max-width: 575px) { .projects .row { padding: 44px 0; } .projects .projects__title { font-size: clamp(26px, 7.5vw, 40px); } .projects .projects__p { font-size: 16px; max-width: none; } .projects .projects__word-img { max-width: 82%; } .projects .row > .d-flex { margin-top: 28px; } /* Плитки-видео строго по 2 в ряд (gap bootstrap = 1rem), лишняя — на всю ширину */ .projects .projects__thumb { flex-basis: calc(50% - 8px); min-width: calc(50% - 8px); max-width: none; } } /* ============ ТАРИФЫ УЧАСТИЯ (плоская структура, движковый .container) ============ */ .module.tariffs { background: #fff; color: #111; } .site .module.tariffs > .container { max-width: var(--maxw); margin: 0 auto; padding: 80px 20px 70px; } /* Якорь быстрой ссылки «Тарифы» — с отступом под фикс-шапку (78px) */ .tariffs .tf__anchor { display: block; scroll-margin-top: 90px; } .tariffs .tf__title { text-align: center; font-size: 48px; color: #111; margin-bottom: 56px; } .tariffs .tf__title-red { color: var(--red); } /* Ряд карточек — стандартный bootstrap .row / .col */ .tariffs .tf__row { justify-content: center; row-gap: 40px; } /* Карточка .card.card-dark — тёмная, во всю высоту колонки */ .tariffs .tf__card { background: #0d0d0d; border: none; border-radius: 0; height: 100%; overflow: hidden; min-width: 0; } /* Шапка тарифа */ .tariffs .tf__head { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: #fff; padding: 28px 40px; border-bottom: 3px solid var(--red); } .tariffs .tf__card--black .tf__head { background: var(--red); border-bottom: none; } .tariffs .tf__price { padding: 24px 40px 20px; } .tariffs .tf__num { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: #fff; } .tariffs .tf__card--black .tf__num { color: var(--red); } .tariffs .tf__cur { color: var(--muted); } .tariffs .tf__bar { background: var(--red); color: #fff; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 12px 40px; } .tariffs .tf__feats { list-style: none; margin: 0; padding: 28px 40px; flex: 1 1 auto; } .tariffs .tf__feats li { position: relative; padding-left: 18px; margin-bottom: 16px; color: var(--muted); overflow-wrap: break-word; } .tariffs .tf__feats li b { color: #fff; font-weight: 700; } .tariffs .tf__feats li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } /* Две плашки-кнопки в ряд */ .tariffs .tf__actions { display: flex; gap: 12px; margin: 0 40px 40px; } .tariffs .tf__btn { flex: 1 1 0; min-width: 0; padding-left: 16px; padding-right: 16px; } /* «Забронировать» (форма) — обводка вместо заливки */ .tariffs .tf__btn--book { background: transparent; border: 1px solid rgba(255,255,255,.5); } .tariffs .tf__btn--book:hover { background: var(--red); border-color: var(--red); } .tariffs .tf__note { text-align: center; margin-top: 36px; color: #6a6a6a; } .tariffs .tf__note .r { color: var(--red); } @media (max-width: 767px) { .site .module.tariffs > .container { padding: 56px 20px; } .tariffs .tf__title { margin-bottom: 36px; font-size: clamp(26px, 7vw, 44px); line-height: 1.12; } .tariffs .tf__row { row-gap: 24px; } .tariffs .tf__head { padding: 22px 26px; } .tariffs .tf__price, .tariffs .tf__bar, .tariffs .tf__feats { padding-left: 26px; padding-right: 26px; } .tariffs .tf__num { font-size: clamp(30px, 9vw, 44px); } .tariffs .tf__actions { margin: 0 26px 30px; flex-direction: column; } } /* ============ РЕАЛИТИ «МАРКЕТИНГОВЫЙ ДЕСАНТ» ============ */ .reality .reality { background: #fff; color: #111; padding: 80px 0; } .reality .reality__title { font-size: 48px; color: #111; margin-bottom: 40px; } .reality .reality__title span { display: block; } .reality .reality__title-red { color: var(--red); } .reality .reality__media { border-radius: 8px; overflow: hidden; } .reality .reality__media img { width: 100%; display: block; object-fit: cover; } @media (max-width: 991px) { .reality .reality { padding: 56px 0; } .reality .reality__title { font-size: clamp(26px,6.5vw,38px); margin-bottom: 28px; } } /* ============ Мобильная доводка, десктоп не тронут ============ */ @media (max-width: 991px) { .reality .reality__title { line-height: 1.12; } } /* ============ ФИНАЛЬНЫЙ CTA + ГАЛЕРЕЯ (плоско, движковый .container) ============ */ .module.footer { background: #fff; color: #111; } .site .module.footer > .container { max-width: var(--maxw); margin: 0 auto; padding: 70px 20px; } /* --- CTA --- */ .footer .ftr__cta-photo { display: flex; flex-direction: column; gap: 16px; } /* Чёрный квадрат с логотипом организатора над фото Владимира */ .footer .ftr__cta-brandbox { background: #000; border-radius: 6px; height: 315px; display: flex; align-items: center; justify-content: center; padding: 6%; } .footer .ftr__cta-brandbox img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; } .footer .ftr__cta-portrait { width: 100%; border-radius: 6px; object-fit: cover; } .footer .ftr__cta-body { text-align: right; } .footer .ftr__cta-title { font-size: 48px; color: #111; margin-bottom: 14px; } .footer .ftr__cta-title span { display: block; } .footer .ftr__cta-seats { display: flex; justify-content: flex-end; margin-bottom: 24px; } .footer .ftr__cta-seats .cc-seats { color: #111; } .footer .ftr__cta-text { color: #555; margin-bottom: 26px; } /* Мета: дата / место / организатор */ .footer .ftr__cta-meta { border-top: 1px solid rgba(0,0,0,.1); padding-top: 22px; margin-bottom: 28px; } .footer .ftr__cta-date { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--red); margin-bottom: 6px; } .footer .ftr__cta-address { font-weight: 700; color: #111; margin-bottom: 10px; } .footer .ftr__cta-org { color: #555; } .footer .ftr__cta-org b { color: #111; font-weight: 700; } .footer .ftr__cta-org a { color: var(--red); white-space: nowrap; } .footer .ftr__cta-org a:hover { color: var(--red-hover); } /* Две кнопки-CTA */ .footer .ftr__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; } .footer .ftr__btn { flex: 0 0 auto; } /* «Забронировать» (форма) — обводка на светлом фоне */ .footer .ftr__actions .ftr__btn--book { background: transparent; border: 1px solid var(--red); color: var(--red); } .footer .ftr__actions .ftr__btn--book:hover { background: var(--red); border-color: var(--red); color: #fff; } /* --- Галерея зала --- */ .footer .ftr__hall { margin-top: 50px; } .footer .ftr__hall-item { border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; } .footer .ftr__hall-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .footer .ftr__hall-item:hover img { transform: scale(1.05); } /* ================= Адаптив ================= */ @media (max-width: 991px) { .site .module.footer > .container { padding: 48px 20px; } .footer .ftr__cta-title { font-size: clamp(28px,7vw,40px); } /* Фото: чёрный квадрат + портрет в строку */ .footer .ftr__cta-photo { flex-direction: row; align-items: stretch; gap: 12px; } .footer .ftr__cta-brandbox { height: auto; flex: 1 1 0; min-width: 0; } .footer .ftr__cta-portrait { flex: 1 1 0; min-width: 0; height: auto; align-self: stretch; } .footer .ftr__cta-body { text-align: left; } .footer .ftr__cta-seats { justify-content: flex-start; } .footer .ftr__actions { justify-content: flex-start; } .footer .ftr__hall { margin-top: 36px; } } @media (max-width: 767px) { .footer .ftr__cta-title { overflow-wrap: break-word; word-break: break-word; line-height: 1.12; } .footer .ftr__cta-date { font-size: clamp(24px,6vw,30px); } .footer .ftr__cta-org a { display: inline-block; padding: 6px 0; } } @media (max-width: 575px) { .site .module.footer > .container { padding: 44px 20px; } .footer .ftr__btn { flex: 1 1 100%; } /* кнопки на всю ширину — удобный тап-таргет */ } /* ============ ФИНАЛЬНЫЙ CTA + ПОДВАЛ (template footer-1) ============ */ .footer-1 { padding: 0; } /* --- CTA (светлый) --- */ .footer-1 .ftr__cta { background: #fff; color: #111; padding: 70px 0; } .footer-1 .ftr__cta-grid { display: flex; align-items: center; gap: 60px; } .footer-1 .ftr__cta-photo { flex: 0 0 40%; display: flex; flex-direction: column; gap: 16px; } /* Чёрный квадрат с логотипом организатора над фото Владимира */ .footer-1 .ftr__cta-brandbox { background: #000; border-radius: 6px; height: 315px; display: flex; align-items: center; justify-content: center; padding: 6%; } .footer-1 .ftr__cta-brandbox img { width: auto; height: auto; max-width: 80%; max-height: 80%; object-fit: contain; } .footer-1 .ftr__cta-portrait { width: 100%; border-radius: 6px; object-fit: cover; } .footer-1 .ftr__cta-body { flex: 1 1 auto; text-align: right; } .footer-1 .ftr__cta-title { font-size: 48px; color: #111; margin-bottom: 14px; } .footer-1 .ftr__cta-title span { display: block; } .footer-1 .ftr__cta-seats { display: flex; justify-content: flex-end; margin-bottom: 24px; } .footer-1 .ftr__cta-seats .cc-seats { color: #111; } .footer-1 .ftr__cta-text { color: #555; margin-bottom: 26px; } /* Мета: дата / место / организатор */ .footer-1 .ftr__cta-meta { border-top: 1px solid rgba(0,0,0,.1); padding-top: 22px; margin-bottom: 28px; } .footer-1 .ftr__cta-date { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--red); margin-bottom: 6px; } .footer-1 .ftr__cta-address { font-weight: 700; color: #111; margin-bottom: 10px; } .footer-1 .ftr__cta-org { color: #555; } .footer-1 .ftr__cta-org b { color: #111; font-weight: 700; } .footer-1 .ftr__cta-org a { color: var(--red); white-space: nowrap; } .footer-1 .ftr__cta-org a:hover { color: var(--red-hover); } /* --- Галерея зала --- */ .footer-1 .ftr__hall { background: #fff; padding: 0 0 70px; } .footer-1 .ftr__hall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .footer-1 .ftr__hall-item { border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; } .footer-1 .ftr__hall-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .footer-1 .ftr__hall-item:hover img { transform: scale(1.05); } /* --- Подвал (тёмный) --- */ .footer-1 .ftr__bottom { background: #0d0d0d; color: #fff; padding: 70px 0 40px; } .footer-1 .ftr__id { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; } .footer-1 .ftr__org-logo { flex: 0 0 auto; height: 250px; width: auto; order: 2; margin-left: auto; } .footer-1 .ftr__id-text .ftr__brand { margin-bottom: 12px; } .footer-1 .ftr__id-text .ftr__tagline { margin-bottom: 0; max-width: 720px; } .footer-1 .ftr__brand { font-size: 40px; color: var(--red); margin-bottom: 16px; } .footer-1 .ftr__tagline { max-width: 780px; color: var(--muted); margin-bottom: 48px; } .footer-1 .ftr__copy { text-align: center; color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.08); padding-top: 28px; } @media (max-width: 991px) { .footer-1 .ftr__cta { padding: 48px 0; } .footer-1 .ftr__cta-title { font-size: clamp(28px,7vw,40px); } .footer-1 .ftr__brand { font-size: clamp(26px,6.5vw,34px); } .footer-1 .ftr__cta-grid { flex-direction: column; gap: 28px; } /* Два изображения — в строку (чёрный квадрат + фото рядом) */ .footer-1 .ftr__cta-photo { width: 100%; flex: none; flex-direction: row; align-items: stretch; gap: 12px; } .footer-1 .ftr__cta-brandbox { height: auto; flex: 1 1 0; min-width: 0; } .footer-1 .ftr__cta-portrait { flex: 1 1 0; min-width: 0; height: auto; align-self: stretch; } .footer-1 .ftr__cta-body { text-align: left; } .footer-1 .ftr__cta-seats { justify-content: flex-start; } } /* --- Мобильная доводка: планшет и уже --- */ @media (max-width: 767px) { .footer-1 .ftr__hall { padding: 0 0 52px; } .footer-1 .ftr__hall-grid { grid-template-columns: 1fr; } .footer-1 .ftr__bottom { padding: 52px 0 36px; } .footer-1 .ftr__tagline { margin-bottom: 32px; } .footer-1 .ftr__cta-title, .footer-1 .ftr__brand { overflow-wrap: break-word; word-break: break-word; } .footer-1 .ftr__cta-title { line-height: 1.12; } .footer-1 .ftr__cta-date { font-size: clamp(24px,6vw,30px); } .footer-1 .ftr__cta-org a { display: inline-block; padding: 6px 0; } } @media (max-width: 575px) { .footer-1 .ftr__cta { padding: 44px 0; } .footer-1 .ftr__cta-grid { gap: 24px; } .footer-1 .ftr__cta-btn { width: 100%; } .footer-1 .ftr__id { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; } .footer-1 .ftr__org-logo { height: 120px; order: 0; margin-left: 0; } } /* ============ Плавающий «телефон» с видео (глобальный — выносится в body) ============ */ .vphone { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 116px; aspect-ratio: 9 / 19; border-radius: 22px; overflow: hidden; background: #000; border: 3px solid #0d0d0d; box-shadow: 0 12px 40px rgba(0,0,0,.45); } .vphone.is-hidden { display: none; } .vphone__trigger { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; position: relative; } .vphone__video { width: 100%; height: 100%; object-fit: cover; display: block; } .vphone__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(183,0,0,.92); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none; transition: transform .25s ease, background .25s ease; } .vphone__trigger:hover .vphone__play { transform: translate(-50%, -50%) scale(1.08); background: var(--red-hover); } .vphone__close { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: #0d0d0d; color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; } .vphone__close:hover { background: var(--red); border-color: var(--red); } @media (max-width: 575px) { .vphone { width: 84px; right: 12px; bottom: 12px; border-radius: 16px; border-width: 2px; } .vphone__play { width: 32px; height: 32px; font-size: 12px; } .vphone__close { width: 24px; height: 24px; top: -8px; right: -8px; } } /* ============ Кнопка «наверх» (глобальная — выносится в body) ============ */ .scrolltop { position: fixed; left: 20px; bottom: 20px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease; } .scrolltop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scrolltop:hover { background: var(--red-hover); } @media (max-width: 575px) { .scrolltop { left: 12px; bottom: 12px; width: 42px; height: 42px; font-size: 16px; } } [data-color="#ffffffFF"] {color:#ffffffFF} [data-color="#A2A2A2"] {color:#A2A2A2}