/* ============ FONTS: TT Norms (self-hosted) ============ */ @font-face{font-family:'TT Norms';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/TTNorms-Regular.woff2') format('woff2'), url('../fonts/TTNorms-Regular.woff') format('woff'), url('../fonts/TTNorms-Regular.ttf') format('truetype');} @font-face{font-family:'TT Norms';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/TTNorms-Medium.woff2') format('woff2'), url('../fonts/TTNorms-Medium.woff') format('woff'), url('../fonts/TTNorms-Medium.ttf') format('truetype');} /* ============ TOKENS ============ */ :root{ --navy:#0F1628; --red1:#ED2C2F; --red2:#FF6F72; --reddark:#DD2A1B; --gray:#F3F3F4; --gold:#F0A731; --grad:linear-gradient(90deg,#ED2C2F 0%,#FF6F72 100%); --grad-icon:linear-gradient(135deg,#ED2C2F 0%,#FF6F72 100%); --font:'TT Norms','Golos Text',-apple-system,Segoe UI,Roboto,Arial,sans-serif; } /* ============ RESET ============ */ *{margin:0;padding:0;box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; /* Мобильный Chrome сам подсвечивает нажатый элемент своим цветом rgba(51,181,229,.4) — это и есть бирюзовый квадрат, который вспыхивает под пальцем на бургере и других кнопках. Гасим системную подсветку, свои состояния нажатия описаны рядом с элементами. */ -webkit-tap-highlight-color:transparent;} body{font-family:var(--font);color:var(--navy);background:#fff;font-weight:400;overflow-x:hidden;} img{display:block;max-width:100%;} a{text-decoration:none;color:inherit;} button{font-family:inherit;cursor:pointer;border:none;background:none;} input{font-family:inherit;} ul{list-style:none;} .page{position:relative;width:100%;margin:0 auto;overflow:hidden;} .container {width: 100%; max-width: 1620px; margin: 0 auto; padding: 0 16px;} /* decorative bg */ .deco{position:absolute;left:0;width:1920px;z-index:0;pointer-events:none;} .deco--top{top:0;height:1776px;object-fit:fill;opacity:37%;} .hero,.stats,.section,.quiz,.production,.form-sec,.footer{position:relative;z-index:1;} .page{padding-top:109px;} /* Хлебные крошки под шапкой. Раньше они были только у статей блога и правила жили в article.css; теперь цепочка выводится на всех внутренних страницах, а article.css подключается лишь на части из них — поэтому стили здесь. Своего фона полоса не имеет: она ложится на фон страницы между шапкой и первым экраном, отступ на высоту фиксированной шапки уже дал .page. */ .crumbs-bar{padding:18px 0 0;} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;color:rgba(15,22,40,.5);} .crumbs a{color:rgba(15,22,40,.5);transition:color .2s ease;} .crumbs a:hover{color:var(--navy);} .crumbs__sep{color:rgba(15,22,40,.3);} .crumbs__current{color:rgba(15,22,40,.5);} @media (max-width:768px){ .crumbs-bar{padding:12px 0 10px;} .crumbs{font-size:13px;gap:6px;} } /* ============ SHARED ============ */ .pill{display:inline-flex;align-items:center;gap:20px;height:44px;padding:0 20px;border-radius:999px; background:rgba(255,255,255,.55);border:1px solid rgba(15,22,40,.10);box-shadow:0 0 0 rgba(15,22,40,.05); font-size:16px;font-weight:500;text-transform:uppercase;color:var(--navy);letter-spacing:.2px;white-space:nowrap;width:fit-content;} .pill--light{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none;} .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none;} .dot--ring{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--grad);position:relative;} .dot--ring::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff;} .h2{font-size:52px;line-height:61px;font-weight:500;color:var(--navy);letter-spacing:-.5px;} .h2--light{color:#fff;} .lead{font-size:16px;line-height:19px;font-weight:400;color:var(--navy);max-width:1033px;} .lead--light{color:rgba(255,255,255,.9);} .head{display:flex;flex-direction:column;gap:30px;margin-bottom:40px;} .head--mb{gap:30px;margin-bottom:40px;} .head__text{display:flex;flex-direction:column;gap:35px;max-width:1050px;} .section{margin-top:100px;} .section__cta{display:flex;justify-content:center;margin-top:40px;} .from{font-size:14px;line-height:17px;font-weight:500;color:var(--navy);} .price-grad{font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:15px;font-weight:500;font-size:16px;white-space:nowrap;transition:.15s;} .btn--primary{background:var(--grad);color:#fff;height:42px;padding:0 33px;} .btn--red{background:var(--red1);color:#fff;height:55px;padding:0 20px;border-radius:15px;} /* Кнопка под секцией — градиентом, как .btn--primary; остальные .btn--red остаются заливкой */ .section__cta .btn--red{background:var(--grad);} .btn--outline{border:1px solid var(--navy);color:var(--navy);height:51px;padding:0 30px;} .quiz__nav .btn--outline {border: 0px solid var(--navy); color: var(--navy); height: 51px; padding: 0 30px; background: #F3F3F4;} .btn--sm{height:42px;max-width:153px;} .btn--lg{height:55px;padding:7px 7px 7px 20px;gap:9px;border-radius:15px;font-weight:500;} .btn--calc{padding-right:7px;} .btn__calc{width:41px;height:41px;flex:none;} .btn:hover{filter:brightness(1.03);} /* ============ HEADER ============ */ .header{position:fixed;top:0;left:0;right:0;z-index:1000;padding-top:24px;height:109px; transition:background-color .25s ease,box-shadow .25s ease,border-radius .25s ease;} .header--scrolled{background:#fff;border-radius:0 0 20px 20px;box-shadow:0 8px 24px rgba(15,22,40,.06);} .header--scrolled .header__bar{background:transparent;border-color:transparent;backdrop-filter:none;} .header__bar{width:100%;max-width:1620px;margin:0 auto;height:85px;display:flex;align-items:center;justify-content:space-between; padding:15px 15px 15px 40px;border-radius:20px;background:rgba(242,242,242,.75);} .header__logo img,.header__logo svg{height:46px;width:auto;} .menu{display:flex;align-items:center;} .menu__item{display:inline-flex;align-items:center;gap:10px;height:53px;padding:0 25px;border-radius:15px;font-size:16px;font-weight:500;color:var(--navy);} .menu__item--active{background:linear-gradient(90deg,#ED2C2F 0%,#FF6F72 100%) text,#fff padding-box;-webkit-background-clip:text,padding-box;background-clip:text,padding-box;-webkit-text-fill-color:transparent;color:transparent;} .menu__dropdown.is-open .menu__trigger{background:linear-gradient(90deg,#ED2C2F 0%,#FF6F72 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;} .menu__item--active .menu__chevron path,.menu__dropdown.is-open .menu__chevron path{stroke:url(#menu-grad);} .menu__dropdown{position:relative;} .menu__trigger{border:none;background:none;cursor:pointer;font-family:inherit;text-decoration:none;} .menu__chevron{flex:none;transition:transform .25s ease;} .menu__dropdown.is-open .menu__chevron{transform:rotate(180deg);} .menu__submenu{list-style:none;position:absolute;top:calc(100% + 8px);left:0;min-width:240px;padding:8px;background:#fff;border-radius:15px; border:1px solid rgba(177,177,177,.2);box-shadow:0 12px 32px rgba(15,22,40,.1);opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:20;} .menu__dropdown.is-open .menu__submenu{opacity:1;visibility:visible;transform:translateY(0);} .menu__sublink{display:block;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:500;color:var(--navy);transition:background .2s ease;} .menu__sublink:hover{background:var(--gray);} @media (min-width:1200px){ .header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding-top:10px; height:109px; transition:background-color .25s ease,box-shadow .25s ease,border-radius .25s ease; } .menu__dropdown:hover .menu__submenu{opacity:1;visibility:visible;transform:translateY(0);} } .header__right{display:flex;align-items:center;gap:40px;} .header__socials{display:flex;gap:8px;} .soc{width:41px;height:41px;display:block;} .soc img{width:41px;height:41px;} .header__phone{display:flex;flex-direction:column;gap:2px;} .header__phone-num{font-size:21px;font-weight:500;color:var(--navy);line-height:25px;} .header__phone-sub{font-size:12px;font-weight:400;color:rgba(15,22,40,.65);line-height:14px;} .header .btn--calc{height:55px;padding:7px 7px 7px 20px;border-radius:15px;} .header__phone-mobile,.header__burger,.header__mobile-extra{display:none;} .header__phone-mobile{align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;transition:background .2s;} .header__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border-radius:12px;transition:background .2s;} .header__phone-mobile:hover,.header__burger:hover{background:rgba(15,22,40,.06);} /* Подсветка нажатия на телефон и бургер. :hover на тач-устройствах залипает: после тапа серая заливка остаётся до нажатия в другом месте — из-за этого квадрат бургера и «становился серым». Там, где указателя с наведением нет, ховер гасим, а обратную связь пальцу даёт :active — он пропадает сразу после отпускания. */ @media (hover:none){ .header__phone-mobile:hover,.header__burger:hover{background:transparent;} } .header__phone-mobile:active,.header__burger:active{background:rgba(15,22,40,.10);} .header__burger-line{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .25s;} .header--open .header__burger-line:nth-child(1){transform:translateY(7px) rotate(45deg);} .header--open .header__burger-line:nth-child(2){opacity:0;} .header--open .header__burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ============ HERO ============ */ .hero{margin-top:17px;} .hero__inner{position:relative;width:100%;max-width:1620px;margin:0 auto;min-height:594px;} .hero__content{width:830px;display:flex;flex-direction:column;gap:40px;padding-top:55px;} .hero__text{display:flex;flex-direction:column;gap:40px;} .hero__title{font-size:64px;line-height:68px;font-weight:500;letter-spacing:-1.5px;max-width:653px;} .hero__title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .hero__meta{display:flex;flex-direction:column;gap:20px;} .hero__process,.hero__features{display:flex;align-items:center;font-size:16px;color:var(--navy);} .hero__process{gap:10px;} .hero__process .ic{width:21px;height:14px;} .hero__features{gap:50px;} .feat{display:inline-flex;align-items:center;gap:10px;} .feat .ic{width:21px;height:21px;} .arrow-line { width: 20px; height: 0; border-top: 1.5px solid var(--navy); margin: 0 0; position: relative; } .arrow-line::after{content:"";position:absolute;right:0;top:-4px;width:6px;height:6px;border-top:1.5px solid var(--navy);border-right:1.5px solid var(--navy);transform:rotate(45deg);} .hero__btns{display:flex;align-items:center;gap:50px;} .hero__cta{display:flex;flex-direction:column;gap:10px;} .hero__note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#000;padding-left:6px;} /* Ссылка «Посмотреть портфолио» оформлена кнопкой в градиентной обводке — тем же приёмом, что и квадратные .iconbtn в карточках товаров: рамку рисует ::before, залитый градиентом и вырезанный маской изнутри. Обычный border так не умеет — он красится одним цветом. Высота 55px повторяет соседнюю .btn--lg, а align-self:flex-start ставит кнопку по верхнему краю: .hero__btns центрирует детей по вертикали, но у соседнего .hero__cta под кнопкой ещё висит подпись «Ответим за 15 минут», из-за неё колонка выше и обводка съезжала вниз. Свойство объявлено на самом элементе, а не через align-items у родителя, потому что align-items:center повторно задан в блоке 1620px и перекрыл бы правку. */ .hero__explore{position:relative;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:10px; height:55px;padding:0 25px;border-radius:15px;font-size:16px;font-weight:500;color:var(--navy); transition:background .25s ease,color .25s ease;} .hero__explore::before{content:"";position:absolute;inset:0;border-radius:15px;padding:1px; background:linear-gradient(90deg,#FF6F72 0%,#ED2C2F 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; pointer-events:none;transition:opacity .25s ease;} .hero__explore svg{flex:none;} .hero__explore path{transition:stroke .25s ease;} .hero__explore:hover{background:var(--grad);color:#fff;} .hero__explore:hover::before{opacity:0;} .hero__explore:hover path{stroke:#fff;} .hero__image{position:absolute;top:0;right:0;width:829px;height:594px;} .hero__slider{width:100%;height:100%;position:relative;overflow:hidden;border-radius:20px;} .hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;pointer-events:none;} .hero__slide.is-active{opacity:1;visibility:visible;pointer-events:auto;} .hero__slide img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block;} .hero__image>img{width:829px;height:594px;object-fit:cover;border-radius:20px;} .hero__dots{display:none;align-items:center;gap:8px;} .hdot{width:12px;height:12px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .25s ease,transform .25s ease;} .hdot--active{background:var(--grad);} .hero__badge{position:absolute;right:23px;bottom:23px;display:flex;align-items:center;justify-content:space-between;gap:30px;} .hero__badge-main{display:flex;align-items:center;gap:30px;height:55px;padding:0 10px 0 30px;border-radius:15px; background:rgba(15,22,40,.35);border:1px solid rgba(177,177,177,.18);backdrop-filter:blur(6px);color:#fff;font-size:16px;font-weight:400;} .hero__badge-arrow{width:35px;height:35px;border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;} /* ============ STATS ============ */ .stats{margin-top:50px;} .stats__row{display:flex;gap:25px;padding:0;} .stat{flex:1;height:149px;padding:30px 20px;border-radius:20px;background:rgba(255,255,255,.5);border:1px solid rgba(15,22,40,.2); display:flex;flex-direction:column;gap:20px;} .stat__top{display:flex;align-items:center;gap:10px;} .stat__num{font-size:72px;line-height:50px;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:2px;} .stat__unit{font-size:16px;line-height:30px;font-weight:500;color:var(--navy);align-self:flex-start;margin-top:10px;} .stat__label{font-size:16px;line-height:19px;color:rgba(15,22,40,.6);} /* ============ PRODUCTS ============ */ .products__grid{display:flex;gap:25px;} .pcard{flex:1;background:var(--gray);border-radius:20px;padding:10px 10px 20px;display:flex;flex-direction:column;gap:20px;} .pcard--light{background:#fff;border:1px solid rgba(15,22,40,.06);} .pcard__img{height:176px;border-radius:15px;overflow:hidden;background:#fff;} .pcard__img img{width:100%;height:100%;object-fit:cover;} .pcard__body{padding:0 10px;display:flex;flex-direction:column;gap:20px;flex:1;justify-content:space-between;} .pcard__text{display:flex;flex-direction:column;gap:10px;} .pcard__title{font-size:21px;line-height:25px;font-weight:500;} .pcard__price{display:flex;align-items:center;gap:10px;font-size:21px;} .pcard__desc{font-size:14px;line-height:23px;color:rgba(0,0,0,.63);} .pcard__btns{display:flex;gap:5px;} .pcard__btns--wide{} .btn--grow{flex:1;} .iconbtn{width:43px;height:43px;border-radius:15px;background:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .25s ease;} .iconbtn::before{content:"";position:absolute;inset:0;border-radius:15px;padding:1px; background:linear-gradient(90deg,#FF6F72 0%,#ED2C2F 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;transition:opacity .25s ease;} .iconbtn path{transition:stroke .25s ease;} .iconbtn--grad{background:var(--grad);} .iconbtn--grad::before{display:none;} .pcard__btns:hover .iconbtn{background:var(--grad);} .pcard__btns:hover .iconbtn::before{opacity:0;} .pcard__btns:hover .iconbtn path{stroke:#fff;} /* ============ PRODUCTION ============ */ .production{padding:100px 0;color:#fff;overflow:hidden;} .production__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .production__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fd1400 0%,#ED2C2F 100%);opacity:.65;pointer-events:none; -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);} .production__inner{position:relative;z-index:1;} .tech__grid{display:flex;gap:25px;} .tcard{flex:1;background:#fff;border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:20px;transition:background .25s ease;} .tcard__icon{width:65px;height:65px;} .tcard__icon img{width:65px;height:65px;} .tcard__body{display:flex;flex-direction:column;gap:20px;} .tcard__text{display:flex;flex-direction:column;gap:10px;} .tcard__title{font-size:21px;line-height:25px;font-weight:500;color:var(--navy);transition:color .25s ease;} .tcard__title--light{color: var(--navy);} .tcard__desc{font-size:14px;line-height:23px;color: var(--navy);transition:color .25s ease;} .tcard__desc--dark{color:rgba(15,22,40,.7);} .tcard__price{display:flex;align-items:center;gap:10px;font-size:21px;margin-top:4px;flex-wrap: wrap;} .from_out {gap: 10px; display: flex; align-items: center;} .from--light{color: var(--navy);transition:color .25s ease;} .tcard__meta{font-size:14px;font-weight:500;color:var(--navy);transition:color .25s ease;} .tcard__meta--light{color: var(--navy);} .tcard:hover .tcard__meta--light{color:var(--navy);} .tcard__more{font-size:16px;font-weight:500;color: var(--navy);transition:color .25s ease;} .tcard__more--dark{color:var(--navy);} .tcard:hover .tcard__more{color:var(--navy);} /* ============ PORTFOLIO ============ */ .work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;} .work{background:var(--gray);border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:20px;} .work__img{height:260px;border-radius:15px;overflow:hidden;background:#fff;} .work__img img{width:100%;height:100%;object-fit:cover;} .work__text{padding:0 10px 10px;display:flex;flex-direction:column;gap:15px;} .badges{display:flex;gap:5px;flex-wrap:wrap;} .badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:5px;background:rgba(15,22,40,.05); font-size:12px;font-weight:400;text-transform:uppercase;color:var(--navy);letter-spacing:.3px;} .work__title{font-size:21px;line-height:25px;font-weight:500;color:#0F1628;} .work__foot{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid rgba(15,22,40,.1);} .work__term{display:inline-flex;align-items:center;gap:7px;font-size:14px;line-height:23px;color:rgba(0,0,0,.63);} .ic-clock,.ic-cal{width:20px;height:20px;flex:none;} .work__price{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:500;color:var(--navy);} /* ============ REASONS ============ */ .reasons{overflow:hidden;} .reasons__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:37%;z-index:0;pointer-events:none;} .reasons .container{position:relative;z-index:1;} .reasons__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;} .reason{position:relative;padding-top:60px;} .reason__num{position:absolute;top:-20px;left:14px;font-size:96px;line-height:96px;font-weight:500; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;z-index:0;} .reason__card{position:relative;z-index:1;background:#fff;border:1px solid rgba(237,44,47,.6);border-radius:20px;padding:24px 30px 30px;display:flex;flex-direction:column;gap:10px;min-height:110px;} .reason__title{font-size:21px;line-height:25px;font-weight:500;} .reason__desc{font-size:14px;line-height:23px;color:rgba(15,22,40,.6);} /* ============ QUIZ ============ */ .quiz{margin-top:100px;padding:90px 0;overflow:hidden;} .quiz__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .quiz__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fd1400 0%,#ED2C2F 100%);opacity:.65;pointer-events:none; -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);} .quiz__inner{position:relative;z-index:1;} .quiz__inner .head__text{max-width:none;} .quiz__card{background:#fff;border-radius:30px;padding:40px;margin-top:0;} .quiz__q{display:flex;flex-direction:column;gap:30px;} .quiz__qhead{display:flex;align-items:flex-start;gap:15px;} .quiz__step{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-size:16px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;flex:none;} .quiz__qtext{flex:1;display:flex;flex-direction:column;gap:6px;} .quiz__title{font-size:21px;line-height:25px;font-weight:500;} .quiz__sub{font-size:14px;line-height:20px;color:rgba(15,22,40,.6);} .quiz__progress{display:flex;align-items:center;gap:20px;padding-top:12px;min-width:710px;justify-content:flex-end;} .quiz__bar{width:600px;height:8px;border-radius:4px;background:#EDEDEF;overflow:hidden;} .quiz__bar span{display:block;height:100%;background:var(--grad);border-radius:4px;} .quiz__num{font-size:14px;font-weight:500;text-transform:uppercase;color:var(--navy);white-space:nowrap;} .quiz__options{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;} .opt{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:12px;background:var(--gray); font-size:16px;color:var(--navy);cursor:pointer;border:1px solid transparent;} .opt--active{background:#fff;border-color:var(--red1);} .opt__box{width:30px;height:30px;border-radius:7px;background:#fff;border:0px solid rgba(15,22,40,.15);flex:none;display:inline-flex;align-items:center;justify-content:center;} .opt--active .opt__box{background:var(--red1);border-color:var(--red1); border-color: #E31E24; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center;} .quiz__nav{display:flex;justify-content:space-between;margin-top:40px;align-items:center;gap:12px;} .quiz__panels{min-height:120px;} .quiz__step-panel{display:none;} .quiz__step-panel.is-active{display:block;} .quiz__step-panel--form .quiz__form{margin-top:0;} .quiz__card.is-form-step .quiz__nav-next,.quiz__card.is-form-step .quiz__nav-skip{display:none;} .quiz__nav-back[hidden]{display:none!important;} /* ============ REVIEWS ============ */ .reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;} .reviews__yandex{width:100%;max-width:560px;margin:0 auto;} .reviews__yandex > div{width:100%;max-width:560px;margin:0 auto;} @media (max-width:640px){ .reviews__yandex > div{height:70vh;max-height:800px;} } .review__head {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0F16281A padding-bottom: 15px;} .review__head {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(15, 22, 40, 0.1); padding-bottom: 15px; margin-bottom: 15px;} .review__who{display:flex;align-items:center;gap:15px;} .avatar{width:46px;height:46px;border-radius:50%;background:var(--red1);color:#fff;font-size:15px;font-weight:500; display:inline-flex;align-items:center;justify-content:center;flex:none;} .review__name {font-size: 16px; font-weight: 500; color: var(--navy);} .review__src{font-size:14px;color:rgba(15,22,40,.6);margin-top:5px;} .stars{color:var(--gold);font-size:18px;letter-spacing:2px;} .review__text{font-size:14px;line-height:23px;color:rgba(0,0,0,.63);} .review {background: #F3F3F4; border-radius: 20px; padding: 30px;} /* ============ FAQ ============ */ .faq__bg{position:absolute;left:0;top:-140px;width:100%;height:calc(100% + 140px);object-fit:fill;opacity:37%;z-index:0;pointer-events:none;} .faq__inner{position:relative;z-index:1;display:flex;gap:30px;flex-direction: column;} .faq__left{flex:none;display:flex;flex-direction:column;gap:30px;} .faq__list{flex:1; gap: 15px; display: flex;flex-direction: column;} .faq__item{border-bottom:0px solid rgba(15,22,40,.12); background: #fff;border-radius: 20px;} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding: 28px 30px; font-size:16px;font-weight:500;color:var(--navy);text-align:left;} .faq__sign{font-size:26px;font-weight:400;color:var(--navy);line-height:1;flex:none;} /* Базовый стиль пункта FAQ */ .faq__item { transition: border-color 0.3s ease, border-radius 0.3s ease; margin-bottom: 8px; /* Отступ между пунктами */ border:1px solid #F3F3F4; border-radius:20px; } /* Стили при открытом состоянии */ .faq__item--open { border: 1px solid rgba(237, 44, 47, .6); border-radius: 16px; } .faq__item--open .faq__q { padding-bottom: 8px; } .faq__item--open .faq__sign { color: var(--red1, #ed2c2f); } /* Стили ответа */ .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0 24px; font-size: 14px; line-height: 23px; color: rgba(15, 22, 40, .7); } /* Когда пункт открыт — показываем содержимое */ .faq__item--open .faq__a { max-height: 500px; padding-bottom: 26px; } /* Стили кнопки-вопроса */ .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 24px; background: none; border: none; cursor: pointer; text-align: left; font-size: 16px; font-weight: 500; color: rgba(15, 22, 40, .9); transition: color 0.2s ease; } .faq__q:hover { color: var(--red1, #ed2c2f); } /* ============ BLOG ============ */ .blog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;} .post{display:flex;flex-direction:column;gap:20px;} .post__img{position:relative;height:260px;border-radius:15px;overflow:hidden;background:#fff;} .post__img img{width:100%;height:100%;object-fit:cover;} .badge--onimg{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.55);backdrop-filter:blur(4px);} .post__title{font-size:21px;line-height:25px;font-weight:500;padding-right:30px;} .post__meta{display:flex;gap:20px;} .post__mi{display:inline-flex;align-items:center;gap:7px;font-size:14px;line-height:23px;color:rgba(0,0,0,.63);} /* ============ FORM ============ */ .form-sec{padding:100px 0;overflow:hidden;margin-top: 100px;} .form-sec__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .form-sec__grad{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#FF6F72 0%,#ED2C2F 100%);opacity:.55;pointer-events:none; -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);} .form-sec__inner{position:relative;z-index:1;display:flex;gap:80px;align-items:flex-start;} .form-sec__left{width:700px;flex:none;display:flex;flex-direction:column;gap:35px;} .form-sec__list{display:flex;flex-direction:column;gap:16px;} .form-sec__list li{display:flex;align-items:center;gap:15px;font-size:16px;color:#fff;} .chk{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;flex:none;} .form-card{flex:1;background:#fff;border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:24px;} .form{display:flex;flex-direction:column;gap:20px;} .form__row{display:flex;gap:20px;} /* min-width:0 — чтобы поле ужималось вместе с карточкой. По умолчанию флекс- элемент не сжимается меньше своего содержимого, а у пустого input своя минимальная ширина, и в узкой карточке два поля в строке выпирали за её правый край вместо того, чтобы сузиться. */ .field{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;} .field label{font-size:16px;font-weight:500;color:var(--navy);} .field input{height:56px;border-radius:12px;background:var(--gray);border:1px solid transparent;padding:0 22px;font-size:16px;color:var(--navy);} .field input::placeholder{color:rgba(15,22,40,.4);} .form__attach{display:flex;align-items:center;gap:14px;height:64px;border-radius:12px;background:var(--gray);padding:0 22px; border:0;cursor:pointer;width:100%;font:inherit;text-align:left;font-size:16px;color:rgba(15,22,40,.7);} .form__attach-wrap{display:flex;flex-direction:column;gap:8px;} .form__file-name{font-size:13px;color:rgba(15,22,40,.6);padding-left:4px;} .form__attach-text{flex:1;} .form__clip{width:36px;height:36px;border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;} .form__submit{display:flex;align-items:center;justify-content: flex-end;gap:20px;margin-top:4px;} .agree input{display:none;} .agree input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .agree { font-size: 13px; color: rgba(15, 22, 40, .6); max-width: 470px; line-height: 1.4; cursor: pointer; display: flex; align-items: center; gap: 10px; } .agree__box { width: 20px; height: 20px; border-radius: 5px; background: var(--gray, #f0f0f0); border: 1px solid rgba(15, 22, 40, .15); flex: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; display: flex; align-items: center; justify-content: center; } .agree:hover .agree__box { border-color: rgba(15, 22, 40, .3); } .agree input[type="checkbox"]:checked + .agree__box { background-color: #E31E24; border-color: #E31E24; background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.93869 10L0 6.00386L1.79493 4.18275L3.93869 6.36422L10.2051 0L12 1.82111L3.93869 10Z' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 10px; } .agree input[type="checkbox"]:focus-visible + .agree__box { outline: 2px solid #E31E24; outline-offset: 2px; } .agree a { text-decoration: underline; color: rgba(15, 22, 40, .7); transition: color 0.2s ease; } .agree a:hover { color: #E31E24; /* Опционально: подсветка ссылки красным при наведении */ } .form-card__msg{text-align:center;font-size:16px;font-weight:500;color:var(--navy);} .form-card__btns{display:flex;gap:20px;} .mbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;color:#fff;font-size:16px;font-weight:500;} .mbtn img{width:22px;height:22px;} .mbtn--tg {background: #00A2E6A6;} .mbtn--max{background:#3D58FBA6;} /* ============ SEO ============ */ .seo .h2{margin-bottom:35px;} .seo__text{display:flex;flex-direction:column;gap:20px;max-width:1620px;} .seo__text p{font-size:16px;line-height:26px;color:rgba(15,22,40,.85);} /* ============ FOOTER ============ */ .footer{background:var(--navy);color:#fff;margin-top:100px;padding:80px 0 40px;} .footer__inner{display:flex;flex-direction:column;gap:60px;} .footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;} .footer__logo{height:70px;width:auto;margin-bottom:24px;} .footer__tagline{font-size:14px;line-height:22px;color:rgba(255,255,255,.7);margin-bottom:24px;} .footer__socials{display:flex;gap:12px;} .footer__h{font-size:21px;font-weight:700;margin-bottom:34px;} .footer__col{display:flex;flex-direction:column;} .footer__col a{font-size:16px;color:rgba(255,255,255,.8);padding:12px 0;} .footer__col a:hover{color:#fff;} .footer__h{padding-top:12px;} .footer__col--contacts .footer__phone{font-size:32px;font-weight:500;color:#fff;padding:0;margin-bottom:14px;} .footer__muted{font-size:16px;color:rgba(255,255,255,.55);margin-bottom:26px;} .footer__mail{font-size:20px! important;color:#fff;padding:0;margin-bottom:26px;display:inline-block;} .footer__hours{font-size:20px;line-height:30px;color:#fff;} .footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:40px;border-top:1px solid rgba(255,255,255,.12);} .footer__copy{font-size:15px;color:rgba(255,255,255,.6);} .footer__legal{display:flex;gap:40px;} .footer__legal a{font-size:15px;color:rgba(255,255,255,.6);text-decoration:underline;} .footer__legal a:hover{color:#fff;} .footer_menu li {padding:12px 0px;} .stat__label.onmob {display: none;} @media (max-width: 1620px) { .header { padding: 0px 15px; margin-top: 10px; } .hero__title { font-size: 55px; } .hero { margin-top: 17px; padding: 0px 15px; } .stats { padding: 0px 15px; } .hero__btns { display: flex; align-items: center; gap: 10px; } } @media (max-width: 1500px) { .header__right { gap: 15px; } .hero__explore { max-width: 180px; } } /* Large Desktop: 1440px */ @media (max-width: 1440px) { .container { max-width: 1200px; padding: 0 32px; } .menu__item { padding: 0 12px; } .header__logo img,.header__logo svg { height: 30px; width: auto; } .soc img { width: 32px; height: 32px; } .soc { width: 32px; height: 32px; } .header__phone-num { font-size: 17px; } .hero__process, .hero__features { max-width: 510px; flex-wrap: wrap; } .hero__btns { gap: 12px; } .products__grid { flex-wrap: wrap; } .footer__col--contacts .footer__phone { font-size: 24px; } .footer_menu li { padding: 6px 0px; } .footer__logo { height: 45px; } .footer__tagline { max-width: 250px; } .footer__muted { margin-bottom: 0px; } .footer__mail { margin-bottom: 0px; } .header__bar { max-width: 1200px; padding: 15px 15px 15px 30px; } .hero__inner { max-width: 1200px; } .hero__content { width: 650px; } .hero__title { font-size: 52px; line-height: 58px; max-width: 550px; } .hero__image { width: 650px; height: 500px; } .hero__slide img, .hero__image > img { width: 650px; height: 500px; } .h2 { font-size: 44px; line-height: 52px; } .stat__num { font-size: 60px; line-height: 45px; } .quiz__options { grid-template-columns: repeat(4, 1fr); } .quiz__bar { width: 450px; } .quiz__progress { min-width: 550px; } .reasons__grid { grid-template-columns: repeat(3, 1fr); } .blog__grid { grid-template-columns: repeat(3, 1fr); } /* Ниже 1441px контейнер сужается до 1200px — внутри остаётся 1136px. При прежних 550px левой колонки и промежутке 80px карточке доставалось 506px, и два поля в строке туда не помещались. Колонки оставляем рядом, но поджимаем левую и промежуток: 1136 - 500 - 40 = 596px под карточку, по 248px на поле. */ .form-sec__inner { gap: 40px; } .form-sec__left { width: 500px; } .footer__top { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; } .form-card { flex: 1; background: #fff; border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 24px; width: 100%; } } /* Ряд со статистикой по задумке шире остального контента: в базовых стилях у .stats__row стоит padding:0, и он перебивает боковые отступы .container. Но ниже 1441px .container получает padding:0 32px, и это правило идёт позже — ряд переставал быть шире и вставал вровень с текстом. Возвращаем нулевой отступ более специфичным селектором. Нижняя граница 1025px: ниже неё .container сжимается до 20px и 16px по бокам, и без них карточки статистики прилипли бы к краям экрана. */ @media (max-width: 1440px) and (min-width: 1025px) { .container.stats__row { padding: 0; } } /* Ниже 1400px карточке не хватает ширины даже с поджатой левой колонкой, поэтому здесь блоки встают друг под друга. Прежде тут переключалось только направление, а ширина левой колонки оставалась 550px и промежуток 80px — текст висел узкой полосой над карточкой во всю ширину. */ @media (max-width: 1399px) { .form-sec__inner { flex-direction: column; gap: 50px; } .form-sec__left { width: 100%; } } /* Desktop: 1280px */ @media (max-width: 1280px) { .container { max-width: 1240px; padding: 0 24px; } .header__bar { max-width: 1240px; padding: 12px 12px 12px 24px; } .hero__inner { max-width: 1240px; min-height: 500px; } .hero__content { width: 520px; padding-top: 40px; } .hero__title { font-size: 44px; line-height: 50px; max-width: 450px; } .hero__image { width: 550px; height: 450px; } .hero__slide img, .hero__image > img { width: 550px; height: 450px; } .h2 { font-size: 38px; line-height: 46px; } .stat__num { font-size: 52px; line-height: 40px; } .stat__label { font-size: 14px; line-height: 18px; } .products__grid { flex-wrap: wrap; } .pcard { flex: 1 1 calc(33.333% - 17px); min-width: 280px; } .tech__grid { flex-wrap: wrap; } .tcard { flex: 1 1 calc(33.333% - 17px); min-width: 280px; } .work__grid { grid-template-columns: repeat(2, 1fr); } .quiz__options { grid-template-columns: repeat(3, 1fr); } .quiz__bar { width: 350px; } .quiz__progress { min-width: 450px; } .reviews__grid { grid-template-columns: repeat(4, 1fr); } .reasons__grid { grid-template-columns: repeat(4, 1fr); } .blog__grid { grid-template-columns: repeat(4, 1fr); } .form-sec__inner { flex-direction: column; gap: 50px; } .form-sec__left { width: 100%; } .header__right { gap: 20px; } .header { height: 90px; } .footer__top { grid-template-columns: repeat(4, 1fr); gap: 15px; } .footer__col--contacts .footer__phone { font-size: 22px; } .footer__hours { font-size: 18px; } .footer__legal { gap: 15px; } .footer__copy { font-size: 12px; max-width: 195px; } } @media (max-width: 1170px) { .menu__item { padding: 0 7px; } .header__right { gap: 15px; } } /* Header mobile layout: < 1200px */ @media (max-width: 1120px) { .page { padding-top: 96px; } .header { height: auto; padding: 16px 15px; margin-top:0px; } .header__bar { position: relative; display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto; align-items: center; gap: 0; height: auto; min-height: 60px; padding: 10px 16px; flex-wrap: nowrap; } .header__phone-mobile, .header__burger { display: flex; } .header__phone-mobile { grid-column: 1; grid-row: 1; } .header__logo { grid-column: 2; grid-row: 1; justify-self: center; } .header__logo img,.header__logo svg { height: 36px; } .header__burger { grid-column: 3; grid-row: 1; justify-self: end; } .header__right { display: none; } .header__mobile-extra { display: none; grid-column: 1 / -1; grid-row: 3; flex-direction: column; align-items: stretch; gap: 20px; padding: 0 0 8px; } .menu { display: none; grid-column: 1 / -1; grid-row: 2; flex-direction: column; align-items: stretch; width: 100%; order: unset; overflow: visible; gap: 4px; padding: 12px 0 0; } .menu__item { height: auto; min-height: 48px; padding: 12px 8px; font-size: 16px; white-space: normal; border-radius: 12px; text-align: center; justify-content: center; box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.03); } .menu__item--active { background: linear-gradient(90deg, #ED2C2F 0%, #FF6F72 100%) text, rgba(255, 255, 255, .85) padding-box; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; -webkit-text-fill-color: transparent; color: transparent; } .menu__dropdown.is-open .menu__trigger { background: linear-gradient(90deg, #ED2C2F 0%, #FF6F72 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .menu__dropdown { width: 100%; display: flex; flex-direction: column; align-items: stretch; } .menu__trigger { width: 100%; justify-content: center; } .menu__submenu { position: static; display: none; opacity: 1; visibility: visible; transform: none; min-width: 0; width: 100%; padding: 4px 0 8px; background: transparent; border: none; box-shadow: none; gap: 4px; } .menu__dropdown.is-open .menu__submenu { display: flex; flex-direction: column; } .menu__sublink { text-align: center; padding: 10px 8px; font-size: 15px; } .header--open .menu, .header--open .header__mobile-extra { display: flex; } .header__mobile-extra .header__phone { align-items: center; text-align: center; padding: 8px 0; margin-top: 25px; } .header__mobile-extra .header__phone-num { font-size: 20px; } .header__mobile-extra .header__phone-sub { display: block; font-size: 13px; } .header__mobile-extra .header__socials { justify-content: center; margin-top: -10px; } .header__mobile-extra .btn--calc-mobile { width: 100%; justify-content: center; height: 52px; } /* Раскрытые подпункты делают шапку выше экрана, а она position:fixed: прокручивается страница под ней, а не меню, и нижние пункты вместе с телефоном и кнопкой «Рассчитать» становятся недостижимы. Ограничиваем высотой экрана и разрешаем прокрутку внутри. dvh — чтобы на телефоне не срезало низ под адресной строкой, vh перед ним оставлен запасным для браузеров без поддержки dvh. overscroll-behavior не даёт странице «подхватить» жест, когда список домотан до конца. Селектор из двух классов намеренно: ниже, в блоке 1024px, .header задаёт padding целиком, и одиночный класс потерял бы нижний отступ. */ .header.header--open { max-height: 100vh; max-height: 100dvh; padding-bottom: 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .footer__top { grid-template-columns: repeat(2, 1fr); gap: 15px; } .reviews__grid { grid-template-columns: repeat(3, 1fr); } .blog__grid { grid-template-columns: repeat(2, 1fr); } .reasons__grid { grid-template-columns: repeat(2, 1fr); } } /* Матовая подложка раскрытого меню. В базовых стилях .header__bar залит rgba(242,242,242,.75) — сквозь четверть прозрачности просвечивала страница, и раскрытое меню читалось поверх фотографии героя. Ниже 769px этой проблемы нет: там .header уже сплошь белый, а .header__bar прозрачный, поэтому правило ограничено снизу — иначе оно вернуло бы на телефонах серую карточку. backdrop-filter размывает то, что осталось за 4% прозрачности; браузеры без его поддержки просто получат почти сплошную заливку. */ @media (max-width: 1199px) and (min-width: 769px) { .header--open .header__bar { background: rgba(242, 242, 242, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(15, 22, 40, .12); } } /* Tablet Portrait: 1100px */ @media (max-width: 1100px) { .hero__text { display: flex; flex-direction: column; gap: 40px; max-width: 470px; } } /* Tablet Landscape: 1024px */ @media (max-width: 1024px) { .container { max-width: 100%; padding: 0 20px; } .hero { margin-top: 0px; } .hero__inner { min-height: auto; display: flex; flex-direction: column; } .hero__content { width: 100%; padding-top: 30px; gap: 30px; order: 2; } .hero__title { font-size: 38px; line-height: 44px; max-width: 100%; } .hero__image { position: relative; width: 100%; height: 400px; margin-top: 0px; } .hero__slide img, .hero__image > img { width: 100%; height: 100%; } .hero__badge { right: 20px; bottom: 20px; } .hero__btns { flex-direction: column; align-items: flex-start; gap: 20px; } .hero__features { flex-wrap: wrap; gap: 20px; } .h2 { font-size: 32px; line-height: 40px; } .lead { font-size: 15px; line-height: 22px; } .stats__row { flex-wrap: wrap; } .stat { flex: 1 1 calc(50% - 13px); min-width: 250px; height: auto; padding: 25px 20px; } .stat__num { font-size: 48px; line-height: 38px; } .products__grid { gap: 20px; } .pcard { flex: 1 1 calc(50% - 10px); min-width: 260px; } .tech__grid { gap: 20px; } .tcard { flex: 1 1 calc(50% - 10px); min-width: 260px; } .work__grid { gap: 20px; } .work__img { height: 220px; } .quiz { padding: 60px 0; } .quiz__card { padding: 30px; } .quiz__options { grid-template-columns: repeat(2, 1fr); gap: 12px; } .quiz__progress { flex-direction: column; align-items: flex-end; min-width: auto; gap: 10px; padding-top: 0; min-width: 40%; } .quiz__bar { width: 100%; max-width: 400px; } .quiz__nav { margin-top: 80px; flex-wrap: wrap; gap: 15px; } .reviews__grid { gap: 20px; } .review__head { flex-wrap: wrap; gap: 10px; } .faq__inner { flex-direction: column; gap: 40px; } .faq__left { width: 100%; } .reasons__grid { gap: 20px; } .reason__num { font-size: 72px; line-height: 72px; top: -15px; } .blog__grid { gap: 20px; } .post__img { height: 220px; } .form-sec { padding: 60px 0; } .form-card { padding: 30px; } .form__row { flex-direction: column; gap: 15px; } .form__submit { flex-direction: column; align-items: stretch; gap: 15px; } .form-card__btns { flex-direction: column; } .footer { padding: 60px 0 30px; } .footer__top { gap: 30px; } .footer__bottom { flex-direction: column; gap: 20px; align-items: flex-start; } .footer__legal { flex-direction: column; gap: 15px; } .mbtn { height: 51px ! important; font-size: 15px; display: flex; padding: 15px 0px; } } /* Tablet Portrait: 768px */ @media (max-width: 768px) { .page { padding-top: 75px; } /* Кнопка расчёта закреплена внизу экрана: на телефоне первый экран уходит вверх за пару свайпов, и дальше оставить заявку можно только из формы в подвале. Закреплён весь .hero__cta, а не одна кнопка: подпись внутри него всё равно скрыта, а так не приходится вынимать ссылку из разметки первого экрана. На телефоне строки «Ответим за 15 минут» нет нигде — постоянная подпись съедала бы высоту экрана, тот же текст человек читает в подписи всплывающей формы. env(safe-area-inset-bottom) — запас под полосу жестов на iPhone. */ .hero__cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; align-items: center; padding: 12px 15px calc(12px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 20px rgba(15, 22, 40, .12); } .hero__cta .hero__note { display: none; } .hero__cta .btn--lg { width: 100%; max-width: none; } /* Секции первого уровня объявлены с position:relative и z-index:1 — каждая заводит свой контекст наложения. Панель лежит внутри .hero, поэтому любая секция ниже по коду закрашивала её при прокрутке, какой бы z-index не стоял у самой панели. Поднимаем всю .hero над соседями; 800 — ниже всплывающей формы (900) и шапки (1000), чтобы окно и раскрытое меню по-прежнему перекрывали панель. */ .hero { z-index: 800; } /* Место под панель. Отступ у подвала, а не у .page: у подвала тёмный фон, и белая полоса под ним бросалась бы в глаза. :has — чтобы блог, контакты и прочие страницы без первого экрана, где панели нет, не получили пустоту внизу. */ body:has(.hero__cta) .footer { padding-bottom: 100px; } .hero__title { font-size: 32px; line-height: 38px; } .hero__image { height: 300px; } .hero__meta { gap: 15px; } .header__bar { background: none; border: 0px; } .header__phone-mobile { grid-column: 1; grid-row: 1; box-shadow: 0px 15px 22px #00000008; width: 55px; height: 55px; } .header { padding: 0px 15px 0px; background: #fff; } .hero { margin-top: 17px; padding: 0px 0px; } .hero__content { padding: 30px 15px; gap: 30px; order: 2; } .header__burger { box-shadow: 0px 15px 22px #00000008; width: 55px; height: 55px; } .h2 { font-size: 28px; line-height: 34px; } .section { margin-top: 60px; } .head { gap: 20px; margin-bottom: 30px; } .stat { flex: 1 1 100%; } .stat__num { font-size: 42px; line-height: 34px; } .pcard { flex: 1 1 100%; } .tcard { flex: 1 1 100%; } .work__grid { grid-template-columns: 1fr; } .quiz__options { grid-template-columns: 1fr; } .opt { height: 50px; padding: 0 16px; font-size: 15px; } .opt__box { width: 26px; height: 26px; } .reviews__grid { grid-template-columns: 1fr; } .faq__q { padding: 20px; font-size: 15px; } .faq__sign { font-size: 22px; } .faq__a { padding: 0 20px; font-size: 14px; } .faq__item--open .faq__a { padding-bottom: 20px; } .reasons__grid { grid-template-columns: 1fr; } .reason__num { font-size: 60px; line-height: 60px; top: -10px; left: 10px; } .blog__grid { grid-template-columns: 1fr; } .post__img { height: 200px; } .form-sec { padding: 50px 0; } .form-card { padding: 25px; gap: 20px; } .field input { height: 50px; font-size: 15px; } .form__attach { height: 56px; font-size: 15px; } .mbtn { height: 46px; font-size: 15px; } .footer__top { grid-template-columns: 1fr; gap: 30px; } .footer__col--contacts .footer__phone { font-size: 24px; } .footer__mail { font-size: 18px !important; } .footer__hours { font-size: 18px; line-height: 26px; } } /* Mobile: 640px */ @media (max-width: 640px) { .container { padding: 0 16px; } .reviews__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 12px; margin-left: 0; margin-right: -16px; padding-left: 16px; padding-right: 16px; grid-template-columns: unset; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; } .reviews__grid.reviews__grid--dragging { cursor: grabbing; user-select: none; } .reviews__grid::-webkit-scrollbar { display: none; } .reviews__grid .review { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; scroll-snap-stop: always; } .blog__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 12px; margin-left: 0; margin-right: -16px; padding-left: 16px; padding-right: 16px; grid-template-columns: unset; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; } .blog__grid.blog__grid--dragging { cursor: grabbing; user-select: none; } .blog__grid::-webkit-scrollbar { display: none; } .blog__grid .post { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; scroll-snap-stop: always; } .form-sec__list li img { content: url('../icons/ico_white.svg'); } .stat__label.ondesc { display: none; } .stat__label.onmob { display: block; } .hero__title { font-size: 28px; line-height: 34px; } .hero__image { height: 250px; } .hero__badge { gap: 20px; } .hero__badge-main { height: 45px; padding: 0 8px 0 20px; font-size: 14px; } .hero__badge-arrow { width: 30px; height: 30px; } .h2 { font-size: 24px; line-height: 30px; } .lead { font-size: 14px; line-height: 20px; } .pill { height: 50px; padding: 0 16px; font-size: 14px; } .reason__num { font-size: 96px; line-height: 75px; top: -10px; left: 10px; } .quiz { margin-top: 50px; padding: 50px 0; overflow: hidden; } .btn--primary, .btn--red, .btn--outline { height: 46px; font-size: 15px; padding: 0 20px; } .iconbtn { width: 42px; height: 42px; } .production { padding: 50px 0; } .btn--sm { height: 42px! important; max-width: 265px! important; width: 100%! important; } .btn--lg { height: 55px; padding: 5px 5px 5px 15px; } .hero { margin-top: 0; padding: 0px 0px; } .stat { padding: 20px 16px; gap: 15px; } .stat__num { font-size: 36px; line-height: 30px; } .stat__unit { font-size: 14px; line-height: 15px; margin-top: 0; } .deco--top { top: 0; height: 1776px; object-fit: fill; opacity: 80%; } .stats__row { display: flex; gap: 10px; } .stat { border: 0px solid rgba(15, 22, 40, .2); } .pcard__img { height: 175px; } .pcard__title { font-size: 18px; line-height: 22px; } .pcard__price { font-size: 18px; } .tcard { padding: 20px; } .tcard__icon { width: 50px; height: 50px; } .tcard__icon img { width: 50px; height: 50px; } .tcard__title { font-size: 18px; line-height: 22px; } .work__img { height: 200px; } .work__title { font-size: 18px; line-height: 22px; } .quiz__card { padding: 20px; border-radius: 20px; } .quiz__title { font-size: 21px; line-height: 22px; } .opt__box { width: 30px; height: 30px; } .opt { height: 50px; padding: 0 16px; font-size: 16px; } .quiz__nav { margin-top: 20px; flex-wrap: wrap; gap: 15px; } .quiz__step { width: 49px; height: 49px; font-size: 14px; } .review__name { font-size: 15px; } .review__text { font-size: 14px; line-height: 23px; } .faq__q { padding: 18px 20px; font-size: 16px; gap: 12px; line-height: 22px; } .faq__list { gap: 5px; } .faq__sign { font-size: 30px; } .faq__inner { gap: 20px; } .reason__card { padding: 20px; } .reason__title { font-size: 21px; line-height: 22px; } .mbtn { height: 51px ! important; font-size: 15px; display: flex; padding: 15px 0px; } .form-card__btns { display: flex; gap: 10px; } .mbtn { height: 51px ! important; font-size: 15px; display: flex; padding: 15px 0px; } .post__title { font-size: 18px; line-height: 22px; } .form-card { padding: 20px; border-radius: 20px; } .form-card__msg { font-size: 15px; border-top: 1px solid rgba(15, 22, 40, 0.1); padding-top: 20px; } .footer { padding: 40px 0 25px; } .footer__logo { height: auto; margin-bottom: 16px; } .footer__tagline { font-size: 14px; line-height: 22px; color: #fff; margin-bottom: 24px; } .footer__tagline br { display:none; } .soc { width: 41px; height: 41px; } .soc img { width: 41px; height: 41px; } .footer__h { font-size: 24px; margin-bottom: 24px; font-weight: 500; } .form-sec { margin-top: 50px; } .footer__col a { font-size: 16px; padding: 10px 0; } .footer__col--contacts .footer__phone { font-size: 33px; } .footer__mail { font-size: 21px !important; margin-bottom: 20px; } .footer__hours { font-size: 21px; line-height: 30px; } .footer__inner { gap: 35px; } .footer__bottom { padding-top: 30px; } .footer__copy { font-size: 14px; color: #fff; max-width: 180px; } .footer__legal a { font-size: 14px; } } /* Small Mobile: 480px */ @media (max-width: 480px) { .header__bar { padding: 10px 12px; border-radius: 15px; } .section { margin-top: 50px; } .arrow-line { width: 30px; flex: 0 0 30px; flex-shrink: 0; } .stars { order: 1; margin-top: 0; align-self: flex-end; margin-left: auto; } .review__who { order: 2; margin-top: 15px; max-width: 230px; } .review__head { flex-wrap: wrap; } .review { padding: 20px; } .section__cta { margin-top: 20px; } .menu__item { font-size: 16px; min-height: 53px; padding: 10px 6px; } .quiz__qtext { order: 3; } .quiz__progress { flex-direction: row; align-items: flex-end; min-width: auto; gap: 10px; padding-top: 0; display: flex; width: 100%; } .hero__text { display: flex; flex-direction: column; gap: 25px; } .hero__cta { width: 100%; } .hero__explore { margin: 0 auto; } .hero__content { padding: 30px 15px 0px; } .header__mobile-extra .header__phone-num { font-size: 18px; } .hero__title { font-size: 32px; line-height: 35px; } .hero__image { height: 315px; } .hero__slider { height: 100%; } .hero__slide img { width: 100%; height: 100%; } .hero__badge { left: 15px; right: 10px; width: auto; justify-content: space-between; gap: 12px; } .hero__badge-main { gap: 20px; flex: none; height: 45px; padding: 0 10px 0 20px; font-size: 14px; } .hero__badge-arrow { width: 30px; height: 30px; } .hero__dots { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-left: auto; flex: none; } button.hdot.hdot--active {background: var(--grad);} .hdot { width: 9px; height: 9px; background: #fff; } .h2 { font-size: 27px; line-height: 30px; } .head__text { gap: 20px; } .stat__num { font-size: 48px; line-height: 35px; } .quiz__qhead { flex-direction: column; gap: 10px; } .quiz__nav { flex-direction: row; } .quiz__nav .btn { width: 100%; max-width: 133px ! important; } ul.footer_menu { display: flex; flex-wrap: wrap; gap: 20px; } .footer_menu li { padding: 0px 0px; } .post__img { height: 260px; } .badge--onimg { right: 16px; width: fit-content; left: auto; } .btn--outline { width: 100%; } .header__mobile-extra .btn--calc-mobile { width: 100%; justify-content: space-between; height: 52px; } } /* Фоновое видео вместо картинки в блоках production / quiz / form. object-fit из правил выше работает и для