/* ========================================================================== production.css — LisaCreo Переопределения поверх Webflow / main.css. Webflow-файлы (main.css, webflow-*.js) не редактировать напрямую. Порядок подключения в : main.css → production.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CSS-переменные -------------------------------------------------------------------------- */ :root { --lc-accent: #E53F88; --lc-pink: #ff61a6; --_font-family---title-font: Raleway, sans-serif; --_font-family---text-font: Raleway, sans-serif; } /* -------------------------------------------------------------------------- 2. База — типографика, скролл, рендеринг -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; overflow-x: hidden; } /* Якорь «Контакты» — отступ под фиксированный .main-header (scrollIntoView / hash) */ #Contact-Section { scroll-margin-top: 96px; } @media (max-width: 991px) { #Contact-Section { scroll-margin-top: 80px; } } body { font-family: Raleway, sans-serif; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body :where(h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, textarea, select, label) { font-family: Raleway, sans-serif; } [class^="w-icon-"], [class*=" w-icon-"], .social-icon { font-family: webflow-icons, Arial, sans-serif !important; } img { max-width: 100%; } .page-wrapper { /* Webflow IX uses horizontal TRANSLATE ±120% (Service a-21, Gallery, …). clip/hidden on this ancestor flattens the scroll tween (cards appear “stuck”). Prefer site-wide horizontal discipline via inner sections (e.g. html/body) if needed. */ overflow: visible; } /* -------------------------------------------------------------------------- 2b. Marquee (#Marquee-Section) — radial glow under the image row -------------------------------------------------------------------------- */ /* * main.css (Webflow) uses left: calc(50% - 800px) on .bg.marquee-bg-three so the * glow matches a 1600px artboard. When #Marquee-Section .marquee-box is narrower * (992 / 768 / 390 …), that offset goes negative: the layer moves off the left, * but filter: blur(40px) still bleeds into the visible track — a dark/pink band. * The radial gradient is already centered at 50% 50%; anchor the layer to the box. * * Glow height: mobile 59px (Figma); tablet + desktop 150px (main.css / wide frames). * All breakpoint rules for this selector live here — avoid duplicating in large @media blocks below. */ #Marquee-Section .marquee-box { overflow: hidden; } #Marquee-Section .bg.marquee-bg-three { left: 0 !important; width: 100% !important; box-sizing: border-box; } @media (max-width: 767px) { /* Pink pill — Figma ~340×59, blur ~32.5px; beats main.css height: 150px */ #Marquee-Section .bg.marquee-bg-three { height: 59px !important; top: calc(50% - 29.5px) !important; filter: blur(32.514px) !important; -webkit-filter: blur(32.514px) !important; background-image: none !important; background-color: var(--lc-pink) !important; border-radius: 9999px !important; opacity: 1 !important; } } @media (min-width: 768px) and (max-width: 991px) { #Marquee-Section .bg.marquee-bg-three { height: 100px !important; top: calc(50% - 50px) !important; } } @media (min-width: 992px) { #Marquee-Section .bg.marquee-bg-three { height: 150px !important; top: calc(50% - 75px) !important; } } /* -------------------------------------------------------------------------- 3. Фоны секций (пути относительно css/) -------------------------------------------------------------------------- */ .bg.hero-bg { background-image: url("../assets/portfolio/main-img.jpg") !important; } .bg.start-your-brand-bg, .bg.project-info-bg { background-image: url("../assets/portfolio/start-your-brand.jpg") !important; } /* -------------------------------------------------------------------------- 4. Фокус и интерактивные элементы -------------------------------------------------------------------------- */ :where(a, button, input, textarea, select):focus-visible { outline: 2px solid rgba(255, 97, 166, 0.8); outline-offset: 3px; } .contact-input, .contact-button, .theme-button, .footer-list-link, .social-icon-link, .pricing-single, .project-single, .service-single, .process-single, .brands-gallery-card { -webkit-tap-highlight-color: transparent; } .contact-input { transition: border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms cubic-bezier(0.16, 1, 0.3, 1); } .contact-input:focus { border-color: rgba(255, 97, 166, 0.6); box-shadow: 0 0 0 4px rgba(255, 97, 166, 0.16); } .contact-button, .theme-button, .pricing-single, .project-single, .service-single, .process-single, .brands-gallery-card { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .pricing-single:hover, .project-single:hover, .service-single:hover, .process-single:hover, .brands-gallery-card:hover { transform: translateY(-4px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); } .contact-button:hover, .theme-button:hover { transform: translateY(-1px); filter: saturate(1.05) contrast(1.02); } /* Header CTA: nested text uses color !important; restore white on hover for IX slide text */ .header-btn:hover .theme-btn-text, .header-btn:hover .theme-btn-hover-text { color: #fff !important; } #Project-Section .theme-button--project-card:hover .theme-btn-text, #Project-Section .theme-button--project-card:hover .theme-btn-hover-text { color: #fff !important; } } .theme-btn-icon-box { background: #000 !important; border-radius: 999px; } .theme-button .theme-btn-bg { background: #000 !important; } /* Header CTA: keep icon circle square; IX still owns width on .theme-btn-bg */ .header-btn .theme-btn-icon-box { flex-shrink: 0; aspect-ratio: 1; box-sizing: border-box; } .w-form-done, .w-form-fail { border-radius: 20px; } /* -------------------------------------------------------------------------- 5. Медиа и иконки -------------------------------------------------------------------------- */ .brands-gallery-card img, .project-detail-image, .case-image-full, .case-image-grid img, .gallery-image, .project-image, .marquee-image, .process-image { background: #181818; } .project-video { display: block; object-fit: cover; width: 100%; height: 100%; } /* Видео-блок: высота всегда по соотношению сторон видео (2560×1440 = 16:9) */ #Project-Section .w-dyn-list .project-image-box { aspect-ratio: 16 / 9 !important; height: auto !important; } /* Секционный project-block с video.project-video: Figma div.project-image-box get_metadata 261:2563 = 704×561.54 (tablet), 261:3350 = 358×323 (phone). Перекрываем 16:9 только <992 — десктоп без изменений. */ @media (min-width: 768px) and (max-width: 991px) { #Project-Section .container.w-container > .w-dyn-list:not(.project-collection) .project-image-box, #Project-Section .project-image-box:has(.project-video) { aspect-ratio: 704 / 561.5399780273438 !important; height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 30px !important; overflow: hidden !important; } } @media (max-width: 767px) { #Project-Section .container.w-container > .w-dyn-list:not(.project-collection) .project-image-box, #Project-Section .project-image-box:has(.project-video) { aspect-ratio: 358 / 323 !important; height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 30px !important; overflow: hidden !important; } } /* Dot-иконка соцсетей (font-size:0 скрывает символ, ::before рисует кружок) */ .social-icon { font-family: Arial, sans-serif !important; font-size: 0 !important; } .social-icon::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 999px; background: var(--lc-accent); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.18); } /* -------------------------------------------------------------------------- 6. Прочие секции -------------------------------------------------------------------------- */ .ai-note-section { padding-top: clamp(64px, 8vw, 120px); } /* -------------------------------------------------------------------------- Service (#Service-Section) — базовая геометрия карточек / утилиты Точная типографика и отступы по брейкпоинтам — см. блоки ниже (Figma 411:600 …) -------------------------------------------------------------------------- */ #Service-Section.service-section { box-sizing: border-box; /* main.css .service-section uses overflow:hidden — clips IX a-21 horizontal slide (±120% X) */ overflow: visible !important; } /* Card uses overflow:hidden in main — clips 3D hover (a-32 rotateY on .service-icon-box) */ #Service-Section.service-section .service-block { overflow: visible !important; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { box-sizing: border-box; margin-bottom: 0 !important; } /* ≤991: Figma 261:3771 (390) — headline + сетка; без «Услуги», без текста aside/CTA. Figma 261:2974 (768) — только headline + сетка. */ /* ≥992: те же десктоп-фреймы — headline + grid; eyebrow, aside скрыты. */ @media (min-width: 992px) { #Service-Section.service-section .service-section-eyebrow, #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box > .service-section-heading-aside { display: none !important; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { column-gap: 0 !important; row-gap: 0 !important; } } @media (max-width: 991px) { #Service-Section.service-section .service-section-eyebrow, #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box > .service-section-heading-aside { display: none !important; } } #Service-Section.service-section .service-icon-box { flex-shrink: 0; border-radius: 40px !important; background-color: var(--lc-pink) !important; } #Service-Section.service-section .service-line { height: 2px !important; margin-bottom: 0 !important; } #Service-Section.service-section .service-content-box { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 0 1 auto; width: 100%; } #Service-Section.service-section .service-title { color: #fff !important; margin: 0 !important; font-weight: 600 !important; } #Service-Section.service-section .service-text { margin: 0 !important; /* never use opacity !important here — tram/IX cannot override it */ } #Service-Section.service-section .service-section-header-cta.theme-button { align-self: flex-start !important; background-color: #ff61a6 !important; color: #fff !important; border-radius: 30px !important; } #Service-Section.service-section .service-section-header-cta.theme-button .theme-btn-text, #Service-Section.service-section .service-section-header-cta.theme-button .theme-btn-hover-text { color: #fff !important; } @media (hover: hover) { #Service-Section.service-section .service-section-header-cta.theme-button:hover .theme-btn-text, #Service-Section.service-section .service-section-header-cta.theme-button:hover .theme-btn-hover-text { color: #fff !important; } } /* -------------------------------------------------------------------------- 7. Hero — итоговая раскладка -------------------------------------------------------------------------- Структура: .hero-content-box (display: block) └── .hero-left-box (flex-column) ├── .hero-title-outer (order: 1) → h1.hero-title └── .hero-text-box (order: 2) → h2.hero-title-two .banner-list-box (grid 4-col, сестра .hero-content-box) -------------------------------------------------------------------------- */ .hero-section, .hero-outer-box { min-height: 100svh; } .hero-outer-box { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; box-sizing: border-box !important; padding-top: clamp(80px, 9vh, 120px) !important; padding-bottom: clamp(48px, 7vh, 96px) !important; } .hero-outer-box > .container { width: min(100% - clamp(32px, 7vw, 136px), 1680px); } /* Внутренняя обёртка Hero — в Figma у узла 260:8 flex-col + gap 54 + px 12 */ .hero-inner { display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* Project: заголовок «# Почему мне доверяют» — hash и текст инлайн, одна строка */ #Project-Section .project-section-title { display: block; white-space: normal; box-sizing: border-box; width: 100%; max-width: 100%; } #Project-Section .project-section-title-hash, #Project-Section .project-section-title-lead { display: inline; } #Project-Section .project-section-title-hash { color: #e53f88; font-weight: 400; } /* Подзаголовок секции — «8 лет опыта...» (Figma: Regular, rgba white 0.86) */ #Project-Section .project-section-desc { font-family: Raleway, sans-serif; font-weight: 400; color: rgba(255, 255, 255, 0.86); letter-spacing: -0.72px; margin: 0; padding: 0; box-sizing: border-box; width: 100%; max-width: 100%; } /* Gallery: тот же паттерн, что #Project-Section (# Видеопродакшн + lead) */ #Gallery-Section .project-section-title { display: block; white-space: normal; box-sizing: border-box; width: 100%; max-width: 100%; } #Gallery-Section .project-section-title-hash, #Gallery-Section .project-section-title-lead { display: inline; } #Gallery-Section .project-section-title-hash { color: #e53f88; font-weight: 400; } #Gallery-Section .project-section-desc { font-family: Raleway, sans-serif; font-weight: 400; color: rgba(255, 255, 255, 0.86); letter-spacing: -0.72px; margin: 0; padding: 0; box-sizing: border-box; width: 100%; max-width: 100%; } /* IX масштабирует .hero-bg — якорим origin к верху, чтобы при scale не открывалась тёмная полоса под прозрачным хедером */ .hero-outer-box > .bg.hero-bg { transform-origin: 50% 0 !important; } .hero-content-box { display: block !important; width: 100%; margin-bottom: clamp(18px, 4vh, 56px) !important; } .hero-left-box { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: min(100%, 1320px) !important; max-width: 100% !important; gap: clamp(16px, 2.2vw, 32px) !important; } .hero-title-outer, .hero-title-box, .hero-title-box.two { position: relative !important; width: max-content !important; min-width: max-content !important; max-width: none !important; height: auto !important; align-self: flex-start !important; justify-self: start !important; margin-left: 0 !important; left: 0 !important; overflow: visible !important; } /* Заголовок идёт первым в flex-column */ .hero-title-outer { order: 1 !important; } /* hero-title-box.one — заглушка Webflow, не нужна */ .hero-title-box.one { display: none !important; } /* Маска reveal: clip-path раскрывается слева направо */ .hero-title-box.two { overflow: hidden !important; padding: 0.16em 0.9em 0.2em 0 !important; margin: -0.16em -0.9em -0.2em 0 !important; clip-path: inset(-0.12em 100% -0.16em 0); animation: heroTitleRevealSafe 2000ms cubic-bezier(0.19, 1, 0.22, 1) 180ms forwards !important; } .hero-title { display: block !important; width: max-content !important; max-width: none !important; font-size: clamp(76px, 11.2vw, 214px) !important; font-weight: 600 !important; line-height: 0.92 !important; letter-spacing: -0.055em !important; margin: 0 !important; white-space: nowrap !important; } /* Дескриптор появляется с задержкой через opacity-fade */ .hero-text-box { order: 2 !important; width: min(100%, 560px) !important; margin: 0 !important; padding: 0 !important; align-self: flex-start !important; justify-self: start !important; text-align: left !important; overflow: visible !important; clip-path: none !important; opacity: 0; animation: heroDescriptorFade 1000ms cubic-bezier(0.19, 1, 0.22, 1) 1180ms forwards !important; } .hero-title-two { font-size: clamp(13px, 1.6vw, 30px) !important; font-weight: 400 !important; line-height: 1.14 !important; letter-spacing: -0.022em !important; text-align: left !important; margin: 0 !important; opacity: 0.86 !important; white-space: nowrap !important; /* Защита от обрезания на узких экранах при nowrap */ max-width: 100% !important; } /* «Современный» — скрыт на всех брейкпойнтах */ .hero-modern-prefix { display: none !important; } /* -------------------------------------------------------------------------- 8. Banner-list (теги #01–04 в hero) -------------------------------------------------------------------------- */ .banner-list-box { width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 5vw, 96px) !important; row-gap: 16px !important; align-items: start !important; } .banner-list { width: auto !important; min-width: 0; opacity: 0; transform: translateY(10px); animation: heroSmallTitleFade 700ms cubic-bezier(0.19, 1, 0.22, 1) 2300ms forwards !important; } .banner-list:nth-child(2) { animation-delay: 2380ms !important; } .banner-list:nth-child(3) { animation-delay: 2460ms !important; } .banner-list:nth-child(4) { animation-delay: 2540ms !important; } .banner-list-count { font-size: clamp(11px, 0.82vw, 14px); line-height: 1.1; white-space: nowrap; margin-bottom: 4px; } /* Cтабильный отступ между «#» и цифрой, независимо от пробелов в HTML */ .banner-list-count-span { margin-right: 4px; } .banner-list-count-num { margin-left: 0; } .banner-list-text { font-size: clamp(12px, 0.88vw, 15px); line-height: 1.25; } /* -------------------------------------------------------------------------- 9. Хедер — навигация (Figma: без лого, пункты слева, кнопка справа) -------------------------------------------------------------------------- */ /* Базовые стили nav-ссылок — Figma: Medium (500), rgba(255,255,255,0.86) */ .header-menu-link .header-menu-text { font-weight: 500; color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 24px; white-space: nowrap; transition: color 200ms ease; } /* Активная страница — Figma: SemiBold (600), #fff */ .header-menu-link--active .header-menu-text { font-weight: 600 !important; color: #fff !important; } /* Hover у неактивных ссылок */ @media (hover: hover) { .header-menu-link:not(.header-menu-link--active):hover .header-menu-text { color: #fff; } } /* Gap между пунктами — Figma: 40px на всех десктоп брейкпойнтах */ .header-menu-box { display: flex !important; align-items: center !important; gap: 40px !important; } /* Иконка гамбургера: раньше глобально чёрнили через filter (розовый menu.svg на светлом). На моб. кнопке — белые линии на чёрном диске (menu-white.svg), filter уничтожает их. */ .header-menu-icon { filter: brightness(0) !important; } .mobile-menu-open-btn .header-menu-icon { filter: none !important; } /* Мобильное меню — активный пункт */ .mobile-dropdown-link--active .mobile-dropdown-title { font-weight: 600 !important; color: #fff !important; } .mobile-dropdown-link .mobile-dropdown-title { font-weight: 500; color: rgba(255, 255, 255, 0.86); } /* -------------------------------------------------------------------------- 9. Хедер — glass-эффект --------------------------------------------------------------------------
вынесен из .page-wrapper — иначе overflow:clip ломает backdrop-filter. JS (initHeaderGlassOnScroll) добавляет .lc-header-scrolled и сбрасывает inline-фоны, которые IX/tram вешает через style="background:...". -------------------------------------------------------------------------- */ /* Шапка всегда прозрачна — фон только через .lc-header-glass */ .main-header { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-bottom: 1px solid transparent; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Webflow иногда рисует фон через псевдоэлементы */ .main-header::before, .main-header::after { content: none !important; display: none !important; background: none !important; background-image: none !important; } /* Figma (264:4404): боковые отступы хедера = отступам секций на desktop */ @media (min-width: 1441px) { .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; padding-left: clamp(100px, 8.333vw, 160px) !important; padding-right: clamp(100px, 8.333vw, 160px) !important; } } /* Слой размытия — невидим до скролла */ .lc-header-glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; visibility: hidden; /* Короткий transition — меньше «мигания» у порога гистерезиса в JS */ transition: opacity 140ms ease-out, visibility 140ms ease-out; background-color: #ffffff26; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .main-header.lc-header-scrolled .lc-header-glass { opacity: 1; visibility: visible; } .main-header.lc-header-scrolled { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-bottom-color: transparent !important; } /* Контент шапки поверх glass-слоя */ .main-header .w-layout-blockcontainer { position: relative; z-index: 1; background-color: transparent !important; background-image: none !important; } /* header-main-box: горизонтальный flex, крайние элементы растянуты */ .main-header .header-main-box { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100%; background-color: transparent !important; background-image: none !important; } .main-header .header-menu-box, .main-header .header-button-box { background-color: transparent !important; background-image: none !important; } /* Гамбургер скрыт на десктопе; показывается только через @media ≤991px */ .mobile-menu-open-btn { display: none !important; } /* Figma 798:345 — диск 46px + иконка 22px в белом 56×56, r=28px (@media ≤991) */ .mobile-menu-open-disc { pointer-events: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: #000; } .main-header.lc-header-scrolled .w-layout-blockcontainer, .main-header.lc-header-scrolled .w-layout-blockcontainer.container, .main-header.lc-header-scrolled .header-main-box { background-color: transparent !important; background-image: none !important; } /* -------------------------------------------------------------------------- 10. Карусель клиентов -------------------------------------------------------------------------- */ .client-section .client-image { width: auto; max-width: 180px; height: 44px; object-fit: contain; object-position: center; } /* Точечная корректировка масштаба отдельных брендов */ .client-section .client-image[src*="1xbet.svg"] { transform: scale(0.808); transform-origin: center; } .client-section .client-image[src*="lenta.svg"] { transform: scale(1.15); transform-origin: center; } /* ========================================================================== МЕДИАЗАПРОСЫ ========================================================================== */ /* -------------------------------------------------------------------------- 1280–1440px — Figma 1440px breakpoint -------------------------------------------------------------------------- */ @media (min-width: 1280px) { .hero-modern-prefix { display: none !important; } .hero-outer-box { min-height: 100svh !important; padding-bottom: 63px !important; } .hero-inner { gap: 36px; } .hero-left-box { gap: 28px !important; } .hero-text-box { width: 687px !important; max-width: 100% !important; padding: 0 14px !important; box-sizing: border-box; } .hero-title { font-size: clamp(158px, 12.5vw, 180px) !important; letter-spacing: -0.044em !important; /* Figma 1440px: -8px / 180px = -0.044em */ } .hero-title-two { font-size: 24px !important; letter-spacing: -0.022em !important; white-space: nowrap !important; } .banner-list-box { column-gap: 72px !important; } .hero-section .banner-list-count { font-size: 12px; } .hero-section .banner-list-text { font-size: 13px !important; } /* Project desc — Figma 1440 (261:839): блок 969×120, инсеты 14px → max-width 969px */ #Project-Section .project-section-desc { font-size: 32px; line-height: 40px; max-width: 969px; padding: 0 14px; } /* ---------- Project-Section — Figma 261:835 (1440w) ---------- */ #Project-Section.project-section { padding-top: 150px; padding-left: 80px; padding-right: 80px; } #Project-Section .container.w-container { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; display: flex; flex-direction: column; align-items: center; /* Vertical stack gap: Figma 261:838 (1440w) = 139.9px; overridden at ≥1441 by 120px (260:126) */ gap: 139.9px; padding-bottom: 39.89px; } #Project-Section .sectitle-outer-box { width: 100%; justify-content: space-between; align-items: flex-end; margin-bottom: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } #Project-Section .project-section-sectitle-aside { display: none !important; } #Project-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; /* Figma 261:840: title ↔ desc gap 16px */ gap: 16px; min-width: 0; width: 100%; } #Project-Section .section-title-box .section-subtitle { font-size: 24px; line-height: 34px; margin-bottom: 0 !important; font-weight: 500; } #Project-Section .project-section-title { margin: 0 !important; padding: 0 14px !important; letter-spacing: -1px; color: #fff; font-weight: 600; white-space: normal; max-width: 969px; box-sizing: border-box; width: 100%; } #Project-Section .project-section-title-line { display: block; } #Project-Section .project-section-title-hash { font-weight: 400; font-size: 88px; /* Figma 1440px: 88px */ line-height: 76px; color: #ff61a6; /* Figma 1440px: #ff61a6 */ letter-spacing: -1.2px; vertical-align: baseline; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-weight: 600; font-size: 80px; /* Figma 1440px: 80px */ line-height: 76px; color: #fff; letter-spacing: -1.2px; } #Project-Section .project-block { width: 100%; grid-column-gap: 0 !important; grid-row-gap: 0 !important; /* Figma 261:848 / 261:865 (1440w): 90.02px image ↔ text */ gap: 90.02px !important; align-items: flex-end !important; overflow: visible; } /* Figma 261:865 / 261:882: row 2 pt 39.92px, row 3 (full bleed) pt 39.9px */ #Project-Section .container > .project-collection:nth-child(3) .project-block { padding-top: 39.92px; } #Project-Section .container > .w-dyn-list .project-block { padding-top: 39.9px; } #Project-Section .project-collection, #Project-Section .w-dyn-list { width: 100%; align-self: stretch; } #Project-Section .project-collection .w-dyn-items, #Project-Section .project-collection .w-dyn-item, #Project-Section .container.w-container > .w-dyn-list .w-dyn-items, #Project-Section .container.w-container > .w-dyn-list .w-dyn-item { margin: 0; padding: 0; list-style: none; } #Project-Section .project-image-box { flex: 1 1 0; width: auto; min-width: 0; min-height: 0; max-width: 720px; height: 520px; } #Project-Section .w-dyn-list .project-image-box { flex: 1 1 100%; max-width: none; width: 100%; aspect-ratio: 16 / 9; height: auto; } #Project-Section .project-content-box { flex: 0 0 auto !important; width: 360px !important; max-width: 360px !important; min-width: 280px; display: flex !important; flex-direction: column !important; /* Figma 261:851 / 261:866 (1440w): gap 12.6px between line → title → copy → button */ gap: 12.6px !important; } #Project-Section .project-content-box .project-line { height: 2px !important; border-radius: 10px !important; background-color: #ff61a6 !important; width: 100%; margin: 0 !important; } #Project-Section .project-content-box .project-title { margin: 0 !important; padding-top: 1px; font-size: 40px !important; line-height: 1.3 !important; font-weight: 600 !important; } #Project-Section .project-content-box .project-text { font-size: 14px !important; line-height: 1.7 !important; opacity: 0.8; margin: 0 !important; padding-bottom: 6px !important; font-weight: 400 !important; } #Project-Section .theme-button--project-card { height: auto !important; min-height: 0; padding: 14px 30px 14px 54px !important; border-radius: 30px !important; background-color: #ff61a6 !important; color: #fff !important; margin-top: 0 !important; align-self: flex-start; } #Project-Section .theme-button--project-card .theme-btn-bg, #Project-Section .theme-button--project-card .theme-btn-bg.orange, #Project-Section .theme-button--project-card .theme-btn-icon-box { width: 37px !important; height: 37px !important; left: 5px !important; top: 5px !important; } #Project-Section .theme-button--project-card .theme-btn-text, #Project-Section .theme-button--project-card .theme-btn-hover-text { font-size: 13px !important; line-height: 1.427 !important; font-weight: 600 !important; color: #fff !important; } } /* -------------------------------------------------------------------------- 1441px+ — Figma 261:681 (1920px frame) nav 20px, py 20px, кнопка 56px/18px, иконка 46px, padding 160px -------------------------------------------------------------------------- */ @media (min-width: 1441px) { /* Вертикальные отступы хедера */ .main-header .header-main-box { padding-top: 20px !important; padding-bottom: 20px !important; } /* Nav-ссылки */ .header-menu-link .header-menu-text { font-size: 16px !important; line-height: 24px !important; } /* Кнопка */ .header-btn.theme-button { height: 50px !important; padding: 5px 35px 5px 60px !important; border-radius: 30px !important; background-color: #fff !important; } /* Фон-пилюля: высота как у круга (40px), ширину задаёт IX (inline width / auto) */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; top: 5px !important; bottom: 5px !important; left: 5px !important; /* IX задаёт inline width; min-width гарантирует стартовый круг */ min-width: 40px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } /* Иконка-box: 40px (держим круг круглым при фикс. inline width=40) */ .header-btn .theme-btn-icon-box { width: 40px !important; height: 40px !important; left: 5px !important; top: 5px !important; /* Geometry-only: keep perfectly round at subpixel layouts */ min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background-color: #000 !important; } /* Текст кнопки */ .header-btn .theme-btn-text, .header-btn .theme-btn-hover-text { font-size: 16px !important; font-weight: 600 !important; color: #000 !important; white-space: nowrap !important; transition: color 150ms ease; } } /* 1441px+ — секция Hero по Figma 260:4 / внешний блок 260:5 */ @media (min-width: 1441px) { .hero-section { background-color: #141414; } .hero-outer-box { padding-top: clamp(80px, 9vh, 120px) !important; padding-bottom: 84px !important; padding-left: clamp(100px, 7.552vw, 145px) !important; padding-right: clamp(100px, 7.552vw, 145px) !important; min-height: 100svh !important; } .hero-modern-prefix { display: none !important; } .hero-outer-box > .bg.hero-overlay { opacity: 0.91 !important; } .hero-outer-box > .container { width: 100% !important; max-width: 1615px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .hero-inner { padding: 0; gap: 54px !important; } .hero-left-box { width: min(100%, 1320px) !important; max-width: 1600px; gap: 28px !important; } .hero-title { font-size: clamp(168px, 11.458333vw, 220px) !important; line-height: 0.835 !important; letter-spacing: -0.036em !important; } .hero-content-box { margin-bottom: 0 !important; } /* hero-text-box / h2.hero-title-two — Figma 260:17–260:19 (вложенный текст один ряд, w 726px) */ .hero-text-box { width: 697px !important; max-width: 100% !important; padding: 0 14px !important; box-sizing: border-box; overflow: visible !important; } .hero-title-two { font-size: 32px !important; line-height: 36px !important; letter-spacing: -0.022em !important; color: rgba(255, 255, 255, 0.86) !important; font-weight: 400 !important; white-space: nowrap !important; opacity: 1 !important; } .banner-list-box { padding: 0 14px !important; box-sizing: border-box; column-gap: 96px !important; row-gap: 16px !important; } .hero-section .banner-list { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; } .hero-section .banner-list-count { font-size: 14px; font-weight: 400; line-height: 1.1; margin-bottom: 0 !important; } .hero-section .banner-list-count-span { font-weight: 400; color: var(--lc-pink); } .hero-section .banner-list-count-num { font-weight: 600; color: #fff; } .hero-section .banner-list-text { font-size: 15px !important; line-height: 1.25 !important; margin-bottom: 0 !important; } /* Project desc — Figma 1920 (495:5): блок 957×108, слева 14px → max-width 957px */ #Project-Section .project-section-desc { font-size: 32px; line-height: 36px; max-width: 957px; padding: 0 0 0 14px; } /* ---------- Project-Section — Figma 260:123 (1920w) ---------- */ #Project-Section.project-section { padding-top: 150px; padding-left: clamp(100px, 8.333vw, 160px); padding-right: clamp(100px, 8.333vw, 160px); } /* Figma 260:126: inner strip width = 1920 − 160×2 = 1600 */ #Project-Section .container.w-container { max-width: 1600px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 26.82px; display: flex; flex-direction: column; align-items: center; gap: 120px; } #Project-Section .sectitle-outer-box { width: 100%; justify-content: center; align-items: flex-start; margin-bottom: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } #Project-Section .project-section-sectitle-aside { display: none !important; } #Project-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; width: 100%; } #Project-Section .section-title-box .section-subtitle { font-size: 30px; line-height: 42px; margin-bottom: 0 !important; font-weight: 500; } /* Title flush with column (260:131 x=0); copy inset only on .project-section-desc → 495:6 x=14 */ #Project-Section .project-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: 957px; box-sizing: border-box; width: 100%; } #Project-Section .project-section-title-line { display: block; } #Project-Section .project-section-title-hash { font-weight: 400; font-size: clamp(88px, 5.729vw, 110px); /* Figma: 110px@1920 / 88px@1440 */ line-height: clamp(76px, 4.167vw, 80px); /* Figma: 80px@1920 / 76px@1440 */ color: #e53f88; letter-spacing: -1.2px; vertical-align: baseline; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-weight: 600; font-size: clamp(80px, 5.208vw, 100px); /* Figma: 100px@1920 / 80px@1440 */ line-height: clamp(76px, 4.896vw, 94px); /* Figma: 94px@1920 / 76px@1440 */ color: #fff; letter-spacing: -1.2px; } #Project-Section .project-section-title-second { display: block; } /* ---------- Gallery (#Gallery-Section) — Figma 411:582 (1920w) ---------- */ #Gallery-Section.gallery-section { padding-top: 150px; padding-left: clamp(100px, 8.333vw, 160px); padding-right: clamp(100px, 8.333vw, 160px); /* Mirror Figma flex-col gap-[80px]: sectitle ↔ grid (no extra margin collapse) */ display: flex; flex-direction: column; align-items: stretch; gap: 80px; } #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { grid-column-gap: 0; grid-row-gap: 0; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; box-sizing: border-box; } #Gallery-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; width: 100%; } /* Figma 504:34 / 504:35: h2 без горизонтального инсета; px-[14px] только у подзаголовка (504:36) */ #Gallery-Section .project-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: none; box-sizing: border-box; width: 100%; } #Gallery-Section .project-section-title-hash { font-weight: 400; font-size: clamp(88px, 5.729vw, 110px); line-height: clamp(76px, 4.167vw, 80px); color: #e53f88; letter-spacing: -1.2px; vertical-align: baseline; } #Gallery-Section .project-section-title-lead { font-weight: 600; font-size: clamp(80px, 5.208vw, 100px); line-height: clamp(76px, 4.896vw, 94px); color: #fff; letter-spacing: -1.2px; } #Gallery-Section .project-section-desc { font-size: 32px; line-height: 36px; max-width: 901px; padding: 0 0 0 14px; } /* Контентная полоса 1920 − 160×2 = 1600px; сетка gallery — w-full внутри px-[160px] (411:582) */ #Gallery-Section .container.w-container { max-width: 1600px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; } #Gallery-Section .gallery-grid { grid-column-gap: 20px; grid-row-gap: 20px; } /* ---------- Marquee (#Marquee-Section) — Figma 411:667 секция / 411:673 .marquee-box (1920w) ---------- */ #Marquee-Section.marquee-section { padding-top: 150px; padding-bottom: 150px; padding-left: clamp(100px, 8.333vw, 160px); padding-right: clamp(100px, 8.333vw, 160px); display: flex; flex-direction: column; align-items: stretch; gap: 80px; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { grid-column-gap: 0; grid-row-gap: 0; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; box-sizing: border-box; text-align: left; } #Marquee-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; width: 100%; } #Marquee-Section .marquee-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: none; box-sizing: border-box; width: 100%; } #Marquee-Section .marquee-section-title-hash { font-weight: 400; font-size: clamp(88px, 5.729vw, 110px); line-height: clamp(76px, 4.167vw, 80px); color: #e53f88; letter-spacing: -1.2px; vertical-align: baseline; } #Marquee-Section .marquee-section-title-lead { font-weight: 600; font-size: clamp(80px, 5.208vw, 100px); line-height: clamp(76px, 4.896vw, 94px); color: #fff; letter-spacing: -1.2px; } #Marquee-Section .marquee-section-desc { font-family: var(--_font-family---text-font); font-size: 32px; line-height: 36px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); font-weight: 400; max-width: 901px; margin: 0; padding: 0 0 0 14px; box-sizing: border-box; } #Marquee-Section .marquee-box { margin-top: 0 !important; align-self: center; max-width: 1600px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* Figma 411:673 .marquee-inner-box: абсолютные inset left −289.33px / right +289.33px при ширине полосы 1600px → сдвиг ряда влево на −18.083% ширины .marquee-box */ #Marquee-Section .marquee-inner-box { margin-left: -18.083%; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 280px; height: 400px; } /* ---------- Service (#Service-Section) — Figma 411:600 (1920w frame) ---------- */ #Service-Section.service-section { display: flex; flex-direction: column; align-items: stretch; gap: 80px; padding-top: 150px !important; padding-bottom: 150px !important; padding-left: clamp(80px, 7.552vw, 145px) !important; padding-right: clamp(80px, 7.552vw, 145px) !important; } /* Заголовок # — синхронизация с Gallery/Marquee 1920: hash #e53f88 clamp 88→110 */ #Service-Section.service-section .service-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: none !important; } #Service-Section.service-section .service-section-title-hash { font-weight: 400 !important; font-size: clamp(88px, 5.729vw, 110px) !important; line-height: clamp(76px, 4.167vw, 80px) !important; color: #e53f88 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Service-Section.service-section .service-section-title-lead { font-weight: 600 !important; font-size: clamp(80px, 5.208vw, 100px) !important; line-height: clamp(76px, 4.896vw, 94px) !important; color: #fff !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .container.w-container { max-width: 1630px; margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 15px !important; } #Service-Section.service-section .service-grid { grid-template-columns: 1fr 1fr 1fr !important; grid-column-gap: 20px !important; grid-row-gap: 20px !important; width: 100%; } #Service-Section.service-section .service-icon-box { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; } #Service-Section.service-section .service-line { background-color: #e53f88 !important; } #Service-Section.service-section .service-title { font-size: 48px !important; line-height: 48px !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .service-text { font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; } #Service-Section.service-section .service-block { min-height: 500px !important; padding: 40px !important; } /* Image–text gutters: Figma 260:136 gap 92.85px; row 261:2 overridden to 93px */ #Project-Section .project-block { width: 100%; grid-column-gap: 0 !important; grid-row-gap: 0 !important; gap: 92.85px !important; align-items: flex-end !important; overflow: visible; } #Project-Section .project-collection, #Project-Section .w-dyn-list { width: 100%; align-self: stretch; } /* Webflow CMS wrappers — убираем дефолтные отступы списков между рядами */ #Project-Section .project-collection .w-dyn-items, #Project-Section .project-collection .w-dyn-item, #Project-Section .container.w-container > .w-dyn-list .w-dyn-items, #Project-Section .container.w-container > .w-dyn-list .w-dyn-item { margin: 0; padding: 0; list-style: none; } #Project-Section .container > .project-collection:nth-child(2) .project-block { padding-top: 0; } #Project-Section .container > .project-collection:nth-child(3) .project-block { padding-top: 27.98px; gap: 93px !important; justify-content: flex-end; } #Project-Section .container > .w-dyn-list .project-block { padding-top: 26.2px; justify-content: center; align-items: flex-end !important; } #Project-Section .project-image-box { flex: 1 1 0; width: auto; min-width: 0; min-height: 0; max-width: 947px; height: clamp(480px, 38.7vw, 743px); } #Project-Section .w-dyn-list .project-image-box { flex: 1 1 100%; max-width: none; width: 100%; aspect-ratio: 16 / 9; height: auto; } #Project-Section .project-content-box { flex: 0 0 auto !important; width: 414px !important; max-width: 415px !important; min-width: 280px; display: flex !important; flex-direction: column !important; gap: 8px !important; } #Project-Section .project-content-box .project-line { height: 2px !important; border-radius: 10px !important; background-color: #ff61a6 !important; width: 100%; margin: 0 !important; } #Project-Section .project-content-box .project-title { margin: 0 !important; padding-top: 1px; font-size: 48px !important; /* Figma 260:142 / 261:6: leading 48px на одну строку — убирает лишний вертикальный «воздух» над колонкой */ line-height: 48px !important; font-weight: 600 !important; } /* Figma 260:143–144: 16px / 26px line-height */ #Project-Section .project-content-box .project-text { font-size: 16px !important; line-height: 26px !important; opacity: 0.8; margin: 0 !important; padding-bottom: 6.35px !important; font-weight: 400 !important; } #Project-Section .project-text-line { display: block; } #Project-Section .theme-button--project-card { height: auto !important; min-height: 0; padding: 13.93px 32.5px 13.93px 55.71px !important; border-radius: 30px !important; background-color: #ff61a6 !important; color: #fff !important; margin-top: 0 !important; align-self: flex-start; } #Project-Section .theme-button--project-card .theme-btn-bg, #Project-Section .theme-button--project-card .theme-btn-bg.orange { width: 37.14px !important; height: 37.14px !important; left: 4.64px !important; top: 4.64px !important; right: auto !important; bottom: auto !important; border-radius: 20px !important; inset: 4.64px auto auto 4.64px !important; background-color: #000 !important; background-image: none !important; } #Project-Section .theme-button--project-card .theme-btn-icon-box { left: 4.64px !important; top: 4.64px !important; width: 37.14px !important; height: 37.14px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } #Project-Section .theme-button--project-card .theme-btn-icon, #Project-Section .theme-button--project-card .theme-btn-hover-icon { width: 18.57px !important; height: 18.57px !important; } #Project-Section .theme-button--project-card .theme-btn-text, #Project-Section .theme-button--project-card .theme-btn-hover-text { font-size: 13px !important; line-height: 1.427 !important; font-weight: 600 !important; color: #fff !important; } } /* ≥1551px — заголовок Project: убираем max-width 957px из Figma 1920, чтобы clamp-шрифт помещал «# Почему мне доверяют» в одну строку (иначе «доверяют» уезжало). */ @media (min-width: 1551px) { #Project-Section .project-section-title { max-width: none; } #Gallery-Section .project-section-title { max-width: none; } #Marquee-Section .marquee-section-title { max-width: none; } } /* -------------------------------------------------------------------------- 1280–1440px — Figma 261:1542 (1440px frame) nav 16px, py 15px, кнопка 48px/16px, иконка 40px, padding 80px -------------------------------------------------------------------------- */ @media (min-width: 1280px) and (max-width: 1440px) { /* Боковые отступы */ .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; padding-left: 80px !important; padding-right: 80px !important; } /* Вертикальные отступы (высота хедера ~84px = btn 48 + py 15×2 + 6) */ .main-header .header-main-box { padding-top: 15px !important; padding-bottom: 15px !important; } /* Nav-ссылки: 16px (переопределяем 20px из 1441px+) */ .header-menu-link .header-menu-text { font-size: 16px !important; line-height: 24px !important; } /* Кнопка */ .header-btn.theme-button { height: 48px !important; padding: 5px 35px 5px 60px !important; border-radius: 30px !important; background-color: #fff !important; } /* Фон-пилюля: вертикально заполняет отступы кнопки (48 − 4 − 4 = 40px, как иконка) */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; left: 5px !important; top: 4px !important; bottom: 4px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } .header-btn .theme-btn-icon-box { width: 40px !important; height: 40px !important; left: 5px !important; top: 4px !important; border-radius: 999px !important; background-color: #000 !important; } /* Текст кнопки */ .header-btn .theme-btn-text, .header-btn .theme-btn-hover-text { font-size: 16px !important; font-weight: 600 !important; color: #000 !important; white-space: nowrap !important; } /* ---------- Gallery (#Gallery-Section) — Figma 261:904 (1440w frame) ---------- */ #Gallery-Section.gallery-section { padding-top: 150px; padding-left: 80px; padding-right: 80px; display: flex; flex-direction: column; align-items: stretch; gap: 80px; } #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { grid-column-gap: 0; grid-row-gap: 0; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; box-sizing: border-box; } #Gallery-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; width: 100%; } #Gallery-Section .project-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: none; box-sizing: border-box; width: 100%; } #Gallery-Section .project-section-title-hash { font-weight: 400; font-size: 88px; line-height: 80px; color: #ff61a6; letter-spacing: -1.2px; vertical-align: baseline; } #Gallery-Section .project-section-title-lead { font-weight: 600; font-size: 80px; line-height: 80px; color: #fff; letter-spacing: -1.2px; } #Gallery-Section .project-section-desc { font-size: 32px; line-height: 36px; letter-spacing: -0.72px; max-width: 901px; padding: 0 14px; } #Gallery-Section .container.w-container { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; } /* Figma 261:905: gap-x/y 20px */ #Gallery-Section .gallery-grid { grid-column-gap: 20px; grid-row-gap: 20px; } /* ---------- Marquee (#Marquee-Section) — Figma 517:4274 (1440w frame) ---------- */ #Marquee-Section.marquee-section { padding-top: 150px; padding-bottom: 150px; padding-left: 80px; padding-right: 80px; display: flex; flex-direction: column; align-items: stretch; gap: 80px; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { grid-column-gap: 0; grid-row-gap: 0; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; box-sizing: border-box; text-align: left; } #Marquee-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; width: 100%; } #Marquee-Section .marquee-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: none; box-sizing: border-box; width: 100%; } #Marquee-Section .marquee-section-title-hash { font-weight: 400; font-size: 88px; line-height: 80px; color: #ff61a6; letter-spacing: -1.2px; vertical-align: baseline; } #Marquee-Section .marquee-section-title-lead { font-weight: 600; font-size: 80px; line-height: 80px; color: #fff; letter-spacing: -1.2px; } #Marquee-Section .marquee-section-desc { font-family: var(--_font-family---text-font); font-size: 32px; line-height: 36px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); font-weight: 400; max-width: 901px; margin: 0; padding: 0 14px; box-sizing: border-box; } #Marquee-Section .marquee-box { margin-top: 0 !important; align-self: center; max-width: 1600px; width: 100%; margin-left: auto; margin-right: auto; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 280px; height: 400px; } /* ---------- Service (#Service-Section) — Figma 261:1302 (1440w) ---------- */ #Service-Section.service-section { display: flex; flex-direction: column; align-items: stretch; gap: 80px; padding-top: 150px !important; padding-bottom: 150px !important; padding-left: 80px !important; padding-right: 80px !important; } #Service-Section.service-section .service-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: none !important; } #Service-Section.service-section .service-section-title-hash { font-weight: 400 !important; font-size: 88px !important; line-height: 80px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Service-Section.service-section .service-section-title-lead { font-weight: 600 !important; font-size: 80px !important; line-height: 80px !important; color: #fff !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .container.w-container { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 15px !important; } #Service-Section.service-section .service-grid { grid-template-columns: 1fr 1fr 1fr !important; grid-column-gap: 20px !important; grid-row-gap: 20px !important; width: 100%; } #Service-Section.service-section .service-icon-box { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; } #Service-Section.service-section .service-line { background-color: #e53f88 !important; } #Service-Section.service-section .service-title { font-size: 44px !important; line-height: 48px !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .service-text { font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; } #Service-Section.service-section .service-block { min-height: 500px !important; padding: 40px !important; } } /* -------------------------------------------------------------------------- ≥1440px — заголовки секций: +20px снизу под title-stack (скриншоты). Ниже существующего padding-bottom нет (0 в правилах ≥1280 / title-stack gap на .section-title-box). -------------------------------------------------------------------------- */ @media (min-width: 1440px) { #Project-Section h2.project-section-title, #Project-Section #Project-Section-Title, #Gallery-Section .project-section-title, #Gallery-Section #Gallery-Section-Title, #Marquee-Section .marquee-section-title, #Marquee-Section #Marquee-Section-Title { padding-bottom: 20px !important; } } /* -------------------------------------------------------------------------- 992–1279px — header/nav from 992px frame (e.g. 261:2391); Project/Gallery hero copy metrics from 1024 frame nodes 504:17–504:21, 261:1749 nav 16px, py 15px, кнопка 48px/16px, иконка 40px, padding 60px -------------------------------------------------------------------------- */ @media (min-width: 992px) and (max-width: 1279px) { /* Боковые отступы */ .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; padding-left: 60px !important; padding-right: 60px !important; } /* Вертикальные отступы */ .main-header .header-main-box { padding-top: 15px !important; padding-bottom: 15px !important; } /* Nav-ссылки: 16px */ .header-menu-link .header-menu-text { font-size: 16px !important; line-height: 24px !important; } /* Кнопка */ .header-btn.theme-button { height: 48px !important; padding: 5px 35px 5px 60px !important; border-radius: 30px !important; background-color: #fff !important; } /* Фон-пилюля: 48 − 5 − 3 = 40px под иконку 40×40 при top 5px */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; left: 5px !important; top: 5px !important; bottom: 3px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } .header-btn .theme-btn-icon-box { width: 40px !important; height: 40px !important; left: 5px !important; top: 5px !important; border-radius: 999px !important; background-color: #000 !important; } /* Project desc — Figma 1024 (504:21): блок 842×96, инсеты 14px */ #Project-Section .project-section-desc { font-size: 24px; line-height: 32px; max-width: 842px; padding: 0 14px; } /* Project Section: 2-колоночный layout с уменьшенным gap */ #Project-Section.project-section { padding-top: 110px; padding-left: 60px; padding-right: 60px; } #Project-Section .container.w-container { max-width: 1180px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 60px; } #Project-Section .sectitle-outer-box { width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } #Project-Section .project-section-sectitle-aside { display: none !important; } #Project-Section .section-title-box.mb-zero { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; /* Figma 504:18 (1024): title block 92px, copy starts y=108 → gap 16px */ gap: 16px; min-width: 0; width: 100%; } #Project-Section .section-title-box .section-subtitle { font-size: 20px; line-height: 28px; margin-bottom: 0 !important; font-weight: 500; } #Project-Section .project-section-title { margin: 0 !important; padding: 0 14px !important; letter-spacing: -0.8px; color: #fff; font-weight: 600; white-space: normal; max-width: 842px; box-sizing: border-box; width: 100%; } #Project-Section .project-section-title-line { display: block; } #Project-Section .project-section-title-hash { font-weight: 400; font-size: 68px; /* Figma 992px: 68px */ line-height: 68px; color: #ff61a6; letter-spacing: -1.2px; vertical-align: baseline; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-weight: 600; font-size: 60px; /* Figma 992px: 60px */ line-height: 76px; color: #fff; letter-spacing: -1.2px; } /* Gallery — Figma 261:1749 (1024w frame → band 992–1279) */ #Gallery-Section.gallery-section { padding-top: 150px; padding-left: 60px; padding-right: 60px; } #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 80px; padding-left: 0; padding-right: 0; } #Gallery-Section .section-title-box.mb-zero { gap: 16px; } #Gallery-Section .project-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: 904px; box-sizing: border-box; width: 100%; } #Gallery-Section .project-section-title-hash { font-weight: 400; font-size: 68px; line-height: 76px; color: #ff61a6; letter-spacing: -1.2px; vertical-align: baseline; } #Gallery-Section .project-section-title-lead { font-weight: 600; font-size: 60px; line-height: 76px; color: #fff; letter-spacing: -1.2px; } #Gallery-Section .project-section-desc { font-size: 24px; line-height: 32px; letter-spacing: -0.72px; max-width: 901px; padding: 0 14px; } #Gallery-Section .container.w-container { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; } /* Marquee — Figma 261:2300 (1024w → band 992–1279) */ #Marquee-Section.marquee-section { padding-top: 150px; padding-bottom: 150px; padding-left: 60px; padding-right: 60px; display: flex; flex-direction: column; align-items: stretch; gap: 80px; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; text-align: left; } #Marquee-Section .marquee-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: 904px; box-sizing: border-box; width: 100%; } #Marquee-Section .marquee-section-title-hash { font-weight: 400; font-size: 68px; line-height: 76px; color: #ff61a6; letter-spacing: -1.2px; vertical-align: baseline; } #Marquee-Section .marquee-section-title-lead { font-weight: 600; font-size: 60px; line-height: 76px; color: #fff; letter-spacing: -1.2px; } #Marquee-Section .marquee-section-desc { font-family: var(--_font-family---text-font); font-size: 24px; line-height: 32px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); font-weight: 400; max-width: 901px; margin: 0; padding: 0 14px; box-sizing: border-box; } #Marquee-Section .marquee-box { margin-top: 0 !important; align-self: center; max-width: 1180px; width: 100%; margin-left: auto; margin-right: auto; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 280px !important; height: 400px !important; } /* ---------- Service (#Service-Section) — Figma 261:2150 (1024w band) ---------- */ #Service-Section.service-section { display: flex; flex-direction: column; align-items: stretch; gap: 80px; padding-top: 150px !important; padding-bottom: 150px !important; padding-left: 60px !important; padding-right: 60px !important; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { margin-bottom: 0 !important; } #Service-Section.service-section .service-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: 904px !important; } #Service-Section.service-section .service-section-title-hash { font-weight: 400 !important; font-size: 68px !important; line-height: 76px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Service-Section.service-section .service-section-title-lead { font-weight: 600 !important; font-size: 60px !important; line-height: 76px !important; color: #fff !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .container.w-container { max-width: 1180px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 15px !important; } #Service-Section.service-section .service-grid { grid-template-columns: 1fr 1fr 1fr !important; grid-column-gap: 20px !important; grid-row-gap: 20px !important; width: 100%; } #Service-Section.service-section .service-icon-box { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; } #Service-Section.service-section .service-line { background-color: #e53f88 !important; } #Service-Section.service-section .service-title { font-size: 32px !important; line-height: 42px !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .service-text { font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; } /* Третья карточка «Креативы» — Figma body 14px / 25.2px */ #Service-Section.service-section .service-block.three .service-text { font-size: 14px !important; line-height: 25.2px !important; } #Service-Section.service-section .service-block { min-height: 454px !important; padding: 30px !important; } #Project-Section .project-block { width: 100%; grid-column-gap: 0 !important; grid-row-gap: 0 !important; gap: 60px !important; align-items: flex-end !important; overflow: visible; flex-direction: row; } #Project-Section .project-collection, #Project-Section .w-dyn-list { width: 100%; align-self: stretch; } #Project-Section .project-image-box { flex: 1 1 0 !important; width: auto !important; min-width: 0; min-height: 0; max-width: 620px; height: 460px !important; } #Project-Section .w-dyn-list .project-image-box { flex: 1 1 100% !important; max-width: none; width: 100%; aspect-ratio: 16 / 9; height: auto !important; } #Project-Section .project-content-box { flex: 0 0 auto !important; width: 320px !important; max-width: 320px !important; min-width: 280px; display: flex !important; flex-direction: column !important; gap: 8px !important; } #Project-Section .project-content-box .project-line { height: 2px !important; border-radius: 10px !important; background-color: #ff61a6 !important; width: 100%; margin: 0 !important; } #Project-Section .project-content-box .project-title { margin: 0 !important; padding-top: 1px; font-size: 34px !important; line-height: 1.3 !important; font-weight: 600 !important; } #Project-Section .project-content-box .project-text { font-size: 14px !important; line-height: 1.65 !important; opacity: 0.8; margin: 0 !important; padding-bottom: 6px !important; font-weight: 400 !important; } #Project-Section .theme-button--project-card { height: auto !important; min-height: 0; padding: 12px 26px 12px 50px !important; border-radius: 28px !important; background-color: #ff61a6 !important; color: #fff !important; margin-top: 0 !important; align-self: flex-start; } #Project-Section .theme-button--project-card .theme-btn-bg, #Project-Section .theme-button--project-card .theme-btn-bg.orange, #Project-Section .theme-button--project-card .theme-btn-icon-box { width: 34px !important; height: 34px !important; left: 5px !important; top: 5px !important; } #Project-Section .theme-button--project-card .theme-btn-text, #Project-Section .theme-button--project-card .theme-btn-hover-text { font-size: 13px !important; line-height: 1.4 !important; font-weight: 600 !important; color: #fff !important; } } /* -------------------------------------------------------------------------- ≤991px — Mobile / tablet column layout (Figma 261:2516 @768 + узкие ширины) -------------------------------------------------------------------------- */ @media (max-width: 991px) { #Project-Section.project-section { padding-left: 32px; padding-right: 32px; } /* Flex gap задаёт title→cards; убираем лишний margin из main.css (.sectitle-outer-box) */ #Project-Section .sectitle-outer-box { margin-bottom: 0 !important; } /* Gallery — Figma 261:2585: column gap 60px (title stack ↔ grid), items-center */ #Gallery-Section.gallery-section { display: flex; flex-direction: column; align-items: center; gap: 60px; padding-top: 120px; padding-left: 32px; padding-right: 32px; } /* Service — Figma 261:2975 (~768 tablet grid); заголовок + 2 колонки в ≤991; деталь 768–991 см. блок ниже */ #Service-Section.service-section { display: flex; flex-direction: column; align-items: center; gap: 60px; padding-top: 120px !important; padding-bottom: 120px !important; padding-left: 32px !important; padding-right: 32px !important; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { width: 100%; max-width: 704px; margin-bottom: 0 !important; justify-content: flex-start !important; column-gap: 0 !important; row-gap: 0 !important; } #Service-Section.service-section .section-title-box.mb-zero { gap: 8px; width: 100%; } #Service-Section.service-section .service-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: 100% !important; } #Service-Section.service-section .service-section-title-hash { font-weight: 400 !important; font-size: 68px !important; line-height: 76px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Service-Section.service-section .service-section-title-lead { font-weight: 600 !important; font-size: 56px !important; line-height: 62px !important; color: #fff !important; letter-spacing: -1.2px !important; } /* Marquee — те же font-weight / letter-spacing, что Service, на всём ≤991 (в т.ч. мобила ≤767). Иначе без min-width 768 вложенного блока заголовок остаётся на h2/main.css (700). */ #Marquee-Section .marquee-section-title, #Marquee-Section #Marquee-Section-Title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: 100% !important; } #Marquee-Section .marquee-section-title-hash { font-weight: 400 !important; font-size: 68px !important; line-height: 76px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Marquee-Section .marquee-section-title-lead { font-weight: 600 !important; font-size: 56px !important; line-height: 62px !important; color: #fff !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .container.w-container { max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; padding-left: 0 !important; padding-right: 0 !important; } #Service-Section.service-section .service-grid { grid-template-columns: 1fr 1fr !important; grid-column-gap: 20px !important; grid-row-gap: 20px !important; width: 100%; } #Service-Section.service-section .service-icon-box { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important; } #Service-Section.service-section .service-line { background-color: #d54793 !important; } #Service-Section.service-section .service-title { font-size: 28px !important; line-height: 39.2px !important; letter-spacing: -1.2px !important; } #Service-Section.service-section .service-text { font-size: 14px !important; line-height: 24px !important; font-weight: 400 !important; } #Service-Section.service-section .service-block { min-height: 400px !important; padding: 30px !important; } #Project-Section .container.w-container { padding-left: 0 !important; padding-right: 0 !important; display: flex !important; flex-direction: column !important; gap: 89.5px !important; padding-bottom: 19.23px !important; } /* Figma 525:4740: h2 92px high, hero-text y=108 → 16px title ↔ desc */ #Project-Section .section-title-box.mb-zero { gap: 16px; } /* Header: ровно 16px от края экрана (без суммирования с width: min(100% - 32px) у .container) */ .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; width: 100% !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important; } /* === Project Section — Figma 261:2516 (768px tablet) === Три части (артисты, бренды, секционный заголовок) без видео. */ /* Project block: gap 28px image ↔ content (Figma gap-[27.87px]) */ #Project-Section .project-block { gap: 28px !important; align-items: stretch !important; } /* Artist & brand image boxes: 557px (Figma), не затрагиваем видео */ #Project-Section .project-collection.w-dyn-list .project-image-box { height: 557px !important; border-radius: 30px !important; width: 100% !important; flex: none !important; min-height: 0 !important; } /* Content box: flex-col, gap 13px (line → title → text → button). order:0 сбрасывает main.css ≤991px order:-1, который поднимает content НАД image. Figma: image first, content below. */ #Project-Section .project-content-box { order: 0 !important; display: flex !important; flex-direction: column !important; gap: 13px !important; width: 100% !important; max-width: 100% !important; } /* Line: 2px (main.css base имеет 5px) */ #Project-Section .project-content-box .project-line { height: 2px !important; background-color: #d54793 !important; border-radius: 10px !important; } /* Title: Figma 32px / 36px lh */ #Project-Section .project-content-box .project-title { font-size: 32px !important; line-height: 36px !important; font-weight: 600 !important; margin: 0 !important; } /* Text: Figma 14px / 24px; нижний инсет до кнопки ~6.3px (261:2534) */ #Project-Section .project-content-box .project-text { font-size: 14px !important; line-height: 24px !important; margin: 0 !important; padding-bottom: 6.3px !important; } /* Кнопка «Подробнее» — те же паттерны, что у pink CTA; IX задаёт ширину .theme-btn-bg */ #Project-Section .project-content-box .theme-button--project-card { height: auto !important; padding: 13.94px 32.52px 13.94px 55.75px !important; border-radius: 30px !important; background-color: #ff61a6 !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 600 !important; align-self: flex-start !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; position: relative !important; } #Project-Section .project-content-box .theme-btn-text, #Project-Section .project-content-box .theme-btn-hover-text { font-size: 13px !important; line-height: 18.58px !important; font-weight: 600 !important; color: #fff !important; } /* Sliding fill (IX hover): удерживаем в icon-size на рест-стейте (261:2537 чёрная подложка) */ #Project-Section .project-content-box .theme-btn-bg { width: 37.16px !important; height: 37.16px !important; border-radius: 20px !important; top: 4.65px !important; left: 4.65px !important; right: auto !important; bottom: auto !important; background-color: #000 !important; } /* Иконка-круг: как у Обсудить — чёрный диск под белой стрелкой */ #Project-Section .project-content-box .theme-btn-icon-box { width: 37.16px !important; height: 37.16px !important; border-radius: 999px !important; left: 4.65px !important; top: 4.65px !important; background-color: #000 !important; } /* Стрелка внутри: ~18.58px как в Figma */ #Project-Section .project-content-box .theme-btn-icon, #Project-Section .project-content-box .theme-btn-hover-icon { width: 18.58px !important; height: 18.58px !important; } /* Заголовок секции — та же колонка 704px, что и описание */ #Project-Section .project-section-title { margin: 0 !important; padding: 0 14px !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; max-width: 704px; box-sizing: border-box; width: 100%; } /* Project desc — Figma 768 (525:4743): блок 704×128, текст 676px + по 14px */ #Project-Section .project-section-desc { font-size: 24px; line-height: 32px; letter-spacing: -0.72px; max-width: 704px; padding: 0 14px; } /* Figma 768px: заголовок секции */ #Project-Section .project-section-title-hash { font-size: 56px !important; line-height: 64px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-size: 56px !important; line-height: 62px !important; letter-spacing: -1.2px !important; } /* Figma 261:2585: sectitle-outer-box = w-full. Без width:100% при align-items:center на секции блок сжимается до ширины содержимого (≤704px) и центрируется — на 800–991px заголовок сдвигается вправо относительно сетки карточек. */ #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { width: 100%; margin-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; } /* Figma 261:2585: section-title-box column gap 8px, полная ширина */ #Gallery-Section .section-title-box.mb-zero { width: 100%; gap: 8px; } #Gallery-Section .project-section-title { margin: 0 !important; padding: 0 !important; letter-spacing: -1.2px; color: #fff; font-weight: 600; white-space: normal; width: 100%; box-sizing: border-box; } #Gallery-Section .project-section-desc { font-size: 24px; line-height: 32px; letter-spacing: -0.72px; padding: 0 14px; } /* Gallery «# Видеопродакшн»: fluid type — one line @320px; ~56/68px by wide ≤991 */ #Gallery-Section .project-section-title-hash { font-size: clamp(20px, 6.05vw + 10px, 68px) !important; line-height: 1.07 !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Gallery-Section .project-section-title-lead { font-size: clamp(18px, 5.2vw + 8.5px, 56px) !important; line-height: 1.07 !important; letter-spacing: -1.2px !important; } } /* 992–1279px — Figma 992px breakpoint */ @media (max-width: 1279px) { .hero-outer-box { min-height: 100svh !important; padding-bottom: 48px !important; } .hero-inner { gap: 26px !important; } .hero-left-box { gap: 20px !important; } .hero-text-box { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .hero-title { font-size: clamp(96px, 12.5vw, 154px) !important; letter-spacing: -0.049em !important; } /* Figma 992px и 1440px оба показывают 24px — фиксируем точно */ .hero-title-two { font-size: 24px !important; line-height: 28px !important; letter-spacing: -0.022em !important; white-space: nowrap !important; } .banner-list-box { column-gap: 51px !important; } .hero-section .banner-list-count { font-size: 11px; } .hero-section .banner-list-text { font-size: 12px !important; } /* Header CTA «Обсудить проект»: 16px для всего диапазона ≤1279px (ниже не дублировать font-size) */ .header-btn .theme-btn-text-box { line-height: 20px !important; min-height: 20px !important; } .header-btn .theme-btn-text, .header-btn .theme-btn-hover-text { font-size: 16px !important; line-height: 20px !important; font-weight: 600 !important; color: #000 !important; white-space: nowrap !important; } } /* ≤991px — планшет; десктоп-меню скрыто, видна кнопка мобильного меню */ @media (max-width: 991px) { .container { width: min(100% - 32px, 100%); } .hero-title, .project-info-title, .section-title { word-break: normal; overflow-wrap: normal; } .hero-outer-box { min-height: 100svh !important; padding-bottom: 72px !important; } .hero-inner { gap: 56px !important; } .hero-left-box { gap: 14px !important; } .hero-text-box { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .hero-title { font-size: clamp(72px, 12.5vw, 100px) !important; letter-spacing: -0.051em !important; } /* Figma 768px breakpoint: 24px */ .hero-title-two { font-size: 24px !important; line-height: 28px !important; letter-spacing: -0.022em !important; white-space: nowrap !important; } .banner-list-box { column-gap: 38px !important; } .hero-section .banner-list-count { font-size: 11px; } .hero-section .banner-list-text { font-size: 12px !important; } /* Явно дублируем glass для планшета (включая 768px), чтобы перебить возможные inline-стили от IX */ .main-header.lc-header-scrolled .lc-header-glass { opacity: 1; visibility: visible; background-color: #ffffff26; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } .main-header.lc-header-scrolled .w-layout-blockcontainer, .main-header.lc-header-scrolled .header-main-box { background-color: transparent !important; background-image: none !important; } } /* -------------------------------------------------------------------------- ≤991px — Figma 261:3966 (390px frame): мобильный хедер Nav скрыт. Бургер СЛЕВА, кнопка СПРАВА через flex row-reverse. -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* Скрываем десктопную навигацию */ .main-header .header-menu-box { display: none !important; } /* Полноэкранный контейнер мобильного меню в main.css: top/right + width:100%. При translateX(-100%) у .mobile-menu / .mobile-menu-bg (особенно backdrop-filter) WebKit иногда даёт полупрозрачную полоску по левому краю — фиксируем якорём inset и отсекаем содержимое вне области. */ .mobile-menu-outer { inset: 0; width: auto; height: auto; overflow: hidden; } /* Показываем гамбургер — Figma 798:345 */ .mobile-menu-open-btn { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; cursor: pointer; box-sizing: border-box; overflow: clip; width: 56px !important; height: 56px !important; padding: 0 !important; background-color: #fff !important; border-radius: 28px !important; } .mobile-menu-open-disc { width: 46px !important; height: 46px !important; } .mobile-menu-open-btn .header-menu-icon { width: 22px !important; height: 22px !important; display: block; flex-shrink: 0; } /* Верхняя строка выезжающего меню: X + LisaCreo подряд с фиксированным зазором */ .mobile-logo-box { justify-content: flex-start !important; gap: 12px; } /* button-box: бургер DOM-последним → row-reverse визуально ставит его СЛЕВА, а кнопку (DOM-первую) СПРАВА; space-between раздвигает до краёв */ .header-button-box { display: flex !important; align-items: center !important; flex-direction: row-reverse !important; justify-content: space-between !important; width: 100% !important; gap: 0 !important; } /* Показываем кнопку */ .header-btn { display: inline-flex !important; flex-shrink: 0; } /* Кнопка — 390px Figma: h=35px, pl=42px, pr=25px, py=3.5px, r=21px */ .header-btn.theme-button { height: 35px !important; padding: 3.5px 25px 3.5px 42px !important; border-radius: 21px !important; background-color: #fff !important; align-items: center !important; } /* Фон-пилюля: совпадает по высоте с кругом 28px */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; left: 3.5px !important; top: 3.5px !important; bottom: 3.5px !important; /* IX задаёт inline width; min-width гарантирует стартовый круг */ min-width: 28px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } .header-btn .theme-btn-icon-box { width: 28px !important; height: 28px !important; left: 3.5px !important; top: 3.5px !important; /* Geometry-only: keep perfectly round at subpixel layouts */ min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background-color: #000 !important; } /* Вертикальные отступы (390px Figma: py=12px) */ .main-header .header-main-box { padding-top: 12px !important; padding-bottom: 12px !important; } } /* -------------------------------------------------------------------------- 768–991px — Figma 261:3179 (768px frame): планшет Переопределяет размеры из ≤991px блока выше. Бургер Figma 798:345 (56×56, диск 46), кнопка CTA 56px, py 15px; горизонтальный gutter — см. ≤991px. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991px) { /* Вертикальные отступы (768px Figma: py=15px, container h=96px) */ .main-header .header-main-box { padding-top: 15px !important; padding-bottom: 15px !important; } /* Гамбургер — Figma 798:345 */ .mobile-menu-open-btn { width: 56px !important; height: 56px !important; border-radius: 28px !important; } .mobile-menu-open-disc { width: 46px !important; height: 46px !important; } .mobile-menu-open-btn .header-menu-icon { filter: none !important; width: 22px !important; height: 22px !important; } /* Кнопка: h=56px, pl=60px, pr=35px, r=30px */ .header-btn.theme-button { display: inline-flex !important; height: 56px !important; padding: 5px 35px 5px 60px !important; border-radius: 30px !important; align-items: center !important; box-sizing: border-box; } /* Фон-пилюля: та же высота, что и иконка 46px (56 − 5 − 5) */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; left: 5px !important; top: 5px !important; bottom: 5px !important; /* IX задаёт inline width; min-width гарантирует стартовый круг */ min-width: 46px !important; border-radius: 999px !important; } .header-btn .theme-btn-icon-box { width: 46px !important; height: 46px !important; left: 5px !important; top: 5px !important; /* Geometry-only: keep perfectly round at subpixel layouts */ min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; } /* Marquee — планшет 768–991 (фрейм «Визуалы» 768 в задаче = Gallery; ключ к сетке здесь px 32). Заголовок + desc — как #Service-Section: flex-start на секции, колонка в .sectitle-outer-box, без лишнего inset у desc. */ #Marquee-Section.marquee-section { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding-top: 120px; padding-bottom: 120px; padding-left: 32px; padding-right: 32px; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0; width: 100%; max-width: 704px; text-align: left; padding-left: 0; padding-right: 0; } #Marquee-Section .section-title-box.mb-zero { gap: 8px; text-align: left; width: 100%; } #Marquee-Section .marquee-section-title, #Marquee-Section #Marquee-Section-Title { display: block; text-align: left; margin: 0 !important; padding: 0 !important; padding-bottom: 16px !important; letter-spacing: -1.2px !important; color: #fff !important; font-weight: 600 !important; white-space: normal !important; max-width: 100%; } #Marquee-Section .marquee-section-title-hash { margin: 0 !important; font-weight: 400 !important; font-size: 68px !important; line-height: 76px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; vertical-align: baseline; } #Marquee-Section .marquee-section-title-lead { margin: 0 !important; font-weight: 600 !important; font-size: 56px !important; line-height: 62px !important; color: #fff !important; letter-spacing: -1.2px !important; } #Marquee-Section .marquee-section-desc { text-align: left; font-size: 24px; line-height: 32px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); max-width: 100%; padding: 0; margin: 0; box-sizing: border-box; } #Marquee-Section .marquee-box { margin-top: 0 !important; max-width: none; width: 100%; align-self: stretch; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 200px !important; height: auto !important; aspect-ratio: 280 / 400; } /* +16px под h2 перед desc; переопределяет padding:0 из ≤991 на Gallery / Project */ #Gallery-Section .project-section-title, #Gallery-Section #Gallery-Section-Title, #Project-Section h2.project-section-title, #Project-Section #Project-Section-Title { padding-bottom: 16px !important; } /* Gallery — tablet title: fixed sizes; lh aligned with #Marquee-Section spans in this @media */ #Gallery-Section .project-section-title-hash { font-size: 68px !important; line-height: 76px !important; } #Gallery-Section .project-section-title-lead { font-size: 56px !important; line-height: 62px !important; } /* Service — 768–991: как Marquee (text-align в .sectitle) + Gallery (flex-start в .sectitle-outer-box). ≤991 задаёт align-items:center на секции — центрирует узкий title-wrap относительно полной ширины сетки. */ #Service-Section.service-section { align-items: flex-start; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-left: 0; padding-right: 0; margin-bottom: 0 !important; } #Service-Section.service-section .section-title-box.mb-zero { text-align: left; width: 100%; } #Service-Section.service-section .service-section-title, #Service-Section #Service-Section-Title { text-align: left; } #Service-Section.service-section .container.w-container { align-self: stretch; width: 100%; } /* ---------- Service — Figma 261:2975 (768 frame): 2×342 + gap 20 в полосе 704px ---------- */ #Service-Section.service-section .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-column-gap: 20px !important; grid-row-gap: 20px !important; width: 100%; overflow-x: clip; isolation: isolate; } /* «Креативы»: скрыта на планшете; на ≤767 и ≥992 три карточки видимы в других @media */ #Service-Section .service-block.three { display: none !important; } /* IX a-21 «Service Scroll»: ±120% X ломает планшет — как Gallery ≤991: fade + translateY, reveal через JS .lc-reveal */ #Service-Section.service-section .service-grid > .service-block { opacity: 0; transform: translateY(40px) !important; transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } #Service-Section.service-section .service-grid > .service-block.lc-reveal { opacity: 1; transform: none !important; will-change: auto; } } /* ≤767px — мобильный / граница планшета */ @media (max-width: 767px) { /* Header: 16px от края экрана (как ≤991px) */ .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; width: 100% !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important; } .main-header .header-main-box { padding-top: 15px !important; padding-bottom: 15px !important; } .mobile-menu-open-btn { width: 56px !important; height: 56px !important; border-radius: 28px !important; } .mobile-menu-open-disc { width: 46px !important; height: 46px !important; } .mobile-menu-open-btn .header-menu-icon { filter: none !important; width: 22px !important; height: 22px !important; } .header-btn.theme-button { display: inline-flex !important; height: 56px !important; padding: 5px 35px 5px 60px !important; border-radius: 30px !important; align-items: center !important; box-sizing: border-box; } /* IX задаёт inline width на .theme-btn-bg — не фиксируем width !important */ .header-btn .theme-btn-bg, .header-btn .theme-btn-bg.orange { height: auto !important; left: 5px !important; top: 5px !important; bottom: 5px !important; min-width: 46px !important; border-radius: 999px !important; background-color: #000 !important; background-image: none !important; } .header-btn .theme-btn-icon-box { width: 46px !important; height: 46px !important; left: 5px !important; top: 5px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background-color: #000 !important; } /* Project Section — колонка; боковые 32px как Figma 768 (704px полоса на 768px) */ #Project-Section.project-section { padding-left: 32px; padding-right: 32px; } /* Gallery — типографика/гуттеры как 768 (261:2585); боковые 24px для секций ≤767 */ #Gallery-Section.gallery-section { display: flex; flex-direction: column; align-items: center; gap: 60px; padding-top: 120px; padding-left: 24px; padding-right: 24px; } /* Service — Figma 261:3771 (~390 mobile): headline + intro + столбец карточек; px 16; gap headline↔cards 66 */ #Service-Section.service-section { align-items: center; gap: 66px; padding-top: 100px !important; padding-bottom: 100px !important; padding-left: 16px !important; padding-right: 16px !important; } #Service-Section.service-section > .service-sectitle-wrap.sectitle-outer-box { max-width: 100%; } #Service-Section.service-section .section-title-box.mb-zero { /* Title↔intro spacing from .service-section-title padding-bottom — gap off so flex gap isn’t stacked */ gap: 0; } /* Title↔intro: 16px (Figma); mirrors #Project-Section .project-section-title ≤767 */ #Service-Section.service-section .service-section-title, #Service-Section #Service-Section-Title { margin: 0 !important; padding: 0 0 16px 0 !important; max-width: min(704px, 100%); box-sizing: border-box; width: 100%; } #Service-Section.service-section .service-section-title-hash { font-size: 44px !important; line-height: 48px !important; color: #ff61a6 !important; } #Service-Section.service-section .service-section-title-lead { font-size: 36px !important; line-height: 44px !important; color: #fff !important; } #Service-Section.service-section .service-grid { display: grid !important; grid-template-columns: 1fr !important; grid-row-gap: 20px !important; grid-column-gap: 0 !important; width: 100%; } /* Планшет 768–991 скрывает .three — на мобиле Figma 261:3771 все три карточки в столбик */ #Service-Section .service-block.three { display: flex !important; } /* IX a-21: сбрасываем горизонтальный slide на карточке; появление — fade + translateY как Gallery ≤767 */ #Service-Section.service-section .service-grid > .service-block { opacity: 0; transform: translateY(56px) !important; transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; border-radius: 30px; } #Service-Section.service-section .service-grid > .service-block.lc-reveal { opacity: 1; transform: none !important; will-change: auto; } /* Внутренние IX-трансформы на иконке — статичны на мобиле */ #Service-Section.service-section .service-grid > .service-block .service-icon-box { transform: none !important; will-change: auto !important; } #Service-Section.service-section .service-block { min-height: 350px !important; padding: 20px !important; } #Service-Section.service-section .service-line { background-color: #e53f88 !important; } #Service-Section.service-section .service-title { font-size: 24px !important; line-height: 33.6px !important; } #Service-Section.service-section .service-text { font-size: 14px !important; line-height: 26px !important; } #Project-Section .container.w-container { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 20px !important; } /* Video row (.w-dyn-list without .project-collection): halve top gap 89.5px → 44.75px via negative margin (keeps sibling gaps unchanged) */ #Project-Section .container.w-container > .w-dyn-list:not(.project-collection) { margin-top: -44.75px; } #Project-Section .project-block { gap: 28px !important; flex-direction: column; } #Project-Section .project-content-box { width: 100% !important; max-width: 100% !important; } #Project-Section .project-section-title { margin: 0 !important; /* Title ↔ desc: 16px (Figma); scoped to ≤767 so desktop flex gap:16 isn’t doubled */ padding: 0 14px 16px 14px !important; max-width: min(704px, 100%); box-sizing: border-box; width: 100%; } /* Figma mobile 530:4794: # 44×48, lead 36×40 (не clamp — совпадает с ≤479) */ #Project-Section .project-section-title-hash { font-size: 44px !important; line-height: 48px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-size: 36px !important; line-height: 40px !important; letter-spacing: -1.2px !important; } #Project-Section .section-title-box.mb-zero { gap: 16px; } /* ≤767px: flex-строка из 3 элементов (3-й скрыт) */ .banner-list-box { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 20px !important; } /* Скрываем 3-й элемент (100+ / музыкальных видео) */ .banner-list:nth-child(3) { display: none !important; } /* Оставшиеся 3 элемента — равномерно занимают строку */ .banner-list { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } .contact-form-grid, .footer-grid, .case-study-header, .case-image-grid { grid-template-columns: 1fr !important; } .brands-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .hero-outer-box { padding-top: 96px !important; padding-bottom: 44px !important; } .hero-left-box { gap: 14px !important; } .hero-title { font-size: clamp(60px, 12.5vw, 96px) !important; letter-spacing: -0.051em !important; line-height: 0.92 !important; } /* Project desc — Figma 530:4798: 20×28, tracking -0.72 (768-макет desc был 24×32) */ #Project-Section .project-section-desc { font-size: 20px; line-height: 28px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); max-width: min(704px, 100%); padding: 0 14px; box-sizing: border-box; } /* Gallery — column gap 60px как 261:2585; title↔desc от padding-bottom заголовка — gap off */ #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { max-width: none; margin-bottom: 0; padding-left: 0; padding-right: 0; } #Gallery-Section .section-title-box.mb-zero { /* Same as Service/Marquee ≤767: title padding-bottom carries title↔desc — don’t stack flex gap */ gap: 0; } /* Title ↔ desc: 16px; mirrors #Project-Section .project-section-title ≤767 */ #Gallery-Section .project-section-title, #Gallery-Section #Gallery-Section-Title { margin: 0 !important; padding: 0 14px 16px 14px !important; letter-spacing: -1.2px; max-width: min(704px, 100%); box-sizing: border-box; width: 100%; } /* Same fluid scale as ≤991 — #Gallery-Section only (Видеопродакшн one line) */ #Gallery-Section .project-section-title-hash { font-size: clamp(20px, 6.05vw + 10px, 68px) !important; line-height: 1.07 !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Gallery-Section .project-section-title-lead { font-size: clamp(18px, 5.2vw + 8.5px, 56px) !important; line-height: 1.07 !important; letter-spacing: -1.2px !important; } #Gallery-Section .project-section-desc { font-size: 24px; line-height: 32px; letter-spacing: -0.72px; max-width: min(704px, 100%); padding: 0 14px; box-sizing: border-box; } /* * Marquee (#Marquee-Section) — планшет/мобила ≤767. * Примечание: фрейм «768» в задаче (261:2585) в Figma — Gallery, не marquee; * отступы/типографика выровнены под соседнюю Gallery-секцию (боковые 24px, gap 60px). */ #Marquee-Section.marquee-section { display: flex; flex-direction: column; align-items: center; gap: 60px; padding-top: 120px; padding-bottom: 120px; padding-left: 24px; padding-right: 24px; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { max-width: none; margin-bottom: 0; padding-left: 0; padding-right: 0; text-align: left; width: 100%; } #Marquee-Section .section-title-box.mb-zero { /* Title↔desc spacing from .marquee-section-title padding-bottom — gap off so flex gap isn’t stacked */ gap: 0; } #Marquee-Section .marquee-section-title, #Marquee-Section #Marquee-Section-Title { margin: 0 !important; padding: 0 0 16px 0 !important; letter-spacing: -1.2px; max-width: min(704px, 100%); box-sizing: border-box; width: 100%; } #Marquee-Section .marquee-section-title-hash { font-size: 68px !important; line-height: 76px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Marquee-Section .marquee-section-title-lead { font-size: 56px !important; line-height: 62px !important; letter-spacing: -1.2px !important; } #Marquee-Section .marquee-section-desc { font-size: 24px; line-height: 32px; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); max-width: min(704px, 100%); padding: 0 14px; box-sizing: border-box; margin: 0; } #Marquee-Section .marquee-box { margin-top: 0 !important; max-width: none; width: 100%; align-self: stretch; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 200px !important; height: auto !important; aspect-ratio: 280 / 400; } /* 480–767px: сохраняем 24px от Figma 768px, перенос только при ≤479 */ .hero-title-two { font-size: 24px !important; line-height: 28px !important; letter-spacing: -0.022em !important; white-space: nowrap !important; text-align: left; } } /* ≤479px — узкий мобильный */ @media (max-width: 479px) { .container { width: min(100% - 24px, 100%); } /* Header — 16px от края (перебивает .container width: min(100% - 24px)) */ .main-header .w-layout-blockcontainer.container.w-container { max-width: 100% !important; width: 100% !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important; } /* Кнопка меню — Figma 798:345 (56×56), без уменьшения на узком экране */ .mobile-menu-open-btn { width: 56px !important; height: 56px !important; border-radius: 28px !important; } .mobile-menu-open-disc { width: 46px !important; height: 46px !important; } .mobile-menu-open-btn .header-menu-icon { filter: none !important; width: 22px !important; height: 22px !important; } /* Project Section — компактные отступы */ #Project-Section.project-section { padding-left: 16px; padding-right: 16px; } /* Project desc — Figma 390 (530:4798): на всю ширину колонки 358px, без боковых инсетов */ #Project-Section .project-section-desc { font-size: 20px; line-height: 28px; max-width: 100%; padding: 0; } #Project-Section .project-section-title { margin: 0 !important; padding: 0 !important; padding-bottom: 16px !important; max-width: 100%; box-sizing: border-box; width: 100%; } /* Figma 390px: # = 44px / 48px; текст = 36px / 40px */ #Project-Section .project-section-title-hash { font-size: 44px !important; line-height: 48px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Project-Section .project-section-title-lead, #Project-Section .project-section-title-second { font-size: 36px !important; line-height: 40px !important; letter-spacing: -1.2px !important; } /* Service — title stack: horizontal padding clears like Project; keep 16px title↔intro */ #Service-Section.service-section .service-section-title, #Service-Section #Service-Section-Title { margin: 0 !important; padding: 0 !important; padding-bottom: 16px !important; max-width: 100%; box-sizing: border-box; width: 100%; } /* Gallery — Figma 261:3372 (390w): pt 100, px 16; title↔desc via title padding-bottom */ #Gallery-Section.gallery-section { gap: 56px; padding-top: 100px; padding-left: 16px; padding-right: 16px; } #Gallery-Section > .gallery-sectitle-wrap.sectitle-outer-box { margin-bottom: 0; padding-left: 0; padding-right: 0; } #Gallery-Section .section-title-box.mb-zero { /* Same as Marquee ≤479: title padding-bottom carries title↔desc — don’t stack flex gap */ gap: 0; } #Gallery-Section .project-section-desc { font-size: 20px; line-height: 28px; letter-spacing: -0.72px; max-width: 100%; padding: 0; } #Gallery-Section .project-section-title, #Gallery-Section #Gallery-Section-Title { margin: 0 !important; padding: 0 !important; padding-bottom: 16px !important; max-width: 100%; box-sizing: border-box; width: 100%; } /* ≤479: same clamp as ≤767/≤991 so 320px doesn’t jump to fixed 44/36 and re-wrap */ #Gallery-Section .project-section-title-hash { font-size: clamp(20px, 6.05vw + 10px, 68px) !important; line-height: 1.07 !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Gallery-Section .project-section-title-lead { font-size: clamp(18px, 5.2vw + 8.5px, 56px) !important; line-height: 1.07 !important; letter-spacing: -1.2px !important; } /* Marquee — Figma 261:3877 (390w frame) */ #Marquee-Section.marquee-section { gap: 56px; padding-top: 100px; padding-bottom: 100px; padding-left: 16px; padding-right: 16px; display: flex; flex-direction: column; align-items: stretch; } #Marquee-Section > .marquee-sectitle-wrap.sectitle-outer-box { margin-bottom: 0; padding-left: 0; padding-right: 0; text-align: left; } #Marquee-Section .section-title-box.mb-zero { /* Same as ≤767: title padding-bottom carries title↔desc — don’t stack flex gap */ gap: 0; } #Marquee-Section .marquee-section-title, #Marquee-Section #Marquee-Section-Title { margin: 0 !important; padding: 0 !important; padding-bottom: 16px !important; max-width: 100%; box-sizing: border-box; width: 100%; } #Marquee-Section .marquee-section-title-hash { font-size: 44px !important; line-height: 48px !important; color: #ff61a6 !important; letter-spacing: -1.2px !important; } #Marquee-Section .marquee-section-title-lead { font-size: 36px !important; line-height: 44px !important; letter-spacing: -1.2px !important; } #Marquee-Section .marquee-section-desc { font-size: 20px !important; line-height: 28px !important; letter-spacing: -0.72px; color: rgba(255, 255, 255, 0.86); max-width: 100%; padding: 0; margin: 0; box-sizing: border-box; } #Marquee-Section .marquee-box { margin-top: 0 !important; max-width: 100%; width: 100%; height: 214px; } #Marquee-Section.marquee-section .marquee-inner-box .marquee-image-box { width: 150px !important; height: 214px !important; } #Marquee-Section .marquee-inner-box { height: 214px; } .brands-gallery-grid { gap: 8px !important; } .hero-outer-box > .container { width: min(100% - 24px, 100%); } .hero-outer-box { min-height: 100svh !important; padding-bottom: 44px !important; } .hero-inner { gap: 31px !important; } .hero-left-box { gap: 14px !important; } .hero-text-box { width: 100% !important; padding: 0 !important; } .hero-title { font-size: clamp(44px, 17.4vw, 68px) !important; letter-spacing: -0.057em !important; line-height: 0.92 !important; } /* Figma 390px: 20px, текст переносится на 2 строки */ .hero-title-two { font-size: 16px !important; line-height: 28px !important; letter-spacing: -0.022em !important; white-space: normal !important; } /* Gallery: 3-up только на 768–991px (см. @media min 768 max 991 ниже); здесь без скачка в 1 колонку до max-width 767 */ .banner-list-box { column-gap: 20px !important; } .hero-section .banner-list-count { font-size: 11px; } .hero-section .banner-list-text { font-size: 12px !important; } .banner-list-text { font-size: 12px; } } /* -------------------------------------------------------------------------- Gallery (#Gallery-Section) main.css used to force .gallery-grid to 2 cols (≤991/767) and 1 col (≤479), which produced a 2+1 grid and uneven row heights / clipping inside .gallery-section { overflow: hidden }. Stay on display: grid (same as ≥992 + main .gallery-grid): IX uses translate3d(±120%, …) on .gallery-block; flex + nowrap broke stable column widths and gutters vs. percentage motion. Figma (file 3VymViruWWKqV3sGgnJkxO): `get_design_context` on 261:2563 / 261:3350 returns `div.project-image-box` (tablet 704×561.54 r30; phone 358×323 r30), not `div.gallery-block`. Gallery row/card tokens below follow `section.gallery-section` 261:2585 + grid 676:7245 / card 676:7246 (tablet) and 261:3372 + card 673:7231 (phone). ≥992 / ≥1440 gallery rules unchanged. -------------------------------------------------------------------------- */ @media screen and (max-width: 991px) { #Gallery-Section.gallery-section { overflow: visible; } /* Grid wrapper: undo global `.container` side padding / width cap so it matches sectitle. */ #Gallery-Section .container.w-container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } } /* Tablet 768–991: Figma 261:2585 row 676:7245 (gap 11px), card 676:7246 (r11, 227.33×358.81) */ @media screen and (min-width: 768px) and (max-width: 991px) { #Gallery-Section .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; align-items: stretch; justify-items: stretch; gap: 11px; overflow: visible; isolation: isolate; contain: layout; } #Gallery-Section .gallery-grid > .gallery-block { min-width: 0; aspect-ratio: 227.33334 / 358.80624; border-radius: 11px; overflow: hidden; backface-visibility: hidden; /* Планшетный reveal: IX застрял в translate3d(±120%). Заменяем на собственное начальное состояние — все три карточки появятся одновременно через IntersectionObserver (JS добавит .lc-reveal). ≤767px-блок ниже перекроет transform (56px) и ratio. */ opacity: 0; transform: translateY(40px) !important; transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } #Gallery-Section .gallery-grid > .gallery-block.lc-reveal { opacity: 1; transform: none !important; will-change: auto; } #Gallery-Section .gallery-grid .gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none !important; backface-visibility: hidden; } } /* ========================================================================== Gallery — мобиль ≤767px: 1 колонка (Figma 261:3372; карточка 673:7231) Блок после shell ≤991; перекрывает только <768px. ========================================================================== */ @media (max-width: 767px) { #Gallery-Section .gallery-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; align-items: stretch; justify-items: stretch; gap: 20px; overflow: visible; isolation: isolate; contain: layout; } /* Figma 261:3372: div.gallery-block 358×622.843994; вертикальный gap ряда 20px */ #Gallery-Section .gallery-grid > .gallery-block { aspect-ratio: 358 / 622.843994; border-radius: 20px; width: 100%; min-width: 0; opacity: 0; transform: translateY(56px) !important; transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; } /* Revealed state: JS добавляет .lc-reveal через IntersectionObserver */ #Gallery-Section .gallery-grid > .gallery-block.lc-reveal { opacity: 1; transform: none !important; will-change: auto; } /* Стаггер — 2-я и 3-я карточка чуть позже */ #Gallery-Section .gallery-grid > .gallery-block:nth-child(2) { transition-delay: 110ms; } #Gallery-Section .gallery-grid > .gallery-block:nth-child(3) { transition-delay: 220ms; } #Gallery-Section .gallery-grid .gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none !important; backface-visibility: hidden; } #Gallery-Section .gallery-grid > .gallery-block .gallery-image { will-change: auto !important; } } /* ≤479px: те же правила, grid 1-column */ @media (max-width: 479px) { #Gallery-Section .gallery-grid { grid-template-columns: 1fr; gap: 20px; } #Gallery-Section .gallery-grid > .gallery-block { aspect-ratio: 358 / 622.843994; border-radius: 20px; width: 100%; opacity: 0; transform: translateY(56px) !important; transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1), transform 900ms cubic-bezier(0.19, 1, 0.22, 1); } #Gallery-Section .gallery-grid > .gallery-block.lc-reveal { opacity: 1; transform: none !important; } #Gallery-Section .gallery-grid > .gallery-block:nth-child(2) { transition-delay: 110ms; } #Gallery-Section .gallery-grid > .gallery-block:nth-child(3) { transition-delay: 220ms; } #Gallery-Section .gallery-grid > .gallery-block .gallery-image { transform: none !important; will-change: auto !important; } } /* ========================================================================== АНИМАЦИИ ========================================================================== */ /* Reveal заголовка: clip-path раскрывается слева направо */ @keyframes heroTitleRevealSafe { to { clip-path: inset(-0.12em -0.9em -0.16em 0); } } /* Плавное появление дескриптора */ @keyframes heroDescriptorFade { to { opacity: 1; } } /* Поочерёдное появление тегов #01–04 */ @keyframes heroSmallTitleFade { to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Страницы artists / brands — декоративная линия у project-detail-title-two-box ========================================================================== */ body.page-artists .project-detail-line, body.page-brands .project-detail-line { height: 2px; background-color: #E53F88; } /* «Визуалы»: размер задают span’ы в строке заголовка (как в Figma), базовый размер h2 обнуляем */ #Marquee-Section .marquee-section-title { font-size: 0; } /* ========================================================================== Footer (#Contact-Section) — перенос перед «нейросетей» только на планшете (768–991px) ========================================================================== */ @media (min-width: 768px) and (max-width: 991px) { #Contact-Section .footer-text-from-neuro { display: block; } } /* ========================================================================== Footer mobile — Figma 261:3694 (layout), 776:6 (three-column row) Tablet/desktop ≥768: grid unchanged (wrapper uses display: contents). ========================================================================== */ @media (min-width: 768px) { #Contact-Section .footer-list-bottom { display: contents; } } @media (max-width: 767px) { /* Фрейм mobile footer: вертикальные отступы 80px (261:3694 py-80), перекрывает main.css 100px */ #Contact-Section.main-footer { padding-top: 80px; padding-bottom: 80px; } #Contact-Section .footer-grid.w-layout-grid { display: flex; flex-direction: column; grid-template-columns: unset; grid-column-gap: 0; grid-row-gap: 0; gap: 52px; align-items: stretch; } /* About — stack + gaps (Figma gap 15px inner) */ #Contact-Section .footer-widget.about-widget { display: flex; flex-direction: column; gap: 15px; padding-right: 0; max-width: none; } #Contact-Section .footer-logo-link { margin-bottom: 0; } #Contact-Section .footer-logo-text { font-size: 24px; line-height: 43.2px; } #Contact-Section .footer-title { margin-bottom: 0; font-size: 20px; line-height: 28px; } #Contact-Section .footer-text { margin-bottom: 0; font-size: 14px; line-height: 25.2px; } #Contact-Section .footer-copyright { font-size: 14px; line-height: 25.2px; color: rgba(255, 255, 255, 0.8); } /* 776:6 — row: Меню | Услуги | Соцсети */ #Contact-Section .footer-list-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; box-sizing: border-box; } #Contact-Section .footer-list-bottom .footer-widget.links-widget { flex: 0 1 auto; min-width: 0; } #Contact-Section .footer-list-bottom > .footer-widget.links-widget:last-child { padding-bottom: 16px; } #Contact-Section .footer-list-bottom .footer-list-box { display: flex; flex-direction: column; gap: 24px; width: 100%; } #Contact-Section .footer-list-bottom .footer-list-title { margin-bottom: 0; color: #ff61a6; font-size: 18px; line-height: 25.2px; font-weight: 600; } #Contact-Section .footer-list-bottom .footer-list-link { margin-bottom: 0; gap: 10px; align-items: center; flex-wrap: nowrap; } #Contact-Section .footer-list-bottom .footer-list-box > .footer-list-link:first-of-type { padding-top: 4px; min-height: 29px; box-sizing: border-box; } #Contact-Section .footer-list-bottom .footer-widget.links-widget:last-child .footer-list-box > .footer-list-link:first-of-type { padding-top: 4px; } #Contact-Section .footer-list-bottom .footer-list-text { font-size: 13px; line-height: 23px; color: #fff; opacity: 0.8; overflow-wrap: break-word; } /* Меню: «Для артистов» / «Для брендов» — 14px / 25.2px в макете */ #Contact-Section .footer-list-bottom .footer-widget.links-widget:nth-child(1) .footer-list-box > a:nth-child(3) .footer-list-text, #Contact-Section .footer-list-bottom .footer-widget.links-widget:nth-child(1) .footer-list-box > a:nth-child(4) .footer-list-text { font-size: 14px; line-height: 25.2px; } #Contact-Section .footer-list-bottom .footer-list-icon { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; } } /* ========================================================================== prefers-reduced-motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } /* Без анимации — glass переключается мгновенно */ .lc-header-glass { transition: none; } /* При reduced-motion blur снижаем, чтобы не грузить GPU */ .main-header.lc-header-scrolled .lc-header-glass { -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } /* Маска reveal — сразу в конечном состоянии */ .hero-title-box.two { clip-path: inset(-0.12em -0.9em -0.16em 0) !important; animation: none !important; } /* Дескриптор сразу виден */ .hero-text-box { opacity: 1 !important; animation: none !important; } /* Теги banner-list сразу видны */ .banner-list { opacity: 1 !important; transform: none !important; animation: none !important; } /* Gallery: tram/IX uses inline transforms — snap to rest state, avoid jank */ #Gallery-Section .gallery-block { transform: none !important; opacity: 1 !important; } #Gallery-Section .gallery-block .gallery-image { transform: none !important; } /* Service: то же для планшетного fade-up (.lc-reveal / IX a-21) */ #Service-Section .service-block { transform: none !important; opacity: 1 !important; } /* Mobile Service: выше специфичность opacity/transform — дублируем snap-visible */ #Service-Section.service-section .service-grid > .service-block { transform: none !important; opacity: 1 !important; } } /* ── Project-video sound overlay ── */ .lc-video-sound-overlay { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10; padding: 0.5rem 1.25rem; border: none; border-radius: 2rem; background: rgba(0, 0, 0, 0.65); color: #fff; font-family: inherit; font-size: 0.875rem; line-height: 1.4; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.25s ease; } .lc-video-sound-overlay:hover, .lc-video-sound-overlay:focus-visible { background: rgba(0, 0, 0, 0.82); } /* ── Fullscreen gallery video overlay ── */ .lc-gallery-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lc-gallery-overlay[hidden] { display: none; } .lc-gallery-overlay__video { max-width: 90vw; max-height: 85vh; border-radius: 6px; outline: none; background: #000; } .lc-gallery-overlay__close { position: absolute; top: 1rem; right: 1.25rem; z-index: 1; border: none; background: none; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; opacity: 0.75; transition: opacity 0.2s; } .lc-gallery-overlay__close:hover, .lc-gallery-overlay__close:focus-visible { opacity: 1; } .lc-gallery-overlay__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; border: none; background: rgba(255, 255, 255, 0.1); color: #fff; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, background 0.2s; padding: 0; } .lc-gallery-overlay__nav:hover, .lc-gallery-overlay__nav:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.2); } .lc-gallery-overlay__nav--prev { left: 1rem; } .lc-gallery-overlay__nav--next { right: 1rem; } @media (max-width: 767px) { .lc-gallery-overlay__video { max-width: 96vw; max-height: 75vh; } .lc-gallery-overlay__nav { width: 2.5rem; height: 2.5rem; } .lc-gallery-overlay__close { font-size: 2rem; top: 0.5rem; right: 0.75rem; } } /* Override Webflow's transition:all on lightbox controls (main.css) */ .w-lightbox-control { transition: opacity .3s; } /* === Video duration badge — Видеопродакшн gallery cards === Figma file 3VymViruWWKqV3sGgnJkxO Nodes: 850:978 (tablet+small-desktop), 850:1013 (mobile), 901:1020 (desktop 1440+) ======================================================================== */ /* Base: tablet + small-desktop (768px–1439px) — Figma 850:978: 51×24, r6, blur 2px */ .gallery-badge { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 8px 0 4px; height: 24px; border-radius: 6px; background: rgba(0, 0, 8, 0.44); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #fff; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: 0; white-space: nowrap; pointer-events: none; } .gallery-badge-icon { width: 12px; height: 12px; flex-shrink: 0; } /* Desktop 1440+ — Figma 901:1020: ~70×34, r8.5, blur 2.8px, font 17/20 */ @media screen and (min-width: 1440px) { .gallery-badge { bottom: 24px; left: 24px; gap: 3px; padding: 0 11px 0 6px; height: 34px; border-radius: 8.5px; -webkit-backdrop-filter: blur(2.8px); backdrop-filter: blur(2.8px); font-size: 17px; line-height: 20px; } .gallery-badge-icon { width: 17px; height: 17px; } } /* Mobile ≤767px — Figma 850:1013: 51×24, same size as tablet, larger offsets */ @media screen and (max-width: 767px) { .gallery-badge { bottom: 24px; left: 24px; } }