/* ========================================================================== COLLABA PRO — main.css Токены из BRAND.md §3, размеры и ритм — из reference-styled-components.css. ========================================================================== */ /* ------------------------------------------------------------------ токены */ :root { --black: #000000; --ink: #0a0a0a; --paper: #faf9f6; --white: #ffffff; --acid: #c8ff00; --acid-dark: #5f7a00; --pink: #ff2e93; --pink-dark: #b4135f; --steel: #666666; --silver: #bdbdbd; --line: #2a2a2a; --mist: #f4f4f4; --hero-grey: #9a9a9a; --chip-grey: #8a8a8a; --display: 'Oswald', 'Arial Narrow', Impact, sans-serif; --text: 'Inter', 'Helvetica Neue', Arial, sans-serif; --accent: 'Unbounded', 'Oswald', sans-serif; --container: 1200px; --pad: 50px; --header-h: 80px; --marquee-h: 45px; --radius-card: 14px; --radius-img: 10px; --radius-pill: 40px; --mark-notch: #ffffff; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Фиксированные цвета: не инвертируются вместе с темой. --brand-ink — текст на кислотных плашках (зелёная/розовая), --fixed-* — обложки кейсов/новостей и тайлы «Работы у нас». */ --brand-ink: #000000; --fixed-white: #ffffff; --fixed-ink: #0a0a0a; --fixed-paper: #faf9f6; --fixed-silver: #b7b7b7; } /* ------------------------------------------------- инвертированная тема Меняем значения чёрно-белых токенов — вся вёрстка инвертируется разом. Acid Green и Acid Pink остаются прежними. */ html[data-theme='inverted'] { --black: #faf9f6; --ink: #f2f0ea; --paper: #000000; --white: #0a0a0a; --mist: #121212; --line: #d5d2c9; --steel: #8a8a8a; --silver: #4a4a4a; --hero-grey: #7b7b7b; --chip-grey: #8a8a8a; --mark-notch: #0a0a0a; } /* ------------------------------------------------------------------- база */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--black); color: var(--white); font-family: var(--text); font-weight: 300; font-size: 18px; line-height: 1.2; overflow-x: hidden; } /* overflow-x: hidden делает скролл-контейнером, и position: sticky внутри страницы перестаёт работать (итог калькулятора уезжал вверх). clip обрезает так же, но контейнер прокрутки не создаёт. */ @supports (overflow-x: clip) { body { overflow-x: clip; } } body.is-locked { overflow: hidden; } /* [hidden] должен побеждать любые display в компонентах */ [hidden] { display: none !important; } img { display: block; max-width: 100%; height: auto; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; background: var(--acid); color: var(--brand-ink); font-family: var(--display); text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 0; } .container { width: min(var(--container), calc(100vw - 40px)); margin: 0 auto; } /* ------------------------------------------------ появление по скроллу */ /* Класс js ставится инлайн-скриптом в : без JS контент виден сразу. */ html.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } html.js [data-reveal].is-in { opacity: 1; transform: none; } .section { padding: 120px 0; background: var(--black); } /* Секции главной идут встык — нижний отступ задаёт следующая секция */ .section--results, .section--services, .section--reels, .section--cases, .section--factory, .section--manifest, .section--team, .section--materials, .section--faq { padding-bottom: 0; } .section__cta { display: flex; justify-content: center; margin-top: 60px; } /* Шапка выведена из потока (см. .header), поэтому первая секция компенсирует её высоту собственным отступом. */ main > .section:first-child { padding-top: calc(120px + var(--header-h)); } /* ------------------------------------------------------------- знак-пульс */ /* MEDIACASH-SPEC §0: линия кардиограммы Acid Green с точкой-«ударом». */ .pulse { display: block; width: 100%; height: 100%; overflow: visible; } .pulse__line { stroke: var(--acid); } .pulse__glow { fill: var(--acid); opacity: 0.35; } .pulse__dot { fill: var(--acid); } /* Бесшовный цикл «удара» — равномерная развёртка (правка владельца 2026-09-03). Раньше удар был бегущим пунктиром: он двигался равномерно ВДОЛЬ ЛОМАНОЙ, но её зигзаг (64 единицы длины на 30 единиц по X) заставлял удар подтормаживать на пике и разгоняться на прямых. Теперь ярко светится участок линии внутри окна шириной 34, которое едет по X с постоянной скоростью: translateX от 0 до 144 (110 длина линии + 34 ширина окна) за период, linear, без задержек. Смещение по X между кадрами одинаковое в любой точке цикла; на стыке окно уходит за конец линии ровно тогда, когда новое появляется у начала — паузы нет. Одинаково работает и в логотипе, и в строке героя: разметка общая (lib/components.mjs → pulseBody), масштаб задаёт viewBox. */ .pulse__beat { stroke: var(--fixed-white); opacity: 0.7; } .pulse__win { fill: #fff; animation: pulseRun 1.6s linear infinite; } @keyframes pulseRun { from { transform: translateX(0); } to { transform: translateX(144px); } } /* Точка-«удар» на конце линии: мягкое дыхание в такт приходу сегмента (сегмент упирается в правый конец на ~76% цикла). */ .pulse__dot, .pulse__glow { transform-box: fill-box; transform-origin: center; animation: pulseDot 1.6s ease-in-out infinite; } .pulse__glow { animation-name: pulseGlow; } @keyframes pulseDot { 0%, 52% { transform: scale(1); } 80% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes pulseGlow { 0%, 52% { transform: scale(1); opacity: 0.28; } 80% { transform: scale(1.4); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.28; } } /* --------------------------------------------------------------- логотип */ .logo { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; color: var(--logo-fg, var(--white)); white-space: nowrap; } .logo__word { display: inline-block; } .logo__pro { display: inline-block; margin-left: 0.14em; color: var(--acid); } .logo__mark { display: inline-block; width: 1.35em; height: 0.45em; margin-left: 0.26em; flex: 0 0 auto; } /* Крупное лого в футере: 75px по макету, но ужимается, чтобы не наезжать на колонки */ .logo--xl { font-size: clamp(34px, 3.7vw, 60px); } /* ---------------------------------------------------------------- кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 10px 28px; font-family: var(--text); font-weight: 900; font-size: 16px; line-height: 1.03; letter-spacing: 0; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .btn--black { background: var(--black); border-color: var(--black); color: var(--white); } .btn--black:hover { background: transparent; color: var(--black); } .btn--outline-white { background: transparent; border-color: var(--white); color: var(--white); font-family: var(--display); font-weight: 500; font-size: 20px; padding: 12px 34px; } .btn--outline-white:hover { background: var(--white); color: var(--black); } .btn--acid-outline { background: transparent; border: 2px solid var(--acid); color: var(--acid); font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: 0.02em; padding: 8px 26px; } .btn--acid-outline:hover { background: var(--acid); color: var(--brand-ink); } .btn--acid { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); font-family: var(--display); font-weight: 500; font-size: 20px; padding: 12px 30px; } .btn--acid:hover { background: var(--white); border-color: var(--white); color: var(--black); } .btn--wide { width: min(535px, 100%); height: 56px; } .btn--tall { min-height: 82px; width: min(360px, 100%); text-align: center; } .btn--pill-outline { width: 148px; height: 40px; padding: 0; border-radius: 32px; border: 1px solid currentColor; background: transparent; color: var(--hdr-fg); font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .btn--pill-outline:hover { background: var(--hdr-fg); color: var(--hdr-bg); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--hdr-fg); cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .icon-btn svg { width: 20px; height: 20px; } .icon-btn:hover { background: var(--hdr-fg); color: var(--hdr-bg); } .icon-btn--dark { color: var(--white); } .icon-btn--dark:hover { background: var(--white); color: var(--black); } .icon-btn--solid { background: var(--white); border-color: var(--white); color: var(--black); } .icon-btn--solid:hover { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); } .social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--black); transition: background-color 0.3s var(--ease); } .social svg { width: 22px; height: 22px; } .social:hover { background: var(--acid); color: var(--brand-ink); } .socials { display: flex; gap: 25px; } .pill { display: inline-flex; align-items: center; border: 1px solid var(--silver); border-radius: var(--radius-pill); padding: 6px 18px; font-size: 16px; font-weight: 300; color: var(--white); } .pill--acid { border-color: var(--acid); color: var(--acid); font-weight: 500; } .pill--pink { background: var(--pink); border-color: var(--pink); color: var(--brand-ink); font-weight: 500; } .pill--white { border-color: var(--white); color: var(--white); font-weight: 500; } /* ---------------------------------------------------------------- header */ .header { position: sticky; top: 0; z-index: 1001; display: flex; align-items: center; height: var(--header-h); /* Отрицательный отступ снизу убирает шапку из потока: контент начинается под ней, как в референсе (прозрачная шапка поверх секции). */ margin-bottom: calc(-1 * var(--header-h)); padding: 0 var(--pad); background: transparent; pointer-events: none; opacity: 0; transform: translateY(-20px); animation: fadeInDown 0.5s var(--ease) forwards; --hdr-fg: var(--white); --hdr-bg: var(--black); } .header[data-theme='light'] { --hdr-fg: var(--black); --hdr-bg: var(--paper); --mark-notch: var(--black); } .header[data-theme='dark'] { --hdr-fg: var(--white); --hdr-bg: var(--black); --mark-notch: var(--white); } @keyframes fadeInDown { to { opacity: 1; transform: translateY(0); } } .header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .header__logo { pointer-events: auto; --logo-fg: var(--hdr-fg); } .header__actions { display: flex; align-items: center; gap: 15px; } .header__actions-item { display: flex; pointer-events: auto; } .burger { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: var(--hdr-fg); cursor: pointer; pointer-events: auto; transition: background-color 0.3s var(--ease); } .burger__line { display: block; height: 2px; background: var(--hdr-bg); border-radius: 2px; transition: width 0.3s var(--ease); } .burger__line:nth-child(1) { width: 20px; } .burger__line:nth-child(2) { width: 14px; } .burger__line:nth-child(3) { width: 17px; } .burger:hover .burger__line { width: 20px; } /* ------------------------------------------------------------------ меню */ .menu { position: fixed; inset: 0; z-index: 1002; display: flex; justify-content: flex-end; } .menu[hidden] { display: none; } .menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } .menu__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 60%; height: 100%; padding: 100px var(--pad) 60px; background: var(--black); overflow-y: auto; animation: slideIn 0.5s var(--ease); } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .menu__top { position: absolute; top: 0; right: var(--pad); display: flex; align-items: center; gap: 15px; height: var(--header-h); } .menu__body { display: flex; justify-content: space-between; gap: 40px; } .menu__main { display: flex; flex-direction: column; gap: 40px; } .menu__item a { font-family: var(--display); font-weight: 500; font-size: 60px; line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--white); transition: color 0.3s var(--ease); } .menu__item a:hover { color: var(--acid); } .menu__side { display: flex; flex-direction: column; gap: 50px; } .menu__services { display: flex; flex-direction: column; gap: 30px; } .menu__services a { font-size: 16px; font-weight: 300; line-height: 1; text-decoration: none; transition: color 0.3s var(--ease); } .menu__services a:hover { color: var(--acid); } .menu__contacts { display: flex; flex-direction: column; gap: 11px; font-size: 16px; } .menu__contacts a { text-decoration: none; } .menu__contacts a.is-underlined { text-decoration: underline; text-underline-offset: 3px; } .menu__contacts a:hover { color: var(--acid); } .is-underlined { text-decoration: underline; text-underline-offset: 3px; } .menu__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .menu__brief { padding: 0; border: none; background: none; color: var(--acid); font-family: var(--display); font-weight: 500; font-size: 60px; line-height: 1; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s var(--ease); } .menu__brief:hover { opacity: 0.8; } /* ------------------------------------------------------------------- hero */ .hero { display: flex; flex-direction: column; min-height: 100vh; background: var(--paper); color: var(--black); overflow: hidden; } .hero__inner { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: calc(30px + var(--header-h)) 20px 60px; text-align: center; } .hero__toggle-wrap { height: 40px; display: flex; align-items: center; } /* Настоящий переключатель темы: трек всегда Acid, кружок ездит 0.35s */ .hero__toggle { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 69px; height: 32px; padding: 0; border: 0.59px solid var(--black); border-radius: 33px; background: var(--acid); cursor: pointer; animation: toggleOn 500ms ease-out; } /* Зона нажатия ровно 44px по высоте — сам тумблер остаётся 69×32 */ .hero__toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 44px; transform: translate(-50%, -50%); } .hero__toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; } .hero__knob { position: absolute; left: 1px; width: 28px; height: 28px; border: 1.5px solid var(--black); border-radius: 50%; background: var(--white); transform: translateX(37px); transition: transform 0.35s var(--ease); } .hero__toggle[aria-pressed='true'] .hero__knob { transform: translateX(0); } @keyframes toggleOn { 0% { width: 0; background: var(--pink); opacity: 0; } 100% { width: 69px; background: var(--acid); opacity: 1; } } .hero__chip { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-weight: 900; font-size: 17px; line-height: 1.03; text-transform: uppercase; color: var(--chip-grey); animation: fadeIn 2s ease-out; } .hero__chip-pill { display: inline-flex; align-items: center; justify-content: center; padding: 10px 34px; border: 1px solid var(--black); border-radius: var(--radius-pill); color: var(--black); font-size: 16px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero__lines { display: flex; flex-direction: column; gap: 12px; margin: 0; animation: riseIn 2s ease-out; } @keyframes riseIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hero__line { display: flex; align-items: center; justify-content: center; gap: 15px; font-family: var(--display); font-weight: 700; /* 100px по макету; на узких экранах строка ужимается, чтобы не упираться в края */ font-size: clamp(42px, 6.25vw, 100px); line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: var(--hero-grey); } .hero__word { text-decoration: none; color: inherit; transition: color 0.3s var(--ease); } .hero__word:hover { color: var(--black); } .hero__amp { font-size: 1.14em; line-height: 0.9; transform: translateY(0.06em); color: transparent; -webkit-text-stroke: 2px var(--black); } /* Знаки в строке PRODUCTION ◉ EVENTS ⊕ LIVE — контурные иконки одного размера (0.75em кегля строки), выровнены по центру строки, как «%» и камера. На hover соседнего слова-ссылки не реагируют. */ .hero__play, .hero__cam { display: inline-flex; width: 0.75em; height: 0.75em; flex: 0 0 auto; color: var(--ink); } .hero__play svg, .hero__cam svg { width: 100%; height: 100%; } /* Знак-пульс в строке MEDIA ⟶ CASH: по линии пробегает «удар» */ .hero__pulse { display: inline-flex; width: 1.45em; height: 0.52em; flex: 0 0 auto; } .hero__pulse svg { width: 100%; height: 100%; overflow: visible; } .hero__pulse .pulse__line { stroke: var(--black); opacity: 0.3; } /* В строке героя удар яркий, в логотипе (см. .pulse__beat) — мягче */ .hero__pulse .pulse__beat { stroke: var(--acid); opacity: 1; } .hero__word--acid, .hero__word--acid:hover { color: var(--acid); } .hero__sub { max-width: 640px; margin-top: 25px; font-size: 18px; font-weight: 300; line-height: 1.2; color: var(--black); animation: riseIn 1s ease-out; } .hero__sub b { font-weight: 700; font-style: italic; } .hero__buttons { display: flex; gap: 12px; margin-top: 25px; } .hero__btn { width: 258px; height: 48px; padding: 10px 22px; font-size: 15px; white-space: nowrap; overflow: hidden; animation: widen 0.5s ease-out; } @keyframes widen { from { width: 20px; opacity: 0; } to { width: 258px; opacity: 1; } } /* --------------------------------------------------------- бегущая строка */ .marquee { display: flex; align-items: center; height: var(--marquee-h); background: var(--acid); color: var(--brand-ink); overflow: hidden; flex: 0 0 auto; } .marquee__track { display: flex; width: max-content; animation: slide 60s linear infinite; } .marquee__set { display: flex; } .marquee__set span { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Длинные русские слова в дисплейных заголовках не должны вылезать за экран */ .shead__title, .legal__title, .article__title, .careers-join__title, .ncard__title, .ccard__title, .bio__name, .tcard__name, .vac__title, .more__title, .scard__title, .e404__text { overflow-wrap: break-word; } /* ------------------------------------------------------ заголовки секций */ .shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 60px; } .shead__text { display: flex; flex-direction: column; gap: 10px; } .shead__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 75px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--white); } .shead__note { font-size: 18px; font-weight: 300; color: var(--white); } .shead__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; } .shead__arrows { display: flex; gap: 12px; } /* ------------------------------------------------- сетка цифр «ПРО РЕЗУЛЬТАТ» */ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; min-height: 220px; padding: 30px 28px; border-radius: var(--radius-card); /* Зелёные карточки-цифры не инвертируются: фон Acid, текст чёрный */ background: var(--acid); color: var(--brand-ink); } .stat__big { font-family: var(--display); font-weight: 700; font-size: 75px; line-height: 1; letter-spacing: 0; text-transform: uppercase; /* Цифра всегда в одну строку — ритм сетки не ломается */ white-space: nowrap; } .stat__text { font-size: 22px; font-weight: 300; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; } .stat__text strong { font-weight: 700; } /* ------------------------------------------------------------ слайдеры */ .slider { position: relative; } .slider .swiper { position: relative; } .sarrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--white); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .sarrow svg { width: 18px; height: 18px; } .sarrow:hover { background: var(--white); color: var(--black); } .sarrow[disabled] { opacity: 0.35; cursor: default; } .sarrow[disabled]:hover { background: transparent; color: var(--white); } .sarrow--plain { border-color: transparent; } .sarrow--plain:hover { background: transparent; color: var(--acid); } .slider--cases, .slider--photos { display: flex; align-items: center; gap: 15px; } .slider--cases .swiper, .slider--photos .swiper { flex: 1 1 auto; min-width: 0; } .swiper-pagination { position: relative; bottom: 0; margin-top: 30px; } .swiper-pagination-bullet { position: relative; width: 10px; height: 10px; background: var(--white); opacity: 1; margin: 0 4px !important; } /* Точка маленькая, но зона нажатия — во всю высоту 44px и весь шаг между точками */ .swiper-pagination-bullet::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 44px; transform: translate(-50%, -50%); } .swiper-pagination-bullet-active { background: var(--acid); } /* Секция «Как мы работаем» (техника 3П) удалена с главной по правке владельца 2026-09-03. Сетка шагов осталась: её использует блок «Как это работает» на странице /kontent-zavod/. */ .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .step { display: flex; flex-direction: column; gap: 12px; padding-right: 10px; } .step__n { font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1; color: var(--acid); } .step__lead { margin: 0; font-family: var(--text); font-weight: 700; font-size: 18px; line-height: 1.2; text-transform: uppercase; } .step__text { font-size: 16px; font-weight: 300; line-height: 1.35; color: var(--silver); } /* ------------------------------------------------------------- команда */ /* Три компактные колонки в одну строку (референс home-tile05): две карточки основателей + типографический тайл-формула. */ /* Три колонки: две карточки продюсеров + тайл-рамка с фразой. */ .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 60px; } .tcard { display: flex; flex-direction: column; gap: 18px; } .tcard__photo { position: relative; overflow: hidden; width: 100%; /* Фото продюсеров квадратные 1:1 — ряд карточек ровный по высоте */ aspect-ratio: 1 / 1; border-radius: var(--radius-img); background: var(--line); } /* Fallback, если фото ещё не подложили: инициалы под картинкой */ .tcard__photo::before { content: attr(data-initials); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 64px; color: var(--acid); opacity: 0.25; } .tcard__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s var(--ease), transform 0.5s var(--ease); } .tcard:hover .tcard__photo img { filter: grayscale(0); transform: scale(1.06); } .tcard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 14px; } /* Имя слева, описание справа — как в референсе */ .tcard__row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 16px; align-items: start; } .tcard__id { display: flex; flex-direction: column; gap: 8px; } .tcard__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.05; text-transform: uppercase; } .tcard__role { font-family: var(--text); font-weight: 600; font-size: 13px; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; color: var(--acid); } .tcard__text { font-size: 15px; font-weight: 300; line-height: 1.35; text-align: right; color: var(--silver); } .tcard__quote { margin-top: auto; /* цитаты выравниваются по низу карточек */ font-size: 14px; font-weight: 600; font-style: italic; line-height: 1.35; color: var(--acid); } /* Третья ячейка: рамка ростом с квадратное фото, внутри — фраза бренда */ .ttile { display: flex; align-items: center; aspect-ratio: 1 / 1; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-img); background: var(--black); } .ttile__text { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: var(--white); } .ttile__acc { color: var(--acid); } /* --------------------------------------------------------- во что мы верим */ .manifest { border-top: 1px solid var(--line); } .manifest__row { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 30px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); } .manifest__n { font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.1; color: var(--acid); } .manifest__text { font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.15; text-transform: uppercase; color: var(--white); } .manifest__acc { color: var(--acid); } /* --------------------------------------------------------- полоса площадок */ .pbar { display: flex; align-items: center; gap: 40px; height: 90px; padding: 0 var(--pad); background: var(--mist); color: var(--black); overflow: hidden; } .pbar__label { flex: 0 0 auto; font-family: var(--text); font-weight: 900; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); } .pbar__track { display: flex; flex: 1 1 auto; min-width: 0; } .pbar__list { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: 28px; } .pbar__item { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; color: var(--black); } .pbar__list--clone { display: none; } /* ------------------------------------------------------------------ футер */ .footer { background: var(--black); padding: 100px var(--pad) 40px; } .footer__inner { display: grid; /* Правая колонка шире остальных: «ОТПРАВИТЬ БРИФ» держим в одну строку. */ grid-template-columns: minmax(0, 1.85fr) minmax(0, 0.75fr) minmax(0, 0.95fr) minmax(0, 1.3fr); gap: 40px; width: 100%; max-width: 1340px; margin: 0 auto; } .footer__brand { display: flex; flex-direction: column; gap: 60px; } .footer .logo--xl { --logo-fg: var(--white); } .footer__meta { display: flex; flex-direction: column; gap: 20px; font-size: 16px; font-weight: 300; } .footer__legal { font-size: 14px; color: var(--silver); } .footer__policy { text-decoration: none; } .footer__policy:hover { color: var(--acid); } .footer__col { display: flex; flex-direction: column; gap: 25px; } .footer__col-title { font-family: var(--display); font-weight: 700; /* 40px на 1440; ниже — плавно уменьшается вместе с «ОТПРАВИТЬ БРИФ» */ font-size: clamp(30px, 2.78vw, 40px); line-height: 1.2; text-transform: uppercase; color: var(--acid); } .footer__list { display: flex; flex-direction: column; gap: 20px; } .footer__list a { font-size: 16px; font-weight: 300; text-decoration: none; transition: color 0.3s var(--ease); } .footer__list a:hover { color: var(--acid); } .footer__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 35px; text-align: right; } .footer__brief { padding: 0; border: none; background: none; color: var(--acid); font-family: var(--display); font-weight: 700; font-size: clamp(30px, 2.78vw, 40px); line-height: 1.2; text-transform: uppercase; /* Одна строка, как в референсе */ white-space: nowrap; cursor: pointer; transition: opacity 0.3s var(--ease); } .footer__brief:hover { opacity: 0.8; } .footer__contacts { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; font-size: 16px; } .footer__contacts a { text-decoration: none; } .footer__contacts a.is-underlined { text-decoration: underline; text-underline-offset: 3px; } .footer__contacts a:hover { color: var(--acid); } .footer__note { max-width: 1340px; margin: 48px auto 0; font-size: 14px; font-weight: 300; color: var(--white); } .footer__star { color: var(--acid); } /* --------------------------------------------------------------- модалка */ .modal { position: fixed; inset: 0; z-index: 1003; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .modal__panel { position: relative; width: min(735px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 70px 60px; background: var(--black); border: 1px solid var(--line); animation: riseIn 0.35s var(--ease); } .modal__close { position: absolute; top: 30px; right: 30px; } .modal__title { font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1; text-transform: uppercase; } .modal__subtitle { margin-top: 16px; font-size: 22px; font-weight: 300; } .modal__view--done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 0; } .modal__tg { margin-top: 10px; } .form { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; } .form__row { display: flex; flex-direction: column; gap: 6px; } .field { width: 100%; height: 56px; padding: 0 28px; border: 1px solid var(--white); border-radius: var(--radius-pill); background: transparent; color: var(--white); font-family: var(--text); font-weight: 300; font-size: 18px; } .field::placeholder { color: var(--silver); } .field:focus { outline: none; border-color: var(--acid); } .field--area { height: 96px; padding: 18px 28px; border-radius: 28px; resize: vertical; } .field--phone { display: flex; align-items: center; gap: 10px; padding: 0 20px 0 24px; } .field__flag { display: inline-flex; flex: 0 0 auto; border-radius: 2px; overflow: hidden; } .field__input { flex: 1 1 auto; min-width: 0; height: 100%; border: none; background: transparent; color: var(--white); font: inherit; } .field__input:focus { outline: none; } .field.is-invalid { border-color: var(--pink); } .form__error { font-size: 14px; color: var(--pink); padding-left: 28px; } .form__status { font-size: 16px; color: var(--acid); } .form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 300; cursor: pointer; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--white); border-radius: 3px; background: transparent; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .check input:checked + .check__box { background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--acid); } .check input:focus-visible + .check__box { outline: 2px solid var(--acid); outline-offset: 2px; } .check__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .form__submit { height: 82px; margin-top: 15px; border: none; border-radius: var(--radius-pill); background: var(--acid-dark); color: var(--brand-ink); font-family: var(--display); font-weight: 500; font-size: 30px; text-transform: uppercase; cursor: not-allowed; transition: background-color 0.3s var(--ease); } .form__submit:not([disabled]) { background: var(--acid); cursor: pointer; } .form__submit:not([disabled]):hover { background: var(--white); color: var(--black); } /* ------------------------------------------------------------ cookie */ .cookie { position: fixed; left: 50%; bottom: 20px; /* ниже меню (1002) и модалки (1003), чтобы не перекрывать их на мобайле */ z-index: 1000; display: flex; align-items: center; gap: 20px; width: min(640px, calc(100vw - 40px)); padding: 16px 20px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--black); animation: riseIn 0.4s var(--ease); } .cookie[hidden] { display: none; } .cookie__text { flex: 1 1 auto; font-size: 15px; font-weight: 300; } .cookie__text a { color: var(--acid); } .cookie__accept { flex: 0 0 auto; padding: 10px 26px; border: none; border-radius: var(--radius-pill); background: var(--white); color: var(--black); font-family: var(--display); font-weight: 500; font-size: 15px; text-transform: uppercase; cursor: pointer; } .cookie__accept:hover { background: var(--acid); color: var(--brand-ink); } .tabs { display: flex; flex-wrap: wrap; gap: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--acid); } .tab { padding: 0; border: none; background: none; color: var(--white); font-family: var(--text); font-weight: 400; font-size: 16px; cursor: pointer; transition: color 0.3s var(--ease); } .tab:hover { color: var(--acid); } .tab.is-active { color: var(--acid); font-weight: 600; } .sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .scard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 20px; border: 1px solid #333333; border-radius: var(--radius-img); transition: border-color 0.3s var(--ease); } .scard:hover { border-color: var(--acid); } .scard__toggle { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: #2a2a2a; color: var(--acid); cursor: pointer; transition: transform 0.3s var(--ease), background-color 0.3s var(--ease); } .scard__toggle svg { width: 20px; height: 20px; } .scard__toggle[aria-expanded='true'] { transform: rotate(180deg); background: var(--acid); color: var(--brand-ink); } .scard__head { display: flex; flex-direction: column; gap: 6px; } .scard__n { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1; } .scard__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 35px; line-height: 1.1; text-transform: uppercase; } .scard__body { margin-top: 16px; font-size: 16px; font-weight: 300; color: var(--silver); } .scard__body[hidden] { display: none; } /* ------------------------------------------------------------- новости */ .ncover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden; aspect-ratio: 38 / 24; padding: 26px; border-radius: var(--radius-img); background: var(--ncover-bg); color: var(--ncover-fg); } .ncover--paper { --ncover-bg: var(--fixed-paper); --ncover-fg: var(--fixed-ink); } .ncover--acid { --ncover-bg: var(--acid); --ncover-fg: var(--brand-ink); } .ncover--pink { --ncover-bg: var(--pink); --ncover-fg: var(--brand-ink); } .ncover--black { --ncover-bg: var(--fixed-ink); --ncover-fg: var(--fixed-white); } .ncover__logo { position: absolute; left: 26px; top: 22px; display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; } .ncover__pro { margin-left: 3px; color: var(--acid); } .ncover--acid .ncover__pro { color: var(--black); } /* Диагональная лента с паттерном бренда — как на обложках референса */ .ncover__strip { position: absolute; top: -34%; right: 12%; display: flex; align-items: center; justify-content: center; width: 26px; height: 168%; transform: rotate(18deg); transform-origin: center; background: var(--acid); color: var(--black); font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; line-height: 26px; text-align: center; white-space: nowrap; writing-mode: vertical-rl; overflow: hidden; } .ncover--acid .ncover__strip { background: var(--pink); } .ncover--pink .ncover__strip { background: var(--acid); } .ncover__top, .ncover__bottom { position: relative; z-index: 2; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); line-height: 1.05; text-transform: uppercase; } .ncover__bottom { align-self: flex-start; padding: 2px 8px; background: var(--pink); color: var(--fixed-white); } .ncover--pink .ncover__bottom { background: var(--fixed-ink); } .ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 30px; } .ncard { display: flex; flex-direction: column; gap: 18px; } .ncard__link { display: block; text-decoration: none; } .ncard__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.1; text-transform: uppercase; } .ncard__title a { text-decoration: none; transition: color 0.3s var(--ease); } .ncard__title a:hover { color: var(--acid); } .ncard__lead { font-size: 18px; font-weight: 300; color: var(--silver); } .ncard__date { font-size: 14px; color: var(--steel); } /* ------------------------------------------------------- политика и 404 */ .legal { max-width: 760px; display: flex; flex-direction: column; gap: 16px; font-size: 16px; font-weight: 300; line-height: 1.5; overflow-wrap: anywhere; } .legal h2 { margin: 24px 0 0; font-family: var(--display); font-weight: 500; font-size: 26px; text-transform: uppercase; } .legal a { color: var(--acid); } .legal__title { margin: 0 0 40px; font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1.1; text-transform: uppercase; } .section--404 { display: flex; align-items: center; min-height: 100vh; padding-bottom: 120px; } .e404 { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .e404__code { display: flex; align-items: center; gap: 20px; font-family: var(--display); font-weight: 700; font-size: 100px; line-height: 1; } .e404__mark { display: inline-flex; width: 120px; height: 42px; } .e404__text { font-family: var(--display); font-weight: 500; font-size: 40px; text-transform: uppercase; } .e404__note { max-width: 520px; font-size: 18px; font-weight: 300; color: var(--silver); } /* ========================================================================== MEDIA CASH — собственные секции поверх дизайн-системы COLLABA PRO ========================================================================== */ /* ---------------------------------------------- вспомогательные утилиты */ /* Невидимые якоря для старых ссылок легаси-страниц (#three-p, #journal). */ .anchor { display: block; height: 0; scroll-margin-top: 100px; } .shead__aside--row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; } .section__cta--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .ext { color: var(--acid); } /* Тёмная кнопка на кислотной плашке (карточка партнёра). */ .btn--ink { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--acid); font-family: var(--display); font-weight: 500; font-size: 17px; padding: 11px 24px; } .btn--ink:hover { background: transparent; color: var(--brand-ink); } /* --------------------------------------------------------------- 3П */ /* ---------------------------------------------------------------- услуги */ .section--services .shead__title { font-size: 62px; } /* 8-я карточка — партнёрская: кислотная заливка, не инвертируется */ .scard--partner { justify-content: space-between; gap: 20px; background: var(--acid); border-color: var(--acid); color: var(--brand-ink); } .scard--partner:hover { border-color: var(--brand-ink); } .scard--partner .scard__n, .scard--partner .scard__title { color: var(--brand-ink); } .scard__partner-text { font-size: 16px; font-weight: 300; line-height: 1.35; } .scard__cta { align-self: flex-start; } /* ------------------------------------------------ крупная цифра над сеткой */ .bhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px; } .bhead__left { display: flex; flex-direction: column; gap: 10px; } .bhead__num { font-family: var(--display); font-weight: 700; font-size: 75px; line-height: 1.1; letter-spacing: 0.01em; white-space: nowrap; /* Число живое (набегает в реальном времени) — цифры моноширинные, чтобы ширина не прыгала при смене разрядов. */ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .bhead__num .counter__last { color: var(--acid); } .bhead__note { font-size: 18px; font-weight: 300; } .bhead__all { width: 175px; } /* ----------------------------------------------------- Reels, которые продают */ .rgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 25px; } .rcard { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .rcard__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-img); aspect-ratio: 9 / 16; background: var(--line); } .rcard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s var(--ease), transform 0.5s var(--ease); } .rcard:hover .rcard__media img { filter: grayscale(0%); transform: scale(1.07); } .rcard__badge { position: absolute; left: 10px; top: 10px; padding: 5px 13px; border-radius: var(--radius-pill); background: var(--acid); color: var(--brand-ink); font-family: var(--display); font-weight: 500; font-size: 13px; line-height: 1.2; white-space: nowrap; } .rcard__caption { font-size: 14px; font-weight: 300; color: var(--silver); } .rcard__caption b { color: var(--white); font-weight: 600; } .rcard:hover .rcard__caption b { color: var(--acid); } /* ------------------------------------------------- слайдер кейсов с фото */ .slider--showcase { display: flex; align-items: center; gap: 15px; } .slider--showcase .swiper { flex: 1 1 auto; min-width: 0; } .slider--showcase .sarrow--onimage { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .slider--showcase .sarrow--prev { left: 20px; } .slider--showcase .sarrow--next { right: 20px; } .showslide { position: relative; display: block; text-decoration: none; color: inherit; } .showslide__media { position: relative; display: block; height: 650px; overflow: hidden; border-radius: var(--radius-img); background: var(--line); } .showslide__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; } /* Узкий исходник не растягиваем: показываем целиком, фон — размытая копия */ .showslide__media--narrow img { object-fit: contain; } .showslide__blur { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(38px) brightness(0.32) saturate(1.05); transform: scale(1.12); } .showslide__caption { position: absolute; z-index: 2; left: 20px; bottom: 20px; max-width: calc(100% - 40px); padding: 12px 30px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #000000; font-size: 16px; font-weight: 500; } /* -------------------------------------------------------- контент-завод */ .section--factory .shead { align-items: flex-start; } .section--factory .shead__title { font-size: 48px; max-width: 22ch; } .section--factory .shead__note { max-width: 620px; } .week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-bottom: 50px; } .wcard { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border: 2px solid var(--acid); border-radius: var(--radius-img); background: var(--black); } .wcard__day { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--acid); } .wcard__format { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; } .flist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; } .fitem { display: flex; flex-direction: column; gap: 10px; } .fitem__n { font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1; color: var(--acid); } .fitem__title { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.1; text-transform: uppercase; } .fitem__text { font-size: 15px; font-weight: 300; color: var(--silver); } .factory__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 50px; } /* ------------------------------------------------------- команда: ряд ядра */ .crews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .crew { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; } .crew__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 96px; border: 1px solid var(--line); border-radius: var(--radius-img); /* фон в цвет страницы: тайл корректно инвертируется вместе с темой */ background: var(--black); } .crew__initials { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--acid); } .crew__kicker { font-family: var(--text); font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); } .crew__name { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.1; text-transform: uppercase; } .crew__role { margin-top: 5px; font-family: var(--text); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acid); } .crew__text { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.35; color: var(--silver); } /* ------------------------------------------------------------ материалы */ .ncard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-family: var(--display); font-weight: 500; font-size: 18px; text-transform: uppercase; text-decoration: none; color: var(--acid); transition: color 0.3s var(--ease); } .ncard__cta svg { width: 18px; height: 18px; } .ncard__cta:hover { color: var(--white); } /* -------------------------------------------------------------- вопросы */ .faqs { border-top: 1px solid var(--line); } .faq { border-bottom: 1px solid var(--line); } .faq__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 26px 0; border: none; background: none; text-align: left; cursor: pointer; } .faq__q { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.15; text-transform: uppercase; overflow-wrap: break-word; } .faq__chev { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; color: var(--acid); } .faq__chev svg { width: 24px; height: 24px; transition: transform 0.3s var(--ease); } .faq__row[aria-expanded='true'] .faq__chev svg { transform: rotate(180deg); } .faq__body { max-width: 860px; padding: 0 0 26px; font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--silver); } .faq__body[hidden] { display: none; } /* --------------------------------------------------------- начать проект */ .start { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .start__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 75px; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; } .start__text { max-width: 640px; font-size: 18px; font-weight: 300; } .start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; } .start__contacts { display: flex; flex-direction: column; gap: 10px; font-size: 16px; } .start__contacts a { text-decoration: none; } .start__contacts a.is-underlined { text-decoration: underline; text-underline-offset: 3px; } .start__contacts a:hover { color: var(--acid); } .start__partner { font-size: 15px; font-weight: 300; color: var(--silver); } .start__partner a { color: var(--acid); text-decoration: none; } .start__partner a:hover { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------- страница кейсов */ .cases__count { margin: 20px 0 44px; font-size: 15px; color: var(--silver); } .cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 30px; } .ccard { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 110px; } .ccard.is-hidden { display: none; } .ccover { overflow: hidden; border-radius: var(--radius-img); aspect-ratio: 16 / 9; background: var(--line); } .ccover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s var(--ease); } .ccard:hover .ccover img { filter: grayscale(0%); } /* Вертикальные исходники 9:16 складываем в триптих — без растягивания */ .ccover--strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--black); } .ccard__kicker { font-family: var(--text); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid); } .ccard__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; } .ccard__stat { font-size: 15px; font-weight: 300; color: var(--silver); } .ccard__handle { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--acid); } .ccard__handle:hover { color: var(--acid); } .cblock { display: flex; flex-direction: column; gap: 6px; } .cblock__title { font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); } .cblock__text { font-size: 16px; font-weight: 300; line-height: 1.4; } .ccard__metrics { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 8px; } .ccard__metrics li { display: flex; flex-direction: column; gap: 4px; max-width: 210px; } .ccard__value { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--acid); } .ccard__label { font-size: 14px; font-weight: 300; color: var(--silver); } .cases__disclaimer { margin-top: 70px; max-width: 920px; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--silver); } .cases__insta { margin-top: 14px; max-width: 920px; font-size: 13px; font-weight: 300; color: var(--silver); } /* ------------------------------------------------------------- футер (5 колонок) */ .footer__inner { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.7fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.2fr); } .footer__col-title { font-size: clamp(24px, 2.3vw, 34px); } .footer__brief { font-size: clamp(24px, 2.3vw, 34px); } .footer__brand { gap: 40px; } /* ========================================================================== Адаптив ========================================================================== */ @media (max-width: 1279px) { :root { --pad: 30px; } .shead__title { font-size: 60px; } .bhead__num { font-size: 60px; } .cover--wide { height: 520px; } .footer__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr) minmax(0, 0.85fr) minmax(0, 1.3fr); } .logo--xl { font-size: 56px; } /* 5 колонок при более узком контейнере — имя ужимаем, чтобы оно оставалось в одну строку и не вылезало за карточку. */ .bcard__name { font-size: 19px; } .bcard__plats { gap: 14px; } .plat__count { font-size: 12px; } } @media (max-width: 1023px) { .section { padding-top: 90px; } main > .section:first-child { padding-top: calc(90px + var(--header-h)); } .hero__lines { gap: 8px; } .shead { flex-direction: column; align-items: flex-start; } .shead__aside { align-items: flex-start; } .shead__title { font-size: 48px; } .stats { grid-template-columns: 1fr 1fr; } .stat { min-height: 170px; gap: 18px; } .stat__big { font-size: 58px; } .bhead { flex-direction: column; align-items: flex-start; } .bhead__num { font-size: 52px; } .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manifest__text { font-size: 30px; } .tgrid { gap: 30px; } .tcard__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tcard__text { text-align: left; } .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cgrid { grid-template-columns: minmax(0, 1fr); } .footer { padding: 70px var(--pad) 40px; } .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 30px; } .footer__cta { align-items: flex-start; text-align: left; } .footer__contacts { align-items: flex-start; } .logo--xl { font-size: 48px; } .menu__panel { width: 78%; } .menu__item a { font-size: 44px; } .menu__brief { font-size: 44px; }} @media (max-width: 767px) { :root { --pad: 20px; --header-h: 76px; } body { font-size: 16px; } /* тач-цели: кнопки и ссылки-«пилюли» не ниже 44px */ .btn { min-height: 44px; } .header__logo, .logo--xl, .footer__brief { min-height: 44px; } .swiper-pagination-bullet { margin: 0 8px !important; } .section { padding-top: 70px; } main > .section:first-child { padding-top: calc(70px + var(--header-h)); } .section__cta { margin-top: 40px; } .header__actions-item--contact, .header__actions-item--tg { display: none; } .logo { font-size: 26px; } .hero__inner { padding: calc(16px + var(--header-h)) 16px 40px; gap: 12px; } .hero__line { font-size: min(52px, 13.3vw); gap: 10px; color: var(--black); flex-wrap: wrap; } .hero__lines { gap: 4px; } .hero__amp { -webkit-text-stroke-width: 2px; } .hero__chip { flex-wrap: wrap; font-size: 15px; } .hero__chip-pill { padding: 8px 22px; font-size: 14px; } .hero__sub { margin-top: 16px; font-size: 16px; } .hero__buttons { flex-direction: column; width: 100%; margin-top: 20px; } .hero__btn { width: 100%; animation: none; font-size: 16px; } .marquee__set span { font-size: 26px; } .shead { margin-bottom: 36px; } .shead__title { font-size: 44px; } .shead__note { font-size: 16px; } .stats { grid-template-columns: 1fr; gap: 14px; } .stat { min-height: 180px; gap: 16px; padding: 22px 20px; border-radius: 12px; } .stat__big { font-size: 52px; } .stat__text { font-size: 16px; } .pgrid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .step { padding-right: 0; } /* На мобайле листаем свайпом и точками — стрелки съедали бы ширину слайда */ .bhead__num { font-size: 34px; } .bhead__note { font-size: 16px; } .manifest__row { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; } .manifest__n { font-size: 20px; } .manifest__text { font-size: 24px; } .tgrid { grid-template-columns: 1fr; gap: 34px; margin-bottom: 50px; } .tcard__body { gap: 10px; } .tcard__name { font-size: 26px; } .tcard__role { font-size: 13px; } .tcard__text, .tcard__quote { font-size: 15px; } .ttile { aspect-ratio: auto; padding: 28px; } .ttile__text { font-size: 22px; } /* На мобайле полоса площадок превращается в бегущую строку */ .pbar { height: auto; padding: 18px 0; flex-direction: column; align-items: stretch; gap: 12px; } .pbar__label { padding: 0 var(--pad); } .pbar__track { width: max-content; animation: slide 32s linear infinite; } .pbar__list { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 28px; width: max-content; padding-right: 28px; } .pbar__list--clone { display: flex; } .sgrid { grid-template-columns: 1fr; } .scard { min-height: 200px; } .scard__title { font-size: 28px; } /* Табы услуг — горизонтальный скролл-ряд вместо переноса */ .tabs { width: 100%; flex-wrap: nowrap; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; white-space: nowrap; } .shead--bloggers, .shead--services, .shead__text, .shead__aside { width: 100%; } .ngrid { grid-template-columns: 1fr; gap: 40px; } .ncard__title { font-size: 26px; } .ncard__lead { font-size: 16px; } .btn--tall { min-height: 64px; width: 100%; font-size: 17px; } .legal__title { font-size: 30px; } .e404__code { font-size: 64px; } .e404__mark { width: 80px; height: 28px; } .e404__text { font-size: 28px; } /* Меню на мобайле — во всю ширину и целиком помещается на экран */ .menu__panel { width: 100%; padding: 80px var(--pad) 20px; gap: 20px; } .menu__top { right: var(--pad); } .menu__body { flex-direction: column; gap: 22px; } .menu__main { gap: 4px; } .menu__item a { font-size: 30px; min-height: 44px; } .menu__side { gap: 22px; } .menu__bottom { flex-direction: row; align-items: center; gap: 16px; } .menu__brief { font-size: 28px; } .modal__panel { padding: 60px 20px 30px; } .modal__title { font-size: 40px; } .modal__subtitle { font-size: 18px; } .modal__close { top: 16px; right: 16px; } .form__submit { height: 64px; font-size: 24px; } .field { font-size: 16px; } .footer { padding: 50px var(--pad) 30px; } .footer__inner { grid-template-columns: 1fr; gap: 40px; } .footer__brand { gap: 30px; } .logo--xl { font-size: 40px; } .footer__col-title { font-size: 30px; } .footer__brief { font-size: 30px; } .footer__note { margin-top: 30px; font-size: 12px; } .cookie { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; } /* --- Тач-цели: все интерактивные элементы не меньше 44×44 --- */ .burger, .icon-btn, .sarrow, .social, .vac__chev, .scard__toggle { width: 44px; height: 44px; } .scard__toggle { top: 16px; right: 16px; } .tab { min-height: 44px; display: inline-flex; align-items: center; } .filters__reset, .cookie__accept, .footer__policy, .crumbs a { min-height: 44px; display: inline-flex; align-items: center; } .cookie__accept { justify-content: center; } .footer__list, .footer__contacts, .menu__services, .menu__contacts { gap: 4px; } .footer__list a, .footer__contacts a, .menu__services a, .menu__contacts a { min-height: 44px; display: inline-flex; align-items: center; } .menu__item a { display: inline-flex; align-items: center; min-height: 48px; } .socials { gap: 16px; } } @media (max-width: 374px) { .hero__line { font-size: 42px; } .shead__title { font-size: 36px; }} /* --------------------------------------------- уважение к reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .marquee__track, .tile__ribbon-track, .pbar__list, html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__toggle { width: 69px; } } /* ------------------------------------- переключение темы: «распыление» (C) */ .dust { position: fixed; inset: 0; z-index: 1500; pointer-events: none; } /* Только transition, без animation: собственные keyframes элементов (widen у кнопок hero, fadeIn) не должны перезапускаться после уборки. */ /* Элемент не исчезает разом: тает за 260 мс, пока на его месте проявляются частицы. Blur одинаковый в обе стороны (3px) — на возврате нет скачка. */ .is-dust-hidden { opacity: 0 !important; filter: blur(3px) !important; transition: opacity 260ms linear !important, filter 260ms linear !important; } .is-dust-in { opacity: 1; filter: blur(0); transition: opacity 260ms var(--ease) !important, filter 260ms var(--ease) !important; } @media (prefers-reduced-motion: reduce) { .is-dust-hidden { opacity: 1 !important; filter: none !important; } .is-dust-in { transition: none !important; } } /* ---- инвертированная тема: контраст мелкого текста и рамок ---------------- Acid Green как ЗАЛИВКА не меняется (кнопки, карточки-цифры, бегущая строка, лого, крупные дисплейные заголовки). Но зелёный ТЕКСТ 15–25px на бумаге нечитаем, поэтому в инверсии он темнеет до --acid-ink. */ html[data-theme='inverted'] { --acid-ink: #4c6300; } html[data-theme='inverted'] .acc, html[data-theme='inverted'] .legal a, html[data-theme='inverted'] .cookie__text a, html[data-theme='inverted'] .form__status, html[data-theme='inverted'] .filters__reset, html[data-theme='inverted'] .tab:hover, html[data-theme='inverted'] .tab.is-active, html[data-theme='inverted'] .tcard__role, html[data-theme='inverted'] .tcard__quote, html[data-theme='inverted'] .vac__title, html[data-theme='inverted'] .vac__body li::before, html[data-theme='inverted'] .ccard__did li::before, html[data-theme='inverted'] .pill--acid, html[data-theme='inverted'] .btn--acid-outline, html[data-theme='inverted'] .menu__item a:hover, html[data-theme='inverted'] .menu__services a:hover, html[data-theme='inverted'] .menu__contacts a:hover, html[data-theme='inverted'] .footer__policy:hover, html[data-theme='inverted'] .footer__list a:hover, html[data-theme='inverted'] .footer__contacts a:hover, html[data-theme='inverted'] .crumbs a:hover, html[data-theme='inverted'] .ncard__title a:hover, html[data-theme='inverted'] .bcard__name:hover, html[data-theme='inverted'] .sarrow--plain:hover, /* крупный дисплейный текст акцентом: на бумаге чистый Acid нечитаем */ html[data-theme='inverted'] .footer__col-title, html[data-theme='inverted'] .footer__brief, html[data-theme='inverted'] .footer__star, html[data-theme='inverted'] .menu__brief, html[data-theme='inverted'] .dept__title, html[data-theme='inverted'] .manifest__n, html[data-theme='inverted'] .manifest__acc, html[data-theme='inverted'] .step__n, html[data-theme='inverted'] .scard__n, html[data-theme='inverted'] .ccard__value, html[data-theme='inverted'] .bhead__num .counter__last, html[data-theme='inverted'] .counter--last-acid .counter__last, html[data-theme='inverted'] .form__status { color: var(--acid-ink); } html[data-theme='inverted'] .btn--acid-outline, html[data-theme='inverted'] .pill--acid { border-color: var(--acid-ink); } html[data-theme='inverted'] .btn--acid-outline:hover { color: var(--brand-ink); border-color: var(--acid); } html[data-theme='inverted'] .field:focus, html[data-theme='inverted'] .search__input:focus, html[data-theme='inverted'] .scard:hover, html[data-theme='inverted'] .chip:hover { border-color: var(--acid-ink); } html[data-theme='inverted'] .tabs { border-bottom-color: var(--acid-ink); } /* Бумажные обложки в инверсии не сливаются с бумажным фоном страницы */ html[data-theme='inverted'] .cover--paper, html[data-theme='inverted'] .ncover--paper { box-shadow: inset 0 0 0 1px #dcd9d1; } /* ========================================================================== MEDIA CASH — адаптив и инверсия для собственных секций ========================================================================== */ @media (max-width: 1279px) { .section--services .shead__title { font-size: 52px; } .section--factory .shead__title { font-size: 42px; } .rgrid { gap: 32px 20px; } .showslide__media { height: 520px; } .start__title { font-size: 60px; } .footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 30px; } .crew { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; } .crew__tile { height: 80px; } } @media (max-width: 1023px) { .section--services .shead__title { font-size: 44px; } .section--factory .shead__title { font-size: 34px; max-width: none; } .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; } .week { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .flist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .crews { grid-template-columns: minmax(0, 1fr); gap: 26px; } .showslide__media { height: 420px; } .cgrid { grid-template-columns: minmax(0, 1fr); gap: 60px; } .start__title { font-size: 46px; } .faq__q { font-size: 24px; } .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 30px; } } @media (max-width: 767px) { .section--services .shead__title { font-size: 36px; } .section--factory .shead__title { font-size: 28px; } .section--factory .shead__note { font-size: 15px; } .hero__line { font-size: min(46px, 11.8vw); } .hero__pulse { width: 1.7em; height: 0.6em; } .hero__play, .hero__cam { width: 0.85em; height: 0.85em; } .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .rcard__badge { left: 8px; top: 8px; padding: 4px 10px; font-size: 12px; } .rcard__caption { font-size: 13px; } .showslide__media { height: 300px; } .showslide__caption { left: 12px; bottom: 12px; padding: 8px 18px; font-size: 13px; } .slider--showcase .sarrow--prev { left: 10px; } .slider--showcase .sarrow--next { right: 10px; } .week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; } .wcard { padding: 18px 16px; gap: 8px; } .wcard__day { font-size: 26px; } .wcard__format { font-size: 15px; } .flist { grid-template-columns: minmax(0, 1fr); gap: 22px; } .factory__cta { margin-top: 36px; } .factory__cta .btn { width: 100%; } .crew { grid-template-columns: 66px minmax(0, 1fr); gap: 14px; } .crew__tile { height: 66px; } .crew__initials { font-size: 24px; } .crew__name { font-size: 20px; } .ncard__cta { font-size: 16px; } .faq__row { padding: 20px 0; } .faq__q { font-size: 20px; } .faq__body { font-size: 15px; padding-bottom: 20px; } .start__title { font-size: 34px; } .start__text { font-size: 16px; } .start__actions { flex-direction: column; align-items: stretch; gap: 20px; } .start__actions .btn { width: 100%; } .cases__count { margin: 16px 0 30px; } .ccard__title { font-size: 28px; } .ccard__value { font-size: 32px; } .ccard__metrics { gap: 18px; } .ccover--strip { gap: 3px; } .section__cta--row .btn { width: 100%; } .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } } @media (max-width: 374px) { .start__title { font-size: 30px; } .rgrid { gap: 20px 10px; } } @media (prefers-reduced-motion: reduce) { /* Знак-пульс становится статичной линией: бегущий удар убран, точка не дышит. */ .pulse__beat { display: none !important; } .pulse__dot, .pulse__glow { animation: none !important; } .hero__pulse .pulse__line { stroke: var(--acid); opacity: 1; } } /* --- инверсия: зелёный мелкий текст темнеет до --acid-ink ---------------- */ html[data-theme='inverted'] .fitem__n, html[data-theme='inverted'] .wcard__day, html[data-theme='inverted'] .crew__initials, html[data-theme='inverted'] .crew__role, html[data-theme='inverted'] .ncard__cta, html[data-theme='inverted'] .faq__chev, html[data-theme='inverted'] .ccard__kicker, html[data-theme='inverted'] .ext, html[data-theme='inverted'] .start__partner a, html[data-theme='inverted'] .rcard:hover .rcard__caption b, html[data-theme='inverted'] .start__contacts a:hover { color: var(--acid-ink); } html[data-theme='inverted'] .wcard { border-color: var(--acid-ink); } html[data-theme='inverted'] .ccard__handle { border-bottom-color: var(--acid-ink); } html[data-theme='inverted'] .ncard__cta:hover { color: var(--black); } /* Кислотная карточка партнёра и бейджи Reels остаются зелёными в обеих темах */ html[data-theme='inverted'] .scard--partner, html[data-theme='inverted'] .rcard__badge { color: var(--brand-ink); } /* ========================================================================== Правки владельца 2026-09-03: цветные карточки услуг, логотип партнёра в футере, секция «Контент-завод» v2 и страница-калькулятор. ========================================================================== */ /* ------------------------------------------- 9 карточек услуг «в шахматку» */ /* Заливки по номерам: 01 acid · 02 black · 03 pink · 04 pink · 05 acid · 06 black · 07 black · 08 pink · 09 acid (партнёрская COLLABA PRO). */ /* Чёрная карточка чуть светлее фона секции — иначе на чёрном она читается как дырка; в инверсии — чуть темнее бумаги, плюс обводка. */ :root { --sc-black-1: #101010; --sc-black-2: #202020; } html[data-theme='inverted'] { --sc-black-1: #f1efe8; --sc-black-2: #e4e1d8; } .scard--tone { border: none; overflow: hidden; background-color: var(--sc-a); background-image: linear-gradient(135deg, var(--sc-a) 0%, var(--sc-b) 55%, var(--sc-a) 100%); background-size: 220% 220%; background-position: 0% 0%; color: var(--sc-fg); transition: background-position 0.6s var(--ease), transform 0.3s var(--ease); } .scard--tone:hover { background-position: 100% 100%; transform: translateY(-3px); } .scard--acid { --sc-a: #c8ff00; --sc-b: #d8ff33; --sc-fg: var(--brand-ink); } .scard--pink { --sc-a: #ff2e93; --sc-b: #ff5fae; --sc-fg: var(--brand-ink); } .scard--black { --sc-a: var(--sc-black-1); --sc-b: var(--sc-black-2); --sc-fg: var(--white); } .scard--acid .scard__n, .scard--acid .scard__title, .scard--pink .scard__n, .scard--pink .scard__title { color: var(--brand-ink); } .scard--acid .scard__body, .scard--pink .scard__body { color: rgba(0, 0, 0, 0.8); } .scard--black .scard__title { color: var(--white); } .scard--black .scard__n { color: var(--acid); } .scard--black .scard__body { color: var(--silver); } /* Кружок-раскрытие: на цветных — чёрный с белой иконкой, на чёрных — зелёный */ .scard--acid .scard__toggle, .scard--pink .scard__toggle { background: var(--brand-ink); color: var(--fixed-white); } .scard--black .scard__toggle { background: var(--acid); color: var(--brand-ink); } .scard--acid .scard__toggle[aria-expanded='true'], .scard--pink .scard__toggle[aria-expanded='true'] { background: var(--fixed-white); color: var(--brand-ink); } .scard--black .scard__toggle[aria-expanded='true'] { background: var(--fixed-white); color: var(--brand-ink); } /* В инверсии чёрная карточка становится бумажной — нужна обводка и тёмный номер, иначе карточка сливается с фоном, а зелёный номер не читается. */ html[data-theme='inverted'] .scard--black { border: 1px solid var(--line); } html[data-theme='inverted'] .scard--black .scard__n { color: var(--acid-ink); } html[data-theme='inverted'] .scard--black .scard__toggle { background: var(--acid-ink); color: var(--fixed-white); } html[data-theme='inverted'] .scard--black .scard__body { color: var(--steel); } html[data-theme='inverted'] .scard--tone:hover { border-color: var(--line); } /* --------------------------------------------- логотипы в футере (2 бренда) */ .footer__logos { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1340px; margin: 0 auto 60px; } .footer__logos .logo--xl { --logo-fg: var(--white); } .footer__logos-sep { width: 1px; height: 32px; flex: 0 0 auto; background: var(--line); } .footer__partner-logo { display: flex; flex-direction: column; gap: 8px; } .logo--partner { font-size: clamp(22px, 2.5vw, 38px); color: var(--white); transition: opacity 0.3s var(--ease); } .logo--partner:hover { opacity: 0.75; } .logo__x { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.28em; flex: 0 0 auto; } .xmark { display: block; width: 100%; height: 100%; } .footer__partner-note { font-size: 12px; font-weight: 300; color: var(--silver); } /* -------------------------------------------- «Контент-завод» на главной v2 */ .factory__sub { margin: -20px 0 40px; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.15; text-transform: uppercase; } .factory__sub-num { color: var(--acid); font-weight: 700; } .factory__totals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 26px 0 50px; font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.2; text-transform: uppercase; } .factory__total b { color: var(--acid); font-weight: 700; } .factory__dot { color: var(--silver); } html[data-theme='inverted'] .factory__sub-num, html[data-theme='inverted'] .factory__total b { color: var(--acid-ink); } /* ========================================================================== Страница /kontent-zavod/ — калькулятор (MEDIACASH-SPEC §3b) ========================================================================== */ .calc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; } .calc__panel { display: flex; flex-direction: column; gap: 46px; } .calc__group { display: flex; flex-direction: column; gap: 18px; } .calc__label { font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acid); } .calc__hint { font-size: 14px; font-weight: 300; color: var(--silver); } .calc__legal { margin-top: 50px; max-width: 720px; font-size: 14px; font-weight: 300; color: var(--silver); } .calc__brief { display: none; } html[data-theme='inverted'] .calc__label { color: var(--acid-ink); } /* пресеты */ .presets { display: flex; flex-wrap: wrap; gap: 12px; } .preset { min-height: 44px; padding: 10px 26px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--white); font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .preset:hover { border-color: var(--acid); color: var(--acid); } .preset.is-active { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); } html[data-theme='inverted'] .preset:hover { color: var(--acid-ink); border-color: var(--acid-ink); } html[data-theme='inverted'] .preset.is-active { color: var(--brand-ink); } /* степперы и ползунки */ .stps { display: flex; flex-direction: column; gap: 26px; } .stp { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-img); } .stp__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .stp__name { font-family: var(--display); font-weight: 500; font-size: 22px; text-transform: uppercase; } .stp__ctrl { display: flex; align-items: center; gap: 6px; } .stp__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--white); font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .stp__btn:hover { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); } .stp__value { width: 74px; height: 44px; padding: 0 4px; border: none; border-radius: 8px; background: transparent; color: var(--white); font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .stp__value::-webkit-outer-spin-button, .stp__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .stp__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .stp__hint { font-size: 14px; font-weight: 300; color: var(--white); } .stp__price { font-size: 13px; font-weight: 300; color: var(--steel); } .stp__range { width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .stp__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); } .stp__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); } .stp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border: none; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 1px var(--black); } .stp__range::-moz-range-thumb { width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--acid); } .stp__range:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; } /* чипы площадок */ .pchips { display: flex; flex-wrap: wrap; gap: 12px; } .pchip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--white); font-family: var(--text); font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .pchip__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--line); color: var(--white); } .pchip__icon svg { width: 16px; height: 16px; } .pchip:hover { border-color: var(--acid); } .pchip.is-on { background: var(--acid); border-color: var(--acid); color: var(--brand-ink); } .pchip.is-on .pchip__icon { background: var(--brand-ink); color: var(--acid); } html[data-theme='inverted'] .pchip:hover { border-color: var(--acid-ink); } html[data-theme='inverted'] .pchip.is-on { color: var(--brand-ink); } /* опции-переключатели */ .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .opt__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius-img); cursor: pointer; transition: border-color 0.3s var(--ease); } .opt__row:hover { border-color: var(--acid); } .opt__input { position: absolute; width: 1px; height: 1px; opacity: 0; } .opt__switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; border-radius: 13px; background: var(--line); transition: background-color 0.3s var(--ease); } .opt__switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform 0.3s var(--ease); } .opt__input:checked + .opt__switch { background: var(--acid); } .opt__input:checked + .opt__switch::after { transform: translateX(18px); background: var(--brand-ink); } .opt__input:focus-visible + .opt__switch { outline: 2px solid var(--acid); outline-offset: 3px; } .opt__text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .opt__name { font-size: 15px; font-weight: 500; } .opt__note { font-size: 13px; font-weight: 300; color: var(--silver); } .opt__price { font-family: var(--display); font-weight: 500; font-size: 17px; white-space: nowrap; color: var(--acid); } html[data-theme='inverted'] .opt__price { color: var(--acid-ink); } html[data-theme='inverted'] .opt__row:hover { border-color: var(--acid-ink); } /* итоговая карточка */ .ctotal { position: sticky; top: calc(var(--header-h) + 20px); } .ctotal__inner { display: flex; flex-direction: column; gap: 18px; padding: 30px; border: 2px solid var(--acid); border-radius: var(--radius-card); background: var(--black); } .ctotal__label { font-family: var(--text); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); } .ctotal__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; line-height: 1; text-transform: uppercase; } .ctotal__from { font-size: 24px; font-weight: 500; color: var(--silver); } .ctotal__num { font-size: 56px; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .ctotal__cur { font-size: 24px; font-weight: 500; } .ctotal__rows { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .ctotal__rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 300; color: var(--silver); } .ctotal__rows b { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--white); font-variant-numeric: tabular-nums; } .ctotal__reach { font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--silver); } .ctotal__reach b { font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--acid); } .ctotal__mark { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 11px; text-transform: uppercase; color: var(--steel); } .ctotal__cta { width: 100%; } .ctotal__note { font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--silver); } html[data-theme='inverted'] .ctotal__reach b { color: var(--acid-ink); } html[data-theme='inverted'] .ctotal__inner { border-color: var(--acid-ink); } /* блок «как это работает» на странице калькулятора */ /* Ритм как на главной: нижний отступ задаёт следующая секция */ .section--calc, .section--how { padding-bottom: 0; } .section--how .week--page { margin-top: 60px; margin-bottom: 0; } .section--how .factory__totals { margin-bottom: 0; } /* ------------------------------------------------------------ адаптив */ @media (max-width: 1279px) { .calc { grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; } .ctotal__num { font-size: 46px; } .footer__logos { gap: 20px; } } @media (max-width: 1023px) { .calc { grid-template-columns: minmax(0, 1fr); } .opts { grid-template-columns: minmax(0, 1fr); } .footer__logos { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 46px; } .footer__logos-sep { display: none; } .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .factory__sub { margin: -10px 0 30px; font-size: 22px; } .factory__totals { margin: 20px 0 36px; font-size: 20px; } .section--calc .shead__title { font-size: 32px; } .calc__panel { gap: 34px; } .stp { padding: 18px 16px; } .stp__name { font-size: 19px; } .stp__value { width: 62px; font-size: 24px; } .calc__legal { margin-top: 30px; } /* Итог закреплён внизу полосой: цена + кнопка. Разбивка и оценка охвата остаются в потоке (.calc__brief), чтобы полоса была невысокой. */ .calc__brief { display: flex; flex-direction: column; gap: 14px; } .ctotal { position: fixed; top: auto; left: 0; right: 0; bottom: 0; /* ниже cookie-баннера (1000), меню (1002) и модалки (1003) */ z-index: 999; } .ctotal__inner { flex-direction: row; align-items: center; gap: 14px; padding: 12px var(--pad); border: none; border-top: 2px solid var(--acid); border-radius: 0; } .ctotal__label, .ctotal .ctotal__rows, .ctotal .ctotal__reach, .ctotal__note { display: none; } .ctotal__price { flex: 1 1 auto; gap: 5px; } .ctotal__from { font-size: 15px; } .ctotal__num { font-size: 30px; } .ctotal__cur { font-size: 15px; } .ctotal__cta { width: auto; flex: 0 0 auto; padding: 10px 20px; font-size: 15px; } /* полоса не перекрывает контент и cookie-баннер */ .page--factory { padding-bottom: 86px; } .page--factory .cookie { bottom: 96px; } .section--how .week--page { margin-top: 36px; } }