/* ============================================================ LAB с Антоном Беляевым — солдаут ВТБ Арены. Версия 2. Макет Figma: claude-cowork-test-playground / node 65-247, кадр 1200 ============================================================ */ /* ---------- ТОКЕНЫ ---------- */ :root{ --green:#00FF8C; --blue:#161F84; --blue-2:#444FC5; /* карточка «Видеоафиша» */ --lilac:#9BA3F4; /* карточка «Волна 2» */ --ink:#0E0E0E; --white:#FFFFFF; --f-head:'Druk Wide Cyr', Impact, sans-serif; --f-body:'Inter', Arial, sans-serif; --pad:80px; --radius:30px; --card-radius:18px; } /* ---------- БАЗА ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0;background:var(--ink); font-family:var(--f-body);font-size:15px;line-height:19px; color:var(--blue);overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0} p{margin:0} h1,h2,h3{margin:0;font-weight:700} dl,dd,dt{margin:0} section,footer{position:relative} .container{max-width:1200px;margin:0 auto;padding:0 var(--pad);position:relative} .rounded-top{ border-radius:var(--radius) var(--radius) 0 0; margin-top:calc(-1 * var(--radius)); position:relative;z-index:2; } /* ---------- ТИПОГРАФИКА ---------- */ .h2{font-family:var(--f-head);font-size:36px;line-height:44px;text-transform:uppercase;letter-spacing:-0.01em} .h2--white{color:var(--white)} .h2--blue{color:var(--blue)} .h3{font-family:var(--f-head);font-size:22px;line-height:27px;text-transform:uppercase;letter-spacing:-0.01em;color:var(--white)} .h3--blue{color:var(--blue);font-size:30px;line-height:36px} .body{font-size:15px;line-height:19px} .body--light{color:var(--white)} .body b{font-weight:700} .lead{font-family:var(--f-head);font-size:22px;line-height:27px;text-transform:uppercase;letter-spacing:-0.01em} .lead--white{color:var(--white)} .list{font-size:15px;line-height:19px;list-style:none} .list li{position:relative;padding-left:16px;margin-bottom:9px} .list li::before{content:'•';position:absolute;left:0;top:0} .bignum{font-family:var(--f-head);font-size:44px;line-height:48px;text-transform:uppercase;letter-spacing:-0.01em} .bignum span{font-size:15px;padding:0 5px} .btn{ display:inline-flex;align-items:center;justify-content:center; min-width:239.93px;height:47.52px;padding:0 24px; background:var(--blue);color:var(--green); font-family:var(--f-head);font-size:14.77px;letter-spacing:-0.07em;text-transform:uppercase; position:relative;overflow:hidden;z-index:0;transition:color .35s var(--ease,ease) } .btn::before{content:'';position:absolute;inset:0;background:var(--green); transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,.75,.24,1);z-index:-1} .btn:hover::before{transform:scaleX(1)} .btn:hover{color:var(--blue)} /* ---------- СЛОЙ ЩУПАЛЕЦ ---------- */ .deco{position:absolute;left:50%;transform:translateX(-50%);top:0; width:100%;max-width:1200px;height:100%;pointer-events:none;z-index:0} /* слой во всю ширину окна — то, что уходит за кадр, держится за край экрана и едет вместе с ним при сужении, а не висит в воздухе */ .deco--vw{width:100vw;max-width:none} .deco--front{z-index:3} .deco--card{z-index:0;overflow:hidden;border-radius:var(--card-radius)} .deco__i{position:absolute;max-width:none;height:auto} /* ============================================================ 1. ГЕРОЙ ============================================================ */ .s-hero{background:var(--green);overflow:hidden;padding-bottom:105px} .nav{height:124px} .nav__home{position:absolute;left:var(--pad);top:80px;font-size:14px;line-height:17px} .nav__menu{position:absolute;left:350px;top:80px;display:flex;gap:20px;font-size:14px;line-height:17px} .nav__logo{position:absolute;right:var(--pad);top:53px;z-index:4;display:block;transition:transform .4s ease} .nav__logo:hover{transform:rotate(-6deg) scale(1.06)} .nav__logo img{width:56px;height:auto} .hero__grid{display:grid;grid-template-columns:530px 1fr;column-gap:0;padding-top:31px} .hero__text{padding-top:4px} .hero__eyebrow{font-family:var(--f-head);font-size:22px;line-height:26px; text-transform:uppercase;white-space:nowrap;color:var(--blue);letter-spacing:-0.01em;margin-bottom:10px} .hero__title{width:503px;max-width:100%;margin:0 0 20px} .hero__title img{width:100%;height:auto} .hero__lead{font-size:26px;line-height:31px;color:var(--blue)} .hero__media{position:relative;margin-top:-27px} .hero__photo{width:510px;max-width:100%;height:336.27px;object-fit:cover} .hero__media .btn{position:absolute;left:20px;top:268.75px;z-index:3} /* щупальца: правые цепляются к правому краю окна, левые — к левому */ .d-hero {right:-4vw;top:0;width:min(350px,32vw)} /* «Ресурс 2 1»: 378.72×475.63 на 695.24/-84.14, поворот −51.29° (координаты из Figma) */ .d-context{left:calc(50% + 95.24px);top:-84.14px;width:378.72px;height:475.63px; transform:rotate(-51.29deg);overflow:hidden;display:block} .d-context img{width:100%;height:100%;display:block} .d-cr-rt {right:-16vw;top:152px;width:min(380px,34vw)} .d-cr-l {left:-5vw;top:302px;width:min(177px,16vw)} .d-cr-rb {right:-8vw;top:641px;width:min(360px,32vw)} /* уходит за левый край окна, ниже блока ROMI — как в макете (рамка -133/342) */ .d-fin-l {left:-170px;top:400px;width:320px} .d-fin-r {right:-9vw;top:169px;width:min(353px,31vw)} .d-w2 {left:-3%;top:180px;width:23%} .d-proj {right:-3%;top:60px;width:31%} .d-w4a {left:49.01%;bottom:0;width:38.23%} .d-w4b {left:71.00%;bottom:0;width:27.19%} /* три факта под фото */ .facts{display:grid;grid-template-columns:386.76px 344.72px 1fr;margin-top:83px} .facts__col{padding-left:42.24px;border-left:2px solid var(--blue)} .facts__col:last-child{padding-left:46.42px} .facts__col:first-child{padding-left:0;border-left:0} .facts dt{font-size:28.4px;line-height:34px;color:var(--blue);margin-bottom:21px} .facts dd{font-family:var(--f-head);font-size:23.23px;line-height:28px; text-transform:uppercase;color:var(--blue);letter-spacing:-0.01em} /* ============================================================ 2. ЦИФРЫ ============================================================ */ .s-stats{background:var(--white);padding:80px 0 76px;overflow:hidden} .stats{display:grid;grid-template-columns:265px 266px 1fr;align-items:stretch;margin-bottom:46px} .stat{display:flex;flex-direction:column;min-height:115px} .stat__value{margin-top:auto} .stat__label{font-family:var(--f-head);font-size:14px;line-height:17px; text-transform:uppercase;color:var(--blue);letter-spacing:0.01em;margin-bottom:0} .stat__value{font-family:var(--f-head);font-size:36px;line-height:44px;white-space:nowrap; text-transform:uppercase;color:var(--blue);letter-spacing:-0.01em} .stats__photo{width:100%;height:279.09px;object-fit:cover} /* ============================================================ 3. КОНТЕКСТ ============================================================ */ .s-context{background:var(--blue);padding:70px 0 137px;overflow:hidden} .s-context .h2{margin-bottom:12px} .s-context .body{font-size:14px;line-height:17px;margin-bottom:17px;max-width:484px} .s-context .ctx-lead{margin:24px 0 25px;max-width:642px} .s-context .ctx-last{max-width:488px;margin-bottom:0} /* ============================================================ 4. ВОЛНЫ — СТОПКА КАРТОЧЕК ============================================================ */ .s-waves{background:var(--green);padding:52px 0 120px} .cards{max-width:1200px;margin:0 auto;padding:0} .card{ touch-action:pan-y; width:var(--cw,100%); margin-left:auto;margin-right:auto; position:sticky; top:var(--stick,40px); border-radius:var(--card-radius); overflow:hidden; margin-bottom:34px; box-shadow:0 -18px 44px rgba(14,14,14,.18); } .card__in{padding:48px 68px 56px;position:relative;z-index:2} .card--4 .card__in{padding:43px 36px 66px 90px} .card--4 .card__title{font-size:30.65px;line-height:37px;margin-bottom:0} .card--4 .h3{font-size:18.73px;line-height:23px;margin:17px 0 0} .card--4 .body{font-size:12.1px;line-height:15px} .card--4 .card__text{padding-top:26px} .card--4 .card__total{margin-top:-18px} .card--4 .list{font-size:11.92px;line-height:14px;margin-top:17px} .card--4 .list li{margin-bottom:8.52px} .card__title{font-family:var(--f-head);font-size:34px;line-height:42px; text-transform:uppercase;letter-spacing:-0.01em;color:var(--white);margin-bottom:34px} .card__grid{display:grid;grid-template-columns:289px 1fr;column-gap:58px;align-items:start} .card--2 .card__grid{grid-template-columns:309px 1fr;column-gap:50px} .card--4 .card__grid{grid-template-columns:426px 1fr;column-gap:20px} .card__poster{width:289px;height:414px;object-fit:cover} .card--2 .card__photo{width:309px;height:264px;object-fit:cover} .card--4 .card__photo{width:426px;height:270px;object-fit:cover;margin-top:32px} .card__text .body{margin-bottom:18px} .card__text .h3{margin:26px 0 12px} .card__sub{color:var(--white);max-width:420px;margin-bottom:28px} .card--1{background:var(--blue);--cw:76.33%} /* 916 из 1200 */ .card--1 .body,.card--1 .list{color:var(--white)} .card--2{background:var(--lilac);--cw:79.43%} /* 952 */ .card--2 .card__title,.card--2 .h3{color:var(--white)} .card--2 .body{color:#101B60} .card--3{background:var(--blue-2);--cw:81.86%} /* 990 */ .card--3 .body,.card--3 .bignum,.card--3 .metric__label{color:var(--white)} .card--4{background:var(--white);--cw:86.04%} /* 1031 */ .card--4 .card__title,.card--4 .h3{color:var(--blue)} .card--4 .body,.card--4 .list{color:var(--blue)} /* цепочка «тестируем → оцениваем → оставляем» */ .flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;list-style:none;margin-top:44px} .flow li{position:relative;font-family:var(--f-head);font-size:19px;line-height:24px; text-transform:uppercase;color:var(--white);letter-spacing:-0.01em} .flow li+li::before{content:'';position:absolute;left:-24px;top:12px;width:44px;height:1.5px;background:var(--white)} .flow li+li::after{content:'';position:absolute;left:14px;top:8px;width:9px;height:9px; border-top:1.5px solid var(--white);border-right:1.5px solid var(--white);transform:rotate(45deg)} /* видео внутри карточки */ .card__head{display:grid;grid-template-columns:1fr 470px;column-gap:40px;align-items:start;margin-bottom:40px} .card__head .card__title{margin-bottom:20px} .card__video{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:rgba(0,0,0,.35);z-index:2} .card__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .metrics{display:grid;grid-template-columns:200px 1fr;column-gap:0;margin-bottom:26px} .metric__label{font-family:var(--f-head);font-size:13px;line-height:17px; text-transform:uppercase;letter-spacing:0.01em;margin-bottom:14px} .metric--wide{margin-bottom:52px} .metric__note{display:inline-block;font-size:12px;line-height:14px;vertical-align:middle;padding-left:8px} .card__claim{font-family:var(--f-head);font-size:22px;line-height:28px; text-transform:uppercase;color:var(--white);letter-spacing:-0.01em} .card__total{font-family:var(--f-head);font-size:27.18px;line-height:33px; text-transform:uppercase;color:var(--blue);letter-spacing:-0.01em;margin-top:61px;max-width:470px} .card__total .t-sm{font-size:13.98px} .card__total .t-mid{font-size:24.6px;line-height:30px} /* --- Видеоафиша: геометрия из Figma (карточка 982.37×608.23) --- */ .card--3 .card__in{padding:44px 90px 84px} .card--3 .card__title{font-size:31.36px;line-height:37px;margin-bottom:11px;white-space:nowrap} .card--3 .card__head{display:block} /* видео стоит рядом с текстом, а не над метриками — потому абсолютом */ .card--3 .card__video{position:absolute;left:501.19px;top:170.75px;margin:0} .card--3 .body{font-size:12.1px;line-height:15px;max-width:334px} .card--3 .card__video{width:384.08px;height:190.76px} .card--3 .metrics{grid-template-columns:135.32px 1fr;margin-top:58px} .card--3 .metric__label{font-size:10.7px;line-height:13px} .card--3 .bignum{font-size:27.52px;line-height:33px} .card--3 .bignum span{font-size:10.7px;padding:0 4px} .card--3 .metric--wide{margin-top:35px} .card--3 .card__claim{font-size:16.82px;line-height:21px;margin-top:93px} /* --- Волна 2: геометрия из Figma (карточка 953.17×589.7) --- */ .card--2 .card__in{padding:45px 92px 75px} .card--2 .card__grid{grid-template-columns:307.52px 1fr;column-gap:69.84px} .card--2 .card__photo{width:307.52px;height:258.73px;object-fit:cover} .card--2 .card__title{font-size:31.36px;line-height:37px;margin-bottom:42px} .card--2 .h3{font-size:19px;line-height:23px;margin:20px 0 12px} .card--2 .body{font-size:12.1px;line-height:15px;margin:0 0 10px} .card--2 .card__text{max-width:390px} .card--2 .flow{grid-template-columns:278px 291px 1fr;gap:0;margin-top:24px} .card--2 .flow li{font-size:18.49px;line-height:23px} /* --- Волна 1: геометрия из Figma (карточка 916×603, кадр 1200) --- */ .card--1 .card__in{padding:42px 90px 45px} .card--1 .card__grid{grid-template-columns:289.35px 1fr;column-gap:63.65px} .card--1 .card__poster{width:289.35px;height:415.84px;object-fit:cover} .card--1 .card__title{font-size:31.1px;line-height:37px;margin-bottom:26px} .card--1 .h3{font-size:19px;line-height:23px;margin:24.5px 0 12.96px} .card--1 .body{font-size:12.1px;line-height:15px;margin:0} /* ============================================================ 5. КРЕАТИВЫ ============================================================ */ .s-creatives{background:var(--white);padding:16px 0 71px;overflow:hidden} .s-creatives .container{z-index:1} .s-creatives .h2{font-size:36px;line-height:44px;margin-bottom:52px} .cr{display:grid;grid-template-columns:530px 1fr;column-gap:0;margin-bottom:62px} .cr--2{margin-bottom:0} .cr__col .h3--blue{font-size:36px;line-height:44px;margin-bottom:10px} .cr__col .body{font-size:14px;line-height:17px;margin-bottom:77px;color:var(--blue);max-width:476px} .cr__photo{width:498px;max-width:100%;height:243px;object-fit:cover} /* веер афиш: пять постеров лесенкой. Доли от макетных 483.15×267, чтобы блок сжимался на узких экранах вместе с колонкой */ .cr__fan{position:relative;width:100%;max-width:483.15px;aspect-ratio:483.15/267;margin-top:58px} .fan__i{position:absolute;display:block;height:auto;aspect-ratio:1080/1920; box-shadow:-3px 3px 6.1px rgba(0,0,0,.25)} .fan--1{left:0;top:11.27%;width:23.947%;box-shadow:none} .fan--2{left:11.895%;top:7.397%;width:26.324%} .fan--3{left:26.137%;top:5.281%;width:27.643%} .fan--4{left:41.788%;top:3.873%;width:28.612%} .fan--5{left:68.923%;top:0;width:31.078%;box-shadow:0 4px 4px rgba(0,0,0,.25)} .cr__video{width:510px;max-width:100%;height:243px;position:relative;overflow:hidden;background:#D9D9D9} .cr__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .cr__last{font-size:34.51px;line-height:42px;margin-top:112px} /* ============================================================ 6. ИТОГОВЫЕ ЦИФРЫ ============================================================ */ .s-totals{background:var(--blue);padding:66px 0 88px;overflow:hidden} .s-totals::before{content:'';position:absolute;inset:0; background:none;opacity:.45;mix-blend-mode:luminosity} .s-totals .container{position:relative;z-index:1} .s-totals .h2{margin-bottom:47px} .totals{display:grid;grid-template-columns:237.5px 261.5px 1fr;margin-bottom:61px} .totals--2{margin-bottom:0} .total__label{font-family:var(--f-head);font-size:14px;line-height:17px; text-transform:uppercase;color:var(--white);margin-bottom:0} .total__value{font-family:var(--f-head);font-size:36px;line-height:44px;white-space:nowrap;margin-top:8px; text-transform:uppercase;color:var(--white);letter-spacing:-0.01em} .total__value span{font-size:14px} .totals--2 .total__value{margin-top:37px} /* «Результат / SOLD OUT» — низ того же экрана: 616 и 660.5 */ .final{margin-top:249px} .final__label{font-family:var(--f-head);font-size:23.08px;line-height:28px;text-transform:uppercase;color:var(--white);margin-bottom:23px} .final__value{font-family:var(--f-head);font-size:59.35px;line-height:73px;text-transform:uppercase;color:var(--white);letter-spacing:-0.01em} /* ============================================================ 7. ФИНАЛ ============================================================ */ .s-final::before{content:'';position:absolute;inset:0; background:none;opacity:.5;filter:brightness(.5)} .s-final .container{position:relative;z-index:1} .final__label{font-family:var(--f-head);font-size:16px;line-height:20px; text-transform:uppercase;color:var(--white);letter-spacing:0.02em;margin-bottom:26px} .final__value{font-family:var(--f-head);font-size:60px;line-height:72px; text-transform:uppercase;color:var(--white);letter-spacing:-0.01em} /* ============================================================ АНИМАЦИИ ============================================================ */ :root{--ease:cubic-bezier(.22,.75,.24,1)} .anim-on [data-anim="fade"]{opacity:0;transform:translate3d(0,22px,0); transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)} .anim-on [data-anim="fade"].is-in{opacity:1;transform:none} .anim-on [data-anim="wipe"]{opacity:0; -webkit-mask-image:linear-gradient(90deg,#000,#000);mask-image:linear-gradient(90deg,#000,#000); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:0% 100%;mask-size:0% 100%; transition:opacity .3s linear var(--d,0ms), -webkit-mask-size .85s var(--ease) var(--d,0ms),mask-size .85s var(--ease) var(--d,0ms)} .anim-on img[data-anim="wipe"]{-webkit-mask-position:0 100%;mask-position:0 100%; -webkit-mask-size:100% 0%;mask-size:100% 0%} .anim-on [data-anim="wipe"].is-in{opacity:1;-webkit-mask-size:100% 100%;mask-size:100% 100%} .progress{position:fixed;left:0;top:0;width:100%;height:3px;background:#fff; mix-blend-mode:difference;transform:scaleX(0);transform-origin:0 50%;z-index:100;pointer-events:none} @media (prefers-reduced-motion: reduce){ .anim-on [data-anim]{opacity:1!important;transform:none!important; -webkit-mask-image:none!important;mask-image:none!important;transition:none!important} .progress{display:none} .card{position:relative;top:auto} } /* ============================================================ БРЕЙКПОИНТ 980 ============================================================ */ @media (max-width:1199px){ .hero__grid{grid-template-columns:1fr 380px} .cards{padding:0 40px} .card__in{padding:40px 44px 46px} .card__grid{grid-template-columns:250px 1fr;column-gap:36px} .card__poster{width:250px} .card__head{grid-template-columns:1fr 360px;column-gap:26px} .stats{grid-template-columns:1fr 1fr;row-gap:34px} .stat--wide{grid-column:1 / -1} .totals,.totals--2{grid-template-columns:200px 230px 1fr} } /* ============================================================ БРЕЙКПОИНТ 640 ============================================================ */ @media (max-width:979px){ :root{--pad:40px} .deco{display:none} .h2{font-size:32px;line-height:36px} .h3--blue{font-size:24px;line-height:29px} .card__title{font-size:26px;line-height:32px} .card__total,.final__value{font-size:26px;line-height:32px} .bignum,.stat__value,.total__value{font-size:34px;line-height:40px} .s-creatives .h2{font-size:32px;line-height:38px} .hero__grid{grid-template-columns:1fr;row-gap:26px} .hero__text{padding-top:30px} .hero__title{width:100%} .hero__lead{font-size:19px;line-height:24px} .hero__eyebrow{font-size:16px} .hero__photo{height:270px} .hero__media .btn{position:static;margin-top:16px;width:100%} .facts{grid-template-columns:1fr;row-gap:26px;margin-top:40px} .facts__col{padding-left:0;border-left:0;border-top:2px solid var(--blue);padding-top:18px} .facts__col:first-child{border-top:0;padding-top:0} .cards{padding:0 20px} .card{margin-bottom:22px} .card__in{padding:30px 26px 34px} .card__grid{grid-template-columns:1fr;row-gap:24px} .card__poster{width:100%} .card__head{grid-template-columns:1fr;row-gap:24px} .flow{grid-template-columns:1fr;gap:18px} .flow li+li::before,.flow li+li::after{display:none} .metrics{grid-template-columns:1fr;row-gap:22px} .cr,.cr--2{grid-template-columns:1fr;row-gap:40px;margin-bottom:44px} .cr__last{margin-top:30px} .totals,.totals--2{grid-template-columns:1fr 1fr;row-gap:30px} .s-final{padding:120px 0 90px} } /* ============================================================ БРЕЙКПОИНТ 320 ============================================================ */ @media (max-width:639px){ :root{--pad:20px;--radius:20px} body{font-size:13px;line-height:17px} .body,.list{font-size:13px;line-height:17px} .h2{font-size:22px;line-height:26px} .card__title{font-size:20px;line-height:25px} .h3{font-size:16px;line-height:20px} .h3--blue{font-size:18px;line-height:22px} .lead{font-size:17px;line-height:21px} .bignum,.stat__value,.total__value{font-size:24px;line-height:29px} .stat__label,.total__label,.metric__label{font-size:11px;line-height:14px} .final__value{font-size:22px;line-height:27px} .card__total{font-size:20px;line-height:25px} .nav{height:68px} .nav__home,.nav__menu{display:none} .nav__logo{left:var(--pad);right:auto;top:22px} .nav__logo img{width:32px} .hero__grid{padding-top:10px} .hero__eyebrow{font-size:11px;line-height:14px} .hero__photo{height:190px} .facts dt,.facts dd{font-size:15px;line-height:19px} .cards{padding:0 12px} .card__in{padding:22px 18px 26px} .s-context{padding:50px 0 56px} .s-stats{padding:36px 0 40px} .s-waves{padding:30px 0 50px} .s-creatives{padding:40px 0 50px} .s-totals{padding:40px 0 50px} .s-final{padding:80px 0 60px} } /* ============================================================ 8. О НАС / КОНТАКТЫ ============================================================ */ .s-cta{background:var(--blue);padding:0 0 86px} .nav--cta{height:110px} .nav--cta .nav__home,.nav--cta .nav__menu{top:50px;color:var(--white)} .cta{display:grid;grid-template-columns:1fr 1fr;column-gap:34px;padding-top:4px} .cta__title{width:221px;height:auto; filter:drop-shadow(9px 9px 0 rgba(4,8,48,.85));margin-bottom:52px} .cta__title--wide{width:400px} .cta__btn{ display:inline-flex;align-items:center;justify-content:center; min-width:238px;height:47px;padding:0 22px; font-family:var(--f-head);font-size:15px;letter-spacing:0.04em;text-transform:uppercase; margin-bottom:22px;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease) } .cta__btn--fill{background:var(--green);color:var(--white);box-shadow:7px 7px 0 rgba(4,8,48,.85)} .cta__btn--line{color:var(--white);border:1.5px solid var(--green);box-shadow:7px 7px 0 var(--green)} .cta__btn:hover{transform:translate(3px,3px)} .cta__btn--line:hover{background:var(--green);color:var(--blue)} .cta__note{font-size:15px;line-height:20px;color:var(--white)} .cta__mail{display:inline-block;margin-top:26px; font-family:var(--f-head);font-size:26px;line-height:32px;color:var(--white);letter-spacing:-0.01em} .cta__mail:hover{color:var(--green)} @media (max-width:979px){ .cta{grid-template-columns:1fr;row-gap:52px} .cta__title{width:180px;margin-bottom:34px} .cta__title--wide{width:320px} .s-cta{padding-bottom:60px} .nav--cta{height:80px} } @media (max-width:639px){ .cta__title{width:120px;margin-bottom:26px} .cta__title--wide{width:220px} .cta__btn{min-width:100%;height:40px;font-size:12px} .cta__mail{font-size:18px;line-height:23px} } /* ============================================================ АДАПТИВ: сброс пиксельной геометрии, снятой с макета 1200. Правила вида «.card--4 .card__in» специфичнее общих медиа-правил, поэтому их приходится гасить адресно. ============================================================ */ @media (max-width:1199px){ .cr__col,.card__text,.card__grid > *{min-width:0} .card--3 .card__title{white-space:normal} .card--3 .card__video{max-width:100%} .hero__photo{width:100%} .facts{grid-template-columns:1fr 1fr 1fr} .facts__col,.facts__col:last-child{padding-left:32px} .stats{grid-template-columns:1fr 1fr} .totals,.totals--2{grid-template-columns:1fr 1fr 1fr} .cr,.cr--2{grid-template-columns:1fr 1fr;column-gap:34px} .cr__photo,.cr__video{width:100%} .final{margin-top:160px} .card--1 .card__in,.card--2 .card__in,.card--3 .card__in,.card--4 .card__in{padding:40px 44px 46px} .card--1 .card__grid,.card--2 .card__grid,.card--4 .card__grid{grid-template-columns:250px 1fr;column-gap:36px} .card--1 .card__poster{width:250px;height:auto} .card--2 .card__photo,.card--4 .card__photo{width:100%;height:auto;margin-top:0} .card--3 .card__video{position:static;width:100%;height:auto;aspect-ratio:2/1} .card--3 .card__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:26px;align-items:start} .card--3 .metrics{grid-template-columns:1fr 1fr;margin-top:36px} .card--3 .card__claim{margin-top:44px} .card--3 .metric--wide{margin-top:26px} .card--2 .flow{grid-template-columns:1fr 1fr 1fr;margin-top:36px} .card--4 .card__total{max-width:none} } @media (max-width:979px){ /* на узких стопка не сужается ступенькой — все карточки во всю ширину */ .card,.card--1,.card--2,.card--3,.card--4{--cw:100%} .cr,.cr--2{grid-template-columns:1fr} .final{margin-top:90px} .facts{grid-template-columns:1fr} .facts__col,.facts__col:last-child{padding-left:0} .totals,.totals--2{grid-template-columns:1fr 1fr} .card--1 .card__in,.card--2 .card__in,.card--3 .card__in,.card--4 .card__in{padding:30px 26px 34px} .card--1 .card__grid,.card--2 .card__grid,.card--4 .card__grid{grid-template-columns:1fr;row-gap:24px} .card--1 .card__poster{width:100%} .card--3 .card__head{grid-template-columns:1fr;row-gap:24px} .card--3 .metrics{grid-template-columns:1fr;row-gap:22px} .card--2 .flow{grid-template-columns:1fr;gap:18px} /* кегли карточек — от макетных 31/19/12 к экранным */ .card--1 .card__title,.card--2 .card__title,.card--3 .card__title,.card--4 .card__title{font-size:24px;line-height:30px;white-space:normal;margin-bottom:20px} .card--1 .h3,.card--2 .h3,.card--4 .h3{font-size:17px;line-height:21px;margin:18px 0 10px} .card--1 .body,.card--2 .body,.card--3 .body,.card--4 .body{font-size:14px;line-height:18px;max-width:none} .card--4 .list{font-size:14px;line-height:18px} .card--4 .card__text{padding-top:0} .card--4 .card__total{font-size:24px;line-height:29px;margin-top:26px} .card--4 .card__total .t-mid{font-size:22px;line-height:27px} .card--4 .card__total .t-sm{font-size:12px} .card--3 .bignum{font-size:30px;line-height:36px} .card--3 .metric__label{font-size:12px;line-height:15px} .card--3 .card__claim{font-size:18px;line-height:23px;margin-top:32px} .card--2 .flow li{font-size:16px;line-height:20px} } @media (max-width:639px){ .totals,.totals--2{grid-template-columns:1fr 1fr} .final{margin-top:60px} .stats{grid-template-columns:1fr;row-gap:22px} .stat{min-height:0} .stat__value{margin-top:6px} .card--1 .card__in,.card--2 .card__in,.card--3 .card__in,.card--4 .card__in{padding:22px 18px 26px} .card--1 .card__title,.card--2 .card__title,.card--3 .card__title,.card--4 .card__title{font-size:19px;line-height:24px;margin-bottom:16px;overflow-wrap:anywhere} .h2,.h3,.card__total,.final__value,.cr__last{overflow-wrap:anywhere} .card--1 .h3,.card--2 .h3,.card--4 .h3{font-size:15px;line-height:19px} .card--1 .body,.card--2 .body,.card--3 .body,.card--4 .body,.card--4 .list{font-size:13px;line-height:17px} .card--4 .card__total{font-size:19px;line-height:24px} .card--4 .card__total .t-mid{font-size:17px;line-height:22px} .card--3 .bignum{font-size:24px;line-height:29px} .card--3 .card__claim{font-size:15px;line-height:19px} .card--2 .flow li{font-size:14px;line-height:18px} .s-creatives .h2,.s-totals .h2{font-size:22px;line-height:26px} .cr__col .h3--blue{font-size:20px;line-height:25px} .cr__last{font-size:20px;line-height:25px} .final__value{font-size:26px;line-height:32px} .final__label{font-size:14px;line-height:18px;margin-bottom:14px} } /* ============================================================ МОБИЛЬНЫЙ ЭКРАН «О НАС / КОНТАКТЫ» — макет iPhone 16 (node 58:125) ============================================================ */ @media (max-width:639px){ /* видео в «Видеоафише» не должно занимать всю карточку */ /* на телефоне плеер съедал всю карточку — прячем, видео есть в блоке «Креативы» */ .card--3 .card__video{display:none} .s-cta{background:var(--blue);border-radius:60px 60px 0 0;padding:68px 0 70px} .nav--cta{display:none} .s-cta .container{padding:0 55px} .cta{display:block;padding-top:0} .cta__col{position:relative} /* заголовки: капитель 203 и 138 из макета, тень 4.77/2.86 */ .cta__title{width:221px;height:auto;margin:0; filter:drop-shadow(4.771px 2.863px 0 #000)} .cta__title--wide{width:272px;display:block;margin:74px auto 0} .cta__btn{min-width:0;height:48px;border-radius:7px; font-size:20px;letter-spacing:-0.07em;margin:0} .cta__col:first-child .cta__btn{width:236.5px;margin-top:35px; background:var(--blue);color:var(--white);box-shadow:10.11px 4px 0 #00E67E} .cta__col:last-child .cta__btn{width:251px;margin:20px 0 0 10px; background:#10ED92;color:var(--white);border:0;box-shadow:10.73px 4px 0 var(--white)} .cta__btn:hover{transform:translate(4px,2px)} .cta__note{font-size:16px;line-height:20px;letter-spacing:-0.02em;margin-top:19px;max-width:283px} .cta__col:last-child .cta__note{margin:26px 0 0 10px;max-width:302px} .cta__mail{font-size:22px;line-height:27px;letter-spacing:-0.02em;margin:15px 0 0 13px} } /* ============================================================ ПЛЕЙСХОЛДЕРЫ ПОД МЕДИА Занимают ровно те габариты, что и будущая картинка, — геометрия не поедет, когда дизайнер подставит реальные файлы в Claude Design. Заменять целиком на или